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

<template>
	<view class="containers">
		<view class="dbbtns justify-between">
			<text v-for="item in btnList" :class="{'active':btnActive===item.value}" @click="btnActive=item.value">
			{{item.label}}
			</text>
			<!-- <text >已完成</text>
			<text>待完成</text> -->
		</view>
		<view class="db">
			<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>
</template>

<script>
	import '@/static/css/bd.css'
	export default{
		data(){
			return{
				iconList:[1,2,3,4],
				btnActive:"all",
				btnList:[
					{
						label:"全部",
						value:'all'
					},
					{
						label:"已完成",
						value:'complete'
					},
					{
						label:"待完成",
						value:'going'
					}
				]
			}
		},
		onLoad(){
			
		},
		methods:{
			toDetail(){
				uni.navigateTo({
					url:'/pages/visit/detail'
				})
			}
		}
	}
</script>

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