From df64b8405927e7fe3f9cfbae1f628b2d3b7a0f64 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期三, 21 五月 2025 00:32:56 +0800
Subject: [PATCH] luyin
---
H5/pages/Appeal/Appeal.vue | 860 +++++++++++++++++++++++++++++---------------------------
1 files changed, 443 insertions(+), 417 deletions(-)
diff --git a/H5/pages/Appeal/Appeal.vue b/H5/pages/Appeal/Appeal.vue
index dc38ba7..45a876b 100644
--- a/H5/pages/Appeal/Appeal.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.7.1