yunshan/pages/calculation/myCalculation.vue

<template>
	<view class="container">
		<view class="empty-box" v-show="list.length === 0">
			<empty></empty>
		</view>
		<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'?'节点':'台'}}</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._stop_time}}</view>
			</view>
			<view class="item">
				<view class="item-name">30天电费</view>
				<view class="item-val">{{ls.electric_price*30}}USDT</view>
			</view>
			<view class="item">
				<view class="item-name">购买时间</view>
				<view class="item-val">{{ls._pay_time}}</view>
			</view>
			<!-- <view class="dianfei" @click="getDf(ls.electric_price*30)">
				支付电费
			</view> -->

		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-dox">
					<image class="popup-logo" src="../../static/index/dianfei.png"></image>
					<!-- <view class="pop-title">已为您定制专属客服</view> -->

					<view class="pop-title">需支付<text>{{(dianfei*1).toFixed(3)}}USDT</text></view>
					<view class="pop-tip" @click="buy()">
						立即支付
					</view>
				</view>
			</view>
			<view class="close_icon" @click="close">
				<image src="../../static/img/img49.png"></image>
			</view>
		</uni-popup>

		<view class="curtain" :class="{'ishiden':isHiden}" @touchmove.stop.prevent="moveHandle">
			<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>
		</view>

		<!-- <view class="jg" v-if="list.length !== 0"></view> -->
		<uni-load-more :status="loadingType"></uni-load-more>
		<!-- <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>
</template>
<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		miningDateils,
		buyMining,
		mymining,
		charge
	} from '@/api/calculation.js';
	// import{} from '@/api/calculation.js'
	import empty from '@/components/empty';
	import {
		timeComputed
	} from '@/utils/rocessor.js';
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
	export default {
		components: {
			empty,
			uniCountdown,
			uniPopup
		},
		data() {
			return {
				id: '',
				type: '',
				num: 1,
				step: 0,
				password: '',

				price: '',
				list: {

				},
				checked: false,
				isHiden: true,


				dianfei: '',
				isShow: false,
				list: [],
				page: 1,
				limit: 10,
				loadingType: 'more',
			};
		},
		onLoad(option) {
			this.loadData();
		},
		onShow() {

		},
		onReachBottom() {
			this.loadData();
		},
		methods: {
			cancel() {
				this.password = ''
				this.isHiden = true
			},
			pswQd() {
				let obj = this;
				if (obj.password === '') {
					obj.$api.msg('请输入交易密码！');
					return
				}
				obj.isHiden = true
				console.log(obj.id ,'131',obj.num,'12',obj.password);
				charge({
							trade_psw: obj.password,
							num:obj.dianfei
						}
					)
					.then(data => {
						obj.$api.msg(data.msg);
						obj.password = '';
						obj.num = 1;
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/calculation/myCalculation'
							});
						}, 1500);
					})
					.catch(e => {
						obj.password = '';
						obj.num = 1;
						if (e.msg == '交易密码错误') {
							return;
						}
						console.log(e);
						var reg = new RegExp('购买矿机所需的');
						if (e.msg.match(reg) == -1) {} else {
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/finance/recharge'
								});
							}, 1500);
						}
					});
			},

			buy() {
				this.$refs.popup.close();
				this.isHiden = false
			},
			
			getDf(dianfei) {
				this.$refs.popup.open();
				this.dianfei = dianfei
				// this.id = id
			},
			close() {
				this.$refs.popup.close();
			},
			async loadData() {
				let obj = this;
				if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
					return
				}
				obj.loadingType = 'loading'
				mymining({
					page: obj.page,
					limit: obj.limit,
				}).then(({
					data
				}) => {
					console.log(data, "基础数据")
					// obj.list = data.data;
					obj.list = obj.list.concat(data.data)

					if (data.data.length == obj.limit) {
						obj.page++
						obj.loadingType = 'more'
					} else {
						obj.loadingType = 'noMore'
					}
					// 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;
					// })
				});
			},
			// 计算倒计时时间
			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%;

		}
	}

	.close_icon {

		image {
			width: 100%;
			height: 100%;
		}
	}

	.popup {
		width: 620rpx;
		height: 700rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		text-align: center;


		.popup-dox {
			// position: relative;
			// top: -60rpx;

			.popup-logo {
				margin-top: 80rpx;
				width: 449rpx;
				height: 329rpx;
			}

			.pop-title {
				font-size: 43rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				padding: 40rpx 0rpx;

				text {
					font-size: 59rpx;
					font-weight: 500;
					color: #FF6600;
				}

			}

			.pop-tip {
				font-size: 35rpx;
				font-weight: 500;
				color: #FFFFFF;
				width: 434rpx;
				line-height: 78rpx;
				text-align: center;
				height: 78rpx;
				background: #141E47;
				border-radius: 39rpx;
				margin: 0 auto;
			}
		}
	}

	.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;

	}

	.dianfei {
		position: absolute;
		right: 35rpx;
		bottom: 15rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 50rpx;
		width: 155rpx;
		height: 51rpx;
		background: #141E47;
		border-radius: 26rpx;
		text-align: center;
	}

	.item-wrapper {
		position: relative;
		padding: 0 35rpx 70rpx;
		width: 690rpx;
		height: 777rpx;
		background: #F7F6FB;
		border: 1rpx solid #071228;
		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;
			align-items: baseline;

			.item-val {
				font-weight: bold;
			}
		}

		.blue {
			color: #FF6600;

		}
	}

	.jg {
		height: 20rpx;
	}

	.curtain {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-color: rgba($color: #000000, $alpha: 0.2);

		.psw-wrapper {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -100%);
			width: 548.6rpx;
			height: 344.4rpx;
			background-color: #FFFFFF;
			border-radius: 15rpx 15rpx;

			.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: #5771DF;
			}
		}
	}
	.ishiden {
		display: none;
	}
</style>