yunshan/pages/index/shoppingDetails.vue

<template>
	<view class="content">
		<view class="header-box">
			<view class="top">
				<view class="banner-img">
					<image src="../../static/img/img01.png" mode=""></image>
				</view>
				<view class="banner-title">
					<view class="title">
						<view class="img">
							<image src="../../static/index/index08.png" mode=""></image>
						</view>
						<view class="tit">
							<view class="text">
								单台价格
							</view>
							<view class="text">
								￥{{orderList.cost_money*1}}{{orderList.cost_money_type}}
							</view>
						</view>
					</view>
					<view class="title">
						<view class="img">
							<image src="../../static/index/index11.png" mode=""></image>
						</view>
						<view class="tit">
							<view class="text">
								电费
							</view>
							<view class="text">
								{{(orderList.electric_fee*1).toFixed(2)}}USDT/天
							</view>
						</view>
					</view>
					<view class="title">
						<view class="img">
							<image src="../../static/index/index07.png" mode=""></image>
						</view>
						<view class="tit">
							<view class="text">
								运维服务费
							</view>
							<view class="text">
								{{ orderList.service_ratio }}%
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="xuangou-box">
				<view class="xuangou-left">
					<view class="package">
						选购电费包
					</view>
					<view class="package-title">
						屯币必备
					</view>
				</view>
				<view class="xuangou-right">
					>
				</view>
			</view> -->
		</view>
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<!-- <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> -->
					<view class="details">
						<view class="details-box">
							<view class="details-left">
								合约矿机
							</view>
							<view class="details-right">
								{{orderList.name}}
							</view>
						</view>
						<view class="details-box">
							<view class="details-left">
								单份{{orderList.unit}}数
							</view>
							<view class="details-right">
								{{orderList.step*1}}{{orderList.unit}}
							</view>
						</view>
						<!-- <view class="details-box">
							<view class="details-left">
								起赎金额
							</view>
							<view class="details-right">
								10元
							</view>
						</view> -->
						<view class="details-box">
							<view class="details-left">
								电价
							</view>
							<view class="details-right">
								{{orderList.electric_price}}元/度
							</view>
						</view>
						<view class="details-box">
							<view class="details-left">
								每日功耗
							</view>
							<view class="details-right">
								{{(orderList.power*24).toFixed(2)}}W
							</view>
						</view>
						<view class="details-box">
							<view class="details-left">
								维保费
							</view>
							<view class="details-right">
								按实际情况收取
							</view>
						</view>
						<view class="details-box">
							<view class="details-left">
								平台佣金
							</view>
							<view class="details-right">
								回本前
							</view>
						</view>
						<view class="details-box">
							<view class="details-left">
								算力到账日
							</view>
							<view class="details-right">
								{{orderList.unit}}+{{orderList.stand_time}}
							</view>
						</view>
					</view>
					<!-- <uni-load-more :status="tabItem.loadingType"></uni-load-more> -->
				</scroll-view>
			</swiper-item>

			<swiper-item class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData" v-html="detail">
					
				</scroll-view>
			</swiper-item>
			<swiper-item class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData" v-html="problem">
					
				</scroll-view>
			</swiper-item>

		</swiper>
		<view class="lala">
			<!-- <uni-number-box class="step" :value="num" :disabled="false" @eventChange="numberChange"></uni-number-box> -->
			<view class="buy" @click="buy()">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import {
		miningDateils,
		buyMining
	} from '@/api/calculation.js';
	import uniNumberBox from '@/components/uni-number-box.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	export default {
		components: {
			uniLoadMore,
			empty,
			uniNumberBox
		},
		data() {
			return {
				detail: '',
				problem: '',
				id: '',
				tabCurrentIndex: 0,
				orderList: [],
				num: 1,
				navList: [{
						state: 0,
						text: '购买说明',
						loadingType: 'more',


						page: 1, //当前页数
						limit: 10 //每次信息条数
					},

					{
						state: 1,
						text: '产品介绍',
						loadingType: 'more',

						page: 1, //当前页数
						limit: 10 //每次信息条数
					},
					{
						state: 3,
						text: '常见问题',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					},

				]
			};
		},
		created() {
			this.loadData()
		},
		computed: {
			money() {
				return this.num * this.price;

			},

		},
		onShow() {
			this.loadData()
		},
		onLoad(options) {
			console.log(options, '2222');
			this.id = options.id
			this.loadData()
		},
		methods: {
			server() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			buy() {
				// let list = JSON.stringify(this.list)
				uni.navigateTo({
					url: '/pages/calculation/pay?&id=' + this.id
				});
				// console.log(this.list,'--------------***********')
				// console.log('buy click')
			},
			loadData() {
				let obj = this
				miningDateils({}, this.id).then(res => {
					console.log(res, '2222');
					obj.orderList = res.data
					obj.detail = res.data.detail
					if(res.data.detail!= null){
						obj.detail = res.data.detail.replace(/\<p/gi,'<p')
					}
					obj.problem = res.data.problem
					console.log(obj.orderList, '数据');
				})
			},
			numberChange(data) {
				let obj = this;
				obj.num = data.number;
				console.log(obj.num, '2222');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},

		}
	}
