159 lines
4.7 KiB
Vue
159 lines
4.7 KiB
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>
|