boss/pages/main/index/cert_count.vue

<template>
<div>
    <el-row :gutter="15">
        <el-form ref="modalForm" :model="modalFormData" :rules="rules" size="medium" label-width="110px" label-position="left">
            <el-col :span="5">
                <el-form-item label-width="40px" label="uid" prop="uid">
                    <el-input v-model="modalFormData.uid" placeholder="请输入uid" clearable :style="{ width: '100%' }">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label-width="70px" label="技术栈" prop="field102">
                    <el-cascader v-model="modalFormData.field102" :options="field102Options" :props="field102Props" :style="{ width: '100%' }" placeholder="请选择技术栈" clearable></el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label-width="60px" label="状态" prop="dev_status">
                    <el-select v-model="modalFormData.dev_status" placeholder="请选择状态" clearable :style="{ width: '100%' }">
                        <el-option v-for="(item, index) in dev_statusOptions" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="先认证后付款" prop="cert_type">
                    <el-select v-model="modalFormData.cert_type" placeholder="请选择先认证后付款" clearable :style="{ width: '100%' }">
                        <el-option v-for="(item, index) in cert_typeOptions" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label-width="0">
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </el-row>

    <el-table v-loading="loading" :border="true" :data="table" style="width: 100%">
        <el-table-column label="真名+昵称" width="190">
            <template slot-scope="scope">
                <div>昵称：{{ scope.row.user_info.nickname }}</div>
                <div>真名：{{ scope.row.user_info.realname }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="uid" label="uid" width="80"> </el-table-column>
        <el-table-column label="技术栈" width="120">
            <template slot-scope="scope">
                <div>{{ scope.row.user_info.direction_name }}</div>
            </template>
        </el-table-column>
        <el-table-column label="技能" width="180">
            <template slot-scope="scope">
                <div>{{ scope.row.user_info.skill_description }}</div>
            </template>
        </el-table-column>
        <el-table-column label="作品" width="200">
            <template slot-scope="scope">
                <div>
                    <el-popover placement="top-start" title="作品介绍" trigger="hover" width="600" :content="scope.row.user_info.work_description">
                        <div class="text-line-1" slot="reference">
                            {{ scope.row.user_info.work_description }}
                        </div>
                    </el-popover>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="状态" width="120">
            <template slot-scope="scope">
                <div>
                    {{ dev_statusMap[scope.row.dev_status] }}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="checktime" label="认证完成时间" width="190">
        </el-table-column>
        <el-table-column label="先认证后付款" width="120">
            <template slot-scope="scope">
                <div>
                    <el-tag v-if="scope.row.cert_type == 1">直接付费</el-tag>
                    <el-tag v-if="scope.row.cert_type == 2" type="warning">预付</el-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="退款" width="190">
            <template slot-scope="scope">
                <div>
                    <template v-if="scope.row.refundState == 1">
                        <el-button type="danger" plain size="small" @click="applyRefund(scope.row)">申请退款</el-button>
                    </template>
                    <template v-if="scope.row.refundState == 2">
                        <el-tag type="info">已提交</el-tag>
                        <el-button type="danger" plain size="small" @click="refund(scope.row)">确认退款</el-button>
                    </template>

                    <el-tag v-if="scope.row.refundState == 3" type="success">退款完成</el-tag>
                    <el-tag v-if="scope.row.refundState == 4" type="warning">无法退款</el-tag>
                </div>
            </template>
        </el-table-column>
        <!-- <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
                <template v-if="scope.row.status == 1">
                    <el-button type="success" size="mini" @click="setDynamicPass(scope.row.comId)">通过</el-button>
                    <el-button type="warning" size="mini" @click="callDynamicReject(scope.row.comId)">拒绝</el-button>
                </template>
                <template v-if="scope.row.status == 2">
                    <el-button type="primary" size="mini" @click="setDynamicRecommend(scope.row.comId)">神评</el-button>
                    <el-button type="warning" size="mini" @click="callDynamicReject(scope.row.comId,scope.row)">拒绝</el-button>
                </template>
                <template v-if="scope.row.status == 3">
                    <el-button type="success" size="mini" @click="setDynamicPass(scope.row.comId)">通过</el-button>
                </template>

                <el-button type="danger" size="mini" @click="delDynamic(scope.row.comId)">删除</el-button>
            </template>
        </el-table-column> -->
    </el-table>

    <el-row :gutter="24">
        <el-col :span="23" :offset="1">
            <div class="mt-20 mb-20">
                <el-pagination :page-size="page_size" :current-page="page" @current-change="pageChange" @size-change="handleSizeChange" background :page-sizes="[10, 30, 50]" layout="total,sizes,prev, pager, next,jumper" :total="total">
                </el-pagination>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
export default {
    components: {},
    props: [],
    data() {
        return {
            modalFormData: {
                uid: undefined,
                field102: [null, null],
                dev_status: 0,
                cert_type: 0,
            },
            rules: {
                uid: [{
                    required: false,
                    message: "请输入uid",
                    trigger: "blur",
                }, ],
                field102: [{
                    required: false,
                    type: "array",
                    message: "请至少选择一个技术栈",
                    trigger: "change",
                }, ],
                dev_status: [{
                    required: false,
                    message: "请选择状态",
                    trigger: "change",
                }, ],
                cert_type: [{
                    required: false,
                    message: "请选择先认证后付款",
                    trigger: "change",
                }, ],
            },
            field102Options: [],
            order_statusOptions: [{
                    label: "全部",
                    value: 0,
                },
                {
                    label: "完善基础信,待支付",
                    value: 1,
                },
                {
                    label: "已经支付，待完善简历",
                    value: 2,
                },
                {
                    label: "完善简历结束，等待后台审核",
                    value: 3,
                },
                {
                    label: "后台审核成功，分配面试官",
                    value: 4,
                },
                {
                    label: "面试官分配结束，待面试",
                    value: 5,
                },
                {
                    label: "已拒绝",
                    value: 6,
                },
                {
                    label: "面试结束",
                    value: 7,
                },
                {
                    label: "已打款",
                    value: 8,
                },
            ],
            dev_statusOptions: [{
                    label: "全部",
                    value: 0,
                },
                {
                    label: "未接单",
                    value: 1,
                },
                {
                    label: "正在对接",
                    value: 2,
                },
                {
                    label: "开发中",
                    value: 3,
                },
                {
                    label: "已完成订单",
                    value: 4,
                },
                {
                    label: "已退款",
                    value: 5,
                },
            ],
            cert_typeOptions: [{
                    label: "全部",
                    value: 0,
                },
                {
                    label: "直接付费",
                    value: 1,
                },
                {
                    label: "预付",
                    value: 2,
                },
            ],
            field102Props: {
                multiple: false,
                label: "label",
                value: "value",
                children: "children",
            },

            table: [],
            page: 1,
            page_size: 10,
            total: 0,
            loading: false,
        };
    },
    computed: {
        dev_statusMap() {
            return {
                1: "未接单",
                2: "正在对接",
                3: "开发中",
                4: "已完成订单",
                5: "已退款",
            };
        },
    },
    watch: {},
    created() {
        this.getField102Options();
    },
    mounted() {
        this.fetchData();
    },
    methods: {
        canRefund(row) {
            return row.dev_status == 1 || row.dev_status == 2;
        },
        submitForm() {
            this.$refs["modalForm"].validate((valid) => {
                if (!valid) return;

                this.page = 1;
                this.fetchData();
                // TODO 提交表单
            });
        },
        resetForm() {
            this.$refs["modalForm"].resetFields();
        },
        getField102Options() {
            this.$post("/api/direction/get_all_data")
                .then((res) => {
                    if (res.status == 1) {
                        let aa = directionDataParse(res.data);
                        this.field102Options = [...aa];
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "操作失败",
                    });
                });
        },

        pageChange(val) {
            this.page = val;
            this.fetchData();
        },
        handleSizeChange(e) {
            this.page_size = e;
            this.fetchData();
        },
        async fetchData() {
            this.loading = true;

            let params = {};
            if (this.modalFormData.uid) {
                params.uid = this.modalFormData.uid;
            }
            if (this.modalFormData.field102[1]) {
                params.occupation_id = this.modalFormData.field102[0];
                params.direction_id = this.modalFormData.field102[1];
            }

            params.dev_status = this.modalFormData.dev_status;
            params.cert_type = this.modalFormData.cert_type;

            let res = await this.$post("/uapi/cert/order", {
                ...params,
                page: this.page,
                page_size: this.page_size,
            });
            this.loading = false;
            if (res && res.status === 1) {
                let list = res.data.list.map(this.getRefundState);
                this.table = [...list];
                this.total = res.data.total;
            }
        },

        getRefundState(item) {
            // refundState
            // 1 正常
            // 2 退款中
            // 3 退款完成
            // 4 无法退款
            let refundState = 1;

            if (item.dev_status == 1 || item.dev_status == 2) {
                refundState = item.tk_status;
            } else {
                refundState = 4;
            }

            return {
                ...item,
                refundState,
            };
        },

        // 申请退款
        async applyRefund(row) {
            this.loading = true;

            debugger
            let res = await this.$post("/uapi/cert/tk", {
                id: row.id,
            });
            this.loading = false;
            if (res && res.status === 1) {
                this.$message({
                    type: "success",
                    message: "退款成功",
                });
                this.fetchData();
            } else {
                this.$message({
                    type: "error",
                    message: "退款失败",
                });
            }
        },

        // 确认退款
        async refund(row) {
            this.loading = true;
            let res = await this.$post("/uapi/cert/confirm_tk", {
                id: row.id,
            });
            this.loading = false;
            if (res && res.status === 1) {
                this.$message({
                    type: "success",
                    message: "退款成功",
                });
                this.fetchData();
            } else {
                this.$message({
                    type: "error",
                    message: "退款失败",
                });
            }
        },
    },
};

function directionDataParse(arr) {
    arr = arr.sort(function (a, b) {
        return Number(a.display_order) - Number(b.display_order) > 0;
    });
    let result = [];
    let len = arr.length;
    for (let i = 0; i < len; i++) {
        let {
            children,
            ...other
        } = arr[i];
        let label = arr[i].occupation_name || arr[i].direction_name;
        let value = arr[i].occupation_id || arr[i].direction_id;
        let item;
        if (children) {
            children = directionDataParse(children);
            item = {
                ...other,
                label,
                value,
                children,
            };
        } else {
            item = {
                ...other,
                label,
                value,
            };
        }
        result.push(item);
    }
    return result;
}
</script>

<style>
.text-line-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>