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.
343 lines
7.0 KiB
343 lines
7.0 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?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" @click="buyHandle" v-if="isDeadLine">
|
|
立即抢购
|
|
</view>
|
|
<view class="page-footer" v-if="!isDeadLine">
|
|
还剩{{secondNum}}秒抢购
|
|
</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,
|
|
},
|
|
secondNum:"",
|
|
isDeadLine:true,
|
|
timer:null,
|
|
};
|
|
},
|
|
onLoad(params) {
|
|
this.getDetailsHandle(params.id);
|
|
|
|
},
|
|
beforeDestroy(){
|
|
clearImmediate(this.timer)
|
|
this.timer = null;
|
|
},
|
|
methods: {
|
|
dateDifference(expire_time){//返回秒数
|
|
var timestamp = Date.parse(new Date());//当前时间
|
|
timestamp=timestamp/1000;
|
|
expire_time=parseInt(expire_time/1000);//过期时间
|
|
return expire_time-timestamp;
|
|
},
|
|
// dateCalculation (second) { //返回天、时、分
|
|
// if (second > 0) {
|
|
// var day = 0;
|
|
// var hour = 0;
|
|
// var minute = 0;
|
|
// var secondNum = 0;
|
|
// var data = {};
|
|
// minute = Math.floor(second / (60))
|
|
// if (parseInt(secondNum) > 60) {
|
|
// minute = parseInt(secondNum / 60);
|
|
// minute %= 60; //算出有多分钟
|
|
// }
|
|
// if (parseInt(minute) > 60) {
|
|
// hour = parseInt(minute / 60);
|
|
// minute %= 60; //算出有多分钟
|
|
// }
|
|
// if (parseInt(hour) > 24) {
|
|
// day = parseInt(hour / 24);
|
|
// hour %= 24; //算出有多分钟
|
|
// }
|
|
// data.day = day;
|
|
// data.hour = hour;
|
|
// data.minute = minute;
|
|
// return data;
|
|
// }
|
|
// },
|
|
timestampToTime(val) {
|
|
var date = new Date();
|
|
var Y = date.getFullYear() + '-';
|
|
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
|
|
var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
|
|
var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
|
|
var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
|
|
var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
|
|
if(val){
|
|
return Y+M+D+h+m+s;
|
|
}else{
|
|
return Y+M+D;
|
|
}
|
|
},
|
|
|
|
getDetailsHandle(id){
|
|
getgoodsDetail({id:id,custom: { auth: true }}).then(res=>{
|
|
this.swiperList.push({
|
|
url: res.data.image
|
|
})
|
|
let timeNum = res.data.warehouse.start
|
|
// let timeNum = "16:02";
|
|
let time = this.timestampToTime()+timeNum+":00"
|
|
let finishTime = this.dateDifference(new Date(time).getTime())
|
|
if(finishTime>0){
|
|
this.timer = setInterval(()=>{
|
|
this.secondNum = finishTime--
|
|
},1000)
|
|
this.isDeadLine = false;
|
|
}else{
|
|
clearImmediate(this.timer)
|
|
this.timer = null;
|
|
this.isDeadLine = true;
|
|
}
|
|
this.detailsObj = Object.assign({},this.detailsObj,res.data)
|
|
})
|
|
},
|
|
buyHandle(){
|
|
uni.setStorageSync('qgPro',this.detailsObj)
|
|
uni.navigateTo({
|
|
url:'/pages/ConfirmOrder/ConfirmOrder'
|
|
})
|
|
},
|
|
|
|
}
|
|
};
|
|
</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>
|
|
|