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.
363 lines
7.9 KiB
363 lines
7.9 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">
|
|
还剩{{finalSecondNum}}抢购
|
|
</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,
|
|
finalSecondNum:"",
|
|
timer:null,
|
|
};
|
|
},
|
|
onLoad(params) {
|
|
this.getDetailsHandle(params.id);
|
|
|
|
},
|
|
beforeDestroy(){
|
|
clearImmediate(this.timer)
|
|
this.timer = null;
|
|
},
|
|
watch:{
|
|
secondNum(val){
|
|
if(val<=0){
|
|
clearImmediate(this.timer)
|
|
this.timer = null;
|
|
this.isDeadLine = true;
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
dateDifference(expire_time){//返回秒数
|
|
var timestamp = Date.parse(new Date());//当前时间
|
|
timestamp=timestamp/1000;
|
|
expire_time=parseInt(expire_time/1000);//过期时间
|
|
return expire_time-timestamp;
|
|
},
|
|
//秒数转化为时分秒
|
|
formatSeconds(value) {
|
|
var secondTime = parseInt(value);// 秒
|
|
var minuteTime = 0;// 分
|
|
var hourTime = 0;// 小时
|
|
if(secondTime > 60) {//如果秒数大于60，将秒数转换成整数
|
|
//获取分钟，除以60取整数，得到整数分钟
|
|
minuteTime = parseInt(secondTime / 60);
|
|
//获取秒数，秒数取余，得到整数秒数
|
|
secondTime = parseInt(secondTime % 60);
|
|
//如果分钟大于60，将分钟转换成小时
|
|
if(minuteTime > 60) {
|
|
//获取小时，获取分钟除以60，得到整数小时
|
|
hourTime = parseInt(minuteTime / 60);
|
|
//获取小时后取余的分，获取分钟除以60取余的分
|
|
minuteTime = parseInt(minuteTime % 60);
|
|
}
|
|
}
|
|
var result = "" + parseInt(secondTime) + "秒";
|
|
|
|
if(minuteTime > 0) {
|
|
result = "" + parseInt(minuteTime) + "分" + result;
|
|
}else{
|
|
result = "00时" + "00" + "分" + result;
|
|
}
|
|
if(hourTime > 0) {
|
|
result = "" + parseInt(hourTime) + "时" + result;
|
|
}else{
|
|
result = "00时" + result;
|
|
}
|
|
// console.log('result',result);
|
|
return result;
|
|
},
|
|
|
|
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(()=>{
|
|
let secondNum = finishTime--;
|
|
this.secondNum = secondNum;
|
|
this.finalSecondNum = this.formatSeconds(this.secondNum)
|
|
},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>
|
|
|