NFT/pages/market/myCalculation.vue

<template>
	<view class="container">
		<view class="item-wrapper" v-if="list.length > 0" v-for="(ls,index) in list" :key='index'>
			<view class="item">
				<view class="item-name">设备名称</view>
				<view class="item-val">{{ls.machine.name}}</view>
			</view>
			<view class="item">
				<view class="item-name">状态</view>
				<view class="item-val blue">{{ls.status == 0 ? '准备中' : ls.status ==  1 ? '挖矿中' : '已到期'}}</view>
			</view>
			<view class="item">
				<view class="item-name">合约期限</view>
				<view class="item-val blue">{{ls.machine.first_step_time + ls.machine.second_step_time }}天 + {{ ls.machine.third_step_time}}天</view>
			</view>
			<view class="item">
				<view class="item-name">算力</view>
				<view class="item-val blue">{{+ls.num}} {{ls.get_money_type==='BZZ'?'节点':'T'}}</view>
			</view>
			<view class="item">
				<view class="item-name">管理费</view>
				<view class="item-val">{{ls.user_service_ratio}}%</view>
			</view>
			<view class="item">
				<view class="item-name">单价</view>
				<view class="item-val">{{ls.machine.cost_money * 1}} {{ls.machine.cost_money_type}}/{{ls.get_money_type==='BZZ'?'节点':'T'}}</view>
			</view>
			<view class="item">
				<view class="item-name">购买份数</view>
				<view class="item-val">{{+ls.num}}</view>
			</view>
			<view class="item">
				<view class="item-name">总价</view>
				<view class="item-val">{{ls._cost_money}}</view>
			</view>
			<view class="item">
				<view class="item-name">购买时间</view>
				<view class="item-val">{{ls._pay_time}}</view>
			</view>
			<view class="item" v-if="ls.redeem_money*1 > 0 && ls.status == 3">
				<view class="item-name">赎回价格</view>
				<view class="item-val">{{ls.redeem_money*1*ls.num}}{{ls.redeem_money_type}}</view>
			</view>
			<view class="item" v-if="ls.mortgage_money*1 >0 && ls.status != 3">
				<view class="item-name"></view>
				<view class="btn" @click="buy(ls,1)">
					质押
				</view>
			</view>
			<view class="item" v-if=" ls.status == 3">
				<view class="item-name"></view>
				<view class="btn" @click="shu(ls,2)">
					赎回
				</view>
			</view>
			
		</view>
		<view class="empty-box" v-show="list.length === 0"><u-empty></u-empty></view>
		<u-popup v-model="show1" mode="center" width="548rpx" border-radius="14">
			<view class="psw-wrapper">
				<view class="psw-title">请输入支付密码</view>
				<input type="password" v-model="password" class="psw-ipt" />
				<view class="psw-btn">
					<text @click="cancel">取消</text>
					<text class="psw-qd" @click="pswQd">确定</text>
				</view>
			</view>
		</u-popup>
		<uni-popup ref="mation" type="center">
			<view class="popup">
				<view class="cancel flex" @click="close2"><view class="tip"></view></view>
				<view class="list-boxs">
					<view class="textBox flex">
						<view class="font">质押金额:</view>
						<view class="number">{{ zhiya * 1*num }} {{ zhiyaType }}</view>
					</view>
					<view class="xian"></view>
					<view class="textBox flex">
						<view class="font">赎回金额:</view>
						<view class="number">{{ shuhui * 1 *num }} {{ shuhuiType }}</view>
					</view>
					<view class="xian"></view>
					<view class="tishi">您是否质押该框机</view>
					<view class="btnBox flex">
						<view class="btn1" @click="close()">取消</view>
						<view class="btn2" @click="mai()">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { mymining } from '@/api/market.js';
