YNEduApp/pages/learnProj/learnProj.vue

<template>
	<view class="page">
    <view class="status-secs">
      <view
        v-for="(item, index) in statusList"
        :key="item.id"
        :class="[ { active: statusCount === item.id } ]"
        @click="chooseStatus(item.id)"
      >
        {{ item.text }}
      </view>
    </view>
    <uni-easyinput prefixIcon="search" v-model="searchIpt" placeholder="请输入项目名称" @iconClick="toggleSearch"></uni-easyinput>
    <view class="drops">
      <u-dropdown ref="uDrop">
        <u-dropdown-item v-model="learnType" title="学习类型" :options="learnTypeRange"></u-dropdown-item>
        <u-dropdown-item v-model="outDateStatus" title="逾期状态" :options="outDateStatusRange"></u-dropdown-item>
        <u-dropdown-item v-model="qualStatus" title="合格状态" :options="qualStatusRange"></u-dropdown-item>
        <u-dropdown-item v-model="signupStatus" title="报名状态" :options="signupStatusRange"></u-dropdown-item>
      </u-dropdown>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        statusCount: 0,
				statusList: [
          { text: '全部', id: 0 },
          { text: '已完成', id: 1 },
          { text: '未完成', id: 2 },
        ],
        searchIpt: '',
        // 四状态
        learnType: 1,
        outDateStatus: 1,
        qualStatus: 1,
        signupStatus: 1,
        // 状态选项
        learnTypeRange: [
          { label: '不学', value: 1 },
          { label: '要学', value: 2 },
        ],
        outDateStatusRange: [
          { label: '临期', value: 1 },
          { label: '过期', value: 2 },
        ],
        qualStatusRange: [
          { label: '合格', value: 1 },
          { label: '不及格', value: 2 },
        ],
        signupStatusRange: [
          { label: '报了', value: 1 },
          { label: '没报', value: 2 },
        ],
			}
		},
		methods: {
      chooseStatus(count) {
        this.statusCount = count
      },
      toggleSearch() {
        console.log(this.searchIpt)
      }
		}
	}
</script>

<style lang="scss">

  .page{

    width: 100vw;
    height: 100vh;
    background-color: #F8F8F8;
    box-sizing: border-box;
    padding: 0 20px;

    .status-secs{

      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 1vh;

      view{

        box-sizing: border-box;
        padding: 0 15rpx;
        font-size: 18px;
        color: #9EA2AC;
        font-weight: bold;

      }

      .active{

        font-size: 28px;
        color: #000;

      }

    }

    .drops{

      width: 100%;
      margin-top: 1vh;
      display: flex;

    }

  }

</style>