wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2025-12-06 19:53:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

uniapp【新增】：发票页面新增从微信获取发票数据

Browse Source
This commit is contained in:
花城
2024-11-25 14:41:54 +08:00
parent 39b57ab895
commit b8436adf56
2 changed files with 247 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
CoreCms.Net.Uni-App/CoreShop/pages/subpackage/member/invoice/set/set.scss
View File

@@ -1,91 +1,88 @@
.layout-set-box { .layout-set-box {
padding-bottom: 200rpx; padding-bottom: 200rpx;
margin: 25rpx; margin: 25rpx;
padding: 30rpx; padding: 30rpx;
background-color: #fff; background-color: #fff;
border-radius: 15rpx; border-radius: 15rpx;
.item-box { .item-box {
.lab { .lab {
font-size: 30rpx; font-size: 30rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
} }
.invoice-list { .invoice-list {
margin-top: 20rpx; margin-top: 20rpx;
background-color: #fff; background-color: #fff;
box-shadow: 0 0 15rpx #eee; box-shadow: 0 0 15rpx #eee;
max-height: 325rpx; max-height: 325rpx;
overflow-y: scroll; overflow-y: scroll;
.list-box { .list-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: #f9f9f9; background: #f9f9f9;
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
margin-bottom: 10rpx; margin-bottom: 10rpx;
.msg-box { .msg-box {
.name { .name {
font-size: 27rpx; font-size: 27rpx;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.code { .code {
font-size: 24rpx; font-size: 24rpx;
color: #aaa; color: #aaa;
} }
} }
.peo { .peo {
font-size: 27rpx; font-size: 27rpx;
color: #aaa; color: #aaa;
} }
} }
} }
} }
.goods-detail-bottom-tabbar { .goods-detail-bottom-tabbar {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
left: 0; left: 0;
border-top: solid 1px #f2f2f2; border-top: solid 1px #f2f2f2;
background-color: #ffffff; background-color: #ffffff;
padding-bottom: calc(env(safe-area-inset-bottom) / 2); padding-bottom: calc(env(safe-area-inset-bottom) / 2);
z-index: 99; z-index: 99;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.btn-box { .btn-box {
padding:20rpx; width: 100%;
width: calc(100% - 40rpx); display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-between;
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 { .ok {
width: 48%; background-color: #d33123;
background-color: #333; }
color: #fff; .choose {
font-size: 27rpx; background-color: #54bd63;
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;
}
}
} }

319
CoreCms.Net.Uni-App/CoreShop/pages/subpackage/member/invoice/set/set.vue
View File

@@ -1,165 +1,186 @@
<template> <template>
<coreshop-page title="发票设置" mode="left"> <coreshop-page title="发票设置" mode="left">
<view class="layout-set-box"> <view class="layout-set-box">
<view class="item-box m-b-50"> <view class="item-box m-b-50">
<view class="lab">发票类型</view> <view class="lab">发票类型</view>
<view class="val"> <view class="val">
<uv-radio-group v-model="state.model.typeName" @change="handleChangeRadio"> <uv-radio-group v-model="state.model.typeName" @change="handleChangeRadio">
<uv-radio :customStyle="{ 'margin-right': '30rpx' }" v-for="(item, index) in state.radioItems" <uv-radio :customStyle="{ 'margin-right': '30rpx' }" v-for="(item, index) in state.radioItems"
:key="index" :label="item.name" :name="item.name"> :key="index" :label="item.name" :name="item.name">
</uv-radio> </uv-radio>
</uv-radio-group> </uv-radio-group>
</view> </view>
</view> </view>
<view class="item-box"> <view class="item-box">
<view class="lab">发票抬头</view> <view class="lab">发票抬头</view>
<view class="val"> <view class="val">
<uv-input placeholder="请输入发票抬头" border="surround" v-model="state.model.name" <uv-input placeholder="请输入发票抬头" border="surround" v-model="state.model.name"
@input="handleInput"></uv-input> @input="handleInput"></uv-input>
</view> </view>
</view> </view>
<view class="invoice-list" v-show="state.showInvoiceList"> <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="list-box" v-for="item in state.invoiceList" :key="item.id" @click="handleUseInvoice(item)">
<view class="msg-box"> <view class="msg-box">
<view class="name">{{ item.name || '' }}</view> <view class="name">{{ item.name || '' }}</view>
<view class="code">{{ item.code || '' }}</view> <view class="code">{{ item.code || '' }}</view>
</view> </view>
<view class="peo"> <view class="peo">
{{ item.frequency || '' }}人使用过 {{ item.frequency || '' }}人使用过
</view> </view>
</view> </view>
</view> </view>
<view class="item-box m-t-50 m-b-50"> <view class="item-box m-t-50 m-b-50">
<view class="lab">税务编号</view> <view class="lab">税务编号</view>
<view class="val"> <view class="val">
<uv-input placeholder="请输入税务编号" border="surround" v-model="state.model.code"></uv-input> <uv-input placeholder="请输入税务编号" border="surround" v-model="state.model.code"></uv-input>
</view> </view>
</view> </view>
<view class="item-box "> <view class="item-box ">
<view class="lab">发票内容</view> <view class="lab">发票内容</view>
<view class="val"> <view class="val">
明细 明细
</view> </view>
</view> </view>
<!-- 底部按钮 --> <!-- 底部按钮 -->
<view class="goods-detail-bottom-tabbar"> <view class="goods-detail-bottom-tabbar">
<view class="btn-box"> <view class="btn-box">
<view class="no" @click="handleNotUseInvoices"> 本次不开具发票 </view> <view class="btn no" @click="handleNotUseInvoices"> 本次不开具发票 </view>
<view class="ok" @click="handleSaveInvoice"> 保存发票 </view> <view class="btn ok" @click="handleSaveInvoice"> 保存发票 </view>
</view> <!-- #ifdef MP-WEIXIN -->
</view> <view class="btn choose" @click="handleChooseInvoice"> 获取用户发票 </view>
</view> <!-- #endif -->
</coreshop-page> </view>
</view>
</view>
</coreshop-page>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive } from 'vue'; import { reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app'; import { onShow } from '@dcloudio/uni-app';
import { queryTaxInfo } from '@/core/api'; import { queryTaxInfo } from '@/core/api';
import type { Response } from '@/core/models'; import type { Response } from '@/core/models';
import { InvoiceEnum } from '@/core/enum'; import { InvoiceEnum } from '@/core/enum';
import { userInvoice } from '@/core/consts'; import { userInvoice } from '@/core/consts';
import { handleShowToast } from '@/core/utils'; import { handleShowToast } from '@/core/utils';
const state = reactive<{ const state = reactive<{
radioItems : Array<{ radioItems : Array<{
name : string, name : string,
value : number, value : number,
}>; }>;
model : { model : {
typeName : string, typeName : string,
name : string, name : string,
code : string, code : string,
type : InvoiceEnum, type : InvoiceEnum,
} }
invoiceList : Array<any>; invoiceList : Array<any>;
showInvoiceList : boolean; showInvoiceList : boolean;
}>({ }>({
radioItems: [{ radioItems: [{
name: '个人发票', name: '个人发票',
value: InvoiceEnum.personal value: InvoiceEnum.personal
}, },
{ {
name: '企业发票', name: '企业发票',
value: InvoiceEnum.company value: InvoiceEnum.company
}], }],
model: { model: {
typeName: '', // 发票类型 2个人 3企业 typeName: '', // 发票类型 2个人 3企业
name: '', // 抬头名称 name: '', // 抬头名称
code: '', // 税号 code: '', // 税号
type: InvoiceEnum.no, type: InvoiceEnum.no,
}, },
invoiceList: [], invoiceList: [],
showInvoiceList: false, showInvoiceList: false,
}); });
onShow(() => { onShow(() => {
let userInvoiceInfo = uni.getStorageSync(userInvoice); let userInvoiceInfo = uni.getStorageSync(userInvoice);
if (userInvoiceInfo) { if (userInvoiceInfo) {
state.model = userInvoiceInfo; state.model = userInvoiceInfo;
} }
}); });
/** 切换radio */ /** 切换radio */
const handleChangeRadio = (e : any) => { const handleChangeRadio = (e : any) => {
state.model.type = (state.radioItems.find((item : any) => item.name == e)).value; state.model.type = (state.radioItems.find((item : any) => item.name == e)).value;
} }
/** 发票抬头输入 */ /** 发票抬头输入 */
const handleInput = (e : any) => { const handleInput = (e : any) => {
if (e) { if (e) {
state.model.name = e; state.model.name = e;
getTaxInfo(); getTaxInfo();
} }
} }
/** 发票模糊查询 */ /** 发票模糊查询 */
const getTaxInfo = async () => { const getTaxInfo = async () => {
const taxInfo : Response<any> = await queryTaxInfo({ name: state.model.name }); const taxInfo : Response<any> = await queryTaxInfo({ name: state.model.name });
if (taxInfo.status) { if (taxInfo.status) {
state.invoiceList = taxInfo.data; state.invoiceList = taxInfo.data;
state.showInvoiceList = true; state.showInvoiceList = true;
} }
} }
/** 使用发票 */ /** 使用发票 */
const handleUseInvoice = (item : any) => { const handleUseInvoice = (item : any) => {
state.model.name = item.name; state.model.name = item.name;
state.model.code = item.code; state.model.code = item.code;
state.model.type = InvoiceEnum.company; state.model.type = InvoiceEnum.company;
state.model.typeName = state.radioItems[1].name; state.model.typeName = state.radioItems[1].name;
state.showInvoiceList = false; state.showInvoiceList = false;
} }
/** 不开具发票 */ /** 不开具发票 */
const handleNotUseInvoices = () => { const handleNotUseInvoices = () => {
uni.removeStorage({ key: userInvoice }); uni.removeStorage({ key: userInvoice });
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
}) })
} }
/** 保存发票 */ /**
const handleSaveInvoice = () => { * https://developers.weixin.qq.com/miniprogram/dev/api/open-api/invoice/wx.chooseInvoiceTitle.html
if (state.model.type === InvoiceEnum.no) { * 在微信小程序中，当前小程序必须关联一个公众号，且这个公众号是完成了微信认证的，才能调用 chooseInvoiceTitle。
handleShowToast('请选择发票类型') */
return false; const handleChooseInvoice = () => {
} uni.chooseInvoiceTitle({
if (!state.model.name) { success(res : any) {
handleShowToast('请输入发票抬头') if (res.errMsg == "chooseInvoiceTitle:ok") {
return false; state.model.name = res.title;
} state.model.code = res.taxNumber;
if (state.model.type === InvoiceEnum.company && !state.model.code) { state.model.type = res.type == "0" ? InvoiceEnum.company : InvoiceEnum.personal;
handleShowToast('请输入发票税号信息') state.model.typeName = res.type == "0" ? state.radioItems[1].name : state.radioItems[0].name;
return false; } else {
} handleShowToast(res.errMsg)
uni.setStorageSync(userInvoice, state.model); }
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
})
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './set.scss'; @import './set.scss';
</style> </style>