cashier_weapp/pages/group_order/order_groupdetail.vue

<template>
	<!-- 团购订单详情 -->
	<view>
		<!-- 头部 -->
		<groupTitle :info="listinfo"></groupTitle>
		<!-- 券 
		if (e == 'closed') return '已完成'
				else if (e == 'unpaid') return '待付款'
				else if (e == 'unused') return '待使用'
				else if (e == 'refund') return '已退款'
				else if (e == 'cancelled') return '已取消'
				else return "1"
				-->
		<groupCoupons :info="listinfo" @clickEvent='clickEvent'
			v-if="listinfo.status=='unused'||listinfo.status=='refund'"></groupCoupons>
		<!-- 商家信息 -->
		<groupMerchants :info="listinfo"></groupMerchants>
		<!-- 到店 -->
		<groupStore :info="listinfo"></groupStore>
		<!-- 提示 -->
		<groupPrompt :info="listinfo"></groupPrompt>
		<!-- 实付 -->
		<groupPay :info="listinfo" v-if="listinfo.status=='unused'||listinfo.status=='refund'"></groupPay>
		<!-- 订单信息 -->
		<groupOrderInfo :info="listinfo" v-else></groupOrderInfo>
		<view class="customerService" @click="makephone(listinfo.phone)">
			<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/kefu.png"
				style="width: 40rpx;height: 43.21rpx;" mode=""></image>
			联系客服
		</view>
		<!-- 待支付按钮 -->
		<button v-if="listinfo.status == 'unpaid'" @click="payEvent" class="payStyle">立即支付</button>
		<!-- 二维码展示 -->
		<view class="qrimg" v-if="isQrimg" @click="clickEvent">
			<tki-qrcode ref="qrcode" size="400" :val="qrValue" :loadMake="true" @result="qrR" />
		</view>
	</view>
</template>

<script>
	/** 
	 * 只有两个有变动，美团券和实付金额、订单信息
	 * 1.支付完成/已退款/有美团券、
	 * 待支付/已完成没有美团券
	 * 2.支付完成、已退款有实付金额
	 * 待支付、已完成有订单信息没有实付金额
	 **/
	import groupTitle from './components/groupTitle.vue'
	import groupCoupons from './components/groupCoupons.vue'
	import groupMerchants from './components/groupMerchants.vue'
	import groupStore from './components/groupStore.vue'
	import groupPrompt from './components/groupPrompt.vue'
	import groupPay from './components/groupPay.vue'
	import groupOrderInfo from './components/groupOrderInfo.vue'
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			groupTitle,
			groupCoupons,
			groupMerchants,
			groupStore,
			groupPrompt,
			groupPay,
			tkiQrcode,
			groupOrderInfo
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.orderorderInfo()
		},
		data() {
			return {
				orderId: "",
				listinfo: null,
				isQrimg: false,
				qrValue: ""
			}
		},
		methods: {
			async payEvent() {
				console.log('调试1')
				let res = await this.api.payOrderPay({
					payType:'wechatPay',
					orderId:this.listinfo.id,  
				})
				console.log('调试2')
				if (res) {
					return
					uni.requestPayment({
						provider: 'wxpay', //支付类型-固定值
						partnerid: res.data.payAppId, // 微信支付商户号
						timeStamp: res.data.payTimeStamp, // 时间戳（单位：秒）
						nonceStr: res.data.paynonceStr, // 随机字符串
						package: res.data.payPackage, // 固定值
						signType: res.data.paySignType, //固定值
						paySign: res.data.paySign, //签名
						success: (res) => {
							uni.showToast({
								title: "支付成功"
							})
							uni.navigateBack()
						},
						fail: (err) => {
							setTimeout(res => {
								uni.showToast({
									icon: 'none',
									title: '支付失败'
								})
								uni.hideLoading()
							}, 2000)
						}
					});
				}
			},
			clickEvent() {
				this.qrValue = this.qrEvent()
				this.isQrimg = !this.isQrimg
			},
			qrR(e) {
				console.log(112312)
			},
			// 拼接code值
			qrEvent() {
				let str = ''
				this.listinfo.coupons.forEach(res => {
					if (res.couponNo) {
						str += res.couponNo + ','
					}
				})
				return str
			},
			orderorderInfo() {
				let _this = this
				uni.getStorage({
					key: "getLocationstorage",
					success: async function(data) {
						let {
							lat,
							lng
						} = data.data
						let res = await _this.api.groupOrderInfoDetail({
							id: _this.orderId,
							lat,
							lng
						})
						if (res.code == 0) {
							_this.listinfo = res.data
						}
					}
				});

			},
			makephone(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.qrimg {
		width: 55vh;
		height: 100vh;
		background-color: rgba(0, 0, 0, .6);
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0%;
		left: 0%;
	}

	.payStyle {
		background-color: #fe7620;
		position: fixed;
		bottom: 0%;
		left: 50%;
		transform: translate(-50%);
		color: #fff;
		width: 90%;
		border: 10rpx solid #fff;
	}

	.customerService {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		width: 100%;
		padding: 78rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>