ppl/pages/yuyue/index.vue

<template>
	<view>
		<view class="top">
			<view :class="zt==1?'xuanzhong':'wxz'" @click="change(1);">已成功</view>
			<view :class="zt==2?'xuanzhong':'wxz'" @click="change(2);">收益中</view>
			<view :class="zt==3?'xuanzhong':'wxz'" @click="change(3);">已完成</view>
		</view>
		<view v-for="(item, index) in qglist" :key="index" class="list">
			<view v-if="zt==1" class="list1">
				<view class="a"><text class="tit">卖方战队</text>：<text class="b">{{ item.zd }}</text></view>
				<view class="a"><text class="tit">卖方姓名</text>：{{ item.xm }}</view>
				<view class="a"><text class="tit">卖方手机号</text>：<text class="b">{{ item.sjh }}</text></view>
				<view class="a"><text class="tit">订单号</text>：{{ item.ddh }}</view>
				<view class="a"><text class="tit">产品</text>：
				<text v-if="item.lx!=1">{{ item.name }}({{ item.cname }})</text>
				<text v-if="item.lx==1" style="color: #fff;background-color: #ED4545;padding: 5rpx 10rpx;">{{ item.name }}({{ item.cname }})</text>
				</view>
				<view class="a"><text class="tit">支付</text>：<text class="b">{{ item.price }}元</text></view>
				<view class="a"><text class="tit">利润周期</text>：{{ item.tianshu }}天/{{ item.shouyi }}%</view>
				<view class="a"><text class="tit">获得收益</text>：<text class="b">{{ item.hdshouyi }}元</text></view>
				<view class="a"><text class="tit">转让时间</text>：{{ item.time }}</view>
				<view class="a"><text class="tit">状态</text>：
					<text class="b" v-if="item.zt == 0">待付款</text>
					<text class="b" v-if="item.zt == 1">已打款,待确认</text>
					<text class="b" v-if="item.zt == 2">确认打款</text>
					<text class="b" v-if="item.zt == 3">已超时</text>
					<text @click="mfxx(item.uid,item.lx)" class="mfxx" v-if="item.zt==0 && item.lx!=1">卖方信息</text>
					<text class="b" v-if="item.zt==0 && item.lx==1">输入支付密码系统自动扣款</text>
				</view>
				<view class="a" v-if="item.zt==0">
					<text class="tit">付款剩余时间</text>：
					<text class="b">{{item.djssm}}</text>
				</view>
				<view class="a" v-if="item.zt==1">
					<view style="float: left;">确认剩余时间：</view>
					<text class="b">{{item.djssm}}</text>
				</view>

				<view class="a" v-if="item.zt==0">交易密码验证：</view>
				<input class="srk" placeholder="请输入交易密码" v-model="item.jymm" v-if="item.zt==0" />
				<view class="a"  v-if="item.lx!=1">付款凭证：</view>
				<view  v-if="item.lx!=1">
					<image v-if="item.dkpz" style="width:150rpx;height: 150rpx;" referrerpolicy="no-referrer"
						:src="item.dkpz" @click="viewimg(item.dkpz)" />
					<image v-else style="width: 150rpx;height: 150rpx;" referrerpolicy="no-referrer"
						src="/static/xj.png" @click="shangchuanpingzheng(item,index)" />
				</view>
				<button type="warn"
					style="margin-top:10rpx;background: #f3a511;font-size: 30rpx;margin-bottom: 20rpx;width: 50%;"
					@click="saveShangchuanpingzheng(item)" v-if="item.zt==0">我已打款</button>
				<button type="warn"
					style="margin-top:10rpx;background: #989898;font-size: 30rpx;margin-bottom: 20rpx;width: 50%;"
					v-if="item.zt==1">等待对方确认</button>
			</view>
			<view v-if="zt==2">
				<view class="a"><text class="tit">产品</text>：{{ item.name }}({{ item.cname }})</view>
				<view class="a"><text class="tit">支付</text>：<text class="b">{{ item.price1 }}元</text></view>
				<view style="display: table;width: 100%;">
					<view style="float: left;">
						<view class="a"><text class="tit">利润周期</text>：{{ item.tianshu }}天/{{ item.shouyi }}%</view>
						<view class="a"><text class="tit">获得收益</text>：<text class="b">{{ item.hdshouyi }}元</text></view>
					</view>
					<view style="float: right;background: #f4a612;color: #fff;font-size: 28rpx;padding:10rpx 20rpx;border-radius: 10rpx;" @click="ppb(item)" v-if="userinfo.quanxian==1 && (item.lx==0 || item.lx==2)">
						转入拍拍宝
					</view>
				</view>				
				<view class="a"><text class="tit">获得时间</text>：{{ item.time }}</view>
				<view class="a"><text class="tit">转让时间</text>：{{ item.zrtime }}</view>
			</view>
			<view v-if="zt==3">
				<view class="a">
					<text class="tit">产品</text>：{{ item.name }}({{ item.cname }})
				</view>
				<view class="a"><text class="tit">支付</text>：<text class="b">{{ item.price }}元</text></view>
				<view class="a"><text class="tit">匹配时间</text>：{{ item.time }}</view>
				<view class="a"><text class="tit">利润周期</text>：{{ item.tianshu }}天/{{ item.shouyi }}%</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				constants: {},
				noimg: '/static/lanhu_record/ps3lynngrkw77ya7zb5jydv23q6xcffyj53c6fe453-54c4-4078-b021-8c1b292a08c2.png',
				data: {
					uid: '0',
					realname: '',
					idcard: '',
					idcardimg1: '',
					idcardimg2: ''
				},
				userinfo: null,
				qglist: [],
				zt: 1,
				page: 1,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '到底了'
				}
				
			};
		},
		onShow() {
			var user = this.$api.getUserinfo();
			if (user) {
				this.userinfo = user;
				this.data.uid = this.userinfo.id;
				this.data.realname = this.userinfo.xm;
				this.data.idcard = this.userinfo.sfz;
				this.data.idcardimg1 = this.userinfo.idcardimg1;
				this.data.idcardimg2 = this.userinfo.idcardimg2;
			} else {
				this.userinfo = null;
			}
			this.getList();
		},
		methods: {
			ppb(item){
				uni.navigateTo({
					url: '/pages/ppb/zhuanru?id=' + item.id
				});
			},			
			change(zt) {
				this.zt = zt;
				this.page = 1;
				this.qglist = []
				this.getList();
			},
			mfxx(uid,lx) {
				uni.navigateTo({
					url: '/pages/shoukuan/mfxx?id=' + uid+'&lx='+lx
				});
			},
			viewimg(path) {
				uni.previewImage({
					urls: [path],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							//// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							// console.log(err.errMsg);
						}
					}
				});
			},
			getList() {
				var data = new Object();
				data.uid = this.data.uid;
				//data.uid=1000006;
				data.page = this.page;
				data.zt = this.zt;
				if (data.uid == '0') {
					uni.showToast({
						title: '请重新登录',
						icon: 'none'
					});
					uni.switchTab({
						url: '/pages/my/index'
					});
					return;
				}
				this.$api
					.MhPostModel(data, 'user/qglist')
					.then(res => {
						var shuju = res.data.data.data;
						//console.log(res.data.quanxian)
						this.qglist = shuju
						this.status = 'more';
						if (shuju.length == 0) {
							this.status = 'nomore';
						}
					})
					.catch(err => {
						// console.log('request fail', JSON.stringify(err));
					});
			},
			onClick_1() {
				var data = new Object();
				data.uid = this.data.uid;
				data.xm = this.data.realname;
				data.sfz = this.data.idcard;
				if (this.userinfo.idcradstatus == 1) {
					uni.showToast({
						title: '已认证，无需重新认证',
						icon: 'none'
					});
					return;
				}
				if (data.uid == '0') {
					uni.showToast({
						title: '请重新登录',
						icon: 'none'
					});
					uni.switchTab({
						url: '/pages/my/index'
					});
					return;
				}
				this.$api
					.MhPostModel(data, 'user/shiming')
					.then(res => {
						//// console.log('MhUserRenzheng信息', JSON.stringify(res));
						if (res.data.code != 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
							this.getCode();
							return;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					})
					.catch(err => {
						// console.log('request fail', JSON.stringify(err));
					});
			},
			shangchuanpingzheng(item, index) {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						uni.uploadFile({
							url: that.$api.getUploadurl2,
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: function(res) {
								//// console.log(res.data);
								var path = res.data;
								path = JSON.parse(path).data.url;
								that.qglist[index].dkpz = path;
								//that.saveShangchuanpingzheng(item, path);
							}
						});
					}
				});
			},
			saveShangchuanpingzheng(item) {
				var data = new Object();

				if (item.jymm == '') {
					uni.showToast({
						title: '请输入交易密码',
						icon: 'none'
					});
					return;
				}
				if (item.dkpz == '' && item.lx!=1) {
					uni.showToast({
						title: '请输入付款凭证',
						icon: 'none'
					});
					return;
				}
				data.uid = this.userinfo.id;
				data.id = item.id;
				data.fkpz = item.dkpz;
				data.jymm = item.jymm;
				this.$api
					.MhPostModel(data, 'user/fkpz')
					.then(res => {
						if (res.data.code != 1) {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							return;
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							this.page = 1;
							this.qglist = []
							this.getList();
						}
					})
					.catch(err => {
						// console.log('request fail', JSON.stringify(err));
					});
			}
		}
	};
