|
|
@@ -0,0 +1,337 @@
|
|
|
+<template>
|
|
|
+ <div class="write">
|
|
|
+ <van-nav-bar
|
|
|
+ title="写邮件"
|
|
|
+ left-text=""
|
|
|
+ left-arrow
|
|
|
+ @click-left="onClickLeft"
|
|
|
+ right-text="发送"
|
|
|
+ @click-right="onClickRight"
|
|
|
+ >
|
|
|
+ </van-nav-bar>
|
|
|
+ <div class="write-letters">
|
|
|
+ <div class="chaosong-box">
|
|
|
+ <div class="chaosong">
|
|
|
+ <div class="label">收件人:</div>
|
|
|
+ <ul style="border-bottom: none">
|
|
|
+ <li v-for="(i, index) in formData.to" :key="i.address">
|
|
|
+ {{ i.address }}
|
|
|
+ <van-icon
|
|
|
+ @click="formData.to.splice(index, 1)"
|
|
|
+ name="cross"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ <input
|
|
|
+ placeholder="请输入邮箱"
|
|
|
+ @keydown.enter="shoujianEnter('to')"
|
|
|
+ type="text"
|
|
|
+ v-model="formData.toInput"
|
|
|
+ />
|
|
|
+ </ul>
|
|
|
+ <div class="more" @click="ccOrbccType = true" v-if="!ccOrbccType">
|
|
|
+ 抄送/密送
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chaosong-box" v-if="ccOrbccType">
|
|
|
+ <div class="chaosong">
|
|
|
+ <div class="label">抄送</div>
|
|
|
+ <ul style="border-bottom: none">
|
|
|
+ <li v-for="(i, index) in formData.cc" :key="i.address">
|
|
|
+ {{ i.address }}
|
|
|
+ <van-icon
|
|
|
+ @click="formData.to.splice(index, 1)"
|
|
|
+ name="cross"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ <input
|
|
|
+ placeholder="请输入邮箱"
|
|
|
+ @keydown.enter="shoujianEnter('cc')"
|
|
|
+ type="text"
|
|
|
+ v-model="formData.ccInput"
|
|
|
+ />
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chaosong-box" v-if="ccOrbccType">
|
|
|
+ <div class="chaosong">
|
|
|
+ <div class="label">密送</div>
|
|
|
+ <ul style="border-bottom: none">
|
|
|
+ <li v-for="(i, index) in formData.bcc" :key="i.address">
|
|
|
+ {{ i.address }}
|
|
|
+ <van-icon
|
|
|
+ @click="formData.to.splice(index, 1)"
|
|
|
+ name="cross"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ <input
|
|
|
+ placeholder="请输入邮箱"
|
|
|
+ @keydown.enter="shoujianEnter('bcc')"
|
|
|
+ type="text"
|
|
|
+ v-model="formData.bccInput"
|
|
|
+ />
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sender" @click="showPicker = true">
|
|
|
+ <div class="label">
|
|
|
+ 发件人
|
|
|
+ </div>
|
|
|
+ <div class="center-text">
|
|
|
+ {{selectMailData.text || selectMailData.receiveHost || '请选择邮箱'}}
|
|
|
+ </div>
|
|
|
+ <div class="right-box right-text more">
|
|
|
+ <i class="iconfont icon-iconm_xialan1"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-popup v-model:show="showPicker" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ :columns="columns"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <div class="subject">
|
|
|
+ <div class="label">主题</div>
|
|
|
+ <input
|
|
|
+ placeholder="请输入主题"
|
|
|
+ type="text"
|
|
|
+ v-model="formData.subject"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+
|
|
|
+ <textarea
|
|
|
+ placeholder="请输入正文"
|
|
|
+ type="text"
|
|
|
+ rows='4'
|
|
|
+ v-model="formData.content"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { ref, getCurrentInstance, onMounted } from 'vue'
|
|
|
+import commonList from '@/components/common-list.vue'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+import { getUserInfo } from '@/utils/auth'
|
|
|
+const loading = ref(false)
|
|
|
+const router = useRoute()
|
|
|
+const proxy = getCurrentInstance().proxy
|
|
|
+const shoujianModal = ref(false)
|
|
|
+const searchListData2 = ref([])
|
|
|
+const ccOrbccType = ref(false)
|
|
|
+const onClickLeft = () => {
|
|
|
+ proxy.$router.go(-1)
|
|
|
+}
|
|
|
+
|
|
|
+let formData = ref({
|
|
|
+ to: [],
|
|
|
+ mailboxId: '',
|
|
|
+ type: 1,
|
|
|
+ cc:[],
|
|
|
+ bcc:[],
|
|
|
+ replyTo:[],
|
|
|
+ subject:null,
|
|
|
+ content:'',
|
|
|
+ fileList:[],
|
|
|
+ toInput:null,
|
|
|
+ ccInput:null,
|
|
|
+ bccInput:null,
|
|
|
+})
|
|
|
+const showPicker = ref(false)
|
|
|
+let columns = ref([])
|
|
|
+let selectMailData = ref({})
|
|
|
+const onConfirm = ({ selectedOptions }) => {
|
|
|
+ showPicker.value = false;
|
|
|
+ selectMailData.value = selectedOptions[0];
|
|
|
+ formData.value.mailboxId = selectedOptions[0].id
|
|
|
+ formData.value.type = selectedOptions[0].type
|
|
|
+};
|
|
|
+const getUserEmailList = () => {
|
|
|
+ proxy.post('/mailInfo/getUserEmailList',{
|
|
|
+ id:getUserInfo().userId
|
|
|
+ }).then(res => {
|
|
|
+ columns.value = res.data.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ text:item.receiveHost,
|
|
|
+ value:item.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(res.data.length > 0) {
|
|
|
+ selectMailData.value = res.data[0]
|
|
|
+ formData.value.mailboxId = res.data[0].id
|
|
|
+ formData.value.type = res.data[0].type
|
|
|
+ }
|
|
|
+ console.log(columns)
|
|
|
+ })
|
|
|
+}
|
|
|
+getUserEmailList()
|
|
|
+
|
|
|
+const shoujianEnter = (type) => {
|
|
|
+
|
|
|
+ var patt = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/
|
|
|
+ formData.value[type + 'Input'].search(patt)
|
|
|
+ if (formData.value[type + 'Input'].search(patt) == 0) {
|
|
|
+ formData.value[type].push({
|
|
|
+ address:formData.value[type + 'Input'],
|
|
|
+ personal:null,
|
|
|
+ })
|
|
|
+ formData.value[type + 'Input'] = null
|
|
|
+ } else {
|
|
|
+ formData.value[type + 'Input'] = null
|
|
|
+ }
|
|
|
+ console.log(formData.value)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+let mailData = ref({})
|
|
|
+
|
|
|
+const getMessageDetail = () => {
|
|
|
+ proxy
|
|
|
+ .post('/mailService/getMessageDetail', {
|
|
|
+ messageId: router.query.id,
|
|
|
+ type: router.query.type,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ mailData.value = res.data
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const onClickRight = () => {
|
|
|
+ console.log(formData.value)
|
|
|
+ proxy
|
|
|
+ .post('/mailService/sendMail', {
|
|
|
+ ...formData.value,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.code == 200) {
|
|
|
+ proxy.$toast.success('发送成功')
|
|
|
+ proxy.$router.go(-1)
|
|
|
+ } else {
|
|
|
+ proxy.$toast.fail(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ console.log(router)
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.write {
|
|
|
+ background: #fff;
|
|
|
+ .content{
|
|
|
+ padding: 20px 12px;
|
|
|
+ textarea{
|
|
|
+ width: 100%;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ resize: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .subject{
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ display: flex;
|
|
|
+ padding: 0 12px;
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ .label{
|
|
|
+ width: 60px;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ flex: 1;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sender{
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 12px;
|
|
|
+ .center-text{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ width: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .write-letters {
|
|
|
+ .chaosong {
|
|
|
+ padding: 0 12px;
|
|
|
+ line-height: 50px;
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ .more{
|
|
|
+ width: 78px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 52px;
|
|
|
+ color:#999999;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ float: right;
|
|
|
+ i {
|
|
|
+ color: #487cff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ height: 34px;
|
|
|
+ background: none;
|
|
|
+ width: 120px;
|
|
|
+ padding: 0 2px;
|
|
|
+ border: none;
|
|
|
+ font-size: 12px;
|
|
|
+ z-index: 1000;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ width: 60px;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ position: relative;
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ padding: 8px 0;
|
|
|
+ line-height: 28px;
|
|
|
+ .add {
|
|
|
+ position: absolute;
|
|
|
+ right: 12px;
|
|
|
+ top: 12px;
|
|
|
+ font-size: 20px;
|
|
|
+ i {
|
|
|
+ color: #487cff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ margin: 4px 4px 4px 10px;
|
|
|
+ height: 28px;
|
|
|
+
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ color: #333333;
|
|
|
+ background: #ddd;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 10px;
|
|
|
+ line-height: 28px;
|
|
|
+ border-radius: 14px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
asd26269546
