123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667 |
- <template>
- <view class="container">
- <view class="gap"></view>
- <view class="is_need_invoice">{{$L('是否开具发票')}}</view>
- <view class="select_invoice">
- <view class="not_need_wrap" @click="selectInvoice">
- <text :class="{item_check:true, iconfont:true, iconziyuan33:not_need}" v-if="not_need == true"></text>
- <text :class="{iconfont:true, iconziyuan43:!not_need}" v-if="not_need == false"></text>
- <text :style="{color:not_need == true?'#333':'#666'}">{{$L('不需要')}}</text>
- </view>
- <view class="is_need_wrap" @click="selectInvoice">
- <text :class="{iconfont:true, iconziyuan43:!is_need}" v-if="is_need == false"></text>
- <text :class="{item_check:true, iconfont:true, iconziyuan33:is_need}" v-if="is_need == true"></text>
- <text :style="{color:not_need == true?'#666':'#333'}">{{$L('需要')}}</text>
- </view>
- </view>
- <view v-if="is_need == true">
- <view class="gap"></view>
- <view class="is_need_invoice">{{$L('发票内容')}}</view>
- <view class="select_invoice">
- <view class="not_need_wrap" @click="selectInvoiceContent">
- <text :class="{item_check:true, iconfont:true, iconziyuan33:goods_detail == true}" v-if="goods_detail == true"></text>
- <text :class="{iconfont:true, iconziyuan43:!goods_detail}" v-if="goods_detail == false"></text>
- <text :style="{color:goods_detail == true?'#333':'#666'}">{{$L('商品明细')}}</text>
- </view>
- <view class="is_need_wrap" @click="selectInvoiceContent">
- <text :class="{iconfont:true, iconziyuan43:!goods_type}" v-if="goods_type == false"></text>
- <text :class="{item_check:true, iconfont:true, iconziyuan33:goods_type}" v-if="goods_type == true"></text>
- <text :style="{color:goods_type == true?'#666':'#333'}">{{$L('商品类别')}}</text>
- </view>
- </view>
- <view class="invoice_content_tip">{{goods_detail == true?$L('发票内容将显示商品详情名称与价格信息,发票金额为实际支付金额,不含优惠等扣减金额。'):$L('发票内容将显示本单商品所属类别及价格信息,发票金额为实际支付金额,不含优惠等扣减金额。')}}</view>
-
- <!-- 有发票记录 -->
- <view class="invoice_history" v-if="invoice_list.length>0">
- <view class="is_need_invoice">{{$L('历史记录')}}</view>
- <view class="history_item_wrap">
- <view class="history_item" v-for="(item,index) in invoice_list" :key="index" @click="changeInvoice(index)" @touchstart="touchStart" @touchmove="touchMove($event,item.invoiceId)" :style="{left:is_show_btn && invoiceId == item.invoiceId?'-160rpx':'0'}">
- <text :class="{item_check:true, iconfont:true, iconziyuan33:index == current}" :style="{display:index == current?'inline-block':'none'}"></text>
- <text :class="{iconfont:true, iconziyuan43:index != current}" :style="{display:index == current?'none':'inline-block'}"></text>
- <text>{{item.invoiceTitle?item.invoiceTitle:item.companyName}}</text>
- <view class="delete_btn hide_del" @click="deleteHistory(item.invoiceId,index)" v-if="invoiceId == item.invoiceId">{{$L('删除')}}</view>
- </view>
- </view>
- <view class="gap"></view>
- </view>
-
- <view class="is_need_wrap goods_type" @click="createContent">
- <text :class="{iconfont:true, iconziyuan43:!invoice_content}" v-if="invoice_content == false"></text>
- <text :class="{item_check:true, iconfont:true, iconziyuan33:invoice_content == true}" :style="{display:invoice_content == true?'inline-block':'none'}"></text>
- <text :style="{color:invoice_content == true?'#666':'#333'}">{{$L('新增发票内容')}}</text>
- </view>
- </view>
-
- <view class="invoice_content_wrap" v-if="invoice_content == true && is_need == true">
- <view class="invoice_content_title">
- <view :class="is_personal == true?'selected_content content_title_item':'content_title_item'" @click="invoiceContent(true)">{{$L('个人')}}</view>
- <view :class="is_personal == false?'selected_content content_title_item':'content_title_item'" @click="invoiceContent(false)">{{$L('企业')}}</view>
- </view>
- <!-- 个人发票 -->
- <view v-if="is_personal == true">
- <view class="invoice_content_item">
- <view class="">{{$L('发票抬头')}}</view>
- <input type="text" v-model="invoice_title" maxlength="30" placeholder-class="invoice_item_right" :placeholder="$L('请填写正确的发票抬头')"/>
- </view>
- <view class="invoice_content_item">
- <view class="">{{$L('收票邮箱')}}</view>
- <input type="text" v-model="invoice_email" placeholder-class="invoice_item_right" :placeholder="$L('请输入收票邮箱')" @blur="$checkEmail(invoice_email)"/>
- </view>
- </view>
- <!-- 企业发票 -->
- <view v-if="is_personal == false">
- <view class="invoice_content_item">
- <view class="">{{$L('发票类型')}}</view>
- <view class="select_invoice">
- <view :class="{not_need_wrap:true,margin:isVatInvoice,noMargin:!isVatInvoice}" @click="invoiceType" >
- <text :class="{item_check:true, iconfont:true, iconziyuan33:plain_invoice}" v-if="plain_invoice == true"></text>
- <text :class="{iconfont:true, iconziyuan43:!plain_invoice}" v-if="plain_invoice == false"></text>
- <text :style="{color:plain_invoice == true?'#333':'#999'}">{{$L('普通发票')}}</text>
- </view>
- <view class="is_need_wrap" v-if="isVatInvoice" @click="invoiceType">
- <text :class="{iconfont:true, iconziyuan43:!special_invoice}" v-if="special_invoice == false"></text>
- <text :class="{item_check:true, iconfont:true, iconziyuan33:special_invoice}" v-if="special_invoice == true"></text>
- <text :style="{color:special_invoice == true?'#333':'#999'}">{{$L('增值税专用发票')}}</text>
- </view>
- </view>
- </view>
- <view class="invoice_content_item">
- <view class="">{{$L('单位名称')}}</view>
- <input type="text" v-model="company_name" maxlength="30" placeholder-class="invoice_item_right" :placeholder="$L('请输入单位名称')"/>
- </view>
- <view class="invoice_content_item">
- <view class="">{{$L('税号')}}</view>
- <input type="text" v-model="duty_paragraph" maxlength="20" placeholder-class="invoice_item_right" :placeholder="$L('请输入纳税人识别号')" @blur="checkTaxId"/>
- </view>
- <view v-if="special_invoice == true">
- <view class="invoice_content_item">
- <view class="">{{$L('注册地址')}}</view>
- <input type="text" v-model="registered_address" maxlength="100" placeholder-class="invoice_item_right" :placeholder="$L('请输入注册地址')"/>
- </view>
- <view class="invoice_content_item">
- <view class="">{{$L('注册电话')}}</view>
- <input type="number" v-model="registered_phone" maxlength="11" placeholder-class="invoice_item_right" :placeholder="$L('请输入注册电话')"/>
- </view>
- <view class="invoice_content_item">
- <view class="">{{$L('开户银行')}}</view>
- <input type="text" v-model="deposit_bank" maxlength="30" placeholder-class="invoice_item_right" :placeholder="$L('请输入开户银行')"/>
- </view>
- <view class="invoice_content_item">
- <view class="">{{$L('银行账户')}}</view>
- <input type="number" v-model="bank_account" maxlength="50" placeholder-class="invoice_item_right" :placeholder="$L('请输入银行账户')"/>
- </view>
- <view class="invoice_content_item">
- <view class="">{{$L('收票人')}}</view>
- <input type="text" v-model="check_taker" maxlength="5" placeholder-class="invoice_item_right" :placeholder="$L('请输入收票人')"/>
- </view>
- <view class="invoice_content_item">
- <view class="">{{$L('收票人电话')}}</view>
- <input type="number" v-model="bill_to_phone" maxlength="11" placeholder-class="invoice_item_right" :placeholder="$L('请输入收票人电话')"/>
- </view>
- <view class="invoice_content_item">
- <view class="">{{$L('收票地址')}}</view>
- <input type="text" v-model="bill_to_address" maxlength="100" placeholder-class="invoice_item_right" :placeholder="$L('请输入收票地址')"/>
- </view>
- </view>
- <view class="invoice_content_item" v-if="plain_invoice == true">
- <view class="">{{$L('收票邮箱')}}</view>
- <input type="text" v-model="bill_to_email" placeholder-class="invoice_item_right" :placeholder="$L('请输入收票邮箱')" @blur="$checkEmail(bill_to_email)"/>
- </view>
- </view>
- </view>
-
- <view class="is_need_wrap default_invoice" @click="isSetDefault" v-if="invoice_content == true && is_need == true">
- <text :class="{iconfont:true, iconziyuan43:!is_default}" v-if="is_default == false"></text>
- <text :class="{item_check:true, iconfont:true, iconziyuan33:is_default}" v-if="is_default == true"></text>
- <text :style="{color:invoice_content == true?'#666':'#333'}">{{$L('设为默认发票')}}</text>
- </view>
- <!-- 底部确定按钮 -->
- <view class="confirm_btn_wrap">
- <view class="confirm_btn" @click="invoiceSubmit">{{$L('确定')}}</view>
- </view>
- </view>
- </template>
- <script>
- import { mapState } from 'vuex';
- export default {
- data(){
- return {
- not_need:true, //是否开具发票,暂不需要
- is_need:false, //是否开具发票,需要
- goods_detail:true, //商品明细
- goods_type:false, //商品类别
- invoice_content:false, //新增发票内容
- is_personal:true, //个人还是企业
- is_default:false, //是否设为默认发票
- plain_invoice:true, //普通发票
- special_invoice:false, //增值专用发票
- invoice_title:'', //发票抬头
- invoice_email:'' ,//收票邮箱
- company_name:'' ,//单位名称
- duty_paragraph:'', //税号
- registered_address:'' ,//注册地址
- registered_phone:'', //注册电话
- deposit_bank:'' ,//开户银行
- bank_account:'', //银行账户
- check_taker:'', //收票人
- bill_to_phone:'' ,//收票电话
- bill_to_address:'' ,//收票地址
- bill_to_email:'', //收票邮箱
- invoice_list:[],//发票历史记录
- current:0,
- startX:'',
- startY:'',
- is_show_btn:false, //是否展示删除按钮
- slideClass:false, //样式切换
- invoiceId:'', //发票id
- isVatInvoice:true
- }
- },
- computed: {
- ...mapState(['userInfo'])
- },
- onLoad(options){
- this.isVatInvoice=options.isVatInvoice
- uni.removeStorage({
- key: 'invoice_info',
- });
- uni.removeStorage({
- key: 'is_need_invoice',
- });
- this.getInvoiceHistory()
- },
- methods:{
- touchStart(e){
- this.startX = e.touches[0].clientX;
- this.startY = e.touches[0].clientY;
- },
- touchMove(e,invoiceId){
- // 获得当前坐标
- this.invoiceId = invoiceId
- this.currentX = e.touches[0].clientX;
- this.currentY = e.touches[0].clientY;
- const x = this.startX - this.currentX; //横向移动距离
- const y = Math.abs(this.startY - this.currentY); //纵向移动距离,若向左移动有点倾斜也可以接受
- if (x > 0) {
- //向左滑显示
- this.is_show_btn = true
- } else if (x < 0) {
- //向右滑隐藏
- this.is_show_btn = false
- }
- },
- selectInvoice(){
- this.not_need = this.not_need == true?false:true
- this.is_need = this.is_need == true?false:true
- },
- selectInvoiceContent(){
- this.goods_detail = this.goods_detail == true?false:true
- this.goods_type = this.goods_type == true?false:true
- },
- createContent(){
- this.current = 100
- this.invoice_content = this.invoice_content == true?false:true
- },
- // 发票内容选择公司或个人
- invoiceContent(val){
- this.is_personal = val
- },
- // 是否设为默认发票
- isSetDefault(){
- this.is_default = this.is_default == true?false:true
- },
- // 选择发票类型
- invoiceType(){
- if(!this.isVatInvoice){
- return
- }
- this.plain_invoice = this.plain_invoice == true?false:true
- this.special_invoice = this.special_invoice == true?false:true
- },
- // 检查税号格式是否正确
- checkTaxId(){
- let regExp = /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/
- if(regExp.test(this.duty_paragraph) == false){
- uni.showToast({
- title:'请填写正确的税号!',
- icon:'none'
- })
- this.duty_paragraph = ''
- }
- },
- // 保存发票
- invoiceSubmit(){
-
- if(!this.invoice_list.length&&this.is_need&&!this.invoice_content){
- uni.showToast({
- title:'请选择发票!',
- icon:'none'
- })
- return false
- }
-
-
- if(this.is_need){//需要发票
- if(this.invoice_content == true){ //无历史记录
- if(this.is_personal == true){ //个人
- if(this.invoice_title == ''){
- uni.showToast({
- title:'请填写发票抬头!',
- icon:'none'
- })
- return
- }
- if(this.invoice_email == ''){
- uni.showToast({
- title:'请填写收票邮箱!',
- icon:'none'
- })
- return
- }
- }else{ //企业
- if(this.company_name == ''){
- uni.showToast({
- title:'请填写单位名称!',
- icon:'none'
- })
- return
- }
- if(this.duty_paragraph == ''){
- uni.showToast({
- title:'请填写税号!',
- icon:'none'
- })
- return
- }
- this.checkTaxId()
- if(this.plain_invoice == true){ //普通发票
- if(this.bill_to_email == ''){
- uni.showToast({
- title:'请填写收票邮箱!',
- icon:'none'
- })
- return
- }
- }else{ //专用发票
- if(this.registered_address == ''){
- uni.showToast({
- title:'请填写注册地址!',
- icon:'none'
- })
- return
- }
- if(this.registered_phone == ''){
- uni.showToast({
- title:'请填写注册电话!',
- icon:'none'
- })
- return
- }
- if(this.deposit_bank == ''){
- uni.showToast({
- title:'请填写开户银行!',
- icon:'none'
- })
- return
- }
- if(this.bank_account == ''){
- uni.showToast({
- title:'请填写银行账户!',
- icon:'none'
- })
- return
- }
- if(this.check_taker == ''){
- uni.showToast({
- title:'请填写收票人!',
- icon:'none'
- })
- return
- }
- if(this.bill_to_phone == ''){
- uni.showToast({
- title:'请填写收票电话!',
- icon:'none'
- })
- return
- }
- if(this.bill_to_address == ''){
- uni.showToast({
- title:'请填写收票地址!',
- icon:'none'
- })
- return
- }
- }
- }
- let param = {}
- param.url = 'v3/member/front/memberInvoice/add'
- param.method = 'POST'
- param.data = {}
- param.data.isDefault = this.is_default == true?1:0 //是否为默认发票
- param.data.invoiceContent = this.goods_detail == true?1:2
- param.data.invoiceType = this.is_personal == true?1:2 //发票类型
- if(this.is_personal == true){ //个人发票
- param.data.invoiceTitle = this.invoice_title
- param.data.receiverEmail = this.invoice_email
- }else{ //企业发票
- param.data.invoiceType = this.plain_invoice == true?1:2
- param.data.invoiceTitle = this.company_name
- param.data.taxCode = this.duty_paragraph
- if(this.plain_invoice == true){ //普通发票
- param.data.receiverEmail = this.bill_to_email
- }else{ //增值税发票
- param.data.registerAddr = this.registered_address
- param.data.registerPhone = this.registered_phone
- param.data.bankName = this.deposit_bank
- param.data.bankAccount = this.bank_account
- param.data.receiverName = this.check_taker
- param.data.receiverMobile = this.bill_to_phone
- param.data.receiverAddress = this.bill_to_address
- }
- }
- this.$request(param).then(res=>{
- if(res.state == 200){
- this.invoiceId = res.data
- let invoice_info = {}
- if(this.is_personal == true){ // 个人
- invoice_info = {
- invoice_title:this.invoice_title,
- invoice_content:this.goods_detail == true?'商品明细':'商品类别',
- invoiceId:this.invoiceId
- }
- }else{ // 企业
- invoice_info = {
- company_name:this.company_name,
- invoice_content:this.goods_detail == true?'商品明细':'商品类别',
- invoiceId:this.invoiceId
- }
- }
- uni.showToast({
- title:'新增发票成功!'
- })
- uni.setStorageSync('invoice_info', invoice_info);
- setTimeout(()=>{
- uni.navigateBack()
- },1500)
- }
- })
- }else{//有历史记录
- let invoice_info = {}
- this.invoice_list.map(item=>{
- if(item.is_check == true){
- if(item.companyName == null){ //个人
- invoice_info = {
- invoice_title:item.invoiceTitle,
- invoice_content:item.invoiceContent == 1?'商品明细':'商品类别',
- invoiceId:this.invoiceId
- }
- }else{ //企业
- invoice_info = {
- company_name:item.companyName,
- invoice_content:item.invoiceContent == 1?'商品明细':'商品类别',
- invoiceId:this.invoiceId
- }
- }
- }
- })
- uni.setStorageSync('invoice_info', invoice_info);
- uni.navigateBack({
- delta:1
- })
- }
- }else{//不需要发票
- uni.setStorageSync('is_need_invoice', this.is_need);
- uni.navigateBack()
- }
- },
- // 获取历史发票列表
- getInvoiceHistory(){
- let param = {}
- param.url = 'v3/member/front/memberInvoice/list'
- this.$request(param).then(res=>{
- this.invoice_list = res.data.list
- if(this.invoice_list.length>0){
- this.invoice_list.map(item=>{
- item.is_check = false
- })
- this.invoice_list[0].is_check = true
- this.invoiceId = this.invoice_list[0].invoiceId
- }
- })
- },
-
- changeInvoice(index){
- this.invoice_content = false
- this.current = index
- this.invoice_list.map(item=>{
- item.is_check = false
- })
- this.invoice_list[index].is_check = true
- },
- // 删除发票
- deleteHistory(invoiceId,index){
- let param = {}
- param.url = 'v3/member/front/memberInvoice/del'
- param.method = 'POST'
- param.data = {
- invoiceIds:invoiceId
- }
- this.$request(param).then(res=>{
- if(res.state == 200){
- uni.showToast({
- title:'删除成功!'
- })
- this.invoice_list.splice(index,1)
- }
- })
- }
- }
- }
- </script>
- <style lang="scss">
- .container{
- overflow-y: scroll;
- padding-bottom:168rpx;
- width: 750rpx;
- margin: 0 auto;
- box-sizing: border-box;
- overflow-x: hidden;
- }
- .gap{
- width:750rpx;
- height:20rpx;
- background-color: #F8F8F8;
- }
- .is_need_invoice{
- padding-left:20rpx;
- height:100rpx;
- line-height: 100rpx;
- font-size: 30rpx;
- font-weight: 600;
- color: #999;
- border-bottom: 1rpx solid rgba(0,0,0,0.1);
- }
- .select_invoice{
- display: flex;
- height:100rpx;
- align-items: center;
- padding-left:20rpx;
- font-size:28rpx;
- .not_need_wrap{
- margin-right:163rpx;
- &.margin{
- margin-right: 48rpx;
- }
- &.noMargin{
- margin-right: 0rpx;
- }
- }
- }
- .iconfont {
- font-size: 32rpx;
- color: #BBBBBB;
- margin-right: 20rpx;
- &.item_check{
- color: $main-color !important;
- }
- }
- .confirm_btn_wrap{
- width:750rpx;
- height:168rpx;
- position: fixed;
- bottom:0;
- left:0;
- right: 0;
- margin: 0 auto;
- display:flex;
- align-items:center;
- justify-content:center;
- background-color: #fff;
- z-index:99;
- .confirm_btn{
- width: 668rpx;
- height: 88rpx;
- text-align: center;
- line-height: 88rpx;
- font-size:36rpx;
- letter-spacing: 4rpx;
- color:#fefefe;
- background: linear-gradient(-90deg, #FC1D1C 0%, #FF7A18 100%);
- box-shadow: 0px 10px 20px 0px rgba(252, 31, 28, 0.2);
- border-radius: 44px;
- }
- }
-
- .invoice_content_tip{
- height:100rpx;
- font-size:24rpx;
- color:#999;
- padding:20rpx;
- box-sizing: border-box;
- background: #F8F8F8;;
- }
- .goods_type{
- height:100rpx;
- display: flex;
- padding-left:20rpx;
- box-sizing: border-box;
- align-items: center;
- font-size:28rpx;
- border-bottom:1rpx solid rgba(0,0,0,0.1);
- }
- .invoice_content_wrap{
- margin:20rpx;
- // height:298rpx;
- font-size:28rpx;
- border:1rpx solid rgba(0,0,0,0.1);
- border-radius:6rpx;
- box-sizing: border-box;
- .invoice_content_title{
- height:95rpx;
- display: flex;
- .content_title_item{
- flex:1;
- color:#666;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- }
- .invoice_content_item{
- display: flex;
- height: 101rpx;
- justify-content: space-between;
- align-items: center;
- padding:0 20rpx;
- color:#333;
- border-top:1rpx solid rgba(0,0,0,0.1);
- box-sizing: border-box;
- .invoice_item_right{
- color:#999;
- font-size:26rpx;
- text-align: right;
- }
- }
- }
- .selected_content{
- background:#F8F8F8;
- }
- .invoice_content_item /deep/ .uni-input-wrapper /deep/ .uni-input-input{
- width:500rpx;
- }
- /* #ifdef MP */
- .invoice_content_item input{
- width:500rpx;
- }
- /* #endif */
- .default_invoice{
- display: flex;
- align-items: center;
- justify-content: flex-end;
- color:#333;
- font-size:28rpx;
- padding-right:20rpx;
- }
-
- .history_item{
- height: 100rpx;
- font-size:32rpx;
- color: #333;
- padding-left:20rpx;
- display: flex;
- align-items: center;
- box-sizing: border-box;
- border-bottom:1rpx solid rgba(0,0,0,0.1);
- position: relative;
- transition: all 0.3s;
- .delete_btn{
- width:160rpx;
- height:100rpx;
- background-color: #FC1C1C;
- color:#fff;
- font-size:28rpx;
- font-weight: 600;
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- top:0;
- right:-160rpx;
- transition: all 0.3s;
- box-sizing: border-box;
- }
- }
- .history_item_wrap>view:nth-last-child(1){
- border-bottom: none;
- }
- .show_del{
- display: flex;
- }
- .hide_del{
- display: none;
- }
- </style>
|