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" v-if="currentTab === 0">
				<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}" v-if="currentTab === 0">
			<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" @openPay="openPay">
						</mescroll-item>
					</view>
				</swiper-item>
			</swiper>
		</view>


		<view class="product-order" v-if="currentTab === 1">
			<!-- Tab 2 内容 -->
			<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.isOverNo !== '否'" 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 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>
						</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 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 {
				num: 0,
				title: 'Hello',
				tabIndex: 0,
				tabBarIndex:3,
				currentTab: 0,
				currentServiceTab: 'orderTab1',

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

				userInfo:{},
				curServiceTab:1,
				tradeNo:'',
				password:''

			}
		},
		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(){
			if (uni.getStorageSync('orderListIndex')){
				this.tabIndex = uni.getStorageSync('orderListIndex')
			}
			uni.removeStorageSync('orderListIndex');
		},

		methods: {

      getUserInfo() {
        this.userInfo = uni.getStorageSync('userInfo');
      },

			balancePay(){

				let that = this;
				if(this.password.length< 6 ){
					uni.showToast({
						title: "交易密码不能小于6位"
					})
					return ;
				}
				this.$refs.passwordPopup.close()
				// 用户信息
				this.$api.trade({
					tradeNo: this.tradeNo,
					password: this.password
				}).then((res)=>{
					uni.switchTab({
						url:'/pages/order/index'
					})
				}).catch(() =>{
					uni.showToast({
						title: "操作失败"
					})
				});

			},

			payItem(num){
				if (this.userInfo.balance < this.price){
					return
				}
				this.curServiceTab = num
			},

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

			openPay(order){
        this.getUserInfo();
				this.$api.oneClickPay({
					orderId:order.orderId
				}).then(res=>{
					this.tradeNo = res.data.data.tradeNo
					this.$refs.popup.open()
				})


			},

			commonGeneralOrder(){
				let that =this
				if (this.curServiceTab===1){
					this.$refs.popup.close()
					this.$refs.passwordPopup.open()
				}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 => {
								uni.showToast({
									title: '支付成功!'
								});
								that.$refs.popup.close()
								that.$refs.MescrollItem[that.tabIndex].downCallback()
							},
							fail: res => {
								console.log(res)
								uni.showModal({
									content: '支付失败',
									showCancel: false
								});
								that.$refs.popup.close()
								that.$refs.MescrollItem[that.tabIndex].downCallback()
							}
						});
					}).catch(() =>{
						uni.showToast({
							title: "操作失败"
						})
					});
				}
			},

			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>