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.
266 lines
4.7 KiB
266 lines
4.7 KiB
<template>
|
|
<view class="page" @click="isMore = false">
|
|
|
|
<!-- banner，标题 -->
|
|
<view class="banner-title">
|
|
<!-- banner -->
|
|
<view class="banner">
|
|
<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000"
|
|
duration="500">
|
|
<swiper-item v-for="(item, index) in swiperList" :key="index">
|
|
<image :src="item.url" mode="aspectFill"></image>
|
|
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- 价格 -->
|
|
<view class="price-info">
|
|
<view class="price">
|
|
<text class="min">￥</text>
|
|
<text class="max">{{detailsObj.price}}</text>
|
|
</view>
|
|
<view class="person">
|
|
藏品归属人：{{detailsObj.owner.nickname}}
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<!-- 标题 -->
|
|
<view class="goods-title">
|
|
<text>{{detailsObj.name}}</text>
|
|
</view>
|
|
|
|
|
|
<!-- 商品介绍 -->
|
|
<view class="products-introduction" ref="products" style="text-align: center;" >
|
|
<view class="title">
|
|
<text>图文详情</text>
|
|
</view>
|
|
<view class="parseContent">
|
|
<u-parse :content="detailsObj.content"></u-parse>
|
|
</view>
|
|
</view>
|
|
<!-- 底部 -->
|
|
<view class="page-footer">
|
|
立即抢购
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getgoodsDetail} from '@/common/api.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
swiperList: [],
|
|
detailsObj:{
|
|
content:"",
|
|
createtime:null,
|
|
goods_form:null,
|
|
goods_type:null,
|
|
id:null,
|
|
image:null,
|
|
name:null,
|
|
off_time:null,
|
|
on_time:null,
|
|
owner_id:null,
|
|
price:null,
|
|
status:null,
|
|
updatetime:null,
|
|
warehouse_id:null,
|
|
}
|
|
};
|
|
},
|
|
onLoad(params) {
|
|
this.getDetailsHandle(params.id)
|
|
},
|
|
|
|
methods: {
|
|
getDetailsHandle(id){
|
|
getgoodsDetail({id:id}).then(res=>{
|
|
console.log(res,"99")
|
|
this.swiperList.push({
|
|
url: res.data.image
|
|
})
|
|
this.detailsObj = Object.assign({},this.detailsObj,res.data)
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {
|
|
// position: absolute;
|
|
width: 100%;
|
|
// height: 100%;
|
|
background: #f6f6f6;
|
|
overflow-x: hidden;
|
|
padding-bottom: 120rpx;
|
|
// overflow-y: auto;
|
|
}
|
|
|
|
|
|
/* banner 标题 */
|
|
.banner-title{
|
|
background-color: #FFFFFF;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
/* banner */
|
|
.banner{
|
|
width: 100%;
|
|
height: 750rpx;
|
|
.screen-swiper{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
/* 价格 */
|
|
.price-info{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 4%;
|
|
margin-top:20rpx;
|
|
.price{
|
|
display: flex;
|
|
align-items: center;
|
|
.min{
|
|
color: $base;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
.max{
|
|
color: $base;
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.person{
|
|
font-size:24rpx;
|
|
color:#aaaaaa;
|
|
}
|
|
}
|
|
|
|
|
|
/* 标题 */
|
|
.goods-title{
|
|
padding: 20rpx 4%;
|
|
background-color: #fff;
|
|
margin-top:20rpx;
|
|
text{
|
|
font-size: 28rpx;
|
|
color: #212121;
|
|
}
|
|
}
|
|
|
|
/* 商品介绍 */
|
|
.products-introduction{
|
|
// padding: 0 4% 100rpx;
|
|
margin-top:20rpx;
|
|
.title{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background: #fff;
|
|
margin-bottom:20rpx;
|
|
text{
|
|
font-size: 28rpx;
|
|
color: #212121;
|
|
margin: 0 20rpx;
|
|
}
|
|
}
|
|
.title:before{
|
|
content: "";
|
|
width: 100rpx;
|
|
height: 2rpx;
|
|
background-color: #c0c0c0;
|
|
}
|
|
.title:after{
|
|
content: "";
|
|
width: 100rpx;
|
|
height: 2rpx;
|
|
background-color: #c0c0c0;
|
|
}
|
|
.parseContent{
|
|
width: 100%;
|
|
background-color: #fff;
|
|
padding:50rpx 20rpx;
|
|
}
|
|
}
|
|
/* 底部 */
|
|
.page-footer{
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: calc(100% - 48rpx);
|
|
height: 80rpx;
|
|
background-color: #9f751F;
|
|
margin:0 24rpx;
|
|
border-radius: 10rpx;
|
|
color:#fff;
|
|
.footer-fn{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 40%;
|
|
height: 100%;
|
|
.list{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 50%;
|
|
height: 100%;
|
|
text{
|
|
font-size: 24rpx;
|
|
color: #555555;
|
|
}
|
|
.iconfont{
|
|
font-size: 42rpx;
|
|
color: #212121;
|
|
}
|
|
}
|
|
}
|
|
.footer-buy{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 60%;
|
|
height: 100%;
|
|
.cart-add{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48%;
|
|
height: 70rpx;
|
|
background: #4d9a5e;
|
|
border-radius: 70rpx;
|
|
text{
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
.buy-at{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48%;
|
|
height: 70rpx;
|
|
background: #4d9a5e;
|
|
border-radius: 70rpx;
|
|
text{
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|