luban-mall/pagesA/shop/detail.vue

<template>
	<view class="pad-b140">
		<status-nav :ifReturn="true" navBarTitle="商品简介" :marginBottom="0"></status-nav>
		<!-- 商品轮播图 -->
		<view class="shop-img" v-if="isLoading">
			<swiper-pu newRadius="0" :bannerList="shopBanner" newHeight="505rpx" newBottom="35rpx" :isplay='isplay'></swiper-pu>
		</view>
		<!-- 商品概述 -->
		<view class="shop-summary" v-if="isLoading">
			<view class="shop-title">{{shopDetail.name}}</view>
			<view class="shop-txt flex">
				<view class="left">
					<view class="shop-customized">{{shopDetail.tag==''?'':shopDetail.tag}}</view>
					<view class="shop-pric">￥{{shopDetail.original_price}}</view>
					<view class="shop-pric-vip" v-if="vipPrice"><text>会员价：</text>￥{{shopDetail.price}}</view>
				</view>
				<view class="right flex">
					<view class="collection-btn flex" :class="shopDetail.is_collected == 1?'active':''" @tap="collectionEv(shopDetail.id)" v-if="source == 'shop'">
						<image src="/static/public/icon-collection.png" mode=""></image>
						<text>{{shopDetail.is_collected == 1?'已收藏':'收藏'}}</text>
					</view>
					<view class="share-btn flex">
						<image src="/static/public/icon-share.png" mode=""></image>
						<text>分享</text>
						<button plain="true" data-name="shareBtn" open-type="share"></button>
					</view>
				</view>
			</view>
			<view class="specs-btn flex" @tap="openSpecs(1)">
				<image src="/static/public/icon-specs.png" mode="widthFix"></image>
				<text>规格：查看详细规格</text>
				<image src="/static/public/icon-more.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="shop-detail">
			<view class="shop-detail-tab flex">
				<view class="tab-btn" :class="showCurrent == index?'cur':''" @tap="changeDetail(index)" v-for="(item,index) in shopDetailTab" :key="index">{{item}}</view>
			</view>
			<view class="shop-detail-txt">
				<view class="txt-box" v-if="showCurrent == 0">
					<rich-text :nodes="shopDetail.content"></rich-text>
				</view>
				<view class="txt-box" v-if="showCurrent == 1">
					<view>
						<rich-text :nodes="shopDetail.params"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="shop-btns flex" v-if="source == 'shop'">
			<view class="btn" @tap="openSpecs(0)">加入购物车</view>
			<view class="btn" @tap="openSpecs(1)">立即购买</view>
		</view>
		<view class="kit-shop-btns" v-if="source == 'kit'">
			<view class="btn" @tap="backEv">返回套件继续购买</view>
		</view>
		<!-- 规格弹窗 -->
		<view class="pull-all-bg" v-if="isShow" @tap="closeSpecs"></view>
		<view class="specs-detail-bg" v-if="isShow">
			<view class="specs-detail">
				<view class="close-specs" @tap="closeSpecs"><image src="/static/public/icon-close.png" mode="widthFix"></image></view>
				<view class="price">￥{{shopDetail.original_price}}</view>
				<view class="price" v-if="vipPrice"><text>会员价：</text>￥{{shopDetail.price}}</view>
				<view class="specs-ul">
					<text>规格</text>
					<view class="specs-li flex" @tap="changeSpecs(index)" :class="specsIndex == index?'checked':''" v-for="(item,index) in shopSku" :key="index">{{item.custom_title}} {{item.cycle!==''?'供货周期：'+item.cycle:''}}</view>
				</view>
				<view class="specs-detail-btn" @tap="buyNow(specsIndex)" v-if="changeBtns">立即购买</view>
				<view class="specs-detail-btn" @tap="joinCart(specsIndex)" v-else>加入购物车</view>
			</view>
		</view>
		<!-- 购物车btn -->
		<enter-cart :bottom="335"></enter-cart>
		<!-- 客服btn -->
		<customer-service></customer-service>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import swiperPu from '@/components/swipers/swiper-pu';
	import enterCart from '@/components/enter-cart/enter-cart.vue';
	import customerService from '@/components/customer-service/customer-service.vue';
	import {getCartNum,userInfoEv} from '@/jsFile/public-api.js';
	import {mapState} from 'vuex'//引入mapState
	export default {
		components:{
			statusNav,
			swiperPu,
			enterCart,
			customerService
		},
		data() {
			return {
				scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
				newWidth:uni.getSystemInfoSync().windowWidth,
				isplay:false,
				shopDetailTab:['商品信息','商品规格'], //tab列表
				shopDetail:{}, //商品详情
				shopSku:[], //商品规格
				shopBanner:[], //商品轮播
				source:'shop', //详情分类 商品：shop 套件：kit
				showCurrent:0, //详情&规格切换
				isShow:false, //是否展示规格弹窗
				specsIndex:0, //规格选中位置
				id:0, //商品、套件id
				action:'collect', //收藏类型
				changeBtns:false, //按钮选择
				vipPrice:false, //显示会员价
				cacheBusinessId:-1, //商户id
				isLoading:false,
			}
		},
		computed:{
			...mapState({
				footHeight: state => state.moduleA.footHeight,
			}),
		},
		onLoad(op) {
			if(op !== ''){
				this.source = op.source;
				this.id = op.id;
				if(op.business_id){
					this.cacheBusinessId = op.business_id;
				}
			}
		},
		onShow() {
			if(this.cacheBusinessId !== -1){
				this.$requst.post('/api/index/change-business',{business_id:this.cacheBusinessId}).then(res=>{
					if(res.code == 0){
						this.getDetail(this.id);
						userInfoEv();
					}
				})
			}else{
				this.getDetail(this.id);
				userInfoEv();
			}
			if(uni.getStorageSync('business_code')!=='' && uni.getStorageSync('showVip')=='true'){
				this.vipPrice = true;
			}
			// 查询购物车数量
			getCartNum();
		},
		// 分享到微信
		onShareAppMessage(res) {
			let path = uni.getStorageSync('page-path-options')+'&business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		// 分享到朋友圈
		onShareTimeline(res){
			let path = uni.getStorageSync('page-path-options')+'&business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		methods: {
			// 切换展示
			changeDetail(index){
				this.showCurrent = index;
			},
			// 打开规格弹窗
			openSpecs(type){
				if(type == 0){
					this.changeBtns = false;
				}
				if(type == 1){
					this.changeBtns = true;
				}
				if(!this.isShow){
					this.isShow = true;
				}
			},
			// 选择规格
			changeSpecs(index){
				this.specsIndex = index;
			},
			// 关闭规格弹窗
			closeSpecs(){
				this.isShow = false;
			},
			//查询商品详情
			getDetail(id){
				uni.showLoading({
					title: '加载中'
				});
				this.isLoading = false;
				this.$requst.get('/api/spu/detail',{id:id}).then(res=>{
					if(res.code==0) {
						console.log(res,'详情')
						this.shopDetail = res.data.detail; //详情数据
						this.shopSku = res.data.sku
						let newArr = [];
						res.data.detail.images.forEach(item=>{
							let obj = {
								imgSrc:item,
							}
							newArr.push(obj)
						})
						this.shopBanner = newArr; //详情轮播图
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			//收藏
			collectionEv(id){
				let params = {
					id:id,
					action:this.action
				}
				if(this.shopDetail.is_collected == 1){
					this.$requst.post('/api/spu/un-record',params).then(res=>{
						if(res.code==0) {
							// this.$toolAll.tools.showToast('取消收藏成功');
							this.getDetail(this.id);
						}
					})
				}else{
					this.$requst.post('/api/spu/record',params).then(res=>{
						if(res.code==0) {
							// this.$toolAll.tools.showToast('收藏成功');
							this.getDetail(this.id);
						}
					})
				}
				
			},
			// 加入购物车
			joinCart(index){
				if(this.$toolAll.tools.judgeAuth()) {
					this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.shopSku[index].id,num:1}).then(res=>{
						if(res.code==0) {
							this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
							getCartNum();
							// 关闭弹窗
							this.closeSpecs();
						} else {
							this.$toolAll.tools.showToast(res.msg)
						}
					})
				}
			},
			// 立即购买
			buyNow(index){
				if(this.$toolAll.tools.judgeAuth()) {
					this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.shopSku[index].id,num:1}).then(res=>{
						if(res.code==0) {
							getCartNum();
							// 关闭弹窗
							this.closeSpecs();
							uni.navigateTo({
								url:`/pagesA/cart/cart`
							})
						} else {
							this.$toolAll.tools.showToast(res.msg)
						}
					})
				}
			},
			//返回事件
			backEv() {
				uni.navigateBack({
					delta: 1,
				})
			}
		}
	}
</script>

<style>
	
</style>