shop-app/pages/goods/detail/index.vue

<!--
 * @Author: ch
 * @Date: 2022-03-23 17:27:21
 * @LastEditors: ch
 * @LastEditTime: 2022-04-06 09:47:06
 * @Description: file content
-->
<template>
	<view>
		<SlideImage :images="goods.images"></SlideImage>
		<view class="goods-info">
			<view class="pirce">
				<text>￥</text>
				<text>199.9</text>
				<text>起</text>
			</view>
			<view class="goods-info--title">{{goods.name}}</view>
		</view>
		<view class="select">
			<Service></Service>

			<u-cell label="选择" :border="false" isLink @click="onShowSkuPopup()"></u-cell>
			<SkuPopup v-model="selectedSkuInfo" :visible="showSkuPopup" :mode="skuMode" :goodsInfo="goods" :skuInfo="skuInfo" @addCart="onAddCart" ></SkuPopup>
		</view>
		<view class="goods-desc">
			<mp-html :content="goods.content"/>
		</view>
		<view class="footer">
			<view class="footer--left">
				<view class="icon service">客服</view>
				<view class="icon cart">购物车</view>
			</view>
			<view class="footer--btns">
				<button class="btn" plain @click="onShowSkuPopup(2)">加入购物车</button>
				<button class="btn" plain @click="onShowSkuPopup(3)">立即购买</button>
			</view>
		</view>
	</view>
	
</template>
<script>

import {ApiGetGoodsDetail, ApiGetGoodsSkus} from '@/common/api/goods';
import SlideImage from '@/pages/goods/detail/SlideImage.vue';
import Service from './Service.vue';
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html';
import SkuPopup from './SkuPopup.vue';
export default {
	components: { SlideImage, mpHtml, Service, SkuPopup},
	data(){
		return {
			goods : {},
			skuInfo : [],
			showSkuPopup : false,
			// sku弹窗模式 1:都显示 2:只显示购物车 3:只显示立即购买
			skuMode : 1,
			selectedSkuInfo : {
				sku : '',
				num : 1
			}
		}
	},
	onLoad(){
		this.getGoodsDetail();
		this.getGoodsSkus();
	},
	methods:{
		async getGoodsDetail(){
			const {query} = this.$Route;
			const {error, result} = await ApiGetGoodsDetail({id : query.id});
			if(error){
				uin.$u.totast(error.message);
				return false;
			}
			result.attributeGroupList[0].attributes = [...result.attributeGroupList[0].attributes, ...[
				{name: "绿色", symbol: 6}
			]]
			this.goods = {...result,
					images : result.otherPictureList || [result.mainPicture],
				};
		},
		async getGoodsSkus(){
			const {query} = this.$Route;
			const {error, result} = await ApiGetGoodsSkus({productId : query.id});
			if(error) {
				uin.$u.totast(error.message);
				return false;
			}
			this.skuInfo = result;
		},
		/**
		 * 显示/隐藏SKU弹窗
		 * @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
		 */
		onShowSkuPopup(skuMode = 1) {
			this.skuMode = skuMode
			this.showSkuPopup = true
		},
	}
	
}
</script>
<style lang="scss" scoped>
page{
	background: #f8f8f8;
	padding-bottom: 138rpx;
}
.goods-info{
	margin: 20rpx 30rpx 0;
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	&--title{
		font-size: 32rpx;
		line-height: 48rpx;
	}
}
.select{
	margin: 20rpx 30rpx;
	background: #fff;
	border-radius: 16rpx;
}
.goods-desc{
	margin: 20rpx 30rpx;
	background: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
}
.footer{
	height: 138rpx;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
	background: #fff;
	&--left{
		display: flex;
	}
	&--btns{
		background: #FFF3EE;
		border-radius: 40rpx;
		overflow: hidden;
	}
	.icon{
		font-size: 22rpx;
		padding-top: 60rpx;
		background: url('@/static/tabbar/home.png') no-repeat center top;
		background-size: 48rpx;
		color: #333;
		&.cart{
			margin-left: 40rpx;
		}
	}
	.btn{
		width: 250rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: inline-block;
		background: none;
		border: none;
		font-size: 28rpx;
		color: #FF875B;
	}
}
</style>