yixiang/pageB/order-detail.vue

<template>
	<view class="content">
		<view class="top vflex acenter jcenter">
			<text v-if="detail.status == 'applied'">已提交，请添加客服</text>
			<text v-if="detail.status == 'passed'">兑换成功</text>
			<text v-if="detail.status == 'applied'">已兑换请与客服沟通</text>
			<text v-if="detail.status == 'passed'">恭喜您成功兑换商品</text>
		</view>
		<view class="box address vflex">
			<text>{{detail.province_name}}{{detail.city_name}}{{detail.district_name}}{{detail.address}}</text>
			<text>{{detail.name}} {{detail.mobile}}</text>
		</view>
		<view class="box good">
			<view class="hflex good-detail">
				<image :src="detail.goods.image" mode="aspectFill"></image>
				<view class="vflex center jbetween">
					<view class="name text_hide2">{{detail.goods.name}}</view>
					<!-- <view class="spec">{{detail.goods.spec}}</view> -->
				</view>
				<view class="right vflex aend">
					<view class="price">{{detail.goods.price}}积分</view>
					<!-- <view class="num">X{{detail.goods.num}}</view> -->
				</view>
			</view>
			<view class="cell hflex acenter jbetween">
				<view class="label">商品积分</view>
				<view class="value">{{detail.goods.price}}</view>
			</view>
			<view class="cell hflex acenter jbetween">
				<view class="label">运费</view>
				<view class="value">免邮</view>
			</view>
			<view class="cell hflex acenter jbetween">
				<view class="label">优惠券</view>
				<view class="value text_hide">{{detail.coupon_name || '-'}}</view>
			</view>
			<view class="cell hflex acenter jbetween">
				<view class="label">优惠积分</view>
				<view class="value" style="color: #EE5850;">{{detail.coupon_discount_amount || 0}}</view>
			</view>
			<view class="cell hflex acenter jbetween">
				<view class="label">实付积分</view>
				<view class="value" style="color: #EE5850;">{{detail.pay_amount}}</view>
			</view>
			<view class="cell hflex acenter jbetween" style="border-top: 1px solid #F1F8FE; padding-top: 30rpx;">
				<view class="label">订单编号</view>
				<view class="value">{{detail.order_no}} | <span style="padding-left: 10rpx;"
						@click="copy(detail.order)">复制</span></view>
			</view>
			<view class="cell hflex acenter jbetween">
				<view class="label">下单时间</view>
				<view class="value">{{detail.created_at}}</view>
			</view>
			<view class="cell hflex acenter jbetween" style="padding-bottom: 0;">
				<view class="label">兑换时间</view>
				<view class="value">{{detail.created_at}}</view>
			</view>
		</view>
		<view class="btn hflex acenter jcenter" @click="show_wx = true">
			<image src="static/kefu.png" mode="aspectFill"></image>
			<text>添加客服</text>
		</view>
		<u-popup :show="show_wx" @close="toclose" mode="center" :round="10">
			<kefu-wx :wxcode="wxcode" @submit="toclose"></kefu-wx>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	import kefuWx from './components/kefu-wx.vue'
	var that = ''
	export default {
		components: {
			kefuWx
		},
		data() {
			return {
				id: '',
				detail: {},
				show_wx: false,
				wxcode: ''
			}
		},
		onLoad(option) {
			that = this
			if (option.id) {
				this.id = option.id
			}
			this.getdata()
		},
		onShow() {

		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		},
		methods: {
			toclose() {
				this.show_wx = false
			},
			copy(val) {
				uni.setClipboardData({
					data: val,
					success: function() {
						$api.info('复制成功')
					}
				});
			},
			getdata() {
				$api.req({
					url: 'integral/order/' + that.id
				}, function(res) {
					that.detail = res.data
				})
				$api.req({
					url: 'config',
					data: {
						module: 'basic'
					}
				}, function(res) {
					that.wxcode = res.data.customer_service_qrcode
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 24rpx;
		background: #f4f4f4;

		.btn {
			width: 702rpx;
			height: 88rpx;
			background: #00B0B0;
			border-radius: 44rpx;
			margin: 40rpx 0 0;

			text {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin: 0 12rpx 0 0;
			}
		}

		.box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin: 0 0 20rpx;
		}

		.good {
			padding: 24rpx 20rpx;
			box-sizing: border-box;

			.title {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #222222;
				padding: 0 0 26rpx;
			}

			.good-detail {
				padding: 0 0 40rpx;

				.right {
					.price {
						font-size: 28rpx;
						font-family: SFPro, SFPro;
						font-weight: 500;
						color: #222222;
					}

					.num {
						font-size: 24rpx;
						font-family: SFPro, SFPro;
						font-weight: 400;
						color: #999999;
						padding: 18rpx 0 0;
					}
				}

				image {
					width: 160rpx;
					height: 160rpx;
					margin: 0 20rpx 0 0;
				}

				.center {
					width: 330rpx;

					.name {
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #222222;
					}

					.spec {
						max-width: max-content;
						font-size: 22rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #888888;

						margin: 16rpx 0 0;
					}
				}
			}

			.cell {
				padding: 0 0 36rpx;

				.label {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.value {
					white-space: nowrap;
					max-width: 350rpx;
					font-size: 28rpx;
					font-family: SFPro, SFPro;
					font-weight: 400;
					color: #222222;
				}

				image {
					width: 28rpx;
					height: 28rpx;
					margin: 0 0 0 16rpx;
				}
			}
		}

		.address {
			text:first-child {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #222222;
			}

			text:last-child {
				font-size: 24rpx;
				font-family: SFPro, SFPro;
				font-weight: 300;
				color: #666666;
				padding: 16rpx 0 0;
			}
		}

		.top {
			width: 100%;
			padding: 40rpx 0 28rpx;

			text:first-child {
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #222222;
			}

			text:last-child {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #888888;
			}
		}
	}
</style>