luyin

董国庆

昨天 df64b8405927e7fe3f9cfbae1f628b2d3b7a0f64

 H5/pages/Appeal/Appeal.vue

@@ -146,459 +146,485 @@
</template>

<script>
import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js';
import {
   save,
   getproblem
} from './service.js'
import config from '@/config/index.js'
import voiceInputPopup from '@/components/voiceInputPopup.vue'
import {
   mapActions,
   mapState
} from "vuex";
   import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js';
   import {
      save,
      getproblem
   } from './service.js'
   import config from '@/config/index.js'
   import voiceInputPopup from '@/components/voiceInputPopup.vue'
   import {
      mapActions,
      mapState
   } from "vuex";

export default {
   components: {
      voiceInputPopup
   },
   data() {
      return {
         showList: false,
         showDate: false,
         value1: Number(new Date()),
         columns: [
            ['医疗', '教育', '就业', '住房', '养老']
         ],
         time: '',
         problemType: '',
         name: '',
         contactNumber: '',
         location: '',
         detailedAddress: '',
         descriptionTitle: '',
         descriptionContent: '',
         videoContent: [],
         latitude: '',
         longitude: '',
         images: [],
         videos: [],
         voiceFile: '',//语音文件多个逗号拼接
         userInfo: uni.getStorageSync('userInfo'), //个人信息
         voiceInputShow: false,
      };
   },
   computed: {
      ...mapState(["playFlag"]),
   },
   onReady() {
      uni.setNavigationBarTitle({
         title: '诉求录入'
      })
   },
   onLoad() {
      this.getproblem()
      this.time = dayjs().format('YYYY-MM-DD')
   },

   methods: {
      ...mapActions(["playRecording", "pausePlaying"]),
      onPlayRecording(index) {
         // 先处理本地播放状态
         this.videoContent.forEach((item, i) => {
            item.playing = i === index;
         });
         // 调用store的播放方法，传url
         this.playRecording(this.videoContent[index].url);
   export default {
      components: {
         voiceInputPopup
      },
      onPausePlaying(index) {
         this.videoContent[index].playing = false;
         this.pausePlaying(this.videoContent[index].url);
      data() {
         return {
            showList: false,
            showDate: false,
            value1: Number(new Date()),
            columns: [
               ['医疗', '教育', '就业', '住房', '养老']
            ],
            time: '',
            problemType: '',
            name: '',
            contactNumber: '',
            detailedAddress: '',
            descriptionTitle: '',
            descriptionContent: '',
            videoContent: [],
            latitude: '30.5061493',
            longitude: '105.574542',
            location: '测试地址',
            images: [],
            videos: [],
            voiceFile: '', //语音文件多个逗号拼接
            userInfo: uni.getStorageSync('userInfo'), //个人信息
            voiceInputShow: false,
         };
      },
      voiceInput() {
         this.voiceInputShow = true;
      computed: {
         ...mapState(["playFlag"]),
      },
      closeVoiceInput() {
         this.voiceInputShow = false;
      },
      submitVoiceInput(e) {
         console.log('eeeeeeeeeeeeeeeeeee', e)
         this.videoContent.push({ url: e.url, data: e.data, playing: false });
         this.voiceInputShow = false;
      },
      previewImage(index) {
         uni.previewImage({
            urls: this.images,
            current: this.images[index],
            longPressActions: {
               itemList: ['发送给朋友', '保存图片', '收藏'],
               success: function (data) {

               },
               fail: function (err) {

               }
            }
         });
      },
      deletimg(e) {
         this.images = this.images.filter(item => item != e)

      },
      deletvideo(e) {
         this.videos = this.videos.filter(item => item != e)
      },
      gotoPage(e) {
         uni.navigateTo({
            url: `/pages/work-detail/maxVideo?url=${e}`
      onReady() {
         uni.setNavigationBarTitle({
            title: '诉求录入'
         })
      },
      getproblem() {
         getproblem().then((resp => {

            this.columns = [resp.data.map(item => {
               return item.name
            })]
         }))
      onLoad() {
         this.getproblem()
         this.time = dayjs().format('YYYY-MM-DD')
      },
      async submit(type) {
         if (this.videoContent.length > 0) {
            uni.showLoading({
               title: '正在上传语音文件...'
            });

            const uploadPromises = this.videoContent.map(item => {
               return new Promise((resolve, reject) => {
                  console.log('item.data', item.data)
      methods: {
         ...mapActions(["playRecording", "pausePlaying"]),
         onPlayRecording(index) {
            // 先处理本地播放状态
            this.videoContent.forEach((item, i) => {
               item.playing = i === index;
            });
            // 调用store的播放方法，传url
            this.playRecording(this.videoContent[index].url);
         },
         onPausePlaying(index) {
            this.videoContent[index].playing = false;
            this.pausePlaying(this.videoContent[index].url);
         },
         voiceInput() {
            this.voiceInputShow = true;
         },
         closeVoiceInput() {
            this.voiceInputShow = false;
         },
         submitVoiceInput(e) {
            console.log('eeeeeeeeeeeeeeeeeee', e)
            this.videoContent.push({
               url: e.url,
               data: e.data,
               playing: false
            });
            this.voiceInputShow = false;
         },
         previewImage(index) {
            uni.previewImage({
               urls: this.images,
               current: this.images[index],
               longPressActions: {
                  itemList: ['发送给朋友', '保存图片', '收藏'],
                  success: function(data) {

                  },
                  fail: function(err) {

                  }
               }
            });
         },
         deletimg(e) {
            this.images = this.images.filter(item => item != e)

         },
         deletvideo(e) {
            this.videos = this.videos.filter(item => item != e)
         },
         gotoPage(e) {
            uni.navigateTo({
               url: `/pages/work-detail/maxVideo?url=${e}`
            })
         },
         getproblem() {
            getproblem().then((resp => {

               this.columns = [resp.data.map(item => {
                  return item.name
               })]
            }))
         },
         async submit(type) {
            if (this.videoContent.length > 0) {
               uni.showLoading({
                  title: '正在上传语音文件...'
               });

               const uploadPromises = this.videoContent.map(item => {
                  return new Promise((resolve, reject) => {
                     console.log('item.data', item.data)
                     // uni.chooseAudio({
                     //    success:  (res)=> {
                     //       console.log(res.tempFilePaths[0]);
                     //       uni.uploadFile({
                     //          url: config.imageUrl,
                     //          filePath: res.tempFilePaths[0],  // 使用 Blob 数据
                     //          name: 'file',
                     //          header: {
                     //             // 'Content-Type': 'multipart/form-data',
                     //             'Authorization': uni.getStorageSync('token')
                     //          },
                     //          success: (uploadFileRes) => {
                     //             const response = JSON.parse(uploadFileRes.data);
                     //             if (response.code === 200) {
                     //                resolve(response.data);
                     //             } else {
                     //                reject(new Error('上传失败'));
                     //             }
                     //          },
                     //          fail: (error) => {
                     //             reject(error);
                     //          }
                     //       });
                     //    }
                     // });
                     uni.uploadFile({
                        url: config.imageUrl,
                        file: item.data, // 使用 Blob 数据
                        name: 'file',
                        header: {
                           // 'Content-Type': 'multipart/form-data',
                           'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjE4OTU1MjI1Nzk1MDcwODEyMTgsInR5cGUiOjEsImV4cCI6MTc0Nzk4MzIyMiwiY3JlYXRlZCI6MTc0NjY4NzIyMjAxMX0.pmUfTkxkbBirDMbnMR1IaLsbSiiwHc366_yyAetCzTOWYxTNgmQlmvw26_W62NHLOebB_ZAEgZsPvkJcaLOoPg'
                        },
                        success: (uploadFileRes) => {
                           const response = JSON.parse(uploadFileRes.data);
                           if (response.code === 200) {
                              resolve(response.data);
                           } else {
                              reject(new Error('上传失败'));
                           }
                        },
                        fail: (error) => {
                           reject(error);
                        }
                     });
                  });
               });

               try {
                  const uploadedUrls = await Promise.all(uploadPromises);
                  this.voiceFile = uploadedUrls.join(',');
                  console.log('this.voiceFile', this.voiceFile)
                  uni.hideLoading();
               } catch (error) {
                  uni.hideLoading();
                  uni.showToast({
                     title: '语音文件上传失败',
                     icon: 'error'
                  });
                  return;
               }
            }
            const preciseRegex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (!this.time) {
               uni.showToast({
                  title: '请选择时间',
                  icon: 'none'
               })
               return

            } else if (!this.problemType) {
               uni.showToast({
                  title: '请选择问题类型',
                  icon: 'none'
               })
               return
            } else if (!this.name) {
               uni.showToast({
                  title: '请输入群众姓名',
                  icon: 'none'
               })
               return
            } else if (!this.contactNumber) {
               uni.showToast({
                  title: '请输入联系电话',
                  icon: 'none'
               })
               return
            } else if (!preciseRegex.test(this.contactNumber)) {
               uni.showToast({
                  title: '请输入正确的手机号',
                  icon: 'none'
               })
               return
            } else if (!this.location) {
               uni.showToast({
                  title: '请选择地点',
                  icon: 'none'
               })
               return
            } else if (!this.detailedAddress) {
               uni.showToast({
                  title: '请输入详细地址',
                  icon: 'none'
               })
               return
            }

            const data = {
               time: this.time,
               problemType: this.problemType,
               name: this.name,
               contactNumber: this.contactNumber,
               location: this.location,
               latitude: this.latitude,
               longitude: this.longitude,
               detailedAddress: this.detailedAddress,
               descriptionContent: this.descriptionContent,
               images: this.images.join(','),
               videos: this.videos.join(','),
               voiceFile: this.voiceFile,
            }
            // 问题上报
            if (type == 1) {
               uni.navigateTo({
                  url: `/pages/problemReporting/problemReporting?data=${JSON.stringify(data)}`
               })
               return
            }
            // 办理结果录入
            if (type == 2) {
               uni.navigateTo({
                  url: `/pages/result-entry/index?data=${JSON.stringify(data)}`
               })
               return
            }
            // 添加
            if (type == 3) {
               save(data).then(resp => {
                  if (resp.code == 200) {
                     uni.showToast({
                        title: '保存成功',
                        icon: 'none'
                     })
                     setTimeout(() => {
                        uni.navigateBack()
                     }, 1500)
                  }
               })
            }
         },
         confirmone(e) {

            this.time = dayjs(e.value).format('YYYY-MM-DD')
            this.showDate = false
         },
         confirmtwo(e) {

            this.problemType = e.value[0]
            this.showList = false
         },
         cancel() {
            this.showDate = false
            this.showList = false
         },
         close(e) {
            this.showDate = false
            this.showList = false
         },
         goTopagelocation() {

            uni.navigateTo({
               url: '/pages/location/location'
            })
         },
         uploadImg() {
            uni.chooseImage({
               count: 1, //默认9
               sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
               sourceType: ['album'], //从相册选择
               success: (res) => {

                  uni.showLoading()
                  console.log('res.tempFilePaths[0]', res.tempFilePaths[0])
                  uni.uploadFile({
                     url: config.imageUrl,
                     file: item.data,
                     filePath: res.tempFilePaths[0],
                     name: 'file',
                     // fileType: 'audio/mpeg',
                     // filePath: item.url,
                     // name: 'file',
                     header: {
                        'Content-Type': 'multipart/form-data',
                        'Authorization': uni.getStorageSync('token')
                     },
                     success: (uploadFileRes) => {
                        const response = JSON.parse(uploadFileRes.data);
                        if (response.code === 200) {
                           resolve(response.data);
                        } else {
                           reject(new Error('上传失败'));
                        }

                        this.images = [...this.images, JSON.parse(uploadFileRes.data).data]
                        uni.hideLoading()
                     },
                     fail: (error) => {
                        reject(error);
                     fail: () => {
                        uni.hideLoading()
                        uni.showToast({
                           title: '上传失败',
                           icon: 'error'
                        })
                     }
                  });
               });
                  })
               }
            });

            try {
               const uploadedUrls = await Promise.all(uploadPromises);
               this.voiceFile = uploadedUrls.join(',');
               console.log('this.voiceFile', this.voiceFile)
               uni.hideLoading();
            } catch (error) {
               uni.hideLoading();
               uni.showToast({
                  title: '语音文件上传失败',
                  icon: 'error'
               });
               return;
            }
         }
         const preciseRegex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
         if (!this.time) {
            uni.showToast({
               title: '请选择时间',
               icon: 'none'
            })
            return

         } else if (!this.problemType) {
            uni.showToast({
               title: '请选择问题类型',
               icon: 'none'
            })
            return
         } else if (!this.name) {
            uni.showToast({
               title: '请输入群众姓名',
               icon: 'none'
            })
            return
         } else if (!this.contactNumber) {
            uni.showToast({
               title: '请输入联系电话',
               icon: 'none'
            })
            return
         } else if (!preciseRegex.test(this.contactNumber)) {
            uni.showToast({
               title: '请输入正确的手机号',
               icon: 'none'
            })
            return
         } else if (!this.location) {
            uni.showToast({
               title: '请选择地点',
               icon: 'none'
            })
            return
         } else if (!this.detailedAddress) {
            uni.showToast({
               title: '请输入详细地址',
               icon: 'none'
            })
            return
         }

         const data = {
            time: this.time,
            problemType: this.problemType,
            name: this.name,
            contactNumber: this.contactNumber,
            location: this.location,
            latitude: this.latitude,
            longitude: this.longitude,
            detailedAddress: this.detailedAddress,
            descriptionContent: this.descriptionContent,
            images: this.images.join(','),
            videos: this.videos.join(','),
            voiceFile: this.voiceFile,
         }
         // 问题上报
         if (type == 1) {
            uni.navigateTo({
               url: `/pages/problemReporting/problemReporting?data=${JSON.stringify(data)}`
            })
            return
         }
         // 办理结果录入
         if (type == 2) {
            uni.navigateTo({
               url: `/pages/result-entry/index?data=${JSON.stringify(data)}`
            })
            return
         }
         // 添加
         if (type == 3) {
            save(data).then(resp => {
               if (resp.code == 200) {
                  uni.showToast({
                     title: '保存成功',
                     icon: 'none'
                  })
                  setTimeout(() => {
                     uni.navigateBack()
                  }, 1500)
               }
            })
         }
      },
      confirmone(e) {

         this.time = dayjs(e.value).format('YYYY-MM-DD')
         this.showDate = false
      },
      confirmtwo(e) {

         this.problemType = e.value[0]
         this.showList = false
      },
      cancel() {
         this.showDate = false
         this.showList = false
      },
      close(e) {
         this.showDate = false
         this.showList = false
      },
      goTopagelocation() {

         uni.navigateTo({
            url: '/pages/location/location'
         })
      },
      uploadImg() {
         uni.chooseImage({
            count: 1, //默认9
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album'], //从相册选择
            success: (res) => {

               uni.showLoading()
               console.log('res.tempFilePaths[0]', res.tempFilePaths[0])
               uni.uploadFile({
                  url: config.imageUrl,
                  filePath: res.tempFilePaths[0],
                  name: 'file',
                  header: {
                     'Authorization': uni.getStorageSync('token')
                  },
                  success: (uploadFileRes) => {

                     this.images = [...this.images, JSON.parse(uploadFileRes.data).data]
                     uni.hideLoading()
                  },
                  fail: () => {
                     uni.hideLoading()
         },
         uploadVideo() {
            uni.chooseVideo({
               count: 1, //默认9
               sourceType: ['camera', 'album'],
               success: (res) => {
                  const videoExtensions = /\.(mp4|avi|rmvb)$/i;
                  if (!videoExtensions.test(res.name)) {
                     uni.showToast({
                        title: '上传失败',
                        icon: 'error'
                        title: '请上传mp4, avi, rmvb格式的视频',
                        icon: 'none',
                        duration: 3000
                     })
                     return
                  }
               })
            }
         });
      },
      uploadVideo() {
         uni.chooseVideo({
            count: 1, //默认9
            sourceType: ['camera', 'album'],
            success: (res) => {
               const videoExtensions = /\.(mp4|avi|rmvb)$/i;
               if (!videoExtensions.test(res.name)) {
                  uni.showToast({
                     title: '请上传mp4, avi, rmvb格式的视频',
                     icon: 'none',
                     duration: 3000
                  })
                  return
               }
               uni.showLoading()
               uni.uploadFile({
                  url: config.imageUrl,
                  filePath: res.tempFilePath,
                  name: 'file',
                  header: {
                     'Authorization': uni.getStorageSync('token')
                  },
                  success: (uploadFileRes) => {
                  uni.showLoading()
                  uni.uploadFile({
                     url: config.imageUrl,
                     filePath: res.tempFilePath,
                     name: 'file',
                     header: {
                        'Authorization': uni.getStorageSync('token')
                     },
                     success: (uploadFileRes) => {

                     this.videos = [...this.videos, JSON.parse(uploadFileRes.data).data]
                     uni.hideLoading()
                  },
                  fail: () => {
                     uni.hideLoading()
                     uni.showToast({
                        title: '上传失败',
                        icon: 'error'
                     })
                  }
               })
            }
         });
      },
                        this.videos = [...this.videos, JSON.parse(uploadFileRes.data).data]
                        uni.hideLoading()
                     },
                     fail: () => {
                        uni.hideLoading()
                        uni.showToast({
                           title: '上传失败',
                           icon: 'error'
                        })
                     }
                  })
               }
            });
         },
      }
   }
}
</script>

<style lang="scss" scoped>
.min-108 {
   min-height: 108rpx;
}

.red {
   color: rgba(255, 73, 72, 1);
}

.pink {
   background: #FFF1F4;
   border-radius: 8rpx;
   margin-top: 19rpx;
}

.card {
   border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
}

.bg {
   background: #F8F8F8;
}

.content {
   padding: 38rpx 31rpx 162rpx 31rpx;

   .main {
      padding: 0 27rpx 48rpx 27rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 19rpx;
   .min-108 {
      min-height: 108rpx;
   }
}

textarea {
   padding: 27rpx 31rpx 27rpx 31rpx;
   font-weight: 500;
}

.img {
   position: relative;

   .img-icon {
      height: 140rpx;
      line-height: 140rpx;
      position: absolute;
      top: 0rpx;
      left: 35rpx;
   .red {
      color: rgba(255, 73, 72, 1);
   }
}

/deep/.u-popup__content {
   border-radius: 16rpx 16rpx 0rpx 0rpx;
}
   .pink {
      background: #FFF1F4;
      border-radius: 8rpx;
      margin-top: 19rpx;
   }

/deep/ .u-toolbar {
   border-bottom: 2rpx solid RGBA(243, 243, 243, 1);
}
   .card {
      border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
   }

/deep/ .u-toolbar__wrapper__cancel {
   font-weight: 400;
   font-size: 30rpx;
   color: #FF4948 !important;
}
   .bg {
      background: #F8F8F8;
   }

/deep/ .u-toolbar__wrapper__confirm {
   font-weight: 400;
   font-size: 30rpx;
   color: #FF4948 !important;
}
   .content {
      padding: 38rpx 31rpx 162rpx 31rpx;

.footer {
   position: fixed;
   bottom: 0;
   left: 0;
   box-shadow: 0rpx -4rpx 27rpx 0rpx rgba(0, 0, 0, 0.08);
   width: calc(100% - 20rpx);
   background-color: #fff;
   display: flex;
   gap: 27rpx;
   padding: 33rpx 10rpx;
      .main {
         padding: 0 27rpx 48rpx 27rpx;
         background: #FFFFFF;
         box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
         border-radius: 19rpx;
      }
   }

   .cancel {
      width: 331rpx;
      height: 77rpx;
      border: 2rpx solid rgba(252, 141, 85, 1);
      border-radius: 38rpx;
   textarea {
      padding: 27rpx 31rpx 27rpx 31rpx;
      font-weight: 500;
   }

   .img {
      position: relative;

      .img-icon {
         height: 140rpx;
         line-height: 140rpx;
         position: absolute;
         top: 0rpx;
         left: 35rpx;
      }
   }

   /deep/.u-popup__content {
      border-radius: 16rpx 16rpx 0rpx 0rpx;
   }

   /deep/ .u-toolbar {
      border-bottom: 2rpx solid RGBA(243, 243, 243, 1);
   }

   /deep/ .u-toolbar__wrapper__cancel {
      font-weight: 400;
      font-size: 30rpx;
      color: #FF4948 !important;
   }

   /deep/ .u-toolbar__wrapper__confirm {
      font-weight: 400;
      font-size: 30rpx;
      color: #FF4948 !important;
   }

   .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      box-shadow: 0rpx -4rpx 27rpx 0rpx rgba(0, 0, 0, 0.08);
      width: calc(100% - 20rpx);
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FF4948;
   }
      gap: 27rpx;
      padding: 33rpx 10rpx;

   .ok {
      width: 331rpx;
      height: 77rpx;
      background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
      border-radius: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      .cancel {
         width: 331rpx;
         height: 77rpx;
         border: 2rpx solid rgba(252, 141, 85, 1);
         border-radius: 38rpx;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #FF4948;
      }

      .ok {
         width: 331rpx;
         height: 77rpx;
         background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
         border-radius: 48rpx;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #FFFFFF;
      }
   }
}
</style>