massage-front/pages_order/order/createOrder.vue

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

		<view class="content">

			<!-- 商品详情 -->
			<productCard :data="payOrderProduct[0]" :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>
						<text class="label">账户余额<text class="desc">{{ `（余额:￥${riceInfo.balance || 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">{{ `（满减券:${'满400减40'}）` }}</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>
					<!-- todo: check -->
					<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" @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 {
				selectedCoupon: [1],
				num: 1,
				coupon: {},
				payMethod : 0,
			}
		},
		computed: {
			totalPrice() {
				let price = 0

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

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

				return Number(price).toFixed(2)
			},
			...mapState(['userInfo', 'payOrderProduct']),
		},
		onLoad(args) {
			this.$store.commit('getUserInfo')
		},
		onShow() {
			this.getCouponList()
		},
		methods: {
			//获取优惠券列表
			getCouponList() {
				this.$refs.couponList.getCouponList()
			},
			// 打开优惠券选择
			openCoupon() {
				this.$refs.couponPopup.open('bottom')
			},
			// 选择优惠券
			selectCoupon(e) {
				// todo

				//判断优惠券限制
				let {
					useMoney
				} = e
				let productTotalPrice = 0
				this.payOrderProduct.forEach(item => {
					productTotalPrice += item.price
				})
				if (productTotalPrice < useMoney) {
					return uni.showToast({
						title: `此优惠券需要满${useMoney}使用`,
						icon: "none"
					})
				}
				this.coupon = e
				this.$refs.couponPopup.close()

				this.selectedCoupon = [1]
			},

			submit() {

				let data = {}
				let api = ''
	
				data = {
					addressId,
					num: this.payOrderProduct[0].num,
					shopId: this.payOrderProduct[0].id,
					payType : this.payMethod,
					memberNum : 1,
				}
				api = 'createOrder'
				
				if(this.coupon.id){
					data.couponId = this.coupon.id
				}
                if(this.isGive == 2){
					data.memberNum = this.multiNum
				}

				this.$api(api, data, res => {
					if (res.code == 200) {
						
						if(this.payMethod == 1){
							// uni.showToast({
							// 	title: '下单成功',
							// 	icon: 'none'
							// })
							this.paySuccess(res)
							return
						}
						
						uni.requestPaymentWxPay(res).then(e => {
							uni.showToast({
									title: '下单成功',
									icon: 'none'
							})

							this.paySuccess(res)
						}).catch(n => {
							setTimeout(uni.redirectTo, 700, {
									url: '/pages/index/order'
							})
						})
					
					}
				})
			},
			paySuccess(res){
				setTimeout(uni.redirectTo, 700, {
						url: '/pages/index/order'
				})
			},
		}
	}
</script>

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

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

		/deep/ .nav-bar__view {
			padding-bottom: 190rpx;
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}

		.content {
			position: absolute;
			z-index: 999;

			transform: translateY(-118rpx);
		
			width: 100vw;
			padding: 0 13rpx;
			box-sizing: border-box;
		}

		/deep/ .product-card__view {
			// margin: 0 13rpx;
			padding: 27rpx 25rpx;
			// width: calc(100vw - 13rpx*2);
			width: 100%;
			box-sizing: border-box;
			// transform: translateY(-50%);

			.img {
				width: 184rpx;
				height: 184rpx;
			}

			.title {
				margin-bottom: 14rpx;
			}

			.price {
				margin-top: 15rpx;
			}

			.sales {
				margin-top: 15rpx;
			}
		}

	}

	.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>