H5/pages.json | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
H5/pages/add-progress/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
H5/pages/add-progress/service.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
H5/pages/progress/progress.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
H5/utils/request.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
H5/pages.json
@@ -90,6 +90,13 @@ "navigationBarTitleText": "延期申请", "navigationBarBackgroundColor": "#ffffff" } }, { "path": "pages/progress/progress", "style": { "navigationBarTitleText": "办理进度录入", "navigationBarBackgroundColor": "#ffffff" } } ], "globalStyle": { H5/pages/add-progress/index.vue
@@ -26,12 +26,13 @@ </view> <view class="br-19 mt-38 bs-1 pt-35 pb-33 px-31"> <view class="fs-27 lh-38 font-bold">办理进度描述</view> <textarea class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4" style="height: 365rpx;" placeholder="请输入办理进度描述" /> <textarea v-model="describe" class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4" style="height: 365rpx;" placeholder="请输入办理进度描述" /> <view class="fs-27 mt-38 lh-38 font-bold">图片</view> <view class="flex wrap mt-27"> <view class="relative mr-15" v-for="item in 4" :key="item"> <image src="/static/logo.png" class="w-140 h-140 shrink0 br-8" /> <view class="absolute w-140 h-140 bgcolor5 top0 left0 br-8"> <view class="relative mr-15" v-for="item in localImageUrls" :key="item"> <image v-if="item != 'loading'" src="/static/logo.png" class="w-140 h-140 shrink0 br-8" /> <view v-if="item != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8"> <view class="absolute" style="top: 50%;left: 50%;transform: translate(-50%,-50%);"> <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19 mr-35" mode="" /> @@ -39,19 +40,23 @@ </view> </view> </view> <image src="/static/Appeal/add.png" class="w-140 h-140 shrink0" /> <view v-if="imgUrls.includes('loading')" class="w-140 h-140 flex a-center j-center mr-15 border2 br-8"> <u-loading-icon></u-loading-icon> </view> <image @tap="uploadImg" src="/static/Appeal/add.png" class="w-140 h-140 shrink0" /> </view> <view class="fs-27 mt-37 lh-38 font-bold">视频</view> <view class="flex wrap mt-27"> <view class="relative mr-15" v-for="item in 4" :key="item"> <image src="@/static/logo.png" class="w-140 h-140 shrink0 br-8" /> <view class="absolute w-140 h-140 bgcolor5 top0 left0 br-8"> <view class="relative mr-15"> <!-- <image src="@/static/logo.png" class="w-140 h-140 shrink0 br-8" /> --> <video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" /> <!-- <view class="absolute w-140 h-140 bgcolor5 top0 left0 br-8"> <view class="absolute" style="top: 50%;left: 50%;transform: translate(-50%,-50%);"> <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19 mr-35" mode="" /> <image src="@/static/Appeal/trash.png" class="w-19 h-19" /> </view> </view> </view> --> </view> <image src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" /> </view> @@ -62,16 +67,82 @@ </template> <script> import { saveProcess, } from './service' import config from '@/config/index.js' export default { data() { return { id: '', describe: '', localImageUrls: [], imgUrls: [], video: [], againCklicFlag: true, } }, onLoad(params) { this.id = params.id }, methods: { viewImage(item) { uni.previewImage({ urls:[require('@/static/logo.png')] urls: [require('@/static/logo.png')] }) }, uploadImg() { if (!this.againCklicFlag) return this.againCklicFlag = false uni.chooseImage({ count: 1, sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: ['camera'], //x相机拍照 success: (chooseImageRes) => { this.againCklicFlag = true let imgPathList = chooseImageRes.tempFilePaths; if (imgPathList.length > 0) { uni.uploadFile({ url: config.BASE_URL + '/master/oss/pic', filePath: imgPathList[0], timeout: 1000 * 45, name: 'file', header: { Authorization: uni.getStorageSync('token') }, success: (res) => { if (JSON.parse(res.data).code == 200) { let imgUrl = JSON.parse(res.data) this.imageUrls = this.imageUrls.filter(item => item != 'loading') this.$nextTick(() => { this.imageUrls.push(imgUrl) this.localImageUrls.push(imgPathList[0]) }) } else { this.againCklicFlag = true this.imgUrls = this.imgUrls.filter( item => item != 'loading') uni.showToast({ title: '上传失败,请重新上传', icon: 'none', mask: true }) } }, fail: (err) => { this.againCklicFlag = true this.imgUrls = this.imgUrls.filter( item => item != 'loading') uni.showToast({ title: '上传失败,请重新上传', icon: 'none', mask: true }) } }) } }, }) } } @@ -127,6 +198,10 @@ border: 2rpx solid #FFF1B8; } .border2 { border: 2rpx solid #F8F8F8; } .safe-box { height: env(safe-area-inset-bottom); } H5/pages/add-progress/service.js
New file @@ -0,0 +1,7 @@ import request from '@/utils/request.js' // 办理进度录入 export const saveProcess = (params) => { return request.post(`/api/huacheng-sangeshenbian/applet/complaint/save-process`, params, ) } H5/pages/progress/progress.vue
@@ -1,55 +1,67 @@ <template> <view class="pt-38"> <view class="shadow1 ml-31 mr-31 br-16 pt-31 pl-31 pr-31 fs-27 pb-28"> <view class="flex"> <view class="flex flex-column j-between"> <view class="shrink0 point mt-14 mr-31"> <view class="center"> </view> </view> <view class="flex1 w-3 bgColor1 ml-8 mt-10"> </view> </view> <view class="flex1 pb-46"> <view class="flex a-center j-between lh-38"> <text class="color1">李雷</text> <text class="color2">2024年9月29日11:09:09</text> </view> <view class="lh-38 mt-10 fs-27"> 处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明 </view> </view> </view> <view class="flex"> <view class="flex flex-column j-between"> <view class="shrink0 point mt-14 mr-31"> <view class="center"> </view> </view> <!-- <view class="flex1 w-3 bgColor1 ml-8 mt-10"> </view> --> </view> <view class="flex1"> <view class="flex a-center j-between lh-38"> <text class="color1">李雷</text> <text class="color2">2024年9月29日11:09:09</text> </view> <view class="lh-38 mt-10 fs-27"> 处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明 </view> <view class="flex wrap mt-19"> <image v-for="item in 5" :key="index" src="../../static/logo.png" class="mb-19 w-140 h-140 br-8 shrink0 mr-17" mode=""></image> </view> </view> </view> </view> <view class="h-10 safe-b"> <view class="px-31 pt-38"> <view class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2"> <view class="flex a-center j-between fs-23 lh-33 font-bold"> <view>诉求号:7843523454</view> <view class="color1">正在办理</view> </view> <view class="mx-13 mt-33 pt-35 pb-33 px-27 br-19 flex a-center j-between bgcolor1"> <view class="fs-27 lh-38 color2">江苏省常州市溧阳市牛顿大道172号</view> <image src="@/static/public/gps.png" class="w-31 h-31 shrink0" /> </view> <view class="flex a-center j-between mt-31 mx-13"> <view class="flex-column a-center"> <view class="fs-27 lh-38 font-bold">问题类型</view> <view class="mt-8 fs-23 lh-42 txt-center px-31 font-w400 color3 bgcolor3 border1">教育</view> </view> <view class="flex-column a-center"> <view class="fs-27 lh-38 font-bold">群众</view> <view class="fs-27 lh-38 mt-10">沙振</view> </view> <view class="flex-column a-center"> <view class="fs-27 lh-38 font-bold">联系电话</view> <view class="fs-27 lh-38 mt-10">14225874426</view> </view> </view> </view> <view class="progress"> <view class="proCard"> <view class="proItem" v-for="(item,index) in 3" :key="index"> <view class="mr-31 flex flex-column a-center"> <view class="dot"> <view class="box"></view> </view> <view class="proLine"> </view> </view> <view> <view class="flex a-center j-between mb-10"> <view class="name">李雷</view> <view class="time">2024年9月29日11:09:09</view> </view> <view class="context">处理进度说明处理进度说明处理进度说明处理进 度说明处理进度说明处理进度说明处理进度说明处理进度说明</view> <view class="proImg"> <view class="imgOrVedio" v-for="(item,index) in 4" :key="index"> <image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" class="img shrink0" mode="aspectFill"> </image> <view class="openVideo" v-if="item==4"> <image src="../../static/detailImg/open.png" class="video shrink0" mode="aspectFill"> </image> </view> </view> </view> </view> </view> </view> </view> <view @tap="toAdd" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">添加办理进度</view> <view class="safe-box"></view> </view> </template> @@ -57,46 +69,187 @@ export default { data() { return { id: '' } }, onLoad(params) { this.id = params.id }, methods: { toAdd() { uni.navigateTo({ url: `/pages/add-progress/index` }) } } } </script> <style scoped lang="scss"> .color1 { color: #505050; } .color2{ color: #999999; <style scoped lang="scss"> .bs-1 { box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1); } .shadow1 { box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0,0,0,0.1); } .border1 { width: 3rpx; background: #000; } .bgColor1 { background-color: #F0F0F0; } .point { background: linear-gradient( 180deg, #FD8D3C 0%, #FA541C 100%); box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(252,141,85,0.4); border-radius: 50%; width: 19rpx; height: 19rpx; display: flex; align-items: center; justify-content: center; .center { width: 9rpx; height: 9rpx; border-radius: 50%; background-color: #fff; } .color1 { color: #FF4948; } .color2 { color: rgba(0, 0, 0, .8); } .color3 { color: #FAAD14; } .color4 { color: #FFFFFF; } .bgcolor1 { background: linear-gradient(270deg, rgba(255, 241, 0, 0.5) 0%, rgba(255, 249, 172, 0.25) 48%, rgba(255, 255, 255, 0.2) 100%, #FFFFFF 100%); } .bgcolor2 { background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 25%); } .bgcolor3 { background: #FFFBE6; } .bgcolor4 { background: #F8F8F8; } .bgcolor5 { background: rgba(0, 0, 0, .23); } .bgcolor6 { background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%); } .border1 { border: 2rpx solid #FFF1B8; } .border2 { border: 2rpx solid #F8F8F8; } .safe-box { height: env(safe-area-inset-bottom); } .progress { border-radius: 27rpx; margin-top: 38.46rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1); padding: 34rpx 31rpx; .title { font-weight: 600; font-size: 27rpx; color: rgba(0, 0, 0, 0.88); line-height: 38rpx; text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1); margin-bottom: 48rpx; } .proCard { .proItem { display: flex; padding-bottom: 38rpx; .dot { width: 19rpx; height: 19rpx; background: linear-gradient(180deg, #FD8D3C 0%, #FA541C 100%); box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(252, 141, 85, 0.4); border-radius: 50%; margin: 10rpx 0; display: flex; align-items: center; justify-content: center; .box { width: 7rpx; height: 7rpx; background-color: #fff; border-radius: 50%; } } .proLine { flex: 1; width: 4rpx; background: rgba(0, 0, 0, 0.06); border-radius: 3rpx; } .name { font-weight: 400; font-size: 27rpx; color: rgba(0, 0, 0, 0.8); line-height: 38rpx; } .time { font-weight: 400; font-size: 23rpx; color: rgba(0, 0, 0, 0.4); line-height: 33rpx; } .context { font-size: 27rpx; color: rgba(0, 0, 0, 0.8); line-height: 38rpx; } .proImg { display: flex; flex-wrap: wrap; .imgOrVedio { margin-right: 17rpx; position: relative; .img { width: 140rpx; height: 140rpx; border-radius: 8rpx; margin-top: 19rpx; } .openVideo { position: absolute; top: 19rpx; left: 0; width: 140rpx; height: 140rpx; border-radius: 8rpx; display: flex; align-items: center; justify-content: center; .video { width: 140rpx; height: 140rpx; } } } } } .proItem:last-child { .proLine { display: none; } } } } </style> H5/utils/request.js
@@ -19,10 +19,11 @@ return new Promise(function(resolve, reject) { let token = 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjE2MTc3LCJ0eXBlIjoxLCJleHAiOjE3NDE2NjExMDYsImNyZWF0ZWQiOjE3NDAzNjUxMDY1MTh9.XRkMgKjEhRo6_BQK5fEVQ_Pv5bM-xeT36s4ju4Oh1F7ZmkIQOJUrdDnefub13JO6rZs3GT6dKnHZgCSyyQpsjg' let token = uni.getStorageSync('token') || 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjE4OTI0ODk0OTc5Nzk5NDA4NjUsInR5cGUiOjEsImV4cCI6MTc0MTY3MTI5OSwiY3JlYXRlZCI6MTc0MDM3NTI5OTQwNn0.39bIG5k-yClEWnUXvA63rjS631pj6fykU-J6vrC5u3HczL8NSwT_3pdVkj3hr4qikCrE7i9hmNkU_aLch1sw8A' let header = { 'content-type': type ? 'application/x-www-form-urlencoded;charset=UTF-8' : 'application/json', 'Authorization': token, 'Authorization': 'Bearer ' + token, 'lang': uni.getStorageSync('locale') === 'zh-Hans' ? 'zh_CN' : 'zh-tw', } const requestTask = uni.request({ @@ -136,15 +137,15 @@ showCancel: false, success: function(res) { if (res.confirm) { if (routeStr == 'pages/login/index') { uni.reLaunch({ url: '/pages/login/index' }) return } uni.reLaunch({ url: '/pages/login/index' }) // if (routeStr == 'pages/login/index') { // uni.reLaunch({ // url: '/pages/login/index' // }) // return // } // uni.reLaunch({ // url: '/pages/login/index' // }) } } });