|
@@ -6,9 +6,9 @@
|
|
|
<li v-for="(item, index) in list" :key="index">
|
|
<li v-for="(item, index) in list" :key="index">
|
|
|
<div class="order-list-top flex-center-between">
|
|
<div class="order-list-top flex-center-between">
|
|
|
<div class="order-list-top-l flex-align-center">
|
|
<div class="order-list-top-l flex-align-center">
|
|
|
- <el-tag :type="index == 0 ? 'primary' : index == 1 ? 'success' : 'danger'">{{ index == 0 ?
|
|
|
|
|
- $t('personalCenter.daifukuan') : index == 1 ? $t('personalCenter.yiwancheng') :
|
|
|
|
|
- $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 class="">{{ $t('personalCenter.dingdanhao') }}: {{ item.orderNo }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="order-list-top-r">{{ $t('common.orderTime') }}: {{ item.createTime }}</div>
|
|
<div class="order-list-top-r">{{ $t('common.orderTime') }}: {{ item.createTime }}</div>
|
|
@@ -18,47 +18,55 @@
|
|
|
src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="">
|
|
src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="">
|
|
|
<div class="order-list-con flex-center-between flex_1">
|
|
<div class="order-list-con flex-center-between flex_1">
|
|
|
<div class="">
|
|
<div class="">
|
|
|
- <div class="title">UI界面设计教程</div>
|
|
|
|
|
|
|
+ <div class="title">{{ item.orderTypeName }}</div>
|
|
|
<div class="">
|
|
<div class="">
|
|
|
<el-button type="primary" size="small" plain>技能标签</el-button>
|
|
<el-button type="primary" size="small" plain>技能标签</el-button>
|
|
|
<el-button type="primary" size="small" plain>技能标签</el-button>
|
|
<el-button type="primary" size="small" plain>技能标签</el-button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="mi_price">
|
|
<div class="mi_price">
|
|
|
- <div class="">29900</div>
|
|
|
|
|
- <div class="">{{ $t('common.mibi') }}</div>
|
|
|
|
|
|
|
+ <div class="">{{ item.amount }}</div>
|
|
|
|
|
+ <div class="">{{ item.payMethod == 'BMI' ? $t('common.baomibi') : $t('common.mibi') }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="mi_price price">
|
|
<div class="mi_price price">
|
|
|
- <div class="">¥239.20</div>
|
|
|
|
|
|
|
+ <div class="">¥{{ item.discountAmount || 0 }}</div>
|
|
|
<div class="">{{ $t('common.actualAmount') }}</div>
|
|
<div class="">{{ $t('common.actualAmount') }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="">
|
|
|
|
|
- <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>
|
|
|
|
|
|
|
+ <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>
|
|
|
|
|
+
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -71,14 +79,84 @@
|
|
|
@page-change="handlePageChange" />
|
|
@page-change="handlePageChange" />
|
|
|
</template>
|
|
</template>
|
|
|
<el-empty v-else :description="$t('common.empty')" />
|
|
<el-empty v-else :description="$t('common.empty')" />
|
|
|
|
|
+ <el-dialog v-model="dialogVisible" title="申请开票" width="784" :before-close="handleClose">
|
|
|
|
|
+ <div class="dialog_title">发票抬头信息</div>
|
|
|
|
|
+ <el-form :model="invoiceData" class="demo-form-inline" label-position="top" :rules="rules" ref="ruleFormRef">
|
|
|
|
|
+ <el-row :gutter="16">
|
|
|
|
|
+ <el-col :span="12">
|
|
|
|
|
+ <el-form-item label="抬头类型">
|
|
|
|
|
+ <el-radio-group v-model="invoiceData.invoiceType">
|
|
|
|
|
+ <el-radio value="0" size="large">个人</el-radio>
|
|
|
|
|
+ <el-radio value="1" size="large">企业单位</el-radio>
|
|
|
|
|
+ </el-radio-group>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="12">
|
|
|
|
|
+ <el-form-item label="购方名称" prop="invoiceTitle">
|
|
|
|
|
+ <el-input v-model="invoiceData.invoiceTitle" placeholder="请输入" clearable />
|
|
|
|
|
+ </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>
|
|
|
|
|
+
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ <el-row :gutter="16" v-if="false">
|
|
|
|
|
+ <el-col :span="12">
|
|
|
|
|
+ <el-form-item label="电子邮箱">
|
|
|
|
|
+ <el-input v-model="invoiceData.user" placeholder="请输入" clearable />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="12">
|
|
|
|
|
+ <el-form-item label="联系电话">
|
|
|
|
|
+ <el-input v-model="invoiceData.user" placeholder="请输入" clearable />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ <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>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
-import { ref, onMounted } from 'vue'
|
|
|
|
|
|
|
+import { ref, onMounted, reactive } from 'vue'
|
|
|
|
|
|
|
|
import type { TabsPaneContext } from 'element-plus'
|
|
import type { TabsPaneContext } from 'element-plus'
|
|
|
import Pagination from '@/components/Pagination.vue'
|
|
import Pagination from '@/components/Pagination.vue'
|
|
|
-import { orderList } from '@/api/my.js'
|
|
|
|
|
|
|
+import { orderList, applyInvoice } from '@/api/my.js'
|
|
|
|
|
|
|
|
const tabs = ref([
|
|
const tabs = ref([
|
|
|
{ label: 'personalCenter.allOrders', name: 'first' },
|
|
{ label: 'personalCenter.allOrders', name: 'first' },
|
|
@@ -89,19 +167,89 @@ const tabs = ref([
|
|
|
|
|
|
|
|
const activeName = ref('first')
|
|
const activeName = ref('first')
|
|
|
const list = ref([]);
|
|
const list = ref([]);
|
|
|
|
|
+
|
|
|
|
|
+import type { FormInstance, FormRules } from 'element-plus'
|
|
|
|
|
+
|
|
|
|
|
+interface RuleForm {
|
|
|
|
|
+ invoiceTitle: string
|
|
|
|
|
+ taxNumber: string
|
|
|
|
|
+}
|
|
|
const form = ref({
|
|
const form = ref({
|
|
|
pageNum: 1,
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
pageSize: 10,
|
|
|
total: 0,
|
|
total: 0,
|
|
|
- activeName: 0
|
|
|
|
|
|
|
+ activeName: 0,
|
|
|
|
|
+ orderTypeMenu: 2
|
|
|
|
|
+})
|
|
|
|
|
+const dialogVisible = ref(false)
|
|
|
|
|
+const ruleFormRef = ref<FormInstance>()
|
|
|
|
|
+const invoiceData = ref({
|
|
|
|
|
+ invoiceType: '0',//发票类型(0-个人 1-企业)
|
|
|
|
|
+ orderNo: '',//订单号
|
|
|
|
|
+ orderId: null,
|
|
|
|
|
+ invoiceTitle: '',//发票抬头
|
|
|
|
|
+ taxNumber: '',//税号
|
|
|
|
|
+ otherInfo: {
|
|
|
|
|
+ address: '',
|
|
|
|
|
+ mobile: '',//
|
|
|
|
|
+ bank: '',//开户行
|
|
|
|
|
+ account: '',//账号
|
|
|
|
|
+ },
|
|
|
|
|
+ remark: '',//备注
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+const rules = reactive<FormRules<RuleForm>>({
|
|
|
|
|
+ invoiceTitle: [
|
|
|
|
|
+ { required: true, message: '请输入购方名称', trigger: 'blur' }
|
|
|
|
|
+ ],
|
|
|
|
|
+ taxNumber: [
|
|
|
|
|
+ { required: true, message: '请输入购方税号', trigger: 'blur' }
|
|
|
|
|
+ ],
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
+const submitForm = async (formEl: FormInstance | undefined) => {
|
|
|
|
|
+ if (!formEl) return
|
|
|
|
|
+ let valid = await formEl.validate();
|
|
|
|
|
+ console.log(valid)
|
|
|
|
|
+ if (valid) {
|
|
|
|
|
+
|
|
|
|
|
+ let { invoiceType,
|
|
|
|
|
+ orderNo,
|
|
|
|
|
+ orderId,
|
|
|
|
|
+ invoiceTitle,
|
|
|
|
|
+ taxNumber, remark } = invoiceData.value
|
|
|
|
|
+ let res = await applyInvoice({
|
|
|
|
|
+ invoiceType,
|
|
|
|
|
+ orderNo,
|
|
|
|
|
+ orderId,
|
|
|
|
|
+ invoiceTitle,
|
|
|
|
|
+ taxNumber,
|
|
|
|
|
+ remark,
|
|
|
|
|
+ otherInfo: JSON.stringify(invoiceData.value.otherInfo)
|
|
|
|
|
+ });
|
|
|
|
|
+ console.log(res)
|
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
|
+ getList()
|
|
|
|
|
+ }
|
|
|
|
|
+ dialogVisible.value = false;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
const handleClick = (tab: TabsPaneContext) => {
|
|
const handleClick = (tab: TabsPaneContext) => {
|
|
|
list.value = []
|
|
list.value = []
|
|
|
form.value.pageNum = 1;
|
|
form.value.pageNum = 1;
|
|
|
form.value.activeName = tab.props.name;
|
|
form.value.activeName = tab.props.name;
|
|
|
getList()
|
|
getList()
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+// 申请开票
|
|
|
|
|
+const applyInvoices = (item, index) => {
|
|
|
|
|
+ // await invoiceApply();
|
|
|
|
|
+ invoiceData.value.orderId = item.orderId;
|
|
|
|
|
+ dialogVisible.value = true;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
// 获取我的订单
|
|
// 获取我的订单
|
|
|
const getList = async () => {
|
|
const getList = async () => {
|
|
|
let res = await orderList(form.value);
|
|
let res = await orderList(form.value);
|
|
@@ -218,6 +366,9 @@ onMounted(() => {
|
|
|
color: #FFFFFF;
|
|
color: #FFFFFF;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ .btn_kong {
|
|
|
|
|
+ width: 106px;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@@ -240,4 +391,10 @@ onMounted(() => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+.dialog_title {
|
|
|
|
|
+ color: #3D3D3D;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|