uniapp-hainan/pages/goodsDetail/index.vue

<template>
	<view>
		<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true">
			<block v-if="$isRight(goods_detail)">
				<!-- 商品图片轮播 -->
				<swiper :current="current" :indicator-dots="goods_detail.banners.length > 1 ? true : false" :circular="true" class="swiper-box" indicator-active-color="#1998FE">
					<swiper-item v-for="(item, index) in goods_detail.banners" :key="item.id">
						<image mode="aspectFill" :src="item.cover" style="width: 100%; height: 100%;" @click="lookImg(index)"></image>
					</swiper-item>
				</swiper>
				<!-- 商品主要信息 -->
				<view class="head-info">
					<view class="lf-font-32 lf-color-333 lf-font-bold">{{ goods_detail.name }}</view>
					<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
						<view class="lf-flex price">
							<lf-price :price="goods_detail.specs[0].selling_price"></lf-price>
							<view class="lf-m-l-20">¥{{ goods_detail.specs[0].original_price }}</view>
							<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view>
						</view>
						<view class="lf-font-24 lf-text-right">
							<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view>
							<!-- <view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view> -->
						</view>
					</view>
					<view class="label-box" v-if="goods_detail.tags && goods_detail.tags.length">
						<view class="label-item" v-for="(item, index) in goods_detail.tags" :key="index">{{ item }}</view>
					</view>
				</view>
				<!-- 地址信息 -->
				<!-- <view class="address-box">
					<view class="lf-font-32 lf-font-bold">适用门店</view>
					<view class="lf-m-t-20 lf-row-between">
						<view class="lf-flex">
							<image mode="aspectFill" class="lf-fle shop-img" :src="goods_detail.store.cover" v-if="goods_detail.store.cover"></image>
							<image mode="aspectFill" class="lf-fle shop-img" src="../../static/center/shop-logo.png" v-else></image>
							<view class="lf-font-32 lf-m-l-20 lf-line-1" style="max-width: 512rpx;">{{ goods_detail.store.name }}</view>
						</view>
						<view @click="makePhoneCall(goods_detail.store.tel)">
							<text class="lf-iconfont lf-icon-dianhua lf-font-40" style="color: #3A62FF;"></text>
						</view>
					</view>
					<view class="lf-flex lf-m-t-20" @click="openMap">
						<view style="width: 60rpx; height: 60rpx;" class="lf-row-center">
							<text class="lf-iconfont lf-icon-dizhi lf-font-40" style="color: #555555;"></text>
						</view>
						<view class="lf-m-l-20 lf-font-28" style="color: #555555;">{{ goods_detail.store.address }}</view>
					</view>
				</view> -->
				<!-- 商品详情 -->
				<view class="goods-detail">
					<view class="lf-font-32 lf-font-bold lf-m-b-20">旅游须知</view>
					<rich-text :nodes="formatRichText(goods_detail.content)" v-if="goods_detail.content_type == 'rich_text'"></rich-text>
					<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image>
				</view>
				<!-- 修饰专用 -->
				<view class="extra"></view>
				<!-- 吸底操作按钮 -->
				<view class="lf-row-between fixed-bottom">
					<view class="lf-flex lf-p-t-10 lf-p-b-10">
						<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/index/index', {type: 'switch'})">
							<image class="icon-img" src="../../static/center/home.png"></image>
							<view class="lf-m-t-1">首页</view>
						</view>
						<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')">
							<image class="icon-img" src="../../static/center/service.png"></image>
							<view class="lf-m-t-1">客服</view>
						</view>
						<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
							<image class="icon-img" src="../../static/center/collect-active.png" v-if="is_collect"></image>
							<image class="icon-img" src="../../static/center/collect.png" v-else></image>
							<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
						</view>
						<button class="lf-flex-column lf-row-center icon-item" open-type="share">
							<image class="icon-img" src="../../static/center/share.png"></image>
							<view class="lf-m-t-1">分享</view>
						</button>
					</view>
					<button class="btn" @click="toAddOrder">立即购买</button>
				</view>
				<!-- 回到顶部 -->
				<!-- <u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}" :icon-style="{color: '#ffffff'}"></u-back-top> -->
				<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
			</block>
		</skeleton>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				current: 0, // 轮播下标
				goods_id: 0,
				goods_detail: {},
				is_collect: 0, // 1为当前收藏商品了，0为否
				skeletonLoading: true
			}
		},
		onLoad(options){
			this.goods_id = options.id;
			this.getGoodsDetail();
		},
		methods: {
			getGoodsDetail(){
				let that = this;
				this.goods_detail = {
					all_specs: null,
					banners: [],
					category_id: 2,
					content: "<p><img src='http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/tinymce/images/156005c5baf40ff51a327f1c34f2975b60dd6a468cdbe.jpg' alt='' width='100%' /></p>",
					content_type: "rich_text",
					cover: "http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/images/d1c990182d6cfd6ebf1faf4077f22248.jpg!thumb_300x300_q90",
					created_at: "1625123492",
					deleted_at: null,
					id: 1,
					name: "肯德基精选午餐",
					share_cover: "http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/images/d1c990182d6cfd6ebf1faf4077f22248.jpg",
					specs: [{
						cost: "",
						created_at: "1625470217",
						deleted_at: null,
						goods_id: 1,
						id: 8,
						limit: 10,
						name: "规格3",
						original_price: "111.00",
						original_price_text: "111.00",
						selling_price: "1.00",
						sold_percent: 50,
						sold_percent_text: "已抢50%",
						sold_stock: 110,
						sold_stock_text: "110人购买",
						specs: null,
						state: 1,
						stock: 110,
						stock_text: "库存仅剩110份",
						updated_at: "1625471139"
					}],
					store: {
						address: "广西南宁市青秀区民族大道111号",
						cover: "http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/images/b4644c5226918153c0cb372e99e12bed.jpg!thumb_200x200_q90",
						created_at: "1625122973",
						deleted_at: null,
						id: 1,
						intro: null,
						lat: "108.3745472970581",
						lng: "22.813532837581967",
						name: "肯德基连锁餐饮",
						state: 2,
						tel: "18888888888",
						updated_at: "1625537146",
						user_id: 7
					},
					store_id: 1,
					tags: ["推荐"],
					updated_at: "1625123492",
					user: {is_collect: 1}
				}
				return;
				this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => {
					this.skeletonLoading = false;
					this.goods_detail = res.data;
					this.is_collect = Boolean(res.data.user.is_collect);
				}).catch(err => {
					this.skeletonLoading = false;
					setTimeout(() => {
						that.$toBack();
					}, 1000);
				})
			},
			// 切换商品收藏
			switchCollect(){
				let userInfo = uni.getStorageSync('userinfo') || {};
				if(!userInfo.id || !userInfo.nickname || !userInfo.avatar){
					this.$url('/pages/login/index?type=userinfo');
					return;
				}
				this.$http(this.API.API_COLLECT_DEAL, {goods_id: this.goods_id}).then(res => {
					this.$msg(res.msg);
					this.is_collect = Boolean(res.data.user.is_collect);
				})
			},
			// 拨打电话
			makePhoneCall(phoneStr){
				uni.makePhoneCall({
					phoneNumber: String(phoneStr)
				})
			},
			// 打开地图
			openMap(){
				let { address, lat, lng } = this.goods_detail?.store || {};
				uni.openLocation({
				  longitude: Number(lat),
				  latitude: Number(lng),
				  scale: 20,
				  name: address
			   });
			},
			// 跳转到确认下单页面
			toAddOrder(){
				let goods_id = this.goods_detail.id;
				let goods_specs_id = this.goods_detail.specs[0].id
				this.$url('/pages/order/confirm-order?goods_id='+ goods_id +'&goods_specs_id='+ goods_specs_id);
			},
			// 预览图片
			lookImg(index){
				this.$u.throttle(() => {
					let goods_banner = this.goods_detail.banners || [];
					let banners = goods_banner.map(item => item.cover);
					uni.previewImage({
						urls: banners,
						current: index
					})
				}, 200);
			},
			// 富文本处理
			formatRichText(richText){
			  if(richText != null){
					let newRichText= richText.replace(/<img[^>]*>/gi, function(match, capture){
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newRichText = newRichText.replace(/style="[^"]+"/gi,function(match, capture){
						match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
						return match;
					});
					newRichText = newRichText.replace(/<br[^>]*\/>/gi, '');
					newRichText = newRichText.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"');
					return newRichText;
				}else{
					return null;
				}
			}
		},
		onShareAppMessage(){
			let goods = this.goods_detail;
			let title = goods.name;
			let imageUrl = goods.share_cover || goods.cover;
			let path = '/pages/route/index?route=goods_detail&id='+ goods.id;
			
			return {
				title,
				path,
				imageUrl
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
		overflow-x: hidden;
	}
</style>
<style lang="scss" scoped="scoped">
	.swiper-box{
		width: 750rpx;
		height: 490rpx;
		background-color: #FFFFFF;
	}
	
	.head-info{
		width: 750rpx;
		height: auto;
		box-sizing: border-box;
		padding: 0 32rpx;
		padding-top: 20rpx;
		background-color: #FFFFFF;
		// .price>view:nth-of-type(1){
		// 	color: #FF0000;
		// 	margin-right: 22rpx;
		// 	font-weight: bold;
		// }
		.price>view:nth-of-type(1){
			text-decoration: line-through;
			color: #777777;
			margin-right: 22rpx;
		}
		.price>view:nth-of-type(2){
			width: max-content;
			padding: 0 18rpx;
			height: 46rpx;
			background-color: #1998FE;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
		}
		.label-box{
			min-height: 130rpx;
			width: 100%;
			border-top: 1rpx solid #E5E5E5;
			display: flex;
			flex-wrap: wrap;
			padding: 30rpx 0 10rpx 0;
			.label-item{
				width: 156rpx;
				height: 70rpx;
				border-radius: 10rpx;
				border: 2rpx solid #1998FE;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #1998FE;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}
	
	.address-box{
		width: 750rpx;
		height: auto;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding: 32rpx;
		margin-top: 20rpx;
		.shop-img{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
	}
	
	.goods-detail{
		width: 750rpx;
		height: auto;
		background-color: #FFFFFF;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		.goods-img{
			width: 100%;
		}
	}
	
	.extra{
		width: 100%;
		height: 120rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}
	
	.fixed-bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		width: 100%;
		height: auto;
		padding: 0 32rpx;
		border-top: 1rpx solid #e5e5e5;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.icon-item{
			margin-right: 16rpx;
			background-color: transparent;
			margin: 0;
			line-height: initial;
			font-size: 28rpx;
			font-weight: inherit;
			margin-right: 10rpx;
			padding: 0;
			width: 88rpx;
			&:first-child{
				padding-left: 0;
			}
			.icon-img{
				height: 50rpx;
				width: 50rpx;
			}
		}
		.btn{
			margin: 0;
			padding: 0;
			width: 208rpx;
			height: 80rpx;
			background-color: #1998FE;
			color: #FFFFFF;
			line-height: 80rpx;
			font-size: 32rpx;
			border-radius: 42rpx;
		}
	}
</style>