hz-zhhq-app/pages/myTodoList/myTodoList.vue

<template>
	<view>
		<view class="btns-header">
		    <text :class="state" @click="changRound(1)" id="isDai"></text>
		    <text class="left">待审批</text>
		    <text :class="state2" @click="changRound(2)" id="notDai"></text>
		    <text class="">已审批</text>
		</view>
		<view class="details">
			<view v-if="num==2" class="detail" @click='toDetail("/pages/visitorAppointment/visitorAppointment")'>
				<view class="detail_header">
					<text class="blueSign"></text>
					<text class="font-tilte">访客预约</text>
					<text class="slect_icon"></text>
					<text class="font-result"> 已同意 </text>
				</view> 
				<view class="detail_msg">
					<view>
						<text>被访人： </text>
						<text class="infoSpan">王五</text>
					</view> 
					<view>
						<text>被访时间： </text>
						<text class="infoSpan">12-03 02:00~12-03 06:00</text>
					</view> 
					<view>
						<text>申请人： </text>
						<text class="infoSpan">刘斌</text>
					</view>
					<view class="submitTime">
						<text>申请时间： </text>
						<text class="infoSpan">2019-11-29 12:07:59</text>
					</view>
				</view> 
			</view>
			
			<view class="detail"  v-if="num==2" @click='toDetail("/pages/visitorAppointment_test/visitorAppointment_test")'>
				<view class="detail_header">
					<text class="blueSign"></text>
					<text class="font-tilte">访客预约</text>
					<text class="slect_icon"></text>
					<text class="font-result_2"> 已拒绝 </text>
				</view> 
				<view class="detail_msg">
					<view>
						<text>被访人： </text>
						<text class="infoSpan">李四</text>
					</view> 
					<view>
						<text>被访时间： </text>
						<text class="infoSpan">12-03 02:00~12-03 06:00</text>
					</view> 
					<view>
						<text>申请人： </text>
						<text class="infoSpan">六六</text>
					</view>
					<view class="submitTime">
						<text>申请时间： </text>
						<text class="infoSpan">2019-11-29 12:07:59</text>
					</view>
				</view> 
			</view>
			
			<view class="detail"  v-if="num==1" @click='toDetail("/pages/visitorAppointment_test2/visitorAppointment_test2")'>
				<view class="detail_header">
					<text class="blueSign"></text>
					<text class="font-tilte">访客预约</text>
					<text class="slect_icon"></text>
					<text class="font-result_2"> 待审批 </text>
				</view> 
				<view class="detail_msg">
					<view>
						<text>被访人： </text>
						<text class="infoSpan">李四</text>
					</view> 
					<view>
						<text>被访时间： </text>
						<text class="infoSpan">12-03 02:00~12-03 06:00</text>
					</view> 
					<view>
						<text>申请人： </text>
						<text class="infoSpan">六六</text>
					</view>
					<view class="submitTime">
						<text>申请时间： </text>
						<text class="infoSpan">2019-11-29 12:07:59</text>
					</view>
				</view> 
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state:"round show",
				state2:"round",
				num:1
			}
		},
		methods: {
			toDetail(url){
				uni.navigateTo({
					url
				})
			},
			changRound(num){
				if(num==1){
					this.state2 = "round";
					this.state = "round show";
					this.num=1;
				}else if(num == 2){
					this.state2 = "round show";
					this.state = "round";
					this.num=2;
				}
			}
		}
	}
</script>

<style>
	page{
	    height: 100%;
	    width: 100%;
	    background: #f5f5f5;
	    overflow-y: scroll;
	}
/* 圆点 */
.btns-header {
    background: #fff;
    height: 2.633333rem;
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: .9rem;
    font-size: .785333rem;
  }
  .btns-header .round {
    width: .62rem;
    height: .62rem;
    border-radius: 50%;
    background: #cccccc;
    margin-right: .666667rem;
  }
  .btns-header .left {
    margin-right: 4.453333rem;
  }
  .btns-header .show {
    background: #00c277;
  }
  .btns-header .show {
    background: #00c277;
  }
  
	  
  .details{
	  padding: .566667rem .566667rem .566667rem .566667rem;
	  
  }
  .detail{
	  margin-bottom: .566667rem;
	  background: #ffffff;
	  border-radius: .333333rem;
  }
  .detail_header{
	  height: 2.573333rem;
  }
  .detail_header text{
  	 margin-top: 1.2rem;
  }
  .detail_header .blueSign {
      height: .573333rem;
      width: .156667rem;
      background: #00c277;
      display: inline-block;
      margin-right: .213333rem;
  }
  .detail_header .font-tilte{
	  font-size: .785333rem;
  }
  .detail_header .slect_icon{
    width: .426667rem;
    height: .426667rem;
    /* margin-left: .266667rem; */
    border-radius: .053333rem;
    border: .013333rem solid #999;
    overflow: hidden;
  }
  .detail_header .font-result{
	 font-size: .635333rem;
	 color: #00c277;
	 margin-left: 8.6rem;
  }
  .detail_header .font-result_2{
  	 font-size: .635333rem;
  	 color: #DD524D;
  	 margin-left: 8.6rem;
  }
  .detail_msg view{
  	  margin-top: 0.1rem;
	  margin-bottom: 0.4rem;
  }
  .detail_header text,
  .detail_msg view text{
	  color: #333333;
	  font-size: .745333rem;
	  margin-left: .826667rem;
  }
  .detail_header{
	  border-bottom: .033333rem solid #BEBEBE;
  }
</style>