martial-arts/pagesB/shop-detail/shop-detail.vue

<template>
	<view>
		<status-container titlet="产品详情" returnc="#FFFFFF">
			<view v-if="loading" slot="content" style="margin-top: -20rpx;">
				<view class="bacf boxshowb">
					<swiper-pu newBottom="20rpx" newHeight="520rpx" :bannerList="bannerList"></swiper-pu>
					<view class="pad-zy30 pad-sx24">
						<view class="fon26 col26">{{shopInfo.name}}</view>
						<view class="col-e42417 dis ae fon24 mar-s20">
							<view class="bold">￥{{shopInfo.price}}</view>
							<view class="tline-through fon20 col-969696 mar-z10">￥{{shopInfo.original_price}}</view>
						</view>
					</view>
				</view>
				<!-- <view class="bacf mar-s30 pad-zy30 pad-x30">
					<view class="bbot pad-x10 pad-s30">
						<span class="fon28 bold posir pad-x10">
							规格/参数
							<view class="posia-xzy" style="height: 6rpx;background-color: #e42417;bottom: -2rpx;"></view>
						</span>
					</view>
					<view class="" v-if="isLoading">
						<view class="disac fon24 col26 mar-s20" v-for="(item,index) in specList" :key="index">
							<view class="">{{item.title}}：</view>
							<view class="disac">
								<view @tap="chooseSpec(index,item1.id)" class="pad-sx10 pad-zy20 radius10 borbot-df mar-y10" :class="moSpecList[index]==item1.id?'specActive':''" v-for="(item1,index1) in item.children" :key="index1">{{item1.title}}</view>
							</view>
						</view>
					</view>
				</view> -->
				<view class="bacf mar-s30 pad-zy30 pad-x30">
					<view class="bbot pad-x10 pad-s30">
						<span class="fon28 bold posir pad-x10">
							产品介绍
							<view class="posia-xzy" style="height: 6rpx;background-color: #e42417;bottom: -2rpx;"></view>
						</span>
					</view>
					<view class="rich-text fon24 mar-s30" style="line-height: 1.8;" v-if="ifDetail">
						<rich-text :nodes="richText" style="color: #5a5a5a;"></rich-text>
					</view>
				</view>
				<!-- 底部按钮 -->
				<view class="posixzy bacf pad-zy30 disjbac pad-sx20 boxshowt">
					<view class="fon30 bold col-e42417">￥{{shopInfo.price}}</view>
					<view class="disac fon24 colf">
						<view @tap="addCart" class="radius32 disjcac" style="background-color: #FFFFFF;color: #f37617;border: 2rpx solid #f37617; width: 184rpx;height: 64rpx;">加入购物车</view>
						<!-- <view @tap="goConfirmOrder" class="radius32 disjcac mar-z10" style="background-color: #f37617;border: 2rpx solid #f37617;width: 184rpx;height: 64rpx;">立即购买</view> -->
						<view @tap="buyPopu(shopInfo.id,shopInfo.is_buy)" class="radius32 disjcac mar-z10" style="background-color: #f37617;border: 2rpx solid #f37617;width: 184rpx;height: 64rpx;">立即购买</view>
					</view>
				</view>
			</view>
		</status-container>
		<!-- 购物车图标 -->
		<view class="posi cart-box">
			<image @tap="goCart" class="" src="/static/tabbar/icon-cart.png" mode="" lazy-load></image>
			<view class="colf fon24 disjcac" >{{cartNum}}</view>
		</view>
		<buy-popu ref="refbuy"></buy-popu>
	</view>
</template>

