CBB3/pages/guild/order/info/buyorder.vue

<template>
	<view class="app">
		<view></view>
		<view></view>
		<view class="box-nav">
			<view class="bn fx-r">
				<view v-for="(item,index) of navList" :key="index" class="bn-item fx-h fx-bc fx-ac" @tap="tapChange(index)">
					<view class="bni" :class="[current == index ? 'select':'']">{{item.name}}
						
					</view>
					<view class="ii" v-if="item.count > 0"></view>
				</view>   
			</view>
		</view>
		
		
		<scroll-view scroll-y class="scroll" :style="'height: calc(100vh - 45vw -  ' + statusBarHeight + 'px - 44px);'" @scrolltolower="onBottom">
			<view class="fx-h fx-bc  fx-ac select-time">
				
				
				<view class="week fx-r" hidden>
					<view class="item" :class="item.value == week ? 'on' : ''" @tap="tapWeek(item)" v-for="item in weekAr">{{ item.name }}</view>
					
					
				</view>
				
				
				<view class="date-time fx-r fx-bc  fx-ac" hidden @tap="isDateTime = true">
					<image src="/static/img/datetime.png" class="time"></image>
					<view v-if="dateTime  != ''">{{ dateTime }}</view>
					<view v-else>选择时间</view>
				</view>
			</view>
			
			<view class="app-body">
				<view class="order-item" v-for="item in orderList" @tap="tapItem(item)">
					<view class="order-itop fx-r">
						<view class="order-id">{{ item.order_id }}</view>
						<view class="fx-g1"></view>
						<view class="status" v-if="item.status == 0">已过期</view>
						<view class="status" v-if="item.status == 1">待支付</view>
						<view class="status" v-if="item.status == 2">待审核</view>
						<template v-if="current == 3">
							<view class="status" v-if="item.status == 3">挂售</view>
						</template>
						<template v-else>
							<view class="status" v-if="item.status == 3">完成</view>
						</template>
						
						
					</view>
					
					<view class="goods-item fx-r fx-bc">
						<image :src="item.image" class="img" mode="aspectFill"></image>
						<view class="info">
							<view class="title">{{ item.name }}</view>
							<view class="price">￥{{ item.price }}</view>
						</view>
						<view class="fx-g1"></view>
						<view class="count">x1</view>
					</view>
					<view class="fx-r fx-be order-foot">
						<view class="time"> {{ item.create_time }}</view>
						<view class="fx-g1"></view>
						<view class="ii">共</view>
						<view class="i2">1</view>
						<view class="i2">实付款</view>
						<view class="ii">￥</view>
						<view class="price">{{ item.price }}</view>
					</view>
					
					<view class="order-btn"  v-if="item.status == 1">
						<view v-if="item.overtime_type == 0" class="fx-r" style="font-size:12px;color: #787878;">
							离超时:<countdown  :startTime="utils.date('Y-m-d H:i:s')" :endTime="utils.date('Y-m-d H:i:s',item.end_time_one)" />
						</view>
						
						<view v-if="item.overtime_type == 1" class="fx-r" style="font-size:12px;color: #787878;">
							离过期:<countdown  :startTime="utils.date('Y-m-d H:i:s')" :endTime="utils.date('Y-m-d H:i:s',item.end_time_two)" />
						</view>
						
						<view class="fx-g1"></view>
						<view class="btn" @tap.stop="tapPay(item)">立即支付</view>
						
					</view>
					
					<view class="order-btn"  v-if="item.status == 2">
						<view class="btn" @tap.stop="tapPay(item)">修改凭证</view>
					</view>
					
					
					<view class="order-btn"  v-if="item.status == 3 && current == 3">
						<view class="btn" @tap.stop="tapPutSalt(item)">立即挂售</view>
					</view>
					
				</view>
				
				
				<u-empty
							v-if="orderList.length == 0"
							mode="data"
							icon="/static/img/no-empty.png"
						></u-empty>		
				
				<view v-if="orderList.length > 0">
					<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
						<image src="/static/img/xloading.png"></image>
						<text>正在载入更多...</text>
					</view>
					<view class="loading complete" :hidden="!page.isFoot">已加载全部</view>	
				</view>
				
			</view>
		</scroll-view>		
	
		
		  <u-datetime-picker
					ref="datetimePicker"
					:show="isDateTime"
					v-model="dateTimeNum"
					mode="date"
					closeOnClickOverlay
					@close="isDateTime = false"
					@cancel="isDateTime = false"
					@confirm="tapDateTime"
					
		        ></u-datetime-picker>
		
	</view>
