merchant_feedov_web/src/views/order/RenewalOrder/index.vue

<!-- 续费订单 -->
<template>
    <div class="silent-expire-alarm">
        <!-- 搜索条件区 -->
        <div class="search-section">
            <a-form :model="searchForm" layout="inline">
                <a-form-item field="orderNumber" label="订单编号">
                    <a-input v-model="searchForm.orderNumber" placeholder="请输入订单编号" allow-clear />
                </a-form-item>
                <a-form-item field="customerName" label="客户">
                    <a-input v-model="searchForm.customerName" placeholder="请输入客户名称" allow-clear />
                </a-form-item>
                <a-form-item field="customerName" label="卡号">
                    <a-input v-model="searchForm.cardNumber" placeholder="请输入卡号" allow-clear />
                </a-form-item>
                <a-form-item>
                    <a-space>
                        <a-button type="primary" @click="handleSearch">搜索</a-button>
                        <a-button @click="resetSearch">重置</a-button>
                    </a-space>
                </a-form-item>
            </a-form>
        </div>
        <div class="audit-btn">
            <a-button @click="openAudit" type="text">
                <template #icon>
                    <icon-plus-circle />
                </template>
                <template #default>审核</template>
            </a-button>
        </div>
        <!-- 数据表格 -->
        <a-table row-key="customerName" v-model:selectedKeys="selectedKeys" :row-selection="rowSelection"
            :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '400px' }">
            <template #detail="{ record }">
                <a-button @click="openDetail(record)" type="text">订单详情</a-button>
            </template>
        </a-table>
        <a-modal v-model:visible="showAudit" title="审核" @cancel="showAudit = false" @before-ok="submitAudit"
            okText="确定审核" cancelText="关闭">
            <a-form :model="formAudit" auto-label-width>
                <a-form-item field="customerName" label="客户">
                    <!-- <a-input v-model="formAudit.customerName" placeholder="请输入客户" /> -->
                    <div class="audit-txt" style="color:#418035;">演示账号02</div>
                </a-form-item>
                <a-form-item field="cardType" label="卡类型">
                    <!-- <a-input v-model="formAudit.cardType" placeholder="请输入单号" /> -->
                    <div class="audit-txt">普通卡切卡普通卡MP1，1元/涨<div class="audit-tag">共1张卡</div>
                    </div>
                </a-form-item>
                <a-form-item field="money" label="资费">
                    <!-- <a-input v-model="formAudit.money" placeholder="请输入单号" /> -->
                    <div class="audit-txt">“移动100M月包” <div class="audit-tag">订购12个月</div>
                    </div>
                </a-form-item>
                <a-form-item field="orderStatus" label="订单状态">
                    <!-- <a-input v-model="formAudit.orderStatus" placeholder="请输入单号" /> -->
                    <a-radio-group v-model="formAudit.orderStatus" :options="options" />
                </a-form-item>
                <a-form-item field="auditOpinion" label="审核意见">
                    <!-- <a-input v-model="formAudit.auditOpinion" placeholder="请输入单号" /> -->
                    <a-textarea placeholder="您填写的审核意见会直接投送给用户，请认真填写！" v-model="formAudit.auditOpinion" allow-clear />
                </a-form-item>
                <a-form-item field="fileList" label="销售合同">
                    <a-upload action="/" :default-file-list="formAudit.fileList" />
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal v-model:visible="showDetail" width="800px" title="续费订单" :hide-cancel="true" @cancel="detailCancel">
            <div class="detail-box">
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">订单编号</div>
                        <div class="item-content">53357981207</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">订单状态</div>
                        <div class="item-content">已审核</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">运营商</div>
                        <div class="item-content">泰国AIS</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">下单时间</div>
                        <div class="item-content">2024-10-24 10:00:23</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">资费信息</div>
                        <div class="item-content">1.0G/月</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">资费编码</div>
                        <div class="item-content">MR206</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">计费方式</div>
                        <div class="item-content">按单流量消耗计费</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">结算周期</div>
                        <div class="item-content">月</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">流量资费计费</div>
                        <div class="item-content">0.8美金/G;MRC:0元;网络接入0元</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">续期数量</div>
                        <div class="item-content">50
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-table">
                <a-table :columns="columnsDetail" :data="dataDetail" />
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { Message } from '@arco-design/web-vue';
const selectedKeys = ref([]);
const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
});
const searchForm = reactive({
    cardNumber: '',
    customerName: '',
    orderNumber: ''
});

