CBB3/pages/guild/order/info/outorder.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="app-body">
				
				<template v-for="item in orderList">
					<view class="order-item" v-if="item.pageType == 'order'" @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>
							<view class="status" v-if="item.status == 3">完成</view>
						</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="collection">
							<view class="cinfo fx-r fx-bc ">
								<view class="label">买家</view>
								<image :src="item.buy_avatar" class="avatar"></image>
								<view class="nickname">{{item.buy_nickname }} </view>
								<view class="mobile">{{item.buy_mobile }}</view>
							</view>
							<view class="cinfo fx-r fx-bc ">
								<view class="label">ID号：</view>
								<view class="uid">{{ item.uid }}</view>
							</view>
							
							<view class="cinfo fx-r fx-bs">
								<view class="label">打款凭证:</view>
								<image @tap.stop="tapOpenImg(item.upload_image)" class="proof" mode="aspectFill" :src="item.upload_image"></image>
							</view>	
						</view>
						<template v-if="item.status == 2">
							<view class="order-btn" v-if="item.appeal == 0">
								<view class="btn"  @tap.stop="tapExplain(item)">申述</view>
								<view class="btn" @tap.stop="tapPass(item)">通过</view>
							</view>
							
							<view class="order-btn" v-if="item.appeal == 1">
								<view class="btn"  @tap.stop="tapNoExplain(item)">取消申述</view>
								<view class="btn" @tap.stop="tapPass(item)">通过</view>
							</view>
							
						</template>
						
						
					</view>  
					
					<view class="order-item" v-if="item.pageType == 'buy'">
							<view class="order-itop fx-r">
								<view class="order-id">{{ item.order_id }}</view>
								<view class="fx-g1"></view>
								<view class="status" >售卖中</view>
							</view>
							
							<view class="goods-item fx-r fx-bc">
								<image :src="item.image" class="img" mode="aspectFill"></image>
								<view class="info fx-g1">
									<view class="fm fx-r">
										<view class="title">{{ item.name }}</view>
										<view class="fx-g1"></view>
										<view class="price">￥{{ item.price }}</view>
									</view>
									<view class="mtitle">售卖时间:{{ utils.date('Y-m-d',item.hanging_time) }}</view>
									<view class="mtitle">来源:{{ item.nickname }}</view>
									
								</view>
							</view>
							
							<view class="collection"> 
								
								<view class="cinfo fx-r fx-bc">
									<view class="label">挂售价:{{ item.hanging_price }}</view>
									<view class="tag" v-if="item.lt_type == 1" style="color: red;font-size: 14px; margin-left: 10px;" >[瘦身]</view>
									<view class="tag" v-if="item.lt_type == 2">[拆单]</view>
								</view>	
								<view class="cinfo">
									<view class="label">挂售时间:{{ utils.date('Y-m-d',item.add_time) }}</view>
								</view>	
							</view>
							
							
						</view>  
					
				
				</template>
				
				<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>
	</view>
</template>