import { timeComputed } from '@/utils/rocessor.js';
import { redeem,mortgage } from '@/api/product.js';
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
export default {
	components: {
		uniCountdown
	},
	data() {
		return {
			type: '',//判断是质押还是赎回
			show1: false,//是否显示密码框
			password:'',//交易密码
			list:'',
			num:'',//矿机数量
			id:'',//需要的id
			zhiya:'',//质押金额
			zhiyaType:'',//质押单位
			shuhui:'',//赎回金额
			shuhuiType:'',//赎回单位
		};
	},
	onLoad(option){
		this.loadData();
	},
	onShow() {
		
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
	},
	methods: {
		async loadData() {
			let obj = this;
			uni.showLoading({
				title:"加载中",
			})
			mymining({
				page:1,
				limit:1000,
			}).then(({ data }) => {
				console.log(data,"基础数据")
				obj.list = data.data;
				obj.list = data.data.map((e,ind) => {
					let ar = e;
					console.log(e,"饿");
					// 判断是否为进行中的活动
					if (ar.status === 0) {
						// 计算倒计时时间
						obj.timeComputed(ar.mining_start_time * 1000, ar);
						console.log(ar.stopTimeD)
					} else {
						console.log('++++++++++')
						// 获取距离开始还需要多少时间
						if( ar.time){
						let arTime = ar.time.split(':');
						let h = arTime[0];
						let m = arTime[1];
						let time = new Date();
						// 设置时间
						time.setHours(h, m, 0);
						// 计算倒计时时间
						obj.timeComputed(time.getTime(), ar);}
					}
					
					return e;
				})
				uni.hideLoading()
			});
		},
		// 计算倒计时时间
		timeComputed(da, ar) {
			let obj = this;
			// 计算时间，保存需要多少时间到期
			let stopTime = timeComputed(da);
			console.log(stopTime);
			ar.stopTimeD = stopTime.day;
			ar.stopTimeH = stopTime.hours;
			ar.stopTimeM = stopTime.minutes;
			ar.stopTimeS = stopTime.seconds;
		},
		isTime(index) {
			this.list[index].status = 1
		},
		buy(data,type){
			this.type = type
			this.id = data.id;
			this.num = data.num*1;
			this.zhiya = data.mortgage_money
			this.zhiyaType = data.mortgage_money_type
			this.shuhui = data.redeem_money
			this.shuhuiType = data.redeem_money_type
			this.$refs.mation.open();
		},
		close(){
			this.type = '';
			this.id = "";
			this.zhiya = "";
			this.zhiyaType = "";
			this.shuhui = "";
			this.shuhuiType = "";
			this.$refs.mation.close();
		},
		mai(){
			this.$refs.mation.close();
			this.show1 = true
		},
		shu(data,type){
			this.type = type
			this.id = data.id;
			this.show1 = true
		},
		cancel() {
			this.type = '';
			this.password = '';
			this.id = "";
			this.zhiya = "";
			this.zhiyaType = "";
			this.shuhui = "";
			this.shuhuiType = "";
			this.show1 = false;
		},
		pswQd() {
			if (this.type == 1){
				mortgage({trade_psw: this.password},this.id).then(e => {
					this.password = '';
					this.id = "";
					this.zhiya = "";
					this.zhiyaType = "";
					this.shuhui = "";
					this.shuhuiType = "";
					this.show1 = false;
					this.$api.msg('质押成功');
				}).catch(e =>{
					console.log(e)
				})
			}else {
				redeem({trade_psw: this.password},this.id).then(e => {
					this.password = '';
					this.id = "";
					this.zhiya = "";
					this.zhiyaType = "";
					this.shuhui = "";
					this.shuhuiType = "";
					this.show1 = false;
					this.$api.msg('赎回成功');
				}).catch(e =>{
					console.log(e)
				})
			}
		}
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
		padding-bottom: 20rpx;
	}
}
.list-cell{
		padding: 40rpx 40rpx;
		.cell-title{
			padding: 29rpx 38rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			.cellTpl{
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 15rpx;
				}
			}
			.status{
				color: #E51C23;
			}
		}
		.cell-tip{
			padding: 0rpx 38rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #0EC1A1;
		}
		.cell-tpl{
			padding: 40rpx 31rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;
			line-height: 40rpx;
		}
		.cell-info{
			margin-bottom: 25rpx;
			.tip{
				font-size: 30rpx;
				font-weight: bold;
				color: #44969d;
			}
			.zhiya-btn{
				background-color: #44969d;
				padding: 12rpx 22rpx;
				font-size: 24rpx;
				border-radius: 50rpx;
				color: #FFFFFF;
			}
		}
		.list-tip{
			word-wrap:break-word;
			background-color: #BAC1EF !important;
			font-size: 24rpx;
			font-weight: 500;
			color: #333333;
			padding: 36rpx 32rpx;
			margin-top: 15rpx;
			border-bottom-left-radius:15rpx ;
			border-bottom-right-radius:15rpx ;
		}
	}
	.empty-box{
		margin-top: 100rpx;
		width: 100%;
		height: 500rpx;
	}
	.item-wrapper {
		position: relative;
		padding: 0 35rpx;
		width: 690rpx;
		height: 748rpx;
		background: #F7F6FB;
		border: 1rpx solid #44969d;
		border-radius: 20rpx;
		margin: 20rpx auto;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.item {
			display: flex;
			justify-content: space-between;
			.item-val {
				font-weight: bold;
			}
		}
		.blue {
			color: #44969d;
			
		}
	}
	.jg {
		height: 20rpx;
	}
	.btn {
		background-color: #44969d;
		width: 150rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
		color: #ffffff;
	}
	.popup {
		height: 618rpx;
		background: #ffffff;
		box-shadow: 3rpx 3rpx 6rpx 0rpx rgba(31, 31, 31, 0.17);
		border-radius: 40rpx;
		width: 700rpx;
		.cancel {
			text-align: center;
			width: 100%;
			line-height: 60rpx;
			position: relative;
			.tip {
				color: #000000;
				border-radius: 40rpx;
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				top: 0;
				right: 0;
				background-color: #fff;
			}
		}
		.list-boxs {
			width: 90%;
			margin: 0 auto;
			margin-top: 100rpx;
			.tishi {
				padding-top: 50rpx;
				font-size: 30rpx;
				font-weight: bold;
				width: 100%;
				text-align: center;
			}
			.textBox {
				padding: 24rpx 18rpx;
				.font {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #4f4f4f;
				}
				.number {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #fb3a2f;
				}
				.text {
					text-indent: 2em;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #4f4f4f;
				}
			}
			.btnBox {
				padding: 60rpx 30rpx;
				.btn1 {
					width: 200rpx;
					padding: 20rpx;
					text-align: center;
					border:1px solid #44969d;
					border-radius: 40rpx;
					
				}
				.btn2 {
					width: 200rpx;
					padding: 20rpx;
					text-align: center;
					color: #fff;
					background: #44969d;
					border-radius: 40rpx;
				}
			}
			.xian {
				width: 100%;
				height: 1px;
				background: #e7dfe8;
			}
		}
	}
	.psw-wrapper {
		width: 548rpx;
		height: 344rpx;
		background-color: #ffffff;
		.psw-title {
			width: 100%;
			font-size: 35rpx;
			padding: 43rpx 0 49rpx;
			text-align: center;
			font-weight: 800;
		}
		.psw-ipt {
			display: block;
			background-color: #dce3ed;
			height: 90rpx;
			width: 464rpx;
			padding-left: 30rpx;
			margin: 0 auto;
			font-size: 80rpx;
		}
		.psw-btn text {
			display: inline-block;
			text-align: center;
			width: 50%;
			padding-top: 29rpx;
			font-size: 35rpx;
		}
		.psw-qd {
			color: #45969b;
		}
	}
	
</style>