kuailelunwen_new_houtai/src/views/agent/checkOrderList.vue

<template>
    <div class="main-content12">
        <!-- page header -->
        <div class="pageheader">
            <span class="pagetitle">查重订单</span>
        </div>

        <div class="elementWrap mb-10">
            <el-form>
                <div class="flex">
                    <p class="mr-12">时间范围</p>
                    <el-date-picker class="mr-32" v-model="searchDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>

                    <GuipSelect class="mr-32" label="服务类型" v-model="searchType" :options="siteList"  valueKey="uid" labelKey="name" @change="changeSearchSite()"  defaultValue="" placeholder="不限" clearable />

                    <GuipSelect class="mr-32" label="站点" v-model="searchUid" :options="siteList"  valueKey="uid" labelKey="name" @change="changeSearchSite()"  defaultValue="" placeholder="不限" clearable />
                    
                    <GuipSelect class="mr-32" width="100px" label="报告状态" v-model="searchStatus" :options="searchStatusList"  valueKey="uid" labelKey="name" @change="changeSearchSite()" :extraItem="{label:'全部',value:'all'}"  defaultValue="" placeholder="不限" clearable />
                </div>
            </el-form>
        </div>

        <!-- page content -->
        <div class="elementWrap">
            <div>
                <el-form>
                    <div class="flex" style="justify-content: space-between;">
                        <div class="flex">
                            <h3 class="checktitle mr-24">查重列表</h3>
                            <GuipSelect class="mr-32" label="报告格式" v-model="searchUid" :options="siteList"  valueKey="uid" labelKey="name" @change="changeSearchSite()"  defaultValue="" placeholder="不限" clearable />
                        </div>
                        <GuipInput label="订单号" v-model="searchTid" @blur="changeSearchTid()" placeholder="请输入订单号" ref="GuipInput" />
                        
                    </div>

                    <PromptText class="my-32" text='订单提示：电商订单，提交检测后会自动发货，请勿手动发货、代收款订单，退款须由平台操作，不可私自退款' :type="2" />

                    <GuipTable :tableData="orderList" ref="multipleTable" autoColumn="true" :loading="tableLoading">
                        <el-table-column prop="sitename" label="站点" fixed="left" min-width="60px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <GuipToolTip :content="scope.row.sitename">
                                        <img class="wh-16" src="@/assets/site.svg" alt="">
                                    </GuipToolTip>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="sale_id" label="ID" fixed="left" min-width="120px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <p>{{ scope.row.sale_id }}</p>
                                    <GuipToolTip class="ml-7" v-if="scope.row.ispublic==1" content="自供货">
                                        <img class="wh-16" src="@/assets/self_supply.svg" />
                                    </GuipToolTip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type_desc" label="检测类型" fixed="left" min-width="160px"></el-table-column>
                        <el-table-column prop="pay_type" label="买家" min-width="60px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <GuipToolTip :content="scope.row.pay_type_desc">
                                        <img class="wh-16" :src="getPayImg(scope.row.pay_type)" alt="">
                                    </GuipToolTip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="tids" label="订单号" min-width="220px">
                            <template slot-scope="scope">
                                <div class="flex" v-if="scope.row.status==1">
                                    <GuipToolTip :content="'下载报告 作者：'+scope.row.author + ' 标题：' + scope.row.title">
                                        <a :href="'http://'+scope.row.domain+'/report/tid/'+tid+'/sid/'+scope.row.sale_id" target="_blank" v-for="tid in scope.row.tids" :key="tid">{{ tid }}</a>
                                    </GuipToolTip>
                                </div>
                                <div class="" v-else>
                                    <p v-for="tid in scope.row.tids" :key="tid">
                                        {{ tid }}
                                        <GuipToolTip content="待发货">
                                            <img v-if="scope.row.pay_type==11 && scope.row.pdd_is_wait_deliver_goods[tid]==true" class="wh-16 ml-7" src="@/assets/wait_deliver_goods.svg" />
                                        </GuipToolTip>
                                    </p>
                                    
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="author" label="作者">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <GuipToolTip :content="'作者：'+scope.row.author + ' 标题：' + scope.row.title">
                                        <p>{{ scope.row.author }}</p>
                                    </GuipToolTip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="src" label="渠道" min-width="60px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <GuipToolTip :content="scope.row.src_desc">
                                        <img class="wh-16" :src="getChannelImg(scope.row.src)" alt="">
                                    </GuipToolTip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ip" label="IP" min-width="150px"></el-table-column>
                        <el-table-column prop="sale_date" label="销售日期" min-width="200px"></el-table-column>
                        <el-table-column prop="wordnum" label="字数"></el-table-column>
                        <el-table-column prop="similarity" label="相似度">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <p v-if="scope.row.similarity>0">{{ scope.row.similarity }}%</p>
                                    <p v-else>-</p>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="income" label="实际收入"></el-table-column>
                        <el-table-column prop="cost" label="成本"></el-table-column>
                        <el-table-column prop="status_desc" label="状态" min-width="150px">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <div v-if="scope.row.status==1" class="status-item divgreen">
                                        <span class="fontgreen">{{ scope.row.status_desc }}</span>
                                    </div>
                                    <div v-else-if="scope.row.status==3 || scope.row.status==11 || scope.row.status==12" class="status-item divblue">
                                        <span class="fontblue">{{ scope.row.status_desc }}</span>
                                    </div>
                                    <div v-else-if="scope.row.status==2 || scope.row.status==10 || scope.row.status==4" class="status-item divred">
                                        <span class="fontred">{{ scope.row.status_desc }}</span>
                                    </div>
                                    <div v-else-if="scope.row.status==0 || scope.row.status==8" class="status-item divgray">
                                        <span class="fontgray">{{ scope.row.status_desc }}</span>
                                    </div>
                                    <div v-else-if="scope.row.status==5" class="status-item divorange">
                                        <span class="fontorange">{{ scope.row.status_desc }}</span>
                                    </div>
                                    <div v-else-if="scope.row.status==6 || scope.row.status==7" class="status-item divpurple">
                                        <span class="fontpurple">{{ scope.row.status_desc }}</span>
                                    </div>
                                    <GuipToolTip v-if="scope.row.status==1 && scope.row.is_downloaded_report==1" content="已下载报告标识">
                                        <img class="wh-16 ml-7" src="@/assets/downloaded.svg" />
                                    </GuipToolTip>

                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" min-width="120px">
                            <template slot-scope="scope">
                            <div class="flex">
                                <el-button v-if="scope.row.status==1" @click="showConfirmDelReport(scope.row)" type="text">删报告</el-button>
                            </div>
                            </template>
                        </el-table-column>
                    </GuipTable>
                    <!-- <Page :total-records="orderListTotalRecords"
                    :is-has-next-page="isHasNextPage"
                    :page-size="orderListPageSize"
                    :current-page="orderListCurrentPage"
                    :next-min-id="orderListNextMinId"
                    :prev-max-id="orderListPrevMaxId"
                    @page-change="handlePageChange"></Page> -->
                </el-form>
            </div>
            <GuipDialog :dialogVisible="dialogVisibleDelReport" title="删除报告" confirmText="删除" cancelText="取消" :show-close-button="false"
                :show-cancel-button="true" @confirm="confirmDelReport" @cancel="handleCancel"
                @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
                <!-- 自定义内容 -->
                <p class="mx-24 mt12 flex">是否删除  ID:{{ delReportId }}  报告？删除后无法恢复</p>
            </GuipDialog>
        </div>
    </div>
