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.
139 lines
3.0 KiB
139 lines
3.0 KiB
3 years ago
|
<!--
|
||
|
|
* @Author: ch
|
||
|
|
* @Date: 2022-03-23 17:27:21
|
||
|
|
* @LastEditors: ch
|
||
|
|
* @LastEditTime: 2022-03-24 14:10:20
|
||
|
|
* @Description: file content
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<view>
|
||
|
|
<SlideImage :images="goods.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.goods_name}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="select">
|
||
|
|
<Service></Service>
|
||
|
|
|
||
|
|
<u-cell label="选择" :border="false" isLink @click="onShowSkuPopup()"></u-cell>
|
||
|
|
<SkuPopup v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @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 goodsDetailData from '@/mock/goodsDetail.json';
|
||
|
|
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 : goodsDetailData.data.detail,
|
||
|
|
showSkuPopup : false,
|
||
|
|
// sku弹窗模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
||
|
|
skuMode : 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
/**
|
||
|
|
* 显示/隐藏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>
|