You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/goods/detail/index.vue

171 lines
3.8 KiB

3 years ago
<!--
* @Author: ch
* @Date: 2022-03-23 17:27:21
* @LastEditors: ch
* @LastEditTime: 2022-04-06 09:47:06
3 years ago
* @Description: file content
-->
<template>
<view>
3 years ago
<SlideImage :images="goods.images"></SlideImage>
3 years ago
<view class="goods-info">
<view class="pirce">
<text></text>
<text>199.9</text>
<text></text>
</view>
3 years ago
<view class="goods-info--title">{{goods.name}}</view>
3 years ago
</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>
3 years ago
</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>
3 years ago
import {ApiGetGoodsDetail, ApiGetGoodsSkus} from '@/common/api/goods';
3 years ago
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 {
3 years ago
goods : {},
skuInfo : [],
3 years ago
showSkuPopup : false,
// sku弹窗模式 1:都显示 2:只显示购物车 3:只显示立即购买
skuMode : 1,
selectedSkuInfo : {
sku : '',
num : 1
}
3 years ago
}
},
3 years ago
onLoad(){
this.getGoodsDetail();
this.getGoodsSkus();
},
3 years ago
methods:{
3 years ago
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;
},
3 years ago
/**
* 显示/隐藏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>