xinkeaboard/xinkeaboard-web/pages/member/download/center.vue

<template>
    <div class="sld_mydownloadcenter_wrapper">
        <MemberTitle :memberTitle="L['下载中心']"></MemberTitle>
        <div class="container">
            <h3 class="mb-30">{{ L["下载中心"] }}</h3>

            <div class="search_con flex_row_between_center search_info">
                <div class="search_incon1 flex_row_start_center">
                    <el-input
                            class="search_input"
                            v-model="goodsName"
                            :placeholder="L['商品名称']"
                            clearable
                            @clear="clear"
                    >
                    </el-input>
                    <div class="search pointer" @click="getDownloadList">
                        {{ L["搜索"] }}
                    </div>
                </div>
            </div>

            <div class="point_list">
                <table class="point_table">
                    <tbody>
                    <tr class="voucher_tabeltitle">
                        <th>{{ L["序号"] }}</th>
                        <th>{{ L["商品名称"] }}</th>
                        <th>{{ L["商品附件"] }}</th>
                        <th>{{ L["下载时间"] }}</th>
                        <th class="oprate">{{ L["操作"] }}</th>
                    </tr>
                    <tr v-for="(item, index) in downloadList.list" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.goodsName }}</td>
                        <td>
                            <a href="javascript:;" class="next" @click="download(item.annexPath,item.annexName)" style="color:#00985e;text-decoration: underline;">
                                {{ item.annexName }}
                            </a>
                        </td>
                        <td>{{ item.createTime }}</td>
                        <td>
                            <nuxt-link style="color:#00985e;text-decoration: underline;" :to="'/goods/detail/'+ calcProductName(item.goodsName) +'_'+ item.defaultProductId"  target="_blank">
                              {{L["商品详情"]}}
                            </nuxt-link>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <SldCommonEmpty
                        v-if="!downloadList.list.length"
                        totalHeight="587"
                        totalWidth="1003"
                        :tip="L['暂无下载记录']"
                />
            </div>
            <div class="flex_row_end_center sld_pagination">
                <el-pagination
                        @current-change="handleCurrentChange"
                        v-model:currentPage="pageData.page.current"
                        :page-size="pageData.page.pageSize"
                        layout="prev, pager, next, jumper"
                        :total="pageData.page.total"
                        :hide-on-single-page="true"
                >
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script setup>
    import {reactive, getCurrentInstance, ref, onMounted} from "vue";
    // import {lang_zn} from "@/assets/language/zh";
    import { getCurLanguage } from '@/composables/common.js';
    import {useFiltersStore} from "@/store/filter.js";
    import {ElDialog, ElPagination, ElInput} from "element-plus";

    const filtersStore = useFiltersStore();
    // const L = lang_zn;
    const L = getCurLanguage();
    definePageMeta({
        layout: "member",
        middleware: ["auth"],
    });
    const {proxy} = getCurrentInstance();
    const downloadList = reactive({list: []});
    const pageData = reactive({page: {}});
    const goodsName = ref("");
    const params = reactive({
        current: 1,
        goodsName: "",
    });

    const getDownloadList = () => {
        if (
            goodsName.value != "" &&
            goodsName.value != null &&
            goodsName.value != undefined
        ) {
            params.goodsName = goodsName.value;
        } else {
            params.goodsName = "";
        }
        get("v3/member/front/download/list", params).then((res) => {
            if (res.state == 200) {
                downloadList.list = res.data.list;
                pageData.page = res.data.pagination;
            }
        });
    };

    //清空搜索
    const clear = () => {
        goodsName.value = "";
        getDownloadList();
    };

    const download = (url,name) =>{
        const link = document.createElement('a');
        fetch(url).then(res => res.blob()).then(blob => {
            link.href = URL.createObjectURL(blob)
            link.download = name;
            document.body.appendChild(link)
            link.click()
            window.URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
        });
    }

    const handleSwitch = (index) => {
        params.type = index;
        params.current = 1;
        getDownloadList();
    };
    const handlePrevCilickChange = (e) => {
        params.current = e;
        getDownloadList();
    };

    const handleNextCilickChange = (e) => {
        params.current = e;
        getDownloadList();
    };

    const handleCurrentChange = (e) => {
        params.current = e;
        getDownloadList();
    };

    onMounted(() => {
        getDownloadList();
    });
</script>
<style lang="scss" scoped>
    .mb-30 {
        margin-bottom: 30px;
    }

    .sld_pagination {
        margin-right: 40px;
        margin-bottom: 20px;
    }

    .sld_mydownloadcenter_wrapper {
        width: 957px;
        margin-left: 10px;
        float: left;

        .container {
            padding: 20px;
            background-color: #fff;
            margin-bottom: 10px;
        }

        .point_table {
            border-left: none;
            border-right: none;
            width: 100%;
            margin-bottom: 30px;
            border: 1px solid #e0e0e0;
            border-collapse: collapse;
            border-spacing: 0;
            background-color: transparent;

            .voucher_tabeltitle {
                height: 39px;
                background-color: #ececec;

                th {
                    text-align: center;
                    font-weight: 400;
                    border: 1px solid #e3e3e3;
                }
            }

            td {
                text-align: center;
                line-height: 50px;
                background: #fff;
                border: 1px solid #e3e3e3;
                font-weight: 400;
            }
        }
    }


    .address_item span:not(:first-child) {
        margin-top: 12px;
    }

    .search_incon1 {
        height: 34px;
        background: #ffffff;
    }

    .search_con {
        .search_input {
            width: 323px;
            border-right: none;
        }
    }

    .search_con {
        .el-input__inner {
            height: 29px;
            padding-left: 11px;
            border: none;
            box-sizing: border-box;
            outline: none;
            font-size: 12px;
            font-weight: 400;
        }
    }

    .search_con {
        height: 44px;
        /*border-top: 1px solid #e8e8f1;*/
        padding-top: 18px;
        padding-bottom: 25px;
        box-sizing: border-box;
    }

    .search_con {
        .search {
            width: 105px;
            height: 32px;
            border: none;
            background-color: #f7f7f7;
            color: #000;
            line-height: 32px;

            text-align: center;
            font-size: 12px;
        }
    }
</style>