kunpeng/pages/calculation/myCalculation.vue

<template>
	<view class="container">
		<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="">单价</view>
					<view class="">{{ls.machine.cost_money}}</view>
				</view>
				<view class="tpl">
					<view class="">有效算力</view>
					<view class="">{{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.mining_start_time}}</view>
			</view> -->
			<view class="list-tip">
				<rich-text :nodes="ls.machine.detail"></rich-text>
			</view>
		</view>
		<view class="empty-box" v-show="list.length === 0"><empty></empty></view>
	</view>
</template>
<script>
import { mymining } from '@/api/calculation.js';
import empty from '@/components/empty';
export default {
	components: {
		empty
	},
	data() {
		return {
			list:'',
		};
	},
	onLoad(option){
		this.loadData();
	},
	onShow() {
		
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
	},
	methods: {
		async loadData() {
			let obj = this;
			mymining({
				page:1,
				limit:1000,
			}).then(({ data }) => {
				console.log(data);
			    obj.list = data.data;
			});
		},
	}
};
</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: #5771DF;
			}
			.zhiya-btn{
				background-color: #5771DF;
				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;
	}
</style>