</template>

<script>

import GuipTable from '@/components/GuipTable.vue';
import GuipSelect from '@/components/GuipSelect.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipToolTip from '@/components/GuipToolTip.vue';
import GuipDialog from '@/components/GuipDialog.vue';
// import Page from '@/components/Page.vue';
import PromptText from '@/components/PromptText.vue';

export default {
    name: 'siteList',
    components: {
        GuipTable,
        GuipSelect,
        GuipInput,
        GuipToolTip,
        GuipDialog,
        // Page,
        PromptText,
    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            // 表格加载
            tableLoading: true,
            // 订单列表
            orderList: [],
            orderListTotalRecords: 0,
            isHasNextPage: true,
            orderListCurrentPage: 1,
            orderListPageSize: 10,
            orderListNextMinId: 0,
            orderListPrevMaxId: 0,
            orderListEndPage: 0,
            orderListJumpToPage: 0,

            siteList: [],

            searchDate: '',
            searchStatus: '',
            searchStatusList: [],
            searchUid: 0,
            searchTid: 0,
            searchType: 0,

            dialogVisibleDelReport: false,
            delReportId: '',
        }
    },
    mounted() {
        this.getOrderList()
    },
    methods: {
        getOrderList() {
            var params = {
                page: this.orderListCurrentPage,
                pagesize: this.orderListPageSize,
                minid: this.orderListNextMinId,
                maxid: this.orderListPrevMaxId,
                end_page: this.orderListEndPage,
                jump_to_page: this.orderListJumpToPage,
            }
            if (this.searchTid) {
                params = {};
                params.tid = this.searchTid
            }

            this.tableLoading = true
            const that = this
            that.orderList = []
            this.$http('POST', '/agentnew/ajax_get_check_order_list', params,{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.tableLoading = false
                this.$nextTick(() => {
                    that.orderList = response.data.list
                    this.searchStatusList = response.data.search_check_status
                    
                    this.orderListTotalRecords = response.data.total_records
                    this.orderListNextMinId = response.data.minid
                    this.orderListPrevMaxId = response.data.maxid

                    this.isHasNextPage = response.data.is_has_next_page
                    console.log(this.isHasNextPage, 'isHasNextPage')
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        getPayImg(pay_type) {
            return require('@/assets/pay/pay_'+pay_type+'.svg');
        },
        getChannelImg(src) {
            return require('@/assets/channel_'+src+'.svg');
        },
        changeSearchSite() {
            console.log(this.searchUid)
            this.getOrderList()
        },
        changeSearchTid() {
            console.log(this.searchTid)
            this.getOrderList()
        },
        // 弹框相关方法---start
        showConfirmDelReport(row) {
            this.dialogVisibleDelReport = true;
            this.delReportId = row.sale_id;
        },
        // 确认按钮事件
        confirmDelReport() {
            this.$http('POST', '/agentnew/ajax_del_report', {
                saleid: this.delReportId,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                        this.dialogVisibleDelReport = false;
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 取消按钮事件
        handleCancel() {
            this.dialogVisibleDelReport = false;
        },
        // 关闭弹框事件
        handleClose() {
            this.dialogVisibleDelReport = false;
        },
        dialogVisibleChange(data) {
            console.log(data, 'data098908090');
        },
        // 弹框相关方法---end

        handlePageChange(params) {
            // 根据参数调用API获取新数据
            console.log('分页参数:', params);
            
            // 更新当前页码
            this.orderListCurrentPage = params.page;
            
            // 更新minid/maxid（根据实际API返回）
            if (params.isNext) {
                // 从API响应中获取新的orderListNextMinId
                this.orderListNextMinId = params.minid;
            }
            
            if (params.isPrev) {
                // 从API响应中获取新的orderListPrevMaxId
                this.orderListPrevMaxId = params.maxid;
            }

            if (params.isLast) {
                this.orderListEndPage = params.isLast;
            }

            if (params.isJump) {
                this.orderListJumpToPage = params.page;
            }

            this.getOrderList()
        }
    },
    computed: {
    },
}
</script>
<style lang="scss" scoped>
.pageheader {
    display: flex;
    justify-content: space-between;
    /* 关键属性 */
    align-items: center;
    margin: 0px 0px 16px 0px;
}

.pagetitle {
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #1E2226;
    margin-top: 8px;
}

.elementWrap {
    padding: 32px 36px;
    background: #fff;
}

::v-deep .custom-popover {
    position: fixed !important;
    // max-height: 290px;
    // overflow-y: auto;
    margin-top: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
}

.wh-16 {
    width: 16px;
    height: 16px;
    z-index: 1;
}
.mb-10 {
    margin-bottom: 10px;
}

.mr-12 {
    margin-right: 12px;
}
.mr-24 {
    margin-right: 24px;
}
.mr-32 {
    margin-right: 32px;
}
.my-32 {
    margin-bottom: 32px;
    margin-top: 32px;
}

a {
    text-decoration: none;
    color: #006AFF;
}
a:hover {
    text-decoration: underline;
}

.ml-7 {
    margin-left: 7px;
}



.status-item {
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 0;
    padding: 2px 10px;
    border-radius: 4px;
    
}

.divgreen {
    background: rgba(239, 255, 224, 0.5);
    box-sizing: border-box;
    border: 1px solid rgba(0, 194, 97, 0.6);
}
.fontgreen {
    font-family: Microsoft YaHei UI;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    letter-spacing: 0.08em;
    color: #0DAF49;
}
.divblue {
    background: #F2F7FF;
    box-sizing: border-box;
    border: 1px solid #BFDAFF;
}
.fontblue {
    font-family: Microsoft YaHei UI;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    letter-spacing: 0.08em;
    color: #006AFF;
}

.divred {
    background: #FFF1F0;
    box-sizing: border-box;
    border: 1px solid #FFA39E;
}
.fontred {
    font-family: Microsoft YaHei UI;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    letter-spacing: 0.08em;
    color: #FF4D4F;
}
.divgray {
    background: #F6F7FA;
    box-sizing: border-box;
    border: 1px solid #DFE2E6;
}
.fontgray { 
    color: #626573;
}
.divorange {
    background: #FFFBF2;
    box-sizing: border-box;
    border: 1px solid rgba(251, 131, 45, 0.38);
}
.fontorange {
    color: #FB832D;
}
.divpurple {
    background: #F9F2FF;
    box-sizing: border-box;
    border: 1px solid rgba(126, 118, 253, 0.28);
}
.fontpurple { 
    color: #6258FF;
}

.checktitle {
    /* body/body 2_bold */
    font-family: Microsoft YaHei UI;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    /* text/text_1 */
    color: #1E2226;
}
.el-form-item {
    margin-bottom: 0px
}


</style>