yunshan/pages/index/index.vue

<template>
	<view class="container">
		<view class="tiele-index">首页</view>
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in banner" :key="swiper.id" @click="ToBanner(swiper)">
						<image :src="swiper.pic"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">
					<view class="dots" v-for="(swiper, index) in banner" :class="[swiperCurrent >= index ? 'on' : '']"
						:key="index"></view>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- <view class="title-box">
				<view class="img">
					<image src="../../static/index/index01.png" mode=""></image>
				</view>
				<view class="title">
					算力产品
				</view>
			</view> -->
			<!-- <view class="content-box">
				<view class="cpTitle">
					<view class="title-left">
						<view class="title-img">
							<image src="../../static/index/index05.png" mode=""></image>
						</view>
						<view class="title-title">
							BTC服务器创新算力产品
						</view>
					</view>
					<view class="title-right">
						单价：<text> 63 </text>Usdt/T
					</view>
				</view>
				<view class="cpContent">
					<view class="left">
						<view class="left-img">
							<image src="../../static/index/index02.png" mode=""></image>
						</view>
						<view class="left-title">
							S19云杉矿机
						</view>
					</view>
					<view class="between">
						<text>预计日产出：0.0125466THS</text>
						<text>单份日电费：0.76元/度</text>
						<text>平台管理费：20%</text>
						<text>产币有效期：720天</text>
						<text>上架期：T+1</text>
					</view>
					<view class="right" @click="navTo()">
						立即购买
					</view>
				</view>
			</view> -->
			<view class="title-box">
				<view class="img">
					<image src="../../static/index/index03.png" mode=""></image>
				</view>
				<view class="title">
					矿机商城
				</view>
			</view>
			<view class="content-box" v-for="(item,index) in list">
				<view class="cpTitle">
					<view class="title-left">
						<view class="title-img">
							<image src="../../static/index/index05.png" mode=""></image>
						</view>
						<view class="title-title">
							{{item.name}}
						</view>
					</view>
					<view class="title-right">
						单价：<text>{{(item.cost_money*1/item.step).toFixed(3)}}  </text>{{item.cost_money_type}}/{{item.unit}}
					</view>
				</view>
				<view class="cpContent">
					<view class="left">
						<view class="left-img">
							<image :src="item.logo" mode=""></image>
						</view>
						
					</view>
					<view class="between">
						<text>算力：{{item.step}}{{item.unit}}</text>
						<text>上架期：T+{{item.stand_time}}</text>
						<text>产币有效期：无限</text>
						<text>预计日产出：{{(item.day_get*1*item.step*1).toFixed(8)*1}}{{item.get_money_type}}</text>
						<text>单份日电费：{{item.electric_fee}}元/度</text>
						<text>平台管理费：{{item.service_ratio*1}}%</text>
						<text>库存：{{item.stock*1}}台</text>
					</view>
					<view class="right" @click="navTo('./shoppingDetails?id='+item.id)">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	import {
		mining,
		buyMining
	} from '@/api/calculation.js';
	import {
		interceptor
	} from '@/utils/loginUtils';
	import {
		loadIndexs,
		moneyType,
		getFil,
		getDataYun
	} from '@/api/index.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				tabCurrent: '全部',
				swiperCurrent: 0,
				banner: [],
				list: '',
				filData: {},
				filUserData: [],

			};
		},
		computed: {
			...mapState(['loginInterceptor', 'hasLogin'])
		},
		onLoad: function(option) {
			// this.loadDatass()
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
		},
		onShow: function() {
			// 判断是否强制登录
			if (this.loginInterceptor && !this.hasLogin) {
				// 登录拦截
				interceptor();
			} else {
				this.loadData();
				console.log('start')
				this.loadDatass()
				// this.moneyType();
			}
			// this.getFil();
			// this.getDataYun();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData();
			// this.moneyType();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			loadData() {
				let obj = this
				loadIndexs().then(res => {
					obj.banner = res.data.banner
					console.log(res.data.banner, 'www');
				})
			},
			navTo(url) {
				 uni.navigateTo({
				url
				 });
			

			},
			//轮播图
			swiperChange(e) {
				// console.log(e);
				let index = e.detail.current;
				this.swiperCurrent = index;
			},


			loadDatass() {
				// console.trace()
				let obj = this;
				// uni.showLoading({
				// 	title: '加载中...'
				// });

				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++++++++++++');
				})




			},
		}
	};
</script>

