perry-mall/pagesB/shopDetail/shopDetail.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :navBarTitle="'商品详情'"></status-nav>
		<!-- 容器 -->
		<view class="pad-x140" style="background-color: #fafafa;">
			<container-subgroup>
				<view slot="content">
					<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 mar-x50">
						<!-- 是否限时优惠 -->
						<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 v-for="(item,index) in specList" :key="index">
						<drop-down :dropObj="item" @chooseItem="chooseItem"></drop-down>
					</view>
					<!-- 颜色 -->
					<!-- 尺寸 -->
					<!-- <drop-down :dropObj="dropObj" @chooseItem="chooseItem"></drop-down> -->
					<view class="pad-zy30" 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>
				</view>
			</container-subgroup>
		</view>
		
		<!-- 底部导航 -->
		<!-- 底部按钮 -->
		<view class="bottom-nav-box display-between-center">
			<button type="default" @tap="immediatelyBuy">立即购买</button>
			<button type="default" @tap="addCart">加入购物车</button>
		</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,
				specList:[],//规格列表
				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,
				specIdList:[],//多规格id
				specCehckList:[],//存查询的规格数据
				transmitData:[],//要传递的数据
				shopId:'',//商品id
				multi_spec:1//是否是单规格商品0-单规格，1-多规格
			}
		},
		onShareAppMessage(res) {
			var shareObj = {
		　　　　	title: `${this.detailObj.name}`, // 默认是小程序的名称(可以写slogan等)
		　　　　	path: `/pagesB/shopDetail/shopDetail?id=${this.shopId}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
		　　　　	imageUrl: ''//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
		　	};
		　　return shareObj;
		},
		onShow() {
			uni.removeStorageSync('chooseAddress');
			this.isAutoPlay = true;
			this.csNum = 0;
		},
		onHide() {
			this.isAutoPlay = false;
		},
		onUnload() {
			this.isAutoPlay = false;
		},
		onLoad(options) {
			this.shopId = options.id;
			if(uni.getStorageSync('phone_active')){
				this.$toolAll.tools.clearShare();
				// 查询订单详情
				this.checkDetail(options.id);
			} else {
				uni.setStorageSync('existCode',options.invite_code);
				uni.setStorageSync('outside',2);
				uni.setStorageSync('transientUrl',`/pagesB/shopDetail/shopDetail?id=${options.id}`);
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		},
		methods: {
			//规格查询接口
			specsEv(id){
				this.$requst.post('/api/spu/spec',{id}).then(res=>{
					if(res.code==0){
						this.specList = res.data.spec;
						this.specCehckList = res.data.sku_list;
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
				}).catch(err=>{
					this.$toolAll.tools.showToast(err.msg);
				})
			},
			// 查询商品详情
			checkDetail(id){
				this.$requst.post('/api/spu/detail',{id}).then(res=>{
					if(res.code==0){
						// 设置商品详情
						this.detailObj = res.data.detail;
						this.shopDetail = res.data;
						// 设置单多规格判断
						this.multi_spec = this.detailObj.multi_spec;
						// 调用查询规格事件
						this.specsEv(id);
						// 轮播 start
						// 图片字符串转数组
						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:'',
							}
						}
						// 轮播 end
						// 原价金额转换
						// 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){
				let specIndex =  this.specList.findIndex(item=>item.title==e.mainTitle);
				this.specIdList[specIndex*1] = e.id;
				let specStr = this.specIdList.join('-');
				this.transmitData = this.specCehckList.filter(item=>item.indexes==specStr);
				if(this.transmitData.length){
					// 改变折扣价
					this.discountPrice = this.transmitData[0].price;
					// 改变原价
					this.originalPrice = this.transmitData[0].original_price;
				}
			},
			// 立即购买
			immediatelyBuy(){
				// 调用加入购物车事件
				this.addCart(1);
			},
			addCart(index=0){//添加购物车事件
				// console.log(this.multi_spec,this.transmitData.length,214);
				if(this.transmitData.length || this.multi_spec==0){
					if(this.csNum==0){
						this.csNum++;
						let newId = '';
						this.multi_spec==1 ? newId = this.transmitData[0].id : newId = this.shopDetail.sku[0].id;
						if(index==0){
							this.$toolAll.tools.showToast('正在加入购物车...');
						}
						this.$requst.post('/api/order/shopping-cart-add',{sku_id:newId,num:1}).then(res=>{
							if(res.code==0) {
								if(index==1){
									setTimeout(()=>{
										uni.navigateTo({
											url:'/pages/tabbar/cart/cart'
										})
									},0)
								} else {
									this.$toolAll.tools.showToast('添加购物车成功(*^▽^*)');
									this.csNum = 0;
								}
							} 
						})
					}
				} else {
					this.$toolAll.tools.showToast('请选择商品参数')
				}
			},
		}
	}
</script>

<style>
	.display-between-center{display: flex;justify-content: space-between;align-items: center;}
	.bottom-nav-box{position: fixed;bottom: 0;left: 0;right: 0;padding: 20rpx 40rpx;background-color: #FFFFFF;}
	button{
		width: 310rpx;
		height: 100rpx;
		line-height: 100rpx!important;
		border-radius: 30rpx;
		font-size: 36rpx;
		border: 1rpx solid #FFFFFF;
		color: #FFFFFF!important;
	}
	button:first-child{border: 1rpx solid #f81c1c;background-color: #f81c1c;}
	button:last-child{border: 1rpx solid #000000;background-color: #000000;}
</style>