ppl/pages/lanhu_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" style="margin: 20rpx;border-bottom: #fff solid 1rpx;padding-bottom: 20rpx;">
			<view v-if="zt==2">
				<view class="a">买方战队：<text class="b">{{ item.zd }}</text></view>
				<view class="a">买方姓名：{{ item.xm }}</view>
				<view class="a">卖方手机号：<text class="b">{{ item.sjh }}</text></view>			
				<view class="a">产品：{{ item.name }}({{ item.cname }})</view>
				<view class="a">实收款：<text class="b">{{ item.price }}元</text></view>
				<view class="a">利润周期：{{ item.tianshu }}天/{{ item.shouyi }}%</view>
				<view class="a">状态：
				    <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">转让时间：{{ item.time }}</view>
				<view class="a"  v-if="item.zt==0">
					<view style="float: left;">付款剩余时间：</view>
				    <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==1">交易密码验证：</view>
				<input class="srk" placeholder="请输入交易密码" v-model="item.jymm"  v-if="item.zt==1"/>
				<view class="a" v-if="item.zt==1">付款凭证：</view>
				<view v-if="item.zt==1">
					<image v-if="item.dkpz"  style="width:150rpx;height: 150rpx;"   referrerpolicy="no-referrer"
						:src="item.dkpz"
						 @click="viewimg(item.dkpz)"
					/>				
				</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">产品：{{ item.name }}({{ item.cname }})</view>
				<view class="a">支付：<text class="b">{{ item.price1 }}元</text></view>
				<view class="a">抢购时间：{{ item.time }}</view>
				<view class="a">利润周期：{{ item.tianshu }}天/{{ item.shouyi }}%</view>
				<view class="a">转让时间：{{ item.zrtime }}</view>
				<button type="warn" style="margin-top:10rpx;background: #f3a511;font-size: 30rpx;margin-bottom: 20rpx;width: 50%;" @click="duihuan(item)">兑换</button>
			</view>
			<view v-if="zt==3">
				<view class="a">产品：{{ item.name }}({{ item.cname }})</view>
				<view class="a">支付：<text class="b">{{ item.price }}元</text></view>
				<view class="a">抢购时间：{{ item.time }}</view>
				<view class="a">利润周期：{{ 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: {
		duihuan(item){
			uni.navigateTo({
				url: 'duihuan?id='+item.id
			});
		},
		change(zt){
			this.zt=zt;
			this.page=1;
			this.qglist=[]
			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.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 => {
					var shuju = res.data.data.data;
					this.qglist = shuju
					this.status = 'more';
					if (shuju.length == 0) {
						this.status = 'nomore';
					}
				})
				.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.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						return;
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						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:   #98a737;background-attachment: fixed !important;
    background-repeat: no-repeat !important;}
.a{color: #fff;font-size: 30rpx;line-height: 180%;}	
.b{color: #ef0000;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;
		padding-left: 20rpx;
		font-size: 30rpx;
	}
	.top{display: flex;justify-content: space-between;border-bottom: #fff solid 1rpx;line-height: 60rpx;padding-bottom: 10rpx;}
	.xuanzhong{color: #fff;background: #8a9e0a;display: inline-block;text-align: center;width: 33%;}
	.wxz{color: #fff;display: inline-block;text-align: center;width: 33%;}
</style>