<script>
	// 底部组件
	import footTab from '@/components/foot-tabs/foot-tab.vue';
	import list from '@/components/list.vue';
	import swiperPu from '@/components/swipers/swiper-pu.vue';
	import buyPopu from '@/components/buy-popu.vue';
	import { mapState } from 'vuex';
	import { checkCartNum } from '@/jsFile/public-api.js';
	export default {
		components:{'foot-tab' :footTab,list,swiperPu,buyPopu},
		data() {
			return {
				richText:'',
				shopId:'',//产品id
				shopInfo:'',//产品详情
				bannerList:[],//产品轮播
				loading:false,
				specList:[],//规格列表
				moSpecList:[],//默认规格
				haveSpecList:[],//有这个规格商品
				isLoading:true,
				shopList:[],
				ifDetail:false
			}
		},
		computed:{
			...mapState({
				cartNum: state => state.moduleA.cartNum
			})
		},
		onShow() {
			// 开启banner图自动轮播
			this.$store.commit('setAutoplay',true);
			uni.removeStorageSync('addressInfo');
			uni.removeStorageSync('orderInfo');
			uni.removeStorageSync('skuList');
		},
		onHide() {
			// 关闭banner图自动轮播
			this.$store.commit('setAutoplay',false);
		},
		onShareAppMessage(res) {
			var shareObj = {
		　　　　	title: ``, // 默认是小程序的名称(可以写slogan等)
		　　　　	path: `/pagesB/shop-detail/shop-detail?id=${this.shopId}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
		　　　　	imageUrl: ``//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
		　	};
		　　return shareObj;
		},
		onLoad(op) {
			if(op.invite_code) {
				// 设置为第一次进入
				this.$store.commit('setFristIn',true);
				uni.setStorageSync('invite_code',op.invite_code);
			} else {
				this.$store.commit('setFristIn',false);
			}
			this.shopId = op.id;
			// 调用产品详情
			this.getDetail();
			this.cartNumEv();
		},
		methods: {
			// 获取产品详情
			getDetail(){
				this.$requst.post('/api/spu/detail',{id:this.shopId}).then(res=>{
					if(res.code==0){
						this.loading = true;
						// 设置产品详情
						this.shopInfo = res.data.detail;
						// 富文本
						this.richText = this.$toolAll.tools.escape2Html(this.shopInfo.content);
						// 产品详情
						let newImg = [];
						if(this.shopInfo.images){
							newImg = this.shopInfo.images.split(',');
						}
						if(newImg.length){
							newImg.forEach(item=>{
								let obj = {
									imgSrc:item,
									url:'',
									isVideo:false,
									poster:''
								}
								this.bannerList.push(obj);
							})
						} else {
							this.bannerList.push({
								imgSrc:this.shopInfo.cover,
								url:'',
								isVideo:false,
								poster:''
							})
						}
						// 商品规格
						this.$requst.get('/api/spu/spec',{id:this.shopId}).then(resspec=>{
							if(resspec.code==0){
								// 
								this.ifDetail = true;
								// 所有规格列表
								this.specList = resspec.data.spec;
								// 默认规格
								this.moSpecList = resspec.data.sku.indexes.split('-');
								// 存在规格
								this.haveSpecList = resspec.data.sku_list;
								this.shopList.push({
									sku_list:[
										{
											sku_coding:resspec.data.sku.coding,
											num:1,
											sku_id:resspec.data.sku.id
										}
									]
								})
							}
						})
					}
				})
			},
			// 规格选择
			// chooseSpec(index,id1){
			// 	let tempList = JSON.parse(JSON.stringify(this.moSpecList));
			// 	tempList.splice(index,1,id1);
			// 	let exit = this.haveSpecList.findIndex(item=>item.indexes==tempList.join('-'));
			// 	if(exit!=-1){
			// 		if(this.haveSpecList[exit].stock){
			// 			this.isLoading = false;
			// 			this.moSpecList[index] = id1;
			// 			this.isLoading = true;
			// 			this.shopList[0].sku_list[0].sku_coding = this.haveSpecList[exit].coding;
			// 			this.shopList[0].sku_list[0].sku_id = this.haveSpecList[exit].id;
			// 		} else {
			// 			this.$toolAll.tools.showToast('库存不足');
			// 		}
			// 	} else {
			// 		this.$toolAll.tools.showToast('暂无该规格');
			// 	}
			// },
			// 调起弹框
			buyPopu(id,is_buy){
				if(this.$toolAll.tools.judgeAuth()) {
					if(!is_buy){
						this.$refs.refbuy.ifMask = true;
						this.$refs.refbuy.ifAnimated = true;
						this.$refs.refbuy.isLoading = true;
						this.$refs.refbuy.getSpec(id);
					}
				}
			},
			// 前往确认订单页
			// goConfirmOrder(){
			// 	if(this.$toolAll.tools.judgeAuth()) {
			// 		let params = {
			// 			sku_list:[
			// 				this.objField('sku_id')
			// 			]
			// 		};
			// 		this.$requst.post('/api/order/prepare-info',params).then(res=>{
			// 			if(res.code==0){
			// 				uni.navigateTo({
			// 					url:'/pagesB/confirm-order/confirm-order'
			// 				})
			// 				uni.setStorageSync('orderInfo',res.data);
			// 				uni.setStorageSync('skuList',params.sku_list);
			// 			}
			// 		})
			// 	}
			// },
			// 添加购物车
			addCart(){
				if(this.$toolAll.tools.judgeAuth()) {
					let params = this.objField('sku_coding');
					this.$requst.post('/api/order/shopping-cart-add',params).then(res=>{
						if(res.code==0){
							this.$toolAll.tools.showToast('添加购物车成功(*^▽^*)');
							this.cartNumEv();
						}
					})
				}
			},
			// 查询购物车数量
			cartNumEv(){
				checkCartNum().then(res=>{
					if(res.code==0){
						this.$store.commit('setCartNum',res.data.count);
					}
				})
			},
			// 删除对象中某个字段
			objField(field){
				let newObj = JSON.parse(JSON.stringify(this.shopList[0].sku_list[0]));
				delete newObj[field];
				return newObj;
			},
			// 前往购物车
			goCart(){
				if(this.$toolAll.tools.judgeAuth()) {
					this.$toolAll.tools.goPage('/pagesB/cart/cart')
				}
			}
		}
	}
</script>

<style></style>