discounts-minapp/orderFood/pay.vue

<template>
	<view class="food-pay">
		<view class="content shop-box">
			<view class="shop-name">
				{{shopName}}
			</view>
			<view class="address">
				{{address}}
			</view>
		</view>
		
		<view class="content goods-box">
			<view class="title">
				订单信息
			</view>
			<view class="goods-item" v-for="(item,index) in createQuery.products" :key="index">
				<view class="left">
					<image class="icon" :src="item.imageUrl" mode=""></image>
					<view class="name">
						{{item.nameCn}}
					</view>
					<view class="num">
						x{{item.quantity}}
					</view>
				</view>
				
				<view class="right">
					￥{{item.sellPrice}}
				</view>
			</view>
			<view class="total-box">
				<view class="num">
					共{{totalNum}}件 
				</view>
				<view class="price">
					小计￥{{total}}
				</view>
			</view>
		</view>
		
		
		<view class="content">
			<view class="item">
				<view class="label">
					联系号码
				</view>
				<input class="value input" :maxlength="11" type="text" placeholder="请填写手机号" v-model="createQuery.phone" />
				
			</view>
		</view>
		<view class="content">
			<view class="item">
				<view class="label">
					备注
				</view>
				<input class="value input" type="text" placeholder="请填写备注" v-model="createQuery.remark" />
			</view>
		</view>
		
		
		<view class="type-box content">
			<view class="title">
				就餐方式
			</view>
			<view class="type-btn-box">
				<view class="btn" :class="[createQuery.eatType == 0?'active':'']" @click="handleType(0)">
					店内就餐
				</view>
				<view class="btn" :class="[createQuery.eatType == 1?'active':'']" @click="handleType(1)">
					打包带走
				</view>
			</view>
		</view>
		
		<view class="notice-box content">
			<view class="title">
				温馨提示
			</view>
			<view class="notice">
				1.付款成功后预计5-10分钟为您出餐(具体出餐时间以门店实际出餐时间为准)
			</view>
			<view class="notice">
				2.此订单为特价产品，付款成功后将无法退款。请确认后购买
			</view>
			<view class="notice">
				3.由于门店餐品库存不稳定等因素，存在少量出餐失败的情况，
				会自动退款
			</view>
			<view class="notice">
				4.出餐失败，3个工作日内自动退款到您付款账户
			</view>
		</view>
		
		<view class="btn-box">
			<view class="left">
				<view class="total">
					合计 <view class="price-box">
						<view class="unit">
							￥
						</view>
						<view class="price">
							{{total}}
						</view>
					</view>
				</view>
			</view>
			<button class="btn" @click="handleBuy" :loading="loading">
				去支付
			</button>
		</view>
		
		
		<u-modal :show="show" title="请你再次确认门店" showCancelButton cancelColor="#AAAAAA" confirmColor="#FF4D3A" cancelText="返回修改" confirmText="确认门店" @confirm="buy" @cancel="cancel">
			<view class="modal-box">
				<view class="shopName">
					{{shopName}}
				</view>
				<view class="address">
					{{address}}
				</view>
				
				<view class="notice">
					支付订单后无法退换，请确认下单门店！
				</view>
			</view>
			
		</u-modal>
		
	</view>
</template>

