mkw-visit-wx/pages/visit/visithistory.vue

<template>
	<view class="containers">
		<!-- <view class="dbbtns justify-between">
			<text v-for="item in btnList" :class="{'active':btnActive===item.value}" @click="btnActiveList(item.value)">
				{{item.label}}
			</text>
		</view> -->
		<view class="db">
			<view class="dblist">
				<view>
					<view v-for="(item, index) in list" :key="index">
						<view class="dbitem" @click="toDetail(item.id)">
							<text class="dbtype">{{item.type_text}}</text>
							<view class="dbstatus bm">
								<view>{{item.audit_status_text}}</view>
								<view>
									<text style="margin-right:10px">访问时间：{{item.date}}</text>
									<text>{{item.visit_time.start_time}}至{{item.visit_time.end_time}}</text>
								</view>
							</view>
							<view class="dbinfo justify-left">
								<view>
									<view>被访人：<text>{{item.accept_admin.name}}</text></view>
									<view>部门：<text>{{item.accept_admin.department.name}}</text></view>
									<view>访问区域：<text>{{item.visit_area.name}}</text></view>
								</view>
								<view>
									<view>拜访人：<text>{{item.name}}</text></view>
									<view>电话：{{item.mobile}}</view>
									<view v-if="item.type=='1'">事由：<text>{{item.reason}}</text></view>
									<view v-else-if="item.type=='3'">车牌：<text>{{item.plate}}</text></view>
								</view>
							</view>
							<view class="dblong">
								<view>长期访客申请：<text>{{item.long_time==0?'否':'是'}}</text></view>
								<text v-if="item.long_time==1">长期访问时间：{{item.start_date}} 至 {{item.end_date}}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="isEmpty">
					<u-empty mode="data">
					</u-empty>
				</view>
			</view>

		</view>



	</view>
</template>

<script>
	import '@/static/css/bd.css'
	export default {
		data() {
			return {
				btnActive: "",
				btnList: [{
						label: "全部",
						value: ''
					},
					{
						label: "已完成",
						value: 4
					},
					{
						label: "待完成",
						value: 0
					}
				],
				list: [],
				select: {
					page: 1,
					page_size: 5,
					total: 0,
					type: ""
				},
				isEmpty:false,
			}
		},
		onLoad() {
			this.loadList()
		},
		onPullDownRefresh() {
			this.select.page = 1
			this.loadList()
			uni.stopPullDownRefresh();
		},
		//上拉加载
		onReachBottom() {
			//当当前列表数据长度>=数据总长度时
			if (this.list.length >= this.select.total) {
				//提示
				uni.showToast({
					title: '没有更多了',
					duration: 1000,
					icon: 'none'
				})
			} else {
				//否则，页码+1，继续请求列表
				this.select.page++
				this.loadList()
			}
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/visit/detail?id=' + id
				})
			},
			btnActiveList(val) {
				this.btnActive = val
				this.select.audit_status = val
				this.loadList()
			},
			loadList() {
				let that = this
				this.util.request({
					api: '/api/mobile/user/my-visit',
					method: "get",
					data: {
						page: this.select.page,
						page_size: this.select.page_size,
						type: this.select.type
					},
					utilSuccess: function(res) {
						if(res.total==0){
							that.isEmpty=true
						}
						if (that.select.page == 1) {
							that.list = res.data
						} else {
							that.list.push(...res.data)
						}
						that.select.total = res.total

					},
					utilFail: function(res) {
						uni.showToast({
							title: res.errmsg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.containers {
		background-color: #eceefe;
		min-height: 100vh;
		/* padding-top:20rpx; */
	}
	/deep/ .u-empty{
		min-height: 60vh;
	}
</style>