|
|
@@ -1,22 +1,24 @@
|
|
|
<template>
|
|
|
<div class="order">
|
|
|
- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
|
+ <el-tabs v-model="form.orderStatus" class="demo-tabs" @tab-click="handleClick">
|
|
|
<el-tab-pane v-for="tab in tabs" :key="tab.name" :label="$t(tab.label)" :name="tab.name">
|
|
|
<ul class="order-list">
|
|
|
<li v-for="(item, index) in list" :key="index">
|
|
|
<div class="order-list-top flex-center-between">
|
|
|
<div class="order-list-top-l flex-align-center">
|
|
|
- <el-tag :type="item.orderStatus == 0 ? 'primary' : item.orderStatus == 1 ? 'success' : item.orderStatus == 3 ? 'danger' : ''">{{ item.orderStatus == 0 ?
|
|
|
- $t('personalCenter.daifukuan') : item.orderStatus == 1 ? $t('personalCenter.yiwancheng') : item.orderStatus == 3 ?
|
|
|
- $t('personalCenter.yiquxiao') : '' }}</el-tag>
|
|
|
+ <el-tag
|
|
|
+ :type="item.orderStatus == 0 ? 'primary' : item.orderStatus == 1 ? 'success' : item.orderStatus == 3 ? 'danger' : ''">{{
|
|
|
+ item.orderStatus == 0 ?
|
|
|
+ $t('personalCenter.daifukuan') : item.orderStatus == 1 ? $t('personalCenter.yiwancheng') :
|
|
|
+ item.orderStatus == 3 ?
|
|
|
+ $t('personalCenter.yiquxiao') : '' }}</el-tag>
|
|
|
<div class="">{{ $t('personalCenter.dingdanhao') }}: {{ item.orderNo }}</div>
|
|
|
</div>
|
|
|
<div class="order-list-top-r">{{ $t('common.orderTime') }}: {{ item.createTime }}</div>
|
|
|
</div>
|
|
|
<div class="order-list-main flex">
|
|
|
- <img class="image"
|
|
|
- :src="item.orderImage" alt="">
|
|
|
- <div class="order-list-con flex-center-between flex_1">
|
|
|
+ <div class="order-list-main-l flex">
|
|
|
+ <img class="image" :src="item.orderImage" alt="">
|
|
|
<div class="">
|
|
|
<div class="title">{{ item.orderTypeName }}</div>
|
|
|
<div class="">{{ item.description }}
|
|
|
@@ -24,51 +26,59 @@
|
|
|
<el-button type="primary" size="small" plain>技能标签</el-button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="mi_price">
|
|
|
+ </div>
|
|
|
+ <div class="order-list-main-r flex">
|
|
|
+ <div class="order-list-con flex-center-between flex_1">
|
|
|
+
|
|
|
+ <!-- <div class="mi_price">
|
|
|
<div class="">{{ item.amount }}</div>
|
|
|
<div class="">{{ item.payMethod == 'BMI' ? $t('common.baomibi') : $t('common.mibi') }}</div>
|
|
|
- </div>
|
|
|
- <div class="mi_price price">
|
|
|
- <div class="">{{ item.discountAmount || 0 }}{{ item.amountUnit }}</div>
|
|
|
- <div class="">{{ $t('common.actualAmount') }}</div>
|
|
|
- </div>
|
|
|
- <div class="" >
|
|
|
- <div v-if="item.invoiceStatus == 0" @click="applyInvoices(item, index)" class="blue btn">
|
|
|
- <img src="/src/assets/imgs/my/order3@2x.png" alt="">
|
|
|
- <div class="">{{ $t('common.applyInvoice') }}</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="mi_price price">
|
|
|
+ <div class="">{{ item.amount || 0 }}{{ item.amountUnit }}</div>
|
|
|
+ <div class="">{{ item.payMethod == 'BMI' ? $t('common.baomibi') : item.payMethod == 'MI' ?
|
|
|
+ $t('common.mibi') : $t('common.rmb') }}</div>
|
|
|
</div>
|
|
|
- <div class="btn_kong" v-else></div>
|
|
|
- <template v-if="false">
|
|
|
- <template v-if="index == 0">
|
|
|
- <div class="gradient btn">
|
|
|
- <img src="/src/assets/imgs/my/order1@2x.png" alt="">
|
|
|
- <div class="">{{ $t('common.goPay') }}</div>
|
|
|
- </div>
|
|
|
- <div class="blue btn mt8">
|
|
|
- <img src="/src/assets/imgs/my/order2@2x.png" alt="">
|
|
|
- <div class="">{{ $t('common.cancelOrder') }}</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else-if="index == 1">
|
|
|
- <div class="blue btn">
|
|
|
- <img src="/src/assets/imgs/my/order3@2x.png" alt="">
|
|
|
- <div class="">{{ $t('common.applyInvoice') }}</div>
|
|
|
- </div>
|
|
|
- <div class="red btn mt8">
|
|
|
- <img src="/src/assets/imgs/my/order4@2x.png" alt="">
|
|
|
- <div class="">{{ $t('common.applyRefund') }}</div>
|
|
|
- </div>
|
|
|
+ <div class="">
|
|
|
+ <div v-if="item.invoiceStatus == 0" @click="applyInvoices(item, index)" class="blue btn">
|
|
|
+ <img src="/src/assets/imgs/my/order3@2x.png" alt="">
|
|
|
+ <div class="">{{ $t('common.applyInvoice') }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="btn_kong" v-else></div>
|
|
|
+ <template v-if="false">
|
|
|
+ <template v-if="index == 0">
|
|
|
+ <div class="gradient btn">
|
|
|
+ <img src="/src/assets/imgs/my/order1@2x.png" alt="">
|
|
|
+ <div class="">{{ $t('common.goPay') }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="blue btn mt8">
|
|
|
+ <img src="/src/assets/imgs/my/order2@2x.png" alt="">
|
|
|
+ <div class="">{{ $t('common.cancelOrder') }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="index == 1">
|
|
|
+ <div class="blue btn">
|
|
|
+ <img src="/src/assets/imgs/my/order3@2x.png" alt="">
|
|
|
+ <div class="">{{ $t('common.applyInvoice') }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="red btn mt8">
|
|
|
+ <img src="/src/assets/imgs/my/order4@2x.png" alt="">
|
|
|
+ <div class="">{{ $t('common.applyRefund') }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="index == 2">
|
|
|
+ <div class="btn gradient">
|
|
|
+ <img src="/src/assets/imgs/my/order5@2x.png" alt="">
|
|
|
+ <div class="">{{ $t('common.reorder') }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
- <template v-else-if="index == 2">
|
|
|
- <div class="btn gradient">
|
|
|
- <img src="/src/assets/imgs/my/order5@2x.png" alt="">
|
|
|
- <div class="">{{ $t('common.reorder') }}</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
@@ -79,7 +89,7 @@
|
|
|
@page-change="handlePageChange" />
|
|
|
</template>
|
|
|
<el-empty v-else :description="$t('common.empty')" />
|
|
|
- <el-dialog v-model="dialogVisible" title="申请开票" width="784" :before-close="handleClose">
|
|
|
+ <el-dialog v-model="dialogVisible" title="申请开票" width="784">
|
|
|
<div class="dialog_title">发票抬头信息</div>
|
|
|
<el-form :model="invoiceData" class="demo-form-inline" label-position="top" :rules="rules" ref="ruleFormRef">
|
|
|
<el-row :gutter="16">
|
|
|
@@ -97,38 +107,46 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="购方税号" prop="taxNumber">
|
|
|
- <el-input v-model="invoiceData.taxNumber" placeholder="请输入" clearable />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="公司地址">
|
|
|
- <el-input v-model="invoiceData.otherInfo.address" placeholder="请输入" clearable />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="公司电话">
|
|
|
- <el-input v-model="invoiceData.otherInfo.mobile" placeholder="请输入" clearable />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="公司开户行">
|
|
|
- <el-input v-model="invoiceData.otherInfo.bank" placeholder="请输入" clearable />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="开户行账号">
|
|
|
- <el-input v-model="invoiceData.otherInfo.account" placeholder="请输入" clearable />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
+ <template v-if="invoiceData.invoiceType == 1">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="购方税号" prop="taxNumber">
|
|
|
+ <el-input v-model="invoiceData.taxNumber" placeholder="请输入" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="公司地址">
|
|
|
+ <el-input v-model="invoiceData.otherInfo.address" placeholder="请输入" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ <template v-if="invoiceData.invoiceType == 1">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="公司电话">
|
|
|
+ <el-input v-model="invoiceData.otherInfo.mobile" placeholder="请输入" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="公司开户行">
|
|
|
+ <el-input v-model="invoiceData.otherInfo.bank" placeholder="请输入" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="开户行账号">
|
|
|
+ <el-input v-model="invoiceData.otherInfo.account" placeholder="请输入" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
|
|
|
- </el-row>
|
|
|
<el-row :gutter="16" v-if="false">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="电子邮箱">
|
|
|
@@ -145,7 +163,8 @@
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer flex-center">
|
|
|
<el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
|
|
|
- <el-button class="gradient" type="primary" @click="submitForm(ruleFormRef)">{{ $t('common.confirm') }}</el-button>
|
|
|
+ <el-button class="gradient" type="primary" @click="submitForm(ruleFormRef)">{{ $t('common.confirm')
|
|
|
+ }}</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
@@ -159,13 +178,12 @@ import Pagination from '@/components/Pagination.vue'
|
|
|
import { orderList, applyInvoice } from '@/api/my.js'
|
|
|
|
|
|
const tabs = ref([
|
|
|
- { label: 'personalCenter.allOrders', name: 'first' },
|
|
|
- { label: 'personalCenter.daifukuan', name: 'second' },
|
|
|
- { label: 'personalCenter.yiwancheng', name: 'third' },
|
|
|
- { label: 'personalCenter.yiquxiao', name: 'fourth' },
|
|
|
+ { label: 'personalCenter.allOrders', name: '' },
|
|
|
+ { label: 'personalCenter.daifukuan', name: 0 },
|
|
|
+ { label: 'personalCenter.yiwancheng', name: 1 },
|
|
|
+ { label: 'personalCenter.yiquxiao', name: 2 },
|
|
|
])
|
|
|
|
|
|
-const activeName = ref('first')
|
|
|
const list = ref([]);
|
|
|
|
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|
|
@@ -178,8 +196,7 @@ const form = ref({
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
total: 0,
|
|
|
- activeName: 0,
|
|
|
- orderTypeMenu: 2
|
|
|
+ orderStatus: ''
|
|
|
})
|
|
|
const dialogVisible = ref(false)
|
|
|
const ruleFormRef = ref<FormInstance>()
|
|
|
@@ -236,9 +253,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
|
|
|
}
|
|
|
|
|
|
const handleClick = (tab: TabsPaneContext) => {
|
|
|
- list.value = []
|
|
|
form.value.pageNum = 1;
|
|
|
- form.value.activeName = tab.props.name;
|
|
|
+ form.value.orderStatus = tab.props.name;
|
|
|
getList()
|
|
|
}
|
|
|
|
|
|
@@ -253,12 +269,10 @@ const applyInvoices = (item, index) => {
|
|
|
// 获取我的订单
|
|
|
const getList = async () => {
|
|
|
let res = await orderList(form.value);
|
|
|
- console.log(res.rows)
|
|
|
list.value = res.rows || [];
|
|
|
form.value.total = res.total;
|
|
|
}
|
|
|
const handlePageChange = (page) => {
|
|
|
- list.value = []
|
|
|
form.value.pageNum = page;
|
|
|
getList()
|
|
|
}
|
|
|
@@ -306,6 +320,11 @@ onMounted(() => {
|
|
|
border-radius: 0 0 16px 16px;
|
|
|
border: 1px solid #EBEEF5;
|
|
|
|
|
|
+ .order-list-main-l,
|
|
|
+ .order-list-main-r {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
.image {
|
|
|
width: 160px;
|
|
|
height: 90px;
|
|
|
@@ -335,6 +354,8 @@ onMounted(() => {
|
|
|
}
|
|
|
|
|
|
.price {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
div {
|
|
|
&:first-child {
|
|
|
color: #FD5F3C;
|
|
|
@@ -366,6 +387,7 @@ onMounted(() => {
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.btn_kong {
|
|
|
width: 106px;
|
|
|
}
|
|
|
@@ -391,6 +413,7 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.dialog_title {
|
|
|
color: #3D3D3D;
|
|
|
font-weight: bold;
|