272 lines
8.6 KiB
Vue
272 lines
8.6 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :navBarTitle="'商品详情'"></status-nav>
|
||
<!-- 容器 -->
|
||
<view class="pad-x140" style="background-color: #fafafa;">
|
||
<container-subgroup>
|
||
<view slot="content">
|
||
<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 mar-x50">
|
||
<!-- 是否限时优惠 -->
|
||
<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 v-for="(item,index) in specList" :key="index">
|
||
<drop-down :dropObj="item" @chooseItem="chooseItem"></drop-down>
|
||
</view>
|
||
<!-- 颜色 -->
|
||
<!-- 尺寸 -->
|
||
<!-- <drop-down :dropObj="dropObj" @chooseItem="chooseItem"></drop-down> -->
|
||
<view class="pad-zy30" 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>
|
||
</view>
|
||
</container-subgroup>
|
||
</view>
|
||
|
||
<!-- 底部导航 -->
|
||
<!-- 底部按钮 -->
|
||
<view class="bottom-nav-box display-between-center">
|
||
<button type="default" @tap="immediatelyBuy">立即购买</button>
|
||
<button type="default" @tap="addCart">加入购物车</button>
|
||
</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,
|
||
specList:[],//规格列表
|
||
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,
|
||
specIdList:[],//多规格id
|
||
specCehckList:[],//存查询的规格数据
|
||
transmitData:[],//要传递的数据
|
||
shopId:'',//商品id
|
||
multi_spec:1//是否是单规格商品0-单规格，1-多规格
|
||
}
|
||
},
|
||
onShareAppMessage(res) {
|
||
var shareObj = {
|
||
title: `${this.detailObj.name}`, // 默认是小程序的名称(可以写slogan等)
|
||
path: `/pagesB/shopDetail/shopDetail?id=${this.shopId}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||
imageUrl: ''//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
||
};
|
||
return shareObj;
|
||
},
|
||
onShow() {
|
||
uni.removeStorageSync('chooseAddress');
|
||
this.isAutoPlay = true;
|
||
this.csNum = 0;
|
||
},
|
||
onHide() {
|
||
this.isAutoPlay = false;
|
||
},
|
||
onUnload() {
|
||
this.isAutoPlay = false;
|
||
},
|
||
onLoad(options) {
|
||
this.shopId = options.id;
|
||
if(uni.getStorageSync('phone_active')){
|
||
this.$toolAll.tools.clearShare();
|
||
// 查询订单详情
|
||
this.checkDetail(options.id);
|
||
} else {
|
||
uni.setStorageSync('existCode',options.invite_code);
|
||
uni.setStorageSync('outside',2);
|
||
uni.setStorageSync('transientUrl',`/pagesB/shopDetail/shopDetail?id=${options.id}`);
|
||
uni.navigateTo({
|
||
url:'/pages/login/login'
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
//规格查询接口
|
||
specsEv(id){
|
||
this.$requst.post('/api/spu/spec',{id}).then(res=>{
|
||
if(res.code==0){
|
||
this.specList = res.data.spec;
|
||
this.specCehckList = res.data.sku_list;
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
}).catch(err=>{
|
||
this.$toolAll.tools.showToast(err.msg);
|
||
})
|
||
},
|
||
// 查询商品详情
|
||
checkDetail(id){
|
||
this.$requst.post('/api/spu/detail',{id}).then(res=>{
|
||
if(res.code==0){
|
||
// 设置商品详情
|
||
this.detailObj = res.data.detail;
|
||
this.shopDetail = res.data;
|
||
// 设置单多规格判断
|
||
this.multi_spec = this.detailObj.multi_spec;
|
||
// 调用查询规格事件
|
||
this.specsEv(id);
|
||
// 轮播 start
|
||
// 图片字符串转数组
|
||
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:'',
|
||
}
|
||
}
|
||
// 轮播 end
|
||
// 原价金额转换
|
||
// 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 this.$toolAll.tools.showToast(res.msg);
|
||
}).catch(err=>{
|
||
this.$toolAll.tools.showToast(err.msg);
|
||
})
|
||
},
|
||
// 尺寸选择事件
|
||
chooseItem(e){
|
||
let specIndex = this.specList.findIndex(item=>item.title==e.mainTitle);
|
||
this.specIdList[specIndex*1] = e.id;
|
||
let specStr = this.specIdList.join('-');
|
||
this.transmitData = this.specCehckList.filter(item=>item.indexes==specStr);
|
||
if(this.transmitData.length){
|
||
// 改变折扣价
|
||
this.discountPrice = this.transmitData[0].price;
|
||
// 改变原价
|
||
this.originalPrice = this.transmitData[0].original_price;
|
||
}
|
||
},
|
||
// 立即购买
|
||
immediatelyBuy(){
|
||
// 调用加入购物车事件
|
||
this.addCart(1);
|
||
},
|
||
addCart(index=0){//添加购物车事件
|
||
// console.log(this.multi_spec,this.transmitData.length,214);
|
||
if(this.transmitData.length || this.multi_spec==0){
|
||
if(this.csNum==0){
|
||
this.csNum++;
|
||
let newId = '';
|
||
this.multi_spec==1 ? newId = this.transmitData[0].id : newId = this.shopDetail.sku[0].id;
|
||
if(index==0){
|
||
this.$toolAll.tools.showToast('正在加入购物车...');
|
||
}
|
||
this.$requst.post('/api/order/shopping-cart-add',{sku_id:newId,num:1}).then(res=>{
|
||
if(res.code==0) {
|
||
if(index==1){
|
||
setTimeout(()=>{
|
||
uni.navigateTo({
|
||
url:'/pages/tabbar/cart/cart'
|
||
})
|
||
},0)
|
||
} else {
|
||
this.$toolAll.tools.showToast('添加购物车成功(*^▽^*)');
|
||
this.csNum = 0;
|
||
}
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||
}
|
||
} else {
|
||
this.$toolAll.tools.showToast('请选择商品参数')
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.display-between-center{display: flex;justify-content: space-between;align-items: center;}
|
||
.bottom-nav-box{position: fixed;bottom: 0;left: 0;right: 0;padding: 20rpx 40rpx;background-color: #FFFFFF;}
|
||
button{
|
||
width: 310rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx!important;
|
||
border-radius: 30rpx;
|
||
font-size: 36rpx;
|
||
border: 1rpx solid #FFFFFF;
|
||
color: #FFFFFF!important;
|
||
}
|
||
button:first-child{border: 1rpx solid #f81c1c;background-color: #f81c1c;}
|
||
button:last-child{border: 1rpx solid #000000;background-color: #000000;}
|
||
</style>
|