mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-18 08:25:55 +08:00
commit message
This commit is contained in:
Chopper
205
pages/order/invoice/invoiceDetail.vue
Normal file
205
pages/order/invoice/invoiceDetail.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<view class="invoice-detail">
|
||||
<view class="block-item flex-center">
|
||||
<view>
|
||||
<view>
|
||||
{{'增值税普通发票'}}
|
||||
<view class="circle">
|
||||
<view></view>
|
||||
</view>
|
||||
</view>
|
||||
<view>{{order.receiptPrice | unitPrice('￥')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="common-msg flex-center">
|
||||
<view>
|
||||
<view>抬头类型</view>
|
||||
<view>{{order.receiptTitle}}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>发票状态</view>
|
||||
<view class="invoice_status">{{order.receiptStatus === 1?'已开具':'暂未开具'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-cell-group :border="false">
|
||||
<u-cell-item title="发票类型" :border-top="false" :value="'增值税普通发票'" :arrow="false"></u-cell-item>
|
||||
<u-cell-item title="发票内容" :value="order.receiptContent" :arrow="false"></u-cell-item>
|
||||
<u-cell-item title="发票抬头" :value="order.receiptTitle" :arrow="false"></u-cell-item>
|
||||
<u-cell-item title="纳税人识别号" v-if="order.taxpayerId" :value="order.taxpayerId" :arrow="false"></u-cell-item>
|
||||
</u-cell-group>
|
||||
<!-- <u-cell-group :border="false" style="margin-top: 20rpx;">
|
||||
<u-cell-item title="订单状态" :border-top="false" :value="order.order_status_text" :arrow="false"></u-cell-item>
|
||||
<u-cell-item title="订单编号" :value="order.sn" :arrow="false"></u-cell-item>
|
||||
</u-cell-group> -->
|
||||
<!-- <view class="show-pic" @click="preview">
|
||||
|
||||
<text>点击预览发票</text>
|
||||
</view>
|
||||
<button class="btn" @click="download">下载电子发票</button>
|
||||
<view class="block-2-view" v-for="(item,index) in order.elec_file_list" :key="index">
|
||||
<u-image width="300" height="150" :src="item"></u-image>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getReceiptDetail } from "@/api/order.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
order: {},
|
||||
order: {},
|
||||
title_type: "",
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.loadData(options.id);
|
||||
},
|
||||
methods: {
|
||||
loadData(id) {
|
||||
getReceiptDetail(id).then((res) => {
|
||||
let order = res.data.result;
|
||||
this.order = order;
|
||||
});
|
||||
},
|
||||
preview() {
|
||||
//预览发票
|
||||
if (this.order.elec_file_list.length) {
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: this.order.elec_file_list,
|
||||
longPressActions: {
|
||||
itemList: ["发送给朋友", "保存图片", "收藏"],
|
||||
success: function (data) {},
|
||||
fail: function (err) {},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.$api.msg("暂无发票可预览");
|
||||
}
|
||||
},
|
||||
download() {
|
||||
//下载发票
|
||||
let _this = this;
|
||||
if (this.order.elec_file_list.length) {
|
||||
this.order.elec_file_list.forEach((item) => {
|
||||
uni.downloadFile({
|
||||
url: item,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
let tempFilePath = res.tempFilePath;
|
||||
uni.saveFile({
|
||||
tempFilePath: tempFilePath,
|
||||
success: function (res) {
|
||||
_this.$api.msg("发票已下载到" + res.savedFilePath);
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$api.msg("暂无发票可下载");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.block-item {
|
||||
height: 217rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
> view {
|
||||
color: #ff6262;
|
||||
}
|
||||
> view:first-child {
|
||||
text-align: center;
|
||||
line-height: 3em;
|
||||
> view:first-child {
|
||||
position: relative;
|
||||
.circle {
|
||||
width: 166rpx;
|
||||
height: 65rpx;
|
||||
border: 1px solid #ff6262;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
view {
|
||||
width: 130rpx;
|
||||
height: 40rpx;
|
||||
border: 1px solid #ff6262;
|
||||
border-radius: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
> view:last-child {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.common-msg {
|
||||
flex-direction: row;
|
||||
padding: 20rpx;
|
||||
height: 118rpx;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
> view {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
line-height: 1.5em;
|
||||
view {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.invoice_status {
|
||||
color: #ff6262;
|
||||
}
|
||||
}
|
||||
|
||||
> view:first-child {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
.show-pic {
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
image {
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
margin-right: 10rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
text {
|
||||
color: $main-color;
|
||||
font-size: $font-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 34rpx;
|
||||
margin: 60rpx 20rpx;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.u-cell {
|
||||
padding: 35rpx 20rpx;
|
||||
height: 110rpx;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
255
pages/order/invoice/setInvoice.vue
Normal file
255
pages/order/invoice/setInvoice.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<u-popup closeable border-radius="28" @close="close" mode="bottom" height="80%" v-model="show">
|
||||
|
||||
<div class="wrapper">
|
||||
<!-- 发票类型 -->
|
||||
<div class="invoice-title">发票类型</div>
|
||||
<div class="flex">
|
||||
<div class="invoice-item" :class="{'active':typeItem.active,disabled:typeItem.disabled}" v-for="(typeItem,index) in invoiceType" :key="index">
|
||||
{{typeItem.title}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tips">
|
||||
{{tips}}
|
||||
</div>
|
||||
<div class="divider">
|
||||
</div>
|
||||
<!-- 发票抬头 -->
|
||||
<div class="invoice-title">发票抬头</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="invoice-item" @click="handleClickHeader(headerItem,index,invoiceHeader)" :class="{'active':headerItem.active,disabled:headerItem.disabled}"
|
||||
v-for="(headerItem,index) in invoiceHeader" :key="index">
|
||||
{{headerItem.title}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-item">
|
||||
<span> {{title}}名称</span>
|
||||
<u-input :placeholder="'请输入'+title+'名称'" v-model="submitData.receiptTitle" />
|
||||
</div>
|
||||
<div class="form-item" v-if="taxpayerFlag">
|
||||
<span>纳税人识别号</span>
|
||||
<u-input placeholder="请输入纳税人识别号" v-model="submitData.taxpayerId" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="divider">
|
||||
</div>
|
||||
<div class="invoice-title">
|
||||
发票信息
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="invoice-item" @click="handleClickHeader(goodsItem,index,goodsType)" :class="{'active':goodsItem.active,disabled:goodsItem.disabled}" v-for="(goodsItem,index) in goodsType"
|
||||
:key="index">
|
||||
{{goodsItem.title}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="submit" @click="submitInvoice()">确定</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
</template>
|
||||
<script>
|
||||
import { addReceipt } from "@/api/members";
|
||||
export default {
|
||||
props: ["res"],
|
||||
watch: {
|
||||
invoiceHeader: {
|
||||
handler(val) {
|
||||
this.title = val.filter((item) => {
|
||||
return item.active == true;
|
||||
})[0].title;
|
||||
this.taxpayerFlag = false;
|
||||
this.submitData.taxpayerId = "";
|
||||
|
||||
if (this.title == "单位") {
|
||||
this.taxpayerFlag = true;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
goodsType: {
|
||||
handler(val) {
|
||||
this.submitData.receiptContent = val.filter((item) => {
|
||||
return item.active == true;
|
||||
})[0].title;
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
taxpayerFlag: false,
|
||||
submitData: {
|
||||
receiptTitle: "", //发票抬头
|
||||
taxpayerId: "", //纳税人
|
||||
receiptContent: "",
|
||||
},
|
||||
show: true,
|
||||
title: "",
|
||||
tips:
|
||||
"电子发票即电子增值税发票，是税局认可的有效凭证，其法律效力、基本用途及使用规定同纸质发票。",
|
||||
// 发票类型
|
||||
invoiceType: [
|
||||
{
|
||||
title: "电子普通发票",
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
title: "增值税专用发票",
|
||||
active: false,
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
// 发票抬头
|
||||
invoiceHeader: [
|
||||
{
|
||||
title: "个人",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
title: "单位",
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
// 商品类型
|
||||
goodsType: [
|
||||
{
|
||||
title: "商品明细",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
title: "商品类别",
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.res) {
|
||||
this.submitData.receiptTitle = this.res.receiptTitle;
|
||||
this.submitData.taxpayerId = this.res.taxpayerId; //纳税人
|
||||
this.submitData.receiptContent = this.res.receiptContent;
|
||||
this.res.receiptContent == "商品明细"
|
||||
? (this.goodsType[0].active = true)
|
||||
: (this.goodsType[1].active = true);
|
||||
this.res.taxpayerId
|
||||
? (this.invoiceHeader[1].active = true)
|
||||
: (this.invoiceHeader[0].active = true);
|
||||
} else {
|
||||
this.invoiceHeader[0].active = true;
|
||||
this.goodsType[0].active = true;
|
||||
}
|
||||
console.log(this.res);
|
||||
},
|
||||
methods: {
|
||||
handleClickHeader(val, index, arr) {
|
||||
arr = arr.map((item) => {
|
||||
return (item.active = false);
|
||||
});
|
||||
val.active = true;
|
||||
},
|
||||
/**
|
||||
* 监听关闭
|
||||
*/
|
||||
close(val) {
|
||||
this.$emit("callbackInvoice", val);
|
||||
},
|
||||
submitInvoice() {
|
||||
/**
|
||||
* 验证
|
||||
*/
|
||||
const { receiptTitle, taxpayerId, receiptContent } = this.submitData;
|
||||
|
||||
if (this.$u.test.isEmpty(receiptTitle)) {
|
||||
uni.showToast({
|
||||
title: "请您填写发票抬头!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
!this.$u.test.isEmpty(receiptTitle) &&
|
||||
this.$u.test.isEmpty(taxpayerId) &&
|
||||
this.invoiceHeader[1].active == true
|
||||
) {
|
||||
uni.showToast({
|
||||
title: "请您填写纳税人识别号!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
this.show = false;
|
||||
this.close(this.submitData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.form-item {
|
||||
display: flex;
|
||||
margin: 30rpx 0;
|
||||
align-items: center;
|
||||
> span {
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
width: 100%;
|
||||
margin-top: 100rpx;
|
||||
background: $main-color;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: 100rpx auto 0 auto;
|
||||
color: #f2f2f2;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.invoice-item {
|
||||
margin-right: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 24rpx;
|
||||
|
||||
padding: 12rpx 46rpx;
|
||||
border-radius: 100px;
|
||||
background: #eee;
|
||||
min-width: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.active {
|
||||
font-weight: bold;
|
||||
color: $main-color;
|
||||
border: 2rpx solid $main-color;
|
||||
background: rgba($color: $main-color, $alpha: 0.1);
|
||||
}
|
||||
.disabled {
|
||||
color: #b5b5b6;
|
||||
}
|
||||
.wrapper {
|
||||
padding: 30rpx;
|
||||
}
|
||||
.invoice-title {
|
||||
margin-bottom: 30rpx;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.tips {
|
||||
margin-top: 30rpx;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.divider {
|
||||
margin: 30rpx 0;
|
||||
height: 1rpx;
|
||||
border-bottom: 1px solid #f2f3f5;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user