<style lang="scss">
	page {
		min-height: 100%;
		background-color: #ffffff;

		.container {
			width: 100%;
			padding: 25rpx 40rpx;
		}
	}

	.tiele-index {
		font-weight: 500;
		font-size: 50rpx;
		padding: 30rpx 0rpx 30rpx 0rpx;
	}

	.top-head {
		position: fixed;
		top: 0;
		z-index: 99;
		width: 100%;
		background-color: #272f41;
		padding: 15rpx 35rpx;
		color: #edc959;

		image {
			width: 80rpx;
			height: 80rpx;
		}

		.top-name {
			padding-left: 15rpx;
		}
	}

	//轮播图
	.swiper {
		width: 100%;
		display: flex;
		justify-content: center;
		border-radius: 15rpx;

		.swiper-box {
			width: 100%;
			height: 335rpx;
			overflow: hidden;
			// box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			border-radius: 15rpx;
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 100%;

				swiper-item {
					image {
						width: 100%;
						height: 100%;
						border-radius: 15rpx;
					}
				}
			}

			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;

				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;

					&.on {
						width: (100%/3);
					}
				}
			}
		}
	}

	.notice-box {
		.text-right {
			text-align: right;
		}

		padding: 40rpx 0rpx;

		.title {
			font-size: 28rpx;
			padding-bottom: 19rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			position: relative;
			left: -13rpx;
		}

		.info-box {
			width: 678rpx;
			height: 282rpx;
			margin: 0 auto;
			background: #ffffff;
			border: 2px solid #5771df;
			border-radius: 5rpx;
			padding: 15rpx 22rpx 25rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			// line-height: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			// justify-content: ;
			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.top-left {
					font-size: 63rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #5771df;
				}

				.top-right {
					text-align: right;

					.top-right-bottom {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #5771df;
					}
				}
			}

			.middle {
				display: flex;
				justify-content: space-between;

				.middle-item {
					display: flex;
					flex-direction: column;

					.item-val {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #5771df;
					}
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;

				.item-val {
					display: flex;
					// justify-content: ;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #5771df;
				}
			}
		}

		.ad {
			display: block;
			margin: 0 auto;
			width: 678rpx;
			height: 162rpx;
		}

		.tit {
			margin: 0 auto;
			margin-top: 31rpx;
			width: 678rpx;
			height: 59rpx;
			background: #5771df;
			border-radius: 5rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			line-height: 59rpx;
		}

		.kg-item {
			height: 100%;
			height: 610rpx;
			border-bottom: 1px solid #f3f4f6;
			padding: 40rpx 17rpx 0;
			line-height: 1;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;

			.item-na {
				padding-bottom: 39rpx;

				text {
					color: #fb3a2f;
				}
			}

			.item-info {
				padding-left: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 1;
				padding-bottom: 24rpx;
				display: flex;
				justify-content: space-between;
			}
		}

		.notice-title {
			padding-bottom: 30rpx;

			image {
				width: 35rpx;
				height: 32rpx;
			}

			.title {
				font-size: 34rpx;
				font-weight: bold;
				font-style: italic;
				color: #333333;
				margin-left: 15rpx;
			}
		}

		.notice-list {
			.notice-tpl {
				image {
					width: 99rpx;
					height: 113rpx;
				}

				.name {
					font-size: 26rpx;
					color: #5d616d;
				}
			}
		}
	}

	.logo-img {
		width: 100%;
		height: 210rpx;
	}

	.quotation-list {
		display: flex;
		flex-wrap: wrap;

		.quotation-tpl {
			position: relative;
			padding: 22rpx 24rpx;
			height: 220rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			width: 31%;
			margin-bottom: 4%;
			margin-right: 2%;

			// &:nth-child(2n + 1) {
			// 	margin-right: 2%;
			// }
			.tpl {
				z-index: 99;
				position: relative;
				font-size: 24rpx;
				padding-bottom: 10rpx;
			}

			.title {
				color: #333333;
				font-weight: bold;
				padding-bottom: 21rpx !important;
			}

			.num {
				color: #fb3a2f;
			}

			.money {
				color: #666666;
			}

			.tip-box {
				image {
					width: 100%;
					height: 118rpx;
					position: absolute;
					bottom: 0;
					left: 0;
				}

				.tip {
					position: relative;
					color: #fb3a2f;
					font-size: 26rpx;
					text-align: center;
					font-weight: 600;
					padding-top: 25rpx;
				}

				.grenn {
					color: #606266;
				}
			}
		}
	}

	.list-box {
		image {
			width: 326rpx;
			height: 210rpx;
		}
	}

	.content {
		.title-box {
			margin: 30rpx 0;
			display: flex;
			align-items: center;

			.img {
				margin-right: 10rpx;
				width: 32rpx;
				height: 32rpx;

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

			.title {
				font-size: 31rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #141E47;
				line-height: 73rpx;
			}
		}

		.content-box {
			width: 670rpx;
			height: 310rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
			border-radius: 20rpx;
			margin: 0 auto;

			.cpTitle {
				display: flex;
				justify-content: space-around;

				.title-left {
					display: flex;
					align-items: center;

					.title-img {
						width: 26rpx;
						height: 26rpx;

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

					.title-title {
						margin-left: 10rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #141E47;
						line-height: 73rpx;
					}
				}

				.title-right {
					font-size: 21rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #141E47;
					line-height: 73rpx;

					text {
						font-size: 30rpx;
						color: #FF6600;
					}
				}
			}

			.cpContent {
				padding: 10rpx 20rpx;
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					flex-direction: column;
					align-items: center;

					.left-img {
						width: 95rpx;
						height: 116rpx;

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

					.left-title {
						font-size: 21rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #999999;
						line-height: 73rpx;
					}
				}

				.between {
					height: 140rpx;
					position: absolute;
					left: 220rpx;
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;


					text {
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #141E47;

					}
				}

				.right {
					margin-top: 120rpx;
					width: 141rpx;
					height: 50rpx;
					background: #FF6600;
					border-radius: 25rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 55rpx;
					text-align: center;
				}
			}
		}

	}
</style>