186 lines
5.4 KiB
Vue
186 lines
5.4 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :navBarTitle="'商品详情'"></status-nav>
|
||
<!-- 容器 -->
|
||
<view class="pad-x140" style="background-color: #fafafa;">
|
||
<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">{{detailObj.name}}</view>
|
||
<!-- 描述 -->
|
||
<view class="colpeili fon30 clips3 line-h50">{{detailObj.subtitle}}</view>
|
||
<view class="disac mar-s20">
|
||
<!-- 是否限时优惠 -->
|
||
<view v-if="detailObj.tag!=''" class="fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||
<!-- 价格 -->
|
||
<view class="disac">
|
||
<view class="fon40 bold col0 mar-y10">￥{{discountPrice}}</view>
|
||
<view class="fon30 colpeili" style="text-decoration: line-through;">￥{{originalPrice}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 颜色 -->
|
||
<view class="mar-s50"><drop-down></drop-down></view>
|
||
<!-- 尺寸 -->
|
||
<drop-down :dropObj="dropObj" @chooseItem="chooseItem"></drop-down>
|
||
<view style="background-color: #FFFFFF;margin: 0 -30rpx;">
|
||
<!-- 作品介绍 -->
|
||
<view class="mar-s100 mar-x30 fon36 bold col0 tcenter pad-s50">作品介绍</view>
|
||
<!-- 富文本 -->
|
||
<rich-text :nodes="shopRich"></rich-text>
|
||
</view>
|
||
</container-subgroup>
|
||
</view>
|
||
<!-- 底部导航 -->
|
||
<view v-if="shopDetail!=''">
|
||
<bottom-nav :detailObj="shopDetail"></bottom-nav>
|
||
</view>
|
||
<!-- 全局客服 -->
|
||
<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';
|
||
// 客服按钮组件
|
||
import publicCustomer from '@/components/public-customer.vue';
|
||
export default {
|
||
components:{
|
||
swiperPu,
|
||
shopList,
|
||
dropDown,
|
||
bottomNav,
|
||
publicCustomer
|
||
},
|
||
data() {
|
||
return {
|
||
swiperHeight:uni.getSystemInfoSync().windowWidth,
|
||
cateCurrent:0,
|
||
dropObj:{
|
||
title:'尺寸',
|
||
childrenList:[
|
||
{
|
||
id:1,
|
||
childrenTitle:'1.2'
|
||
},
|
||
{
|
||
id:1,
|
||
childrenTitle:'6'
|
||
}
|
||
]
|
||
},
|
||
shopRich:'',//商品富文本
|
||
bannerList:[],//轮播
|
||
originalPrice:0,//商品原价
|
||
discountPrice:0,//商品折扣价
|
||
detailObj:{},//详情
|
||
skuDetail:{},//sku详情
|
||
shopDetail:'',
|
||
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) {
|
||
// 查询订单详情
|
||
this.checkDetail(options.id);
|
||
},
|
||
methods: {
|
||
// 查询商品详情
|
||
checkDetail(id){
|
||
this.$requst.post('/api/spu/detail',{id}).then(res=>{
|
||
if(res.code==0){
|
||
// 设置商品详情
|
||
this.detailObj = res.data.detail;
|
||
this.shopDetail = res.data;
|
||
|
||
// 轮播
|
||
// 图片字符串转数组
|
||
let arrImg = this.detailObj.images.split(',')
|
||
arrImg.forEach(item=>{
|
||
let newImgObj = {
|
||
imgSrc:item,
|
||
url:'',
|
||
isVideo:false,
|
||
poster:'',
|
||
}
|
||
// 存图片
|
||
this.bannerList.push(newImgObj)
|
||
})
|
||
// 存视频
|
||
if(this.detailObj.video!=''){
|
||
this.bannerList[0] = {
|
||
imgSrc:arrImg[0],
|
||
url:this.detailObj.video,
|
||
isVideo:true,
|
||
poster:'',
|
||
}
|
||
}
|
||
// 原价金额转换
|
||
// this.originalPrice = this.$toolAll.tools.changeNum(this.detailObj.original_price);
|
||
this.originalPrice = this.detailObj.original_price;
|
||
// 折扣价金额转换
|
||
// this.discountPrice = this.$toolAll.tools.changeNum(this.detailObj.price);
|
||
this.discountPrice = this.detailObj.price;
|
||
// 设置富文本
|
||
this.shopRich = this.$toolAll.tools.escape2Html(res.data.detail.content);
|
||
} else {
|
||
|
||
}
|
||
}).catch(err=>{
|
||
this.$toolAll.tools.showToast(err.msg);
|
||
})
|
||
},
|
||
// 尺寸选择事件
|
||
chooseItem(e){
|
||
this.log(e);
|
||
},
|
||
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;
|
||
}
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|