const columns = [
    { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
    {
        title: '订单编号', dataIndex: 'orderNumber', ellipsis: true,
        tooltip: true,
        width: 100
    },
    { title: '客户名称', dataIndex: 'customerName' },
    { title: '审核状态', dataIndex: 'auditStatus' },
    {
        title: '供应商名称', dataIndex: 'originName', ellipsis: true,
        tooltip: true,
        width: 150
    },
    { title: '资费', dataIndex: 'money' },
    { title: '卡号', dataIndex: 'cardNumber' },
    { title: '订单金额(元)', dataIndex: 'orderMoney' },
    { title: '下单时间', dataIndex: 'orderTime' },
    { title: '详情', slotName: 'detail', align: 'center' },
];
const columnsDetail = [{ title: 'ICCID', dataIndex: 'iccid' },
{ title: '池名称及编号', dataIndex: 'nameAndId' },
{ title: '卡状态', dataIndex: 'status' },
]
const dataDetail = ref([{
    iccid: '8986061800002054589N',
    nameAndId: '泰国监控40G共享/53357981207',
    status: '沉默期'
},
{
    iccid: '8986061800002054588N',
    nameAndId: '泰国监控40G共享/53357981207',
    status: '沉默期'
}, {
    iccid: '8986061800002054587N',
    nameAndId: '泰国监控40G共享/53357981207',
    status: '沉默期'
}, {
    iccid: '8986061800002054586N',
    nameAndId: '泰国监控40G共享/53357981207',
    status: '沉默期'
},])
const tableData = ref([
    {
        orderNumber: '13800138000',
        customerName: '张三',
        orderStatus: '1',
        auditStatus: '待审核',
        originName: '移动-广州分公司',
        money: '100',
        cardNumber: '1124224q',
        orderMoney: '11美元',
        finallyMoney: '1美元',
        returnMoney: '10美元',
        orderTime: '2024-10-11'
        // operate:'上传合同'
    },
    {
        orderNumber: '13800138000',
        customerName: '李四',
        orderStatus: '1',
        auditStatus: '待审核',
        originName: '移动-广州分公司',
        money: '100',
        moneyOld: '100',
        cardNumber: '1124224q',
        orderMoney: '11美元',
        finallyMoney: '1美元',
        returnMoney: '10美元',
        orderTime: '2024-10-11'
        // operate:'上传合同'
    },
    {
        orderNumber: '13800138000',
        customerName: '王五',
        orderStatus: '1',
        auditStatus: '待审核',
        originName: '移动-广州分公司',
        money: '100',
        moneyOld: '100',
        cardNumber: '1124224q',
        orderMoney: '11美元',
        finallyMoney: '1美元',
        returnMoney: '10美元',
        orderTime: '2024-10-11'
        // operate:'上传合同'
    },
    {
        orderNumber: '13800138000',
        customerName: '赵六',
        orderStatus: '1',
        auditStatus: '待审核',
        originName: '移动-广州分公司',
        money: '100',
        moneyOld: '100',
        cardNumber: '1124224q',
        orderMoney: '11美元',
        finallyMoney: '1美元',
        returnMoney: '10美元',
        orderTime: '2024-10-11'
        // operate:'上传合同'
    },

]);
const pagination = reactive({
    total: tableData.value.length,
    current: 1,
    pageSize: 10,
});
//订单详情的弹框
const showDetail = ref(false);
// 查看订单详情
const openDetail = (item) => {
    showDetail.value = true;
}
const handleSearch = () => {
    console.log('Search form data:', searchForm);
    Message.success('执行搜索操作');
};

const resetSearch = () => {
    Object.keys(searchForm).forEach(key => {
        if (Array.isArray(searchForm[key])) {
            searchForm[key] = [];
        } else {
            searchForm[key] = null;
        }
    });
    Message.success('搜索条件已重置');
};
// 订单状态
const options = [
    { label: '发货', value: '1' },
    { label: '退回', value: '2' },
];
// 审核
const showAudit = ref(false);
const formAudit = reactive({
    customerName: '',
    cardType: '',
    money: '',
    orderStatus: '',
    auditOpinion: '',
    fileList: []
})
// 触发审核的弹框
const openAudit = () => {
    showAudit.value = true;
}
// 确认审核
const submitAudit = () => {
    console.log(formAudit, 'lll')
    window.setTimeout(() => {
        showAudit.value = false;
    }, 1000)
}
const detailCancel = () => {
}
</script>

<style scoped lang="less">
.silent-expire-alarm {
    padding: 20px !important;
    // background: #fcf;
}

.search-section {
    margin-bottom: 20px;
}

.arco-table-th {
    white-space: nowrap;
}

.audit-txt {
    display: flex;
    justify-content: center;
    align-items: center;

    .audit-tag {
        margin-left: 20px;
        background: #63c2c6;
        color: #fff;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 50px;
    }
}

.audit-btn {
    margin-bottom: 10px;
}

.detail-box {
    .detail-item-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .detail-item {
            //styleName: Body/Medium;
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            text-align: left;
            display: flex;
            align-items: center;
            min-width: 350px;

            .item-label {
                color: rgba(0, 0, 0, 0.4);
                width: 120px;
                text-align: right;
                margin-right: 10px;
            }

            .item-content {
                color: rgba(51, 51, 51, 1);
            }
        }
    }
}

.detail-table {
    margin-top: 20px;
}
</style>