279 lines
8.4 KiB
Vue
279 lines
8.4 KiB
Vue
<template>
|
||
<view class="pad-b140">
|
||
<status-nav :ifReturn="true" navBarTitle="商品简介" :marginBottom="0"></status-nav>
|
||
<!-- 商品轮播图 -->
|
||
<view class="shop-img" v-if="isLoading">
|
||
<swiper-pu newRadius="0" :bannerList="shopBanner" newHeight="505rpx" newBottom="35rpx" :isplay='isplay'></swiper-pu>
|
||
</view>
|
||
<!-- 商品概述 -->
|
||
<view class="shop-summary" v-if="isLoading">
|
||
<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.original_price}}</view>
|
||
<view class="shop-pric-vip" v-if="vipPrice"><text>会员价：</text>￥{{shopDetail.price}}</view>
|
||
</view>
|
||
<view class="right flex">
|
||
<view class="collection-btn flex" :class="shopDetail.is_collected == 1?'active':''" @tap="collectionEv(shopDetail.id)" v-if="source == 'shop'">
|
||
<image src="/static/public/icon-collection.png" mode=""></image>
|
||
<text>{{shopDetail.is_collected == 1?'已收藏':'收藏'}}</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" v-if="vipPrice"><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!==''?'供货周期：'+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,userInfoEv} 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, //按钮选择
|
||
vipPrice:false, //显示会员价
|
||
cacheBusinessId:-1, //商户id
|
||
isLoading:false,
|
||
}
|
||
},
|
||
computed:{
|
||
...mapState({
|
||
footHeight: state => state.moduleA.footHeight,
|
||
}),
|
||
},
|
||
onLoad(op) {
|
||
if(op !== ''){
|
||
this.source = op.source;
|
||
this.id = op.id;
|
||
if(op.business_id){
|
||
this.cacheBusinessId = op.business_id;
|
||
}
|
||
}
|
||
},
|
||
onShow() {
|
||
if(this.cacheBusinessId !== -1){
|
||
this.$requst.post('/api/index/change-business',{business_id:this.cacheBusinessId}).then(res=>{
|
||
if(res.code == 0){
|
||
this.getDetail(this.id);
|
||
userInfoEv();
|
||
}
|
||
})
|
||
}else{
|
||
this.getDetail(this.id);
|
||
userInfoEv();
|
||
}
|
||
if(uni.getStorageSync('business_code')!=='' && uni.getStorageSync('showVip')=='true'){
|
||
this.vipPrice = true;
|
||
}
|
||
// 查询购物车数量
|
||
getCartNum();
|
||
},
|
||
// 分享到微信
|
||
onShareAppMessage(res) {
|
||
let path = uni.getStorageSync('page-path-options')+'&business_id='+uni.getStorageSync('business_id');
|
||
return {
|
||
path:path
|
||
}
|
||
},
|
||
// 分享到朋友圈
|
||
onShareTimeline(res){
|
||
let path = uni.getStorageSync('page-path-options')+'&business_id='+uni.getStorageSync('business_id');
|
||
return {
|
||
path:path
|
||
}
|
||
},
|
||
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({
|
||
title: '加载中'
|
||
});
|
||
this.isLoading = false;
|
||
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();
|
||
this.isLoading = true;
|
||
})
|
||
},
|
||
//收藏
|
||
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) {
|
||
getCartNum();
|
||
// 关闭弹窗
|
||
this.closeSpecs();
|
||
uni.navigateTo({
|
||
url:`/pagesA/cart/cart`
|
||
})
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//返回事件
|
||
backEv() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|