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

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

	<view class="containers">
		<!-- #ifdef MP-WEIXIN -->
		    <privacy-popup ref="privacyComponent"  @agree-privacy="onAgreePrivacy"
		@reject-privacy="onRejectPrivacy"></privacy-popup> 
		    <!-- #endif -->
		<view class="top">
			<view class="toplogo justify-between align-center">
				<view>
					<view class="fs50">
						Hi ~ {{userName}} 
					</view>
					<view>
						{{userEmail}}
					</view>
				</view>
				<view @click='logout'>
					<u--image :src="logo" width="280rpx" height="41rpx"></u--image>
					<view class="logout label-with-en-inline">
						<view>退出</view>
						<view class="en-text">Logout</view>
					</view>
				</view>
				
			</view>
			<view class="search">
				<view class="justify-between align-center">
					<view class="label-with-en-inline">
						<view>搜索</view>
						<view class="en-text">Search</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, index) in iconList" :key="index">
					<u--image @click="toUrl(item.isyy,item.url)" :src="item.src" width="145rpx" height="149rpx">
					</u--image>
					<view class="icontext label-with-en-inline">
						<view>{{item.text}}</view>
						<view class="en-text">{{item.textEn}}</view>
					</view>
				</view>
			</view>
			<view class="db">
				<view class="label-with-en-inline">
					<view>待办</view>
					<view class="en-text">To Do</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>
										<view class="label-with-en-inline">
											<view>访问日期：{{item.date}}{{ item.end_date?'至'+item.end_date:'' }}</view>
											<view class="en-text">Visit Date: {{item.date}}{{ item.end_date?' to '+item.end_date:'' }}</view>
										</view>
										<view class="label-with-en-inline">
											<view>访问时间：{{item.time?item.time:''}}</view>
											<view class="en-text">Visit Time: {{item.time?item.time:''}}</view>
										</view>
										<!-- <view class="label-with-en-inline">
											<view>访问时段：{{item.visit_time.start_time}}至{{item.visit_time.end_time}}</view>
											<view class="en-text">Visit Time: {{item.visit_time.start_time}} to {{item.visit_time.end_time}}</view>
										</view> -->
										
									</view>
								</view>
								<view class="dbinfo justify-left">
									<view>
										<view class="label-with-en-inline">
											<view>被访人：<text>{{item.accept_admin.name}}</text></view>
											<view class="en-text">Host: <text>{{item.accept_admin.name}}</text></view>
										</view>
										<view class="label-with-en-inline">
											<view>部门：<text>{{item.accept_admin.department.name}}</text></view>
											<view class="en-text">Department: <text>{{item.accept_admin.department.name}}</text></view>
										</view>
										<view class="label-with-en-inline">
											<view>访问区域：<text>{{item.visit_area.name}}</text></view>
											<view class="en-text">Visit Area: <text>{{item.visit_area.name}}</text></view>
										</view>
									</view>
									<view>
										<view class="label-with-en-inline">
											<view>拜访人：<text>{{item.name}}</text></view>
											<view class="en-text">Visitor: <text>{{item.name}}</text></view>
										</view>
										<view class="label-with-en-inline">
											<view>电话：{{item.mobile}}</view>
											<view class="en-text">Phone: {{item.mobile}}</view>
										</view>
										<view v-if="item.type=='1'" class="label-with-en-inline">
											<view>事由：<text>{{item.reason}}</text></view>
											<view class="en-text">Reason: <text>{{item.reason}}</text></view>
										</view>
										<view v-else-if="item.type=='3'" class="label-with-en-inline">
											<view>车牌：<text>{{item.plate}}</text></view>
											<view class="en-text">License Plate: <text>{{item.plate}}</text></view>
										</view>
									</view>
								</view>
								<view  class="company">
									<view class="label-with-en-inline">
										<view>拜访公司：<text>{{item.company_name?item.company_name:''}}</text></view>
										<view class="en-text">Company: <text>{{item.company_name?item.company_name:''}}</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.start_date:''}} 至 {{item.end_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 class="label-with-en-inline">
					<view>请选择邀约访客类型</view>
					<view class="en-text">Please select visitor type</view>
				</view>
				<view class="justify-between">
					<button @click="toForm(1)" class="button-with-en">
						<view>普通访客</view>
						<view class="en-text">General Visitor</view>
					</button>
					<button @click="toForm(2)" class="button-with-en">
						<view>施工人员</view>
						<view class="en-text">Construction Worker</view>
					</button>
					<button @click="toForm(3)" class="button-with-en">
						<view>物流司机</view>
						<view class="en-text">Logistics Driver</view>
					</button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import '@/static/css/bd.css'
	import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue';
	export default{
		components: {
			PrivacyPopup
		},
		data() {
			return {
				userName: "",
				userEmail: "",
				logo: require("../../static/img/logo.png"),
				searchlogo: require("../../static/img/search.png"),
				iconList: [{
						src: require("../../static/img/wdsh.png"),
						text: '我的审核',
						textEn: 'My Review',
						url: "/pages/bd/record?type=mycheck"
					},
					{
						src: require("../../static/img/bfjl.png"),
						text: '被访记录',
						textEn: 'Visit Records',
						url: "/pages/bd/record?type=myrecord"
					},
					{
						src: require("../../static/img/yy.png"),
						text: '邀约',
						textEn: 'Invite',
						url: "/pages/bd/call",
						isyy: true
					},
					{
						src: require("../../static/img/dyyjl.png"),
						text: '代邀约记录',
						textEn: 'Invitation Records',
						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: '没有更多了 / No more data',
					duration: 1000,
					icon: 'none'
				})
			} else {
				//否则，页码+1，继续请求列表
				this.select.page++
				this.loadList()
			}
		},
		methods: {
			onAgreePrivacy() {
				// 用户同意隐私政策
				// 在这里添加您想要执行的代码
				console.log('User agreed to the privacy policy');
			},
			onRejectPrivacy() {
				// 用户拒绝隐私政策
				// 在这里添加您想要执行的代码
				console.log('User rejected the privacy policy');
			},
			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
				let userInfo_bd = uni.getStorageSync('userInfo_Bd')
				if (userInfo_bd) {
					that.userName = userInfo_bd.name
					that.userEmail = userInfo_bd.email ? userInfo_bd.email : ''
					return
				}
			},
			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,
						is_auth:0,
						my_audit:1
					},
					utilSuccess: function(res) {
						that.isEmpty = res.total == 0;
						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,
							duration: 2000,
							icon: 'none',

						})
						setTimeout(function() {
							uni.removeStorageSync('userInfo_BD_token')
							uni.removeStorageSync('userInfo_Bd')
							uni.redirectTo({
								url: '/pages/index/index'
							})
						}, 2000)

					}
				})
			},
			searchList(val) {
				this.select.keyword = val
				this.select.page = 1
				this.loadList()
			},
			logout() {
				uni.showModal({
					title: '提示 / Notice',
					content: '确认退出账号？ / Confirm logout?',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('userInfo_BD_token')
							uni.removeStorageSync('userInfo_Bd')
							uni.redirectTo({
								url: '/pages/index/index'
							})
						} else if (res.cancel) {
							
						}
					}
				});

				
			}
			// scrolltolower(){},

		}
	}
</script>

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

	.toplogo {
		background-color: #4f607e;
		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
	}
	.logout{
		text-align: right;
		font-size: 30rpx;
	}
	/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: #4f607e;
		color: #fff
	}
	.company{
		padding-bottom:30rpx;
		margin-top:-10rpx;
	}
	.company text{
		color: #8f9596;
	}

	.label-with-en-inline {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.en-text {
		font-size: 20rpx;
		color: #8f9596;
		margin-top: 4rpx;
		opacity: 0.8;
	}

	.button-with-en {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx 20rpx;
	}

	.button-with-en .en-text {
		font-size: 18rpx;
		margin-top: 4rpx;
	}

	.popupVisit>view:last-child {
		display: flex;
		justify-content: space-between;
		gap: 10rpx;
	}
</style>