CBB3/pages/gz/index.vue

<style lang="scss">
	.app-bg{
		position: absolute;
		image{width: 100vw;height: 61vw;}
	}
	.app-h{
		height: 61vw;
	}
	.app-body{
		position: relative;
		top: -30vw;
		padding: 0px 40rpx;
	}
	.app-top-inner {
		background: #FFFFFF;
		border-radius: 20px;
		.avatar{
			position: relative;
			top: -60rpx;
			.img{
				border: 2px solid #F9F9F9;border-radius: 50%;
				image{width: 140rpx;height: 140rpx;border-radius: 50%;margin-left: 1px;margin-top: 1px;}
			}
			
			.gz-tag{
				position: absolute;
				bottom: 16px;
				image{width: 48px;height: 15px;}
			}
			.nickname{
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}
	
		.top-foot{
			width: 100%;
			margin-bottom: 30rpx;
			.item{
				width: calc(33% - 1px);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.count{
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}
				.label{
					font-weight: 500;
					font-size: 24rpx;
					color: #787878;
					margin-top: 10rpx;
				}
			}
			.line{
				width: 1px;
				height: 42rpx;
				background: #999999;
				opacity: 0.38;
				
			}
		}
		
		
	}
	
	
	.pannel{
		background: #FFFFFF;
		border-radius: 20px;
		padding: 30rpx;
		margin-top: 10px;
		.top{
			margin-bottom: 20rpx;
			.logo{
				width: 100rpx;
				height: 100rpx;
			}
			.info{
				margin-left: 20rpx;
				width: calc(100% - 120rpx);
				.title{
					font-weight: bold;
					font-size: 34rpx;
					color: #081734;
				}
				
				.time{
					margin-top: 20rpx;
					image{width: 30rpx;height: 27rpx;}
					.label{
						font-weight: 500;
						font-size: 22rpx;
						color: #666666;
						margin-left: 10rpx;
					}
					.v{font-size: 22rpx;color: #333;}
				}
				
			}
		}
	
		.status{
			padding: 20rpx 0;
			.people{
				image{width: 24rpx;height: 22rpx;margin-right: 10rpx;}
				.label{color: #666666;font-size: 26rpx;}
				.value{font-size: 26rpx;color: #000;margin-left: 4px;}
			}
			border-bottom: 1px solid #f1f1f1;
		}
		
		.gz-foot{
			padding-top: 20rpx;
			.left{
				font-weight: 500;
				font-size: 28rpx;
				color: #303133;
				.count{
					font-weight: bold;
					font-size: 32rpx;
					color: #FF4C4C;
				}
			}
			
			.right{
				.label{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
				image{
					width: 20rpx;
					height:20rpx
				}
			}
		}
		
	}
	
	
	.sbtn{
		margin-top: 10px;
		.btn{
			width: calc(50% - 10rpx);
			margin-right: 10rpx;
			margin-left: 0;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 60rpx 0;
			&:nth-child(2n){
				margin-right: 0rpx;
				margin-left : 10rpx;
			}
			image{
				width: 70rpx;
				height: 70rpx;
			}
			.text{
				font-weight: 500;
				font-size: 30rpx;
				color: #4D4D4D;
				margin-top: 24rpx;
			}
			
		}
	}
	
	
</style>
<template>
	<view>
		<view class="app-bg">
			<image src="/static/img/detail_bg.png"></image>
			</view>
		<view class="app-h">
			<uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" left-icon="left" @clickLeft="utils.navigateBack()" fixed title="馆长中心"></uni-nav-bar>
		</view>
		
		<view class="app-body">
			<view class="app-top-inner fx-h fx-bc">
					<view class="avatar fx-h fx-bc fx-ac">
						<view class="img">
							<image  :src="user.avatar || '/static/img/user-avatar1.png'" mode="aspectFill"></image>
						</view>
						<view class="gz-tag">
							<image src="/static/img/gz_tip.png"></image>
						</view>
						<view class="nickname" style="margin-top: 3px;">{{ user.nickname || "" }}</view>
					</view>
					
					<view class="fx-g1"></view>
					<view class="top-foot fx-r fx-bc fx-ac">
						<view class="item">
							<view class="count">{{ data.total.xfMoney || '0.00' }}</view>
							<view class="label">月实耗卷</view>
						</view>
						
					</view>
				</view>
			
				<view class="pannel" v-for="item in data.auction">
					<view class="gzaction">
						<view class="top fx-r">
							<image class="logo" mode="aspectFill" src="/static/img/gz_logo.png"></image>
							<view class="info">
								<view class="title">{{ item.nickname || "" }}({{ item.next_day || "" }})</view>
								<view class="time fx-r" v-if="item.add_time > 0">
									<image src="/static/img/c-time.png"></image>
									<view class="label">预约时间:</view>
									<view class="v">{{ utils.date('H:i',item.add_time) }}~{{ utils.date('H:i',item.end_time) }}</view>
								</view>
								
								<view class="time fx-r" v-if="item.add_time > 0">
									<image src="/static/img/c-time.png"></image>
									<view class="label">入场时间:</view>
									<view class="v">{{ utils.date('H:i',item.radd_time) }}-{{ utils.date('H:i',item.rend_time) }}</view>
								</view>
								
							</view>
						</view>
						<view class="status fx-r fx-bc fx-ac">
							<view class="people fx-r fx-bc fx-ac">
								<image src="/static/img/gz_yy.png"></image>
								<view class="label">预约人数：</view>
								<view class="value">{{ item.booking_count }}人</view>
							</view>
							<view class="fx-g1"></view>
							<view class="people fx-r fx-bc fx-ac">
								<image src="/static/img/gz_dd.png"></image>
								<view class="label">被约单数：</view>
								<view class="value">{{ item.booking_size || "0" }}单</view>
							</view>
						</view>
						
						
						<view class="status fx-r fx-bc fx-ac">
							<view class="people fx-r fx-bc fx-ac">
								<image src="/static/img/gz_yy.png"></image>
								<view class="label">剩余单量：</view>
								<view class="value">{{ item.residue_size || "0" }}单</view>
							</view>
							<view class="fx-g1"></view>
							<view class="people fx-r fx-bc fx-ac">
								<image src="/static/img/gz_dd.png"></image>
								<view class="label">总单数量：</view>
								<view class="value">{{ item.pro_count || "0" }}单</view>
							</view>
						</view>
						
						<view class="status gz-foot fx-r fx-bc fx-ac">
							<view class="people fx-r fx-bc fx-ac">
								<image src="/static/img/gz_yy.png"></image>
								<view class="label">抢光时间：</view>
								<view class="value">{{ item.over_time || "-:-:-" }}</view>
							</view>
							<view class="fx-g1"></view>
							<view class="right fx-r fx-bc" @tap="tapOpen" :data-url="'./booking?id=' + item.id">
								<view class="label">预约记录</view>
								<image src="/static/img/ic_next.png"></image>
							</view>
						</view>
						
					</view>
				</view>
		
				
				<view class="sbtn fx-r">
					<view class="btn fx-bc fx-ac fx-h" @tap="tapOpen" data-url="/pages/gz/order">
						<image src="/static/img/gz_order.png"></image>
						<view class="text">订单管理</view>
					</view>
					
					<view class="btn fx-bc fx-ac fx-h"  @tap="tapOpen" data-url="/pages/gz/disassemble">
						<image src="/static/img/gz_cd.png"></image>
						<view class="text">拆分记录</view>
					</view>
					
					<view class="btn fx-bc fx-ac fx-h" @tap="tapOpen" data-url="/pages/gz/slimming">
						<image src="/static/img/gz_ss.png"></image>
						<view class="text">瘦身记录</view>
					</view>
					
					<view class="btn fx-bc fx-ac fx-h" hidden @tap="tapOpen" data-url="/pages/gz/recycle">
						<image src="/static/img/gz_hs.png"></image>
						<view class="text">回收记录</view>
					</view>
					
					
					<view class="btn fx-bc fx-ac fx-h"  @tap="tapOpen" data-url="/pages/gz/user">
						<image src="/static/img/gz_hs.png"></image>
						<view class="text">馆内成员</view>
					</view>
					
				</view>
		
		</view>
		
		
		
		
	</view>
</template>


<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user']),
		data() {
		    return {
				statusBarHeight : 20,
				data : {
					total : {},
					auction : []
				}
		    }
		}, 
		onLoad(options) {
			this.initView();
		},
		methods: {
			/**
			 * 加载基础配置
			 */
			initView:function(){
				uni.showLoading({ title: '获取数据中..' });
				var post = {};
				post.id = this.orderId;
				this
					.request
					.post("gzInit",post)
					.then(res => {
						uni.hideLoading();
						if(res.code == 200) {
							this.data = res.data;
						} else {
							this.utils.Tip(res.msg);
						}
					})
					.catch(res=>{
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
			
			/**
			 * 打开Open
			 * @param {Object} ev
			 */
			tapOpen: function(ev) {
				let url = ev.currentTarget.dataset.url;
				this.utils.navigateTo(url);
			},
		}
			
}
</script>