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>
		<view class="jg" v-if="list.length !== 0"></view>
		<!-- <view class="list-cell" v-if="list.length > 0" v-for="(ls,index) in list" :key='index'>
			<view class="cell-title flex">
				<view class="cellTpl flex_item">
					<image :src="ls.machine.logo"></image>
					<view class="title">{{ls.machine.name}}</view>
				</view>
				<view class="status">{{ls.status == 0 ? '准备中' : ls.status ==  1 ? '挖矿中' : '已到期'}}</view>
			</view>
			<view class="cell-tip">{{ls.machine.first_step_time + ls.machine.second_step_time + ls.machine.third_step_time}}天矿机</view>
			<view class="flex cell-tpl">
				<view class="tpl">
					<view class="" v-if="ls.get_money_type == 'BZZ'">单价（节点）</view>
					<view class="" v-else>单价（T）</view>
					<view class="">{{ls.machine.cost_money * 1}} {{ls.machine.cost_money_type}}</view>
				</view>
				<view class="tpl">
					<view class="">有效算力</view>
					<view class="" v-if="ls.get_money_type == 'BZZ'">{{ls.num * 1}}节点</view>
					<view class="" v-else>{{ls.num * 1}}T</view>
				</view>
				<view class="tpl">
					<view class="">合约周期</view>
					<view class="">{{ls.machine.first_step_time + ls.machine.second_step_time + ls.machine.third_step_time}}天</view>
				</view>
			</view>
			<view class="cell-info flex">
				<view class="tip">到期时间：{{ls.mining_end_time}}</view>
			</view>
			<view class="cell-info flex">
				<view class="tip">购买时间：{{ls._pay_time}}</view>
			</view>
			<view class="cell-info flex" v-if="ls.status == 0">
				<view class="tip">倒计时：<uni-countdown
								color="#FFF"
								background-color="#BAC1EF"
								:day="ls.stopTimeD"
								:hour="ls.stopTimeH"
								:minute="ls.stopTimeM"
								:second="ls.stopTimeS"
								:index="index"
								@timeover="isTime"
							></uni-countdown></view>
			</view>
		</view> -->
		<view class="empty-box" v-show="list.length === 0"><u-empty></u-empty></view>
	</view>
</template>
<script>
import { mymining } from '@/api/market.js';
import { timeComputed } from '@/utils/rocessor.js';
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
export default {
	components: {
		uniCountdown
	},
	data() {
		return {
			list:'',
		};
	},
	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
		}
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
		
	}
}
.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 {
		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;
	}
</style>