236 lines
6.6 KiB
Vue
236 lines
6.6 KiB
Vue
<template>
|
|
<view class="pad-x170">
|
|
<!-- 滚动顶部 -->
|
|
<view class="scrool-top background-white" :style="{height:statusHeight+50+'px'}" v-if="scroolTop"></view>
|
|
<!-- 返回按钮 -->
|
|
<view class="back-btn flex" :style="{top:statusHeight+'px'}" @tap="backEv">
|
|
<i class="icon icon-return" style="font-size: 38rpx;" :style="{color: '#000000'}"></i>
|
|
</view>
|
|
<!-- 商品轮播 -->
|
|
<view class="shop-top-img">
|
|
<image :src="shopDetail.images[0]" mode="widthFix"></image>
|
|
</view>
|
|
<view class="shop-content pad-all20 background-white">
|
|
<!-- 商品标题 -->
|
|
<view class="shop-title font40 mar-x30">{{shopDetail.name}}</view>
|
|
<!-- 商品详情 -->
|
|
<view class="shop-body">
|
|
<view class="pull-title">
|
|
<view class="txt font32 pad-sx10">详情介绍</view>
|
|
<view class="line background-orange"></view>
|
|
</view>
|
|
<view class="body-txt font30 color-48">
|
|
<rich-text :nodes="shopDetail.content"></rich-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 规格 -->
|
|
<view class="pull-bg" v-if="showSku"></view>
|
|
<view class="shop-specs background-white border-box" v-if="showSku">
|
|
<view class="specs-top flex">
|
|
<view class="title font30">规格选择</view>
|
|
<view class="close" @tap="closeSpecs">
|
|
<image src="/static/icon/icon-close.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="specs-list">
|
|
<view class="specs-item border-box radius20 mar-s20 pad-zy20 font36 flex" :class="skuIndex==index?'active':''" v-for="(item,index) in shopSku" :key="index" @tap="changeSpecs(index)">
|
|
<text>{{item.title}}</text>
|
|
<text>￥{{vip_level>0?item.price:item.original_price}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="specs-btns flex">
|
|
<view class="btn radius30 font36 color-ff background-orange flex" @tap="buyNow">立即购买</view>
|
|
<view class="btn radius30 font36 color-ff background-grey flex" @tap="joinCart">加入购物车</view>
|
|
</view>
|
|
</view>
|
|
<!-- 尾部 -->
|
|
<view class="shop-foot border-box background-white pad-all20">
|
|
<view class="shop-footer background-grey pad-sx15 radius30 flex">
|
|
<view class="shop-nav font24 color-ff flex" @tap="goHome">
|
|
<image src="/static/icon/icon-home.png" mode="widthFix"></image>
|
|
<text>首页</text>
|
|
</view>
|
|
<view class="shop-cart background-white radius100 flex" @tap="goCart">
|
|
<image src="/static/icon/icon-cart.png" mode="widthFix"></image>
|
|
<view class="shop-num radius100 font24 color-ff flex" v-if="cartNum*1>=0&&cartNum*1<=99">
|
|
<text>{{cartNum}}</text>
|
|
</view>
|
|
<view class="shop-num radius100 font24 color-ff flex" v-if="cartNum*1>99">
|
|
<text>99</text>
|
|
</view>
|
|
</view>
|
|
<view class="shop-btn background-orange font36 color-48 radius30 flex" @tap="openSpecs">立即购买</view>
|
|
</view>
|
|
</view>
|
|
<!-- 分享&领券 -->
|
|
<share-coupon :spuId="shopDetail.id"></share-coupon>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getCartInfo} from '@/jsFile/public-api.js';
|
|
import {mapState} from 'vuex'//引入mapState
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusHeight:uni.getSystemInfoSync().statusBarHeight,
|
|
scroolTop:false, //是否显示顶部
|
|
shopDetail:{}, //商品详情
|
|
shopSku:[], //商品规格
|
|
showSku:false, //是否展示规格弹窗
|
|
skuIndex:0, //规格选中位置
|
|
id:0, //商品id
|
|
vip_level:0, // 是否会员
|
|
isLoading: true,
|
|
shareImg:'', // 分享图片
|
|
shareFlag:true,
|
|
}
|
|
},
|
|
onLoad(op) {
|
|
if(op.invite_code){
|
|
// 缓存invite_code
|
|
uni.setStorageSync('inviteCode',op.invite_code);
|
|
}
|
|
if(op.id){
|
|
this.id = op.id;
|
|
// 查询商品详情
|
|
this.getDetail(op.id);
|
|
// 查询商品规格
|
|
this.getSku(op.id);
|
|
}
|
|
},
|
|
onShow() {
|
|
this.vip_level = uni.getStorageSync('vip_level');
|
|
getCartInfo();
|
|
},
|
|
computed:{
|
|
...mapState({
|
|
cartNum: state=> state.moduleA.cartNum
|
|
}),
|
|
},
|
|
onPageScroll(object){
|
|
if(object.scrollTop>50){
|
|
this.scroolTop = true;
|
|
}else{
|
|
this.scroolTop = false;
|
|
}
|
|
},
|
|
onShareAppMessage(res) {
|
|
|
|
},
|
|
// 分享到朋友圈
|
|
onShareTimeline(res){
|
|
|
|
},
|
|
mounted() {
|
|
// 获取当前页面路径
|
|
this.$toolAll.tools.obtainPagePath();
|
|
},
|
|
methods: {
|
|
// 查询商品详情
|
|
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,'详情')
|
|
let shopObj = {
|
|
id:res.data.detail.id,
|
|
images:res.data.detail.images.split(','),
|
|
name:res.data.detail.name,
|
|
content:this.$toolAll.tools.escape2Html(res.data.detail.content)
|
|
}
|
|
this.shopDetail = shopObj; // 商品详情
|
|
}
|
|
uni.hideLoading();
|
|
this.isLoading =true;
|
|
})
|
|
},
|
|
|
|
// 查询商品规格
|
|
getSku(id){
|
|
this.$requst.get('/api/spu/spec',{id:id}).then(res=>{
|
|
if(res.code==0) {
|
|
console.log(res,'规格')
|
|
this.shopSku = res.data.sku_list; //商品规格
|
|
}
|
|
})
|
|
},
|
|
// 打开规格选择
|
|
openSpecs(){
|
|
this.showSku =true;
|
|
},
|
|
|
|
// 规格选择
|
|
changeSpecs(index){
|
|
if(this.skuIndex !== index){
|
|
this.skuIndex = index;
|
|
}
|
|
},
|
|
|
|
// 关闭规格选择
|
|
closeSpecs(){
|
|
this.showSku =false;
|
|
},
|
|
|
|
// 加入购物车
|
|
joinCart(){
|
|
if(this.$toolAll.tools.judgeAuth()) {
|
|
this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.shopSku[this.skuIndex].id,num:1}).then(res=>{
|
|
if(res.code==0) {
|
|
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
|
|
getCartInfo();
|
|
// 关闭弹窗
|
|
this.closeSpecs();
|
|
} else {
|
|
this.$toolAll.tools.showToast(res.msg)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 立即购买
|
|
buyNow(){
|
|
if(this.$toolAll.tools.judgeAuth()) {
|
|
this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.shopSku[this.skuIndex].id,num:1}).then(res=>{
|
|
if(res.code==0) {
|
|
// 关闭弹窗
|
|
this.closeSpecs();
|
|
// 去购物车
|
|
this.goCart();
|
|
} else {
|
|
this.$toolAll.tools.showToast(res.msg)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 去首页
|
|
goHome(){
|
|
uni.reLaunch({
|
|
url:'/pages/index/index',
|
|
})
|
|
},
|
|
// 去购物车
|
|
goCart(){
|
|
if(this.$toolAll.tools.judgeAuth()) {
|
|
uni.navigateTo({
|
|
url:'/pages/cart/cart',
|
|
})
|
|
}
|
|
},
|
|
// 返回
|
|
backEv(){
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|