From da449209efbbde2ea162a6169ca3e936e5f554de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com>
Date: Fri, 2 Aug 2024 23:04:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=82=AE=E4=BB=B6=E9=80=9A?=
 =?UTF-8?q?=E7=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/dataConfirm/index.vue | 68 +++++++++++++++++++++++----
 1 file changed, 60 insertions(+), 8 deletions(-)

diff --git a/src/views/order/dataConfirm/index.vue b/src/views/order/dataConfirm/index.vue
index d89b19a..59f2e88 100644
--- a/src/views/order/dataConfirm/index.vue
+++ b/src/views/order/dataConfirm/index.vue
@@ -2,15 +2,25 @@
 	<el-container class="mainBox">
 		<el-aside width="340px">
 			<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-scrollbar height="100%">
 						<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="title text">{{item.subject}}</div>
 								<div class="msg text">{{item.text}}</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>
 					</el-scrollbar>
@@ -64,7 +74,7 @@
 						</div>
 						<div class="itemBox">
 							<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 class="rightBox">
 								<div class="name">{{emailParams.file_name && emailParams.file_name.file}}</div>
@@ -282,23 +292,65 @@ export default {
 
 <style lang="scss" scoped>
 .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{
 	padding: 5px 0;
 	.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;
 		padding: 12px 0 12px 10px;
 		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)}
-		.msg{color: var(--el-text-color-placeholder);}
-		.text{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
+		.msg{color: var(--el-text-color-placeholder);width: calc(100% - 40px);}
 		.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);
 			width: 90px;
 			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{
 		background: #EFF5FF;