NFT/pages/user/rake.vue

<template>
	<view class="rake">
		<view class="item" v-for="(ls,index) in list" v-if="ls.stock != 0">
			<view class="top">
				<view class="info-title">
					<image :src="ls.logo" mode=""></image>
					<view class="">{{ ls.name }}</view>
				</view>
				<view class="tags">
					<view class="tag" v-for="it in ls.tags" :key="it">{{ it }}</view>
				</view>
				<view class="base-info">
					<view class="info-item">
						<view class="tit">单价</view>
						<view class="val">{{ +ls.cost_money }}{{ls.cost_money_type}}/{{ ls.get_money_type === 'BZZ' ? '节点' : 'T' }}</view>
					</view>
					<view class="info-item">
						<view class="tit">有效算力</view>
						<view class="val">{{ ls.step }} {{ ls.get_money_type === 'BZZ' ? '节点' : 'T' }}</view>
					</view>
					<view class="info-item">
						<view class="tit">周期</view>
						<view class="val">{{ ls.first_step_time + ls.second_step_time }}天 + {{ ls.third_step_time }}天</view>
					</view>
				</view>
			</view>
			<view class="btn-wrapper">
				<view class="btn">
					服务费:{{ls.user_service_ratio*1}}%
					<text @click="+ls.lower_service_ratio<= +mList[index].user_service_ratio ? '': set(index,ls,0)" :class="{'black':+ls.lower_service_ratio<= +mList[index].user_service_ratio }">设置</text>
					
				</view>
<!-- 				<view class="btn">
					佣金:{{ls.award_ratio*1}}%
					<text @click="ls.lower_award_ratio*1 < mList[index].award_ratio*1 ? set(index,ls,1):''" :class="{'black':+ls.lower_award_ratio >= +mList[index].award_ratio }">设置</text>
				</view> -->
			</view>
			
		</view>
		<view class="jg" v-if="list.length !== 0"></view>
		<u-empty v-if="list.length == 0"></u-empty>
		<uni-popup ref="popup" type="center">
			<view class="wrapper">
				<view class="title">
					设置{{setType === 0? '服务费比例':'佣金比例'}}
				</view>
				<input type="number" v-model="setVal" :placeholder="placeTitle" class="inp" />
				<view class="btn-wrapper">
					<view class="cansel" @click="close()">取消</view>
					<view class="qr" @click="sub()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mining, buyMining } from '@/api/market.js';
