feat: 选择类型页 接入接口

pages/record-type/index.vue

@@ -4,9 +4,9 @@
       <view class="title">交通违法举报</view>
 
       <u-grid style="padding: 0 30rpx">
-        <u-grid-item v-for="(item, index) in iconList" :key="item.id">
+        <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.icon" style="display: block; width: 120rpx; height: 120rpx" />
+            <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>
@@ -19,24 +19,41 @@
       </view>
       <view style="height: 60rpx" />
 
-      <u-modal :show="showReport" title="举报说明" :content="content" @confirm="onReportConfirm" />
+      <u-modal :show="showReport" title="举报说明" @confirm="onReportConfirm">
+        <rich-text :nodes="content" />
+      </u-modal>
     </view>
   </view>
 </template>
 
 <script>
-import { iconList } from '@/pages/record-type/mock';
-
 export default {
   data() {
     return {
-      iconList,
-      content:
-        '1.本平台仅接收荣县行政区域内的交通违法网上举报，且违法行为发生后30日内举报有效。 \n2.举报人不得在驾驶过程中或其他有碍交通安全的情况下进行举报。 \n3.举报人提供的照片和视频应当客观真实，并通过合法途径、合法方式取得。举报人应当如实描述违法行为发生时间、地点，违法机动车号牌、外观和具体违法行为，并能够与举报视频相互印证。缺乏上述要素的，公安交警部门依法不予以受理 \n4.对多次举报失实，恶意举报的举报人，经查证属实的，公安机关交通管理部门不再受理其举报。故意捏造违法事实陷害他人、以举报为手段敲诈勒索的，将按相关规定纳入公民社会征信体系。涉嫌违法犯罪的，依法追究法律责任。 \n5.不属于本平台接受范围的交通违法举报以及对交通执法管理的意见建议，可以联系属地公安交警部。 \n6.举报人在拍摄交通违法视频前，应当仔细阅读各类违法举报的拍摄要点及要求，拍摄的视频文件大小不超过50M。 \n7.如使用行车记录仪视频进行举报，切勿进行压缩、转码等操作，应剪辑行车记录仪设备存储卡内原始视频后上传，以确保上传视频清晰。',
+      query: {},
+      list: [],
+      content: '',
       showReport: false,
     };
   },
+
+  onLoad(query) {
+    this.query = query;
+    this.fetchPhotoTaskTypeData();
+    this.fetchPhotoTaskTypeDetail();
+  },
+
   methods: {
+    async fetchPhotoTaskTypeData() {
+      const { list } = await uni.$u.http.get('/api/app/phototasktype/list', { params: { parent_id: this.query.id } });
+      this.list = list;
+    },
+
+    async fetchPhotoTaskTypeDetail() {
+      const { detail } = await uni.$u.http.get('/api/app/phototasktype/detail', { params: { id: this.query.id } });
+      this.content = detail.desc;
+    },
+
     async onReportClick() {
       console.log('onReportClick');
       this.showReport = true;
@@ -45,6 +62,16 @@ export default {
     async onReportConfirm() {
       this.showReport = false;
     },
+
+    onListClick(item, index) {
+      uni.$u.route({
+        url: 'pages/record-content/index',
+        params: {
+          parent_id: this.query.id,
+          detail_id: item.id,
+        },
+      });
+    },
   },
 };
 </script>

pages/record/index.vue

@@ -4,8 +4,14 @@
       <view class="title">选择发布类型</view>
 
       <view class="list">
-        <view v-for="(item, index) in list" :key="item.id" class="item" :style="{ marginTop: index === 0 ? 0 : '60rpx', background: item.background }">
-          <image class="item-icon" :src="item.icon" />
+        <view
+          v-for="(item, index) in list"
+          :key="item.id"
+          class="item"
+          :style="{ marginTop: index === 0 ? 0 : '60rpx', background: item.background }"
+          @click="onListClick(item, index)"
+        >
+          <image class="item-icon" :src="item.img" />
           <view class="item-text">{{ item.name }}</view>
         </view>
       </view>
@@ -20,21 +26,18 @@
 </template>
 
 <script>
-const list = [
+const _list = [
   {
-    id: uni.$u.guid(),
     name: '交通违法举报',
     icon: '/static/icon/ic-wf@2x.png',
     background: 'linear-gradient(156deg, #ffaeae 0%, #fe4d4d 100%)',
   },
   {
-    id: uni.$u.guid(),
     name: '城市不文明行为举报',
     icon: '/static/icon/ic-bwm@2x.png',
     background: 'linear-gradient(156deg,#8bbcff 0%, #0d71ff 100%)',
   },
   {
-    id: uni.$u.guid(),
     name: '交通设施故障上报',
     icon: '/static/icon/ic-gz@2x.png',
     background: 'linear-gradient(156deg,#ffdc8b 0%, #ffb00d 100%)',
@@ -44,13 +47,29 @@ const list = [
 export default {
   data() {
     return {
-      list,
+      list: [],
       content:
         '1.本平台仅接收荣县行政区域内的交通违法网上举报，且违法行为发生后30日内举报有效。 \n2.举报人不得在驾驶过程中或其他有碍交通安全的情况下进行举报。 \n3.举报人提供的照片和视频应当客观真实，并通过合法途径、合法方式取得。举报人应当如实描述违法行为发生时间、地点，违法机动车号牌、外观和具体违法行为，并能够与举报视频相互印证。缺乏上述要素的，公安交警部门依法不予以受理 \n4.对多次举报失实，恶意举报的举报人，经查证属实的，公安机关交通管理部门不再受理其举报。故意捏造违法事实陷害他人、以举报为手段敲诈勒索的，将按相关规定纳入公民社会征信体系。涉嫌违法犯罪的，依法追究法律责任。 \n5.不属于本平台接受范围的交通违法举报以及对交通执法管理的意见建议，可以联系属地公安交警部。 \n6.举报人在拍摄交通违法视频前，应当仔细阅读各类违法举报的拍摄要点及要求，拍摄的视频文件大小不超过50M。 \n7.如使用行车记录仪视频进行举报，切勿进行压缩、转码等操作，应剪辑行车记录仪设备存储卡内原始视频后上传，以确保上传视频清晰。',
       showReport: false,
     };
   },
+
+  onLoad(query) {
+    this.fetchPhotoTaskTypeData();
+    this.fetchPhotoTaskTypeDetail();
+  },
+
   methods: {
+    async fetchPhotoTaskTypeData() {
+      const { list } = await uni.$u.http.get('/api/app/phototasktype/list', { params: { parent_id: 0 } });
+      this.list = list.map((value, index) => ({ ...value, background: _list[index].background }));
+    },
+
+    async fetchPhotoTaskTypeDetail() {
+      const { detail } = await uni.$u.http.get('/api/app/phototasktype/detail', { params: { id: 0 } });
+      console.log(detail);
+    },
+
     async onReportClick() {
       console.log('onReportClick');
       this.showReport = true;
@@ -59,6 +78,10 @@ export default {
     async onReportConfirm() {
       this.showReport = false;
     },
+
+    onListClick(item, index) {
+      uni.$u.route({ url: 'pages/record-type/index', params: { id: item.id } });
+    },
   },
 };
 </script>