<script>
	import {createOrder} from '@/api/orderFood.js';
	import {
		creatPayOrder,
		queryPayOrder,
		payDetails
	} from '@/api/payment.js'
	export default {
		data() {
			return {
				totalNum:0,
				show:false,
				openTime:'',
				closeTime:'',
				active:0,
				loading:false,
				shopName:'',
				address:'',
				total:0,
				createQuery:{
					ot:uni.getStorageSync('ot'),
				  "channel": "ZhongShu",
				  "cityId": 0,
				  "eatType": 0,
				  "entPara": "",
				  "goodsName": "",
				  "imageCnUrl": "",
				  "mealTime": 0,
				  "phone": JSON.parse(uni.getStorageSync('userInfo')).phoneNum,
				  "products": [
					{
					  "imageUrl": "",
					  "nameCn": "",
					  "pid": "",
					  "productId": "",
					  "quantity": 0,
					  "sellPrice": 0,
					}
				  ],
				 //  "recAddr": {
					// "addr": "",
					// "contact": "",
					// "createTime": "",
					// "gender": "",
					// "id": "",
					// "lat": 0,
					// "lon": 0,
					// "number": "",
					// "phone": "",
					// "userId": ""
				 //  },
				  "remark": "",
				  "shopId": "",
				  "shopName": "",
				  "tableWare": true
				},
				query: {
					"msgType": "wx.unifiedOrder",
					"orderDesc": "测试",
					"orderNo": "",
					"channel":'ZhongShu',
					"subOpenId": "",
					"userId": ""
				},
			}
		},
		methods: {
			handleType(val){
				this.createQuery.eatType = val
			},
			cancel(){
				this.show = false
			},
			handleBuy(){
				this.show = true
			},
			buy(){
				this.show = false
				if (this.loading) return
					
					this.loading = true
					uni.showLoading({
						title: '支付中'
					})
					let that = this
					createOrder(this.createQuery).then(res => {
						this.loading = false
						if (res.state == 'Success') {
					
								this.query.orderNo = res.content.orderNo
								this.query.subOpenId = JSON.parse(uni.getStorageSync('userInfo')).openId
								this.query.orderDesc = '点餐'
								creatPayOrder(this.query).then(data => {
									that.payData = JSON.parse(data.content.miniPayRequest)
									if (data.content.miniPayRequest == null) return uni.hideLoading()
									uni.requestPayment({
										"provider": "wxpay",
										"orderInfo": that.payData,
										"appid": that.payData
										.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
										"paySign": that.payData.paySign,
										"nonceStr": that.payData.nonceStr, // 随机字符串
										"package": that.payData.package, // 固定值
										// "prepayid":  that.payData.package, // 统一下单订单号 
										"timeStamp": that.payData.timeStamp, // 时间戳（单位：秒）
										"signType": that.payData.signType, //签名算法
										success(msg) {
											console.log('msg', msg, res);
											queryPayOrder(that.query.orderNo).then(res1 => {
												if (res1.state == 'Success') {
													uni.hideLoading()
													uni.reLaunch({
														url: '/my/order/index'
													})
												}
											})
										},
										fail(e) {
											console.log('err', e);
											that.loading = false
											uni.hideLoading()
											uni.showToast({
												title: '取消支付',
												icon: 'fail'
											})
											// 取消支付后
											uni.reLaunch({
												url:'/my/order/foodOrder/detail?id='+that.query.orderNo
											})
							
										}
									})
			
								})
							// }
			
						}
					})
			}
		},
		onLoad() {
			let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.query.userId = userInfo.userId
			let that = this
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('pay', function(data) {
				that.createQuery.products = data.products
				that.createQuery.shopId = data.shopId
				that.createQuery.goodsName = data.products[0].nameCn
				that.createQuery.imageCnUrl = data.products[0].imageCnUrl
				that.shopName = data.shopName
				that.createQuery.shopName = data.shopName
				that.address = data.address
				that.total = data.total
				that.openTime=data.openTime
				that.closeTime=data.closeTime
				that.totalNum = data.totalNum
				console.log('data', data);
			})
		}
	}
</script>

<style lang="scss" scoped>
.food-pay{
	background: #F9F9F9;
	min-height: 100vh;
	padding: 20rpx 24rpx 100rpx;
	.content{
		margin-bottom: 20rpx;
		padding: 24rpx;
		border-radius: 16rpx;
		background: #fff;
		.title{
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.label{
				font-size: 24rpx;
				color: #AAAAAA;
			}
			.value{
				font-size: 24rpx;
				color: #222222;
			}
			.input{
				text-align: right;
			}
		}
	}
	.shop-box{
			// margin: 0 30rpx;
			// padding: 24rpx 24rpx 30rpx;
			background: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			.shop-name{
				font-weight: 600;
				font-size: 32rpx;
				color: #181818;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.address{
				font-weight: 300;
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 20rpx;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		
		
		.goods-box{
			.goods-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 12rpx 0;
				.left{
					display: flex;
					align-items: center;
					.icon{
						width: 80rpx;
						height: 80rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}
					.name{
						font-size: 28rpx;
						color: #222222;
						margin-left: 20rpx;
						max-width: 400rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					
					.num{
						font-size: 24rpx;
						color: #AAAAAA;
						margin-left: 20rpx;
					}
				}
				.right{
					font-size: 28rpx;
					color: #222222;
				}
			}
			
			.total-box{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 28rpx;
				color: #222222;
				padding-top: 24rpx;
				border-top: 1rpx solid #F0F0F0;
				.num{
					
				}
				.price{
					margin-left: 20rpx;
				}
			}
		}
	.type-box{
		.type-btn-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			.btn{
				width: 316rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #F6F6F6;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #AAAAAA;
			}
			.btn.active{
				background: rgba(238,67,32,0.1);
				color: #EE4320;
			}
		}
	}
	.notice-box{
		.notice{
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 20rpx;
		}
	}
	
	.btn-box {
		position: fixed;
		bottom: 0%;
		left: 0%;
		z-index: 2;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 10rpx 24rpx env(safe-area-inset-bottom);
		background: #fff;
		border-top: 1rpx solid #EEEEEE;
		.left{
			display: flex;
			align-items: flex-end;
			.total{
				font-weight: 300;
				font-size: 24rpx;
				color: #222222;
				display: flex;
				align-items: flex-end;
				margin-left: 6rpx;
				.price-box{
					display: flex;
					align-items: flex-end;
					font-weight: 400;
					font-size: 32rpx;
					color: #FF4D3A;
					.unit{
						font-size: 20rpx;
					}
					.price{
						font-weight: bold;
					}
				}
			}
		}
	
		.btn {
			width: 280rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: $uni-color-primary;
			border-radius: 40rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 0;
		}
	}
	
	.modal-box{
		.shop-name{
			font-weight: 600;
			font-size: 32rpx;
			color: #181818;
			width: 100%;
		
		}
		.address{
			font-weight: 300;
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 4rpx;
			width: 100%;
		}
		
		.notice{
			margin-top: 20rpx;
			font-weight: 300;
			font-size: 24rpx;
			color: #AAAAAA;
		}
	}
}
</style>