|
|
@@ -11,37 +11,22 @@
|
|
|
<div class="modal-body email-manage-body">
|
|
|
<div class="email-tabs">
|
|
|
<div
|
|
|
+ v-for="item in tabData"
|
|
|
class="email-tab"
|
|
|
- :class="{ active: activeFilter === 'pending' }"
|
|
|
- @click="activeFilter = 'pending'"
|
|
|
+ :class="{ active: activeFilter === item.value }"
|
|
|
+ @click="changeTab(item.value)"
|
|
|
>
|
|
|
- <div class="tab-title">待发送</div>
|
|
|
- <div class="tab-count">{{ statusCounts.pending }}</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="email-tab"
|
|
|
- :class="{ active: activeFilter === 'sent' }"
|
|
|
- @click="activeFilter = 'sent'"
|
|
|
- >
|
|
|
- <div class="tab-title">已发送</div>
|
|
|
- <div class="tab-count">{{ statusCounts.sent }}</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="email-tab"
|
|
|
- :class="{ active: activeFilter === 'failed' }"
|
|
|
- @click="activeFilter = 'failed'"
|
|
|
- >
|
|
|
- <div class="tab-title">已取消</div>
|
|
|
- <div class="tab-count">{{ statusCounts.failed }}</div>
|
|
|
+ <div class="tab-title">{{ item.title }}</div>
|
|
|
+ <div class="tab-count">{{ item.count }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="email-card-list" v-loading="loading">
|
|
|
<div
|
|
|
- v-for="item in filterEmailList"
|
|
|
+ v-for="item in emailList"
|
|
|
:key="item.id"
|
|
|
class="email-card"
|
|
|
- v-if="filterEmailList.length > 0"
|
|
|
+ v-if="emailList.length > 0"
|
|
|
>
|
|
|
<div class="email-card-left">
|
|
|
<div class="email-card-top">
|
|
|
@@ -50,7 +35,7 @@
|
|
|
{{ item.customerName }}
|
|
|
<span class="status-pill">{{ item.stageName }}</span>
|
|
|
</div>
|
|
|
- <div class="email-card-subtitle">{{ item.email }}</div>
|
|
|
+ <div class="email-card-subtitle">{{ item.recipient }}</div>
|
|
|
<div class="email-card-subtitle">预计发送时间:{{ item.expectSendTime }}</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -79,9 +64,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { computed, ref } from 'vue'
|
|
|
+import { ref } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
-import { getEmailList, cancelEmail } from '@/api/marketing'
|
|
|
+import { getEmailList, getEmailCount, cancelEmail } from '@/api/marketing'
|
|
|
import { ElMessageBox } from 'element-plus'
|
|
|
|
|
|
const selectedCampaign = ref(null)
|
|
|
@@ -90,15 +75,40 @@ const emailList = ref([])
|
|
|
const open = (campaign) => {
|
|
|
selectedCampaign.value = campaign || null
|
|
|
emailList.value = []
|
|
|
+ getStatusCounts()
|
|
|
getList()
|
|
|
showEmailListModal.value = true
|
|
|
}
|
|
|
|
|
|
+const tabData = ref([])
|
|
|
+
|
|
|
+const changeTab = (value) => {
|
|
|
+ activeFilter.value = value
|
|
|
+ getStatusCounts()
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+const getStatusCounts = () => {
|
|
|
+ getEmailCount({ id: selectedCampaign.value.id }).then((res) => {
|
|
|
+ tabData.value = [
|
|
|
+ { value: 'pending', title: '待发送', count: res.result.pendingSendCount || 0 },
|
|
|
+ { value: 'sent', title: '已发送', count: res.result.sentCount || 0 },
|
|
|
+ { value: 'failed', title: '已取消', count: res.result.cancelledCount || 0 }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
const loading = ref(false)
|
|
|
const getList = () => {
|
|
|
loading.value = true
|
|
|
- getEmailList({ id: selectedCampaign.value.id }).then((res) => {
|
|
|
- emailList.value = res.result || []
|
|
|
+ let params = {
|
|
|
+ marketingCampaignId: selectedCampaign.value.id,
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 10000,
|
|
|
+ status: activeFilter.value === 'pending' ? -1 : activeFilter.value === 'sent' ? 1 : -3
|
|
|
+ }
|
|
|
+ getEmailList(params).then((res) => {
|
|
|
+ emailList.value = res.result.records || []
|
|
|
}).finally(() => {
|
|
|
loading.value = false
|
|
|
})
|
|
|
@@ -109,19 +119,6 @@ const showEmailListModal = ref(false)
|
|
|
|
|
|
const activeFilter = ref('pending')
|
|
|
|
|
|
-const filterEmailList = computed(() => {
|
|
|
- if (activeFilter.value === 'all') {
|
|
|
- return emailList.value
|
|
|
- }
|
|
|
- return emailList.value.filter((item) => item.status === (activeFilter.value == 'pending' ? -2 : activeFilter.value == 'sent' ? 1 : -3))
|
|
|
-})
|
|
|
-
|
|
|
-const statusCounts = computed(() => ({
|
|
|
- pending: emailList.value.filter((item) => item.status === -2).length,
|
|
|
- sent: emailList.value.filter((item) => item.status === 1).length,
|
|
|
- failed: emailList.value.filter((item) => item.status === -3).length
|
|
|
-}))
|
|
|
-
|
|
|
const refreshList = () => {
|
|
|
// 这里可以接入真实数据刷新逻辑
|
|
|
}
|