323 lines
8.0 KiB
Vue
323 lines
8.0 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 产品封面 -->
|
|
<view class="goods-swiper">
|
|
<swiper :indicator-dots="false" @change="current = $event.detail.current + 1">
|
|
<swiper-item v-for="(item, index) in goods.pictures" :key="index">
|
|
<view class="swiper-cover">
|
|
<image :src="item" mode="aspectFill" />
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="swiper-pages">
|
|
{{current}}/{{goods.pictures.length}}
|
|
</view>
|
|
</view>
|
|
<!-- 详情 -->
|
|
<view class="main">
|
|
<view class="title">{{goods.name}}</view>
|
|
<view class="sub-title">{{goods.description}}</view>
|
|
<view class="box-flex">
|
|
<view class="price">
|
|
{{goods.price.show}}<text>DT积分</text>
|
|
</view>
|
|
<view class="sales" v-if="goods.skus">库存量{{goods.skus[0].stock}}</view>
|
|
</view>
|
|
<view class="unit" v-if="goods.skus && goods.skus[0].unit !== ''">
|
|
规格 : {{goods.skus[0].unit}}
|
|
</view>
|
|
|
|
<!-- 店铺信息 -->
|
|
<view class="shopInfo" @click="toShop(goods.shop.shop_id)" v-if="goods.shop">
|
|
<view class="shopInfo-title-left">
|
|
<image class="shop-logo" :src="goods.shop.cover" mode="aspectFill" />
|
|
<view class="shop-title">
|
|
<view class="shop-titl" >{{goods.shop.name}}</view>
|
|
<view> 店铺评分:<span class='no'>5.0</span> <text style="padding-left: 20rpx;">服务态度:<span class='no'>5.0</span></text> </view>
|
|
</view>
|
|
</view>
|
|
<view class="shopInfo-title-right" >全部商品 {{goods.shop.goods_count || 0}} <uni-icons type="right" color="grey"/></view>
|
|
</view>
|
|
|
|
<view class="imgs">
|
|
<block v-for="(item, index) in goods.content" :key="index">
|
|
<image :src="item" mode="widthFix"></image>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<!-- 立即购买 -->
|
|
<view class="footer">
|
|
<view @click="toShop(goods.shop.shop_id)" class=" shop"><uni-icons type="shop" size="26" color="grey"/>店铺</view>
|
|
<button type="default" hover-class="none" @click="buy">立即购买</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { goods } from '@/apis/interfaces/store'
|
|
import userAuth from '@/public/userAuth'
|
|
export default {
|
|
data() {
|
|
return {
|
|
current: 1,
|
|
goods : {
|
|
pictures : [],
|
|
name : "",
|
|
description : "",
|
|
content : [],
|
|
price : {
|
|
show: 0
|
|
}
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getGoods()
|
|
},
|
|
methods:{
|
|
getGoods(){
|
|
goods(this.$Route.query.id).then(res => {
|
|
console.log(res);
|
|
this.goods = res
|
|
})
|
|
},
|
|
buy(){
|
|
if(this.$store.state.token === ''){
|
|
const Auth = new userAuth()
|
|
Auth.Login()
|
|
return
|
|
}
|
|
this.$Router.push({
|
|
name: 'StoreBuy',
|
|
params: {
|
|
skuId: this.goods.skus[0].sku_id
|
|
}
|
|
})
|
|
},
|
|
toShop(id){
|
|
this.$Router.push({
|
|
name: 'ShopDetail',
|
|
params: {
|
|
ShopId: id
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.goods-swiper{
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 110%;
|
|
background: $window-color;
|
|
&> swiper{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
.swiper-cover{
|
|
width: 100%;
|
|
height: 100%;
|
|
image{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.swiper-pages{
|
|
position: absolute;
|
|
bottom:20rpx;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 9;
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
color: white;
|
|
font-size: $title-size-m;
|
|
text-shadow: 0 5rpx 5rpx rgba($color: #000000, $alpha: .02);
|
|
}
|
|
}
|
|
// 详情
|
|
.main{
|
|
position: relative;
|
|
z-index: 9;
|
|
margin-top: -20rpx;
|
|
background: white;
|
|
border-radius: $radius $radius 0 0;
|
|
box-shadow: 0 0 10rpx 10rpx rgba($color: #000000, $alpha: .02);
|
|
padding-bottom: ($padding*2) + 90;
|
|
.hr{
|
|
position: relative;
|
|
min-height: 1rpx;
|
|
margin: 0 $margin;
|
|
text-align: center;
|
|
text{
|
|
position: relative;
|
|
z-index: 1;
|
|
color: $text-gray;
|
|
font-size: $title-size-m;
|
|
background: white;
|
|
padding: 0 $padding;
|
|
}
|
|
&::after{
|
|
content: " ";
|
|
background: $border-color;
|
|
width: 100%;
|
|
height: 1rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
}
|
|
}
|
|
.title{
|
|
padding: $padding;
|
|
font-weight: bold;
|
|
font-size: $title-size + 14;
|
|
}
|
|
.sub-title{
|
|
padding: 0 $padding;
|
|
font-size: $title-size-m;
|
|
color: $text-gray;
|
|
}
|
|
.box-flex{
|
|
padding: $padding;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.price{
|
|
font-weight: bold;
|
|
color: $text-price;
|
|
font-size: $title-size + 10;
|
|
text{
|
|
font-size: 60%;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.sales{
|
|
font-size: $title-size-m;
|
|
color: $text-gray;
|
|
}
|
|
}
|
|
.unit{
|
|
padding: 30rpx;
|
|
font-size: $title-size-m;
|
|
color: #333;
|
|
border-top:solid 20rpx #f9f9f9;
|
|
}
|
|
.imgs{
|
|
image{
|
|
vertical-align: top;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.shopInfo{
|
|
border-top: solid $padding #f9f9f9;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding:$padding $padding - 10;
|
|
border-bottom: solid 10rpx #f9f9f9;
|
|
.shopInfo-title-left{
|
|
width: 500rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
.shop-logo{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 10rpx;
|
|
border:solid 1rpx #f9f9f9;
|
|
}
|
|
.shop-title{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
font-size: 26rpx;
|
|
margin-left: $margin;
|
|
color: #999;
|
|
width:370rpx;
|
|
.no {
|
|
color: $text-price;
|
|
padding-left: 4rpx;
|
|
}
|
|
|
|
.shop-titl{
|
|
font-size: 34rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
margin-bottom: 6rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.shopInfo-title-right{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
font-size: 26rpx;
|
|
color: #222;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
// 购买
|
|
.footer{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: $padding;
|
|
z-index: 98;
|
|
background: white;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
// linear-gradient(to top, white 86%, rgba(255,255,255,.0))
|
|
.shop{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
font-size: 24rpx;
|
|
color: $text-gray;
|
|
}
|
|
button{
|
|
background: $main-color;
|
|
margin-left: 60rpx;
|
|
flex: 1;
|
|
color: white;
|
|
border-radius: $radius-lg;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
font-weight: bold;
|
|
font-size: $title-size;
|
|
&::after{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|