yunshan/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" :class="{ blue: tabCurrent == '全部' }" @click="tabClick('全部', 1)">
					全部
				</view>
				<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" v-if="tabCurrent!== '全部'">
				<!-- <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="jg" v-else></view>
			<view class="list-cell" v-if="list.length > 0" v-for="(ls, index) in list" :key="index"
				:class="{'mini-list-cell': tabCurrent === '全部'}">
				<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.tag[0] !== '0'">
								<view class="cell-tip" v-for="item  in ls.tag" :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 }}/节点</view> -->
						<view class="">{{ ls.cost_money*1 +ls.cost_money_type }}/台</view>
					</view>
					<view class="tpl">
						<view class="">算力</view>
						<view class="">{{ ls.step }}{{ls.unit}}</view>
						<!-- <view class="" v-else>{{ ls.step }}T</view> -->
					</view>
					<view class="tpl">
						<view class="">每日收益</view>
						<view class="">{{(ls.day_get*1*ls.step*1).toFixed(8)*1}}{{ls.get_money_type}}</view>
					</view>
					<view class="tpl">
						<view class="">功率</view>
						<view class="">{{ls.power}}W</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)">{{ '立即购买' }}</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: '全部',
				tabType: 1,
				moneyTypeList: [{
						code: 'BTC',
						name: 'BTC',
						has_mining: 0
					},
					{
						code: 'ETH',
						name: 'ETH',
						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++++++++++")
					// console.log(obj.moneyTypeList,'moneyTypeList----------')
					// if(obj.moneyTypeList.length > 0){
					// 	obj.tabCurrent = obj.moneyTypeList[0].code
					// }
				});
			},
			// 请求载入数据
			async loadData() {
				let obj = this;
				uni.showLoading({
					title: '加载中...'
				});
				if (obj.tabCurrent === '全部') {
					obj.list = []
					mining({
						page: 1,
						limit: 1000
					}).then(({
						data
					}) => {
						uni.hideLoading();
						console.log(data.data, '9999999999999999999999999999999999')
						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++++++++++++');
					})
					// for(let i = 0 ; i<obj.moneyTypeList.length;i++){
					// 	if(obj.moneyTypeList[i].has_mining !==0){
					// 		mining({
					// 			page:1,
					// 			limit:1000,
					// 			type: obj.tabType,
					// 			get_money_type: obj.moneyTypeList[i].code
					// 		}).then(({ data }) => {
					// 			console.log(data)
					// 			let arr = 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;
					// 			});
					// 			obj.list = obj.list.concat(arr)
					// 			// console.log( obj.list.length)
					// 			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();

					// 		})
					// 	}

					// }
					// let len = obj.list.length;

				} else {
					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 (index === '全部') {
					console.log('ddddddddd')
				}
				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: #141E47;
			}

			.grey {
				background-color: #dbdbdb !important;
			}
		}

		.list-name {
			padding: 24rpx 50rpx;

			.name {
				font-size: 28rpx;
				margin-right: 15%;
				font-weight: 500;
				color: #666666;
			}

			.black {
				color: #333333;
				border-bottom: 2rpx solid #5771df;
				padding-bottom: 10rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}

	.more {
		color: #606266;
		font-size: 24rpx;
		font-weight: normal;
		border-bottom: 1rpx solid #606266;
	}

	.all-list {
		width: 180rpx;
		height: 180rpx;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}

	.list-cell {
		box-sizing: border-box;
		width: 670rpx;
		margin: 0 auto;
		padding: 40rpx 40rpx;
		border-radius: 30rpx 30rpx;
		background-color: #E4E7FF;
		margin-bottom: 20rpx;
		position: relative;

		.cell-title {
			padding: 29rpx 38rpx 29rpx 15rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		.tags {
			.cell-tip {
				display: inline-block;
				padding: 11rpx 18rpx 9rpx 20rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #0ec1a1;
				background-color: #e3f6fa;
				border-radius: 24rpx 24rpx;
				margin-right: 20rpx;
				margin-top: 15rpx;
			}

			.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 {
			display: flex;

			padding: 50rpx 0rpx 34rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;
			line-height: 40rpx;
			// text-align: center;
		}

		.cell-info {
			.tip {
				font-size: 34rpx;
				font-weight: bold;
				color: #FF6600;
				opacity: 0;
				line-height: 55px;
			}

			.zhiya-btn {
				background-color: #FF6600;
				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: #FF6600;
					color: #ffffff;
					width: 70%;
					text-align: center;
					padding: 25rpx 90rpx;
					border-radius: 15rpx;
				}
			}
		}
	}

	.jg {
		height: 20rpx;
	}

	.mini-list-cell {
		padding: 0rpx 40rpx 10rpx;

		.cell-tpl {
			padding: 10rpx 0 8rpx;
		}

		.cell-info {
			.tip {
				font-size: 34rpx;
				font-weight: bold;
				color: #5771df;
				opacity: 0;
				line-height: 40px;
			}

			.zhiya-btn {
				background-color: #FF6600;
				width: 150rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 26rpx;
				border-radius: 50rpx;
				color: #ffffff;
			}

			.grey {
				background-color: #999999;
			}
		}
	}
</style>