增加新需求以及页面
This commit is contained in:
BianLzhaoMin
parent
ab1f5a54e3
commit
a8706903fc
|
|
@ -22,6 +22,12 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "意见收集"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/error/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "意见收集"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="success-container">
|
||||
<up-icon name="close" color="#ff0000" size="80" bold="true"></up-icon>
|
||||
<text class="success">此二维码已失效</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup></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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,244 +1,48 @@
|
|||
<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" required>
|
||||
<up-input
|
||||
v-model="opinionModel.userName"
|
||||
class="input-content"
|
||||
placeholder="填写姓名"
|
||||
clearable
|
||||
/>
|
||||
</up-form-item>
|
||||
<up-form-item label="电话" prop="userPhone" required>
|
||||
<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="options" required>
|
||||
<up-textarea
|
||||
v-model="opinionModel.options"
|
||||
placeholder="请输入内容"
|
||||
class="input-content"
|
||||
:maxlength="500"
|
||||
count
|
||||
style="max-height: 500px; overflow-y: auto"
|
||||
height="300px"
|
||||
clearable
|
||||
>
|
||||
</up-textarea>
|
||||
</up-form-item>
|
||||
<text class="text-box">
|
||||
  我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约我用十年青春,赴你最后之约
|
||||
</text>
|
||||
|
||||
<up-form-item>
|
||||
<view>
|
||||
<up-button
|
||||
type="primary"
|
||||
text="提交意见"
|
||||
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"
|
||||
/>
|
||||
<!-- <up-button
|
||||
text="退出"
|
||||
:plain="true"
|
||||
type="primary"
|
||||
@tap="onExit"
|
||||
style="width: 95%; margin: 0 auto"
|
||||
/> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<up-modal
|
||||
:show="showModal"
|
||||
title="温馨提示"
|
||||
content="是否确认退出？"
|
||||
showCancelButton
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { submitOptionsApi } from '@/services/options.js'
|
||||
import { ref } from 'vue'
|
||||
const isError = ref(false)
|
||||
|
||||
// 表单数据源
|
||||
const opinionModel = ref({
|
||||
userName: '',
|
||||
userPhone: '',
|
||||
unit: '',
|
||||
options: '',
|
||||
})
|
||||
|
||||
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: '请填写正确的手机号码',
|
||||
},
|
||||
],
|
||||
options: [
|
||||
{
|
||||
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) {
|
||||
console.log('opinionModel.value', opinionModel.value)
|
||||
const res = await submitOptionsApi(opinionModel.value)
|
||||
|
||||
if (res.code === 0) {
|
||||
uni.$u.toast('提交成功')
|
||||
isSuccess.value = true
|
||||
opinionModel.value.options = ''
|
||||
opinionModel.value.userPhone = ''
|
||||
opinionModel.value.userName = ''
|
||||
opinionModel.value.unit = ''
|
||||
} else {
|
||||
uni.$u.toast(res.msg + '提交失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 处理验证错误
|
||||
})
|
||||
uni.navigateTo({ url: '/pages/opinion/index' })
|
||||
}
|
||||
|
||||
// 继续填写
|
||||
const onContinueFill = () => {
|
||||
isSuccess.value = false
|
||||
}
|
||||
// 退出
|
||||
const onExit = () => {
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
// 确认退出
|
||||
const onConfirm = () => {
|
||||
uni.redirectTo({ url: '/pages/index/index' })
|
||||
if (isError.value) {
|
||||
uni.redirectTo({ url: '/pages/error/index' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
.text-box {
|
||||
line-height: 2.2;
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,44 +10,64 @@
|
|||
labelWidth="auto"
|
||||
class="opinion-form"
|
||||
>
|
||||
<up-form-item label="姓名" prop="userName" required>
|
||||
<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" required>
|
||||
<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-form-item label="意见归属单位/部门" prop="userCompany">
|
||||
<up-input
|
||||
v-model="opinionModel.unit"
|
||||
class="input-content"
|
||||
placeholder="填写归属单位/部门"
|
||||
clearable
|
||||
/>
|
||||
</up-form-item>
|
||||
</up-form-item> -->
|
||||
<up-form-item label="意见" prop="options" required>
|
||||
<up-textarea
|
||||
v-model="opinionModel.options"
|
||||
placeholder="请输入内容"
|
||||
class="input-content"
|
||||
style="min-height: 30vh"
|
||||
:maxlength="3"
|
||||
: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"
|
||||
accept="image"
|
||||
@delete="deletePic"
|
||||
:fileList="fileList"
|
||||
@afterRead="afterRead"
|
||||
/>
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item>
|
||||
<up-button
|
||||
type="primary"
|
||||
text="提交意见"
|
||||
style="margin-top: 30rpx"
|
||||
@tap="onSubmitOptions"
|
||||
></up-button>
|
||||
/>
|
||||
</up-form-item>
|
||||
</up-form>
|
||||
</template>
|
||||
|
||||
|
|
@ -60,17 +80,17 @@
|
|||
<view style="width: 100vw">
|
||||
<up-button
|
||||
type="primary"
|
||||
text="继续填写"
|
||||
text="返回"
|
||||
@tap="onContinueFill"
|
||||
style="width: 95%; margin: 30rpx auto"
|
||||
/>
|
||||
<up-button
|
||||
<!-- <up-button
|
||||
text="退出"
|
||||
:plain="true"
|
||||
type="primary"
|
||||
@tap="onExit"
|
||||
style="width: 95%; margin: 0 auto"
|
||||
/>
|
||||
/> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -88,8 +108,6 @@
|
|||
import { submitOptionsApi } from '@/services/options.js'
|
||||
import { ref } from 'vue'
|
||||
|
||||
console.log('submitOptionsApi', submitOptionsApi)
|
||||
|
||||
// 表单数据源
|
||||
const opinionModel = ref({
|
||||
userName: '',
|
||||
|
|
@ -97,30 +115,43 @@ const opinionModel = ref({
|
|||
unit: '',
|
||||
options: '',
|
||||
})
|
||||
const opinionRules = ref({
|
||||
userName: {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写姓名',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
userPhone: [
|
||||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写电话',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$/,
|
||||
// 正则检验前先将值转为字符串
|
||||
transform(value) {
|
||||
return String(value)
|
||||
},
|
||||
message: '请填写正确的手机号码',
|
||||
},
|
||||
],
|
||||
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: '请填写正确的手机号码',
|
||||
// },
|
||||
// ],
|
||||
options: [
|
||||
{
|
||||
type: 'string',
|
||||
|
|
@ -128,6 +159,10 @@ const opinionRules = ref({
|
|||
message: '请填写意见',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
{
|
||||
max: 500,
|
||||
message: '字数不能超过500',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
|
|
@ -179,6 +214,54 @@ const onExit = () => {
|
|||
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)
|
||||
let fileListLen = fileList.value.length
|
||||
lists.map((item) => {
|
||||
fileList.value.push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中',
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await uploadFilePromise(lists[i].url)
|
||||
let item = fileList.value[fileListLen]
|
||||
fileList.value.splice(fileListLen, 1, {
|
||||
...item,
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result,
|
||||
})
|
||||
fileListLen++
|
||||
}
|
||||
}
|
||||
|
||||
const uploadFilePromise = (url) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let a = uni.uploadFile({
|
||||
url: 'http://192.168.2.21:7001/upload',
|
||||
filePath: url,
|
||||
name: 'file',
|
||||
formData: {
|
||||
user: 'test',
|
||||
},
|
||||
success: (res) => {
|
||||
setTimeout(() => {
|
||||
resolve(res.data.data)
|
||||
}, 1000)
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -188,9 +271,11 @@ const onConfirm = () => {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
overflow-y: auto;
|
||||
}
|
||||
::v-deep .opinion-form {
|
||||
width: 90%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.input-content {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
import { useMemberStore } from '@/stores'
|
||||
|
||||
console.log('useMemberStore()', useMemberStore())
|
||||
|
||||
/**
|
||||
* 添加拦截器
|
||||
* 拦截 request 请求
|
||||
* baseURL 设置请求ip地址和端口
|
||||
*/
|
||||
const ENV = process.env.NODE_ENV
|
||||
const baseURL = ENV === 'development' ? 'http://192.168.0.38:8080' : 'http://192.168.0.14:21666'
|
||||
const baseURL = ENV === 'development' ? '/api' : 'http://192.168.0.14:21666'
|
||||
|
||||
/**
|
||||
* httpInterceptor 分别拦截 request 和 uploadFile 请求
|
||||
|
|
|
|||
Loading…
Reference in New Issue