feat: 填写上报内容页面 接入接口（未完成

pages/record-content/index.scss

@@ -127,8 +127,10 @@
 }
 
 .upload_img {
-  width: 168rpx;
-  height: 168rpx;
+  width: 0;
+  height: 0;
+  //width: 168rpx;
+  //height: 168rpx;
   border-radius: 16rpx;
 }
 
@@ -306,3 +308,12 @@
   font-weight: 400;
   color: #a1a1a1;
 }
+
+.play-wrapper {
+  position: relative;
+  background-color: #000;
+  width: 168rpx;
+  height: 168rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+}

pages/record-content/index.vue

@@ -16,6 +16,7 @@
             </view>
           </view>
         </view>
+
         <view class="step_box">
           <view class="tep_one">
             <image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_didian@2x.png" />
@@ -27,6 +28,7 @@
             <view v-if="address === '点击授权获取位置信息'" class="address_tip">{{ !showActive ? null : '提示：请授权获取位置信息后上传照片或视频' }}</view>
           </view>
         </view>
+
         <view class="step_box">
           <view class="tep_one">
             <image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_zp@2x.png" />
@@ -34,18 +36,25 @@
             <view class="tip">{{ !showActive ? null : '照片至少上传1张/视频20M以下' }}</view>
           </view>
           <view class="photo_list">
-            <view class="photo_item" bindtap="preview" v-for="(item, index) in photoList" :key="item.id">
+            <view class="photo_item" bindtap="preview" v-for="(item, index) in photoList" :key="item.id" @click="previewVideo(item, index)">
               <!-- <image mode="aspectFill" class="upload_img" src="{{item}}" /> -->
-              <image mode="aspectFill" v-if="item.type === 'image'" class="upload_img" :src="item.url" />
-              <video class="upload_img" v-else :src="item.url" :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" />
-              <image v-if="item.type === 'video'" src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />
-              <image catchtap="cancel" mode="aspectFill" class="upload_del" src="/static/icon/ic_zp_del@2x.png" />
+              <image mode="aspectFill" v-if="item.type === 'image'" :src="item.url" style="display: block; width: 168rpx; height: 168rpx; border-radius: 16rpx" />
+
+              <view v-else class="play-wrapper">
+                <video :id="`myVideo${index}`" class="upload_img" :src="item.url" />
+                <image src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />
+              </view>
+              <!--              <video class="upload_img" v-else :src="item.url" :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" />-->
+              <!--              <image v-if="item.type === 'video'" src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />-->
+
+              <image @click.native.stop="cancel(item, index)" mode="aspectFill" class="upload_del" src="/static/icon/ic_zp_del@2x.png" />
             </view>
             <view class="photo_upload" @click="upload">
               <image mode="aspectFill" class="upload_icon" src="/static/icon/upload_icon@2x.png" />
             </view>
           </view>
         </view>
+
         <view class="step_box">
           <view class="tep_one">
             <image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_neirong@2x.png" />
@@ -59,6 +68,7 @@
             </view>
           </view>
         </view>
+
         <view class="step_box">
           <view class="tep_one">
             <image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_neirong@2x.png" />
@@ -68,6 +78,7 @@
             <textarea v-model="content" :placeholder="!showActive ? '' : '具体描述（最少10个字）'" class="write_box" bindinput="content" />
           </view>
         </view>
+
         <!-- 实名上报 -->
         <view class="step_box" v-if="showActive">
           <view class="real">
@@ -112,6 +123,7 @@
             </view>
           </view>
         </view>
+
         <view class="step_box">
           <button type="submit" @click="submitReview" class="btn">{{ !showActive ? null : '上报' }}</button>
         </view>
