feat(发布类型): 新增交通违法分组

pages/record-type/index.vue

@@ -3,15 +3,18 @@
     <view class="wrapper">
       <view class="title">{{ title }}</view>
 
-      <u-grid style="padding: 0 30rpx">
-        <u-grid-item v-for="(item, index) in list" :key="item.id" @click="onListClick(item, index)">
-          <view style="padding: 20rpx 10rpx; display: flex; flex-direction: column; align-items: center; justify-content: flex-start">
-            <image :src="item.img" style="display: block; width: 120rpx; height: 120rpx" />
-            <view style="height: 16rpx" />
-            <text align="center" bold class="grid-text" style="min-height: 128rpx">{{ item.name }}</text>
-          </view>
-        </u-grid-item>
-      </u-grid>
+      <template v-for="list of totalList">
+        <view v-if="list.title" class="category">{{ list.title }}</view>
+        <u-grid style="padding: 0 30rpx">
+          <u-grid-item v-for="(item, index) in list.data" :key="item.id" @click="onListClick(item, index)">
+            <view style="padding: 20rpx 10rpx; display: flex; flex-direction: column; align-items: center; justify-content: flex-start">
+              <image :src="item.img" style="display: block; width: 120rpx; height: 120rpx" />
+              <view style="height: 16rpx" />
+              <text align="center" bold class="grid-text" style="min-height: 128rpx">{{ item.name }}</text>
+            </view>
+          </u-grid-item>
+        </u-grid>
+      </template>
 
       <!-- 取消举报说明
       <view style="height: 120rpx" />
@@ -33,6 +36,14 @@
 </template>
 
 <script>
+const categoryMap = {
+  1: '违反交通信号灯指示',
+  2: '违反标志标线',
+  3: '违章乱停',
+  4: '不文明驾驶',
+  5: '其他违法行为',
+}
+
 export default {
   data() {
     return {
@@ -44,6 +55,8 @@ export default {
 
       isFirstRecordType: 0,
       isFirstRecordTypeId: 0,
+
+      totalList: []
     };
   },
 
@@ -67,6 +80,21 @@ export default {
     async fetchPhotoTaskTypeData() {
       const { list } = await uni.$u.http.get('/api/app/phototasktype/list', { params: { parent_id: this.query.id } });
       this.list = list;
+
+      // 可分类
+      if (list.some(v => v.category > 0)) {
+        this.totalList = Object.keys(categoryMap).map((c, index) => {
+          const category = +c
+          const data = list.filter(v => v.category === category)
+          const res = {
+            title: categoryMap[category],
+            data,
+          }
+          return res
+        })
+        return
+      }
+      this.totalList = [{ data: list }]
     },
 
     async fetchPhotoTaskTypeDetail() {
@@ -121,4 +149,10 @@ export default {
 
 <style scoped lang="scss">
 @import 'index.scss';
+
+.category {
+  padding: 0 40rpx;
+  font-weight: bold;
+  font-size: 36rpx;
+}
 </style>