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">
	   还剩{{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);
		
	},
	watch:{
		secondNum(val){
			if(val<=0){
				clearImmediate(this.timer)
				this.timer = null;
				this.isDeadLine = true;
			}
		}
	},
	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>