DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/MealCardRunTab/list.vue

<template>
	<view class="page">
		<view class="mainpage" :class="sideOpen ? 'show' : ''" style="padding-top: 40px;">
			<!-- <l-customlist-banner></l-customlist-banner> -->
			<!-- <view class="records"></view> -->
			
			<!-- 顶部条目/分页信息栏 -->
			<l-customlist-banner @buttonClick="sideOpen = true">共 {{ records }} 条数据</l-customlist-banner> 
			
			<l-scroll-list v-if="ready" @pullDown="pullDown" @toBottom="fetchList()" ref="data">
				<l-customlist :tips="loadState" showTips>
					<l-list>
						<l-list-item v-for="(item, ind) in data" :key="item.Id" @click="itemClick(item)">
							<view style="flex: 1;">
								<view style="display: flex;">
									<view style="flex: 1;color: #303133;font-size: 14px;padding: 8px 0;">
										<view class="wrap1">{{item.bigGroup}}{{item.smallGroup?"-"+item.smallGroup:""}}</view>
										<view style="color: #909399;font-size: 12px;">
											<view>
												餐次：{{item.seg||"--"}}
											</view>
											<view>中心时间：{{item.centralTm||"--"}}</view>
										</view>
									</view>
									<view style="color: #303133;font-weight: 700;font-size: 18px;padding-top: 14px;">
										<view style="text-align: right;">{{item.flowamount}}</view>
										<view style="color: #909399;font-size: 12px;font-weight: 500;">余额：{{item.balance}}</view>
									</view>
								</view>
								<view class="detail" v-if="item.detailVisiable">
									<view>
										<text class="title">账 号</text>
										{{item.accountNo}}
									</view>
									<view>
										<text class="title">姓 名</text>
										{{item.accountName}}
									</view>
									<view>
										<text class="title">部门名称</text>
										{{item.depName}}
									</view>
									<view>
										<text class="title">身份证号</text>
										{{item.personId}}
									</view>
									<view>
										<text class="title">身份名称</text>
										{{item.identiName}}
									</view>
									<view>
										<text class="title">流水类型</text>
										{{item.flowtype}}
									</view>
									<view>
										<text class="title">交易金额</text>
										{{item.flowamount}}
									</view>
									<view>
										<text class="title">余 额</text>
										{{item.balance}}
									</view>
									<view>
										<text class="title">卡 号</text>
										{{item.cardNo}}
									</view>
									<view>
										<text class="title">中心时间</text>
										{{item.centralTm}}
									</view>
									<view>
										<text class="title">中心序号</text>
										{{item.centralNo}}
									</view>
									<view>
										<text class="title">发生时间</text>
										{{item.occurTime}}
									</view>
									<view>
										<text class="title">节点名称</text>
										{{item.node}}
									</view>
									<view>
										<text class="title">营业大组名称</text>
										{{item.bigGroup}}
									</view>
									<view>
										<text class="title">营业小组名称</text>
										{{item.smallGroup}}
									</view>
									<view>
										<text class="title">营业餐次</text>
										{{item.seg}}
									</view>
									<view>
										<text class="title">Pos机序号</text>
										{{item.pos}}
									</view>
								</view>
							</view>
						</l-list-item>
					</l-list>
				</l-customlist>
			</l-scroll-list>
		</view>
		
		
		<!-- 侧边栏，用于设置查询条件 -->
		<scroll-view :class="sideOpen ? 'show' : ''" class="sidepage" scroll-y> 
		  <view v-if="ready" class="padding"> 
		  
		    <l-customlist-sidepage-datefilter 
		      v-model="dateRange"
		      @change="searchChange"
		      title="按时间日期查询: "
		      ref="datefilter"
		      class="margin-bottom"
		    /> 
		  
		    <!-- <l-input 
		      v-model="queryData.LibraryCard"
		      @change="searchChange"
		      title ="借书证"
		      placeholder="按借书证查询"
		    /> -->
		  
		    <!-- 重置查询条件按钮 --> 
		    <view class="padding-tb"> 
		      <l-button @click="reset" line="orange" class="block" block>重置查询条件</l-button> 
		    </view> 
		  </view> 
		</scroll-view> 
		
		<!-- 关闭侧边抽屉按钮 -->
		<view @click="sideOpen = false" :class="sideOpen ? 'show' : ''" class="sideclose"> 
		  <l-icon type="pullright" color="blue" /> 
		</view> 
	</view>
</template>

