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

<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>
					<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 {
				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: {
			
			// 查询详情事件
			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);
							})
						}
					}
				})
			},
			
			// 立即购买
			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)
					}
				})
			},
			
			// 加入购物车
			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>