207 lines
6.6 KiB
Vue
207 lines
6.6 KiB
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;">
|
||
<rich-text :nodes="richText" style="color: #5a5a5a;"></rich-text>
|
||
</view>
|
||
</view>
|
||
<!-- 底部按钮 -->
|
||
<view class="posixzy bacf pad-zy30 disjbac pad-sx20">
|
||
<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>
|
||
</view>
|
||
</view>
|
||
</status-container>
|
||
<!-- 购物车图标 -->
|
||
<image @tap="$toolAll.tools.goPage('/pagesB/cart/cart')" class="posi" src="/static/tabbar/icon-cart.png" mode="" lazy-load style="width: 79rpx;height: 79rpx;right: 20rpx;bottom: 160rpx;"></image>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 底部组件
|
||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||
import list from '@/components/list.vue';
|
||
import pitera from '@/components/nothing/pitera.vue';
|
||
import swiperPu from '@/components/swipers/swiper-pu.vue';
|
||
export default {
|
||
components:{'foot-tab' :footTab,list,pitera,swiperPu},
|
||
data() {
|
||
return {
|
||
richText:'',
|
||
shopId:'',//产品id
|
||
shopInfo:'',//产品详情
|
||
bannerList:[],//产品轮播
|
||
loading:false,
|
||
specList:[],//规格列表
|
||
moSpecList:[],//默认规格
|
||
haveSpecList:[],//有这个规格商品
|
||
isLoading:true,
|
||
shopList:[]
|
||
}
|
||
},
|
||
onShow() {
|
||
// 开启banner图自动轮播
|
||
this.$store.commit('setAutoplay',true);
|
||
uni.removeStorageSync('addressInfo');
|
||
uni.removeStorageSync('orderInfo');
|
||
uni.removeStorageSync('skuList');
|
||
},
|
||
onHide() {
|
||
// 关闭banner图自动轮播
|
||
this.$store.commit('setAutoplay',false);
|
||
},
|
||
onLoad(op) {
|
||
this.shopId = op.id;
|
||
// 调用产品详情
|
||
this.getDetail();
|
||
},
|
||
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.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('暂无该规格');
|
||
}
|
||
},
|
||
// 前往确认订单页
|
||
goConfirmOrder(){
|
||
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(){
|
||
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('添加购物车成功(*^▽^*)');
|
||
}
|
||
})
|
||
},
|
||
// 删除对象中某个字段
|
||
objField(field){
|
||
let newObj = JSON.parse(JSON.stringify(this.shopList[0].sku_list[0]));
|
||
delete newObj[field];
|
||
return newObj;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style></style>
|