<template>
|
<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/detailImg/dwei.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="br-19 mt-38 bs-1 pt-35 pb-33 px-31">
|
<view class="fs-27 lh-38 font-bold">办理进度描述</view>
|
<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 localImageUrls" :key="item">
|
<image v-if="item != 'loading'" :src="item" 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="" />
|
<image src="@/static/Appeal/trash.png" class="w-19 h-19" />
|
</view>
|
</view>
|
</view>
|
<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">
|
<!-- <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>
|
<image src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" />
|
</view>
|
</view>
|
<view class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">确认添加</view>
|
<view class="safe-box"></view>
|
</view>
|
</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: [item]
|
})
|
},
|
uploadImg() {
|
if (!this.againCklicFlag) return
|
this.againCklicFlag = false
|
uni.chooseImage({
|
count: 1,
|
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
|
sourceType: ['camera'], //x相机拍照
|
success: (chooseImageRes) => {
|
this.imgUrls.push('loading')
|
this.againCklicFlag = true
|
let imgPathList = chooseImageRes.tempFilePaths;
|
if (imgPathList.length > 0) {
|
uni.uploadFile({
|
url: config.imageUrl,
|
filePath: imgPathList[0],
|
timeout: 1000 * 45,
|
name: 'file',
|
header: {
|
Authorization: config.uploadToken
|
},
|
success: (res) => {
|
if (JSON.parse(res.data).code == 200) {
|
let imgUrl = JSON.parse(res.data)
|
this.imgUrls = this.imgUrls.filter(item => item !=
|
'loading')
|
this.$nextTick(() => {
|
this.imgUrls.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
|
})
|
}
|
})
|
}
|
},
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.bs-1 {
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.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);
|
}
|
</style>
|
