zhengyi/pages/user/registerList.vue

<template>
	<view class="content">
		<!-- <view class="jg"></view> -->
		<view class="navbar">
			<view class="nav-item" v-for="(item, index) in registerList" :key="index"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.title }}</view>
		</view>
		<swiper :interval="3000" :duration="200" :style="{'height': height}" class="swiper-wrapper"
			:current="tabCurrentIndex" @change="changeTab">
			<swiper-item v-for="(item, index) in registerList">
				<scroll-view scroll-y="true" :style="{'height': height}">
					<empty v-if="item.loaded === true && item.list.length === 0"></empty>
					<view v-for="(itemt,index) in item.list" class="list">
						<view class="" v-if="itemt.rebuy == 0">
							<view class="order-id">账号{{itemt.account}}
								<view class="fg">
									注册
								</view>
							</view>
							<view class="time">
								<view class="">父接点:{{itemt.account}}</view>
								<view class="">接点区域:{{itemt.parent_area}}</view>

							</view>
							<view class="paynum" v-if="tabCurrentIndex == 0">
								待支付￥{{itemt.pay_price}}
							</view>
							<view class="zfqx" v-if="tabCurrentIndex == 0">
								<view class="btn" @click="openselect(itemt)">
									支付
								</view>
								<view class="btn qx" @click="cancelRegister(itemt)">
									取消
								</view>
							</view>
						</view>
						<view class="" v-if="itemt.rebuy == 1">
							<view class="order-id">
								报单编号{{itemt.order_id}}
								<view class="fg">
									复购
								</view>
							</view>
							<view class="time">
								{{itemt.add_time | getTime}}
							</view>
							<view class="paynum" v-if="tabCurrentIndex == 0">
								待支付￥{{itemt.pay_price}}
							</view>
							<view class="zfqx" v-if="tabCurrentIndex == 0">
								<view class="btn" @click="openselect(itemt)">
									支付
								</view>
								<view class="btn qx" @click="cancelRegister(itemt)">
									取消
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="item.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<uni-popup ref="popupPay" type="bottom">
			<view class="popup-box">
				<view class="popup-pay">
					<view class="paybox-top flex">
						<view class="type">选择支付方式</view>
						<view class="image" @click="close">
							<image src="../../static/img/x.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="paybox-main flex">
						<view class="zftype flex">
							<image src="../../static/img/weixin.png" mode="aspectFill"></image>
							<view class="zf">微信支付</view>
						</view>
						<label class="radio1" @click="changePayType(1)">
							<radio style="transform:scale(0.7)" value="" :checked="paytype == 'weixin'" color="#5dbc7c">
							</radio>
						</label>
					</view>
					<view class="paybox-main flex">
						<view class="zftype flex">
							<image src="../../static/img/yue.png" mode="aspectFill"></image>
							<view class="zf">余额支付</view>
						</view>
						<label class="radio" @click="changePayType(2)">
							<radio style="transform:scale(0.7)" class="rad" value="" :checked="paytype == 'yue'"
								color="#5dbc7c"></radio>
						</label>
					</view>
					<view class="paybox-main flex">
						<view class="zftype flex">
							<image src="../../static/img/yong.png" mode="aspectFill"></image>
							<view class="zf">佣金支付</view>
						</view>
						<label class="radio1" @click="changePayType(3)">
							<radio style="transform:scale(0.7)" value="" :checked="paytype == 'brokerage'"
								color="#5dbc7c"></radio>
						</label>
					</view>
				</view>
				<view class="buttom flex">
					<view class="heji">
						合计：
						<text>
							￥
							<text class="money">{{ payitem.pay_price }}</text>
						</text>
					</view>
					<view class="zhifu" @click="pay">立即支付</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	getTime
	import {
		getTime
	} from '@/utils/rocessor.js';

	import {
		getRegisterList,
		cancelRegister,
		payRegister
	} from '@/api/user.js'
	import {
		orderData,
		getUserInfo,
		service
	} from '@/api/user.js';
	import {
		getSpreadCount
	} from '@/api/user.js';
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				payLoding: false, //判断是否支付中
				brokerage: 0,
				now_money: 0,
				payitem: {},
				paytype: '',
				height: '',
				tabCurrentIndex: 0,
				registerList: [{
						status: 0,
						title: '未支付',
						loadingType: 'more',
						list: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					},
					{

						status: 1,
						title: '已支付',
						loadingType: 'more',
						list: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					}
				]
			}
		},
		filters: {
			getTime
		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-wrapper').boundingClientRect();
					query.exec(function(res) {
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		onLoad() {
			this.getRegisterList()
			this.getUserInfo()
		},
		methods: {

			getUserInfo() {
				let obj = this
				getUserInfo().then(({
					data
				}) => {
					console.log(data, 111)
					obj.now_money = +data.now_money
				})
				getSpreadCount({}, 3).then(({
					data
				}) => {
					console.log(data);
					this.brokerage = +data.count;
				});
			},
			//关闭支付弹窗
			close() {
				this.$refs.popupPay.close();
			},
			// 修改支付方式
			changePayType(type) {
				// this.payType = type;
				if (type == 1) {
					this.paytype = 'weixin';
				}
				if (type == 2) {
					this.paytype = 'yue';
				}
				if (type == 3) {
					this.paytype = 'brokerage';
				}
			},
			getRegisterList(type) {
				let obj = this;
				let index = obj.tabCurrentIndex;
				let navItem = obj.registerList[index];
				if (navItem.loadingType == 'loading' || navItem.loadingType == 'noMore') {
					return;
				}
				if (type == 'tabChange' && navItem.loaded == 'loaded') {
					return;
				}
				navItem.loadingType == 'loading';
				getRegisterList({
					page: navItem.page,
					limit: navItem.limit,
					type: navItem.status
				}).then(res => {
					console.log(res, 'ddd')
					navItem.list = navItem.list.concat(res.data);
					if (navItem.limit == res.data.length) {
						navItem.loadingType = 'more';
						return;
					} else {
						navItem.loadingType = 'noMore';
					}
					uni.hideLoading();
					this.$set(navItem, 'loaded', true);
				});
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.getRegisterList('tabChange');
			},
			//取消订单
			cancelRegister(item) {
				let obj = this
				cancelRegister({}, item.id).then(res => {
					uni.showToast({
						title: '取消成功',
						duration: 2000
					});
					let s = obj.registerList[obj.tabCurrentIndex].list.indexOf(item);
					obj.registerList[obj.tabCurrentIndex].list.splice(s, 1);
				}).catch(err => {
					console.log(err)
				})
			},
			pay() {
				let obj = this;
				// 判断是否余额不足
				let id = obj.payitem.id
				if (obj.paytype == 'yue' && +obj.now_money < +obj.payitem.pay_price) {
					uni.showModal({
						title: '提示',
						content: '账户余额不足！',
						showCancel: false,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
					return;
				}
				if (obj.paytype == 'brokerage' && +obj.brokerage < +obj.payitem.pay_price) {
					uni.showModal({
						title: '提示',
						content: '账户佣金不足！',
						showCancel: false,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
					return;
				}
				// 支付中
				obj.payLoding = true;
				uni.showLoading({
					title: '支付中',
					mask: true
				});
				// #ifdef H5
				// 获取当前是否为微信浏览器
				obj.froms = uni.getStorageSync('weichatBrowser') || '';
				// #endif
				let data = {
					paytype: obj.paytype,
					// #ifdef H5
					from: obj.froms ? 'weixin' : 'H5', //来源
					// #endif
					// #ifdef MP-WEIXIN
					from: 'routine', //来源
					// #endif
					// #ifdef APP-PLUS
					from: 'app' //来源
					// #endif
				}
				payRegister(data, id).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '支付成功',
						duration: 2000
					});
					let s = obj.registerList[obj.tabCurrentIndex].list.indexOf(item);
					obj.registerList[obj.tabCurrentIndex].list.splice(s, 1);
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			//调出支付选择
			openselect(item) {
				let obj = this
				obj.payitem = item
				obj.$refs.popupPay.open();
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #f8f6f6;
	}

	.content {
		height: 100%;

		.jg {
			height: 20rpx;
			background-color: #eee;
		}

		.navbar {
			display: flex;
			height: 100rpx;
			padding: 0 5rpx;
			background: #fff;
			box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.06);
			position: relative;
			z-index: 10;
			// margin-top: 25rpx;

			.nav-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				font-size: 15px;
				color: #999999;
				position: relative;

				&.current {
					color: #333333;

					&:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 44px;
						height: 0;
						border-bottom: 2px solid #3f7c1f;
					}
				}
			}
		}

		.swiper-wrapper {}
	}

	.list {
		padding: 30rpx 30rpx 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.paynum {
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FF0000;
		}

		.order-id {

			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;
			position: relative;

			.fg {
				line-height: 40rpx;
				width: 80rpx;
				background-color: #3F7C1F;
				border-radius: 10rpx;
				color: #fff;
				font-size: 24rpx;
				text-align: center;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.time {
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #AEAEAE;
			display: flex;

			view {
				margin-right: 20rpx;
			}
		}

		.zfqx {
			display: flex;
			justify-content: flex-end;
			border-top: 1px dashed #999;
			padding-top: 20rpx;

			.btn {
				width: 150rpx;
				// height: 50rpx;
				// background-color: #d7eeb6;
				color: #3F7C1F;
				border: 1px solid #3F7C1F;
				border-radius: 10rpx;
				text-align: center;
				line-height: 50rpx;
				// color: #FF0000;
			}

			.qx {
				margin-left: 30rpx;
				border: #999 solid 1px;
				color: #333;
			}
		}
	}

	.popup-box {
		position: relative;
		z-index: 100;
		width: 100%;
		height: auto;
		background: #ffffff;

		.popup-pay {
			position: relative;
			justify-content: space-between;
			padding: 0rpx 25rpx 32rpx 25rpx;

			.paybox-top {
				padding-top: 38rpx;
				width: 100%;

				.type {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.image {
					padding-right: 24rpx;
					padding-bottom: 10rpx;

					image {
						width: 16rpx;
						height: 16rpx;
					}
				}
			}

			.paybox-main {
				width: 100%;
				margin-top: 54rpx;

				.zftype {
					padding-left: 5rpx;

					image {
						width: 38rpx;
						height: 40rpx;
					}

					.zf {
						padding-left: 18rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #3f454b;
					}
				}
			}
		}

		.buttom {
			position: relative;
			z-index: 100;
			width: 100%;
			height: 113rpx;
			padding-top: 20rpx;
			align-items: center;

			.heji {
				height: 100%;
				width: 50%;
				padding-left: 23rpx;
				padding-top: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #3f454b;

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ff0000;

					.money {
						font-size: 36rpx;
					}
				}
			}

			.zhifu {
				width: 50%;
				height: 92rpx;
				background: #5dbc7c;
				text-align: center;
				line-height: 92rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
			}
		}
	}
</style>