<script>
	import pickBy from 'lodash/pickBy'
	import mapValues from 'lodash/mapValues'
	export default {
		data() {
			return {
				dateRange:null,
				weekChina: ['一', '二', '三', '四', '五', '六', '日'],
				user: null,
				data: [],
				total: 1,
				records: 0,
				ready: false,
				page: 1,
				rows: 10,
				multipleData: {
					IsPhone:"0" ,
					IdentityCardNo:"",
					startTime:undefined,
					endTime:undefined,
				},
				sideOpen: false,
				loadState: '向下翻以加载更多',
				isReset:false,
				// tips: '加载中...', 
			};
		},
		onUnload() {
			this.OFF('askList');
		},
		methods: {
			async init() {
				this.ON('askList', this.refreshList);
				// 拉取加载列表和数据源
				Promise.all([() => {}]);
				var _this = this;
				this.user = await this.GET_GLOBAL('loginUser');
				this.multipleData.IdentityCardNo = this.user.IdentityCardNo
				this.defaultQueryData = this.COPY(this.multipleData) 
				this.fetchList();
				this.ready = true;
			},
			// 拉取列表
			async fetchList() {
				if(!this.multipleData.IdentityCardNo)return
				if (this.page > this.total)return
				let _this = this;
				let _postParam = {
					pagination: {
						rows: _this.rows,
						page: _this.page,
						sidx: 'centralTm',
						sord: 'desc',
					},
					queryJson: JSON.stringify(_this.multipleData)
				};

				_this.LOADING('加载数据中…')
				_this.HTTP_GET('/Learun/adms/MealCardRunTab/getlist', _postParam, '加载数据时出错').then(res => {
					_this.HIDE_LOADING();
					console.log(res);
					this.data = this.data.concat(res.rows);
					_this.total = res.total;
					_this.records = res.records;
					this.page = res.page + 1;
					this.loadState = res.page >= res.total ? '已加载所有数据' : '向下翻以加载更多';
					// console.log(_this.$refs.data.$el)
					// console.log(_this.$refs.data.$el.getElementsByClassName("customlist"))
					// console.log(_this.data);
				});
			},
			// 列表下拉
			pullDown() {
				this.refreshList().then(() => {
					this.$refs.data.stopPullDown();
				});
			},
			async refreshList() {
				this.page = 1;
				this.total = 1;
				this.data = [];

				this.fetchList();
			},
			
			// 设置搜索条件
			async searchChange() { 
			  if(this.isReset)return
			  const result = {} 
			  
			  // 时间查询相关参数 
			  if (this.dateRange) { 
			    this.multipleData.StartTime = this.dateRange.start 
			    this.multipleData.EndTime = this.dateRange.end 
			  } else{
				  this.multipleData.StartTime = ""
				  this.multipleData.EndTime = ""
			  }
			  // console.log(this.dateRange,"==========")
			  
			  
			  
			  this.searchData = result 
			  await this.refreshList() 
			}, 
			  
			// 点击「清空查询条件」按钮 
			reset() { 
			  this.isReset = true
			  this.$refs.datefilter.changeDateRange('all')
			  this.multipleData = this.COPY(this.defaultQueryData)
			  this.isReset = false
			  this.searchChange()
			}, 
			
			itemClick(item){
				this.data = this.data.map(item1=>{
					if(item1.Id == item.Id){
						item.detailVisiable = item.detailVisiable?false:true
					}
					return item1
				})
			}
		},
		computed: {

		},
		created() {
			this.init();
		}
	};
</script>

<style lang="less" scoped>
	@import '~@/common/css/sidepage.less';
	@import '~@/common/css/customlist.less';

	.page {
		background-color: #fff;
	}

	.page-content {
		margin-top: 39px;
	}

	.records {
		color: #8f8f94;
		background: #ffffff;
		padding: 10px 12px;
		width: 100%;
		vertical-align: middle;
		border-bottom: 0.5px solid #ddd;
		position: fixed;
		top: var(--window-top);
		z-index: 1024;
		border-bottom: 0.5px solid #ddd;
		height: 40px;
		width: 100%;
		box-shadow: 0 0.5px 3px rgba(0, 0, 0, 0.1);
		// background: #f1f1f1;
	}

	.pageBox {
		// margin-top: 34px;
		padding: 5px 15px;
		line-height: 24px;
		border-bottom: 5px solid #f5f5f5;
	}

	.delbtn {
		position: absolute;
		right: 15px;
		bottom: 7px;
		padding: 3px 10px;
		background: #dd524d;
		color: #fff;
		border-radius: 3px;
	}
	
	.wrap1>span{
		// width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.detail{
		font-size: 12px;
		.title{
			display: inline-block;
			width: 100px;
		}
	}
</style>