</script>
<style lang="css">
	@import '../common/common.css';
	@import './assets/style/index.rpx.css';

	page {
		padding: 15rpx;
		background: #f2f2f6;
		padding: 0;
		margin: 0;
	}

	.a {
		color: #585858;
		font-size: 30rpx;
		line-height: 180%;
	}

	
	.tit{color: #a4a4a4;width: 130rpx;display: inline-block;text-align-last:justify}
	.a::before {
		content: '';
		width: 10rpx;display: inline-block;
		height: 10rpx;margin-right: 10rpx;position: relative;
		background: #aaaaaa;top: -5rpx;
		border-radius: 50%;
	}

	.b {
		color: #ED4545;
		font-weight: bold;
	}

	.mfxx {
		background: #faba25;
		color: #fff;
		font-size: 28rpx;
		padding: 5rpx 10rpx;
		border-radius: 5rpx;
		margin-left: 10rpx;
	}

	.srk {
		color: #000;
		height: 60rpx;
		line-height: 60rpx;
		background: #fff;
		border-radius: 10rpx;background: #f2f2f6;
		padding-left: 20rpx;
		font-size: 28rpx;
	}

.list1 .a .tit{width: 180rpx;}

	.top {
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;
		background-image: linear-gradient(#829c52, #59723b);
		line-height: 60rpx;
		height: 90rpx;
		padding-top: 10rpx;
	}

	.xuanzhong {
		display: inline-block;
		text-align: center;
		width: 33%;
		color: #fff;
	}

	.xuanzhong::after {
		content: "";
		display: block;
		width: 30px;
		height: 5rpx;
		margin: auto;
		background: #fff;
		border-radius: 30rpx;
	}

	.wxz {
		color: #fff;
		display: inline-block;
		text-align: center;
		width: 33%;
	}

	.list {
		background: #fff;
		width: calc(100% - 40rpx);
		margin: auto;
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 15rpx;
	}
</style>