247 lines
7.2 KiB
Vue
247 lines
7.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="pad-b140">
|
|||
|
|
<status-nav :ifReturn="true" navBarTitle="商品简介" :marginBottom="0"></status-nav>
|
|||
|
|
<!-- 商品轮播图 -->
|
|||
|
|
<view class="shop-img">
|
|||
|
|
<swiper-pu newRadius="0" :bannerList="shopBanner" newHeight="505rpx" newBottom="35rpx" :isplay='isplay'></swiper-pu>
|
|||
|
|
</view>
|
|||
|
|
<!-- 商品概述 -->
|
|||
|
|
<view class="shop-summary">
|
|||
|
|
<view class="shop-title">{{shopDetail.name}}</view>
|
|||
|
|
<view class="shop-txt flex">
|
|||
|
|
<view class="left">
|
|||
|
|
<view class="shop-customized">{{shopDetail.tag==''?'':shopDetail.tag}}</view>
|
|||
|
|
<view class="shop-pric">￥{{shopDetail.price}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="right flex">
|
|||
|
|
<view class="collection-btn flex" :class="shopDetail.is_collected == 1?'active':''" @tap="collectionEv(shopDetail.id)">
|
|||
|
|
<image src="/static/public/icon-collection.png" mode=""></image>
|
|||
|
|
<text>收藏</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="share-btn flex">
|
|||
|
|
<image src="/static/public/icon-share.png" mode=""></image>
|
|||
|
|
<text>分享</text>
|
|||
|
|
<button plain="true" data-name="shareBtn" open-type="share"></button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="specs-btn flex" @tap="openSpecs(1)">
|
|||
|
|
<image src="/static/public/icon-specs.png" mode="widthFix"></image>
|
|||
|
|
<text>规格：查看详细规格</text>
|
|||
|
|
<image src="/static/public/icon-more.png" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 商品详情 -->
|
|||
|
|
<view class="shop-detail">
|
|||
|
|
<view class="shop-detail-tab flex">
|
|||
|
|
<view class="tab-btn" :class="showCurrent == index?'cur':''" @tap="changeDetail(index)" v-for="(item,index) in shopDetailTab" :key="index">{{item}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="shop-detail-txt">
|
|||
|
|
<view class="txt-box" v-if="showCurrent == 0">
|
|||
|
|
<rich-text :nodes="shopDetail.content"></rich-text>
|
|||
|
|
</view>
|
|||
|
|
<view class="txt-box" v-if="showCurrent == 1">
|
|||
|
|
<view>
|
|||
|
|
<rich-text :nodes="shopDetail.params"></rich-text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 底部按钮 -->
|
|||
|
|
<view class="shop-btns flex" v-if="source == 'shop'">
|
|||
|
|
<view class="btn" @tap="openSpecs(0)">加入购物车</view>
|
|||
|
|
<view class="btn" @tap="openSpecs(1)">立即购买</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="kit-shop-btns" v-if="source == 'kit'">
|
|||
|
|
<view class="btn" @tap="backEv">返回套件继续购买</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 规格弹窗 -->
|
|||
|
|
<view class="pull-all-bg" v-if="isShow" @tap="closeSpecs"></view>
|
|||
|
|
<view class="specs-detail-bg" v-if="isShow">
|
|||
|
|
<view class="specs-detail">
|
|||
|
|
<view class="close-specs" @tap="closeSpecs"><image src="/static/public/icon-close.png" mode="widthFix"></image></view>
|
|||
|
|
<view class="price">￥{{shopDetail.original_price}}</view>
|
|||
|
|
<view class="price"><text>会员价：</text>￥{{shopDetail.price}}</view>
|
|||
|
|
<view class="specs-ul">
|
|||
|
|
<text>规格</text>
|
|||
|
|
<view class="specs-li flex" @tap="changeSpecs(index)" :class="specsIndex == index?'checked':''" v-for="(item,index) in shopSku" :key="index">{{item.custom_title}} 供货周期：{{item.cycle}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="specs-detail-btn" @tap="buyNow(specsIndex)" v-if="changeBtns">立即购买</view>
|
|||
|
|
<view class="specs-detail-btn" @tap="joinCart(specsIndex)" v-else>加入购物车</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 购物车btn -->
|
|||
|
|
<enter-cart :bottom="335"></enter-cart>
|
|||
|
|
<!-- 客服btn -->
|
|||
|
|
<customer-service></customer-service>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import statusNav from '@/components/status-navs/status-nav';
|
|||
|
|
import swiperPu from '@/components/swipers/swiper-pu';
|
|||
|
|
import enterCart from '@/components/enter-cart/enter-cart.vue';
|
|||
|
|
import customerService from '@/components/customer-service/customer-service.vue';
|
|||
|
|
import {getCartNum} from '@/jsFile/public-api.js';
|
|||
|
|
import { mapState } from 'vuex'//引入mapState
|
|||
|
|
export default {
|
|||
|
|
components:{
|
|||
|
|
statusNav,
|
|||
|
|
swiperPu,
|
|||
|
|
enterCart,
|
|||
|
|
customerService
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
|
|||
|
|
newWidth:uni.getSystemInfoSync().windowWidth,
|
|||
|
|
isplay:false,
|
|||
|
|
shopDetailTab:['商品信息','商品规格'], //tab列表
|
|||
|
|
shopDetail:{}, //商品详情
|
|||
|
|
shopSku:[], //商品规格
|
|||
|
|
shopBanner:[], //商品轮播
|
|||
|
|
source:'shop', //详情分类 商品：shop 套件：kit
|
|||
|
|
showCurrent:0, //详情&规格切换
|
|||
|
|
isShow:false, //是否展示规格弹窗
|
|||
|
|
specsIndex:0, //规格选中位置
|
|||
|
|
id:0, //商品、套件id
|
|||
|
|
action:'collect', //收藏类型
|
|||
|
|
changeBtns:false, //按钮选择
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed:{
|
|||
|
|
...mapState({
|
|||
|
|
footHeight: state => state.moduleA.footHeight,
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
onLoad(op) {
|
|||
|
|
if(op !== ''){
|
|||
|
|
this.source = op.source;
|
|||
|
|
this.id = op.id;
|
|||
|
|
this.getDetail(this.id);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 分享到微信
|
|||
|
|
onShareAppMessage() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 分享到朋友圈
|
|||
|
|
onShareTimeline(){
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 切换展示
|
|||
|
|
changeDetail(index){
|
|||
|
|
this.showCurrent = index;
|
|||
|
|
},
|
|||
|
|
// 打开规格弹窗
|
|||
|
|
openSpecs(type){
|
|||
|
|
if(type == 0){
|
|||
|
|
this.changeBtns = false;
|
|||
|
|
}
|
|||
|
|
if(type == 1){
|
|||
|
|
this.changeBtns = true;
|
|||
|
|
}
|
|||
|
|
if(!this.isShow){
|
|||
|
|
this.isShow = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 选择规格
|
|||
|
|
changeSpecs(index){
|
|||
|
|
this.specsIndex = index;
|
|||
|
|
},
|
|||
|
|
// 关闭规格弹窗
|
|||
|
|
closeSpecs(){
|
|||
|
|
this.isShow = false;
|
|||
|
|
},
|
|||
|
|
//查询商品详情
|
|||
|
|
getDetail(id){
|
|||
|
|
uni.showLoading();
|
|||
|
|
this.$requst.get('/api/spu/detail',{id:id}).then(res=>{
|
|||
|
|
if(res.code==0) {
|
|||
|
|
console.log(res,'详情')
|
|||
|
|
this.shopDetail = res.data.detail; //详情数据
|
|||
|
|
this.shopSku = res.data.sku
|
|||
|
|
let newArr = [];
|
|||
|
|
res.data.detail.images.forEach(item=>{
|
|||
|
|
let obj = {
|
|||
|
|
imgSrc:item,
|
|||
|
|
}
|
|||
|
|
newArr.push(obj)
|
|||
|
|
})
|
|||
|
|
this.shopBanner = newArr; //详情轮播图
|
|||
|
|
}
|
|||
|
|
uni.hideLoading();
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//收藏
|
|||
|
|
collectionEv(id){
|
|||
|
|
let params = {
|
|||
|
|
id:id,
|
|||
|
|
action:this.action
|
|||
|
|
}
|
|||
|
|
if(this.shopDetail.is_collected == 1){
|
|||
|
|
this.$requst.post('/api/spu/un-record',params).then(res=>{
|
|||
|
|
if(res.code==0) {
|
|||
|
|
// this.$toolAll.tools.showToast('取消收藏成功');
|
|||
|
|
this.getDetail(this.id);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}else{
|
|||
|
|
this.$requst.post('/api/spu/record',params).then(res=>{
|
|||
|
|
if(res.code==0) {
|
|||
|
|
// this.$toolAll.tools.showToast('收藏成功');
|
|||
|
|
this.getDetail(this.id);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 加入购物车
|
|||
|
|
joinCart(index){
|
|||
|
|
if(this.$toolAll.tools.judgeAuth()) {
|
|||
|
|
this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.shopSku[index].id,num:1}).then(res=>{
|
|||
|
|
if(res.code==0) {
|
|||
|
|
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
|
|||
|
|
getCartNum();
|
|||
|
|
// 关闭弹窗
|
|||
|
|
this.closeSpecs();
|
|||
|
|
} else {
|
|||
|
|
this.$toolAll.tools.showToast(res.msg)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 立即购买
|
|||
|
|
buyNow(index){
|
|||
|
|
if(this.$toolAll.tools.judgeAuth()) {
|
|||
|
|
this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.shopSku[index].id,num:1}).then(res=>{
|
|||
|
|
if(res.code==0) {
|
|||
|
|
// 关闭弹窗
|
|||
|
|
this.closeSpecs();
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:`/pagesA/cart/cart`
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.$toolAll.tools.showToast(res.msg)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//返回事件
|
|||
|
|
backEv() {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
</style>
|