jje_uniapp/pages/order/index.vue

<template>
	<view class="content">

			<View  :style="{'paddingTop':menuButtonBottom}">
				<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>

		<!-- 订单列表 -->
		<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="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,
				menuButtonBottom:'',

			}
		},
		onLoad() {
			uni.hideTabBar({
				animation: false
			})
			let menuButton  = uni.getMenuButtonBoundingClientRect()
			console.log(menuButton)
			this.menuButtonBottom = menuButton.bottom + 'px'
			let sysInfo = uni.getSystemInfoSync()
			this.windowHeight = sysInfo.windowHeight - menuButton.bottom - 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()
						}
					});
				})
			},





			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>