CBB3/pages/guild/proItem.vue

<style lang="scss">
	.m-app{width:100vw}
	/* 头部 */
	.app-header{width:100%;position:fixed;top:0px;left:0px;z-index: 10;background: transparent;}
	.app-header-bg{background: #ffffff;}
	.mp-padding{width:100%;height:50px;}
	button.item-back-btn{width:30px;height:30px;}
	button.item-back-btn image{width:30px;height:30px;}
	.mp-title{color:transparent;font-size: 16px;font-weight: 700;text-align: center;width:100%;height:50px;line-height: 50px;position: relative;}
	.mp-title text{ width: 80%; white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;display: inline-block;}
	.mp-title button.item-back-btn{position: absolute;left:12px;top:10px}
	.app-header-bg .mp-title{color:#333333;}
	
	/* 滚动内容区域 */
	scroll-view.mid-body{width:100vw;height:calc(100vh - 50px);}
	/* 轮播 */
	.item-swiper{width:100vw;height:100vw;background:#ffffff;position: relative;}
	.swiper-count{height:24px;line-height: 24px; position: absolute;right:15px;bottom:15px;padding: 0px 10px;border-radius: 12px;background: rgba(0,0,0,0.5);}
	.swiper-count text{color:#f7f7f7;font-size: 14px;height:14px;line-height: 14px;}
	.swiper-count text:first-child{font-weight: 700;}
	swiper{width:100vw;height:100vw;}
	swiper-item{width:100vw;height:100vw;}
	image.swiper-item-img{width:100vw;height:100vw;}
	.item-transparent{background: transparent;}
	
	.item-info{
		background: linear-gradient(90deg, #ef4e51, #f4713b);
		bottom: 0;
		padding: 17px;
		.price{
			font-size: 28px;
			font-weight: 700;
			color: #fff;
			text{font-size: 16px;}
		}
		.info-time{
			font-size: 16px;
			font-weight: 600;
			color: #fff;
		}
	}
	.goods-item{
		padding: 36rpx;
		.title{
			font-size: 18px;
			font-weight: 700;
			color: #1d2023;
		}
		.people{
			margin-top: 17px;
			image{
				width: 12px;
				height: 12px;
			}
			.name{
				margin-left: 6px;
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
			}
		}
		.tmr{
			image{width: 24px;height: 24px;}
			margin-top: 9px;
			font-size: 13px;
			color: #333;
		}
	}
	.explain{
	    padding: 22px 19px 26px 19px;
		 .explain-title {
		    font-size: 18px;
		    font-weight: 6	00;
		    color: #333;
		}
		.explain-main{
			margin-top: 29px;
		}
		.explainImage-box{
			display: flex;
			justify-content: space-around;
			align-items: center;
			.explain-image-item{
				width: 24px;
				height: 22px;
			}
			.explain-image-jiant{
				width: 21px;
				height: 5px;
			}
		}
		
		.explainfont-box{
			margin-top: 11px;
			display: flex;
			justify-content: space-between;
			.explain-font-item{
			    font-size: 16px;
			    font-family: PingFang SC;
			    font-weight: 500;
			    color: #333;
			}
		}
	}
	
	
	
	/** 商品新详情**/
	.goods-info{background: #fff;margin: 10px;padding: 8px;border-radius: 10px;}
	.goods-info .price-info{}
	.goods-info .price-info .price{color: #fd3b39;font-size: 28px;font-weight: 600;}
	.goods-info .price-info .price text{color: #fd3b39;font-size: 16px;font-weight: 400;}
	.goods-info .price-info .old-price{margin-left: 10px;color: #98999A;font-size: 14px;font-weight: 400;text-decoration: line-through;}
	.goods-info .title{color: #333;font-size: 16px;font-weight: 600;}
	.goods-info .foot{margin-top: 10px;}
	.goods-info .address{color: #ACACAC;font-size: 14px;font-weight: 400;}
	.goods-info .add-icon{width: 14px;height: 14px;margin-right: 3px;}
	.goods-info .sales{color: #ACACAC;font-size: 14px;font-weight: 400;}
	.green-info{border:1px solid #fd3b39;border-radius: 10px; padding: 5px;background: rgba(1, 149, 96, 0.2);margin-top: 10px;}
	.green-info image{width: 20px;height: 20px;margin-right: 4px;}
	.green-info .tinfo{font-size: 12px;color: #fd3b39;}
	.green-info .tinfo text{font-weight: bold;}
	
	/* 商品详情 */
	.item-desc{width:100%;}
	.item-desc-title{width:100%;height:40px;}
	.desc-title{font-size: 15px;height:15px;line-height: 15px;text-align: center;color:#333333;margin: 0px 10px;}
	.desc-title-left{width:40px;height:1px;background: #E6E6E6}
	.desc-title-right{width:40px;height:1px;background: #E6E6E6}
	.item-desc-img{width:100%}  
	.item-desc-img image{width:100%}
	.item-desc-img text{ position: absolute; width: 100%; text-align: center; font-size: 1px; color: #ccc;}
		
	.app-footer{
		bottom: 0;
		height: 80px;
		background: #fff;
		width: calc(100% - 20px);
		padding-left: 10px;
		position: fixed;
		.left{
			.item{
				image{width: 21px;height: 21px;}
				.text{
					margin-top: 8px;
					font-size: 13px;
					font-weight: 600;
					color: #333;
				}
			}
			
			.line{
				margin: 0 20rpx;
				width: 1px;
				height: 30px;
				background: #c0bfc0;
			}
		}
		
		.app-btn{
			margin-left: 22px;
			height: 45px;
			background: #fd3b39;
			border-radius: 11px;
			text-align: center;
			font-size: 19px;
			font-weight: 700;
			color: #fff;
			line-height: 45px;
		}
		
		.app-btn-no{
			margin-left: 22px;
			height: 45px;
			background: #ccc;
			border-radius: 11px;
			text-align: center;
			font-size: 19px;
			font-weight: 700;
			color: #000;
			line-height: 45px;
		}
	}	

</style>
<template>
	<view class="m-app">
		<view class="app-header" :class="topShow ? 'app-header-bg' : ''">
			<view class="top-bar" :style="'height:' + barHeight + 'px'"></view>
			<view class="mp-padding fx-r fx-bc" >
				<view class="mp-title">
					<button class="nt item-back-btn fx-r fx-bc fx-ac" @tap="tapBack">
						<image src="/static/img/icon_item_back.png"></image>
					</button> 
					<text>{{data.name || ""}}</text>
				</view>
			</view>
		</view>
		<scroll-view class="mid-body clearfix" scroll-y="true" @scrolltolower="loadMoreData" @scroll="tapScroll">
			<view class="item-swiper">
				<swiper autoplay='true' @change="tapSwiperChange" indicator-dots="true" indicator-color='rgba(255,255,255,.3)' indicator-active-color='rgba(255,255,255,1)'>
					<swiper-item @tap="tapPhone('img',index)" v-for="(item,index) in data.imgs">
						<image  class="swiper-item-img" :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view v-if="data.is_stepinto == 1" style="background: #333; color: #FFF; border-radius: 4px;font-size: 10px; margin-left: 4px;padding: 0px 4px;position: absolute;bottom: 10px;left: 10px;">跨境产品</view>
				<view class="swiper-count fx-r fx-bc"><text>{{swiperCurrent+1}}</text><text>/{{data.imgs.length?data.imgs.length:''}}</text></view>
			</view>
			<view class="item-info fx-r fx-bc">
				<view class="price"><text>￥</text>{{ data.hanging_price || 0 }}</view>
				<view class="fx-g1"></view>
				<view class="info-time" v-if="data.radd_time > 0">
					<text v-if="data.isToday == 1">挂售时间：{{ utils.date('H:i',data.radd_time) }} - {{ utils.date('H:i',data.rend_time) }}</text>
					<text v-if="data.isToday == 0">挂售日期：{{ utils.date('Y-m-d',data.radd_time) }}</text>
				</view>
			</view>
			
			<view class="goods-item fx-r">
				<view class="title fx-h">
					<view class="title">{{ data.name || "" }}</view>
					<view class="people fx-r fx-bc">
						<image src="/static/img/people.png"></image>
						<view class="name">归属人：{{ data.user_nickname }}</view>
					</view>
				</view>
				<view class="fx-g1"></view>
				<view class="tmr" @tap="tapHistory">
					<image src="/static/img/suyuan.png"></image>
					<view class="t">溯源</view>
				</view>
			</view>
			
			<view class="explain">
				<view class="explain-title">商品挂售说明</view>
				<view class="explain-main">
					<view class="explainImage-box">
						<image src="/static/img/au_order.png" class="explain-image-item"></image>
						<image src="/static/img/au_next.png" class="explain-image-jiant"></image>
						<image src="/static/img/au_pay.png" class="explain-image-item"></image>
						<image src="/static/img/au_next.png" class="explain-image-jiant"></image>
						<image src="/static/img/au_fang.png" class="explain-image-item"></image>
						<image src="/static/img/au_next.png" class="explain-image-jiant"></image>
						<image src="/static/img/au_torder.png" class="explain-image-item"></image>
					</view>
					<view class="explainfont-box">
						<view class="explain-font-item">挂售商品</view>
						<view class="explain-font-item">支付货款</view>
						<view class="explain-font-item">卖家发货</view>
						<view class="explain-font-item">挂售/提货</view>
					</view>
				</view>
			</view>
			
			<!-- 商品详情 -->
			<view class="item-desc">
				<view class="item-desc-title fx-r fx-bc fx-ac">
					<text class="desc-title-left"></text>
					<text class="desc-title">详情</text>
					<text class="desc-title-right"></text>
				</view>
				<view class="item-desc-img">
					<image @tap="tapPhone('descImg',index)" mode="widthFix" :src="item" v-for="(item,index) in data.imgDesc" />
					
				</view>
			</view>
		</scroll-view>
		<!-- app底部 -->
	    <view class="app-footer fx-r fx-bc">
			<view class="left fx-r">
				<view class="item fx-h fx-bc fx-ac" @tap="tapOpen" data-url="/pages/user/detail/anticipate">
					<image src="/static/img/au_juan.png"></image>
					<view class="text">易趣卷</view>
				</view>
				<view class="line"></view>
				<view class="item fx-h fx-bc fx-ac" @tap="$refs.customer.open()">
					<image src="/static/img/au_kefu.png"></image>
					<view class="text">客服</view>
				</view>
			</view>
			<template v-if="data.isGoSale == 0">
				<button @tap="utils.Tip('未开售')" class="fx-g1 nt app-btn">{{ countdownTime }}</button>
			</template>
			
			<template v-if="data.isGoSale == 1">
				<button @tap="tapBuy" v-if="data.is_buy == 0" class="fx-g1 nt app-btn">立即抢购</button>
				<button @tap="utils.Tip('已抢购')" v-if="data.is_buy == 1" class="fx-g1 nt app-btn-no">已抢购</button>
			</template>
			
			
		</view>
		<customer-wiget ref="customer"></customer-wiget>	
	</view>
</template>
<script>
	import customerWiget from '@/components/ui-public/customer-wiget.vue';
	import {mapState,mapMutations } from 'vuex';
	var idsValue = {};
	var buyType = "";
	export default {
		computed: mapState(['user']),
		components: {
			customerWiget
		},
		data() {
			return {
				id : 0,//产品ID
				auction_id : 0,
				topShow:false,
				swiperCurrent:0,
				barHeight:0,
				data:{
					title : '加载中..',
					imgDesc:[],
					imgs:[],
					radd_time : 0,
					rend_time : 0,
					is_buy : 0,
					isGoSale : -1
				},
				countdownTime : "00:00:00",
				isSubmit : false
			}
		},
		onLoad(option){  
			this.id = option.id || 0;
			this.auction_id = option.auction_id || 0;
			uni.setNavigationBarTitle({title:'加载中..'});
			this.barHeight = this.$device.statusBarHeight;
			this.initView();
			setInterval(this.interval,1000);
		},
		methods: {
			/**
			 * 加载更多
			 * @param {Object} e
			 */
			loadMoreData: function(e) {
				console.log(e)
			},
			/**
			 * 下拉下载
			 * @param {Object} e
			 */
			tapScroll:function(e){
				let scrollTop=e.detail.scrollTop;
				if(scrollTop < 120 && this.topShow)
					this.topShow = false
				if(scrollTop > 120 && !this.topShow)
				    this.topShow = true;
				return;
			},
			tapSwiperChange:function(ev){
				this.swiperCurrent = ev.detail.current;
			},
			
			tapHistory:function(){
				uni.navigateTo({
					url:"/pages/guild/history?proId=" + this.id
				})
			},
			
			/**
			 * 
			 */
			tapBuy:function(){
				if(this.user == null) {
					uni.navigateTo({ url:"../login/index"});
					return;
				}
				this.submitPost();
			},
			
			/**
			 * 提交数据
			 */
			submitPost:function(){
				if(this.isSubmit) return;
				this.isSubmit = true;
				uni.showLoading({title: '抢单中..'});
				var post = {};
				post.id = this.id;
				post.auction_id = this.auction_id;
				this
					.request
					.post("auctionProRush",post)
					.then(res=>{
						uni.hideLoading();
						console.log(res,'88888')
						if(res.code == 200) {
							if(res.data.state == 1) {
								uni.redirectTo({
									url: "buySuccess"
								})
							} else {
								this.data.is_buy = 1;
							}
							uni.$emit("rushBuy",{id : this.id});
						} else {
							this.utils.showAlert({title: '系统提示',content: res.msg});
						}
						this.isSubmit = false;
					})
					.catch(err=>{
						console.log(err);
						this.isSubmit = false;
						uni.hideLoading();
						this.utils.showAlert({title: '系统提示',content: "加载失败，重新点击尝试！"});
					});
			},
			/**
			 * 获取配置数据
			 */
			initView: function(isPull = true) {
				var that = this;
				if(isPull) {
					uni.showLoading({title: '获取数据中..'});
				}
				var post = {};
				post.id = this.id;
				post.auction_id = this.auction_id;
				this
					.request
					.post("auctionProItem",post)
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							this.data = res.data;
							uni.setNavigationBarTitle({title:res.data.name});
							this.interval();
						} else {
							this.utils.showAlert({title: '系统提示',content: res.msg});
						}
					})
					.catch(err=>{
						console.log(err);
						uni.hideLoading();
						this.utils.showAlert({title: '系统提示',content: "加载失败，重新点击尝试！"});
					});
				
			},
			
			interval:function(){
				if(this.data.isGoSale != 0) return;
				let time = this.data.radd_time - this.utils.strtotime();
				if(time >= 0) {
					this.countdownTime = this.utils.countdown(time);
					this.data.isGoSale = 0;
				} else {
					this.data.isGoSale = 1;
				}
			},
			
			/**
			 * 打开详情
			 * @param {Object} type
			 * @param {Object} index
			 */
			tapPhone:function(type,index){
				var ImgAr = [];
				if(type == 'img') {
					ImgAr = this.data.imgs;
				}
				
				if(type == 'descImg') {
					ImgAr = this.data.imgDesc;
				}
				
				uni.previewImage({
					current:index,
					urls:ImgAr
				});
			},
			/**
			 * 打开其他主图2
			 */
			tapPhone2:function(){
				var ImgAr = [this.selData.img];
				uni.previewImage({
					current:0,
					urls:ImgAr
				});
			},
			/**
			 * 打开其他页面
			 * @param {Object} ev
			 */
			tapOpen: function(ev) {
				let url = ev.currentTarget.dataset.url;  
				this.utils.navigateTo(url);
			},
			/**
			 * 返回首页
			 */
			tapHome:function(){
				uni.switchTab({
					url : "../index/index"
				});
			},
			
			/**
			 * 返回上一页	
			 */
			tapBack: function() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>