realty/virgo.wzfrontend/workark_wx/subPages/workarkPage/surOrder/surOrder.vue

<template>
	<view class="sure-order">
		<view class="order-detail">
			<view class="order-title">
				<uv-text text="订单详情" :customStyle="{
					fontWeight:'bold'
				}" size="32"></uv-text>
			</view>
			<view class="order-content">
				<uv-image :src="imageUrl(orderData.rotatingImages) || ''" width="180" height="180" radius="16">
				</uv-image>
				<view class="order-content-detail">
					<uv-text :text="orderData.name" :lines="2" size="28"></uv-text>
					<uv-text text="x1" type="content" size="28" :customStyle="{
						background:'#eee',
						padding:'2rpx 16rpx',
						borderRadius:'4rpx',
						margin:'10rpx 0'
					}"></uv-text>
					<uv-text :text="orderData.price" type="error" size="32" mode="price"></uv-text>
				</view>
			</view>
			<view class="order-item">
				<uv-text text="优惠券" size="28"></uv-text>
				<view class="text-flex"
					@tap="$navigateTo('/subPages/workarkPage/coupon/coupon?productLevelId=' + orderData.productLevelId + '&price=' + orderData.price)">
					<text class="order-item-icon">-</text>
					<uv-text :text="minus" type="error" size="28" mode="price"></uv-text>
					<uv-icon name="arrow-right" size="32"></uv-icon>
				</view>
			</view>
			<view class="order-count">
				<view class="text-flex">
					<uv-text text="合计：" size="28"></uv-text>
					<uv-text :text="countPriceData.totalFee" type="error" size="28" mode="price"></uv-text>
				</view>
			</view>
		</view>
		<view class="hui-button-box">
			<view class="button-flex">
				<uv-text :text="countPriceData.totalFee" type="error" size="28" mode="price"></uv-text>
				<view class="text-flex">
					<uv-text text="-" type="error" size="24"></uv-text>
					<uv-text :text="minus" type="error" size="24" mode="price"></uv-text>
				</view>
			</view>
			<uv-button type="primary" text="立即支付" @tap="payment" :disabled="isCount"></uv-button>
		</view>
	</view>
</template>

<script>
	import {
		getServeById,
		countPriceAPI
	} from '@/request/api/workark.js'
	export default {
		data() {
			return {
				orderId: '',
				orderData: {
					price: 0
				},
				countPriceData: {
					productCoupon: [],
					totalFee: 0
				},
				isCount: false,
				couponChecked: []
			};
		},
		onLoad(body) {
			this.orderId = body.orderId;
			uni.$on('changeCoupon', this.changeCoupon);
			if (this.orderId) this.init();
		},
		computed: {
			minus() {
				let data = this.countPriceData.productCoupon || [];
				let num = 0;
				for (var i = 0; i < data.length; i++) {
					num += data[i].minus
				}
				return num;
			}
		},
		methods: {
			async init() {
				let orderData = await getServeById(this.orderId);
				if (!orderData.state) return;
				this.orderData = orderData.data;
				this.countPrice();
			},
			imageUrl(data) {
				if (!data) return '';
				let imgData = JSON.parse(data)[0];
				if (!imgData) return '';
				return imgData.url;
			},
			async countPrice() {
				this.isCount = true;
				let couponIds = this.couponChecked.map(node => node.id).join(',') || -1;
				let countPriceData = await countPriceAPI(this.orderData.id, couponIds);
				this.isCount = false;
				if (!countPriceData.state) return;
				this.countPriceData = countPriceData.data;
			},
			changeCoupon(data) {
				this.couponChecked = data;
				this.countPrice();
			},
			payment() {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(Date.now()),
					nonceStr: 'BOSSHAND',
					package: 'prepay_id=wx3c006d364161d240',
					signType: 'MD5',
					paySign: '',
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	.sure-order {
		padding: 30rpx;
	}

	.order-detail {
		background: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
	}

	.order-title {
		padding-bottom: 30rpx;
	}

	.order-content {
		display: flex;
	}

	.order-content-detail {
		flex: 1;
		width: 0;
		margin-left: 30rpx;
	}

	.order-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
		border-bottom: 1px solid $uv-border-color;
		margin-bottom: 30rpx;
	}

	.order-item-icon {
		color: $uv-error;
	}

	.order-count {
		display: flex;
		justify-content: flex-end;
	}

	.button-flex {
		margin-right: 20rpx;
	}
</style>