117 lines
2.2 KiB
Vue
117 lines
2.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="goods-cover">
|
|
<swiper class="swiper" circular indicator-dots indicator-active-color="#e93340">
|
|
<swiper-item v-for="(item, index) in cover" :key="index">
|
|
<view class="swiper-item">
|
|
<image class="swiper-cover" :src="item" mode="aspectFill" />
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="info">
|
|
<view class="info-item">
|
|
<label>锚定商品</label>
|
|
{{info.name}}
|
|
</view>
|
|
<view class="info-item">
|
|
<label>商品规格</label>
|
|
{{info.skusUnit}}
|
|
</view>
|
|
<view class="info-item">
|
|
<label>提供企业</label>
|
|
{{info.companyName}}
|
|
</view>
|
|
<view class="info-item">
|
|
<label>企业诚信</label>
|
|
{{info.integrity}}
|
|
</view>
|
|
<view class="info-item">
|
|
<label>权证销量</label>
|
|
{{info.sales}}
|
|
</view>
|
|
<view class="info-item">
|
|
<label>发布时间</label>
|
|
{{info.createdAt}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { goods } from '@/apis/interfaces/goods'
|
|
export default {
|
|
data() {
|
|
return {
|
|
cover: [],
|
|
info : {}
|
|
};
|
|
},
|
|
created() {
|
|
goods(this.$Route.query.id).then(res => {
|
|
console.log(res)
|
|
this.cover = res.pictures
|
|
this.info = {
|
|
name : res.name,
|
|
companyName : res.company.name,
|
|
createdAt : res.created_at,
|
|
sales : res.sales,
|
|
integrity : res.company.integrity,
|
|
skusUnit : res.skus[0].unit
|
|
}
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 数权
|
|
.goods-cover{
|
|
width: 100%;
|
|
padding-top: 100%;
|
|
position: relative;
|
|
background: #f5f5f5;
|
|
.swiper{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
.swiper-item{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.swiper-cover{
|
|
@extend .swiper-item;
|
|
}
|
|
}
|
|
}
|
|
// 锚定商品详情
|
|
.info{
|
|
background: white;
|
|
padding: $padding;
|
|
.info-item{
|
|
padding-left: 200rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
position: relative;
|
|
text-align: right;
|
|
font-size: $title-size-m;
|
|
@extend .nowrap;
|
|
label{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 200rpx;
|
|
text-align: left;
|
|
color: $text-gray;
|
|
}
|
|
}
|
|
}
|
|
</style>
|