realty/virgo.wzfrontend/workark_wx/subPages/workarkPage/components/sureOrder.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,
		createOrder,
		getWxPay
	} from '@/request/api/workark.js'
	export default {
		props: {
			orderId: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				orderData: {
					price: 0
				},
				countPriceData: {
					productCoupon: [],
					totalFee: 0
				},
				isCount: false,
				couponChecked: [],
				order: {}
			};
		},
		mounted() {
			uni.$on('changeCoupon', this.changeCoupon);
			if (this.orderId) this.init();
		},
		beforeDestroy() {
			uni.$off('changeCoupon', this.changeCoupon);
		},
		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();
			},
			async payment() {
				uni.showLoading({
					title: '订单确认中...'
				})
				let couponIds = this.couponChecked.map(node => node.id).join(',') || -1;
				let orderData = await createOrder(this.orderData.id, this.$store.getters.organization.id, couponIds);
				if (orderData.state) {
					let wxConfig = await getWxPay(orderData.data.orderNo, uni.getStorageSync('openId'));
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: wxConfig.data.timeStamp,
						nonceStr: wxConfig.data.nonceStr,
						package: wxConfig.data.prepayId,
						signType: wxConfig.data.signType,
						paySign: wxConfig.data.paySign,
						success: res => {
							this.paymentCallback(orderData.data.id, '支付成功');
						},
						fail: err => {
							this.paymentCallback(orderData.data.id, '未支付');
						}
					});
				}
			},
			paymentCallback(orderId, status) {
				this.$emit('closePopup');
				uni.hideLoading();
				this.$navigateTo(`/subPages/workarkPage/paymentStatus/paymentStatus?orderId=${orderId}&status=${status}`);
			}
		},
	}
</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>