merchant_feedov_web/src/views/order/BuyCard/detaile.vue

<template>
    <a-modal v-model:visible="modelValue" width="800px" title="订单详情" @cancel="cancel" @ok="showDetail = false">
        <div class="detail-box">
            <div class="detail-item-box">
                <div class="detail-item">
                    <div class="item-label">订单编号</div>
                    <div class="item-content">{{ FormDataList.id }}</div>
                </div>
                <div class="detail-item">
                    <div class="item-label">订单状态</div>
                    <div class="item-content">
                        <a-tag color="#168cff" v-if="FormDataList.tmsStatus == 1">未发货</a-tag>
                        <a-tag color="#00b42a" v-if="FormDataList.tmsStatus == 2">已发货</a-tag>
                    </div>
                </div>
            </div>
            <div class="detail-item-box">
                <div class="detail-item">
                    <div class="item-label">运营商</div>
                    <div class="item-content">{{ FormDataList.sourceName }}</div>
                </div>
                <div class="detail-item">
                    <div class="item-label">资费信息</div>
                    <div class="item-content">{{ TariffInfomr }}</div>
                </div>
            </div>
            <div class="detail-item-box">
                <div class="detail-item">
                    <div class="item-label">最短订阅周期</div>
                    <div class="item-content">{{ tariffForm.settlementCycle?.split('~')[0] }}个月</div>
                </div>
                <div class="detail-item">
                    <div class="item-label">最长订阅周期</div>
                    <div class="item-content">{{ tariffForm.settlementCycle?.split('~')[1] }}个月</div>
                </div>
            </div>
            <div class="detail-item-box">
                <div class="detail-item">
                    <div class="item-label">计费方式</div>
                    <div class="item-content">{{ tariffForm.billingMethodName }}</div>
                </div>
                <div class="detail-item">
                    <div class="item-label">结算周期</div>
                    <div class="item-content">{{ tariffForm.billingcycleName }}</div>
                </div>
            </div>
            <div class="detail-item-box">
                <div class="detail-item">
                    <div class="item-label">卡类型</div>
                    <div class="item-content">{{ FormDataList.CardType }}</div>
                </div>
                <div class="detail-item">
                    <div class="item-label">标准价格</div>
                    <div class="item-content">{{ tariffForm.pricingName }}</div>
                </div>
            </div>
            <div class="detail-item-box">
                <div class="detail-item">
                    <div class="item-label">流量池</div>
                    <div class="item-content">{{ FormDataList.isTrafficPool == 1 ? '是' : '否' }}</div>
                </div>
            </div>
            <div class="detail-item-box">
                <div class="detail-item">
                    <div class="item-label">卡数量</div>
                    <div class="item-content">10000
                        <a-button type="primary" @click="showCard = true" style="margin-left:10px;"
                            v-if="userType == 1 && FormDataList.moderationStatus == 2">分配卡号</a-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail-table">
            <a-table :columns="columnsDetail" :data="dataDetail" />
        </div>
    </a-modal>

    <!-- 分配卡号 -->
    <a-modal v-model:visible="showCard" title="分配卡号" @cancel="closeModal(showCard, FormDataList)"
        @before-ok="showCard = false" okText="确认" cancelText="取消">
        <Upload listType="" minx="9999" accept=".xlsx" :handelUpload="customRequest">
        </Upload>
    </a-modal>
</template>

<script setup>
import { ref, onMounted, toRefs, toRef ,watch} from 'vue';
import { AcquireOrdertariff, DistributionCard } from '@/api/path/order'
import { Message } from '@arco-design/web-vue';
import Upload from "@/components/upload/index.vue";
import { Getdictionary } from '@/mixins/index.js'
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    FormDataList: {
        type: Object,
        default: () => ({})
    }
})
const modelValue = toRef(props, 'modelValue')
const FormDataList = toRef(props, 'FormDataList')
const emit = defineEmits(['update:modelValue', 'submit'])
const state = ref({
    tariffForm: {},
    showCard: false,
    res1:[],
    res2:[],
    res3:[],
    userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType, // 1平台 2用户
})
const { tariffForm, showCard,res1,res2,res3,userType } = toRefs(state.value)
const columnsDetail = [{ title: 'ICCID', dataIndex: 'iccid' }
]
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 customRequest = (options) => {
    const formData = new FormData();
    formData.append('file', options.fileItem.file);  // 这里将文件添加到 FormDataList 中
    formData.append('orderId', FormDataList.value.id);
    DistributionCard(formData).then(res => {
        Message.success(res.message)
    })
}

const cancel = () => {
    emit('update:modelValue', false)
}

watch(() => FormDataList.value, val => {
    if (Object.keys(val).length === 0) return
    AcquireOrdertariff({ id: val.trafficId }).then(res => {
        tariffForm.value = res.data
        tariffForm.value.billingcycleName = res1.value.filter(val => val.value == res.data.billingCycle)[0]?.label;
        tariffForm.value.billingMethodName = res2.value.filter(val => val.value == res.data.billingMethod)[0]?.label;
        tariffForm.value.TariffInfomr = res.data.trafficBilling + '/' + res.data.trafficBillingType
        tariffForm.value.pricingName = tariffForm.value.pricing !== '' ? tariffForm.value.pricing + '/' + res3.value.filter(val => val.value == res.data.currency)[0]?.label : '';
    })
},{deep: true})

onMounted(async () => {
    res1.value = await Getdictionary('Billingcycle')
    res2.value = await Getdictionary('billingMethod')
    res3.value = await Getdictionary('currencyType')
})
</script>
<style scoped lang="less">
.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);
            }
        }
    }
}
</style>