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.
171 lines
3.8 KiB
171 lines
3.8 KiB
<!--
|
|
* @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> |