hezhiying/pages/qianggou/productDetails.vue

<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>