xc/pages/hall/porducthall.vue

<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots :circular="true" duration="400">
				<swiper-item class="swiper-item" v-for="(item, index) in imageList" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="title flex">
				<view class="title-num">
					<text>￥</text>
					{{ info.hanging_price }}
				</view>
				<view class="title-time">挂售时间：{{ info.time }}</view>
			</view>
		</view>
		<view class="title-main flex">
			<view class="tm-left">
				<view class="tm-title clamp">{{ info.name }}</view>
				<view class="tm-people flex">
					<image class="people-image" src="../../static/img/people.png" mode=""></image>
					<view class="people-name">归属人：{{ info.user_nickname }}</view>
				</view>
			</view>
			<view class="tm-right flex">
				<!-- <view class="tmr-item" @click="isDjs()">
					<image class="tmr-image" src="../../static/img/shua.png" mode=""></image>
					<view class="tmr-font">刷新倒计时</view>
				</view> -->
				<view class="tmr-item" @click="nav('/pages/hall/history?id=' + id)">
					<image class="tmr-image1" src="../../static/img/yuan.png" mode=""></image>
					<view class="tmr-font">溯源</view>
				</view>
			</view>
		</view>
		<view class="dz"></view>
		<!-- <view class="introduce">
			<view class="introduct-title">
				<image class="introduce-image" src="../../static/img/productIcon.png" mode=""></image>
				<view class="introduce-font">艺术品挂售交易平台</view>
			</view>
			<view class="introduct-main">
				<view class="im-item">
					<image class="im-image" src="../../static/img/jian.png" mode=""></image>
					<view class="im-font">大师作品</view>
				</view>
				<view class="im-item">
					<image class="im-image" src="../../static/img/zheng.png" mode=""></image>
					<view class="im-font">证书收藏</view>
				</view>
				<view class="im-item">
					<image class="im-image" src="../../static/img/gong.png" mode=""></image>
					<view class="im-font">自由交易</view>
				</view>
			</view>
		</view> -->
		<view class="dz"></view>
		<view class="explain">
			<view class="explain-title">商品挂售说明</view>
			<view class="explain-main">
				<view class="explainImage-box">
					<image class="explain-image-item" src="../../static/img/lc1.png" mode=""></image>
					<image class="explain-image-jiant" src="../../static/img/jingt.png" mode=""></image>
					<image class="explain-image-item" src="../../static/img/lc2.png" mode=""></image>
					<image class="explain-image-jiant" src="../../static/img/jingt.png" mode=""></image>
					<image class="explain-image-item" src="../../static/img/lc3.png" mode=""></image>
					<image class="explain-image-jiant" src="../../static/img/jingt.png" mode=""></image>
					<image class="explain-image-item" src="../../static/img/lc4.png" mode=""></image>
				</view>
				<view class="explainfont-box">
					<view class="explain-font-item">挂售商品</view>
					<view class="explain-font-item">支付货款</view>
					<view class="explain-font-item">卖家发货</view>
					<view class="explain-font-item">挂售/提货</view>
				</view>
			</view>
		</view>
		<view class="detail-desc">
			<view class="d-header"><text>商品详情</text></view>
			<rich-text class="detail-centent" :nodes="info.description"></rich-text>
			<view class="contentBottomHeight"></view>
		</view>
		<view class="bottom flex">
			<view class="bottom-item">
				<image class="bi-image" src="../../static/img/quan.png" mode=""></image>
				<view class="bottom-font">易趣卷</view>
				<!-- <view class="bottom-num">200</view> -->
			</view>
			<view class="shu"></view>
			<view class="bottom-item" @click="openKf()">
				<image class="bi-image" src="../../static/img/kf.png" mode=""></image>
				<view class="bottom-font">联系</view>
				<view class="bottom-num">客服</view>
			</view>
			<view class="btn" @click="buy()">{{ isbuy ? '立即购买' : countdown_time }}</view>
		</view>
	</view>
</template>

