ppl/pages/zhuanrang/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"  class="list">
			<view v-if="zt==2" 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>：
				<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" 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>
				</view>
				<view class="a"><text class="tit">转让时间</text>：{{ item.time }}</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">
					<text class="tit">确认剩余时间</text>：
				    <text class="b" >{{item.djssm}}</text>		
				</view>			
				<view class="a"  v-if="item.zt==1">交易密码验证：</view>
				<input class="srk" placeholder="请输入交易密码" v-model="item.jymm"  v-if="item.zt==1"/>
				<view class="a" v-if="item.zt==1 && item.lx!=1">付款凭证：</view>
				<view v-if="item.zt==1 && item.lx!=1">
					<image v-if="item.dkpz"  style="width:150rpx;height: 150rpx;"   referrerpolicy="no-referrer"
						:src="item.dkpz"
						 @click="viewimg(item.dkpz)"
					/>				</text>
				</view>		
				
				
				<button type="warn" style="margin-top:10rpx;background: #989898;font-size: 30rpx;margin-bottom: 20rpx;width: 50%;" v-if="item.zt==0">等待付款</button>
				<button type="warn" style="margin-top:10rpx;background: #f3a511;font-size: 30rpx;margin-bottom: 20rpx;width: 50%;" @click="querenshoukuan(item)"  v-if="item.zt==1">我已收到款</button>
			</view>
			<view v-if="zt==1">
				<view class="a"><text class="tit">产品</text>：{{ item.name }}({{ item.cname }})</view>				
				<view class="a"><text class="tit">抢购时间</text>：{{ item.time }}</view>
				<view style="display: table;width: 100%;">
					<view style="float: left;">
						<view class="a"><text class="tit">支付</text>：<text class="b">{{ item.price1 }}元</text></view>
						<view class="a"><text class="tit">利润周期</text>：{{ item.tianshu }}天/{{ item.shouyi }}%</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.zrtime }}</view>
				<button type="warn" style="margin-top:10rpx;background: #f3a511;font-size: 30rpx;margin-bottom: 20rpx;width: 50%;display: none;" @click="duihuan(item)">兑换</button>
			</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
		};
	},
	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
			});
		},	
		duihuan(item){
			uni.navigateTo({
				url: 'duihuan?id='+item.id
			});
		},
		change(zt){
			this.zt=zt;
			this.getList();
		},
		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.zt = this.zt;
			if (data.uid == '0') {
				uni.showToast({
					title: '请重新登录',
					icon: 'none'
				});
				uni.switchTab({
					url: '/pages/my/index'
				});
				return;
			}
			this.$api
				.MhPostModel(data, 'user/zrlist')
				.then(res => {
					//// console.log('user/qglist信息', JSON.stringify(res.data.data.data));
					//// console.log('抢购');
					this.qglist = res.data.data.data;
				})
				.catch(err => {
					// console.log('request fail', JSON.stringify(err));
				});
		},			
		querenshoukuan(item){
			var that=this;
			uni.showModal({
				title: '提示',
				content: '是否确认收款？',
				success: function (res) {
					if (res.confirm) {
						//// console.log('用户点击确定');
						that.saveQuerenshoukuan(item);
					} else if (res.cancel) {
						//// console.log('用户点击取消');
					}
				}
			});
		},
		saveQuerenshoukuan(item){
			var data = new Object();
			if(item.jymm==''){
				uni.showToast({
					title: '请输入交易密码',
					icon: 'none'
				});
				return;
			}
			data.uid = this.userinfo.id;
			data.id = item.id;
			data.jymm = item.jymm;
			this.$api
				.MhPostModel(data, 'user/qrsk')
				.then(res => {
					//// console.log('qrsk信息', JSON.stringify(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.getList();
					}
				})
				.catch(err => {
					// console.log('request fail', JSON.stringify(err));
				});
		}
	}
};
</script>
<style lang="css">
@import '../common/common.css';
@import './assets/style/index.rpx.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>