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

<template>
	<view class="containers">
		<view class="top">
			<view class="toplogo justify-between align-center">
				<view>
					<view class="fs50">
						Hi ~ {{userName}}
					</view>
					<view>
						www.bd.@mail.com
					</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.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 iconList" :key="index">
							<view class="dbitem" @click="toDetail">
								<text class="dbtype">普通访客</text>
								<view class="dbstatus bm">
									<view>待审核</view>
									<view>
										<text>访问时间 2023-03-06</text>
										<text>10:00至11:00</text>
									</view>
								</view>
								<view class="dbinfo justify-left">
									<view>
										<view>被访人：<text>章三</text></view>
										<view>被访人部门：<text>生产</text></view>
										<view>长期访客申请：<text>是</text></view>
									</view>
									<view>
										<view>访问区域：<text>章三</text></view>
										<view>拜访人：<text>生产</text></view>
										<view>事由：<text>是</text></view>
									</view>
								</view>
								<view class="dblong">
									长期访问时间：2023-01-01 至 2023-12-31
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import '@/static/css/bd.css'
	export default {
		data() {
			return {
				userName: "12333",
				logo: require("../../static/img/logo.png"),
				searchlogo: require("../../static/img/search.png"),
				iconList: [{
						src: require("../../static/img/wdsh.png"),
						text: '我的审核',
						url: "/pages/bd/check"
					},
					{
						src: require("../../static/img/bfjl.png"),
						text: '被访记录',
						url: "/pages/bd/record"
					},
					{
						src: require("../../static/img/yy.png"),
						text: '邀约',
						url: "/pages/bd/call"
					},
					{
						src: require("../../static/img/dyyjl.png"),
						text: '代邀约记录',
						url: "/pages/bd/replace"
					}
				],
				data:[],
			}
		},
		onLoad() {

		},
		methods: {
			toUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			toDetail(){
				uni.navigateTo({
					url:'/pages/visit/detail'
				})
			},
			searchList(val) {},
			// 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
	}
	
	
</style>