NFT/pages/market/market.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 === 'FIL'"
				>
					{{ 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.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="" v-if="ls.get_money_type == 'BZZ'">{{ ls._cost_money }}/节点</view>
						<view class="" v-else>{{ ls._cost_money }}/T</view>
					</view>
					<view class="tpl">
						<view class="">有效算力</view>
						<view class="" v-if="ls.get_money_type == 'BZZ'">{{ ls.step }}节点</view>
						<view class="" v-else>{{ 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="luckbox">
					购买当前矿机所需幸运值<span>{{ls.cost_times}}</span>,您当前拥有的幸运值为<span>{{ls.luck_point - ls.exchange_point}}</span>
				</view>
			</view>
			<view class="empty-box" v-show="list.length === 0"><u-empty text="敬请期待" mode="data"></u-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/market.js';
import { wallet } from '@/api/finance.js';
export default {
	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: [],
			list: [],
			buyId: '',
			password: '',
			num: ''
		};
	},
	onLoad(option) {
		this.moneyType();
		this.loadData();
	},
	onShow() {},
	//下拉刷新
	onPullDownRefresh() {
		this.moneyType();
	},
	methods: {
		// 所有币种
		async moneyType() {
			let obj = this;
			// console.log(obj.moneyTypeList);
			wallet({}).then(({ data }) => {
				console.log(data);
				obj.like_rmb = data.all_rmb;
				obj.like_usdt = data.all_usdt;
				const arr = Object.keys(data.back);
				console.log(arr);
				let ar = [];
				arr.forEach(e => {
					ar.push(data.back[e]);
				});
				obj.moneyTypeList = ar;
				console.log(obj.moneyTypeList, 'swpie');
			});
		},
		// 请求载入数据
		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/market/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: #44969d;
			font-size: 30rpx;
			font-weight: bold;
			color: #ffffff;
			width: 24.49%;
			margin-right: 5rpx;
			text-align: center;
			line-height: 60rpx;
		}
		.blue {
			background-color: #44969d;
		}
		.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: #f3feff;
	margin-bottom: 20rpx;
	position: relative;
	.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;
			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 {
		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: #44969d;
			line-height: 55px;
		}
		.zhiya-btn {
			background-color: #44969d;
			width: 150rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 26rpx;
			border-radius: 50rpx;
			color: #ffffff;
		}
		.grey {
			background-color: #999999;
		}
	}
	.luckbox {
		margin-left: -40rpx;
		width: 670rpx;
		background: #7bbbc0;
		border-radius: 0px 0px 10rpx 10rpx;
		padding: 32rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		span {
			font-size: 30rpx;
			color: #ff0000;
		}
	}
}

.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: #44969d;
				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: #44969d;
			opacity: 0;
			line-height: 40px;
		}
		.zhiya-btn {
			background-color: #44969d;
			width: 150rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 26rpx;
			border-radius: 50rpx;
			color: #ffffff;
		}
		.grey {
			background-color: #999999;
		}
	}
}
</style>