mall-applet1/pagesB/shop-detail/shop-detail.vue

132 lines
3.4 KiB
Vue
Raw Normal View History

<template>
<view class="pad-x180">
<status-container titlet="详情">
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
<swiper-pu newRadius="0rpx" :bannerList="bannerList" :newHeight="swiperH+'px'" newBottom="40rpx" :isplay="isplay"></swiper-pu>
<view class="pad-zy20 bacf pad-sx20">
<view class="fon42 colb mar-x10">{{shopObj.name}}</view>
<view class="fon24 col6 mar-x20">{{shopObj.subtitle}}</view>
2022-07-15 03:10:06 +00:00
<view class="textc bold fon30 ">{{shopObj.original_price}}/<text class="fon24">{{shopObj.unit}}</text></view>
</view>
<view class="fon36 colb tcenter pad-sx30 bold">商品介绍</view>
<view class="pad-zy20">
<rich-text :nodes="richText"></rich-text>
</view>
</view>
</status-container>
<view class="disjbac posixzy bacf pad-sx20 pad-zy50">
<view class="btn buy-btn" @tap="buyEv(shopObj.skuId)"></view>
<view class="btn" @tap="addCartEv(shopObj.skuId)"></view>
</view>
</view>
</template>
<script>
import swiperPu from '@/components/swipers/swiper-pu';
import {getCartNum} from '@/jsFile/public-api.js';
export default {
components:{
swiperPu
},
data() {
return {
swiperH:uni.getSystemInfoSync().windowWidth,
richText:'',
isplay:false,
playTimer:null,
shopObj:'',
bannerList:[
// {imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
// {imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
// {imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
]
}
},
onHide() {
clearTimeout(this.playTimer);
},
onShareAppMessage() {
return {
2022-08-08 10:55:27 +00:00
title:this.shopObj.name,
path:uni.getStorageSync('page-path-options'),
imageUrl:this.bannerList[0].imgSrc
}
},
onShow() {
this.playTimer = setTimeout(()=>{
this.isplay = true;
},2000)
},
onLoad(op) {
this.getDetail(op.id);
},
methods: {
2022-06-02 08:55:16 +00:00
// 查询详情事件
getDetail(id){
this.$requst.post('/api/spu/detail',{id}).then(res=>{
if(res.code==0) {
this.shopObj = res.data.detail;
this.richText = this.$toolAll.tools.escape2Html(this.shopObj.content);
if(this.shopObj.images.length){
this.shopObj.images.forEach(item=>{
let obj = {
imgSrc:item,
url:'',
isVideo:false,
poster:''
}
this.bannerList.push(obj);
})
}
}
})
},
2022-06-02 08:55:16 +00:00
// 立即购买
buyEv(id){
this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{
if(res.code==0) {
uni.reLaunch({
url:`/pages/tabbar/cart/cart?skuId=${id}`
})
getCartNum();
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
},
2022-06-02 08:55:16 +00:00
// 加入购物车
addCartEv(id) {
if(this.$toolAll.tools.judgeAuth()) {
this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
getCartNum();
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
}
},
}
}
</script>
<style>
.btn{
width: 310rpx;
height: 98rpx;
line-height: 98rpx;
color: #FFFFFF;
background-color: #8c8c9b;
border-radius: 30rpx;
text-align: center;
font-size: 36rpx;
}
.buy-btn{
background: linear-gradient(to right, #ff3772 0%,#fd5548 100%);
}
</style>