perry-mall/pagesB/shopDetail/shopDetail.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :navBarTitle="'商品详情'"></status-nav>
		<!-- 容器 -->
		<view class="pad-x140" style="background-color: #fafafa;">
			<container-subgroup>
				<view style="margin: 0 -30rpx;">
					<swiper-pu v-if="cateCurrent==0" :isplay="isAutoPlay" :browseP="true" :bannerList="bannerList" :newHeight="swiperHeight" :newRadius="'0'" :newBottom="'5'"></swiper-pu>
				</view>
				<!-- 标题 -->
				<view class="mar-s30 mar-x20 fon36 bold clips2 line-h50">{{detailObj.name}}</view>
				<!-- 描述 -->
				<view class="colpeili fon30 clips3 line-h50">{{detailObj.subtitle}}</view>
				<view class="disac mar-s20">
					<!-- 是否限时优惠 -->
					<view v-if="detailObj.tag!=''" class="fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
					<!-- 价格 -->
					<view class="disac">
						<view class="fon40 bold col0 mar-y10">￥{{discountPrice}}</view>
						<view class="fon30 colpeili" style="text-decoration: line-through;">￥{{originalPrice}}</view>
					</view>
				</view>
				<!-- 颜色 -->
				<view class="mar-s50"><drop-down></drop-down></view>
				<!-- 尺寸 -->
				<drop-down :dropObj="dropObj" @chooseItem="chooseItem"></drop-down>
				<view style="background-color: #FFFFFF;margin: 0 -30rpx;">
					<!-- 作品介绍 -->
					<view class="mar-s100 mar-x30 fon36 bold col0 tcenter pad-s50">作品介绍</view>
					<!-- 富文本 -->
					<rich-text :nodes="shopRich"></rich-text>
				</view>
			</container-subgroup>
		</view>
		<!-- 底部导航 -->
		<view v-if="shopDetail!=''">
			<bottom-nav :detailObj="shopDetail"></bottom-nav>
		</view>
		<!-- 全局客服 -->
		<public-customer 
		:nbottom="180" 
		:backgroundColor="'#FFFFFF'"
		:radiusNum="'40rpx'"
		:showText="false"
		:iconNum="1"
		:iconColor="'#000000'"></public-customer>
	</view>
</template>

<script>
	import swiperPu from '@/components/swiper-pu.vue';
	import shopList from '@/components/shop-list.vue';
	import dropDown from '@/components/drop-downs/drop-down.vue';
	import bottomNav from '@/components/detail-bottom-nav/bottom-nav.vue';
	// 客服按钮组件
	import publicCustomer from '@/components/public-customer.vue';
	export default {
		components:{
			swiperPu,
			shopList,
			dropDown,
			bottomNav,
			publicCustomer
		},
		data() {
			return {
				swiperHeight:uni.getSystemInfoSync().windowWidth,
				cateCurrent:0,
				dropObj:{
					title:'尺寸',
					childrenList:[
						{
							id:1,
							childrenTitle:'1.2'
						},
						{
							id:1,
							childrenTitle:'6'
						}
					]
				},
				shopRich:'',//商品富文本
				bannerList:[],//轮播
				originalPrice:0,//商品原价
				discountPrice:0,//商品折扣价
				detailObj:{},//详情
				skuDetail:{},//sku详情
				shopDetail:'',
				buyNum:1,//购买数量
				csNum:0,//点击次数,
				isAutoPlay:false,
			}
		},
		onShareAppMessage(res) {
			var shareObj = {
		　　　　	title: ``, // 默认是小程序的名称(可以写slogan等)
		　　　　	path: `/pagesB/shopDetail/shopDetail?id=`, // 默认是当前页面，必须是以‘/’开头的完整路径
		　　　　	imageUrl: ''//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
		　	};
		　　return shareObj;
		},
		onShow() {
			uni.removeStorageSync('chooseAddress');
			this.isAutoPlay = true;
		},
		onHide() {
			this.isAutoPlay = false;
		},
		onUnload() {
			this.isAutoPlay = false;
		},
		onLoad(options) {
			// 查询订单详情
			this.checkDetail(options.id);
		},
		methods: {
			// 查询商品详情
			checkDetail(id){
				this.$requst.post('/api/spu/detail',{id}).then(res=>{
					if(res.code==0){
						// 设置商品详情
						this.detailObj = res.data.detail;
						this.shopDetail = res.data;
						
						// 轮播
						// 图片字符串转数组
						let arrImg = this.detailObj.images.split(',')
						arrImg.forEach(item=>{
							let newImgObj = {
								imgSrc:item,
								url:'',
								isVideo:false,
								poster:'',
							}
							// 存图片
							this.bannerList.push(newImgObj)
						})
						// 存视频
						if(this.detailObj.video!=''){
							this.bannerList[0] = {
								imgSrc:arrImg[0],
								url:this.detailObj.video,
								isVideo:true,
								poster:'',
							}
						}
						// 原价金额转换
						// this.originalPrice = this.$toolAll.tools.changeNum(this.detailObj.original_price);
						this.originalPrice = this.detailObj.original_price;
						// 折扣价金额转换
						// this.discountPrice = this.$toolAll.tools.changeNum(this.detailObj.price);
						this.discountPrice = this.detailObj.price;
						// 设置富文本
						this.shopRich = this.$toolAll.tools.escape2Html(res.data.detail.content);
					} else {
						
					}
				}).catch(err=>{
					this.$toolAll.tools.showToast(err.msg);
				})
			},
			// 尺寸选择事件
			chooseItem(e){
				this.log(e);
			},
			addCart(){//添加购物车事件
				if(this.csNum==0){
					this.csNum++;
					this.$toolAll.tools.showToast('正在加入购物车...');
					this.$requst.post('order/shopping-cart-add',{sku_id:this.skuDetail.id,num:this.buyNum}).then(res=>{
						if(res.code==0) {
							this.$toolAll.tools.showToast('添加购物车成功(*^▽^*)');
							this.cartNumEv();
							this.csNum = 0;
						} 
					})
				}
			},
		}
	}
</script>

<style>
</style>