import {setServiceRatio ,setRatio} from '@/api/set.js'
export default {
	data() {
		return {
			height: 0,
			setType: 0,
			setVal: null,
			list: [],
			mList: [],
			m_service_ratio: 0,
			uid:0,
			max_ratio: 0,
			min_ratio: 0,
			item: {}
		};
	},
	computed: {
		placeTitle() {
			return `可设置比例为${this.min_ratio}%~${this.max_ratio}%`;
		}
	},
	onReady(res) {
		// var _this = this;
		// uni.getSystemInfo({
		// 	success: resu => {
		// 		const query = uni.createSelectorQuery();
		// 		query.select('.list-cell').boundingClientRect();
		// 		query.exec(function(res) {
		// 			console.log(res, 'ddddddddddddd');
		// 			_this.height = resu.windowHeight - res[0].top + 'px';
		// 			console.log('打印页面的剩余高度', _this.height);
		// 		});
		// 	},
		// 	fail: res => {}
		// });
	},
	onLoad(opt) {
		if(opt) {
			this.uid = opt.uid
		}
		// uni.showLoading({
		// 	title: '加载中'
		// })
		this.loadMlist()
		
	},
	methods: {
		set(index,ls,num) {
			console.log(index)
			this.setType = num
			this.item = ls
			if(this.setType === 0) {
				this.min_ratio = +this.mList[index].user_service_ratio
				this.max_ratio = +this.list[index].lower_service_ratio
				console.log(this.min_ratio,this.max_ratio,'5555555555555555555555555')
				if(this.min_ratio  === this.max_ratio) {
					this.$api.msg('当前无法设置')
				}else {
					this.$refs.popup.open();
				}
				
				console.log(this.min_ratio,this.max_ratio)
			}else {
				this.min_ratio = +this.list[index].lower_award_ratio
				this.max_ratio = +this.mList[index].award_ratio
				console.log(this.min_ratio,this.max_ratio,'5555555555555555555555555')
				if(this.min_ratio  === this.max_ratio) {
					this.$api.msg('当前无法设置')
				}else {
					this.$refs.popup.open();
				}
			}
			
			
		},
		close() {
			this.$refs.popup.close();
			this.setVal = null;
		},
		sub() {
			console.log();
			this.$refs.popup.close();
			if(this.setType === 0){
				setServiceRatio(this.uid,{
					ratio: this.setVal,
					mid: this.item.id
				}).then(res => {
					this.$api.msg(res.msg)
					this.loadData()
				})
			}else {
				setRatio(this.uid,{
					ratio: this.setVal,
					mid: this.item.id
				}).then(res => {
					this.$api.msg(res.msg)
					this.loadData()
				})
			}

			this.setVal = null
			
			
			
		},
		loadData() {
			mining({
				uid: this.uid,
				page: 1,
				limit: 1000
			}).then(({ data }) => {
				this.list = data.data;
				// uni.hideLoading()
				console.log(this.list, '88888888888888');
			});
		},
		loadMlist() {
			mining({
				// uid: this.uid,
				page: 1,
				limit: 1000
			}).then(({ data }) => {
				this.mList = data.data;
				console.log(this.mList, '999999999999999999999999999999999999');
				this.loadData();
			});
		}
		
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
	// padding-top: 20rpx;
}
.rake {
	height: 100%;
	// padding-top: 30rpx;
}
.item {
	margin: 20rpx auto;
	width: 670rpx;
	// height: 438rpx;
	background: #f7f6fb;
	border-radius: 10rpx;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
	.top {
		// height: 347rpx;
		width: 100%;
		padding: 40rpx 30rpx 0;
		.info-title {
			display: flex;

			image {
				display: inline-block;
				width: 38rpx;
				height: 38rpx;
				margin-left: 10rpx;
				flex-shrink: 0;
			}
			view {
				padding-left: 12rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
		.tags {
			padding-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			.tag {
				display: inline-block;
				padding: 0 20rpx;
				text-align: center;
				line-height: 43rpx;
				background: #e3f6fa;
				border-radius: 22rpx;
				margin: 10rpx 10rpx 0;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0ec1a1;
			}
		}
		.base-info {
			padding-top: 30rpx;
			display: flex;
			justify-content: space-between;
			// text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			padding-bottom: 30rpx;
		}
		.end-time {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #5771df;
			padding-bottom: 24rpx;
		}
	}
	.btn-wrapper {
		// width: 670rpx;
		height: 95rpx;
		background: #ffffff;
		border-radius: 0px 0px 10rpx 10rpx;
		display: flex;
		justify-content: flex-end;
		// justify-content: space-between;
		align-items: center;
		padding-right: 20rpx;
		.btn {
			// display: flex;
			padding-left: 10rpx;
			text {
				
				display: inline-block;
				width: 108rpx;
				height: 39rpx;
				background: #5771df;
				border: 1rpx solid #5771df;
				box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 20rpx;
				text-align: center;
				line-height: 35rpx;
				margin-left: 11rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
			.black {
				background-color: #999;
				border-color: #999;
			}
		}
	}
}
.list-cell {
	width: 100%;
	height: 100%;
	background-color: #f8f8f8;
}
.wrapper {
	width: 549rpx;
	height: 344rpx;
	background: #ffffff;
	border-radius: 14rpx;
	.title {
		text-align: center;
		padding-top: 40rpx;
		font-size: 37rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.inp {
		display: block;
		margin: 60rpx auto;
		width: 439rpx;
		height: 68rpx;
		background: #f6f6f6;
		border-radius: 10rpx;
		padding-left: 13rpx;
	}
	.btn-wrapper {
		display: flex;
	
		view {
			width: 50%;
			text-align: center;
		}
		.cansel {
			font-size: 37rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.qr {
			font-size: 37rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #5771df;
		}
	}
}
.jg {
	height: 20rpx;
}
</style>