mailbox-outer-pc-vue/src/views/components/MailDraft.vue

<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">
          <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: 300px;
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>