perry-mall/pagesB/shopDetail/shopDetail.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :navBarTitle="'商品详情'"></status-nav>
		<!-- 容器 -->
		<view class="pad-x140">
			<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">New Farandole项链，小号New Farandole项链，小号New Farandole项链，小号New Farandole项链，小号</view>
				<!-- 描述 -->
				<view class="colpeili fon30 clips3 line-h50">于亿年宝藏中臻选1的宝石级钻石每年开采数亿克拉的钻石中 仅有1%的宝石级钻石才可作为...LOVE100 星座极光的原石挑选 </view>
				<view class="disac mar-s20">
					<!-- 是否限时优惠 -->
					<view class="fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
					<!-- 价格 -->
					<view class="disac">
						<view class="fon40 bold col0 mar-y10">￥20,000</view>
						<view class="fon30 colpeili" style="text-decoration: line-through;">￥16,000</view>
					</view>
				</view>
				<!-- 颜色 -->
				<view class="mar-s50"><drop-down></drop-down></view>
				<!-- 尺寸 -->
				<drop-down :dropObj="dropObj" @chooseItem="chooseItem"></drop-down>
				<!-- 作品介绍 -->
				<view class="mar-s100 mar-x30 fon36 bold col0 tcenter">作品介绍</view>
				<!-- 富文本 -->
				<rich-text :nodes="shopRich"></rich-text>
			</container-subgroup>
		</view>
		<!-- 底部导航 -->
		<bottom-nav></bottom-nav>
		<!-- 全局客服 -->
		<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';
	export default {
		components:{
			swiperPu,
			shopList,
			dropDown,
			bottomNav
		},
		data() {
			return {
				swiperHeight:uni.getSystemInfoSync().windowWidth,
				cateCurrent:0,
				dropObj:{
					title:'尺寸',
					childrenList:[
						{
							id:1,
							childrenTitle:'1.2'
						},
						{
							id:1,
							childrenTitle:'6'
						}
					]
				},
				shopRich:'',//商品富文本
				bannerList:[{
					imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
					url:'',
					isVideo:false,
					poster:'',
				}],//轮播
				detailObj:{},//详情
				skuDetail:{},//sku详情
				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) {
			
		},
		methods: {
			// 尺寸选择事件
			chooseItem(e){
				this.log(e);
			},
			goGetReadyDan(index){//弹框中的立即购买
				// {id:1,imgSrc:'/static/tabbar/mya.png',title:'【99皮皮节】【种植发际线】',price:3888,num:1,isActive:false},
				let params = {
					id:this.detailObj.spu_id,
					imgSrc:this.$http + this.detailObj.cover,
					coding:this.skuDetail.coding,
					price:'',
					num:this.buyNum || 1,
					title:this.detailObj.name,
					sku_name:this.skuDetail.title,
					
				}
				let newList = [params];
				uni.setStorageSync('orderList',newList);
				uni.navigateTo({
					url:`/pagesA/getReadyDan/getReadyDan?isNei=${this.isNei}&isVirtual=${this.detailObj.spu_type}`
				})
			},
			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;
						} 
					})
				}
			},
			backTop(){//回到顶部事件
			    uni.pageScrollTo({
			        scrollTop: 0,
			        duration: 300
			    });
			},
		}
	}
</script>

<style>
</style>