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.
hezhiying/pages/qianggou/productDetails.vue

364 lines
7.9 KiB

1 year ago
<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">
1 year ago
藏品归属人{{detailsObj.owner?detailsObj.owner.nickname:'-'}}
1 year ago
</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>
<!-- 底部 -->
1 year ago
<view class="page-footer" @click="buyHandle" v-if="isDeadLine">
1 year ago
立即抢购
</view>
1 year ago
<view class="page-footer" v-if="!isDeadLine">
1 year ago
还剩{{finalSecondNum}}抢购
1 year ago
</view>
1 year ago
1 year ago
</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,
1 year ago
},
1 year ago
secondNum:"",
isDeadLine:true,
1 year ago
finalSecondNum:"",
1 year ago
timer:null,
1 year ago
};
},
onLoad(params) {
1 year ago
this.getDetailsHandle(params.id);
},
1 year ago
beforeDestroy(){
clearImmediate(this.timer)
this.timer = null;
},
1 year ago
watch:{
secondNum(val){
if(val<=0){
clearImmediate(this.timer)
this.timer = null;
this.isDeadLine = true;
}
}
},
1 year ago
methods: {
1 year ago
dateDifference(expire_time){//返回秒数
var timestamp = Date.parse(new Date());//当前时间
timestamp=timestamp/1000;
expire_time=parseInt(expire_time/1000);//过期时间
return expire_time-timestamp;
},
1 year ago
//秒数转化为时分秒
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;
},
1 year ago
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;
}
},
1 year ago
getDetailsHandle(id){
1 year ago
getgoodsDetail({id:id,custom: { auth: true }}).then(res=>{
1 year ago
this.swiperList.push({
url: res.data.image
})
1 year ago
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(()=>{
1 year ago
let secondNum = finishTime--;
this.secondNum = secondNum;
this.finalSecondNum = this.formatSeconds(this.secondNum)
1 year ago
},1000)
this.isDeadLine = false;
}else{
clearImmediate(this.timer)
this.timer = null;
this.isDeadLine = true;
}
1 year ago
this.detailsObj = Object.assign({},this.detailsObj,res.data)
})
1 year ago
},
buyHandle(){
uni.setStorageSync('qgPro',this.detailsObj)
uni.navigateTo({
url:'/pages/ConfirmOrder/ConfirmOrder'
})
},
1 year ago
}
};
</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>