mkw-visit-wx/pages/bd/mine.vue

<template>
	<page-meta :page-style="'overflow:'+(callshow?'hidden':'visible')"></page-meta>

	<view class="containers">
		<view class="top">
			<view class="toplogo justify-between align-center">
				<view>
					<view class="fs50">
						Hi ~ {{userName}}
					</view>
					<view>
						{{userEmail}}
					</view>
				</view>
				<u--image :src="logo" width="164rpx" height="65rpx"></u--image>
			</view>
			<view class="search">
				<view class="justify-between align-center">
					<view>搜索</view>
					<u--image :src="searchlogo" width="30rpx" height="27rpx"></u--image>
				</view>
				<view>
					<u--input @confirm="searchList" placeholder=" " prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #c3c9c9">
					</u--input>
				</view>
			</view>
		</view>
		<view class="mine">
			<view class="mineicon justify-between align-center">
				<view v-for="item in iconList">
					<u--image @click="toUrl(item.isyy,item.url)" :src="item.src" width="145rpx" height="149rpx">
					</u--image>
					<view class="icontext">{{item.text}}</view>
				</view>
			</view>
			<view class="db">
				<view>待办</view>

				<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>
		<!-- 弹出选择 访客类型 -->
		<u-popup :show="callshow" mode="center" @close="callshow=false">
			<view class="popupVisit">
				<view>请选择邀约访客类型</view>
				<view class="justify-between">
					<button @click="toForm(1)">普通访客</button>
					<button @click="toForm(2)">施工访客</button>
					<button @click="toForm(3)">物流车辆</button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import '@/static/css/bd.css'
	export default {
		data() {
			return {
				userName: "",
				userEmail: "",
				logo: require("../../static/img/logo.png"),
				searchlogo: require("../../static/img/search.png"),
				iconList: [{
						src: require("../../static/img/wdsh.png"),
						text: '我的审核',
						url: "/pages/bd/record?type=mycheck"
					},
					{
						src: require("../../static/img/bfjl.png"),
						text: '被访记录',
						url: "/pages/bd/record?type=myrecord"
					},
					{
						src: require("../../static/img/yy.png"),
						text: '邀约',
						url: "/pages/bd/call",
						isyy: true
					},
					{
						src: require("../../static/img/dyyjl.png"),
						text: '代邀约记录',
						url: "/pages/bd/record?type=call"
					}
				],
				list: [],
				select: {
					page: 1,
					page_size: 5,
					total: 0,
					audit_status: 0,
					keyword: ""
				},
				isEmpty: false,
				callshow: false
			}
		},
		onLoad() {
			this.getBdInfo()
			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: {
			toForm(type){
				uni.navigateTo({
					url:"/pages/visit/addrecord?iscall=call&type="+type
				})
			},
			toUrl(isyy, url) {
				if (isyy) {
					this.callshow = true
				} else {
					uni.navigateTo({
						url: url
					})
				}

			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/bd/bddetail?id=' + id
				})
			},
			getBdInfo() {
				let that = this
				this.util.request({
					api: '/api/admin/auth/me',
					method: "POST",
					requestType: 'bd',
					utilSuccess: function(res) {
						that.userName = res.name
						that.userEmail = res.email
						uni.showToast({
							title: res.errmsg,
							duration: 2000,
							icon: 'none'
						})
					},
					utilFail: function(res) {
						console.log("resss",res)
						uni.showToast({
							title: res,
							duration: 2000,
							icon: 'none'
						})
					}
				})

			},
			loadList() {
				let that = this
				this.util.request({
					api: '/api/admin/visit/index',
					method: "get",
					requestType: 'bd',
					data: {
						page: this.select.page,
						page_size: this.select.page_size,
						audit_status: this.select.audit_status,
						keyword: this.select.keyword
					},
					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'
						})
					}
				})
			},
			searchList(val) {
				this.select.keyword = val
				this.select.page = 1
				this.loadList()
			},
			// scrolltolower(){},

		}
	}
</script>

<style scoped>
	.containers {
		background-color: #eceefe;
		min-height: 100vh;
		/* padding: 0 40rpx;
		padding-bottom:20px; */
	}

	.toplogo {
		background-color: #044ed7;
		padding: 40rpx 30rpx;
		padding-bottom: 130rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.fs50 {
		font-size: 50rpx
	}

	.search {
		margin: 40rpx 20rpx;
		margin-top: -90rpx;
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 30rpx;

	}

	.search>view:first-child {
		font-size: 30rpx;
		color: #8f9596;
		padding: 0 20rpx 15rpx 40rpx
	}

	/deep/ .search>view:last-child .u-input {
		border-radius: 20rpx !important;
		background-color: #eceefe;
		border: none;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
		padding: 20rpx !important;
	}

	.mine {
		padding: 40rpx 30rpx;
		padding-top: 0;
	}

	.mine .mineicon {
		font-size: 24rpx;
	}

	.mine .icontext {
		text-align: center;
		margin-top: 15rpx
	}

	/deep/ .u-empty {
		min-height: 30vh;
	}

	/deep/ .u-popup__content {
		width: 80%;
		background: #fff;
		padding: 47rpx;
		text-align: center;
		
	}

	.popupVisit>view:first-child{
		margin-bottom:20rpx
	}
	.popupVisit>view button{
		padding: 0 20rpx;
		background-color: #044ed7;
		color:#fff
	}
</style>