lnyk/pages/calculation/buyCalculation.vue

<template>
	<view class="container">
		<image class="logo-img" src="../../static/img/img01.png"></image>
		<view class="list-box">
			<scroll-view scroll-x class="list-title">
				<view
					class="title"
					v-for="(ls, index) in moneyTypeList"
					:key="index"
					:class="{ blue: tabCurrent == ls.code, grey: ls.has_mining == 0 }"
					@click="tabClick(ls.code, ls.has_mining)"
					v-if="ls.name !== 'USDT'"
				>
					{{ ls.name }}
				</view>
			</scroll-view>
			<view class="flex_item list-name">
				<view class="name" :class="{ black: tabType == 1 }" @click="tabTypeClick(1)">算力包</view>
				<view class="name" :class="{ black: tabType == 2 }" @click="tabTypeClick(2)">独享矿机</view>
				<!-- <view class='name' :class="{'black':tabType==3}" @click="tabTypeClick(3)">联合挖矿</view> -->
				<!-- <view class='name' :class="{'black':tabCurrent==4}">分类名称</view> -->
			</view>
			<view class="list-cell" v-if="list.length > 0" v-for="(ls, index) in list" :key="index">
				<view class="flex">
					<view>
						<view class="cell-title flex">
							<image :src="ls.logo"></image>
							<view class="title">{{ ls.name }}</view>
						</view>
						<view class="tags">
							<!-- <view class="cell-tip">{{ ls.first_step_time + ls.second_step_time + ls.third_step_time }}天矿机</view> -->
							<template v-if="ls.tags[0] !== '0'">
								<view class="cell-tip" v-for="item  in ls.tags" :key="item">{{item}}</view>
								<!-- <view class="cell-tag">特价</view> -->
							</template>
						</view>
					</view>
					<image v-if="ls.stock == 0" class="all-list" src="../../static/img/img51.png"></image>
				</view>
				<view class="flex cell-tpl">
					<view class="tpl">
						<view class="">单价</view>
						<view class="">{{ ls._cost_money }}/T</view>
					</view>
					<view class="tpl">
						<view class="">有效算力</view>
						<view class="">{{ ls.step }}T</view>
					</view>
					<view class="tpl">
						<view class="">合约周期</view>
						<view class="">{{ ls.first_step_time + ls.second_step_time + ls.third_step_time }}天</view>
					</view>
					<!-- <view class="tpl">
						<view class="">上架期</view>
						<view class="">{{ ls.stand_time }}天</view>
					</view> -->
				</view>
				<view class="cell-info flex">
					<view class="tip">剩余数量：{{ ls | dataStock }}</view>
					<view class="zhiya-btn" v-if="ls.stock > 0" @click="ToBuy(ls)">{{ ls.type == 3 ? '立即质押' : '立即购买' }}</view>
					<view class="zhiya-btn grey" v-if="ls.stock == 0">已售罄</view>
				</view>
				<!-- <view class="list-tip" v-if="ls.detail"><rich-text :nodes="ls.detail"></rich-text></view> -->
			</view>
			<view class="empty-box" v-show="list.length === 0"><empty></empty></view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="cancel flex" @click="close">
					<view></view>
					<view class="tip">x</view>
				</view>
				<view class="list-box">
					<view class="popup-text">购买数量：</view>
					<view class="password"><input type="number" v-model="num" /></view>
					<view class="popup-text">支付密码：</view>
					<view class="password"><input type="password" v-model="password" /></view>
					<view class="confirm-btn" @click="pay"><text>确认购买</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { mining, buyMining } from '@/api/calculation.js';
