bc_wx_applet/pages/order/orderPaid/orderPaid.vue

<template>
	<view class="order-detail">
		<topNavBar title="订单详情" />
		<view class="order-state padding-sm dflex-b w-full">
			<view class="state-left">
				<view class="state-info">待支付 </view>
				<view class="order-code">剩余 09:59 逾期未支付将自动取消</view>
			</view>
			<!-- <uni-icons type="right" size="24" color="#FFF"></uni-icons> -->
		</view>
		<view class="gap"></view>
		<view class="padding-sm dflex-b bg-main" @click="show = true">
			<view class="dflex">
				<view class="w-full dflex-wrap-w send-label">
					取餐时间
				</view>
			</view>
			<u-icon slot="icon" size="20" name="arrow-right" label="15:00" labelPos="left"></u-icon>
			<!-- <u-icon slot="icon" size="20" name="arrow-right" :label="goods.orderPickup.writeOffTime" labelPos="left"></u-icon> -->
		</view>
		<view class="gap"></view>
		<view class="padding-sm dflex-b bg-main">
			<view class="dflex">
				<view class="w-full dflex-wrap-w send-label">
					取餐方式
				</view>
			</view>
			<view>
				<!-- 字段返回数据有问题 -->
				<radio style="transform: scale(0.85)" value="r1" :checked="true" color="#ff0000" class="radio">
					{{goods.pickupType.pickupType == '0' ? '打包带走' : '店内用餐'}}
				</radio>
			</view>
		</view>

		<view class="gap"></view>
		<view class="goods-order-list padding-lr-sm">
			<view class="shop dflex-b ">
				<view class="shop-check">
					<text class="send-label">{{goods.storeName}}</text>
				</view>
				<view class="total-goods">共计{{lists}}件商品</view>
			</view>
			<view class="goods-cart w-full">
				<view class="goods-cont padding-tb" v-for="(item, index) in goods.orderItemVoList" :key="index">
					<my-goods :item="item">
						<view class="good-num">×{{item.quantity}}</view>
					</my-goods>
				</view>
			</view>
			<!-- <view class="goods-cart" v-for="(item, index)  in goods.itemList" :key="index">
				<view class="goods-cont dflex-b padding-tb-16">
					<view class="goods-cart-info dflex-b">
						 <view class="pic"></view>
						<my-goods :item="item">
							<view class="good-num">×{{item.quantity}}</view>
						</my-goods>
						 <view class="goods-cart-right">
							<view class="cart-title">{{item.skuName}}</view>
							<view class="order-spec">
								<text>500g</text>
							</view>
							<view class="cart-row-info dflex-s">
								<view class="cart-price">
									￥<text>{{item.price}}</text>
								</view>
								<view class="goods-num">×{{item.quantity}}</view>
							</view>
						</view> 
					</view>
				</view>
				 <view class="goods-cont dflex-b padding-tb-16">
					<view class="goods-cart-info dflex-b">
						<view class="pic"></view>
						<view class="goods-cart-right">
							<view class="cart-title">商品名称商品名称</view>
							<view class="order-spec">
								<text>500g</text>
							</view>
							<view class="cart-row-info dflex-s">
								<view class="cart-price">
									￥<text>12.30</text>
								</view>
								<view class="goods-num">×1</view>
							</view>
						</view>
					</view>
				</view> 
			</view> -->
		</view>
		<view class="gap"></view>
		<!-- 金额明细 -->
		<view class="bg-main">
			<view class="dflex-b padding-lr padding-tb-sm">
				<view class="flex1 send-label">总金额</view>
				<view class="price">{{goods.totalAmount}}</view>
			</view>
		</view>
		<view class="gap"></view>
		<view class="bar-space"></view>
		<view class="cart-bottom padding-sm dflex-b">
			<view class="go-cart dflex-c" @click="toDelete()">取消订单</view>
			<view class="go-buy dflex-c background-gradient" @click="toPay()">去支付</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods: {},
				lists: 0
			}
		},
		onLoad(e) {
			var dataString = decodeURIComponent(e.data)
			var data = JSON.parse(dataString);
			console.log('data', data)
			this.goods = data
			this.lists = this.goods.orderItemVoList.length
			this.goods.orderItemVoList.forEach(item => {
				item.imgUrl = item.picUrl
			})
			console.log('this.lists', this.lists)
			// this.fatchDate(e)
		},
		methods: {
			async fatchDate(e) {
				console.log('e', e)
				const result = await this.$request('get', `/order/tradeOrder/queryTradeOrder/${e.id}`,
					true)
				if (result) {
					console.log('result', result.data)
					this.goods = result.data
					this.lists = this.goods.itemList.length
					this.goods.itemList.forEach(item => {
						item.imgUrl = item.picUrl
					})
					console.log('this.goods', this.goods)
					console.log('this.goods.itemList', this.goods.itemList)
				}
			},
			uuid() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = Math.random() * 16 | 0,
						v = c == 'x' ? r : (r & 0x3 | 0x8);
					return v.toString(16);
				});
			},
			toDelete() {
				this.$refs.uToast.show({
					type: 'default',
					title: '默认主题',
					message: "演示阶段暂时不能取消",
					position: 'center'
				})
			},
			toPay() {
				// 显示提示
				this.$refs.uToast.show({
					type: 'default',
					title: '默认主题',
					message: "演示阶段暂时不能支付",
					position: 'center'
				})

				// uni.showToast({
				// 	title: '演示阶段暂时不能支付',
				// 	icon: 'error',
				// 	duration: 1000
				// });
				// const params = {
				// 	orderId: this.goods.orderId,
				// 	amount: this.goods.payment,
				// }
				// this.$request('post', `/order/orderPay/addOrderPay`, params, true).then(res => {
				// 	this._toPay()
				// })
			},
			async _toPay() {
				console.log('this.uuid()', this.uuid())
				const openId = uni.getStorageSync('openId');
				const token = uni.getStorageSync('token');
				if (!token) {
					await this.autoLogin()
				}
				const that = this;
				uni.request({
					url: 'http://36.137.224.81:8030/weChatPay/payment/miniPay',
					header: {
						// "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8", //
						"Content-Type": "application/json;charset=UTF-8", //
						'Authorization': 'Bearer ' + token,
					},
					method: 'post',
					data: {
						tenantId: '000000',
						outTradeNo: this.uuid(),
						openId: openId,
						total: Math.round(this.goods.payment * 10), //以分为单位
						profitSharing: false // 是否分销
					},

					success: res => {
						console.log('预支付成功')
						that.data = res.data;
						wx.requestPayment({
							"timeStamp": res.data.timeStamp,
							"nonceStr": res.data.nonceStr,
							"package": res.data.packageValue,
							"signType": "RSA",
							"paySign": res.data.paySign,
							"success": function(res) {
								console.log('调用支付接口成功', res)
							},
							"fail": function(res) {
								console.log('调用支付接口fail', res)
							},
							"complete": function(res) {
								console.log('调用支付接口完成', res)
							}
						})
					},
					fail: err => {
						uni.hideLoading()
					}
				})
				// const params = {
				// 	tenantId: '000000',
				// 	outTradeNo: this.uuid(),
				// 	openId: openId,
				// 	total: Math.round(this.goods.payment * 10),	//以分为单位
				// 	profitSharing: false // 是否分销
				// }
				// console.log('params', params)
				// this.$request('post', `/weChatPay/payment/miniPay`, params, true).then(res => {
				// 	// 请求成功
				// 	console.log('response', res)
				// 	console.log('预支付成功')
				// 	that.data = res.data;
				// 	wx.requestPayment({
				// 		"timeStamp": res.data.timeStamp,
				// 		"nonceStr": res.data.nonceStr,
				// 		"package": res.data.packageValue,
				// 		"signType": "RSA",
				// 		"paySign": res.data.paySign,
				// 		"success": function(res) {
				// 			console.log('调用支付接口成功', res)
				// 		},
				// 		"fail": function(res) {
				// 			console.log('调用支付接口fail', res)
				// 		},
				// 		"complete": function(res) {
				// 			console.log('调用支付接口完成', res)
				// 		}
				// 	})
				// }).catch(error => {
				// 	// 请求失败
				// 	uni.hideLoading()
				// 	console.error('请求失败:', error);
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-state {
		background-color: #F96C22;
		box-sizing: border-box;
		color: #FFF;

		.state-info {
			font-size: 18px;
			padding-bottom: 4px;
		}

		.order-code {
			font-size: 12px;
		}
	}

	.addr-label {
		padding: 6upx 0;
		border-radius: 3px;
		background-color: #F6390D;
		color: #fff;
		width: 120upx;
		text-align: center;
		flex-shrink: 0;
		margin-right: 14upx;
	}

	.order-spec {
		padding-bottom: 10upx;
	}

	.shop {
		padding-top: 20upx;
	}

	.goods-num {
		font-size: 16px;
		padding-left: 20upx;
	}

	.sub-coupon {
		padding-top: 20upx;
		padding-bottom: 0;
		color: #000;

		.coupon-name {
			font-weight: normal;
		}

		.mj-tag {
			background-color: #F6390D;

			>text {
				color: #FFF;
			}
		}
	}

	.total-goods {
		font-size: 12px;
		color: #999;
	}

	.submit-bar {
		height: 100upx;
		width: 100%;
		background-color: #FFF;
		position: fixed;
		left: 0;
		bottom: 0;

		.submit-total {
			font-size: 16px;
			font-weight: 700;
			color: #F6390D;
		}

		.submit-btn {
			background-image: $base-bg-gradient-color;
			height: 70upx;
			width: 200upx;
			color: #FFF;
			font-size: 14px;
			font-weight: 700;
			border-radius: 35upx;
		}
	}

	.order-btn {
		height: 76upx;
		border-radius: 38px;
		background-image: $base-bg-gradient-color;
		text-align: center;
		line-height: 76upx;
		color: #FFF;
		font-size: 14px;
		width: 90%;
		position: fixed;
		left: 5%;
		bottom: 30upx;
		z-index: 99;
	}

	.order-info {
		background-color: #FFF;
		box-sizing: border-box;
	}

	.row-cell {
		padding-bottom: 20upx;

		.cell-right {
			font-size: 12px;
			color: #999;
		}
	}

	.row-cell:last-child {
		padding-bottom: 0;
	}

	.pic {
		margin-right: 20upx;
		height: 160rpx;
		width: 160rpx;
		background-color: #EEE;
	}

	.send-label {
		font-size: 14px;
		font-weight: 700;
	}

	.cart-bottom {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 130rpx;
		box-sizing: border-box;
		background-color: #FFF;
		z-index: 10;
		box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.15);

		.go-cart {
			height: 80%;
			box-sizing: border-box;
			border: solid 1px #FF0000;
			font-size: 14px;
			color: #FF0000;
			border-radius: 50upx;
			margin: 0 10px;
			width: 45%;
		}

		.go-buy {
			height: 80%;
			width: 45%;
			background-color: #FF0000;
			color: #FFF;
			border-radius: 50upx;
			font-size: 14px;
		}
	}

	.good-num {
		font-size: 12px;
		padding-top: 65rpx;
	}

	.goods-cont {
		width: 100%;
		box-sizing: border-box;
	}
</style>