feat: 题库选择

src/pages.json

@@ -49,6 +49,16 @@
 					"style": {
 						"navigationBarTitleText": "题库详情"
 					}
+				},
+				{
+					"path": "select-category",
+					"name": "learnSelect-category",
+					"style": {
+						"navigationBarTitleText": "题库选择",
+						"navigationStyle": "custom",
+						"enablePullDownRefresh": false,
+						"disableScroll": true
+					}
 				}
 			]
 		},

src/pages/learn/select-category.vue

+<template>
+  <view class="select-category">
+    <u-navbar
+      back-icon-color="#333333"
+      background="#FFFFFF"
+      title="题库选择"
+      titleColor="#191C27"
+      :border-bottom="false"
+      title-bold
+    ></u-navbar>
+    <!-- 标签列表 -->
+    <view class="elect-category-content">
+      <view v-for="(item, key) in labels" :key="key" class="label-list">
+        <view class="label-title" v-if="key == secondKey">
+          <!-- 品类title -->
+          <view>{{ titles[key] }}</view>
+        </view>
+        <view class="label-content">
+          <view v-for="(label, ind) in item" :key="ind" class="label-item">
+            <!-- 选中为蓝底，非选中状态为白底 -->
+            <view
+              :class="[
+                'label-normal',
+                { 'selected': label.id == selected[key].id, 'wide': key == secondKey },
+              ]"
+              @click="handleClick(key, label)"
+            >
+              <text class="label-text">{{ label.name }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 标签加载中 -->
+      <view class="tag-loading-view" v-if="tapLoading">
+        <u-loading mode="flower"></u-loading>
+      </view>
+      <!-- 无供应商、无品牌 -->
+      <view
+        class="tag-loading-view"
+        v-else-if="item.length <= 0 && titles[key]"
+      >{{ "暂无" + selected[key1].name }}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+const key1 = '1'
+const key2 = '2'
+export default {
+  data() {
+    return {
+      firstLoad: true, // 初次加载
+      labels: {
+        // 标签列表
+        [key1]: [], // 一级品类列表
+        [key2]: [], // 二级品类列表
+      },
+      selected: {
+        // 选中的标签
+        [key1]: {}, // 选中的一级品类
+        [key2]: {}, // 选中的二级品类
+      },
+      tapLoading: true,
+    }
+  },
+  computed: {
+    // 品类title
+    titles() {
+      return {
+        [key1]: '', // 一级品类title
+        [key2]: this.selected[key1].name, // 二级品类title
+      }
+    },
+    secondKey() {
+      return key2
+    },
+  },
+  onLoad(e) {
+    this.loadLabel(key1) // 获取一级标签
+  },
+  methods: {
+    // 选中标签
+    handleClick(key, label) {
+      this.selected[key] = label
+      console.log('------handleClick--------')
+      if (key == key1) {
+        // 选中一级标签
+        this.selected[key2] = {} // 清空选二级标签
+        this.loadLabel(key2, label.id) // 获取二级标签
+      } else {
+        // 选中二级标签
+        this.$u.route({
+          type: 'redirect',
+          url: 'pages/learn/select-add',
+          param: {},
+        })
+      }
+    },
+    /**
+     * @description 获取合作商或品牌列表
+     * @property {String} key 哪一级品类
+     * @property {String} selectedId 需要获取二级品类列表时，选中的一级品类的id
+     */
+    loadLabel(key, selectedId) {
+      // async loadLabel(key, selectedId) {
+      //   this.tapLoading = true;
+      //   let param = {};
+      //   if (key == key2) {
+      //     // 获取二级品类列表
+      //     param.selectedId = selectedId; // 选中的一级品类
+      //   }
+      //   let res = await this.$u.api.fileLabel(param);
+      //   this.tapLoading = false
+      //   if (res && res.code == 200) {
+      //     this.labels[key] = res.data || [];
+
+      for (var i = 0; i < 10; i++) {
+        console.log(i)
+        // 测试模拟多条数据
+        this.labels[key].push({
+          name: '特种作业人员',
+          id: i,
+        })
+      }
+
+      // 初次进入页面，需要获取二级品类列表
+      if (this.firstLoad && key == key1) {
+        this.firstLoad = false
+        if (this.labels[key].length > 0) {
+          this.selected[key] = this.labels[key][0]
+          this.loadLabel(key2, this.selected[key].id)
+        }
+      }
+      //   }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.select-category {
+  background-color: #f4f5f7;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #f4f5f7;
+
+  .elect-category-content {
+    padding: 0 0 30rpx 24rpx;
+    height: 100%;
+    overflow: auto;
+    .label-list {
+      margin-bottom: 20rpx;
+      .label-title {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #191c27;
+        margin-bottom: 30rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .label-content {
+        .label-item {
+          padding-right: 22rpx;
+          padding-bottom: 24rpx;
+          flex-shrink: 0;
+          display: inline-block;
+          .label-normal {
+            height: 104rpx;
+            width: 200rpx;
+            font-size: 26rpx;
+            color: #9ea5bb;
+            background-color: #ffffff;
+            border-radius: 12rpx;
+            padding-left: 48rpx;
+            padding-right: 48rpx;
+            text-align: center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-weight: bold;
+            .label-text {
+              word-break: break-all;
+            }
+            &.wide {
+              padding-left: 24rpx;
+              padding-right: 24rpx;
+              width: 340rpx;
+              height: 128rpx;
+              color: #5a6073;
+            }
+            &.selected {
+              color: #ffffff;
+              background-color: #2953ff;
+            }
+          }
+        }
+      }
+    }
+    .tag-loading-view {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 400rpx;
+      color: #999999;
+      text-align: center;
+      position: absolute;
+      width: 100%;
+      padding-right: 11rpx;
+    }
+  }
+}
+</style>