import { moneyType } from '@/api/index.js';
import empty from '@/components/empty';
export default {
	components: {
		empty
	},
	filters: {
		dataStock: function(ls) {
			let type = 'T';
			// if (+ls.stock >= 1024) {
			// 	// type = 'P';
			// 	return `${ls.stock/1024 }/${ls.all_stock/1024 }${type}`;
			// } else {
			// 	return `${ls.stock}/${ls.all_stock}${type}`;
			// }
			return `${+ls.stock}${type}/${+ls.all_stock}${type}`;
		}
	},
	data() {
		return {
			tabCurrent: 'XCH',
			tabType: 1,
			moneyTypeList: [
				{
					code: 'XCH',
					name: 'XCH',
					has_mining: 1
				},
				{
					code: 'USDT',
					name: 'USDT',
					has_mining: 0
				},
				{
					code: 'BTC',
					name: 'BTC',
					has_mining: 0
				},
				{
					code: 'ETH',
					name: 'ETH',
					has_mining: 0
				},
				{
					code: 'FIL',
					name: 'FIL',
					has_mining: 0
				}
			],
			list: [],
			buyId: '',
			password: '',
			num: ''
		};
	},
	onLoad(option) {
		this.moneyType();
		this.loadData();
	},
	onShow() {},
	//下拉刷新
	onPullDownRefresh() {
		this.moneyType();
	},
	methods: {
		// 所有币种
		async moneyType() {
			let obj = this;
			console.log(obj.moneyTypeList);
			moneyType({}).then(({ data }) => {
				// console.log(data,"+++++++moneyTypeList++++++++++")
				obj.moneyTypeList = data;
				// console.log(obj.moneyTypeList,'moneyTypeList----------')
				// if(obj.moneyTypeList.length > 0){
				// 	obj.tabCurrent = obj.moneyTypeList[0].code
				// }
			});
		},
		// 请求载入数据
		async loadData() {
			let obj = this;
			uni.showLoading({
				title: '加载中...'
			});
			mining({
				page: 1,
				limit: 1000,
				type: obj.tabType,
				get_money_type: obj.tabCurrent
			}).then(({ data }) => {
				console.log(data, '1111');
				obj.list = data.data.map(e => {
					e.step = +e.step;
					e._cost_money = +e._cost_money.replace(e.cost_money_type, '') + e.cost_money_type;
					return e;
				});
				console.log(obj.list, 'obj.list++++++++++++');
				let len = obj.list.length;

				for (let i = 0; i < len; i++) {
					// obj.list[i].tags = obj.list[i].tags.splice(',')
					for (let j = 0; j < len; j++) {
						if (obj.list[i].step > obj.list[j].step) {
							let z = obj.list[i];
							obj.list[i] = obj.list[j];
							obj.list[j] = z;
						}
					}
				}
				
				console.log(obj.list, 'new obj.list-------------');
				uni.hideLoading();
			});
		},
		ToBuy(ls) {
			// let obj = this;
			// obj.buyId = id;
			// this.$refs.popup.open();
			uni.navigateTo({
				url: '/pages/calculation/details?id=' + ls.id + '&type=' + ls.type
			});
		},
		pay() {
			let obj = this;
			buyMining(
				{
					num: obj.num,
					trade_psw: obj.password
				},
				obj.buyId
			)
				.then(({ data }) => {
					obj.$api.msg('购买成功！');
					obj.loadData();
					obj.password = '';
					obj.num = '';
					obj.$refs.popup.close();
				})
				.catch(e => {
					obj.loadData();
					obj.password = '';
					obj.num = '';
					obj.$refs.popup.close();
				});
		},
		close() {
			this.$refs.popup.close();
		},
		tabClick(index, has_mining) {
			if (has_mining == 0) {
				this.$api.msg('敬请期待！');
			} else {
				this.tabCurrent = index;
				this.loadData();
			}
		},
		tabTypeClick(index) {
			this.tabType = index;
			this.loadData();
		}
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
	}
}
.logo-img {
	margin: 40rpx 6%;
	width: 88%;
	height: 209rpx;
}
.list-box {
	.list-title {
		overflow: hidden;
		white-space: nowrap;
		.title {
			display: inline-block;
			background-color: #bac1ef;
			font-size: 30rpx;
			font-weight: bold;
			color: #ffffff;
			width: 24.49%;
			margin-right: 5rpx;
			text-align: center;
			line-height: 60rpx;
		}
		.blue {
			background-color: #5771df;
		}
		.grey {
			background-color: #dbdbdb !important;
		}
	}
	.list-name {
		padding: 24rpx 50rpx;
		.name {
			font-size: 28rpx;
			margin-right: 20%;
			font-weight: 500;
			color: #666666;
		}
		.black {
			color: #333333;
			border-bottom: 2rpx solid #5771df;
			padding-bottom: 10rpx;
			font-size: 30rpx;
		}
	}
}
.more {
	color: #606266;
	font-size: 24rpx;
	font-weight: normal;
	border-bottom: 1rpx solid #606266;
}
.all-list {
	width: 180rpx;
	height: 180rpx;
}
.list-cell {
	box-sizing: border-box;
	width: 670rpx;
	margin: 0 auto;
	padding: 40rpx 40rpx;
	border-radius: 30rpx 30rpx;
	background-color: #f7f6fb;
	margin-bottom: 20rpx;
	.cell-title {
		padding: 29rpx 38rpx 29rpx 15rpx;
		font-size: 38rpx;
		font-weight: bold;
		color: #333333;
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 15rpx;
		}
	}
	.tags {
		.cell-tip {
			display: inline-block;
			padding: 11rpx 18rpx 9rpx 20rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #0ec1a1;
			background-color: #e3f6fa;
			border-radius: 24rpx 24rpx;
			margin-right: 20rpx;
		}
		.cell-tag {
			display: inline-block;
			margin-left: 20rpx;
			padding: 4rpx 18rpx 3rpx 20rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: red;
			// background-color: #fff;
			// border-radius: 24rpx 24rpx;
			border: 4rpx red solid;
		}
	}

	.cell-tpl {
		padding: 50rpx 0rpx 34rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
		// text-align: center;
	}
	.cell-info {
		.tip {
			font-size: 34rpx;
			font-weight: bold;
			color: #5771df;
			opacity: 0;
			line-height: 55px;
		}
		.zhiya-btn {
			background-color: #5771df;
			width: 150rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 26rpx;
			border-radius: 50rpx;
			color: #ffffff;
		}
		.grey {
			background-color: #999999;
		}
	}
	.list-tip {
		background-color: #bac1ef !important;
		word-wrap: break-word;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		padding: 36rpx 32rpx;
		margin-top: 15rpx;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}
}
.empty-box {
	width: 100%;
	height: 500rpx;
}
//弹窗
.popup {
	background-color: #ffffff;
	border-radius: 25rpx;
	font-size: 30rpx;
	.cancel {
		text-align: center;
		width: 100%;
		line-height: 60rpx;
		.tip {
			background-color: #5771df;
			color: #ffffff;
			width: 70rpx;
			height: 70rpx;
			border-top-right-radius: 25rpx;
		}
	}
	.list-box {
		padding: 0rpx 80rpx;
		.password {
			padding: 50rpx 0rpx;
			width: 100%;
			input {
				width: 70%;
				height: 80rpx;
				border: 2rpx solid #999999;
				padding-left: 25rpx;
				box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.27);
				border-radius: 11rpx;
			}
		}
		.confirm-btn {
			padding-bottom: 120rpx;
			padding-top: 30rpx;
			text {
				background-color: #5771df;
				color: #ffffff;
				width: 70%;
				text-align: center;
				padding: 25rpx 90rpx;
				border-radius: 15rpx;
			}
		}
	}
}
</style>