</script>

<style lang="scss">
	page,
	.content {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
		background: #F5F5F5;

	}

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

		.buy {
			width: 338rpx;
			height: 65rpx;
			background: #FF6600;
			border-radius: 10rpx;
			font-size: 27rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 65rpx;
			text-align: center;
		}

	}

	.top {
		padding-top: 50rpx;
		background: #FFFFFF;
	}

	.banner-img {

		margin: 0 auto;
		margin-bottom: 50rpx;
		width: 386rpx;
		height: 289rpx;

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

	.banner-title {
		background: #FFFFFF;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;

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

			.img {
				width: 32rpx;
				height: 32rpx;
				// background: #FF6600;
				border-radius: 50%;

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

			.tit {
				margin-left: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

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

				}
			}
		}
	}

	.xuangou-box {
		background: #FFFFFF;
		margin: 15rpx 0;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;

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

			.package {
				font-size: 27rpx;
				font-weight: bold;
				color: #141E47;
				// line-height: 98rpx;
			}

			.package-title {
				font-size: 16rpx;
				font-weight: bold;
				color: #FF6600;
				width: 120rpx;
				margin-left: 10rpx;
				background: #FFF3EB;
				border: 1px solid #FF6600;
				text-align: center;
				padding: 3rpx 9rpx;


			}
		}

		.xuangou-right {
			color: #999999;
		}
	}


	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #9A9EAE;
			position: relative;

			&.current {
				color: #FF6600;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #FF6600;
				}
			}
		}
	}

	.swiper-box {
		height: 500rpx;
	}

	.tab-content {
		height: 500rpx;
	}

	.list-scroll-content {
		height: 500rpx;
	}


	.uni-swiper-item {
		height: auto;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30rpx;
		background: #fff;
		margin-top: 16rpx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding-right: 30rpx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.time {
				flex: 1;
			}

			.state {
				color: $base-color;
			}

			.del-btn {
				padding: 10rpx 0 10rpx 36rpx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30rpx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160rpx;
			padding: 20rpx 0;
			white-space: nowrap;

			.goods-item {
				width: 120rpx;
				height: 120rpx;
				display: inline-block;
				margin-right: 24rpx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20rpx 0;

			.goods-img {
				display: block;
				width: 120rpx;
				height: 120rpx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 24rpx;
				overflow: hidden;

				.row {
					margin-top: 10rpx;
				}

				.row_title {
					padding: 5rpx 10rpx;
					background-color: #dddddd;
					border-radius: 10rpx;
					font-size: 22rpx;
					color: #ffffff;
				}

				.title {
					font-size: $font-base + 2rpx;
					color: $font-color-dark;
					line-height: 1;
					width: 80%;
				}

				.attr-box {
					display: flex;
					justify-content: flex-end;
					font-size: $font-sm + 2rpx;
					color: $font-color-light;
				}

				.price {
					display: inline;
					font-size: $font-base + 2rpx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;

					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20rpx 30rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-light;

			.num {
				margin: 0 8rpx;
				color: $font-color-dark;
			}

			.price {
				font-size: $font-lg;
				color: $font-color-dark;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2rpx 0 8rpx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			position: relative;
			padding-right: 30rpx;
		}

		.action-btn {
			width: 160rpx;
			height: 60rpx;
			margin: 0;
			margin-left: 24rpx;
			padding: 0;
			text-align: center;
			line-height: 60rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				color: $base-color;

				&:after {
					border-color: $base-color;
				}
			}

			&.evaluate {
				color: $color-yellow;

				&:after {
					border-color: $color-yellow;
				}
			}
		}
	}

	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80rpx;
		align-items: center;
		justify-content: center;
	}

	.uni-load-more__text {
		font-size: 28rpx;
		color: #999;
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px;
	}

	.uni-load-more__img>view {
		position: absolute;
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: 0.2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite;
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0;
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0;
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px;
	}

	.load2 {
		transform: rotate(30deg);
	}

	.load3 {
		transform: rotate(60deg);
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s;
	}

	.load2 view:nth-child(1) {
		animation-delay: 0.13s;
	}

	.load3 view:nth-child(1) {
		animation-delay: 0.26s;
	}

	.load1 view:nth-child(2) {
		animation-delay: 0.39s;
	}

	.load2 view:nth-child(2) {
		animation-delay: 0.52s;
	}

	.load3 view:nth-child(2) {
		animation-delay: 0.65s;
	}

	.load1 view:nth-child(3) {
		animation-delay: 0.78s;
	}

	.load2 view:nth-child(3) {
		animation-delay: 0.91s;
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s;
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s;
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s;
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s;
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0.2;
		}
	}

	.details {
		background: #fff;
		padding: 45rpx 30rpx;

		.details-box {
			margin: 15rpx 0;
			display: flex;
			justify-content: space-between;

			.details-left {

				font-size: 21rpx;
				font-weight: bold;
				color: #141E47;
			}

			.details-right {
				font-size: 21rpx;
				font-weight: bold;
				color: #141E47;
			}
		}
	}
</style>