jje_uniapp/pages/order/index.vue

<template>
	<view class="content">

		<u-sticky>
			<View class=" tabs">
				<u-tabs :list="tabList" :scrollable="false" lineWidth="30" lineColor="#FFE05C" :activeStyle="{
            					color: '#333333',
            					fontWeight: 'bold',
            					transform: 'scale(1.05)'
       							 }" :current="tabIndex" @click="clickTab"></u-tabs>
			</View>
		</u-sticky>

		<!-- 订单列表 -->
		<view :style="{'height':windowHeight}">
			<swiper :style="{'height':windowHeight}" :current="tabIndex" @change="swiperChange">
				<swiper-item class="swiperItem" v-for="(item,index) in tabList" :key="index">
					<view>
						<mescroll-item ref="MescrollItem" :i="index" :index="tabIndex" :tabs="tabList" :height="windowHeight"  @getQueueingMsg="getQueueingMsg" @serialNumber="serialNumber" @openPay="openPay" @openPayAppointment="openPayAppointment">
						</mescroll-item>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<uni-popup ref="serialNumber">
			<view class="serial-number">
				<view class="text">
					<text>您的排队号</text>
				</view>

				<view class="number">
					<text>{{ orderNumberData.schedulingNo }}</text>
				</view>

				<view v-if="orderNumberData.overNo" class="text1">
					<text>已过号，请重新取号</text>
				</view>

				<view v-else class="text">
					<text>前面还有<text class="number">{{ orderNumberData.waitNoNum || 0 }}</text>人在等待</text>
				</view>

				<view class="text">
					<text>预计等待时间{{orderNumberData.minWaitTime }}到{{orderNumberData.maxWaitTime }}分钟</text>
				</view>

			</view>
		</uni-popup>
		<uni-popup ref="getQueueingMsg">
			<view class="serial-number" :style="{width:'400rpx'}">
				<view class="text">
					<text>店内已排队数： </text>
					<text class="number">{{queueingMsgData.alreadyQueuedTotal}}</text>
				</view>
				<view class="text">
					<text>店内待排队数：</text>
					<text class="number">{{queueingMsgData.waitQueuedTotal}}</text>
				</view>
				<view class="text" :style="{color:'red',fontSize:'35rpx'}">
					<text>请您尽快到店签到排队</text>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup" :catchtouchmove="true" :animation="false" type="bottom">

			<view class=" payView">
				<view class="flex-row justify-between">
					<text class="payType">请选择支付方式</text>
					<image class="x" src="/static/common/ox.png" @click="closePayPopup"></image>
				</view>
<!--				<view class="payTitle">-->
<!--					<text>选择微信支付或余额支付</text>-->
<!--				</view>-->
				<view :style="{'min-height':'380rpx'}">
					<view v-if="loveCardList.length>0" class="payItem flex-row" >
						<u-icon name="/static/me/familyCard_icon.png" color="#38db38" size="36"></u-icon>
						<view class="payName flex-col justify-center  flex-grow">
							<text>亲情卡支付</text>
							<scroll-view scroll-y class="loveCard">
								<view class="flex-row justify-between loveCardItem " v-for="(item,index) in loveCardList" :key="index" @click="payLoveItem(0,index,item)">
									<view class="select flex-col" >
										<text>{{item.presentUserName}}({{item.presentUserNo}})</text>
										<text class="balance">可用余额：{{item.totalBalance}}</text>
									</view>
									<view class="flex-col justify-center">
										<u-icon v-if="curServiceTab === 0 && item.select" name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
										<u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>

					<view class="payItem flex-row justify-between"  @click="payItem(1)">
						<view class="flex-row">
							<u-icon name="/static/me/u701.png" color="#38db38" size="36"></u-icon>
							<view class="payName flex-col justify-center">
								<text>余额支付</text>
								<text class="balance">可用余额{{userInfo.balance || 0}}</text>