<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user']),
		name : "outorder",
		data() {
		    return {
				statusBarHeight : 20,
				page:{
					isFirst:false,
					isLoad:false,
					isFoot:false,
					page:1
				},
				orderList: [],
				current : 0,
				navList : [
					{"name" : "全部","code" : "","count" : 0},
					{"name" : "售卖中","code" : "buy","count" : 0},
					{"name" : "待支付","code" : "nopay","count" : 0},
					{"name" : "待审核","code" : "audit","count" : 0},
				]
		    }
		},  
		methods: {
			/**
			 * 加载基础配置
			 */
			initView:function(){
				this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
				this.getData(true);
				this.ckInit();
			},
			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
				})
			},
			
			/**
			 * 判断是否红点
			 */
			ckInit:function(){
				this
					.request
					.get("auctionOrderSellerInit")
					.then(res => {
						if(res.code == 200) {
							for(let i in this.navList) {
								if(this.navList[i].code == 'buy') {
									this.navList[i].count = res.data.buyCount;
								}
								if(this.navList[i].code == 'nopay') {
									this.navList[i].count = res.data.nopayCount;
								}
								if(this.navList[i].code == 'audit') {
									this.navList[i].count = res.data.auditCount;
								}
							}
						}
					});
			},
			
			
			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;
				this
					.request
					.post("auctionOrderSeller",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});
					});
			},
			
			/**
			 * 打开图片
			 */
			tapOpenImg:function(img){
				uni.previewImage({
					current:0,
					urls:[img]
				});
			},
			/**
			 * 申诉
			 * @param {Object} item
			 */
			tapExplain:function(item) {
				this.utils.showModal("提交申诉后会导订单被冻结，是否继续提交申诉？",()=>{
					uni.showLoading({ title: '提交中..' });
					this
						.request
						.post("auctionPlead",{id : item.id})
						.then(res => {
							uni.hideLoading();
							if(res.code == 200) {
								this.getData(true);
							} else {
								this.utils.Tip(res.msg);
							}
						})
						.catch(res=>{
							uni.hideLoading();
							uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
						});
				});
			},
			/**
			 * 取消申诉
			 * @param {Object} item
			 */
			tapNoExplain:function(item){
				this.utils.showModal("提交撤销申诉后会订单被解冻，是否继续提交取消申诉？",()=>{
					uni.showLoading({ title: '提交中..' });
					this
						.request
						.post("auctionRevoke",{id : item.id})
						.then(res => {
							uni.hideLoading();
							if(res.code == 200) {
								this.getData(true);
							} else {
								this.utils.Tip(res.msg);
							}
						})
						.catch(res=>{
							uni.hideLoading();
							uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
						});
				});
			},
			
			/**
			 * 审核通过
			 * @param {Object} item
			 */
			tapPass:function(item) {
				this.utils.showModal("确定要审核通过吗？",()=>{
					uni.showLoading({ title: '提交中..' });
					this
						.request
						.post("auctionAdopt",{id : item.id})
						.then(res => {
							uni.hideLoading();
							if(res.code == 200) {
								this.getData(true);
							} else {
								this.utils.Tip(res.msg);
							}
						})
						.catch(res=>{
							uni.hideLoading();
							uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
						});
				});
			},
			/**
			 * 查看详情
			 * @param {Object} item
			 */
			tapItem:function(item) {
				uni.navigateTo({
					url:"/pages/guild/order/outOrderItem?id=" + item.id
				})
			},
			
			
	},
}
</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: 14px;
					color:#787878;
				}
				.status{
					color: #dc262b;
					font-size: 14px;
				}
			}
			.goods-item{
				padding: 11px 17px;
				background: #f7f7f7;
				.img{
					width: 68px;
					height: 68px;
				}
				.info{
					margin-left: 20px;
					.title{
						font-size: 16px;
						color: #303133;
						margin-bottom: 20rpx;
					}
					.price{
						display: inline;
						font-size: 14px;
						color: #303133;
					}
					.mtitle{font-size: 12px;color: #787878}
					
				}
				.count{
					font-size: 16px;
					color: #787878;
				}
			}
			.collection{
				padding: 10px;
				border-bottom: 1px solid #f1f1f1;
				.cinfo{
					margin-top: 10px;
					.label{
						font-size: 13px;
						font-weight: 500;
						color: #6d7c88;
					}
					.avatar{
						margin-left: 5px;
						width: 24px;
						height: 24px;
						border-radius: 50%;
					}
					.nickname{
						margin-left: 5px;
						font-size: 17px;
						font-weight: 700;
						color: #333;
					}
					.mobile{
						margin-left: 6px;
						font-size: 12px;
						font-weight: 500;
						color: #999;
					}
					.uid {
						font-size: 13px;
						font-weight: 500;
						color: #6d7c88;
					}
					.proof{
						width: 81px;
						height: 80px;
						border-radius: 10px;
						margin-left: 20px;
					}
				}
				
				
			}
			.order-foot{
				display: flex;
				justify-content: flex-end;
				align-items: baseline;
				padding: 11px 17px;
				font-size: 14px;
				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: 30px;
					margin: 0;
					margin-left: 13px;
					padding: 0;
					text-align: center;
					line-height: 30px;
					font-size: 14px;
					color: #303133;
					background: #fff;
					border-radius: 100px;
					border: 1px solid #fd3b39;
					border-radius: 28px;
					color: #dc262b;
				}
			}
		}
	}
	
	
	.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;}
	
	
</style>