</template>


<script>
	import {mapState,mapMutations } from 'vuex';
	import dayjs from 'dayjs';
	import countdown from "@/components/cz-countdown/cz-countdown.vue";
import { stringify } from 'uuid';
	export default {
		computed: mapState(['user']),
		components: {
			countdown
		},
		name : "buyorder",
		data() {
		    return {
				statusBarHeight : 20,
				page:{
					isFirst:false,
					isLoad:false,
					isFoot:false,
					page:1
				},
			
				isDateTime : false,
				dateTime  : "",
				dateTimeNum  : Number(new Date()),
				week : "",
				weekAr:[
					{name:"周一",value:1},
					{name:"周二",value:2},
					{name:"周三",value:3},
					{name:"周四",value:4},
					{name:"周五",value:5},
					{name:"周六",value:6},
					{name:"周日",value:7}
				],
				
				minData : "",
				orderList: [],
				current : 0,
				navList : [
					{"name" : "全部","code" : "","count" : 0},
					{"name" : "待支付","code" : 1,"count" : 0},
					{"name" : "待审核","code" : 2,"count" : 0},
					{"name" : "待挂售","code" : 4,"count" : 0},
				]
		    }
		},  
		methods: {
			/**
			 * 加载基础配置
			 */
			initView:function(){
				this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
				this.getData(true);
				this.ckInit();
				this.minData = dayjs().subtract(10,'month').format('YYYY-MM-DD');
			},
			
			
			tapChange:function(ev){
				this.current = ev;
				this.getData(true);
			},
			
		
			
			onBottom() {
				if(this.page.isFoot || this.page.isLoad) {
					return;
				}
				this.page.page ++;
				this.getData();			
			},
			/**
			 * 待支付
			 */
			tapPay:function(item){
				uni.navigateTo({
					url:"/pages/guild/order/hallpay?id=" + item.id
				})
			},
			/**
			 * 查看详情
			 * @param {Object} item
			 */
			tapItem:function(item) {
				uni.navigateTo({
					url:"/pages/guild/order/orderItem?id=" + item.id
				})
			},
			/**
			 * 我要挂售
			 * @param {Object} item
			 */
			tapPutSalt:function(item) {
				uni.navigateTo({
					url:"/pages/guild/order/putSalt?id=" + item.id
				});
			},
			/**
			 * 判断是否红点
			 */
			ckInit:function(){
				this
					.request
					.get("auctionOrderInit")
					.then(res => {
						if(res.code == 200) {
							for(let i in this.navList) {
								if(this.navList[i].code == 1) {
									this.navList[i].count = res.data.noCount;
								}
								if(this.navList[i].code == 2) {
									this.navList[i].count = res.data.autoCount;
								}
								if(this.navList[i].code == 4) {
									this.navList[i].count = res.data.gsCount;
								}
							}
						}
					});
			},
			tapDateTime:function(ev){
				this.dateTime = this.utils.date('Y-m-d',ev.value / 1000);
				this.isDateTime = false;
				this.getData(true);
			},
			
			tapWeek:function(item) {
				this.week = item.value;
				this.getData(true);
			},
			
			getData:function(isPull = false){
				if(this.page.isLoad) return;
				this.page.isLoad = true;
				if(isPull) {
					this.page.page = 1;
					this.page.isLoad = false;
					this.page.isFoot = false;
				}
				uni.showLoading({ title: '获取数据中..' });
				var post = {};
				post.page = this.page.page;
				post.type = this.navList[this.current].code;
				post.time = this.dateTime;
				post.week = this.week;
				this
					.request
					.post("auctionOrder",post)
					.then(res => {
						uni.hideLoading();
						this.page.isFirst = true;
						this.page.isLoad = false;
						if(res.code == 200) {
							if(isPull) {
								this.orderList = res.data.list;
							} else {
								this.orderList = this.orderList.concat(res.data.list);
							}
							//是否到底
							if(res.data.list.length != res.data.pageSize) {
								this.page.isFoot = true;
							}   
							
						} else {
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
						//that.CountDowm();
					})
					.catch(res=>{
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
	},
}
</script>	


<style lang="scss">
	.navlist{
		width: 100%;
		background: #fff;
		height: 40px;
	}
	.app-body{
		position: relative;
		z-index: 9;
		.order-item {
		    display: flex;
		    flex-direction: column;
		    background: #fff;
		    margin-top: 9px;
			.order-itop{
				display: flex;
				align-items: center;
				height: 45px;
				font-size: 16px;
				color: #303133;
				position: relative;
				padding: 0 17px;
				.order-id{
					font-size: 16px;
					color:#787878;
				}
				.status{
					color: #dc262b;
					font-size: 16px;
				}
			}
			.goods-item{
				padding: 11px 17px;
				background: #f7f7f7;
				.img{
					width: 68px;
					height: 68px;
				}
				.info{
					margin-left: 20px;
					.title{
						font-size: 18px;
						color: #303133;
						margin-bottom: 20rpx;
					}
					.price{
						display: inline;
						font-size: 16px;
						color: #303133;
					}
					
				}
				.count{
					font-size: 16px;
					color: #787878;
				}
			}
			.order-foot{
				display: flex;
				justify-content: flex-end;
				align-items: baseline;
				padding: 11px 17px;
				font-size: 16px;
				color: #909399;
				border-bottom: 1px solid #f1f1f1;
				.i2{
					margin: 0 4px;
					color: #303133;
				}
				.price{
					font-size: 18px;
					color: #303133;
				}
			}
			
			.order-btn{
				padding: 0 17px;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: 57px;
				position: relative;
					
				.btn{
					width: 91px;
					height: 34px;
					margin: 0;
					margin-left: 13px;
					padding: 0;
					text-align: center;
					line-height: 34px;
					font-size: 14px;
					color: #303133;
					background: #fff;
					border-radius: 100px;
					border: 1px solid #fd3b39;
					border-radius: 28px;
					color: #dc262b;
				}
			}
		}
	}
	
	
	.popinput{
		padding: 20rpx;
	}
	.popinput .time{
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}
	
	.box-nav{width:100%;height:50px;background-color:#fff;border-top:1px #f5f5f5 solid;position: relative;z-index: 9;}
	.bn{align-items:center;height:50px}
	.bn-item{width:25%;text-align:center;position: relative;height:50px;background: #fff;}
	.bni{color:#3F3E3E;font-size:14px;box-sizing:border-box;position:relative;}
	.select{width:100%;color:#ef4034}
	.select::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%,-50%);background:#ef4034;width:24px;height:2px}
	.bn-item .ii{position: absolute;width: 10px;height: 10px;border-radius: 50%;background: red;right: 20%;top: 10px;}
	.select-time{
		padding: 0 10px;
		image{width: 15px;height: 15px;margin-right: 5px;}
		.date-time{
			font-size: 14px;
		}
	}
	.week{width: 100%;}
	.week .item{width: 14%;text-align: center;padding: 10px 0;}
	.week .item.on{color: #ef4034;}
</style>