<template>
|
<view class="content">
|
<view class="main">
|
<view class="card flex a-center h-108 j-between">
|
<text class="w-108 fs-27 font-bold mr-85">发生时间</text>
|
<view class=" flex a-center j-between flex1" @click="showDate=true">
|
<input v-model="time" disabled placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
|
class="uni-input flex1" maxlength="10" placeholder="请选择问题发生的时间" />
|
<image src="/static/Appeal/left.png" class="w-19 h-19" mode=""></image>
|
</view>
|
</view>
|
<view class="card flex a-center h-108 j-between">
|
<text class="w-108 fs-27 font-bold mr-85">问题类型</text>
|
<view class=" flex a-center j-between flex1" @click="showList=true">
|
<input v-model="problemType" disabled placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
|
class="uni-input flex1" maxlength="10" placeholder="请选择问题类型" />
|
<image src="/static/Appeal/left.png" class="w-19 h-19" mode=""></image>
|
</view>
|
</view>
|
<view class="card flex a-center h-108 j-between">
|
<text class="w-108 fs-27 font-bold mr-85">群众姓名</text>
|
<input v-model="name" placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
|
class="uni-input flex1" placeholder="请输入群众姓名" />
|
|
</view>
|
<view class="card flex a-center h-108 j-between">
|
<text class="w-108 fs-27 font-bold mr-85">联系电话</text>
|
<input v-model="contactNumber" type="number" placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
|
class="uni-input flex1" maxlength="11" placeholder="请输入群众联系电话" />
|
|
</view>
|
<view class="card flex a-center h-108 j-between" @click="goTopage">
|
<text class="w-108 fs-27 font-bold mr-85">发生地点</text>
|
<view class=" flex a-center j-between flex1">
|
<input v-model="location" disabled placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
|
class="uni-input flex1" placeholder="请选择问题发生具体地点" />
|
<image src="/static/Appeal/left.png" class="w-19 h-19" mode=""></image>
|
</view>
|
</view>
|
<view class="card flex a-center h-108 j-between">
|
<text class="w-108 fs-27 font-bold mr-85">详细地址</text>
|
<input v-model="detailedAddress" placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
|
class="uni-input flex1" placeholder="请输入详细地址描述" />
|
</view>
|
<view class="mt-35">
|
<text class="w-108 fs-27 font-bold mr-85">问题描述</text>
|
<view class="bg mt-27 fs-27">
|
<view class="h-94 " style="border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);">
|
<input v-model="descriptionTitle" placeholder-style="color: rgba(0,0,0,0.3);font-size:27rpx;"
|
class="h-94 pl-31 flex1" placeholder="请输入问题标题" />
|
</view>
|
<textarea name="" v-model="descriptionContent" id="" cols="30" placeholder="请输入问题描述内容"
|
placeholder-style="color: rgba(0, 0, 0, 0.30);font-size:27rpx;" rows="10"></textarea>
|
</view>
|
</view>
|
<view class="mt-35">
|
<text class="w-108 fs-27 font-bold mr-85">图片</text>
|
<view class="mt-27 flex a-center">
|
<view class="img mr-15" v-for="item,index in images" :key="index">
|
<image :src="item" class="w-140 h-140" mode=""></image>
|
<view class="img-icon">
|
<image class="w-19 h-19" @click="previewImage(index)" src="/static/Appeal/amplify.png"
|
mode=""></image>
|
<image class="w-19 h-19 ml-35" @click="deletimg(item)" src="/static/Appeal/trash.png"
|
mode="">
|
</image>
|
</view>
|
</view>
|
<image src="/static/Appeal/add.png" class="w-140 h-140" mode="" @click="uploadImg"></image>
|
</view>
|
</view>
|
<view class="mt-35">
|
<text class="w-108 fs-27 font-bold mr-85">视频</text>
|
<view class="mt-27 flex a-center">
|
<view class="img mr-15" v-for="item,index in videos" :key="index">
|
<video :controls="false" :show-center-play-btn="false" :src="item" class="w-140 h-140"
|
mode=""></video>
|
<view class="img-icon">
|
<image class="w-19 h-19" @click="gotoPage(item)" src="/static/Appeal/amplify.png" mode="">
|
</image>
|
<image class="w-19 h-19 ml-35" @click="deletvideo(item)" src="/static/Appeal/trash.png"
|
mode=""></image>
|
</view>
|
</view>
|
<image src="/static/Appeal/add.png" class="w-140 h-140" mode="" @click="uploadVideo"></image>
|
</view>
|
</view>
|
</view>
|
<view class="btn" @click="submit">
|
保存
|
</view>
|
<u-datetime-picker :show="showDate" v-model="value1" mode="date" :closeOnClickOverlay="true"
|
@confirm="confirmone" @close="close" @cancel="cancel"></u-datetime-picker>
|
<u-picker :show="showList" :columns="columns" @confirm="confirmtwo" :closeOnClickOverlay="true" @close="close"
|
@cancel="cancel"></u-picker>
|
</view>
|
</template>
|
|
<script>
|
import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js';
|
import {
|
save,
|
getproblem
|
} from './service.js'
|
|
export default {
|
data() {
|
return {
|
showList: false,
|
showDate: false,
|
value1: Number(new Date()),
|
columns: [
|
['医疗', '教育', '就业', '住房', '养老']
|
],
|
time: '',
|
problemType: '',
|
name: '',
|
contactNumber: '',
|
location: '',
|
detailedAddress: '',
|
descriptionTitle: '',
|
descriptionContent: '',
|
latitude: '',
|
longitude: '',
|
images: [],
|
videos: [],
|
};
|
},
|
onLoad() {
|
this.getproblem()
|
},
|
methods: {
|
previewImage(index) {
|
uni.previewImage({
|
urls: this.images,
|
current: this.images[index],
|
longPressActions: {
|
itemList: ['发送给朋友', '保存图片', '收藏'],
|
success: function(data) {
|
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
},
|
fail: function(err) {
|
console.log(err.errMsg);
|
}
|
}
|
});
|
},
|
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 => {
|
console.log(resp, '问题类型')
|
this.columns = [resp.data.map(item => {
|
return item.name
|
})]
|
}))
|
},
|
submit() {
|
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'
|
})
|
|
} else if (!this.problemType) {
|
uni.showToast({
|
title: '请选择问题类型',
|
icon: 'none'
|
})
|
} else if (!this.name) {
|
uni.showToast({
|
title: '请输入群众姓名',
|
icon: 'none'
|
})
|
} else if (!this.contactNumber) {
|
uni.showToast({
|
title: '请输入联系电话',
|
icon: 'none'
|
})
|
} else if (!preciseRegex.test(this.contactNumber)) {
|
uni.showToast({
|
title: '请输入正确的手机号',
|
icon: 'none'
|
})
|
} else if (!this.location) {
|
uni.showToast({
|
title: '请选择地点',
|
icon: 'none'
|
})
|
} else if (!this.detailedAddress) {
|
uni.showToast({
|
title: '请输入详细地址',
|
icon: 'none'
|
})
|
} else if (!this.descriptionTitle) {
|
uni.showToast({
|
title: '请输入问题标题',
|
icon: 'none'
|
})
|
} else if (!this.descriptionContent) {
|
uni.showToast({
|
title: '请输入问题描述',
|
icon: 'none'
|
})
|
} else if (this.images == 0) {
|
uni.showToast({
|
title: '请上传图片',
|
icon: 'none'
|
})
|
} else if (this.videos == 0) {
|
uni.showToast({
|
title: '请上传视频',
|
icon: 'none'
|
})
|
}
|
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,
|
descriptionTitle: this.descriptionTitle,
|
descriptionContent: this.descriptionContent,
|
images: this.images.join(','),
|
videos: this.videos.join(','),
|
}
|
save(data).then(resp => {
|
console.log(resp, '保存');
|
if (resp.code == 200) {
|
uni.showToast({
|
title: '保存成功',
|
icon: 'none'
|
})
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
}
|
})
|
},
|
confirmone(e) {
|
console.log(e, 'eeee');
|
this.time = dayjs(e.value).format('YYYY-MM-DD')
|
this.showDate = false
|
},
|
confirmtwo(e) {
|
console.log(e, 'eeee');
|
this.problemType = e.value[0]
|
this.showList = false
|
},
|
cancel() {
|
this.showDate = false
|
this.showList = false
|
},
|
close(e) {
|
this.showDate = false
|
this.showList = false
|
},
|
goTopage() {
|
uni.navigateTo({
|
url: '/pages/location/location'
|
})
|
},
|
uploadImg() {
|
uni.chooseImage({
|
count: 1, //默认9
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
sourceType: ['album'], //从相册选择
|
success: (res) => {
|
console.log(res, 'res');
|
uni.showLoading()
|
uni.uploadFile({
|
url: 'https://huacheng.psciio.com/api/huacheng-communitybackstage/communitypartybuilding/uploadimage',
|
filePath: res.tempFilePaths[0],
|
name: 'file',
|
header: {
|
'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjE2NzYwOTg3NzQ0OTk0NjMxNjgsInR5cGUiOjMsImV4cCI6MTc0MTY4NjQ0OSwiY3JlYXRlZCI6MTc0MDM5MDQ0OTYxN30.UpanrjmCLuKlxm32IbBldBOSJJNYL8ZDrbZQM9z_HCW8X9cL8Ox8jwgX0j4_2nq3ALjYD7aPQWbVmMb2vHIIdA'
|
},
|
success: (uploadFileRes) => {
|
console.log(JSON.parse(uploadFileRes.data), 'uploadFileRes');
|
this.images = [...this.images, JSON.parse(uploadFileRes.data).data]
|
uni.hideLoading()
|
},
|
fail: () => {
|
uni.hideLoading()
|
uni.showToast({
|
title: '上传失败',
|
icon: 'error'
|
})
|
}
|
})
|
}
|
});
|
},
|
uploadVideo() {
|
uni.chooseVideo({
|
count: 1, //默认9
|
sourceType: ['camera', 'album'],
|
success: (res) => {
|
console.log(res, 'res');
|
uni.showLoading()
|
uni.uploadFile({
|
url: 'https://huacheng.psciio.com/api/huacheng-communitybackstage/communitypartybuilding/uploadimage',
|
filePath: res.tempFilePath,
|
name: 'file',
|
header: {
|
'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjE2NzYwOTg3NzQ0OTk0NjMxNjgsInR5cGUiOjMsImV4cCI6MTc0MTY4NjQ0OSwiY3JlYXRlZCI6MTc0MDM5MDQ0OTYxN30.UpanrjmCLuKlxm32IbBldBOSJJNYL8ZDrbZQM9z_HCW8X9cL8Ox8jwgX0j4_2nq3ALjYD7aPQWbVmMb2vHIIdA'
|
},
|
success: (uploadFileRes) => {
|
console.log(JSON.parse(uploadFileRes.data).data, 'uploadFileRes');
|
this.videos = [...this.videos, JSON.parse(uploadFileRes.data).data]
|
uni.hideLoading()
|
},
|
fail: () => {
|
uni.hideLoading()
|
uni.showToast({
|
title: '上传失败',
|
icon: 'error'
|
})
|
}
|
})
|
}
|
});
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.card {
|
border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
|
}
|
|
.bg {
|
background: #F8F8F8;
|
}
|
|
.content {
|
padding: 38rpx 31rpx 62rpx 31rpx;
|
|
.main {
|
padding: 0 27rpx 48rpx 27rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 19rpx;
|
}
|
}
|
|
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;
|
}
|
}
|
|
.btn {
|
width: 688rpx;
|
height: 96rpx;
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 48rpx;
|
font-weight: 600;
|
font-size: 35rpx;
|
color: #FFFFFF;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 38rpx
|
}
|
|
/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;
|
}
|
</style>
|
