laishajiang
2 years ago
19 changed files with 1695 additions and 136 deletions
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 872 B |
@ -1,14 +1,18 @@
|
||||
<template> |
||||
<div class="wrapper"> |
||||
|
||||
<div class="wrapper" style="overflow:hidden;display:flex;flex-direction: column;"> |
||||
<el-scrollbar> |
||||
<header> |
||||
<img src="/imgs/bg_web.png" alt="" /> |
||||
</header> |
||||
<main> |
||||
<router-view /> |
||||
</main> |
||||
</el-scrollbar> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,132 @@
|
||||
/** |
||||
* 验证身份证号码 |
||||
* @param { String } code 身份证号码 |
||||
*/ |
||||
export function validatorIdCard(rule,code,callback) { |
||||
|
||||
// 身份证号前两位代表区域
|
||||
const city = { |
||||
11: '北京', |
||||
12: '天津', |
||||
13: '河北', |
||||
14: '山西', |
||||
15: '内蒙古', |
||||
21: '辽宁', |
||||
22: '吉林', |
||||
23: '黑龙江 ', |
||||
31: '上海', |
||||
32: '江苏', |
||||
33: '浙江', |
||||
34: '安徽', |
||||
35: '福建', |
||||
36: '江西', |
||||
37: '山东', |
||||
41: '河南', |
||||
42: '湖北 ', |
||||
43: '湖南', |
||||
44: '广东', |
||||
45: '广西', |
||||
46: '海南', |
||||
50: '重庆', |
||||
51: '四川', |
||||
52: '贵州', |
||||
53: '云南', |
||||
54: '西藏 ', |
||||
61: '陕西', |
||||
62: '甘肃', |
||||
63: '青海', |
||||
64: '宁夏', |
||||
65: '新疆', |
||||
71: '台湾', |
||||
81: '香港', |
||||
82: '澳门', |
||||
91: '国外 ', |
||||
}; |
||||
const idCardReg = /^[1-9]\d{5}(19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i; // 身份证格式正则表达式
|
||||
// 如果身份证不满足格式正则表达式
|
||||
if (!code) { |
||||
callback(new Error('请输入身份证号码')); |
||||
|
||||
} |
||||
if (!code.match(idCardReg)) { |
||||
callback(new Error('请输入正确的身份证号码')); |
||||
|
||||
}
|
||||
if (!city[code.substr(0, 2)]) { |
||||
// 区域数组中不包含需验证的身份证前两位
|
||||
callback(new Error('请输入正确的身份证号码')); |
||||
|
||||
} |
||||
if (code.length === 18) { |
||||
// 18位身份证需要验证最后一位校验位
|
||||
code = code.split(''); |
||||
// ∑(ai×Wi)(mod 11)
|
||||
// 加权因子
|
||||
const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; |
||||
// 校验位
|
||||
const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]; |
||||
let sum = 0; |
||||
let ai = 0; |
||||
let wi = 0; |
||||
for (let i = 0; i < 17; i++) { |
||||
ai = parseInt(code[i]); |
||||
wi = factor[i]; |
||||
sum += ai * wi; // 开始计算并相加
|
||||
} |
||||
const last = parity[sum % 11]; // 求余
|
||||
if (last.toString() !== code[17]) { |
||||
callback(new Error('请输入正确的身份证号码')); |
||||
} |
||||
} |
||||
return true |
||||
} |
||||
|
||||
/** |
||||
* 校验手机号 |
||||
* @param {*} phonenumber
|
||||
* @returns
|
||||
*/ |
||||
export function validatorPhone(rule,phonenumber,callback) { |
||||
console.log("phonenumber"+phonenumber) |
||||
if (!phonenumber) { |
||||
callback(new Error('请输入手机号码')); |
||||
} |
||||
if (!/^1[3456789]\d{9}/.test(phonenumber)) { |
||||
callback(new Error('请输入正确的手机号码')); |
||||
} |
||||
return true |
||||
} |
||||
|
||||
/** |
||||
* 校验手机号 |
||||
* @param {*} phonenumber
|
||||
* @returns
|
||||
*/ |
||||
export function Phone(phonenumber) { |
||||
if (!phonenumber) { |
||||
return '请输入手机号码'; |
||||
} |
||||
if (!/^1[3456789]\d{9}/.test(phonenumber)) { |
||||
return '请输入手机号码'; |
||||
} |
||||
return true |
||||
} |
||||
|
||||
|
||||
/** |
||||
* 校验内容长度 |
||||
* @param {*} content |
||||
* @returns
|
||||
*/ |
||||
export function validatorContent(rule,content,callback) { |
||||
if (!content) { |
||||
callback(new Error('请输入信件内容')); |
||||
} |
||||
if (content.length < 10) { |
||||
callback(new Error('信件内容不能少于 10 个字')); |
||||
} |
||||
if (content.length > 300) { |
||||
callback(new Error('信件内容不能多于 300 个字')); |
||||
} |
||||
return true |
||||
} |
||||
@ -0,0 +1,184 @@
|
||||
<template> |
||||
|
||||
<div class="wrapper"> |
||||
<div class="card_first"> |
||||
<h2>基本信息</h2> |
||||
<div class="row flex"> |
||||
<label>信件标题</label> |
||||
<span>{{ mail.title }}</span> |
||||
</div> |
||||
<div class="row flex"> |
||||
<label>联系人姓名</label> |
||||
<span>{{ mail.contactName }}</span> |
||||
</div> |
||||
<div class="row flex"> |
||||
<label>联系人电话</label> |
||||
<span>{{ mail.contactPhone }}</span> |
||||
</div> |
||||
<div class="row flex"> |
||||
<label>证件号码</label> |
||||
<span>{{ mail.contactIdCard }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="card_second"> |
||||
<h2>信件内容</h2> |
||||
<div class="row flex" > |
||||
<label>案件编号</label> |
||||
<span>{{ mail.caseNumber }}</span> |
||||
</div> |
||||
<div class="row"> |
||||
<label>案件内容</label> |
||||
<div class="textarea text-wrap">{{ mail.content }}</div> |
||||
</div> |
||||
<div class="row"> |
||||
<label>附件</label> |
||||
<div class="attachments" v-if="mail.attachments"> |
||||
<template |
||||
v-for="(file, index) in JSON.parse(mail.attachments)" |
||||
:key="index" |
||||
> |
||||
<img :src="`/api/file/stream/${file.filepath}`" @click="handleShowImgPreview(`/api/file/stream/${file.filepath}`)" /> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Loading :loading="loading" /> |
||||
|
||||
</template> |
||||
<script setup> |
||||
import { useRoute } from "vue-router"; |
||||
import { getMail } from "@/api/mail"; |
||||
|
||||
|
||||
const props = defineProps(["message"]); |
||||
if (props.message) { |
||||
console.log(props.message,9999); |
||||
console.log("msg"+props.message) |
||||
getMail(props.message).then((data) => { |
||||
mail.value = data; |
||||
loading.value = false; |
||||
}); |
||||
} |
||||
const route = useRoute(); |
||||
const loading = ref(true); |
||||
const mail = ref({}); |
||||
|
||||
function onMounted(){ |
||||
|
||||
} |
||||
const showImgPreview = ref(false); |
||||
const imgFilepath = ref(""); |
||||
function handleShowImgPreview(filepath) { |
||||
imgFilepath.value = filepath; |
||||
showImgPreview.value = true; |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.card_first { |
||||
width: 1200px; |
||||
height: 172.5px; |
||||
background: #FFFFFF; |
||||
box-shadow: inset 0px -1px 0px 0px rgba(227,227,227,1); |
||||
padding-bottom: var(--van-padding-md); |
||||
h2{ |
||||
width: 48px; |
||||
height: 17px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 12px; |
||||
color: #333333; |
||||
font-weight: 400; |
||||
margin-bottom:15px ; |
||||
} |
||||
label{ |
||||
width: 90px; |
||||
height: 20px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 14px; |
||||
color: #666666; |
||||
letter-spacing: 0; |
||||
font-weight: 400; |
||||
} |
||||
span{ |
||||
width: 229px; |
||||
height: 20px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 14px; |
||||
color: #333333; |
||||
letter-spacing: 0; |
||||
font-weight: 400; |
||||
} |
||||
.row.flex{ |
||||
margin-bottom:15px ; |
||||
} |
||||
} |
||||
.card_second{ |
||||
width: 1200px; |
||||
height: 365px; |
||||
background: #FFFFFF; |
||||
box-shadow: inset 0px -1px 0px 0px rgba(227,227,227,1); |
||||
label{ |
||||
width: 90px; |
||||
height: 20px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 14px; |
||||
color: #666666; |
||||
letter-spacing: 0; |
||||
font-weight: 400; |
||||
} |
||||
span{ |
||||
width: 229px; |
||||
height: 20px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 14px; |
||||
color: #333333; |
||||
letter-spacing: 0; |
||||
font-weight: 400; |
||||
} |
||||
h2{ |
||||
width: 48px; |
||||
height: 17px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 12px; |
||||
color: #333333; |
||||
font-weight: 400; |
||||
} |
||||
.row{ |
||||
margin-top: 16px; |
||||
} |
||||
.row.flex{ |
||||
margin-top: 16px; |
||||
} |
||||
.textarea.text-wrap{ |
||||
background: #FFFFFF; |
||||
border: 0.5px solid rgba(217,217,217,1); |
||||
border-radius: 2px; |
||||
margin-left: 14px; |
||||
margin-top: 16px; |
||||
width: 1134px; |
||||
height: 60px; |
||||
font-family: PingFangSC-Regular; |
||||
font-size: 14px; |
||||
color: #333333; |
||||
font-weight: 400; |
||||
} |
||||
} |
||||
img{ |
||||
width:120px; |
||||
height: 120px; |
||||
} |
||||
|
||||
::v-deep .el-tabs__item { |
||||
width: 400px; |
||||
height: 33px; |
||||
font-family: PingFang SC; |
||||
font-size: 24px; |
||||
color: #333333 100%; |
||||
text-align: center; |
||||
font-weight: 400; |
||||
margin-bottom: 1.2%; |
||||
} |
||||
|
||||
|
||||
</style> |
||||
@ -0,0 +1,46 @@
|
||||
<template> |
||||
<div class="LoginPageBackground"> |
||||
<div class="LoginPage"> |
||||
<p>正在登录到 长沙市统一认证平台</p> |
||||
<CorporateLogin style="position: relative; top: 100px;"/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import { ref } from 'vue' |
||||
import PersonLogin from './components/PersonLogin.vue'; |
||||
import CorporateLogin from './components/CorporateLogin.vue'; |
||||
const activeName = ref('first') |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.LoginPageBackground{ |
||||
width: 1200px; |
||||
height: 617px; |
||||
background-color: #2281cfc4; |
||||
position: relative; |
||||
top: -17px; |
||||
} |
||||
p{ |
||||
font-size: 25px; |
||||
font-weight: 600; |
||||
position: relative; |
||||
top:40px; |
||||
left: 120px; |
||||
} |
||||
|
||||
.LoginPage{ |
||||
width: 600px; |
||||
height: 555px; |
||||
background-color:white; |
||||
position: relative; |
||||
top: 60px; |
||||
left: 300px; |
||||
} |
||||
::v-deep .el-tabs__content{ |
||||
height: 300px; |
||||
} |
||||
|
||||
::v-deep .el-tabs__item{ |
||||
font-size:25px ; |
||||
} |
||||
</style> |
||||
@ -1,78 +1,96 @@
|
||||
<template> |
||||
<el-form :model="form" label-width="120px"> |
||||
<el-form-item label="Activity name"> |
||||
<el-input v-model="form.name" /> |
||||
</el-form-item> |
||||
<el-form-item label="Activity zone"> |
||||
<el-select v-model="form.region" placeholder="please select your zone"> |
||||
<el-option label="Zone one" value="shanghai" /> |
||||
<el-option label="Zone two" value="beijing" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="Activity time"> |
||||
<el-col :span="11"> |
||||
<el-date-picker |
||||
v-model="form.date1" |
||||
type="date" |
||||
placeholder="Pick a date" |
||||
style="width: 100%" |
||||
/> |
||||
</el-col> |
||||
<el-col :span="2" class="text-center"> |
||||
<span class="text-gray-500">-</span> |
||||
</el-col> |
||||
<el-col :span="11"> |
||||
<el-time-picker |
||||
v-model="form.date2" |
||||
placeholder="Pick a time" |
||||
style="width: 100%" |
||||
/> |
||||
</el-col> |
||||
</el-form-item> |
||||
<el-form-item label="Instant delivery"> |
||||
<el-switch v-model="form.delivery" /> |
||||
</el-form-item> |
||||
<el-form-item label="Activity type"> |
||||
<el-checkbox-group v-model="form.type"> |
||||
<el-checkbox label="Online activities" name="type" /> |
||||
<el-checkbox label="Promotion activities" name="type" /> |
||||
<el-checkbox label="Offline activities" name="type" /> |
||||
<el-checkbox label="Simple brand exposure" name="type" /> |
||||
</el-checkbox-group> |
||||
</el-form-item> |
||||
<el-form-item label="Resources"> |
||||
<el-radio-group v-model="form.resource"> |
||||
<el-radio label="Sponsor" /> |
||||
<el-radio label="Venue" /> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item label="Activity form"> |
||||
<el-input v-model="form.desc" type="textarea" /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="onSubmit">Create</el-button> |
||||
<el-button>Cancel</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<el-tabs v-model="pageStore.mailTabActive" class="demo-tabs" |
||||
:stretch="false" style=" margin-top: 1%; " @tab-change="handleClickOfWrite"> |
||||
<el-tab-pane label="我要写信" name="write" ref="cab1" style=" min-height: 100vh;min-width: 1200px;" ><WriteInfo @childWriter-msg="getChildWriteMsg" /></el-tab-pane> |
||||
<el-tab-pane label="我的信件" name="my" @tab-click="handleClick" style=" min-height: 100vh;min-width: 1200px;"> |
||||
<MyMail v-if="chooseTab=='isList'" @child-msg="getChildMsg" /> |
||||
<MailDetail :message="message" v-else/> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="草稿箱" name="draft" style=" min-height: 100vh;min-width: 1200px;"> |
||||
<MailDraft :message_draft="message_draft" @child-msg="getMailDraftChildMsg"/> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
|
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { reactive } from 'vue' |
||||
<script lang="ts" setup> |
||||
import { reactive } from 'vue' |
||||
import { ref } from 'vue' |
||||
import WriteInfo from './components/WriteInfo.vue'; |
||||
import MyMail from './components/MyMail.vue'; |
||||
import MailDraft from './components/MailDraft.vue'; |
||||
import MailDetail from '../views/MailDetail.vue'; |
||||
import type { TabsPaneContext } from 'element-plus' |
||||
import { useRoute } from "vue-router"; |
||||
import PageStore from '../store/page'; |
||||
|
||||
const chooseTab = ref('isList'); |
||||
const route = useRoute(); |
||||
|
||||
const pageStore = PageStore() |
||||
if(route.query.active){ |
||||
pageStore.mailTabActive = route.query.active |
||||
}else{ |
||||
pageStore.mailTabActive = "write" |
||||
|
||||
} |
||||
|
||||
const message = ref("1"); |
||||
const message_draft = ref("1"); |
||||
const activeName = ref('first') |
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => { |
||||
|
||||
} |
||||
const handleClickOfWrite = (name) => { |
||||
console.log(chooseTab.value) |
||||
|
||||
chooseTab.value = 'isList' |
||||
|
||||
} |
||||
|
||||
function getChildMsg(msg) { |
||||
console.log("这就是子组件传过来的msg" + msg) |
||||
chooseTab.value = 'isDetail' |
||||
message.value = msg |
||||
console.log("aaa"+message.value) |
||||
|
||||
// do not use same name with ref |
||||
const form = reactive({ |
||||
name: '', |
||||
region: '', |
||||
date1: '', |
||||
date2: '', |
||||
delivery: false, |
||||
type: [], |
||||
resource: '', |
||||
desc: '', |
||||
}) |
||||
} |
||||
function getChildWriteMsg(msg) { |
||||
// console.log("这就是子组件传过来的msg" + msg) |
||||
activeName.value = msg |
||||
// console.log("aaa"+activeName.value) |
||||
} |
||||
function getMailDraftChildMsg(msg) { |
||||
activeName.value = "first" |
||||
console.log("这就是子组件传过来的msg" + msg) |
||||
message_draft.value = msg |
||||
console.log("message_draft"+message_draft.value) |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
const onSubmit = () => { |
||||
console.log('submit!') |
||||
} |
||||
</script> |
||||
::v-deep .el-tabs__item { |
||||
font-family: PingFang SC; |
||||
font-size: 24px; |
||||
color: #333333 100%; |
||||
text-align: center; |
||||
font-weight: 400; |
||||
margin-bottom: 1.2%; |
||||
} |
||||
::v-deep .el-tabs__content { |
||||
display: flex; |
||||
} |
||||
::v-deep .el-tabs__item .is-active { |
||||
color: #0E5A98 100%; |
||||
} |
||||
::v-deep .el-tabs__active-bar { |
||||
|
||||
background-color: #0E5A98 100%; |
||||
} |
||||
::v-deep .el-tabs__nav{ |
||||
justify-content: space-around; |
||||
float: none; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,107 @@
|
||||
<template> |
||||
<el-card style="height: 250px;width: 400px; position: relative;left: 100px;top: 40px;"> |
||||
<el-form :model="formData" style="position: relative;top: 20px;" :rules="rules" ref="formRef" label-width="75px" > |
||||
<el-form-item label="账号" prop="contactPhone" > |
||||
<el-input placeholder="请输入手机号" size="medium" v-model="formData.contactPhone" clearable ></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="验证码" prop="code"> |
||||
<el-input v-model="formData.code" size="medium" placeholder="请输入验证码" /> |
||||
</el-form-item> |
||||
<el-button style="position: relative; left: 275px;top: -15px;" |
||||
size="small" |
||||
type="primary" |
||||
@click="smsSendCode" |
||||
:disabled="sendBtnDisabled" |
||||
class="send-btn" |
||||
>{{ |
||||
sendBtnDisabled |
||||
? `${time}秒后重发` |
||||
: "发送验证码" |
||||
}}</el-button> |
||||
|
||||
<el-button type="primary" @click="handleLogin" style="width: 100%;">登录</el-button> |
||||
</el-form> |
||||
</el-card> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { validatorPhone,Phone} from "@/util/validator copy"; |
||||
import { reactive } from 'vue' |
||||
import { ref } from 'vue' |
||||
import { setToken, getToken } from "@/util/cookie"; |
||||
import {login} from "@/api/auth" |
||||
import { sendLogin } from "@/api/sms"; |
||||
import { useRoute, useRouter } from "vue-router"; |
||||
const router = useRouter(); |
||||
const sendBtnDisabled = ref(false); |
||||
let time = ref(30); |
||||
const formRef = ref(); |
||||
const formData = ref({ |
||||
contactPhone: '', |
||||
smsRequestId: '', |
||||
code:'', |
||||
}) |
||||
const rules= { |
||||
contactPhone: [{ required: true, validator: validatorPhone, trigger: "blur" }, |
||||
], |
||||
code:[{ required: true, message: "请输入验证码", trigger: "blur" }, |
||||
], |
||||
} |
||||
function smsSendCode() { |
||||
formRef.value.validateField('contactPhone', (valid) => { |
||||
if (valid) { |
||||
sendBtnDisabled.value = true; |
||||
//发请求 |
||||
sendLogin(formData.value.contactPhone).then((data) => { |
||||
formData.value.smsRequestId = data.requestId; |
||||
}); |
||||
let timer = setInterval(() => { |
||||
time.value -= 1; |
||||
if (time.value <= 0) { |
||||
sendBtnDisabled.value = false; |
||||
clearInterval(timer); |
||||
time.value = 30; |
||||
} |
||||
}, 1000); |
||||
} else { |
||||
return; |
||||
} |
||||
}); |
||||
|
||||
|
||||
} |
||||
// 登录处理 |
||||
const handleLogin = async () => { |
||||
await formRef.value?.validate(); |
||||
login({ |
||||
phone: formData.value.contactPhone, |
||||
code: formData.value.code, |
||||
smsRequestId:formData.value.smsRequestId |
||||
}).then(data => { |
||||
setToken(data.token) |
||||
router.push('/') |
||||
console.log("aaaaaaaaaaaaaa") |
||||
ElMessage({ |
||||
message: '登录成功', |
||||
type: 'success', |
||||
|
||||
}) |
||||
}).catch((error) => { |
||||
console.log("bbbbbbbbbbbbbb"+error) |
||||
ElMessage({ |
||||
message: '登录失败，验证码错误', |
||||
type: 'error', |
||||
}) |
||||
}) |
||||
}; |
||||
|
||||
|
||||
|
||||
function saveUsername(username) { |
||||
localStorage.setItem('username', username); |
||||
} |
||||
|
||||
function getUsername() { |
||||
return localStorage.getItem('username'); |
||||
} |
||||
</script> |
||||
@ -0,0 +1,177 @@
|
||||
<template> |
||||
<el-dialog |
||||
v-model="dialogVisible" |
||||
title="提示" |
||||
width="30%" |
||||
|
||||
> |
||||
<span>确认删除该草稿吗？</span> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="dialogVisible = false">取消</el-button> |
||||
<el-button type="primary" @click="dialogChoose()"> |
||||
确定 |
||||
</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
<el-scrollbar> |
||||
<div v-if="mails.length<=0" v-loading="loading" st> |
||||
<h2 style="position: relative; left: 570px;">无草稿</h2> |
||||
</div> |
||||
|
||||
<div v-else v-loading="loading"> |
||||
|
||||
<div class="card" v-for="mail in mails" :key="mail.id" > |
||||
<header class="title" @click="goWraiteMail(mail.id)"> |
||||
{{ mail.title }} |
||||
</header> |
||||
<div class="content">信件日期：{{ mail.createTime }}</div> |
||||
<div class="deleteImg"> |
||||
<img src="/imgs/web_btn_delete.png" alt="" @click="handleDel(mail.id)"/> |
||||
</div> |
||||
</div> |
||||
<el-pagination |
||||
background |
||||
layout="prev, pager, next" |
||||
:current-page="params.current" |
||||
:page-size="params.size" |
||||
:total="total" |
||||
@current-change="handlePageChange"/> |
||||
</div> |
||||
</el-scrollbar> |
||||
</template> |
||||
<script setup> |
||||
import { useRouter } from "vue-router"; |
||||
import { listDraft, delDraft } from "@/api/mailDraft"; |
||||
import PageStore from "@/store/page"; |
||||
import { onMounted } from 'vue'; |
||||
import { updateEvaluate } from "@/api/mail"; |
||||
// import UserStore from "@/store/user"; |
||||
const loading = ref(true); |
||||
const pageStore = PageStore(); |
||||
const route = useRoute(); |
||||
const router = useRouter(); |
||||
const total = ref(0) |
||||
const params = ref({ |
||||
size: 6, |
||||
current: 1, |
||||
}); |
||||
const mails = ref([]); |
||||
const mailId = ref([]); |
||||
const dialogVisible = ref(false) |
||||
function handlePageChange(currentPage) { |
||||
params.value.current = currentPage |
||||
getListDraft() |
||||
|
||||
// 在此刷新数据 |
||||
} |
||||
function getListDraft(){ |
||||
listDraft(params.value).then((data) => { |
||||
loading.value = false; |
||||
total.value = data.total; |
||||
params.value.size = data.size |
||||
mails.value = data.records; |
||||
}); |
||||
} |
||||
onMounted(() => { |
||||
getListDraft() |
||||
}) |
||||
|
||||
function handleDel(id) { |
||||
dialogVisible.value = true; |
||||
mailId.val = id |
||||
} |
||||
function dialogChoose(){ |
||||
loading.value = true; |
||||
delDraft(mailId.val).then(() => { |
||||
loading.value = false; |
||||
mails.value.splice(mails.value.findIndex((item) => item.id === mailId.val), 1) |
||||
ElMessage({ |
||||
message: '删除成功', |
||||
type: 'success', |
||||
}) |
||||
}); |
||||
dialogVisible.value = false |
||||
} |
||||
|
||||
|
||||
function goWraiteMail(id) { |
||||
pageStore.mailDraftId = id; |
||||
pageStore.mailTabActive = "write"; |
||||
console.log("mailid"+pageStore.mailDraftId) |
||||
} |
||||
function refresh() { |
||||
mails.value = []; |
||||
params.value.current = 1; |
||||
finished.value = false |
||||
// onLoad() |
||||
} |
||||
|
||||
watch(() => pageStore.myMailDraftRefresh, (val) => { |
||||
|
||||
if (val) { |
||||
getListDraft() |
||||
pageStore.myMailDraftRefresh = false; |
||||
console.log("pageStore.myMailDraftRefreshLater"+pageStore.myMailDraftRefresh) |
||||
} |
||||
}) |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.title{ |
||||
width: 500px; |
||||
height: 30px; |
||||
font-family: PingFang-SC-Bold; |
||||
font-size: 17px; |
||||
color: #333333; |
||||
letter-spacing: 0; |
||||
font-weight: 700; |
||||
cursor: pointer; |
||||
} |
||||
.content{ |
||||
position: relative; |
||||
top: -5px; |
||||
width: 100; |
||||
height: 17px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 12px; |
||||
color: #666666; |
||||
letter-spacing: 0; |
||||
font-weight: 400; |
||||
} |
||||
::v-deep footer{ |
||||
position: relative; top: 8px; |
||||
span{ |
||||
width: 150px; |
||||
height: 30px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 14px; |
||||
color: #333333; |
||||
letter-spacing: 0; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
} |
||||
.card{ |
||||
margin-left: 10px; |
||||
padding-bottom: 0px; |
||||
|
||||
.deleteImg{ |
||||
width: 33px; |
||||
height: 33px; |
||||
position: relative; |
||||
top:-80px; |
||||
left: 1100px; |
||||
cursor: pointer; |
||||
} |
||||
img{ |
||||
width: 33px; |
||||
height: 33px; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.el-pagination{ |
||||
position: relative; |
||||
left: 580px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,201 @@
|
||||
<template > |
||||
<div v-if="mails.length<=0" v-loading="loading" style="display: flex;justify-content: center;"> |
||||
<h2>暂无信件</h2> |
||||
</div> |
||||
<div v-else v-loading="loading" style="display: flex;flex-direction: column;"> |
||||
<el-scrollbar> |
||||
<div class="card" style="display: flex;flex-direction: column;" v-for=" (mail,index) in mails" :key="mail.id" > |
||||
<header class="title" @click="gotoMailDetail(mail.id)"> |
||||
{{ mail.title }} |
||||
</header> |
||||
<div class="content" style="display: flex;align-items: flex-start"><span>信件日期：{{ mail.createTime }}</span></div> |
||||
<footer class="flex v-center between" style="display: flex;align-items: center; justify-content:unset;height: 8vh;" > |
||||
|
||||
<span style="display: flex;align-items: center;">评价本次办理服务</span> |
||||
<div class="satisfaction_style" ref="myref" v-if="!mail.satisfaction" style="margin-left: 80px;display: flex;align-items: center;" > |
||||
<el-radio-group v-model="mailDataList[index]" @change="satischange()" > |
||||
<el-radio label="NOT_SATISFIED" ref="satis">不满意</el-radio> |
||||
<el-radio label="BASICALLY_SATISFIED">基本满意</el-radio> |
||||
<el-radio label="SATISFIED" >满意</el-radio> |
||||
</el-radio-group> |
||||
<el-button @click="sumbit(mailDataList[index],mail.id,index)">提交</el-button> |
||||
</div> |
||||
|
||||
<div v-else class="satisfaction_style"> |
||||
{{satisfactions[mail.satisfaction]}} |
||||
</div> |
||||
</footer> |
||||
</div> |
||||
|
||||
<el-pagination |
||||
style="display: flex;align-content: center;justify-content: center;" |
||||
background |
||||
layout="prev, pager, next" |
||||
:current-page="params.current" |
||||
:page-size="params.size" |
||||
:total="total" |
||||
@current-change="handlePageChange"/> |
||||
</el-scrollbar> |
||||
|
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
const loading = ref(true); |
||||
import { useRouter } from "vue-router"; |
||||
import { listMail } from "@/api/mail"; |
||||
import PageStore from "@/store/page"; |
||||
import { onMounted } from 'vue'; |
||||
import { updateEvaluate } from "@/api/mail"; |
||||
// import UserStore from "@/store/user"; |
||||
const pageStore = PageStore(); |
||||
const route = useRoute(); |
||||
const router = useRouter(); |
||||
const mailDataList = ref([]) |
||||
const myref = ref([]) |
||||
const satisfactions = { |
||||
NOT_SATISFIED: "不满意", |
||||
BASICALLY_SATISFIED: "基本满意", |
||||
SATISFIED: "满意", |
||||
}; |
||||
const satis = ref(); |
||||
function satischange(){ |
||||
console.log("myref.value"+myref) |
||||
console.log(satis) |
||||
} |
||||
|
||||
const total = ref(0) |
||||
const params = ref({ |
||||
size: 10, |
||||
current: 1, |
||||
}); |
||||
|
||||
function handlePageChange(currentPage) { |
||||
params.value.current = currentPage |
||||
getListMail() |
||||
|
||||
// 在此刷新数据 |
||||
} |
||||
|
||||
const mails = ref([]); |
||||
const const_satisfaction = ''; |
||||
const mailData = []; |
||||
function getListMail(){ |
||||
listMail(params.value).then((data) => { |
||||
loading.value = false; |
||||
total.value = data.total; |
||||
params.value.size = data.size |
||||
// params.value.current = data.current |
||||
mails.value = data.records; |
||||
// const_satisfaction = mails.value.satisfaction; |
||||
// mailDataList.value = mails.value.satisfaction |
||||
// console.log(mailDataList) |
||||
}); |
||||
} |
||||
onMounted(() => { |
||||
getListMail() |
||||
}) |
||||
// const mailId = ref(); |
||||
const centerDialogVisible=ref(false) |
||||
const emit = defineEmits(['child-msg']) |
||||
const satisfaction = ref(route.query.satisfaction || "SATISFIED"); |
||||
function sumbit(satisfaction,id,index) { |
||||
if(satisfaction == null){ |
||||
ElMessage({ |
||||
message: '请选择评价', |
||||
type: 'warning', |
||||
}) |
||||
return; |
||||
} |
||||
ElMessageBox.confirm( |
||||
'确定提交评价吗？', |
||||
'提示', |
||||
{ |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
} |
||||
) |
||||
.then(() => { |
||||
updateEvaluate({ |
||||
mailId: id, |
||||
satisfaction: satisfaction |
||||
}).then(data => { |
||||
mails.value[index].satisfaction = satisfaction |
||||
loading.value = false; |
||||
ElMessage({ |
||||
message: '提交成功', |
||||
type: 'success', |
||||
}) |
||||
}) |
||||
}) |
||||
.catch(() => { |
||||
loading.value = false, |
||||
ElMessage({ |
||||
type: 'info', |
||||
message: '取消提交', |
||||
}) |
||||
}) |
||||
} |
||||
function gotoMailDetail(id){ |
||||
emit('child-msg', id) |
||||
} |
||||
watch(() => pageStore.myMailRefresh, (val) => { |
||||
if (val) { |
||||
getListMail() |
||||
pageStore.myMailRefresh = false; |
||||
} |
||||
}) |
||||
|
||||
|
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.title{ |
||||
width: 500px; |
||||
height: 30px; |
||||
font-family: PingFang-SC-Bold; |
||||
font-size: 17px; |
||||
color: #333333; |
||||
letter-spacing: 0; |
||||
font-weight: 700; |
||||
cursor: pointer; |
||||
} |
||||
.content{ |
||||
|
||||
height: 2vh; |
||||
|
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 12px; |
||||
color: #666666; |
||||
letter-spacing: 0; |
||||
font-weight: 400; |
||||
} |
||||
::v-deep footer{ |
||||
// span{ |
||||
|
||||
// height: 5vh; |
||||
// font-family: PingFang-SC-Regular; |
||||
// font-size: 14px; |
||||
// color: #333333; |
||||
// letter-spacing: 0; |
||||
// font-weight: 400; |
||||
// } |
||||
.el-button{ |
||||
margin-left: 50px; |
||||
width: 45px; |
||||
height: 24px; |
||||
background: #0E5A98; |
||||
border-radius: 2px; |
||||
span{ |
||||
width: 24px; |
||||
|
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 12px; |
||||
color: #FFFFFF; |
||||
letter-spacing: 0; |
||||
text-align: right; |
||||
font-weight: 400; |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,19 @@
|
||||
<template> |
||||
<div> |
||||
<img style="height: 200px;width: 200px;position: relative;left: 200px;top: 20px;" src="/public/logo.png"> |
||||
</div> |
||||
<p>请使用本人<span style="font-weight: bold;"> 微信 </span>扫描上方小程序登录、注册</p> |
||||
<p> 如没有账号，系统将自动注册新账号</p> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
p{ |
||||
// font-size: 25px; |
||||
// font-weight: 600; |
||||
position: relative; |
||||
top:30px; |
||||
left: 170px; |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,604 @@
|
||||
<template> |
||||
|
||||
<span style=" |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 12px; |
||||
color: #666666; |
||||
font-weight: 400;">联系人信息</span> |
||||
<el-form |
||||
:model="mail" |
||||
:rules="rules" |
||||
label-width="120px" |
||||
style="margin-top: 0.9%;display: flex;flex-direction: column; |
||||
flex-wrap: nowrap;min-height: 100vh;" |
||||
label-position="left" |
||||
ref="formRef" |
||||
v-loading="loading"> |
||||
<el-form-item label="联系人姓名" :required="true" prop="contactName" > |
||||
<el-input v-model="mail.contactName" placeholder="请输入姓名" /> |
||||
</el-form-item> |
||||
<el-form-item label="称呼" prop="contactSex" > |
||||
<el-radio-group v-model="mail.contactSex" > |
||||
<el-radio label="M">先生</el-radio> |
||||
<el-radio label="F">女士</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item label="证件号码" prop="contactIdCard" type="text" > |
||||
<el-input v-model="mail.contactIdCard" placeholder="请输入证件号码" /> |
||||
</el-form-item> |
||||
<el-form-item label="联系电话" prop="contactPhone" > |
||||
<el-input v-model="mail.contactPhone" placeholder="请输入联系电话" /> |
||||
|
||||
<el-button |
||||
size="small" |
||||
type="primary" |
||||
@click="smsSendCode" |
||||
:disabled="sendBtnDisabled" |
||||
class="send-btn" |
||||
>{{ |
||||
sendBtnDisabled |
||||
? `${time}秒后重发` |
||||
: "发送验证码" |
||||
}}</el-button> |
||||
|
||||
</el-form-item> |
||||
<el-form-item label="验证码" prop="code"> |
||||
<el-input v-model="mail.code" placeholder="请输入验证码" oninput="value=value.replace(/[^\d.]/g,'')"/> |
||||
</el-form-item> |
||||
<span style="width: 48px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 12px; |
||||
color: #666666; |
||||
font-weight: 400; |
||||
position: relative; |
||||
top: -8px; |
||||
right: 9px;">信件内容</span> |
||||
<el-form-item label="案件编号" prop="caseNumber" > |
||||
<el-input v-model="mail.caseNumber" placeholder="如有具体案件编号请输入案件编号"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="被投诉/涉及单位" > |
||||
<el-select |
||||
style="top: -5px;" |
||||
v-model="mail.involvedDeptName" |
||||
placeholder="请选择单位" |
||||
@change="selectMediaId" |
||||
ref="mySelected" |
||||
> |
||||
<el-option v-for="item in depts" |
||||
:key="item.value" |
||||
:label="item.text" |
||||
:value="item.text" |
||||
ref="select" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<div class="redClass"> |
||||
<el-form-item label="信件内容" prop="content" class="contentforitem"> |
||||
|
||||
<el-input v-model="mail.content" @input="timeEffectInput" resize="none" type="textarea" class="content" placeholder="请您尽量完整的描述您的信件内容，如发生事件、涉及单位、涉及对象姓名、警号以及具体事项" /> |
||||
<!-- <span ref="contentSpan" style="">{{ mail.content ? mail.content.length : 0 }}/300</span> --> |
||||
</el-form-item> |
||||
</div> |
||||
|
||||
<div style="position: relative; display: flex; flex-direction: column;"> |
||||
<span>附件</span> |
||||
|
||||
<el-upload |
||||
|
||||
v-model:file-list="mail.attachments" |
||||
action="/api/file/upload" |
||||
:http-request="uploadAction" |
||||
:headers="headers" |
||||
list-type="picture-card" |
||||
:limit="5" |
||||
:show-file-list="true" |
||||
:auto-upload="true" |
||||
multiple |
||||
:on-success="handleSuccess" |
||||
:on-preview="handlePictureCardPreview" |
||||
:on-remove="handleRemove" |
||||
> |
||||
|
||||
</el-upload> |
||||
<span class="uploadSign">最多只能上传9张图片，支持格式为png、jpg、gif、svg</span> |
||||
<el-dialog v-model="previewVisible" title="图片预览"> |
||||
<img w-full :src="dialogImageUrl" alt="Preview Image" /> |
||||
</el-dialog> |
||||
|
||||
|
||||
<el-form-item class="commit"> |
||||
<el-button class="button1" @click="handleSaveDraft">存稿</el-button> |
||||
<el-button class="button2" @click="handleSave">提交</el-button> |
||||
</el-form-item> |
||||
</div> |
||||
</el-form> |
||||
|
||||
</template> |
||||
<script setup> |
||||
import { reactive } from 'vue' |
||||
import { ref } from 'vue' |
||||
import { validatorIdCard, validatorPhone ,validatorContent,Phone} from "@/util/validator copy"; |
||||
import { getToken } from "@/util/cookie"; |
||||
// import UserStore from "@/store/user"; |
||||
import PageStore from "@/store/page"; |
||||
import { addMail } from "@/api/mail"; |
||||
import { depts } from "@/store/dept"; |
||||
import { send } from "@/api/sms"; |
||||
import { saveDraft, getDraft } from "@/api/mailDraft"; |
||||
// const userStore = UserStore(); |
||||
const pageStore = PageStore(); |
||||
const mySelected = ref(); |
||||
const imgurl = ref(); |
||||
const loading = ref(false); |
||||
imgurl.value = "/imgs/FaultUpload.jpg" |
||||
const rules= { |
||||
contactName: [ { type: 'string',required: true,message: "", trigger: 'blur'}, {max: 30,message: "名称长度不能超过30位" }], |
||||
contactPhone: [{ required: true, validator: validatorPhone, trigger: "blur" }, |
||||
], |
||||
contactIdCard: [{ required: true, validator: validatorIdCard, trigger: "blur" }, |
||||
], |
||||
code:[{ required: true, message: "请输入验证码", trigger: "blur" }, |
||||
], |
||||
content:[{ required: true, validator: validatorContent, trigger: "blur" }, |
||||
], |
||||
} |
||||
|
||||
const headers = reactive({"Authorization": getToken()}); |
||||
const previewVisible = ref(false); |
||||
const dialogImageUrl = ref(''); |
||||
const select = ref(''); |
||||
const mail = ref({ |
||||
contactName: '', |
||||
contactIdCard: '', |
||||
contactPhone: '', |
||||
contactSex: '', |
||||
smsRequestId: '', |
||||
content: '', |
||||
code:'', |
||||
involvedDeptName:'', |
||||
attachments:'' |
||||
}) |
||||
|
||||
const mailData = ref({ |
||||
contactName: '', |
||||
contactIdCard: '', |
||||
contactPhone: '', |
||||
contactSex: '', |
||||
smsRequestId: '', |
||||
content: '', |
||||
code:'', |
||||
involvedDeptId:'', |
||||
involvedDeptName:'', |
||||
attachments:[] |
||||
}) |
||||
|
||||
//预览图片 |
||||
const handlePictureCardPreview = (filepath) => { |
||||
console.log(filepath) |
||||
dialogImageUrl.value = filepath.url; |
||||
previewVisible.value = true; |
||||
}; |
||||
|
||||
|
||||
initMail(); |
||||
function initMail() { |
||||
mail.value = { |
||||
contactName: '', |
||||
contactIdCard: '', |
||||
contactPhone: '', |
||||
contactSex: 'M', |
||||
content: "", |
||||
attachments: [], |
||||
}; |
||||
} |
||||
const list = ref([]) |
||||
watch( |
||||
() => pageStore.mailTabActive, |
||||
() => { |
||||
|
||||
if (pageStore.mailDraftId) { |
||||
|
||||
getDraft(pageStore.mailDraftId).then((data) => { |
||||
mail.value = data; |
||||
mailData.value.attachments = JSON.parse(data.attachments); |
||||
console.log( mailData.value.attachments.filepath) |
||||
list.value = [] |
||||
for(const i of mailData.value.attachments){ |
||||
let obj = new Object(); |
||||
console.log(i.filepath) |
||||
obj.url = "/api/file/stream/"+i.filepath; |
||||
list.value.push(obj); |
||||
} |
||||
|
||||
// mailData.value.attachments = list.value; |
||||
mail.value.attachments = list.value; |
||||
|
||||
}); |
||||
|
||||
pageStore.mailDraftId = ""; |
||||
} |
||||
} |
||||
); |
||||
|
||||
const filepath = ref(); |
||||
const handleSuccess = (obj,response,file) =>{ |
||||
console.log(response.response.data.filepath); |
||||
//拼接得到图片信息对象 |
||||
filepath.value = response.response.data.filepath; |
||||
//将图片信息对象，push到数组中 |
||||
mailData.value.attachments.push({filepath: filepath.value}) |
||||
console.log("response.response"+response.response) |
||||
console.log("mailData.value.attachments"+mailData.value.attachments) |
||||
} |
||||
|
||||
//移除图片 |
||||
const handleRemove = (file, fileList) => { |
||||
// console.log('handleRemove', handleRemove); |
||||
console.log('file', file); |
||||
var index = mailData.value.attachments.findIndex( |
||||
temp => { |
||||
if(file.name == temp.file){ |
||||
return true |
||||
} |
||||
} |
||||
); |
||||
mailData.value.attachments.splice(index,1) |
||||
console.log('fileList', fileList); |
||||
}; |
||||
|
||||
const emit = defineEmits(['childWriter-msg']) |
||||
|
||||
const handleSaveDraft = () => { |
||||
formRef.value.validate().then(() => { |
||||
mailData.value.code = mail.value.code; |
||||
mailData.value.contactIdCard = mail.value.contactIdCard; |
||||
mailData.value.contactName = mail.value.contactName; |
||||
mailData.value.content = mail.value.content; |
||||
mailData.value.contactPhone = mail.value.contactPhone; |
||||
mailData.value.smsRequestId = mail.value.smsRequestId; |
||||
mailData.value.contactSex = mail.value.contactSex; |
||||
// mailData.value.attachments = mail.value.attachments; |
||||
loading.value = true; |
||||
ElMessageBox.confirm( |
||||
'确定提交草稿内容吗？', |
||||
'提示', |
||||
{ |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
} |
||||
) |
||||
.then(() => { |
||||
saveDraft(mailData.value).then((data) => { |
||||
loading.value = false; |
||||
mail.value.id = data.id; |
||||
initMail(); |
||||
// 刷新我的草稿 |
||||
pageStore.mailTabActive = "draft" |
||||
pageStore.myMailDraftRefresh = true |
||||
}); |
||||
ElMessage({ |
||||
type: 'success', |
||||
message: '提交成功', |
||||
}) |
||||
}) |
||||
.catch(() => { |
||||
loading.value = false, |
||||
ElMessage({ |
||||
type: 'info', |
||||
message: '取消提交', |
||||
}) |
||||
|
||||
}) |
||||
|
||||
}); |
||||
}; |
||||
|
||||
const handleSave = () => { |
||||
formRef.value.validate().then(() => { |
||||
mailData.value.code = mail.value.code; |
||||
mailData.value.contactIdCard = mail.value.contactIdCard; |
||||
mailData.value.contactName = mail.value.contactName; |
||||
mailData.value.content = mail.value.content; |
||||
mailData.value.contactPhone = mail.value.contactPhone; |
||||
mailData.value.smsRequestId = mail.value.smsRequestId; |
||||
mailData.value.contactSex = mail.value.contactSex; |
||||
loading.value = true; |
||||
ElMessageBox.confirm( |
||||
'确定提交信件吗?', |
||||
'提示', |
||||
{ |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
} |
||||
) |
||||
.then(() => { |
||||
addMail(mailData.value) |
||||
.then(() => { |
||||
loading.value = false; |
||||
// showSuccessToast("提交成功"); |
||||
// 跳转到我的信件 |
||||
pageStore.mailTabActive = "my"; |
||||
// 刷新我的信件 |
||||
pageStore.myMailRefresh = true |
||||
// 更新用户联系电话 |
||||
// userStore.user.phone = mail.value.phone; |
||||
initMail(); |
||||
setTimeout(() => { |
||||
emit('childWriter-msg', "my") |
||||
}, 300) |
||||
}) |
||||
.catch(() => { |
||||
loading.value = false; |
||||
}); |
||||
ElMessage({ |
||||
type: 'success', |
||||
message: '提交成功', |
||||
}) |
||||
}) |
||||
.catch(() => { |
||||
loading.value = false; |
||||
ElMessage({ |
||||
type: 'info', |
||||
message: '取消提交', |
||||
}) |
||||
}) |
||||
}); |
||||
|
||||
|
||||
}; |
||||
|
||||
|
||||
|
||||
|
||||
function selectMediaId(depart){ |
||||
console.log(mySelected.value, 'select值') |
||||
for (const i of depts) { |
||||
if(i.text == depart){ |
||||
mailData.value.involvedDeptId=i.value; |
||||
mailData.value.involvedDeptName=i.text; |
||||
|
||||
} |
||||
} |
||||
// console.log(mailData.value.involved_dept_id, 'select值') |
||||
// console.log(depart, '选中的ID值') |
||||
} |
||||
|
||||
const formRef = ref(); |
||||
|
||||
const sendBtnDisabled = ref(false); |
||||
let time = ref(30); |
||||
|
||||
function smsSendCode() { |
||||
formRef.value.validateField('contactPhone', (valid) => { |
||||
if (valid) { |
||||
sendBtnDisabled.value = true; |
||||
// 发送短信 |
||||
send(mail.value.contactPhone).then((data) => { |
||||
mail.value.smsRequestId = data.requestId; |
||||
}); |
||||
let timer = setInterval(() => { |
||||
time.value -= 1; |
||||
if (time.value <= 0) { |
||||
sendBtnDisabled.value = false; |
||||
clearInterval(timer); |
||||
time.value = 30; |
||||
} |
||||
}, 1000); |
||||
} else { |
||||
return; |
||||
} |
||||
}); |
||||
} |
||||
const contentSpan = ref(); |
||||
|
||||
function timeEffectInput() { |
||||
console.log(mail.value) |
||||
// contentData = mail.value |
||||
const length = mail.value.content.length // 先拿到当前输入时文本域文字长度 |
||||
if (length > 300) { // 当长度超过200 |
||||
// 获取文本域计数统计设置字体为红色 |
||||
contentSpan.style = 'color:red' |
||||
// 防止后续输入溢出截取0-200的字符 |
||||
mail.value.content = mail.value.content.substr(0, 300) |
||||
} else { |
||||
contentSpan.style = 'color:#909399' |
||||
} |
||||
} |
||||
|
||||
</script> |
||||
|
||||
|
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
.wrapper { |
||||
background-color: #fff; |
||||
|
||||
} |
||||
.commit{ |
||||
margin-top: 50px; |
||||
} |
||||
span{ |
||||
|
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 12px; |
||||
color: #666666; |
||||
font-weight: 400; |
||||
margin-left: 0.8%; |
||||
} |
||||
.content{ |
||||
width: 1112px; |
||||
resize:none; |
||||
// height: 64px; |
||||
font-family: PingFangSC-Regular; |
||||
font-size: 14px; |
||||
color: #CCCCCC; |
||||
font-weight: 400; |
||||
position: relative; |
||||
|
||||
} |
||||
|
||||
.releative{ |
||||
|
||||
.el-button{ |
||||
width: 77px; |
||||
height: 24px; |
||||
background: #0E5A98; |
||||
border-radius: 2px; |
||||
span{ |
||||
width: 60px; |
||||
height: 17px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 12px; |
||||
color: #FFFFFF; |
||||
letter-spacing: 0; |
||||
text-align: right; |
||||
font-weight: 400; |
||||
} |
||||
} |
||||
} |
||||
::v-deep .el-form-item__label { |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 14px; |
||||
color: #333333; |
||||
letter-spacing: 0; |
||||
line-height: 20px; |
||||
font-weight: 400; |
||||
} |
||||
::v-deep .el-form-item__content{ |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
.el-form-item{ |
||||
position: relative; |
||||
display: flex; |
||||
box-shadow: inset 0px -1px 0px 0px rgba(217,217,217,1); |
||||
align-items:baseline; |
||||
height:5.5vh; |
||||
} |
||||
::v-deep .el-select__wrapper { |
||||
width: 16vw; |
||||
min-height:unset; |
||||
} |
||||
.el-input{ |
||||
|
||||
width: 16vw; |
||||
height: 2.3vh; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 14px; |
||||
color: #999999; |
||||
letter-spacing: 0; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
.el-radio__label{ |
||||
|
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 14px; |
||||
color: #999999; |
||||
letter-spacing: 0; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
::v-deep .el-upload--picture-card{ |
||||
background-size: cover; |
||||
background-image: url('/imgs/FaultUpload.jpg'); |
||||
} |
||||
::v-deep .contentforitem{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 20vh; |
||||
margin-bottom: 2vh; |
||||
box-shadow:none; |
||||
} |
||||
// ::v-deep .el-icon::before { |
||||
// content: ''; |
||||
// position: absolute; |
||||
// width: 31.25px; |
||||
// border-top: 4.16px solid; |
||||
// color: cornflowerblue; |
||||
// } |
||||
// ::v-deep .el-icon::after { |
||||
// content: ''; |
||||
// position: absolute; |
||||
// height: 31.25px; |
||||
// border-left: 4.16px solid; |
||||
// color: cornflowerblue; |
||||
// } |
||||
::v-deep .el-select__suffix{ |
||||
visibility:hidden; |
||||
} |
||||
.uploadSign{ |
||||
position: relative; |
||||
top: 10px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 12px; |
||||
color: #333333; |
||||
letter-spacing: 0; |
||||
line-height: 17px; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
::v-deep .commit { |
||||
display: flex; |
||||
box-shadow:none; |
||||
.el-form-item__content{ |
||||
justify-content: space-evenly |
||||
} |
||||
} |
||||
|
||||
::v-deep .button1{ |
||||
position: relative; |
||||
left: -50px; |
||||
width: 266px; |
||||
height: 44px; |
||||
background: #F3FAFF; |
||||
border: 0.5px solid rgba(32,119,192,1); |
||||
border-radius: 2px; |
||||
span{ |
||||
width: 34px; |
||||
height: 24px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 17px; |
||||
color: #0E5A98; |
||||
text-align: left; |
||||
font-weight: 400; |
||||
} |
||||
} |
||||
|
||||
::v-deep .button2{ |
||||
width: 266px; |
||||
height: 44px; |
||||
background: #0E5A98; |
||||
border-radius: 2px; |
||||
span{ |
||||
width: 34px; |
||||
height: 24px; |
||||
font-family: PingFang-SC-Regular; |
||||
font-size: 17px; |
||||
color: #FFFFFF; |
||||
text-align: left; |
||||
font-weight: 400; |
||||
} |
||||
} |
||||
|
||||
::v-deep .redClass .el-form-item__content{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex-wrap: nowrap; |
||||
align-items: flex-start; |
||||
.el-textarea{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.el-textarea__inner{ |
||||
width: 1200px; |
||||
height: 15vh; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue