luban-mall/pages/tabbar/kit/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="kitBanner" newHeight="505rpx" newBottom="35rpx" :isplay='isplay'></swiper-pu>
		</view>
		<!-- 商品概述 -->
		<view class="shop-summary kit-summary" v-if="isLoading">
			<view class="shop-title">{{kitDetail.name}}</view>
			<view class="shop-txt flex">
				<view class="left">
					<view class="kit-compose">{{kitDetail.subtitle}}</view>
					<view class="shop-customized">{{kitDetail.tag}}</view>
					<view class="shop-pric">￥{{kitDetail.original_price}}</view>
					<view class="shop-pric-vip" v-if="vipPrice"><text>会员价：</text>￥{{kitDetail.price}}</view>
				</view>
				<view class="right flex">
					<view class="collection-btn flex" :class="kitDetail.is_collected == 1?'active':''" @tap="collectionEv(kitDetail.id)">
						<image src="/static/public/icon-collection.png" mode="widthFix"></image>
						<text>{{kitDetail.is_collected == 1?'已收藏':'收藏'}}</text>
					</view>
					<view class="share-btn flex">
						<image src="/static/public/icon-share.png" mode="widthFix"></image>
						<text>分享</text>
						<button plain="true" data-name="shareBtn" open-type="share"></button>
					</view>
				</view>
			</view>
		</view>
		<!-- 套件包含 -->
		<view class="kit-contain" v-if="isLoading">
			<view class="contain-h2">套件包含</view>
			<view class="contain-list flex">
				<view class="contain-item" @tap="toDetail(item.id)" v-for="(item,index) in kitDetail.series" :key="index">
					<view class="contain-img">
						<image :src="item.cover" mode="widthFix"></image>
					</view>
					<view class="contain-title clips2">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="shop-btns flex" v-if="isLoading">
			<view class="btn" @tap="joinCart(specsIndex)">加入购物车</view>
			<view class="btn" @tap="buyNow(specsIndex)">立即购买</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 enterCart from '@/components/enter-cart/enter-cart.vue';
	import customerService from '@/components/customer-service/customer-service.vue';
	import swiperPu from '@/components/swipers/swiper-pu';
	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,
				kitDetail:{}, //套件详情
				kitSku:[], //套件规格
				isShow:false, //是否展示规格弹窗
				kitIndex:0, //规格选中位置
				kitBanner:[], //套件轮播
				action:'collect', //收藏类型
				id:'' ,//套件id
				vipPrice:false,// 是否显示会员价
				cacheBusinessId:-1, //商户id
				isLoading:false,
			}
		},
		computed:{
			...mapState({
				footHeight: state => state.moduleA.footHeight,
			}),
		},
		onLoad(op) {
			if(op !== ''){
				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.getKitDetail(this.id);
						userInfoEv();
					}
				})
			}else{
				this.getKitDetail(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: {
			//查询套件详情
			getKitDetail(id){
				uni.showLoading({
					title: '加载中'
				});
				this.isLoading=false;
				this.$requst.get('/api/spu/detail',{id:id}).then(res=>{
					console.log(res,99999)
					if(res.code==0) {
						this.kitDetail = res.data.detail; //套件详情
						this.kitSku = res.data.sku; //套件规格
						let newArr = [];
						res.data.detail.images.forEach(item=>{
							let obj = {
								imgSrc:item,
							}
							newArr.push(obj)
						})
						this.kitBanner = newArr; //详情轮播图
					}
					uni.hideLoading();
					this.isLoading=true;
				})
			},
			//收藏
			collectionEv(id){
				let params = {
					id:id,
					action:this.action
				}
				if(this.kitDetail.is_collected == 1){
					this.$requst.post('/api/spu/un-record',params).then(res=>{
						if(res.code==0) {
							// this.$toolAll.tools.showToast('取消收藏成功');
							this.getKitDetail(this.id);
						}
					})
				}else{
					this.$requst.post('/api/spu/record',params).then(res=>{
						if(res.code==0) {
							// this.$toolAll.tools.showToast('收藏成功');
							this.getKitDetail(this.id);
						}
					})
				}
				
			},
			// 加入购物车
			joinCart(){
				if(this.$toolAll.tools.judgeAuth()) {
					this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.kitSku[this.kitIndex].id,num:1}).then(res=>{
						if(res.code==0) {
							this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
							getCartNum();
						} else {
							this.$toolAll.tools.showToast(res.msg)
						}
					})
				}
			},
			// 立即购买
			buyNow(){
				if(this.$toolAll.tools.judgeAuth()) {
					this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.kitSku[this.kitIndex].id,num:1}).then(res=>{
						if(res.code==0) {
							uni.navigateTo({
								url:`/pagesA/cart/cart`
							})
						} else {
							this.$toolAll.tools.showToast(res.msg)
						}
					})
				}
			},
			// 去商品详情
			toDetail(id){
				uni.navigateTo({
					url:`/pagesA/shop/detail?id=${id}&source=kit`
				})
			}
			
		}
	}
</script>

<style>
	
</style>