详情开发

pages/group_order/order_groupdetail.vue

@@ -2,27 +2,57 @@
 	<!-- 团购订单详情 -->
 	<view>
 		<!-- 头部 -->
-		<groupTitle></groupTitle>
-		<!-- 券 -->
-		<groupCoupons></groupCoupons>
+		<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></groupMerchants>
+		<groupMerchants :info="listinfo"></groupMerchants>
 		<!-- 到店 -->
-		<groupStore></groupStore>
+		<groupStore :info="listinfo"></groupStore>
 		<!-- 提示 -->
-		<groupPrompt></groupPrompt>
+		<groupPrompt :info="listinfo"></groupPrompt>
 		<!-- 实付 -->
-		<groupPay></groupPay>
+		<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,
@@ -30,7 +60,9 @@
 			groupMerchants,
 			groupStore,
 			groupPrompt,
-			groupPay
+			groupPay,
+			tkiQrcode,
+			groupOrderInfo
 		},
 		onLoad(e) {
 			this.orderId = e.orderId
@@ -39,36 +71,126 @@
 		data() {
 			return {
 				orderId: "",
-				listinfo: null
+				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: function(data) {
+					success: async function(data) {
 						let {
 							lat,
 							lng
 						} = data.data
-						let res = _this.api.groupOrderInfoDetail({
+						let res = await _this.api.groupOrderInfoDetail({
 							id: _this.orderId,
 							lat,
 							lng
 						})
 						if (res.code == 0) {
 							_this.listinfo = res.data
-							// this.mountedcreateSelectorQuery()
 						}
 					}
 				});
 
 			},
+			makephone(e) {
+				uni.makePhoneCall({
+					phoneNumber: e
+				});
+			}
 		}
 	}
 </script>
 
-<style>
+<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>