278 lines
6.0 KiB
Vue
278 lines
6.0 KiB
Vue
<template>
|
|
<view class="content" v-if="!loding">
|
|
<!-- 轮播主图 -->
|
|
<view class="goods-covers">
|
|
<swiper class="swiper" indicator-dots indicator-active-color="#c82626">
|
|
<block v-if="goodsObj.pictures.length > 0">
|
|
<swiper-item v-for="(item, index) in goodsObj.pictures" :key="index">
|
|
<image class="swiper-item" :src="item" mode="aspectFill"/>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
<!-- 产品详情 -->
|
|
<view class="goods-content">
|
|
<view class="header">
|
|
<view class="title">{{goodsObj.name}}</view>
|
|
<view class="sub-title">{{goodsObj.description}}</view>
|
|
<view class="flex-box">
|
|
<view class="price"><text>￥</text>{{goodsObj.price.show}}</view>
|
|
<view class="sales">累计易货{{goodsObj.sales}}次</view>
|
|
</view>
|
|
</view>
|
|
<!-- 商家信息 -->
|
|
<view class="store">
|
|
<view class="title">{{goodsObj.shop.name}}</view>
|
|
<image class="logo" :src="goodsObj.shop.cover" mode="aspectFill"></image>
|
|
<view class="rate">
|
|
<uni-rate
|
|
:readonly="true"
|
|
color="#ddd"
|
|
active-color="#c82626"
|
|
:value="2.5"
|
|
:size="14"
|
|
/>
|
|
</view>
|
|
<view class="openbtn">进店</view>
|
|
</view>
|
|
<!-- 产品规格 -->
|
|
<view class="size">
|
|
<view class="size-item nowrap">
|
|
<label class="title">产品规格</label>
|
|
{{goodsObj.skus[0].goods_name}}
|
|
</view>
|
|
<view class="size-item nowrap">
|
|
<label class="title">限制</label>
|
|
特价商品不可与优惠券叠加使用
|
|
</view>
|
|
<view class="size-item nowrap">
|
|
<label class="title">服务</label>
|
|
易货严选自营･30天无忧退换･不可用券･国内部分地区不可配送
|
|
</view>
|
|
</view>
|
|
<!-- 产品详情 -->
|
|
<view class="product">
|
|
<block v-for="(item, index) in goodsObj.content" :key="index">
|
|
<image :src="item" mode="widthFix"></image>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<!-- footer -->
|
|
<view class="footer">
|
|
<button class="btn" size="default" @click="buyGoods">立即购买</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { goods } from '@/apis/interfaces/goods'
|
|
import userAuth from '@/public/userAuth'
|
|
export default {
|
|
data() {
|
|
return {
|
|
loding : true,
|
|
goodsObj: {},
|
|
identity: ''
|
|
};
|
|
},
|
|
created() {
|
|
goods(this.$Route.query.id || 16).then(res=>{
|
|
console.log(res)
|
|
this.loding = false
|
|
this.goodsObj = res
|
|
this.identity = res.identity.id || ''
|
|
})
|
|
},
|
|
methods:{
|
|
// 提交购买单
|
|
buyGoods(){
|
|
let token = this.$store.getters.getToken
|
|
if(token == ''){
|
|
let userLogin = new userAuth()
|
|
userLogin.Login()
|
|
return
|
|
}
|
|
this.$Router.push({
|
|
name: 'Buy',
|
|
params: {
|
|
skuId: this.goodsObj.skus[0].sku_id,
|
|
qty : this.goodsObj.skus[0].number
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content{
|
|
position: relative;
|
|
padding-top: 100%;
|
|
|
|
}
|
|
// 轮播图
|
|
.goods-covers{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
padding-top: 100%;
|
|
.swiper{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
.swiper-item{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
// 商品详情
|
|
.goods-content{
|
|
position: relative;
|
|
z-index: 2;
|
|
background-color: white;
|
|
margin-top: -$margin;
|
|
border-radius: $radius $radius 0 0;
|
|
padding-bottom: calc((#{$padding} * 2) + (env(safe-area-inset-bottom) / 2) + 90rpx);
|
|
padding-bottom: calc((#{$padding} * 2) + (constant(safe-area-inset-bottom) / 2) + 90rpx);
|
|
// 详情
|
|
.header{
|
|
padding: ($padding*2) $padding $padding;
|
|
.title{
|
|
font-size: $title-size;
|
|
font-weight: bold;
|
|
line-height: 50rpx;
|
|
}
|
|
.sub-title{
|
|
line-height: 40rpx;
|
|
font-size: $title-size-sm;
|
|
color: $text-gray;
|
|
padding-bottom: $padding/3;
|
|
}
|
|
.flex-box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 90rpx;
|
|
.price{
|
|
font-weight: bold;
|
|
color: $text-price;
|
|
font-size: $title-size + 14;
|
|
text{
|
|
font-size: 70%;
|
|
}
|
|
width: calc(60% - #{$padding});
|
|
}
|
|
.sales{
|
|
font-size: $title-size-sm;
|
|
color: $text-gray;
|
|
width: 40%;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
// 店铺
|
|
.store{
|
|
position: relative;
|
|
margin: 0 $margin;
|
|
background: #F8F8F8;
|
|
border-radius: $radius/2;
|
|
padding: $padding 200rpx $padding (118rpx + $padding);
|
|
min-height: 98rpx;
|
|
.logo{
|
|
position: absolute;
|
|
left: $margin;
|
|
top: $margin;
|
|
width: 98rpx;
|
|
height: 98rpx;
|
|
border-radius: $radius/2;
|
|
}
|
|
.title{
|
|
font-size: $title-size-lg;
|
|
font-weight: bold;
|
|
line-height: 60rpx;
|
|
color: $text-color;
|
|
}
|
|
// rate
|
|
.openbtn{
|
|
width: 140rpx;
|
|
position: absolute;
|
|
right: $margin;
|
|
top: 50%;
|
|
background: $text-price;
|
|
color: white;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: $title-size-m;
|
|
margin-top: -30rpx;
|
|
}
|
|
}
|
|
// 产品规格
|
|
.size{
|
|
margin-top: $margin;
|
|
border-top: solid 20rpx #F8F8F8;
|
|
border-bottom: solid 20rpx #F8F8F8;
|
|
.size-item{
|
|
position: relative;
|
|
padding: 0 $padding 0 ($padding + 150);
|
|
line-height: 90rpx;
|
|
font-size: $title-size-m;
|
|
&::after{
|
|
position: absolute;
|
|
left: $margin;
|
|
right: 0;
|
|
bottom: 0;
|
|
content: " ";
|
|
height: 1rpx;
|
|
background-color: $border-color;
|
|
}
|
|
&:last-child::after{
|
|
display: none;
|
|
}
|
|
.title{
|
|
position: absolute;
|
|
left: $margin;
|
|
top: 0;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
// 产品详情
|
|
.product{
|
|
image{
|
|
vertical-align: top;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
// 立即购买
|
|
.footer{
|
|
padding: $padding;
|
|
background: white;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 99;
|
|
box-sizing: border-box;
|
|
.btn[size='default']{
|
|
width: 100%;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
background: $text-price;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: $title-size;
|
|
margin-bottom: calc(env(safe-area-inset-bottom) / 2);
|
|
margin-bottom: calc(constant(safe-area-inset-bottom) / 2);
|
|
}
|
|
}
|
|
</style>
|