mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 17:53:25 +08:00
uniapp【新增】：发票页面新增从微信获取发票数据
This commit is contained in:
花城
@@ -1,91 +1,88 @@
|
||||
.layout-set-box {
|
||||
padding-bottom: 200rpx;
|
||||
margin: 25rpx;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 15rpx;
|
||||
padding-bottom: 200rpx;
|
||||
margin: 25rpx;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 15rpx;
|
||||
|
||||
.item-box {
|
||||
.lab {
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
.item-box {
|
||||
.lab {
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.invoice-list {
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 15rpx #eee;
|
||||
max-height: 325rpx;
|
||||
overflow-y: scroll;
|
||||
.list-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #f9f9f9;
|
||||
padding: 10rpx 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
.invoice-list {
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 15rpx #eee;
|
||||
max-height: 325rpx;
|
||||
overflow-y: scroll;
|
||||
.list-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #f9f9f9;
|
||||
padding: 10rpx 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.msg-box {
|
||||
.name {
|
||||
font-size: 27rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.msg-box {
|
||||
.name {
|
||||
font-size: 27rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-size: 24rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
.code {
|
||||
font-size: 24rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.peo {
|
||||
font-size: 27rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
.peo {
|
||||
font-size: 27rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-detail-bottom-tabbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
border-top: solid 1px #f2f2f2;
|
||||
background-color: #ffffff;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
border-top: solid 1px #f2f2f2;
|
||||
background-color: #ffffff;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn-box {
|
||||
padding:20rpx;
|
||||
width: calc(100% - 40rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.btn-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.btn {
|
||||
flex: 1;
|
||||
margin: 20rpx;
|
||||
font-size: 27rpx;
|
||||
height: 90prx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 15rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.no {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.no {
|
||||
width: 48%;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
font-size: 27rpx;
|
||||
height: 90prx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 15rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ok {
|
||||
width: 48%;
|
||||
background-color: #d33123;
|
||||
color: #fff;
|
||||
font-size: 27rpx;
|
||||
height: 90prx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 15rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.ok {
|
||||
background-color: #d33123;
|
||||
}
|
||||
.choose {
|
||||
background-color: #54bd63;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,165 +1,186 @@
|
||||
<template>
|
||||
<coreshop-page title="发票设置" mode="left">
|
||||
<view class="layout-set-box">
|
||||
<view class="item-box m-b-50">
|
||||
<view class="lab">发票类型</view>
|
||||
<view class="val">
|
||||
<uv-radio-group v-model="state.model.typeName" @change="handleChangeRadio">
|
||||
<uv-radio :customStyle="{ 'margin-right': '30rpx' }" v-for="(item, index) in state.radioItems"
|
||||
:key="index" :label="item.name" :name="item.name">
|
||||
</uv-radio>
|
||||
</uv-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<view class="lab">发票抬头</view>
|
||||
<view class="val">
|
||||
<uv-input placeholder="请输入发票抬头" border="surround" v-model="state.model.name"
|
||||
@input="handleInput"></uv-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="invoice-list" v-show="state.showInvoiceList">
|
||||
<view class="list-box" v-for="item in state.invoiceList" :key="item.id" @click="handleUseInvoice(item)">
|
||||
<view class="msg-box">
|
||||
<view class="name">{{ item.name || '' }}</view>
|
||||
<view class="code">{{ item.code || '' }}</view>
|
||||
</view>
|
||||
<view class="peo">
|
||||
{{ item.frequency || '' }}人使用过
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-box m-t-50 m-b-50">
|
||||
<view class="lab">税务编号</view>
|
||||
<view class="val">
|
||||
<uv-input placeholder="请输入税务编号" border="surround" v-model="state.model.code"></uv-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-box ">
|
||||
<view class="lab">发票内容</view>
|
||||
<view class="val">
|
||||
明细
|
||||
</view>
|
||||
</view>
|
||||
<coreshop-page title="发票设置" mode="left">
|
||||
<view class="layout-set-box">
|
||||
<view class="item-box m-b-50">
|
||||
<view class="lab">发票类型</view>
|
||||
<view class="val">
|
||||
<uv-radio-group v-model="state.model.typeName" @change="handleChangeRadio">
|
||||
<uv-radio :customStyle="{ 'margin-right': '30rpx' }" v-for="(item, index) in state.radioItems"
|
||||
:key="index" :label="item.name" :name="item.name">
|
||||
</uv-radio>
|
||||
</uv-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<view class="lab">发票抬头</view>
|
||||
<view class="val">
|
||||
<uv-input placeholder="请输入发票抬头" border="surround" v-model="state.model.name"
|
||||
@input="handleInput"></uv-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="invoice-list" v-show="state.showInvoiceList">
|
||||
<view class="list-box" v-for="item in state.invoiceList" :key="item.id" @click="handleUseInvoice(item)">
|
||||
<view class="msg-box">
|
||||
<view class="name">{{ item.name || '' }}</view>
|
||||
<view class="code">{{ item.code || '' }}</view>
|
||||
</view>
|
||||
<view class="peo">
|
||||
{{ item.frequency || '' }}人使用过
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-box m-t-50 m-b-50">
|
||||
<view class="lab">税务编号</view>
|
||||
<view class="val">
|
||||
<uv-input placeholder="请输入税务编号" border="surround" v-model="state.model.code"></uv-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-box ">
|
||||
<view class="lab">发票内容</view>
|
||||
<view class="val">
|
||||
明细
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="goods-detail-bottom-tabbar">
|
||||
<view class="btn-box">
|
||||
<view class="no" @click="handleNotUseInvoices"> 本次不开具发票 </view>
|
||||
<view class="ok" @click="handleSaveInvoice"> 保存发票 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</coreshop-page>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="goods-detail-bottom-tabbar">
|
||||
<view class="btn-box">
|
||||
<view class="btn no" @click="handleNotUseInvoices"> 本次不开具发票 </view>
|
||||
<view class="btn ok" @click="handleSaveInvoice"> 保存发票 </view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="btn choose" @click="handleChooseInvoice"> 获取用户发票 </view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</coreshop-page>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import { queryTaxInfo } from '@/core/api';
|
||||
import type { Response } from '@/core/models';
|
||||
import { InvoiceEnum } from '@/core/enum';
|
||||
import { userInvoice } from '@/core/consts';
|
||||
import { handleShowToast } from '@/core/utils';
|
||||
import { reactive } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import { queryTaxInfo } from '@/core/api';
|
||||
import type { Response } from '@/core/models';
|
||||
import { InvoiceEnum } from '@/core/enum';
|
||||
import { userInvoice } from '@/core/consts';
|
||||
import { handleShowToast } from '@/core/utils';
|
||||
|
||||
const state = reactive<{
|
||||
radioItems : Array<{
|
||||
name : string,
|
||||
value : number,
|
||||
}>;
|
||||
model : {
|
||||
typeName : string,
|
||||
name : string,
|
||||
code : string,
|
||||
type : InvoiceEnum,
|
||||
}
|
||||
invoiceList : Array<any>;
|
||||
showInvoiceList : boolean;
|
||||
}>({
|
||||
radioItems: [{
|
||||
name: '个人发票',
|
||||
value: InvoiceEnum.personal
|
||||
},
|
||||
{
|
||||
name: '企业发票',
|
||||
value: InvoiceEnum.company
|
||||
}],
|
||||
model: {
|
||||
typeName: '', // 发票类型 2个人 3企业
|
||||
name: '', // 抬头名称
|
||||
code: '', // 税号
|
||||
type: InvoiceEnum.no,
|
||||
},
|
||||
invoiceList: [],
|
||||
showInvoiceList: false,
|
||||
});
|
||||
const state = reactive<{
|
||||
radioItems : Array<{
|
||||
name : string,
|
||||
value : number,
|
||||
}>;
|
||||
model : {
|
||||
typeName : string,
|
||||
name : string,
|
||||
code : string,
|
||||
type : InvoiceEnum,
|
||||
}
|
||||
invoiceList : Array<any>;
|
||||
showInvoiceList : boolean;
|
||||
}>({
|
||||
radioItems: [{
|
||||
name: '个人发票',
|
||||
value: InvoiceEnum.personal
|
||||
},
|
||||
{
|
||||
name: '企业发票',
|
||||
value: InvoiceEnum.company
|
||||
}],
|
||||
model: {
|
||||
typeName: '', // 发票类型 2个人 3企业
|
||||
name: '', // 抬头名称
|
||||
code: '', // 税号
|
||||
type: InvoiceEnum.no,
|
||||
},
|
||||
invoiceList: [],
|
||||
showInvoiceList: false,
|
||||
});
|
||||
|
||||
|
||||
onShow(() => {
|
||||
let userInvoiceInfo = uni.getStorageSync(userInvoice);
|
||||
if (userInvoiceInfo) {
|
||||
state.model = userInvoiceInfo;
|
||||
}
|
||||
});
|
||||
onShow(() => {
|
||||
let userInvoiceInfo = uni.getStorageSync(userInvoice);
|
||||
if (userInvoiceInfo) {
|
||||
state.model = userInvoiceInfo;
|
||||
}
|
||||
});
|
||||
|
||||
/** 切换radio */
|
||||
const handleChangeRadio = (e : any) => {
|
||||
state.model.type = (state.radioItems.find((item : any) => item.name == e)).value;
|
||||
}
|
||||
/** 切换radio */
|
||||
const handleChangeRadio = (e : any) => {
|
||||
state.model.type = (state.radioItems.find((item : any) => item.name == e)).value;
|
||||
}
|
||||
|
||||
/** 发票抬头输入 */
|
||||
const handleInput = (e : any) => {
|
||||
if (e) {
|
||||
state.model.name = e;
|
||||
getTaxInfo();
|
||||
}
|
||||
}
|
||||
/** 发票抬头输入 */
|
||||
const handleInput = (e : any) => {
|
||||
if (e) {
|
||||
state.model.name = e;
|
||||
getTaxInfo();
|
||||
}
|
||||
}
|
||||
|
||||
/** 发票模糊查询 */
|
||||
const getTaxInfo = async () => {
|
||||
const taxInfo : Response<any> = await queryTaxInfo({ name: state.model.name });
|
||||
if (taxInfo.status) {
|
||||
state.invoiceList = taxInfo.data;
|
||||
state.showInvoiceList = true;
|
||||
}
|
||||
}
|
||||
/** 发票模糊查询 */
|
||||
const getTaxInfo = async () => {
|
||||
const taxInfo : Response<any> = await queryTaxInfo({ name: state.model.name });
|
||||
if (taxInfo.status) {
|
||||
state.invoiceList = taxInfo.data;
|
||||
state.showInvoiceList = true;
|
||||
}
|
||||
}
|
||||
|
||||
/** 使用发票 */
|
||||
const handleUseInvoice = (item : any) => {
|
||||
state.model.name = item.name;
|
||||
state.model.code = item.code;
|
||||
state.model.type = InvoiceEnum.company;
|
||||
state.model.typeName = state.radioItems[1].name;
|
||||
state.showInvoiceList = false;
|
||||
}
|
||||
/** 使用发票 */
|
||||
const handleUseInvoice = (item : any) => {
|
||||
state.model.name = item.name;
|
||||
state.model.code = item.code;
|
||||
state.model.type = InvoiceEnum.company;
|
||||
state.model.typeName = state.radioItems[1].name;
|
||||
state.showInvoiceList = false;
|
||||
}
|
||||
|
||||
/** 不开具发票 */
|
||||
const handleNotUseInvoices = () => {
|
||||
uni.removeStorage({ key: userInvoice });
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
|
||||
/** 保存发票 */
|
||||
const handleSaveInvoice = () => {
|
||||
if (state.model.type === InvoiceEnum.no) {
|
||||
handleShowToast('请选择发票类型')
|
||||
return false;
|
||||
}
|
||||
if (!state.model.name) {
|
||||
handleShowToast('请输入发票抬头')
|
||||
return false;
|
||||
}
|
||||
if (state.model.type === InvoiceEnum.company && !state.model.code) {
|
||||
handleShowToast('请输入发票税号信息')
|
||||
return false;
|
||||
}
|
||||
uni.setStorageSync(userInvoice, state.model);
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
/** 不开具发票 */
|
||||
const handleNotUseInvoices = () => {
|
||||
uni.removeStorage({ key: userInvoice });
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* https://developers.weixin.qq.com/miniprogram/dev/api/open-api/invoice/wx.chooseInvoiceTitle.html
|
||||
* 在微信小程序中，当前小程序必须关联一个公众号，且这个公众号是完成了微信认证的，才能调用 chooseInvoiceTitle。
|
||||
*/
|
||||
const handleChooseInvoice = () => {
|
||||
uni.chooseInvoiceTitle({
|
||||
success(res : any) {
|
||||
if (res.errMsg == "chooseInvoiceTitle:ok") {
|
||||
state.model.name = res.title;
|
||||
state.model.code = res.taxNumber;
|
||||
state.model.type = res.type == "0" ? InvoiceEnum.company : InvoiceEnum.personal;
|
||||
state.model.typeName = res.type == "0" ? state.radioItems[1].name : state.radioItems[0].name;
|
||||
} else {
|
||||
handleShowToast(res.errMsg)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
/** 保存发票 */
|
||||
const handleSaveInvoice = () => {
|
||||
if (state.model.type === InvoiceEnum.no) {
|
||||
handleShowToast('请选择发票类型')
|
||||
return false;
|
||||
}
|
||||
if (!state.model.name) {
|
||||
handleShowToast('请输入发票抬头')
|
||||
return false;
|
||||
}
|
||||
if (state.model.type === InvoiceEnum.company && !state.model.code) {
|
||||
handleShowToast('请输入发票税号信息')
|
||||
return false;
|
||||
}
|
||||
uni.setStorageSync(userInvoice, state.model);
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './set.scss';
|
||||
@import './set.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user