longlong/xw_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改邮件通知

Browse Source
This commit is contained in:
龙运模 2024-08-02 23:04:16 +08:00
parent a58602d8d9
commit da449209ef
1 changed files with 60 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/order/dataConfirm/index.vue
View File

@ -2,15 +2,25 @@
<el-container class="mainBox"> <el-container class="mainBox">
<el-aside width="340px"> <el-aside width="340px">
<el-container> <el-container>
<el-header><span class="emailTitle">邮件通知</span></el-header> <el-header>
<span class="emailTitle">邮件通知</span>
<span class="statusBox">
<span class="item complete">已确认</span>
<span class="item notStarted">未确认</span>
<span class="item part">部分确认</span>
</span>
</el-header>
<el-main class="nopadding"> <el-main class="nopadding">
<el-scrollbar height="100%"> <el-scrollbar height="100%">
<div class="emailMain"> <div class="emailMain">
<div class="itemBox" :class="emailId == item.id?'itemTrue':''" v-for="item in confirmList" :key="item" @click="()=>{this.emailChange(item);}"> <div class="itemBox" :class="[item.is_confirm===0?'notStarted':'complete', emailId == item.id?'itemTrue':'']" v-for="item in confirmList" :key="item" @click="()=>{this.emailChange(item);}">
<div class="name text">{{item.from && item.from.email}}</div> <div class="name text">{{item.from && item.from.email}}</div>
<div class="title text">{{item.subject}}</div> <div class="title text">{{item.subject}}</div>
<div class="msg text">{{item.text}}</div> <div class="msg text">{{item.text}}</div>
<div class="date">{{item.sent_at}}</div> <div class="date">{{item.sent_at}}</div>
<div class="total">
<el-badge class="badgeItem" :value="item.total_count" :max="99" color="#eeeeee"></el-badge>
</div>
</div> </div>
</div> </div>
</el-scrollbar> </el-scrollbar>
@ -64,7 +74,7 @@
</div> </div>
<div class="itemBox"> <div class="itemBox">
<div class="leftBox"> <div class="leftBox">
<el-icon style="font-size: 26px;"><sc-icon-FilePdf/></el-icon> <el-icon style="font-size: 26px;"><sc-icon-Excel/></el-icon>
</div> </div>
<div class="rightBox"> <div class="rightBox">
<div class="name">{{emailParams.file_name && emailParams.file_name.file}}</div> <div class="name">{{emailParams.file_name && emailParams.file_name.file}}</div>
@ -282,23 +292,65 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.emailTitle{font-size: 14px;font-weight: 600;} .emailTitle{font-size: 14px;font-weight: 600;}
.statusBox{
display: flex;align-items: center;justify-content: flex-end;
.item{
position: relative;
margin-left: 18px;
}
.item:after{
content: '';
position: absolute;
left: -12px;
top: 5px;
width: 6px;
height: 6px;
border-radius: 50%;
}
}
.complete:after{
background: var(--el-color-success);
}
.notStarted:after{
background: var(--el-color-danger);
}
.part:after{
background: var(--el-color-warning);
}
.emailMain{ .emailMain{
padding: 5px 0; padding: 5px 0;
.itemBox{ .itemBox{
box-shadow: 0 1px 1px rgba(0,0,0,0.08); //box-shadow: 0 1px 1px rgba(0,0,0,0.08);
position: relative; position: relative;
padding: 12px 0 12px 10px; padding: 12px 0 12px 10px;
cursor: pointer; cursor: pointer;
.name{margin-bottom: 10px;font-size: 14px;font-weight: 600;color: var(--el-color-dark)} .text{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: calc(100% - 10px);}
.name{margin-bottom: 10px;font-size: 14px;font-weight: 600;color: var(--el-color-dark);}
.title{margin-bottom: 6px;color: var(--el-text-color-regular)} .title{margin-bottom: 6px;color: var(--el-text-color-regular)}
.msg{color: var(--el-text-color-placeholder);} .msg{color: var(--el-text-color-placeholder);width: calc(100% - 40px);}
.text{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.date{ .date{
position: absolute;right: 0;top: 14px;z-index: 10; position: absolute;right: 12px;top: 14px;z-index: 10;
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
width: 90px; width: 90px;
overflow: hidden;text-overflow: ellipsis;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
} }
.total{
position: absolute;right: 12px;bottom: 8px;z-index: 10;
.badgeItem ::v-deep .el-badge__content{
background: #EBEBEB;
border-color: #EBEBEB;
color: #555555;
}
}
}
.itemBox:after{
content: "";
position: absolute;
bottom: 0;
left: 10px;
width: calc(100% - 25px);
height: 2px;
} }
.itemTrue{ .itemTrue{
background: #EFF5FF; background: #EFF5FF;