309 lines
8.1 KiB
Vue
309 lines
8.1 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 意见收集 -->
|
|
<template v-if="!isSuccess">
|
|
<up-form
|
|
labelPosition="top"
|
|
:model="opinionModel"
|
|
ref="opinionModelRef"
|
|
:rules="opinionRules"
|
|
labelWidth="auto"
|
|
class="opinion-form"
|
|
>
|
|
<up-form-item label="姓名" prop="userName">
|
|
<up-input
|
|
v-model="opinionModel.userName"
|
|
class="input-content"
|
|
placeholder="填写姓名"
|
|
clearable
|
|
/>
|
|
</up-form-item>
|
|
<up-form-item label="电话" prop="userPhone">
|
|
<up-input
|
|
v-model="opinionModel.userPhone"
|
|
class="input-content"
|
|
placeholder="填写电话"
|
|
clearable
|
|
/>
|
|
</up-form-item>
|
|
<!-- <up-form-item label="意见归属单位/部门" prop="userCompany">
|
|
<up-input
|
|
v-model="opinionModel.unit"
|
|
class="input-content"
|
|
placeholder="填写归属单位/部门"
|
|
clearable
|
|
/>
|
|
</up-form-item> -->
|
|
<up-form-item label="意见" prop="userOpinion" required>
|
|
<up-textarea
|
|
v-model="opinionModel.userOpinion"
|
|
placeholder="请输入内容"
|
|
class="input-content"
|
|
:maxlength="500"
|
|
count
|
|
style="max-height: 500px; overflow-y: auto"
|
|
height="300px"
|
|
clearable
|
|
>
|
|
</up-textarea>
|
|
</up-form-item>
|
|
|
|
<up-form-item label="附件(最多上传5张图片)">
|
|
<up-upload
|
|
name="1"
|
|
multiple
|
|
:maxCount="5"
|
|
@delete="deletePic"
|
|
:fileList="fileList"
|
|
@afterRead="afterRead"
|
|
/>
|
|
</up-form-item>
|
|
|
|
<up-form-item>
|
|
<up-button
|
|
type="primary"
|
|
text="提交意见"
|
|
style="margin-top: 30rpx"
|
|
@tap="onSubmitOptions"
|
|
/>
|
|
</up-form-item>
|
|
</up-form>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<view class="success-container">
|
|
<up-icon name="checkbox-mark" color="#2979ff" size="80" bold="true"></up-icon>
|
|
<text class="success">提交成功</text>
|
|
<text class="thanks">感谢您宝贵的意见</text>
|
|
</view>
|
|
<view style="width: 100vw">
|
|
<up-button
|
|
type="primary"
|
|
text="返回"
|
|
@tap="onContinueFill"
|
|
style="width: 95%; margin: 30rpx auto"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<up-modal
|
|
:show="showModal"
|
|
title="温馨提示"
|
|
content="是否确认退出？"
|
|
showCancelButton
|
|
@confirm="onConfirm"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { submitOptionsApi } from '@/services/options.js'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { ref } from 'vue'
|
|
|
|
// 表单数据源
|
|
const opinionModel = ref({
|
|
userName: '',
|
|
userPhone: '',
|
|
unit: '',
|
|
userOpinion: '',
|
|
})
|
|
|
|
onLoad((option) => {
|
|
if (option.taskId) {
|
|
opinionModel.value.taskId = option.taskId
|
|
}
|
|
})
|
|
|
|
const fileList = ref([])
|
|
|
|
const opinionRules = ref({
|
|
// userName: [
|
|
// {
|
|
// type: 'string',
|
|
// required: true,
|
|
// message: '请填写姓名',
|
|
// trigger: ['blur', 'change'],
|
|
// },
|
|
// {
|
|
// pattern: /^[\u4e00-\u9fa5]{2,6}$/,
|
|
// // 正则检验前先将值转为字符串
|
|
// transform(value) {
|
|
// return String(value)
|
|
// },
|
|
// message: '请填写正确的姓名',
|
|
// },
|
|
// ],
|
|
// userPhone: [
|
|
// {
|
|
// type: 'string',
|
|
// required: true,
|
|
// message: '请填写电话',
|
|
// trigger: ['blur', 'change'],
|
|
// },
|
|
|
|
// {
|
|
// pattern: /^1[3-9]\d{9}$/,
|
|
// // 正则检验前先将值转为字符串
|
|
// transform(value) {
|
|
// return String(value)
|
|
// },
|
|
// message: '请填写正确的手机号码',
|
|
// },
|
|
// ],
|
|
userOpinion: [
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写意见',
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
{
|
|
max: 500,
|
|
message: '字数不能超过500',
|
|
},
|
|
],
|
|
})
|
|
|
|
// 表单实例
|
|
const opinionModelRef = ref(null)
|
|
|
|
// 是否提交成功
|
|
const isSuccess = ref(false)
|
|
|
|
// 提示弹框
|
|
const showModal = ref(false)
|
|
|
|
// 提交按钮
|
|
const onSubmitOptions = () => {
|
|
opinionModelRef.value
|
|
.validate()
|
|
.then(async (valid) => {
|
|
if (valid) {
|
|
let files = []
|
|
fileList.value.forEach((f) => {
|
|
let d = {
|
|
file: f.url,
|
|
name: 'file',
|
|
uri: f.url,
|
|
}
|
|
files.push(d)
|
|
})
|
|
uni.uploadFile({
|
|
url: '/manager/option/appUploadFile',
|
|
files: files,
|
|
name: 'file',
|
|
formData: {
|
|
param: JSON.stringify(opinionModel.value),
|
|
},
|
|
success: (res) => {
|
|
console.log(res, 'res')
|
|
|
|
res = JSON.parse(res.data)
|
|
if (res.data === '添加成功') {
|
|
uni.$u.toast('添加成功')
|
|
isSuccess.value = true
|
|
} else {
|
|
uni.$u.toast('添加失败' + res.data)
|
|
}
|
|
},
|
|
fail: (err) => {},
|
|
})
|
|
}
|
|
})
|
|
.catch(() => {
|
|
// 处理验证错误
|
|
})
|
|
}
|
|
|
|
// 继续填写
|
|
const onContinueFill = () => {
|
|
isSuccess.value = false
|
|
}
|
|
// 退出
|
|
const onExit = () => {
|
|
showModal.value = true
|
|
}
|
|
|
|
// 确认退出
|
|
const onConfirm = () => {
|
|
uni.redirectTo({ url: '/pages/index/index' })
|
|
}
|
|
|
|
// 删除图片
|
|
const deletePic = (event) => {
|
|
fileList.value.splice(event.index, 1)
|
|
}
|
|
|
|
// 新增图片
|
|
const afterRead = async (event) => {
|
|
console.log('event', event)
|
|
let lists = [].concat(event.file)
|
|
lists.map((item) => {
|
|
fileList.value.push({
|
|
...item,
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: #f5f5f5;
|
|
overflow-y: auto;
|
|
}
|
|
::v-deep .opinion-form {
|
|
width: 90%;
|
|
height: auto;
|
|
}
|
|
|
|
.input-content {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.success-container {
|
|
width: 100vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 120rpx 0;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
|
|
.success {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.thanks {
|
|
font-size: 13px;
|
|
padding: 10rpx 0;
|
|
color: #848181;
|
|
}
|
|
}
|
|
|
|
.upload-container {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
padding: 10rpx;
|
|
|
|
view {
|
|
margin-right: 8rpx;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f4f5f7;
|
|
border-radius: 2rpx;
|
|
}
|
|
}
|
|
</style>
|