You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
348 lines
8.8 KiB
348 lines
8.8 KiB
<template>
|
|
<!-- 我的优惠券 -->
|
|
<div class="mycoupon-wrapper maCoupon">
|
|
<!-- <div class="user-com-title">我的发票</div> -->
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="申请开票" name="my">
|
|
<el-table
|
|
:data="tableData1"
|
|
border
|
|
style="width: 100%"
|
|
:header-cell-style="{ background: '#FAFAFA' }"
|
|
>
|
|
<el-table-column type="index" label="序号" align="center" width="60">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="order_no"
|
|
label="订单号"
|
|
show-overflow-tooltip
|
|
align="center"
|
|
width="160"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="invoice_code"
|
|
label="商品名称"
|
|
align="center"
|
|
width="180"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div v-for="(v, i) in scope.row.order_goods" :key="i" style="display: flex">
|
|
<img
|
|
:src="imgUrl + v.sku_image"
|
|
alt
|
|
style="width: 50px; height: 50px; margin: 10px"
|
|
/>
|
|
<div style="margin: 10px">{{ v.goods_name }}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="order_money"
|
|
label="订单金额"
|
|
show-overflow-tooltip
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="invoice_time"
|
|
label="申请开票时间"
|
|
align="center"
|
|
width="140"
|
|
>
|
|
<template slot-scope="scope">{{
|
|
$dayjs(scope.row.invoice_time * 1000).format("YYYY-MM-DD HH:mm")
|
|
}}</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column
|
|
prop="invoice_status"
|
|
label="状态"
|
|
show-overflow-tooltip
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div v-if="!scope.row.invoice_status">
|
|
<span> 未开票 </span>
|
|
</div>
|
|
</template>
|
|
</el-table-column> -->
|
|
|
|
<el-table-column prop="address" label="操作" align="center">
|
|
<template slot-scope="scope">
|
|
<div class="cz">
|
|
<span @click="bill(scope.row)"> 申请开票 </span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<Page
|
|
@currentChange="currentChange1"
|
|
:total="total1"
|
|
:pageSize="query1.limit"
|
|
></Page
|
|
></el-tab-pane>
|
|
<el-tab-pane label="开票历史" name="history">
|
|
<el-table
|
|
:data="tableData"
|
|
border
|
|
style="width: 100%"
|
|
:header-cell-style="{ background: '#FAFAFA' }"
|
|
>
|
|
<el-table-column type="index" label="序号" align="center" width="60">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="order_no"
|
|
label="订单号"
|
|
show-overflow-tooltip
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="invoice_code"
|
|
label="发票编码"
|
|
show-overflow-tooltip
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="order_money"
|
|
label="订单金额"
|
|
show-overflow-tooltip
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="invoice_time"
|
|
label="申请开票时间"
|
|
align="center"
|
|
width="140"
|
|
>
|
|
<template slot-scope="scope">{{
|
|
$dayjs(scope.row.invoice_time * 1000).format("YYYY-MM-DD HH:mm")
|
|
}}</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="invoice_status"
|
|
label="状态"
|
|
show-overflow-tooltip
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.invoice_status">
|
|
<span> 已开票 </span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="address" label="操作" align="center">
|
|
<template slot-scope="scope">
|
|
<div class="cz">
|
|
<span @click="handleView(scope.$index, scope.row)"> 查看凭证 </span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<Page @currentChange="currentChange" :total="total" :pageSize="query.limit"></Page
|
|
></el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<DialogSlot
|
|
tipsText="查看发票凭证"
|
|
:dialogSlotShow.sync="dialogSlotShow"
|
|
@clickConfirm="clickConfirm"
|
|
:cancleBtnShow="false"
|
|
width="432px"
|
|
>
|
|
<template v-slot:contentSlot>
|
|
<div class="fpImge">
|
|
<img :src="imgUrl + invoice_image" alt="" />
|
|
</div>
|
|
</template>
|
|
</DialogSlot>
|
|
<!-- 申请开票 -->
|
|
<Dialog
|
|
ref="billDialog"
|
|
:contentText="contentText"
|
|
@clickConfirm="billBtn"
|
|
:cancelText="'返回'"
|
|
></Dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Setting from "~/setting";
|
|
export default {
|
|
name: "invoice",
|
|
auth: "guest",
|
|
data() {
|
|
return {
|
|
imgUrl: Setting.uplodBaseURL,
|
|
dialogSlotShow: false,
|
|
total: 0,
|
|
query1: {
|
|
page: 1,
|
|
limit: 10,
|
|
},
|
|
total1: 4,
|
|
query: {
|
|
page: 1,
|
|
limit: 10,
|
|
},
|
|
total: 4,
|
|
tableData1: [],
|
|
tableData: [],
|
|
invoice_image: "",
|
|
activeName: "my",
|
|
tableRow: {},
|
|
contentText: "确认删除?",
|
|
};
|
|
},
|
|
|
|
fetch({ store }) {
|
|
store.commit("isHeader", true);
|
|
store.commit("isFooter", true);
|
|
},
|
|
head() {
|
|
return {
|
|
title: "我的发票-" + this.$store.state.titleCon,
|
|
};
|
|
},
|
|
created() {
|
|
this.getCouponList();
|
|
this.getCouponList1();
|
|
},
|
|
methods: {
|
|
// 分页点击
|
|
currentChange1(e) {
|
|
this.query1.page = e;
|
|
this.getCouponList1();
|
|
},
|
|
currentChange(e) {
|
|
this.query.page = e;
|
|
this.getCouponList();
|
|
},
|
|
handleClick(tab, event) {
|
|
console.log(tab, event);
|
|
},
|
|
handleView(i, v) {
|
|
console.log(i, v);
|
|
this.invoice_image = v.invoice_image;
|
|
this.dialogSlotShow = true;
|
|
},
|
|
clickConfirm() {
|
|
this.dialogSlotShow = false;
|
|
},
|
|
getCouponList1() {
|
|
let obj = {
|
|
page: this.query1.page,
|
|
page_size: this.query1.limit,
|
|
order_status: "all",
|
|
invoice: 0,
|
|
invoice_status: 0,
|
|
};
|
|
this.$axios
|
|
.post("/order/lists", obj)
|
|
.then((res) => {
|
|
this.tableData1 = res.data.list;
|
|
this.total1 = res.data.count;
|
|
console.log(this.tableData1);
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
getCouponList() {
|
|
let obj = {
|
|
page: this.query.page,
|
|
page_size: this.query.limit,
|
|
order_status: "all",
|
|
invoice: 1,
|
|
invoice_status: 1,
|
|
};
|
|
this.$axios
|
|
.post("/order/lists", obj)
|
|
.then((res) => {
|
|
this.tableData = res.data.list;
|
|
this.total = res.data.count;
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
bill(row) {
|
|
this.tableRow = undefined;
|
|
this.contentText = "确定要申请开发票吗？";
|
|
this.tableRow = row;
|
|
this.$refs.billDialog.dialogShow = true;
|
|
},
|
|
billBtn() {
|
|
let obj = {
|
|
order_id: this.tableRow.order_id,
|
|
store_id: JSON.parse(localStorage.getItem("drugstoreObj")).id,
|
|
};
|
|
this.$axios
|
|
.post(`/order/doInvoice`, obj)
|
|
.then((res) => {
|
|
this.$message.success(res.message);
|
|
this.getCouponList1();
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cz {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: var(--themeColor);
|
|
cursor: pointer;
|
|
}
|
|
.maCoupon {
|
|
padding: 0 30px;
|
|
}
|
|
.fpImge {
|
|
width: 100%;
|
|
height: 186px;
|
|
margin-bottom: 20px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.user-com-tabs {
|
|
margin-bottom: 20px;
|
|
.item {
|
|
margin-right: 70px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
display: inline-block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.on {
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
width: 47px;
|
|
height: 2px;
|
|
background: var(--themeColor);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|