<!--								<text class="balance">应付金额{{payAmount}}</text>-->
							</view>
						</view>

						<view class="flex-col justify-center">
							<view v-if="curServiceTab === 1" >
								<u-icon name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
							</view>
							<view v-else>
								<u-icon name="/static/order/ud9.png" color="green" size="25"></u-icon>
							</view>
						</view>

					</view>

					<view class="payItem flex-row justify-between" @click="payItem(2)">
						<view class="flex-row">
							<u-icon name="weixin-circle-fill" color="#38db38" size="36"></u-icon>
							<view class="payName flex-col justify-center">
								<text>微信支付</text>
							</view>
						</view>
						<view class="flex-col justify-center">
							<view v-if="curServiceTab === 2" >
								<u-icon name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
							</view>
							<view v-else>
								<u-icon name="/static/order/ud9.png" color="green" size="25"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="commitBtn" @click="commonGeneralOrder">
					<text>确定</text>
				</view>
			</view>

		</uni-popup>


		<uni-popup ref="passwordPopup">
			<view class="passwordView flex-col">
				<view class="flex-row justify-center">
					<text>请输入交易密码</text>
				</view>
				<view class="h-tab-bar flex-row justify-center">
					<u-code-input  v-model="password" mode="box" dot></u-code-input>
				</view>
				<view class="flex-row justify-center">
					<view class="h-operate-btn flex-row justify-center" @click="balancePay">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import MescrollItem from "./module/mescrollUni-item.vue";
	import tabBar from "../../components/tabBar/tabBar";
	export default {
		components: {
			tabBar,
			MescrollItem
		},
		data() {
			return {
				orderNumberData:{},
				num: 0,
				payAmount:'',//调用支付组件时需要支付的金额
				title: 'Hello',
				tabIndex: 0,
				tabBarIndex:3,
				currentTab: 0,
				currentServiceTab: 'orderTab1',
				queueingMsgData:{},
				tabList: [{
					name: '全部'
				}, {
					name: '当前订单'
				}, {
					name: '待付款'
				}, {
					name: '已完成'
				}],
				windowHeight: '',

				userInfo:{},
				curServiceTab:2,
				tradeNo:'',
				password:'',
				openType:0,//开启的支付类型：1一键支付子订单费用，2：支付预约费用
				appointmentOrder:{},
				requestStatus : false,
				loveCardId:'',
				loveCardList:[]
			}
		},
		onLoad() {
			// uni.hideTabBar({
			// 	animation: false
			// })

			let sysInfo = uni.getSystemInfoSync()
			console.log(sysInfo,'2222222222222222222222222')
			this.windowHeight = sysInfo.windowHeight - 74 + 'px' //除标题栏栏外的屏幕可用高度
			this.$off()
			this.$on('orderListIndex',this.listenerIndex)
		},

		onShow(){
			this.userInfo = uni.getStorageSync('userInfo')

			if (uni.getStorageSync('orderListIndex')){
				this.tabIndex = uni.getStorageSync('orderListIndex')
			}
			uni.removeStorageSync('orderListIndex');

			this.$refs.MescrollItem[this.tabIndex].downCallback()
			this.getMyReceiveList()
		},

		methods: {

			serialNumber(order){
				this.$api.viewNumber(order.orderId).then(res=>{
					this.orderNumberData = res.data.data
					this.$refs.serialNumber.open()
				})

			},

			getQueueingMsg(order){
				this.$api.queueInfo(order.orderId).then(res=>{
					this.queueingMsgData = res.data.data
				})
				this.$refs.getQueueingMsg.open()
			},

			openPayAppointment(order,number){
				console.log(order)
				console.log(number)
				this.payAmount = order.subAmount
				this.appointmentOrder = order
				this.openType=number
				this.$refs.popup.open()
			},

			//微信支付预约费用
			wechatPay(){
				let that = this;
				// 发起微信支付
				this.$api.wechatPay({
					orderNo:this.appointmentOrder.subOrderNo
				}).then((res)=>{
					var param = res.data.data;
					uni.requestPayment({
						appId: param.appid,
						timeStamp: param.timestamp+"",
						nonceStr: param.noncestr,
						package: "prepay_id="+param.prepayid,
						signType: "RSA",
						paySign: param.sign,
						success: res => {
							this.requestStatus=false
							uni.hideLoading();
							that.$refs.popup.close()
							uni.showToast({
								title: '支付成功!'
							});
							that.$refs.MescrollItem[that.tabIndex].downCallback()
							that.getUserInfo()
						},
						fail: res => {
							this.requestStatus=false
							uni.hideLoading();
							that.$refs.popup.close()
							console.log(res)
							uni.showToast({
								title: '支付失败',
								icon: 'error'
							});
							that.$refs.MescrollItem[that.tabIndex].downCallback()
							that.getUserInfo()
						}
					});
				}).catch(err=>{
					this.requestStatus=false
				})
			},


			familyCardPay(){
				let that = this;
				if (this.openType == 2){
					this.$api.familyCardPay({
						orderNo: this.appointmentOrder.subOrderNo,
						loveCardId: this.loveCardId
					}).then(res=>{
						this.requestStatus=false
						uni.hideLoading();
						that.$refs.popup.close()
						uni.showToast({
							title: '支付成功'
						})
						that.$refs.MescrollItem[that.tabIndex].downCallback()
						that.getUserInfo()
						that.password = ''
					}).catch((err) =>{
						this.requestStatus=false
						uni.hideLoading();
						that.$refs.popup.close()
						uni.showToast({
							title: err.msg,
							icon:'error'
						})
						that.password = ''
					});
				}else{
					this.$api.familyCardTradePay({
						tradeNo:this.tradeNo,
						loveCardId:this.loveCardId
					}).then(res=>{
						this.requestStatus=false
						uni.hideLoading();
						that.$refs.popup.close()
						uni.showToast({
							title: '支付成功'
						})
						that.$refs.MescrollItem[that.tabIndex].downCallback()
						that.getUserInfo()
						that.password = ''
					}).catch((err) =>{
						this.requestStatus=false
						uni.hideLoading();
						that.$refs.popup.close()
						uni.showToast({
							title: err.msg,
							icon:'error'
						})
						that.password = ''
					});
				}

			},


			balancePay(){

				let that = this;
				// if(this.password.length< 6 ){
				// 	uni.showToast({
				// 		title: "交易密码不能小于6位"
				// 	})
				// 	return ;
				// }
				// this.$refs.passwordPopup.close()
				// 用户信息

				if (this.openType == 2){
					//支付预约费用
					this.$api.balancePay({
						orderNo: this.appointmentOrder.subOrderNo,
						password: ''
					}).then((res)=>{
						this.requestStatus=false
						uni.hideLoading();
						that.$refs.popup.close()
						uni.showToast({
							title: '支付成功'
						})
						that.$refs.MescrollItem[that.tabIndex].downCallback()
						that.getUserInfo()
						that.password = ''
					}).catch((err) =>{
						this.requestStatus=false
						uni.hideLoading();
						that.$refs.popup.close()
						uni.showToast({
							title: err.msg,
							icon:'error'
						})
						that.password = ''
					});

				}else {
					//支付子订单费用
					this.$api.trade({
						tradeNo: this.tradeNo,
						password: ''
					}).then((res)=>{
						this.requestStatus=false
						uni.hideLoading();
						that.$refs.popup.close()
						uni.showToast({
							title: '支付成功'
						})
						that.$refs.MescrollItem[that.tabIndex].downCallback()
						that.getUserInfo()
						that.password = ''
					}).catch((err) =>{
						this.requestStatus=false
						uni.hideLoading();
						that.$refs.popup.close()
						uni.showToast({
							title: err.msg,
							icon:'error'
						})
						that.password = ''
					});
				}



			},

			payLoveItem(num,index,loveCard){
				console.log(loveCard.totalBalance*1, this.totalAmount*1)
				if (loveCard.totalBalance*1 < this.totalAmount*1 && num == 0){
					console.log(this.totalAmount)
					uni.$u.toast('余额不足')
					return
				}
				this.curServiceTab = num
				this.loveCardList.forEach(item=>{
					item.select = false
				})
				loveCard.select=true
				this.loveCardId = loveCard.id
				this.$set(this.loveCardList,index,loveCard)
			},

			payItem(num){

				console.log(this.userInfo.balance*1,this.appointmentOrder.totalAmount*1)
				if (this.userInfo.balance*1 < this.payAmount*1){
					uni.$u.toast('余额不足')
					return
				}
				this.curServiceTab = num
			},

			closePayPopup(){
				this.$refs.popup.close()
			},


			//一键支付子订单
			openPay(order,number){
				console.log(order)
				console.log(number)
				this.openType=number
				this.payAmount = order.payAmount
				this.appointmentOrder = order
				this.$api.oneClickPay({
					orderId:order.orderId
				}).then(res=>{
					this.tradeNo = res.data.data.tradeNo
					this.$refs.popup.open()
				})
			},

			commonGeneralOrder(){
				if(this.requestStatus){
					return;
				}
				this.requestStatus=true
				uni.showLoading({
					title: '支付中'
				});
				let that =this

				if (this.curServiceTab===0){
					this.familyCardPay()
				}

				if (this.curServiceTab===1){
					// this.$refs.popup.close()
					// that.password = ''
					// this.$refs.passwordPopup.open()
					this.balancePay()
				}
				if (this.curServiceTab===2) {

					if (this.openType == 2){
						//支付预约费用
						this.wechatPay()
					}else{
						//支付子订单费用
						this.$api.wechatPayTradeNo({tradeNo:this.tradeNo}).then(res=>{
							var param = res.data.data;
							uni.requestPayment({
								appId: param.appid,
								timeStamp: param.timestamp+"",
								nonceStr: param.noncestr,
								package: "prepay_id="+param.prepayid,
								signType: "RSA",
								paySign: param.sign,
								success: res => {
									this.requestStatus=false
									uni.hideLoading();
									uni.showToast({
										title: '支付成功!'
									});
									that.$refs.popup.close()
									that.$refs.MescrollItem[that.tabIndex].downCallback()
									that.getUserInfo()
								},
								fail: res => {
									console.log(res)
									this.requestStatus=false
									uni.hideLoading();
									uni.showToast({
										title: '支付失败',
										icon: 'error'
									});
									that.$refs.popup.close()
									that.$refs.MescrollItem[that.tabIndex].downCallback()
									that.getUserInfo()
								}
							});
						})
					}
				}
			},

			getUserInfo() {
				let that = this
				this.$api.getUserInfo().then(res => {
					that.userInfo = res.data.data
					uni.setStorageSync('userInfo', res.data.data);
				});
			},

			clickTab(e) {
				this.tabIndex = e.index
			},
			swiperChange(e) {
				this.tabIndex = e.detail.current
			},

			changeTab(currentTab) {
				this.currentTab = currentTab
			},

			getMyReceiveList(){
				this.$api.getMyReceiveList().then(res=>{
					this.loveCardList = res.data.data
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	@import '/common/css/common.css';
	@import './index.rpx.scss';
</style>