massage-front/pages_order/order/createOrder.vue

<template>
	<view class="page">

		<view class="bg"></view>

		<view class="content">

			<!-- 导航栏 -->
			<navbar title="商品支付" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" color="#fff" />

			<!-- 商品详情 -->
			<productCard :data="payOrderProduct[0]" size="medium" :readonly="true"></productCard>

			<view class="card payment">
				<uv-radio-group v-model="payMethod">
					<view class="flex payment-item">
						<image class="icon" src="../static/createOrder/icon-wx.png" mode="widthFix"></image>
						<text class="label">微信支付</text>
						<uv-radio :name="0" activeColor="#84A73F" size="39rpx" icon-size="39rpx"/>
					</view>
					<view class="flex payment-item">
						<image class="icon" src="../static/createOrder/icon-account.png" mode="widthFix"></image>
						<!-- todo: check -->
						<text class="label">账户余额<text class="desc">{{ `（余额:￥${userInfo.price || 0}）` }}</text></text>
						<uv-radio :name="1" activeColor="#84A73F" size="39rpx" icon-size="39rpx"/>
					</view>
				</uv-radio-group>
			</view>

			
			<!-- 优惠券 -->
			<view @click="openCoupon" class="card flex coupon">
				<image class="icon" src="@/pages_order/static/createOrder/icon-coupon.png" mode="widthFix"></image>
				<!-- todo: check is selected coupon -->
				<view class="label">优惠券<text v-if="selectedCoupon[0]" class="desc">{{ `（满减券:${coupon.vouchersId_dictText}）` }}</text></view>
				<view v-if="selectedCoupon[0]">
					<uv-checkbox-group v-model="selectedCoupon" shape="circle" >
						<uv-checkbox :name="1" size="39rpx" icon-size="39rpx" activeColor="#84A73F"></uv-checkbox>
					</uv-checkbox-group>
				</view>
				<template v-else>
					<image class="icon-arrow" src="../static/createOrder/icon-arrow.png" mode="widthFix"></image>
				</template>
			</view>
		</view>

		<!-- 下单 -->
		<view class="flex bar">
			<view class="flex count">
				<text>合计：</text>
				<view class="price">
					<text class="price-unit">¥</text>
					<text>{{ totalPrice }}</text>
				</view>
			</view>
			<view class="btn btn-pay" @click="submit">
				立即支付
			</view>
		</view>

		<!-- 优惠券选择-->
		<uv-popup ref="couponPopup" :round="30">
			<couponList ref="couponList" height="60vh" :status="0" @select="selectCoupon" />
		</uv-popup>
		
		<configPopup ref="popup"></configPopup>

	</view>
</template>

<script>
	import productCard from '@/components/product/productCard.vue'
	import couponList from '@/components/couponList/couponList.vue'

	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			productCard,
			couponList
		},
		data() {
			return {
				orderId: null,
				selectedCoupon: [],
				num: 1,
				coupon: {},
				payMethod : 0,
			}
		},
		computed: {
			totalPrice() {
				let price = 0

				this.payOrderProduct.forEach(n => {
					price += n.price * (n.num || 1)
				})

				if (this.coupon.id) {
					price -= (this.coupon.money || 0)
				}

				return Number(price).toFixed(2)
			},
			...mapState(['userInfo', 'payOrderProduct']),
		},
		onLoad({ id }) {
			this.orderId = id
			
			if(uni.getStorageSync('token')) {
				this.$store.commit('getUserInfo')
				this.$store.commit('getUserCenterInfo')
			}
		},
		onShow() {
			this.getCouponList()
		},
		methods: {
			//获取优惠券列表
			getCouponList() {
				this.$refs.couponList.getCouponList()
			},
			// 打开优惠券选择
			openCoupon() {
				this.$refs.couponPopup.open('bottom')
			},
			// 选择优惠券
			selectCoupon(e) {
				this.coupon = e
				this.$refs.couponPopup.close()

				this.selectedCoupon = [1]
			},

			async fetchPayOrder() {
				// todo: check
				let params = {
					payType : this.payMethod,
					
					// id: this.payOrderProduct[0].id,
					// num: this.payOrderProduct[0].num,
					// memberNum : 1,
				}

				let api = 'createOrder'

				if (this.orderId) { // 支付订单
					params.orderId = this.orderId
					api = 'payOrder'
				} else { // 创建订单
					params.itemId = this.payOrderProduct[0].id
					params.amount = this.totalPrice
				}
			
				const res = await this.$fetch(api, params, false)

				return res
			},
			async submit() {

				try {

					const res = await this.fetchPayOrder()

					if (!res.success) {
						return
					}

					if (this.payMethod == 1) { // 账户余额

					} else { // 微信支付
						console.log('--发起支付接口回调', res)
						
						// #ifdef MP-WEIXIN
						await uni.requestPaymentWxPay(res)
						// #endif
						
						
						// #ifdef H5
						await this.$wxPay(res)
						// #endif
					}

					uni.showToast({
						title: '下单成功',
						icon: 'none'
					})

					setTimeout(uni.redirectTo, 700, {
						url: '/pages/index/order'
					})
				} catch (err) {
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	$bar-height: 132rpx;

	.page {
		overflow: auto;
		padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
		background-color: #F5F5F5;

		
		.bg {
			width: 100vw;
			height: 331rpx;
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}

		.content {
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			padding: 0 13rpx;
			box-sizing: border-box;
		}

	}

	.card {
		padding: 22rpx 42rpx 34rpx 41rpx;
		color: #000000;
		font-size: 28rpx;
		

		.icon {
			width: 46rpx;
			height: auto;
			margin-right: 18rpx;
		}

		.label {
			flex: 1;
		}

		.desc {
			color: #999999;
		}

	}

	.payment {
		margin-top: 23rpx;

		&-item {
			width: 100%;

			& + & {
				margin-top: 38rpx;
			}
		}

	}

	.coupon {
		margin-top: 15rpx;
		
		.icon-arrow {
			width: 29rpx;
			height: auto;
		}

	}

	

	// 下单
	.bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: $bar-height;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: $uni-fg-color;

		.count {
			flex: 1;
			color: #000000;
			font-size: 28rpx;
			margin-left: 48rpx;

			justify-content: flex-start;

			.price {
				color: #FF2A2A;
				font-size: 30rpx;

				&-unit {
					font-size: 18rpx;
				}
			}
		}

		.btn {
			border: none;
			line-height: 1;
			background-color: transparent;
			padding: 0;
			width: auto;
			height: auto;
			margin: 0;

			&-pay {
				margin-right: 41rpx;
				padding: 24rpx 137rpx;
				color: $uni-text-color-inverse;
				font-size: 28rpx;
				border-radius: 44rpx;
				background-image: linear-gradient(to right, #84A73F, #D8FF8F);
			}

		}
	}
</style>