jje_uniapp/pages/order/index.vue

<template>
	<view class="content">

		<u-sticky>
			<!--			<view ref="hContentWrap" class="hContentWrap h-content-wrap">-->
			<!--				<view class="tab-bar">-->
			<!--					<view class="tab-item" :class="{ active: currentTab === 0 }" @click="changeTab(0)">-->
			<!--						服务订单-->
			<!--					</view>-->
			<!--					<view class="tab-item" :class="{ active: currentTab === 1 }" @click="changeTab(1)">-->
			<!--						产品订单-->
			<!--					</view>-->
			<!--				</view>-->
			<!--			</view>-->
			<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" @serialNumber="serialNumber" @openPay="openPay" @openPayAppointment="openPayAppointment">
						</mescroll-item>
					</view>
				</swiper-item>
			</swiper>
		</view>


		<!--		<view class="product-order" v-if="currentTab === 1">-->
		<!--			&lt;!&ndash; Tab 2 内容 &ndash;&gt;-->
		<!--			<view class="developing">-->
		<!--				<text>敬请期待...</text>-->
		<!--			</view>-->
		<!--		</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>前面还有{{ orderNumberData.waitNoNum }}人在等待</text>
				</view>

				<view class="text">
					<text>随时关注小程序的排队进程，过号作废</text>
				</view>

				<!--				<view class="text">-->
				<!--					<text>0851—85833828</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="{'height':'380rpx'}">

					<view class="payItem flex-row justify-between" v-if="openType!=2"   @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>
							</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 class="tabBarLineHeight"></view>-->
		<view class="tabBarView">
			<tab-bar :tabIndex="tabBarIndex"></tab-bar>
		</view>
	</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,
				title: 'Hello',
				tabIndex: 0,
				tabBarIndex:3,
				currentTab: 0,
				currentServiceTab: 'orderTab1',

				tabList: [{
					name: '全部'
				}, {
					name: '当前订单'
				}, {
					name: '待付款'
				}, {
					name: '已完成'
				}],
				windowHeight: '',

				userInfo:{},
				curServiceTab:2,
				tradeNo:'',
				password:'',
				openType:0,//开启的支付类型：1一键支付子订单费用，2：支付预约费用
				appointmentOrder:{},
				requestStatus : false

			}
		},
		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()
		},

		methods: {

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

			openPayAppointment(order,number){
				console.log(order)
				console.log(number)
				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
				})
			},





			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 = ''
					});
				}



			},

			payItem(num){

				console.log(this.userInfo.balance*1,this.appointmentOrder.totalAmount*1)

				if (this.userInfo.balance*1 < this.appointmentOrder.totalAmount*1){
					return
				}
				this.curServiceTab = num
			},

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


			//一键支付子订单
			openPay(order,number){
				console.log(order)
				console.log(number)
				this.openType=number
				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===1){
					// this.$refs.popup.close()
					// that.password = ''
					// this.$refs.passwordPopup.open()
					this.balancePay()
				}else {

					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
			},

		}
	}
</script>

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