<script>
	import {
		details,
		purchase,
		count_down,
		verify_code,
		captcha
	} from '@/api/hall.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getTime
	} from '@/utils/rocessor.js';
	export default {
		data() {
			return {
				isbiao: 0,
				text: '123456',
				id: '',
				uid: '',
				name: '',
				peoplename: '',
				info: '',
				imageList: [],
				countdown_time: '',
				unicode: '',
				key: '',
				code: '',
				isdian: 0,
				canbuy: 0, //结束时间
				time: '', //进场时间
				timers: '' //延时器id
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.uid = option.uid;
			this.name = option.name;
			this.peoplename = option.peoplename;
		},
		computed: {
			...mapState(['isbuy', 'baseURL'])
		},
		onShow() {
			this.loadData();
			console.log(this.isbuy);
			if (!this.isbuy) {
				this.isDjs();
			}
		},
		onHide() {
			clearTimeout(this.timers);
		},
		// 监听页面卸载
		onUnload() {
			// 关闭倒计时
			clearTimeout(this.timers);
		},
		// 监听页面后退
		onBackPress() {
			// 关闭倒计时
			clearTimeout(this.timers);
		},
		methods: {
			...mapMutations(['setBuy']),
			isDjs() {
				clearTimeout(this.timers);
				count_down({
					id: this.uid
				}).then(({
					data
				}) => {
					this.canbuy = data.times;
					let day = getTime(this.canbuy * 1000).split(' ');
					this.time = day[1];
					this.counTime();
				});
			},
			counTime() {
				//获取当前时间
				let data = new Date();
				let newTime = data.getTime();
				//结束时间
				let end = this.canbuy;
				//时间差
				let leftTime = end * 1000 - newTime;
				console.log(leftTime);
				console.log(this.la, '2222222');
				if (leftTime <= 0) {
					console.log('已结束');
					this.setBuy(true);
					return;
				}
				//定义保存倒计时时间
				let m, s;
				if (leftTime >= 0) {
					m = Math.floor((leftTime / 1000 / 60) % 60);
					s = Math.floor((leftTime / 1000) % 60);
					this.second = s;
					this.la = m + s;
					//倒计时赋值view
					this.countdown_time = `${m}:${s}`;
					this.timers = setTimeout(this.counTime, 1000);
					//显示动态时间效果
					if (s < 10) {
						return (this.countdown_time = `${m}:0${s}`);
						this.timers = setTimeout(this.counTime, 1000);
					}
					if (m < 10) {
						return (this.countdown_time = `0${m}:${s}`);
						this.timers = setTimeout(this.counTime, 1000);
					}
				}
			},
			loadData() {
				details({
						product_id: this.id
					})
					.then(({
						data
					}) => {
						console.log(data);
						this.imageList = data.slider_image;
						this.unicode = data.unicode
						if (data.description != '') {
							data.description = data.description.replace(/\<img/gi, '<img class="rich-img"');
						}
						this.info = data;
					})
					.catch(e => {});
			},
			// 打开客服
			openKf() {
				this.$refs.popupkf.open();
			},
			// 关闭客服
			cancel() {
				this.$refs.popupkf.close();
			},
			nav(url) {
				uni.navigateTo({
					url
				});
			},
			buy() {
				if (!this.isbuy) {
					return this.$api.msg('还未到购买时间');
				}
				uni.showLoading({
					title: '抢购中'
				})
				console.log(this.isdian, '123456');
				if (this.isdian != 0) {
					uni.hideLoading()
					return
				}
				this.isdian = 1
				purchase({
						product_id: this.id,
						unicode: this.unicode,
					})
					.then(({
						data
					}) => {
						this.isdian = 0
						uni.hideLoading()
						uni.navigateTo({
							url: '/pages/money/paySuccess?type=1&uid=' + this.uid + +'&name=' + this.name +
								'&peoplename=' + this.peoplename
						});
						console.log(data);
					})
					.catch(e => {
						this.isdian = 0;
						uni.hideLoading();
						console.log(e);
					});
			}
		}
	};
</script>

<style lang="less">
	.carousel {
		width: 750rpx;
		height: 710rpx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			// height: 750rpx;
			height: 710rpx;
			overflow: hidden;

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

		.title {
			background: linear-gradient(90deg, #ef4e51 0%, #f4713b 100%);
			width: 750rpx;
			position: absolute;
			bottom: 0;
			padding: 30rpx;

			.title-num {
				font-size: 50rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;

				text {
					font-size: 30rpx;
				}
			}

			.title-time {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
			}
		}
	}

	.title-main {
		padding: 30rpx 30rpx 30rpx 22rpx;

		.tm-left {
			width: 50%;

			.tm-title {
				width: 100%;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1d2023;
			}

			.tm-people {
				margin-top: 30rpx;
				justify-content: flex-start;

				.people-image {
					width: 22rpx;
					height: 22rpx;
					flex-shrink: 0;
				}

				.people-name {
					margin-left: 12rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}

		.tm-right {
			justify-content: flex-end;

			.tmr-item {
				margin-left: 38rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.tmr-image {
					width: 42rpx;
					height: 38rpx;
				}

				.tmr-image1 {
					width: 42rpx;
					height: 42rpx;
				}

				.tmr-font {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}

	.dz {
		width: 750rpx;
		height: 20rpx;
		background: #f8f6f6;
	}

	.introduce {
		padding: 40rpx 24rpx;

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

			.introduce-image {
				width: 36rpx;
				height: 36rpx;
			}

			.introduce-font {
				margin-left: 10rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.introduct-main {
			display: flex;
			justify-content: space-between;
			margin-top: 26rpx;

			.im-item {
				display: flex;
				align-items: center;

				.im-image {
					width: 44rpx;
					height: 44rpx;
				}

				.im-font {
					margin-left: 6rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}

	.explain {
		padding: 40rpx 34rpx 46rpx 34rpx;

		.explain-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.explain-main {
			margin-top: 52rpx;

			.explainImage-box {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.explain-image-item {
					width: 42rpx;
					height: 40rpx;
				}

				.explain-image-jiant {
					width: 38rpx;
					height: 10rpx;
				}
			}

			.explainfont-box {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;

				.explain-font-item {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}

	.detail-desc {
		background: #fff;
		margin-top: 16rpx;

		/deep/ img {
			max-width: 100% !important;
			display: inline !important;
		}

		/deep/ div {
			max-width: 100% !important;
		}

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			font-size: 30rpx;
			color: #303133;
			position: relative;

			text {
				padding: 0 20rpx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300rpx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}

	.bottom {
		position: fixed;
		z-index: 10;
		bottom: 0;
		background: #ffffff;
		width: 750rpx;
		height: 146rpx;
		justify-content: flex-start;

		.bottom-item {
			margin-left: 42rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.bi-image {
				width: 38rpx;
				height: 34rpx;
			}

			.bottom-font {
				margin-top: 14rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.bottom-num {
				line-height: 1;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.shu {
			margin-left: 38rpx;
			width: 2px;
			height: 74rpx;
			background: #c0bfc0;
		}

		.btn {
			margin-left: 40rpx;
			width: 430rpx;
			height: 80rpx;
			background: #fd3b39;
			border-radius: 20rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			line-height: 80rpx;
		}
	}

	.popup-box {
		width: 522rpx;
		height: 605rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		position: relative;

		.img {
			position: relative;
			top: -56rpx;
			left: 0;
			width: 522rpx;
			height: 132rpx;
			display: flex;
			justify-content: center;

			image {
				border-radius: 20rpx 20rpx 0 0;
				width: 450rpx;
				height: 132rpx;
			}
		}

		.mian {
			margin-top: -44rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding: 32rpx 32rpx;
			background-color: #ffffff;
			border-radius: 0 0 20rpx 20rpx;
			text-align: center;

			.delivery {
				font-size: 40rpx;
				color: #333333;
				display: flex;
				align-items: center;
				flex-direction: column;

				.title {}

				image {
					margin-top: 48rpx;
					width: 172rpx;
					height: 160rpx;
				}
			}

			.nocancel {
				font-size: 32rpx;
				color: #333333;
				margin-top: 14rpx;
			}

			.comfirm-box {
				margin-top: 52rpx;
				display: flex;
				// margin-bottom: 32rpx;

				// justify-content: space-around;
				.cancel {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					border: 1px solid #dcc786;
					border-radius: 38rpx;

					font-size: 32rpx;
					color: #605128;
				}

				.comfirm {
					margin-left: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
					border-radius: 38px;
					font-size: 32rpx;
					color: #605128;
				}
			}
		}
	}

	// 文章页底部高度撑开
	.contentBottomHeight {
		height: 150rpx;
	}
</style>