wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

编写发票助手页面及新增发票抬头页面

Browse Source
version/0412
mujinxia 1 year ago
parent 32ea3887fb
commit 3eb69bf7dd
5 changed files with 808 additions and 15 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 15
      pages.json
  2. 581
      pages/invoice/editset.vue
  3. 210
      pages/invoice/indexset.vue
  4. 15
      pages/news1/feedback.vue
  5. 2
      pages/news1/setting.vue

15
pages.json
Unescape View File

@ -333,6 +333,14 @@
"enablePullDownRefresh": false
}
}
, {
"path": "pages/invoice/indexset",
"style": {
"navigationBarTitleText": "发票助手",
"enablePullDownRefresh": false
}
}, {
"path": "pages/invoice/detail",
"style": {
@ -347,6 +355,13 @@
"enablePullDownRefresh": false
}
}, {
"path": "pages/invoice/editset",
"style": {
"navigationBarTitleText": "发票抬头",
"enablePullDownRefresh": false
}
}, {
"path": "pages/invoice/list",
"style": {

581
pages/invoice/editset.vue
Unescape View File

@ -0,0 +1,581 @@
<template>
<view class="invoice">
<!-- <view class="invoice-goods" v-if="sourcePage==0 && orderDetail">
<view class="b" v-if="orderDetail">
<view class="r">订单编号：{{orderDetail.order_no}}<text @click="handleCopy(orderDetail.order_no)">复制</text>
</view>
<view class="r">开票金额：{{orderDetail.pay_price}}</view>
</view>
</view> -->
<view class="invoice-info">
<view class="b">
<view class="item">
<view class="l">发票类型：</view>
<view class="r">
<picker :value="index" :range="array" @change="bindPickerChange">
<view class="lx">{{ index == -1 ? '请选择' : array[index] }}</view>
</picker>
</view>
</view>
<view class="item">
<view class="l">发票类型：</view>
<view class="r">
<view class="li" :class="tabIndex == 1 ? 'li-on' : ''" @click="tabItem(1)">个人</view>
<view class="li" :class="tabIndex == 2 ? 'li-on' : ''" @click="tabItem(2)">单位</view>
</view>
</view>
<view class="item" v-if="tabIndex != 2">
<view class="l">发票抬头：</view>
<view class="r">
<input type="text" v-model="obj.header" placeholder="请输入个人姓名" />
</view>
</view>
<view class="item" v-if="tabIndex == 2">
<view class="l">发票抬头：</view>
<view class="r">
<input type="text" v-model="array1[index1]" placeholder="请输入单位名称" />
<!-- <view class="tt" @click="bindPickerChange1" style="color: rgb(58, 134, 255)">更改抬头</view> -->
</view>
</view>
<view class="item" v-if="tabIndex == 2">
<view class="l">单位税号：</view>
<view class="r">
<input type="text" v-model="obj.duty_no" placeholder="请输入纳税人识别号" />
</view>
</view>
</view>
</view>
<view class="invoice-company" v-if="tabIndex == 2">
<view class="a">选填内容（开户银行、银行账号等）
<text :class="toggleIndex ? 'on' : ''" @click="toggleItem()">{{ toggleIndex ? "收起" : "展开" }}</text>
</view>
<view class="b" v-if="toggleIndex">
<view class="item">
<view class="l">开户银行：</view>
<view class="r">
<input type="text" v-model="obj.bank_name" placeholder="请输入开户银行名称" />
</view>
</view>
<view class="item">
<view class="l">银行账号：</view>
<view class="r">
<input type="number" v-model="obj.bank_no" placeholder="请输入银行账号" />
</view>
</view>
<view class="item">
<view class="l">单位地址：</view>
<view class="r">
<input type="text" v-model="obj.address" placeholder="请输入单位地址" />
</view>
</view>
<view class="item">
<view class="l">单位电话：</view>
<view class="r">
<input type="number" v-model="obj.phone" placeholder="请输入单位电话" />
</view>
</view>
</view>
</view>
<view class="invoice-btn">
<view class="invoice-fd" @click="toDetail()">
提交
</view>
</view>
<!-- <u-modal v-model="show" :content="content" :show-cancel-button="true" :show-title="false"
confirm-color="#F55349"></u-modal> -->
</view>
</template>
<script>
import * as InvoiceApi from '@/api/invoice'
export default {
data() {
return {
content: "确认您的发票信息无误后再提交",
show: true,
toggleIndex: true,
index: -1,
array: ['普通增值税发票'],
index1: -1,
array1: [],
tabIndex: 2,
sourcePage: 0,
orderDetail: '',
orderId: '',
obj: {
header: '',
gongsi: '',
duty_no: '',
bank_name: '',
bank_no: '',
address: '',
phone: '',
type: '',
source: 2
}
};
},
onLoad(op) {
let app = this;
app.orderId = op.orderId
app.sourcePage = op.source == 1 ? op.source : 0
if (op.source == 0) {
app.orderDetail = op.order ? JSON.parse(op.order) : '';
}
if (op.source == 2 || op.source == 1) {
let detail = op.detail ? JSON.parse(op.detail) : '';
app.index = detail.type == 1 ? 0 : 1;
app.tabIndex = detail.source
app.obj = detail
}
},
methods: {
// 获取当前订单信息
toDetail(canReset = false) {
const app = this
if (app.index == -1) {
uni.showToast({
title: '请选择发票类型',
icon: 'none',
duration: 2000
})
return
}
if (!app.obj.header) {
uni.showToast({
title: '请输入抬头',
icon: 'none',
duration: 2000
})
return
}
if (app.tabIndex == 2 && !app.obj.duty_no) {
uni.showToast({
title: '请输入抬头',
icon: 'none',
duration: 2000
})
return
}
app.isLoading = true;
if (app.tabIndex == 1) {
app.obj.gongsi = '';
app.obj.duty_no = '';
app.obj.bank_name = '';
app.obj.bank_no = '';
app.obj.address = '';
app.obj.phone = '';
}
app.obj.type = app.index == 0 ? 1 : 2;
app.obj.source = app.tabIndex;
let url = ''
if (app.sourcePage == 0) { //开票addInvoicing editInvoicing invoicingAdd
url = InvoiceApi.invoicingAdd(app.orderId, app.obj)
}
if (app.sourcePage == 1) { //我的开票使用某一个开票
app.obj.invoice_id = app.obj.id; //选择
url = InvoiceApi.invoicingAdd(app.orderId, app.obj)
}
if (app.sourcePage == 2) { //申请记录 修改抬头
url = InvoiceApi.invoicingEdit(app.orderId, app.obj)
}
if (app.sourcePage == 3) { //新增发票抬头
url = InvoiceApi.addInvoicing(app.orderId, app.obj)
}
if (app.sourcePage == 4) { //我的发票记录过来编辑
url = InvoiceApi.editInvoicing(app.orderId, app.obj)
}
debugger
url.then(result => {
if (result.status == 200) {
uni.showToast({
title: result.message,
icon: 'none',
duration: 2000
})
if (result.data.list.length.length > 0) {
uni.navigateTo({
url: "/pages/invoice/detail?id=" + result.data.list[0].id
})
} else {
uni.showToast({
title: '请求成功无返回详情',
icon: 'none',
duration: 2000
})
}
} else {
uni.showToast({
title: result.message,
icon: 'none',
duration: 2000
})
}
})
// 相应全局事件订阅: 刷新上级页面数据
canReset && uni.$emit('syncRefresh', true, true)
},
// 复制指定内容
handleCopy(value) {
const app = this
uni.setClipboardData({
data: value,
success: () => app.$toast('复制成功'),
fail: ({
errMsg
}) => app.$toast('复制失败 ' + errMsg)
})
},
// 提交信息
handleInvoice() {
const app = this
},
onClose() { },
tabItem(i) {
this.tabIndex = i;
},
toggleItem(i) {
this.toggleIndex = !this.toggleIndex;
this.pamres.invoiceUnit = this.toggleIndex
},
bindPickerChange(e) {
this.index = e.detail.value;
},
bindPickerChange1() {
uni.navigateTo({
url: "/pages/invoice/index?orderId=" + this.orderId + '&order=' + (app.orderDetail ? JSON.stringify(app.orderDetail) : '')
})
}
}
}
</script>
<style lang="scss" scoped>
.invoice-btn{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
padding: 30rpx 44rpx;
z-index: 8;
background: #F5F5F5;
}
.invoice-company{
margin-bottom: 170rpx;
}
.invoice {
padding-bottom: 1rpx;
&-goods {
padding: 0 20rpx 0 40rpx;
overflow: hidden;
background-color: #fff;
padding: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
.a {
width: 145rpx;
height: 135rpx;
margin-right: 20rpx;
image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
.b {
flex: 1;
overflow: hidden;
.l {
white-space: nowrap;
text-overflow: ellipsis;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #262626;
overflow: hidden;
}
.r {
font-size: 30rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #838383;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
text {
display: block;
width: 104rpx;
line-height: 60rpx;
background: #FFFFFF;
border-radius: 4rpx;
text-align: center;
border: 1px solid #CACACA;
font-size: 28rpx;
color: #555;
}
}
}
}
&-info {
margin-top: 20rpx;
background-color: #fff;
overflow: hidden;
.a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx 20rpx 60rpx;
box-sizing: border-box;
border-bottom: 1px solid #F3F3F3;
font-size: 32rpx;
font-weight: 500;
color: #262626;
text {
color: #006AFF;
padding-right: 40rpx;
position: relative;
&::after {
content: "";
width: 16rpx;
height: 16rpx;
border-top: 1px solid #006AFF;
border-left: 1px solid #006AFF;
position: absolute;
right: 0;
top: 14rpx;
z-index: 1;
transform: rotate(135deg);
}
}
}
.b {
padding: 0 30rpx 0 45rpx;
box-sizing: border-box;
overflow: hidden;
.item {
padding: 30rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
border-top: 1px solid #F3F3F3;
font-size: 32rpx;
font-weight: 500;
color: #262626;
overflow: hidden;
&:first-child {
border-top-color: #fff;
}
.l {
width: 180rpx;
font-size: 32rpx;
font-weight: 400;
color: #656565;
}
.r {
flex: 1;
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: 400;
color: #262626;
.li {
width: 150rpx;
height: 78rpx;
background: #F3F3F3;
border-radius: 8rpx;
text-align: center;
line-height: 78rpx;
font-size: 32rpx;
font-weight: 400;
color: #262626;
margin-right: 12rpx;
&-on {
background: #FDF4F4;
background: url(/static/invoice/select-active.png) center top no-repeat;
background-size: contain;
}
}
input {
flex: 1;
}
picker {
flex: 1;
.tt {
width: 180rpx;
position: relative;
color: #4894FF;
text-align: right;
&::after {
content: "";
width: 16rpx;
height: 16rpx;
border-top: 1px solid #4894FF;
border-left: 1px solid #4894FF;
position: absolute;
right: -50rpx;
top: 14rpx;
z-index: 1;
transform: rotate(135deg);
}
}
.lx {
width: 100%;
position: relative;
&::after {
content: "";
width: 16rpx;
height: 16rpx;
border-top: 1px solid #B8B8B8;
border-left: 1px solid #B8B8B8;
position: absolute;
right: 20rpx;
top: 14rpx;
z-index: 1;
transform: rotate(135deg);
}
}
}
}
}
}
}
&-fd {
height: 104rpx;
background: #F55349;
border-radius: 8rpx;
font-size: 32rpx;
font-weight: 500;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
&-company {
overflow: hidden;
.a {
padding: 35rpx 50rpx;
font-size: 32rpx;
font-weight: 400;
display: flex;
align-items: center;
justify-content: space-between;
color: #262626;
text {
width: 70rpx;
color: #888888;
margin-right: 30rpx;
position: relative;
&::after {
content: "";
width: 16rpx;
height: 16rpx;
border-top: 1px solid #888888;
border-left: 1px solid #888888;
position: absolute;
right: -30rpx;
top: 10rpx;
z-index: 1;
transform: rotate(225deg);
}
&.on {
&::after {
content: "";
width: 16rpx;
height: 16rpx;
border-top: 1px solid #888888;
border-left: 1px solid #888888;
position: absolute;
right: -30rpx;
top: 20rpx;
z-index: 1;
transform: rotate(45deg);
}
}
}
}
.b {
padding: 0 30rpx 0 45rpx;
box-sizing: border-box;
background-color: #fff;
overflow: hidden;
.item {
padding: 30rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
border-top: 1px solid #F3F3F3;
font-size: 32rpx;
font-weight: 500;
color: #262626;
overflow: hidden;
&:first-child {
border-top-color: #fff;
}
.l {
width: 180rpx;
font-size: 32rpx;
font-weight: 400;
color: #656565;
}
.r {
flex: 1;
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: 400;
color: #262626;
input {
flex: 1;
}
}
}
}
}
}
</style>

210
pages/invoice/indexset.vue
Unescape View File

@ -0,0 +1,210 @@
<template>
<view class="invoice-box">
<view class="bill-top">
<view class="top-name" :class="tabIndex == 0 ? 'active' : ''" @click="onTabClick(0)">发票记录
<view v-if="tabIndex == 0" class="active-border"></view>
</view>
<view class="top-name" :class="tabIndex == 1 ? 'active' : ''" @click="onTabClick(1)">发票抬头
<view v-if="tabIndex == 1" class="active-border"></view>
</view>
</view>
<view v-if="tabIndex == 0">
<view class="empty" v-if="recordList.length == 0">
<u-empty text="暂无信息" mode="list"></u-empty>
</view>
<view class="bill-record" v-else>
<view class="bill-item" v-for="(item, index) in recordList" :key="index">
<view class="bill-item-left">
<view class="commpany-name">飞科网络科技有限公司</view>
<view class="bill-price">
<text>¥</text>150
</view>
</view>
<text class="bill-time">2023-12-31</text>
</view>
</view>
</view>
<!-- 发票抬头 -->
<view v-if="tabIndex == 1">
<view class="invoice-header">
<view class="bill-header-item" @click="onAddInvoice" v-for="(item, index) in recordList" :key="index">
<view class="bill-header-left">
<view class="header-type">普通发票抬头-个人</view>
<view class="bill-header">
王大幅
</view>
</view>
<u-icon name="edit-pen" size="30" color="#838383"></u-icon>
</view>
</view>
<view class="invoice-btn-box">
<view class="invoice-btn" @click="onAddInvoice">
<text>+</text>添加发票抬头
</view>
</view>
</view>
</view>
</template>
<script>
import Empty from '@/components/empty'
import * as InvoiceApi from '@/api/invoice'
export default {
data() {
return {
tabIndex: 1,
invoicList: [],
recordList: [1, 2]
};
},
onLoad() {
},
methods: {
onTabClick(index) {
this.tabIndex = index
},
onEdit(item) {
uni.navigateTo({
url: "/pages/invoice/editset?detail=" + JSON.stringify(item) + '&source=' + 4
})
},
onAddInvoice() {
uni.navigateTo({
url: "/pages/invoice/editset?source=" + 3
})
},
}
}
</script>
<style lang="scss" scoped>
.invoice-btn-box {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
padding: 30rpx 44rpx;
z-index: 8;
background: #F5F5F5;
.invoice-btn {
height: 104rpx;
background: #F21A1C;
color: #fff;
font-size: 32rpx;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8rpx;
text {
font-size: 50rpx;
margin-right: 10rpx;
}
}
}
.invoice-header {
background: #fff;
.bill-header-item {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 54rpx 46rpx 120rpx 64rpx;
}
.header-type {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 18rpx;
}
.bill-header {
font-size: 32rpx;
color: #AEAEAE;
}
}
.bill-top {
margin-top: 6rpx;
margin-bottom: 4rpx;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 0 138rpx;
.top-name {
width: 128rpx;
font-size: 32rpx;
height: 126rpx;
font-weight: bold;
color: #6F6F6F;
display: flex;
align-items: center;
position: relative;
.active-border {
width: 72rpx;
height: 8rpx;
background: #FF2525;
border-radius: 34rpx;
position: absolute;
bottom: 0;
left: 26rpx;
}
}
.active {
color: #262626;
}
}
.bill-item {
background: #fff;
margin-bottom: 10rpx;
display: flex;
padding: 44rpx 34rpx 40rpx 64rpx;
justify-content: space-between;
align-items: flex-end;
.commpany-name {
font-size: 32rpx;
color: #454545;
margin-bottom: 34rpx;
}
.bill-price {
font-size: 40rpx;
color: #F21A1C;
font-weight: bold;
text {
font-size: 24rpx;
}
}
.bill-time {
display: inline-block;
width: 180rpx;
font-size: 32rpx;
color: #AEAEAE;
}
}
.empty {
width: 100%;
display: flex;
padding-top: 180rpx;
align-items: center;
justify-content: center;
flex-direction: column;
// height: calc(100vh - 152rpx);
}
</style>

15
pages/news1/feedback.vue
Unescape View File

@ -583,19 +583,6 @@ page {
align-items: center;
justify-content: center;
flex-direction: column;
height: calc(100vh - 102rpx);
.emptyImg {
width: 210rpx;
}
.emptytext {
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #717171;
margin-top: 36rpx;
}
height: calc(100vh - 102rpx);
}
</style>

2
pages/news1/setting.vue
Unescape View File

@ -184,7 +184,7 @@ export default {
},
bindPickerInvoice() {
uni.navigateTo({
url: "/pages/invoice/index"
url: "/pages/invoice/indexset"
})
},
bindPickerChange(e) {

Write Preview
Loading…
Cancel
Save