discounts-minapp/study/studyGoodsDetail.vue

<template>
	<view class="goodsDetail">
		<zs-skeleton type="goodsDetail" :loading="pageLoading"></zs-skeleton>
		<image class="good-img" :src="info.goodsPath" mode="aspectFit"></image>

		<view class="content">
			<view class="price-box">
				<view class="price">
					<view class="unit">￥</view>
					<view class="price">
						{{ info.realPrice }}
					</view>
				</view>
				<view class="old-price">
					市场价{{ info.marketPrice }}
				</view>
			</view>
			<view class="title">
				{{ info.goodsName }}
			</view>
			<view class="desc">
				{{ info.goodsDescribe }}
			</view>
			<view class="ag">
				<u-avatar-group :urls="urls" size="44" gap="0.1" maxCount="10"></u-avatar-group>
				<view class="">{{ info.saleNum || 0 }} 人已购</view>
			</view>
			<view class="subtitle">
				出发日期
			</view>

			<view class="reservation" @click="openCalendar">
				<view class="text">
					<text style="color:#AAAAAA;margin-right:28rpx;"> 已预定 </text> {{ reserveTime ? '预定' + reserveTime + '出发' :
						info.reservationDate || '' }}
				</view>
				<view>
					<image class="more" src="../static/jiantou-icon.png" mode=""></image>
				</view>
			</view>
			<view class="share" v-if="total > 0">
				<view class="top">
					<view class="title">研学分享</view>
					<view class="more" @click="toShare">{{ total }}分享<image class="img" src="../static/jiantou-icon.png" mode="">
						</image>
					</view>
				</view>
				<view class="user">
					<view class="userinfo">
						<view class="avatar">
							<u-avatar size="60" :src="info.share.imgPath"></u-avatar>
						</view>
						<view class="username">{{ info.share.nickname }}</view>
					</view>
					<view class="date">{{ info.share.showTime }}</view>
				</view>
				<view class="share-content">
					<view class="content-text">{{ info.share.communityDetail }}</view>
					<view style="position: relative;" @click="clickImg">
						<image class="content-image" :src="info.share.coverImg">
						</image>
						<view class="overlay">+{{ info.share.urls.length }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tab-group">
			<view class="tab" :class="[tab == 1 ? 'active' : '']" @click="handleTab(1)">
				商品详情
			</view>
			<view class="tab" :class="[tab == 2 ? 'active' : '']" @click="handleTab(2)">
				购买须知
			</view>
		</view>
		<view class="desc-box" v-show="tab == 1">
			<rich-text class="goods-desc" :nodes="info.goodsDetail"></rich-text>
		</view>
		<view class="list" v-show="tab == 2">
			<view class="item" v-for="(item, index) in info.attrs" :key="index">
				<view class="label">
					{{ item.attrName == 'validDay' ? '有效期' : item.attrName }}
				</view>
				<view class="value" v-html="filterMsg(item.attrValue, item.attrName)">

				</view>
			</view>
			<!-- <view class="item">
				<view class="label">
					使用时间
				</view>
				<view class="value">
					营业时间内可用
				</view>
			</view> -->
		</view>

		<view class="buy-box">
			<!-- <image class="head" :src="shopInfo.logoPath" @click="goShopDetail(shopInfo)" mode=""></image> -->
			<view class="btn-box">
				<view class="buy-btn" :class="[info.realStockNum ? '' : 'none']" @click="handleBuy">
					<view class="label">
						预约咨询
					</view>
				</view>
				<view class="buy-btn" :class="[info.realStockNum ? '' : 'none']" @click="handleBuy">
					<view class="label">
						{{ info.realStockNum ? '报名支付' : '售罄' }}
					</view>
				</view>
			</view>
		</view>

		<uni-calendar @monthSwitch="chnageMonth" :selected="selected" ref="calendar" :showMonth="false"
			style="z-index: 999;" :insert="false" @confirm="confirm">
		</uni-calendar>
	</view>


</template>

<script>
import { detail, getStudyAbout, goodsBuyStatistic } from '@/api/goods.js'

export default {
	data() {
		return {
			pageLoading: false,
			active: 0,
			tab: 1,
			shopList: [],
			info: {
				share: {
					urls: []
				}
			},
			total: 0,
			shopInfo: {},
			urls: [
				"https://fakeimg.pl/22x22/?text=🫡&font_size=22",
				"https://fakeimg.pl/22x22/?text=🤣&font_size=22",
				"https://fakeimg.pl/22x22/?text=😍&font_size=22",
				"https://fakeimg.pl/22x22/?text=😒&font_size=22",
				"https://fakeimg.pl/22x22/?text=😉&font_size=22",
				"https://fakeimg.pl/22x22/?text=😎&font_size=22",
				"https://fakeimg.pl/22x22/?text=😁&font_size=22",
				"https://fakeimg.pl/22x22/?text=😘&font_size=22",
			],
			goodsId: "",
			selected: [],
			reserveTime: "",
		}
	},
	methods: {
		choose(index) {
			this.active = index
		},
		filterMsg(val, name) {
			let msg = val.replace(/\n/g, "<br>")
			if (name == 'validDay') {
				msg = val + '天'
			}
			return msg
		},
		jump(url) {
			uni.navigateTo({
				url
			})
		},
		handleTab(val) {
			this.tab = val
		},
		handleBuy() {
			if (!this.reserveTime) {
				uni.showToast({
					title: '请选择出发日期',
					icon: 'none'
				});
				this.openCalendar()
				return
			}
			this.info.reserveTime = this.reserveTime
			if (!this.info.realStockNum) return
			let that = this
			if (uni.getStorageSync('token')) {
				uni.navigateTo({
					url: `/study/pay/order`,
					success: function (res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('pay', that.info)
					}
				})
			} else {
				uni.showModal({
					title: '请登录',
					confirmText: '去登录',
					success(res) {
						console.log(res);
						if (res.confirm) {
							uni.navigateTo({
								url: `/login/login/login?redirect=/detail/goodsDetail/index&id=${that.info.goodsId}`
							})
						}
					}
				})
			}

		},
		detail(goodsId) {
			this.pageLoading = true
			this.goodsId = goodsId
			detail({ goodsId, resource: 2 }).then(res => {
				this.pageLoading = false
				if (res.state == 'Success') {
					this.info = res.content
					this.info.goodsDetail = res.content.goodsDetail.replace(/<img/gi, '<img class="img_class" ')
					uni.setNavigationBarTitle({
						title: this.info.goodsName
					})
					this.chnageMonth({
						year: new Date().getFullYear(),
						month: new Date().getMonth() + 1
					})
					getStudyAbout({ goodsId }).then(({ content }) => {
						try {
							this.urls = content.buyStatisVo?.list?.map(e => e.imgPath);
						} catch (error) {
						}
						this.info.reservationDate = content.msg
						const { communityVo } = content
						const { list, total } = communityVo
						this.total = total
						const [item] = list
						this.info.share = {
							communityDetail: item.communityDetail,
							coverImg: item.coverImg,
							nickname: item.nickname,
							imgPath: item.imgPath,
							showTime: item.showTime,
							urls: item.urls
						}
						this.$forceUpdate()
					})
				}
			})


		},
		goShopDetail(shopInfo) {
			uni.setStorageSync('shopInfo', JSON.stringify(shopInfo))
			uni.navigateTo({
				url: `/detail/shopDetail/shopDetail`
			})
		},
		openCalendar() {
			this.$refs.calendar.open();
		},
		confirm({ fulldate }) {
			this.reserveTime = fulldate + " 00:00:00"
		},
		// 更改月份后获取新月份的可售卖日期
		chnageMonth({ year, month }) {
			goodsBuyStatistic({
				goodsId: this.info.goodsId,
				year,
				month
			}).then(res => {
				// console.log(res)
				this.selected = res.content.map(e => {
					if (e.isOpenSeal) {
						return {
							date: `${e.year}-${e.month}-${e.day}`,
							info: '可选',
							notic: false,
							color: '#2979ff'
						}
					} else {
						return {
							date: `${e.year}-${e.month}-${e.day}`,
							disable: true,
							notic: false,
							color: '#2979ff'
						}
					}
				})
			})
		},
		clickImg() {

			uni.previewImage({
				urls: this.info.share.urls,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function (data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function (err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		toShare() {
			uni.navigateTo({
				url: '/share/index?goodsId=' + this.goodsId
			});
		}
	},
	onLoad(option) {
		try {
			this.shopInfo = JSON.parse(uni.getStorageSync('shopInfo'))
		} catch (error) {
			console.log("未读取到对应缓存")
		}
		this.detail(option.id)
	}

}
</script>

<style lang="scss">
.goodsDetail {
	background: #F9F9F9;
	padding-bottom: 200rpx;
	min-height: 100vh;

	.good-img {
		width: 100%;
		height: 750rpx;
		vertical-align: bottom;
	}

	.content {
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		margin-top: -16rpx;
		overflow: overlay;

		.price-box {
			display: flex;
			align-items: center;

			.price {
				display: flex;
				align-items: baseline;
				font-weight: bold;

				.unit {
					font-size: 20rpx;
					color: #FF4D3A;
				}

				.price {
					font-size: 56rpx;
					color: #FF4D3A;
				}
			}

			.old-price {
				font-size: 24rpx;
				color: #AAAAAA;
				text-decoration: line-through;
				margin-left: 22rpx;
			}
		}

		.title {
			margin-top: 16rpx;
			font-size: 36rpx;
			color: #222222;
			font-weight: bold;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			/* 显示的最大行数 */
			overflow: hidden;
		}

		.desc {
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #AAAAAA;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			/* 显示的最大行数 */
			overflow: hidden;
		}

		.ag {
			margin: 28rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #AAAAAA;
		}

		.subtitle {
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.reservation {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			padding: 28rpx;
			background-color: #F9F9F9;
			margin-bottom: 28rpx;
			border-radius: 8rpx;

			.text {
				color: #222222;
			}

			.more {
				width: 16rpx;
				height: 16rpx;
			}
		}

		.share {
			padding: 24rpx;
			background-color: #F9F9F9;

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

				.title {
					color: #222222;
					font-weight: bold;
					font-size: 32rpx;
					margin-top: 0;
				}

				.more {
					color: #AAAAAA;
					font-size: 24rpx;

					.img {
						width: 16rpx;
						height: 16rpx;
						margin-left: 20rpx;
					}
				}

				margin-bottom: 20rpx;
			}


			.user {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16rpx;

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

					.avatar {
						width: 60rpx;
						height: 60rpx;
					}

					.username {
						margin-left: 16rpx;
						font-size: 28rpx;
						color: #222222;
					}
				}

				.date {
					font-size: 20rpx;
					color: #AAAAAA;
				}
			}


		}

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

			.content-text {
				padding: 8rpx;
				width: 70%;
				font-size: 24rpx;
				color: #222222;
				word-break: break-all;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				/* 显示的最大行数 */
				overflow: hidden;
			}

			.content-image {
				position: relative;
				width: 160rpx;
				height: 160rpx;
				margin-left: 28rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}

			.overlay {
				position: absolute;
				bottom: 10rpx;
				right: 0rpx;
				background: rgba(0, 0, 0, 0.6);
				color: white;
				border-radius: 16rpx 0 16rpx 0;
				text-align: center;
				line-height: 52rpx;
				font-size: 24rpx;
				font-weight: bold;
				width: 52rpx;
				height: 52rpx;
			}
		}



	}

	.tab-group {
		display: flex;
		background: #fff;

		.tab {
			flex: 1;
			padding: 24rpx 0;
			text-align: center;
			font-size: 28rpx;
			color: #222222;
		}

		.tab.active {
			font-weight: 600;
		}
	}

	.desc-box {
		.goods-desc {
			color: #222222;
			font-size: 24rpx;

			.img_class {
				max-width: 100% !important;
				vertical-align: bottom;
			}
		}
	}

	.list {
		background: #fff;

		.item {
			padding: 24rpx;
			border-top: 1rpx solid #F0F0F0;

			.label {
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}

			.value {
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 16rpx;
				line-height: 40rpx;
			}
		}
	}

	.buy-box {
		position: fixed;
		bottom: 0%;
		left: 0%;
		width: 100%;
		background: #fff;
		padding: 10rpx 24rpx 76rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;

		.head {
			width: 80rpx;
			height: 80rpx;
			background: #aaa;
			border-radius: 50%;
		}

		.btn-box {
			width: 100%;
			display: flex;
			text-align: center;
			justify-content: space-between;

			.group-btn {
				width: 280rpx;
				height: 80rpx;
				background: #6499FF;
				border-radius: 40rpx 0rpx 0rpx 40rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.label {
					font-weight: 600;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.price {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.buy-btn.none {
				filter: grayscale(1);
			}


			.buy-btn {
				width: 344rpx;
				// width: 560rpx;
				height: 80rpx;
				background: #3B83FF;
				border-radius: 40rpx;
				// border-radius: 0rpx 40rpx 40rpx 0rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				&:nth-child(1) {
					background: transparent;
					border: 1rpx solid #3B83FF;

					.label {
						color: #3B83FF;
					}
				}

				.label {
					font-weight: 600;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.price {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

}
</style>