@@ -133,8 +145,11 @@ export default {
   components: { CertificateTypeActionSheet, UploadActionSheet },
   data() {
     return {
+      query: {},
+      list: [],
+
       week,
-      typeList,
+      typeList: [],
       type: '请选择上报类型',
       show: false,
       category: null,
@@ -163,7 +178,20 @@ export default {
       showActive: true,
     };
   },
+
+  onLoad(query) {
+    console.log(query);
+    this.query = query;
+    this.fetchPhotoTaskTypeData();
+  },
+
   methods: {
+    async fetchPhotoTaskTypeData() {
+      const { list } = await uni.$u.http.get('/api/app/phototasktype/list', { params: { parent_id: this.query.parent_id } });
+      this.typeList = list;
+      this.id = +this.query.detail_id;
+    },
+
     async choice() {
       this.show = !this.show;
     },
@@ -233,11 +261,37 @@ export default {
      * @returns {Promise<void>}
      */
     async onUpload(item) {
+      const upLoad = async (file, type = 'image') => {
+        const [_temp0, { data }] = await uni.request({ url: '/api/qiniu/token' });
+        const [_temp1, { data: res }] = await uni.uploadFile({
+          url: data.upload_url,
+          formData: {
+            token: data.upload_token,
+            file,
+          },
+        });
+        const { key } = JSON.parse(res);
+        this.photoList.push({
+          id: uni.$u.guid(),
+          type,
+          url: `${data.qn_domain}${key}`,
+        });
+        if (type === 'video') {
+          this.photoList = this.photoList.map((value, index) => ({
+            ...value,
+            videoContext: uni.createVideoContext(`myVideo${index}`),
+          }));
+        }
+      };
+
       switch (item.type) {
         case 'image':
           uni.chooseImage({
             success: (result) => {
               console.log(result);
+              result.tempFiles.forEach((value) => {
+                upLoad(value);
+              });
             },
             fail: (result) => {
               console.log(result);
@@ -248,6 +302,7 @@ export default {
           uni.chooseVideo({
             success: (result) => {
               console.log(result);
+              upLoad(result.tempFile, 'video');
             },
             fail: (result) => {
               console.log(result);
@@ -269,7 +324,48 @@ export default {
      * 上报按钮
      * @returns {Promise<void>}
      */
-    async submitReview() {},
+    async submitReview() {
+      const t = (text = '') => uni.$u.toast(text);
+      if (!this.id) return t('请选择上报类型');
+      if (!this.photoList.filter(({ type }) => type === 'image').length) return t('请上传图片');
+      if (!this.title) return t('请输入标题');
+      if (!this.content) return t('请输入内容');
+      if (this.checked) {
+        if (!this.realForm.name) return t('请输入真实姓名');
+        if (!this.realForm.phone) return t('请输入电话号码');
+        if (!this.realForm.certificateType) return t('请选择证件类型');
+        if (!this.realForm.certificateText) return t('请输入证件号码');
+      }
+
+      await uni.$u.http.post('/api/photo_task/create', {
+        title: this.title,
+        type_id: this.id,
+        image_list: this.photoList.filter(({ type }) => type === 'image').join(),
+        video_list: this.photoList.filter(({ type }) => type === 'video').join(),
+        content: this.content,
+        is_real: this.checked,
+        name: this.realForm.name,
+        phone: this.realForm.phone,
+        certificates: this.realForm.certificateType,
+        card_number: this.realForm.certificateText,
+      });
+    },
+
+    // 预览视频
+    previewVideo(item, index) {
+      if (item.type === 'video') {
+        this.photoList.at(index).videoContext.requestFullScreen();
+      }
+      if (item.type === 'image') {
+        uni.previewImage({
+          urls: [item.url],
+        });
+      }
+    },
+
+    cancel(item, index) {
+      this.photoList.splice(index, 1);
+    },
   },
 };
 </script>

pages/record/index.vue

@@ -56,7 +56,7 @@ export default {
 
   onLoad(query) {
     this.fetchPhotoTaskTypeData();
-    this.fetchPhotoTaskTypeDetail();
+    // this.fetchPhotoTaskTypeDetail();
   },
 
   methods: {