Merge branch 'master' into feature/v1.1.71

src/api/modules/index.js

@@ -23,3 +23,4 @@ export * from './project'
 export * from './ent'
 export * from './dataSmt'
 export * from './jyPoints'
+export * from './invoice'

src/api/modules/invoice.js

@@ -0,0 +1,20 @@
+import request from '@/api'
+import qs from 'qs'
+
+export function ajaxInvoiceQuery(data) {
+  data = qs.stringify(data)
+  return request({
+    url: '/jypay/invoice/query',
+    method: 'post',
+    data
+  })
+}
+export function ajaxInvoiceSubmit(data) {
+  data = qs.stringify(data)
+  return request({
+    url: '/jypay/invoice/submit',
+    method: 'post',
+    data
+  })
+}
+

src/components/invoice/PopupSelect.vue

@@ -0,0 +1,217 @@
+<template>
+  <van-popup
+    v-model="visiblePopup"
+    closeable
+    round
+    close-icon="clear"
+    position="bottom"
+    :style="{ height: getHeight}"
+    class="popup-select"
+    get-container="body"
+  >
+    <div class="pop-container j-container">
+      <div class="j-header pop-title">{{ popTitle }}</div>
+      <div class="j-main pop-content">
+        <van-cell v-for="(item, index) in selectList" :key="index" :title="item.title" @click="changeHandle(item)" :class="{checked: item.checked}">
+          <template #right-icon>
+            <i class="iconfont icon-duihao" v-if="item.checked && !isMultiple"></i>
+            <span v-if="isMultiple">
+               <i class="self-icon iconfont icon-choose1" v-if="item.checked"></i>
+               <i class="self-icon iconfont icon-unchoose1" v-else></i>
+            </span>
+          </template>
+        </van-cell>
+      </div>
+      <div class="j-footer footer" v-if="okBtn">
+        <div class="multiple-btn" v-if="resetBtn">
+          <div class="default-btn clickable" @click="resetHandle">重置</div>
+          <div class="confirm-btn clickable" :class="{'disabled-btn': disabledBtn}" @click="confirmHandle">确定</div>
+        </div>
+        <div class="confirm-btn clickable" v-if="okBtn" :class="{'disabled-btn': disabledBtn}" @click="confirmHandle">确定</div>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import { Popup,  Cell } from 'vant'
+export default {
+  components: {
+    [Popup.name]: Popup,
+    [Cell.name]: Cell
+  },
+  props: {
+    // 是否多选
+    isMultiple: {
+      type: Boolean,
+      default: false
+    },
+    // 标题
+    popTitle: {
+      type: String,
+      default: '请选择'
+    },
+    // 筛选列表数据
+    selectList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 是否显示重置按钮
+    resetBtn: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示确定按钮
+    okBtn: {
+      type: Boolean,
+      default: true
+
+    }
+  },
+  data () {
+    return {
+      visiblePopup: false
+    }
+  },
+  computed:{
+    getHeight () {
+      let height = 480
+      if(this.selectList.length > 0) {
+        height = this.selectList.length < 7 ? 44 * this.selectList.length + 130 : 480
+      } else {
+        height = 200
+      }
+      return height.toString()+'px'
+    },
+    disabledBtn () {
+      return !this.selectList.some(item => item.checked)
+    }
+  },
+  methods: {
+    visibleHandle (val) {
+      this.visiblePopup = val
+    },
+    changeHandle (item) {
+      this.$emit('changeHandle', item, this.isMultiple)
+      if(!this.okBtn && !this.isMultiple){
+        this.visibleHandle(false)
+      }
+    },
+    confirmHandle () {
+      if(this.disabledBtn) return
+      this.$emit('confirmHandle')
+    },
+    // 重置
+    resetHandle () {
+      if(this.disabledBtn) return
+      this.$emit('resetHandle')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .popup-select{
+    z-index: 3000 !important;
+    .pop-title{
+      height: 64px;
+      font-size: 20px;
+      line-height: 64px;
+      padding-left: 16px;
+      color: #171826;
+    }
+    .van-cell{
+      padding: 10px 16px;
+      font-size: 14px;
+      line-height: 24px;
+      &::after{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        right: 0;
+      }
+      &.checked{
+        .van-cell__title {
+          color: #2ABED1;
+        }
+      }
+    }
+    .pop-content{
+      display: unset;
+      padding-bottom: 16px;
+    }
+    .van-cell:nth-last-child(1){
+      &::before{
+          position: absolute;
+          box-sizing: border-box;
+          content: ' ';
+          pointer-events: none;
+          right: 0;
+          bottom: 0;
+          left: 16px;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+          -webkit-transform: scaleY(0.5);
+          transform: scaleY(0.5);
+      }
+    }
+    ::v-deep {
+      .j-footer{
+        position: relative;
+        background: #fff !important;
+        height: 66px;
+        width: 100%;
+        padding: 8px 16px 12px 16px;
+      }
+    }
+    .j-container{
+      min-height:100px;
+    }
+    .confirm-btn{
+      height: 46px;
+      border-radius: 8px;
+      background: #2ABED1;
+      text-align: center;
+      font-size: 18px;
+      line-height: 46px;
+      color: #fff;
+    }
+    .multiple-btn{
+      display: grid;
+      grid-template-columns: 50% 50%;
+      grid-column-gap: 13px;
+      .default-btn{
+        height: 46px;
+        line-height: 46px;
+        border-radius: 4px;
+        background: #EDEFF2;
+        color: #5F5E64;
+        text-align: center;
+        font-size: 16px;
+      }
+      .confirm-btn{
+        border-radius: 4px;
+      }
+    }
+    .disabled-btn{
+      opacity: .5;
+    }
+    .icon-duihao {
+      display: flex;
+      width: 24px;
+      height: 24px;
+      color: #2ABED1;
+      font-size: 24px;
+    }
+    .icon-choose1{
+      color: #2ABED1;
+    }
+    .self-icon{
+      font-size:24px;
+    }
+    ::v-deep {
+      .van-popup__close-icon{
+        font-size:20px;
+      }
+    }
+  }
+</style>

src/components/invoice/popupTip.vue

@@ -0,0 +1,70 @@
+<template>
+  <van-dialog
+    :value="show"
+    get-container="body"
+    confirm-button-text="我知道了"
+    confirm-button-color="#2abed1"
+    class="question-tip"
+    :style="{ top: '50%' }"
+    @confirm="onConfirm">
+    <slot></slot>
+    <div class="content-list">
+      <div class="content-item">
+        <div class="content-label" v-html="title"></div>
+        <div class="content-text" v-html="text">
+        </div>
+      </div>
+    </div>
+  </van-dialog>
+</template>
+<script>
+export default {
+  name: 'popupTip',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: String,
+      default: ''
+    }
+  },
+  model: {
+    prop: 'show',
+    event: 'change'
+  },
+  methods: {
+    onConfirm () {
+      this.$emit('change', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.question-tip {
+  ::v-deep {
+    .van-dialog__header {
+      font-size: 17px;
+      font-weight: 700;
+    }
+    .van-dialog__content {
+      padding: 16px;
+    }
+  }
+  .content-label {
+    margin: 12px 0;
+    font-weight: 700;
+  }
+  .content-text {
+    font-size: 16px;
+    line-height: 26px;
+    color: rgba(0,0,0,.9);
+  }
+}
+</style>

src/components/invoice/radioGroup.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="radioGroup">
+    <div class="item" v-for="(item,index) in list" :key="index" @click="choose(item)">
+      <div :class="{checkbox_:true,active:item.value===value}"></div>
+      <p class="text">{{item.text}}</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'radioGroup',
+  props: {
+    value: {},
+    list:{
+     type: Array,
+      default: () => []
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  methods: {
+    choose (item) {
+      this.$emit('change', item.value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.radioGroup{
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+  .item{
+    align-items: center;
+    display: flex;
+    margin-right: 24px;
+    margin-bottom: 12px;
+    // float: left;
+    .checkbox_{
+      width: 24px;
+      height: 24px;
+      background-image: url(@/assets/image/invoice/unchoose.png);
+      background-size: 100% 100%;
+      margin-right: 3px;
+    }
+    .active{
+      background-image:url(@/assets/image/invoice/choose.png);
+
+    }
+    .text{
+      font-family: PingFang SC;
+font-size: 12px;
+font-weight: 400;
+line-height: 18px;
+letter-spacing: 0em;
+text-align: left;
+color: #5F5E64;
+
+    }
+  }
+}
+
+</style>

src/components/select/PopupSelect.vue

@@ -22,12 +22,12 @@
           </template>
         </van-cell>
       </div>
-      <div class="j-footer footer">
+      <div class="j-footer footer" v-if="okBtn">
         <div class="multiple-btn" v-if="resetBtn">
           <div class="default-btn clickable" @click="resetHandle">重置</div>
           <div class="confirm-btn clickable" :class="{'disabled-btn': disabledBtn}" @click="confirmHandle">确定</div>
         </div>
-        <div class="confirm-btn clickable" v-else :class="{'disabled-btn': disabledBtn}" @click="confirmHandle">确定</div>
+        <div class="confirm-btn clickable" v-if="okBtn" :class="{'disabled-btn': disabledBtn}" @click="confirmHandle">确定</div>
       </div>
     </div>
   </van-popup>
@@ -62,6 +62,12 @@ export default {
     resetBtn: {
       type: Boolean,
       default: false
+    },
+    // 是否显示确定按钮
+    okBtn: {
+      type: Boolean,
+      default: true
+
     }
   },
   data () {
@@ -89,6 +95,9 @@ export default {
     },
     changeHandle (item) {
       this.$emit('changeHandle', item, this.isMultiple)
+      if(!this.okBtn && !this.isMultiple){
+        this.visibleHandle(false)
+      }
     },
     confirmHandle () {
       if(this.disabledBtn) return

src/router/modules/invoice.js

@@ -0,0 +1,18 @@
+export default [
+  {
+    path: '/Invoicing',
+    name: 'Invoicing',
+    component: () => import('@/views/invoice/Invoicing.vue'),
+    meta: {
+      title: '开发票'
+    }
+  },
+  {
+    path: '/viewInvoice',
+    name: 'viewInvoice',
+    component: () => import('@/views/invoice/viewInvoice.vue'),
+    meta: {
+      title: '查看发票'
+    }
+  }
+]

src/views/invoice/Invoicing.vue

@@ -0,0 +1,866 @@
+<template>
+  <div class="Invoicing">
+    <div class="header">
+      <div class="item">
+        <div class="text_box">
+          <p class="title">订单编号：</p>
+          <p class="value">{{infoMap.code}}</p>
+        </div>
+      </div>
+      <div class="item mt-10">
+        <div class="text_box">
+          <p class="title">开票金额：</p>
+          <p class="value">{{infoMap.price}}元</p>
+        </div>
+        <div class="rightBtn" @click="tipShow = true">开票规则</div>
+      </div>
+    </div>
+    <div class="j-body">
+      <div class="j-content">
+        <div class="item-box-type">
+          <div class="item-box-title redstar">发票类型</div>
+          <radioGroup v-model="infoMap.type" :list="typelist" @change="initshowModule"></radioGroup>
+        </div>
+        <van-field v-model.trim="infoMap.content" label="发票内容" readonly></van-field>
+        <div class="item-box-type">
+          <div class="item-box-title redstar">发票抬头</div>
+          <radioGroup v-model="infoMap.invoiceHeader" :list="invoiceHeaderlist" @change="initshowModule"></radioGroup>
+        </div>
+
+        <div class="companybox">
+          <div class="associate-ent-group" v-show="isAssociateShow">
+            <div class="associate-ent-item" @click="selectEnt(item)" v-for="(item, i) in searchList" v-bind:key="i"
+             v-html="highlightText(item.name, infoMap.company)"></div>
+          </div>
+          <van-field v-model.trim="infoMap.company" label="公司名称" maxlength="50" @focus="infoCheckMap.company = ''"
+          @input="entOnChange('input')" @blur="entOnChange('blur')"  :errorMessage="infoCheckMap.company" :required="requireds.company"
+          placeholder="请输入准确的公司名称" v-if="showModule.company" type="textarea" rows="1" autosize></van-field>
+        </div>
+
+        <van-field v-model.trim="infoMap.dutyparagraph" label="单位税号"  @focus="infoCheckMap.dutyparagraph = ''"
+          @blur="getCheckMap('dutyparagraph')" :errorMessage="infoCheckMap.dutyparagraph" :required="requireds.dutyparagraph"
+          placeholder="请输入纳税人识别号" v-if="showModule.dutyparagraph" type="textarea" rows="1" autosize></van-field>
+
+
+
+        <van-field v-model.trim="infoMap.unitAddress" label="单位地址"  @focus="infoCheckMap.unitAddress = ''"
+          @blur="getCheckMap('unitAddress')" :errorMessage="infoCheckMap.unitAddress" :required="requireds.unitAddress"
+          placeholder="请输入单位地址" v-if="showModule.unitAddress" type="textarea" rows="1" autosize maxlength="200"></van-field>
+
+
+
+        <van-field v-model.trim="infoMap.tel" label="电话号码"  @focus="infoCheckMap.tel = ''"
+          @blur="getCheckMap('tel')" :errorMessage="infoCheckMap.tel" :required ="requireds.tel"
+          placeholder="请输入电话号码" v-if="showModule.tel"></van-field> 
+
+
+
+        <van-field v-model.trim="infoMap.bank" label="开户银行"  @focus="infoCheckMap.bank = ''"
+          @blur="getCheckMap('bank')" :errorMessage="infoCheckMap.bank" :required="requireds.bank"
+          placeholder="请输入开户银行" v-if="showModule.bank" type="textarea" rows="1" autosize maxlength="200"></van-field> 
+
+        <van-field v-model.trim="infoMap.bankCode" label="银行账号"  @focus="infoCheckMap.bankCode = ''"
+          @blur="getCheckMap('bankCode')" :errorMessage="infoCheckMap.bankCode" :required="requireds.bankCode"
+          placeholder="请输入银行账号" v-if="showModule.bankCode" type="textarea" rows="1" autosize></van-field> 
+
+
+        <van-field v-model.trim="infoMap.desc" label="开票备注"  @focus="infoCheckMap.desc = ''" :required="requireds.desc"  :errorMessage="infoCheckMap.desc" placeholder="请输入开票备注" v-if="showModule.desc" maxlength="200" type="textarea" rows="1" autosize></van-field> 
+      </div>
+      <div class="j-content">
+        <van-field v-model.trim="infoMap.name" label="收件人"  @focus="infoCheckMap.name = ''"
+          @blur="getCheckMap('name')" :errorMessage="infoCheckMap.name" :required="requireds.name"
+          placeholder="请输入收件人" v-if="showModule.name" maxlength="200"></van-field> 
+
+
+        <van-field v-model.trim="infoMap.phone" label="联系电话"  @focus="infoCheckMap.phone = ''"
+          @blur="getCheckMap('phone')" :errorMessage="infoCheckMap.phone" :required="requireds.phone"
+          placeholder="请输入联系电话"></van-field> 
+
+
+        <van-field v-model.trim="infoMap.deliveryAddress" label="收件地址"  @focus="infoCheckMap.deliveryAddress = ''"
+          @blur="getCheckMap('deliveryAddress')" :errorMessage="infoCheckMap.deliveryAddress" :required = "requireds.deliveryAddress"
+          placeholder="请输入收件地址" type="textarea" rows="1" autosize  v-if="showModule.deliveryAddress" maxlength="200"></van-field> 
+
+
+
+        <van-field v-model.trim="infoMap.email" label="电子邮箱"  @focus="infoCheckMap.email = ''"
+          @blur="getCheckMap('email')" :errorMessage="infoCheckMap.email" :required = "requireds.email"
+          placeholder="请输入电子邮箱" type="textarea" rows="1" autosize  v-if="showModule.email"
+          maxlength="50"></van-field> 
+    </div>
+    </div>
+    <div class="j-bottom">
+      <p class="b-desc">{{desc}}</p>
+      <div class="j-button-group">
+        <button class="j-button-confirm" :disabled="disabled" @click="confirm_ok">提交</button>
+      </div>
+    </div>
+    <popupTip v-model="tipShow" text="开票规则：<br>1.平台提供电子普通发票、电子专用发票、纸质普通发票、纸质专用发票，开票内容统一为“信息技术服务-技术服务费”。<br>2.您申请的电子发票将在3个工作日内由平台开具并发送至您的邮箱，请注意查收；您申请的纸质发票将在25个工作日内由平台开具并邮寄给您，请注意查收，开票金额<200元发票邮寄费用自行承担；<br>3.如有问题可联系客服，客服电话：400-108-6670。">
+    </popupTip>
+  </div>
+</template>
+<script>
+import { ajaxGetCompanyAssociation,ajaxInvoiceSubmit,ajaxInvoiceQuery } from '@/api/modules'
+import { replaceKeyword } from '@/utils/utils'
+import { Field, Icon, Button } from 'vant'
+import popupTip from '@/components/invoice/popupTip'
+import radioGroup from '@/components/invoice/radioGroup'
+export default {
+  name: 'Invoicing',
+  components: {
+    [Field.name]: Field,
+    [Icon.name]: Icon,
+    [Button.name]: Button,
+    popupTip,
+    radioGroup
+  },
+  data() {
+    return {
+      typelist:[{text:'电子普通发票',value:'1'},{text:'电子专用发票',value:'2'},{text:'纸质普通发票',value:'3'},{text:'纸质专用发票',value:'4'}],
+      invoiceHeaderlist:[{text:'个人',value:'1'},{text:'单位',value:'2'}],
+      searchList: [],
+      isAssociateShow: false,
+      isAssociateUpTime: -1,
+      tipShow: false,
+      infoMap: {
+        code:'',
+        price:'',
+        type:'1',
+        invoiceHeader:'2',
+        content:'信息技术服务-技术服务费',
+        company: '',
+        dutyparagraph:'',
+        unitAddress:'',
+        phone:'',
+        bank:'',
+        bankCode:'',
+        desc:'',
+        tel:'',
+        email:'',
+        deliveryAddress:'',
+        name:'',
+      },
+      infoCheckMap: {
+        company: '',
+        dutyparagraph:'',
+        unitAddress:'',
+        phone:'',
+        bank:'',
+        bankCode:'',
+        desc:'',
+        tel:'',
+        email:'',
+        deliveryAddress:'',
+        name:'',
+      },
+      showModule: {
+        company:false,
+        dutyparagraph:false,
+        bankCode:false,
+        bank:false,
+        tel:false,
+        unitAddress:false,
+        desc:false,
+        name:false,
+        phone:true,
+        deliveryAddress:false,
+        email:false
+      },
+      requireds:{
+        company: true,
+        dutyparagraph:true,
+        unitAddress:true,
+        phone:true,
+        bank:true,
+        bankCode:true,
+        desc:false,
+        tel:true,
+        email:true,
+        deliveryAddress:true,
+        name:true,
+      },
+      onlyIdentifying:'',
+      invoiceMoney:'',
+      operator:''
+    }
+  },
+  computed: {
+    disabled() {
+      return !(this.checkVerify('name') && this.checkVerify('company') && this.checkVerify('tel') && this.checkVerify('email') && this.checkVerify('bank') && this.checkVerify('bankCode') && this.checkVerify('unitAddress') && this.checkVerify('dutyparagraph') && this.checkVerify('phone') && this.checkVerify('deliveryAddress'))
+    },
+    desc (){
+      if(this.infoMap.type==='1' || this.infoMap.type==='2'){
+        return '您申请的发票将在3个工作日内由平台开具并发送至您的邮箱，请注意查收。'
+      } else if((this.infoMap.type=='3' || this.infoMap.type=='4') && this.infoMap.price >= 200){
+        return'您申请的发票将在25个工作日由平台开具并邮寄给您，请注意查收。'
+      } else if((this.infoMap.type=='3' || this.infoMap.type=='4') && this.infoMap.price < 200){
+        return'您申请的发票将在25个工作日由平台开具并邮寄给您，请注意查收，另开票金额＜200元，发票邮寄费用需您自行承担。'
+      }
+    },
+    checkName() {
+      if (this.infoMap.name && this.infoMap.name.length > 10) {
+        return false
+      }
+      var namereg = /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/; //中英文或加.的少数民族名字
+      return namereg.test(this.infoMap.name)
+    },
+
+    checkEmail() {
+      let emailRegExp = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
+      if (this.infoMap.email.length > 50) {
+        return false
+      }
+      return emailRegExp.test(this.infoMap.email)
+    },
+    checkEntName() {
+      if (this.infoMap.company.trim().length > 50 || this.infoMap.company.trim().length < 2) {
+        return false
+      }
+      return true
+    },
+    checkDutyparagraph () {
+      if (this.infoMap.dutyparagraph.trim().length === 18 || this.infoMap.dutyparagraph.trim().length === 15 || this.infoMap.dutyparagraph.trim().length === 20) {
+        return true
+      }
+      return false
+    },
+    checkBankcode () {
+      let RegExp = /^[1-9]\d{9,29}$/
+      if (!this.infoMap.bankCode) {
+        return false
+      }
+      return RegExp.test(this.infoMap.bankCode)
+    }
+
+  },
+  created() {
+   this.initData()
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    initData(){
+      let {onlyIdentifying,invoiceMoney,operator} = this.$route.query
+      this.onlyIdentifying=onlyIdentifying?onlyIdentifying:''
+      this.invoiceMoney=invoiceMoney?invoiceMoney:''
+      this.operator=operator?operator:''
+      const loading = this.$toast.loading({ duration: 0, message: 'loading...' })
+      ajaxInvoiceQuery({
+        onlyIdentifying:this.onlyIdentifying,
+        invoiceMoney:this.invoiceMoney,
+        operator:this.operator
+      }).then(res=>{
+        loading.clear()
+        if(res.data){
+          this.infoMap.code = res.data.orderCodes?res.data.orderCodes:''
+          this.infoMap.price = res.data.money?res.data.money/100:0
+          this.initEnt(res.data.company_name)
+          if(res.data.invoice){
+              this.$router.replace({ path:'/invoice/viewInvoice', query:{ onlyIdentifying:this.onlyIdentifying,invoiceMoney:this.invoiceMoney,operator:this.operator}})
+          }
+
+        }
+        this.initshowModule()
+      })  
+    },
+    confirm_ok() {
+      const loading = this.$toast.loading({ duration: 0, message: '提交中...' })
+      let parms = {
+        onlyIdentifying:this.onlyIdentifying,
+        invoiceMoney:this.invoiceMoney,
+        operator:this.operator,
+        company_name:this.showModule.company?this.infoMap.company:'',
+        phone:this.showModule.phone?this.infoMap.phone:'',
+        mail:this.showModule.email?this.infoMap.email:'',
+        invoice_type:this.invoiceHeaderFilter(this.infoMap.invoiceHeader),
+        taxpayer_identnum:this.showModule.dutyparagraph?this.infoMap.dutyparagraph:'',
+        remark:this.showModule.desc?this.infoMap.desc:'',
+        invoice_variety:this.typeFilter(this.infoMap.type),
+        bank_account:this.showModule.bankCode?this.infoMap.bankCode:'',
+        company_address:this.showModule.unitAddress?this.infoMap.unitAddress:'',
+        bank_name:this.showModule.bank?this.infoMap.bank:'',
+        recipient:this.showModule.name?this.infoMap.name:'',
+        delivery_address:this.showModule.deliveryAddress?this.infoMap.deliveryAddress:'',
+        company_phone:this.showModule.tel?this.infoMap.tel:''
+      }
+      ajaxInvoiceSubmit(parms).then(res=>{
+        loading.clear()
+        if(res.error_code === 0){
+          this.$toast('提交成功！')
+          this.$router.replace({ path:'/invoice/viewInvoice', query:{ onlyIdentifying:this.onlyIdentifying,invoiceMoney:this.invoiceMoney,operator:this.operator}})
+        }else{
+          this.$toast(res.error_msg)
+        }
+      })
+    },
+    getCheckMap(type) {
+      switch (type) {
+        case 'name': {
+          this.infoCheckMap.name = this.infoMap.name === '' ? '收件人为必填项' : ''
+          if (this.infoCheckMap.name === '' && !this.checkName) {
+            this.infoCheckMap.name = '请输入正确格式的收件人'
+          }
+          break
+        }
+        case 'tel': {
+          if(this.requireds.tel){
+            this.infoCheckMap.tel = this.infoMap.tel === '' ? '电话号码为必填项' : ''
+          }
+          if (this.infoMap.tel && this.infoCheckMap.tel === '' && !this.checkPhone(this.infoMap.tel)) {
+            this.infoCheckMap.tel = '联系电话格式不正确'
+          }  
+          break
+        }
+        case 'phone': {
+          this.infoCheckMap.phone = this.infoMap.phone === '' ? '联系电话为必填项' : ''
+          if (this.infoCheckMap.phone === '' && !this.checkPhone(this.infoMap.phone)) {
+            this.infoCheckMap.phone = '联系电话格式不正确'
+          }
+          break
+        }
+        case 'email': {
+          this.infoCheckMap.email = this.infoMap.email === '' ? '邮箱为必填项' : ''
+          if (this.infoCheckMap.email === '' && !this.checkEmail) {
+            this.infoCheckMap.email = '请输入正确格式的邮箱'
+          }
+          break
+        }
+        case 'company': {
+          this.infoCheckMap.company = this.infoMap.company === '' ? '公司名称为必填项' : ''
+          if (this.infoCheckMap.company === '' && !this.checkEntName) {
+            this.infoCheckMap.company = '请输入正确格式的公司名称'
+            if (this.infoMap.company.length < 2) {
+              this.infoCheckMap.company = '公司名称至少输入2个字'
+            }
+            if (this.infoMap.company.length > 50) {
+              this.infoCheckMap.company = '公司名称最多输入50个字'
+            }
+          }
+          break
+        }
+        case 'dutyparagraph': {
+          this.infoCheckMap.dutyparagraph = this.infoMap.dutyparagraph === '' ? '纳税人识别号为必填项' : ''
+          if (this.infoCheckMap.dutyparagraph === '' && !this.checkDutyparagraph) {
+            this.infoCheckMap.dutyparagraph = '请输入正确格式的纳税人识别号'
+          }
+          break
+        }
+        case 'bankCode': {
+          if(this.requireds.bankCode){
+            this.infoCheckMap.bankCode = this.infoMap.bankCode === '' ? '银行账号为必填项' : ''
+          } 
+          if(this.infoMap.bankCode && !this.checkBankcode){
+            this.infoCheckMap.bankCode = '请输入正确格式的银行账号'
+          }
+          break
+        }
+        case 'bank': {
+          if(this.requireds.bank){
+            this.infoCheckMap.bank = this.infoMap.bank === '' ? '开户银行为必填项' : ''
+          } 
+          break
+        }
+        case 'unitAddress': {
+          if(this.requireds.unitAddress){
+            this.infoCheckMap.unitAddress = this.infoMap.unitAddress === '' ? '单位地址为必填项' : ''
+          } 
+          break
+        }
+        case 'deliveryAddress': {
+          if(this.requireds.deliveryAddress){
+            this.infoCheckMap.deliveryAddress = this.infoMap.deliveryAddress === '' ? '收件地址为必填项' : ''
+          } 
+          break
+        }
+      }
+    },
+    checkVerify(type){
+      switch (type) {
+        case 'name': {
+          if ((this.infoMap.name === '' || !this.checkName) && this.showModule.name) {
+            return false
+          }else{
+            return true
+          }
+          break
+        }
+        case 'tel': {
+          if (this.showModule.tel) {
+            if(!this.requireds.tel && !this.checkPhone(this.infoMap.tel) && this.infoMap.tel){
+              return false
+            }else if((this.infoMap.tel === '' || !this.checkPhone(this.infoMap.tel)) && this.requireds.tel){
+              return false
+            }else{
+              return true
+            }
+          } else{
+            return true
+          }
+          break
+        }
+        case 'phone': {
+          
+          if ((this.infoMap.phone === '' || !this.checkPhone(this.infoMap.phone) && this.showModule.phone)) {
+            return false
+          }else{
+            return true
+          }
+          break
+        }
+        case 'email': {
+          if ((this.infoMap.email === '' ||  !this.checkEmail) && this.showModule.email) {
+            return false
+          }else{
+            return true
+          }
+          break
+        }
+        case 'company': {
+          if (this.infoMap.company === '' && !this.checkEntName && this.showModule.company) {
+            return false
+        
+          }else if (this.infoMap.company.length < 2 && this.showModule.company) {
+              return false
+          }else if(this.infoMap.company.length > 50 && this.showModule.company) {
+              return false
+          }else{
+            return true
+          }
+          break
+        }
+        case 'dutyparagraph': {
+          if ((this.infoMap.dutyparagraph === '' || !this.checkDutyparagraph) && this.showModule.dutyparagraph) {
+            return false
+          }else{
+            return true
+          }
+          break
+        }
+        case 'bankCode': {
+
+          if (this.showModule.bankCode) {
+            if(!this.requireds.bankCode && !this.checkBankcode && this.infoMap.bankCode){
+              return false
+            }else if((this.infoMap.bankCode === '' || !this.checkBankcode) && this.requireds.bankCode){
+              return false
+            }else{
+              return true
+            }
+          } else{
+            return true
+          }
+          break
+        }
+        case 'bank': {
+
+          if(this.requireds.bank && this.infoMap.bank === '' && this.showModule.bank){
+            return false
+          }else{
+            return true
+          }
+          break
+        }
+        case 'unitAddress': {
+          if(this.requireds.unitAddress && this.infoMap.unitAddress === '' && this.showModule.unitAddress){
+            return false
+          }else{
+            return true
+          }
+          break
+        }
+        case 'deliveryAddress': {
+          if(this.requireds.deliveryAddress && this.infoMap.deliveryAddress === '' && this.showModule.deliveryAddress){
+            return false
+          }else{
+            return true
+          }  
+          break
+        }
+      }
+    },
+    entOnChange (type) {
+      if (type === 'blur') {
+        this.getCheckMap('company')
+        setTimeout(() => {
+          this.isAssociateShow = false
+          this.searchList = []
+        }, 300)
+      } else {
+        clearTimeout(this.isAssociateUpTime)
+        this.isAssociateUpTime = setTimeout(() => {
+          this.ajaxEntList(this.infoMap.company)
+        }, 200)
+      }
+    },
+    selectEnt (item) {
+      console.log('item', item)
+      this.infoMap.company = item.name ? item.name : ''
+      this.infoMap.dutyparagraph = item.taxCode ? item.taxCode : ''
+      this.isAssociateShow = false
+      this.searchList = []
+      if(this.checkVerify('company')){
+        this.infoCheckMap.company = ''
+      }else{
+        this.getCheckMap('company')
+      }
+      if(this.checkVerify('dutyparagraph')){
+        this.infoCheckMap.dutyparagraph = ''
+      }else{
+        this.getCheckMap('dutyparagraph')
+      }
+    },
+    ajaxEntList (str) {
+      if (str.length <= 2) {
+        this.isAssociateShow = false
+        return
+      }
+      ajaxGetCompanyAssociation({
+        name: str,
+        typ: 'ent',
+        num: 10
+      }).then(res => {
+        const { error_code: code, data } = res
+        if (code === 0) {
+          const result = data?.list || []
+          if (Array.isArray(result) && result.length) {
+            this.isAssociateShow = true
+            this.searchList = result
+          } 
+        }
+      })
+    },
+    initEnt(str){
+      if(!str){
+        return
+      }
+      this.infoMap.company = str
+      ajaxGetCompanyAssociation({
+        name: str,
+        typ: 'ent',
+        num: 10
+      }).then(res => {
+        const { error_code: code, data } = res
+        if (code === 0) {
+          const result = data?.list || []
+          if (Array.isArray(result) && result.length === 1) {
+            if(result[0].name === str){
+              this.infoMap.dutyparagraph = result[0].taxCode
+            }
+          } 
+        }
+      })
+    },
+    initshowModule(){
+      if(this.infoMap.type === '2' || this.infoMap.type === '4'){
+        this.infoMap.invoiceHeader = '2'
+        this.invoiceHeaderlist = [{text:'单位',value:'2'}]
+      }else{
+        this.invoiceHeaderlist = [{text:'个人',value:'1'},{text:'单位',value:'2'}]
+      }
+      if(this.infoMap.invoiceHeader === '2'){
+        this.showModule.company = true
+        this.showModule.dutyparagraph = true
+        this.showModule.bankCode = true
+        this.showModule.bank =true
+        this.showModule.unitAddress = true
+        this.showModule.tel = true
+      }else{
+        this.showModule.company = false
+        this.showModule.dutyparagraph = false
+        this.showModule.bankCode = false
+        this.showModule.bank =false
+        this.showModule.unitAddress = false
+        this.showModule.tel = false
+      }
+      if(this.infoMap.type!=='1'){
+        this.showModule.desc = true
+      }else{
+        this.showModule.desc = false
+      }
+      if(this.infoMap.type === '3' || this.infoMap.type === '4'){
+        this.showModule.name =true
+        this.showModule.deliveryAddress = true
+
+      }else{
+        this.showModule.name = false
+        this.showModule.deliveryAddress = false
+      }
+      if(this.infoMap.type === '1' || this.infoMap.type === '2'){
+        this.showModule.email = true
+      }else{
+        this.showModule.email = false
+      }
+      if(this.infoMap.type === '1' || this.infoMap.type === '3'){
+        this.requireds.bankCode = false
+        this.requireds.bank =false
+        this.requireds.unitAddress = false
+        this.requireds.tel = false
+        
+        if(!this.infoMap.bankCode){
+          this.infoCheckMap.bankCode = ''
+        }
+        this.infoCheckMap.bank =''
+        this.infoCheckMap.unitAddress = ''
+        if(!this.infoMap.tel){
+          this.infoCheckMap.tel = ''
+        }
+        
+      }else{
+        this.requireds.bankCode = true
+        this.requireds.bank =true
+        this.requireds.unitAddress = true
+        this.requireds.tel = true
+
+      }
+
+    },
+    invoiceHeaderFilter(val) {
+      if (val === '1') {
+        return '个人'
+      } else if (val === '2') {
+        return '单位'
+      }
+    },
+    typeFilter(val) {
+      if (val === '1') {
+        return '电子普通发票'
+      } else if (val === '2') {
+        return '电子专用发票'
+      } else if (val === '3') {
+        return '纸质普通发票'
+      } else if (val === '4') {
+        return '纸质专用发票'
+      }
+    },
+    checkPhone(val) {
+      return /^1[3-9]\d{9}$/.test(val) || /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/.test(val)
+    },
+    highlightText (value, keyStr) {
+      return replaceKeyword(value, keyStr, '<span class="highlight-text">' + keyStr + '</span>')
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.Invoicing{
+ background: #F5F6F7;
+}
+.redstar{
+  
+}
+.redstar::after{
+    // position: absolute;
+    left: 0;
+    color: #ee0a24;
+    font-size: 16px;
+    content: '*';
+    margin-left: 2px;
+  }
+.header {
+  padding: 16px 12px 14px 24px;
+  background-color: #fff;
+  .item{
+    min-height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .text_box{
+      display: flex;
+    }
+    .title{
+       font-size: 14px;
+       font-weight: 400;
+       line-height: 20px;
+      letter-spacing: 0em;
+      color: #9B9CA3;
+    }
+    .value{
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: 0em;
+      color: #171826;
+      word-wrap: break-word;
+      max-width: 215px;
+    }
+    .rightBtn{
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #2ABED1;
+      
+    }
+    
+  }
+}
+.j-body {
+  flex: 1;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  padding: 0 12px 19px 12px;
+}
+
+.j-bottom {
+  .b-desc {
+    text-align: justify;
+    font-size: 13px;
+    color: #FF9F40;
+    padding: 7px 12px;
+    line-height: 20px;
+    background-color: #FFF4E8;
+  }
+
+  .j-button-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 8px 16px 46px 16px;
+    background-color: #fff;
+  }
+
+  .j-button-confirm {
+    color: #fff;
+    background-color: #2cb7ca;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    width: 100%;
+    height: 46px;
+    font-size: 18px;
+    line-height: inherit;
+    text-align: center;
+    border-radius: 8px;
+    outline: none;
+    border: 0;
+    appearance: none;
+
+  }
+
+  button[disabled] {
+    opacity: 0.5;
+  }
+}
+.mt-10{
+  margin-top: 10px;
+}
+.j-content {
+  background-color: #fff;
+  margin-top: 12px;
+  border-radius: 8px;
+  .item-box-type{
+    display: flex;
+    padding: 16px 0 2px 16px;
+    position: relative;
+  }
+  .item-box-type::after{
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0;
+    bottom: 0;
+    left: 16px;
+    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+  .companybox{
+    position: relative;
+  }
+  .companybox::after{
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0;
+    bottom: 0;
+    left: 16px;
+    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+  .item-box-title{
+    font-family: PingFang SC;
+font-size: 15px;
+font-weight: 400;
+line-height: 22px;
+letter-spacing: 0em;
+text-align: left;
+color: #5F5E64;
+width: 80px;
+  }
+
+.van-cell {
+  padding: 15px 16px;
+  background-color: #fff0;
+}
+.van-cell::after {
+  right: 0;
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
+}
+::v-deep{
+  .van-cell__title.van-field__label{
+    font-size: 15px;
+    margin-right: 0;
+    width: 80px;
+    color: #5F5E64;
+  }
+  .van-field__body{
+    font-size: 16px;
+  }
+  .van-field__control::placeholder{
+    font-weight: 400;
+    color: #C0C4CC;
+  }
+  .van-cell--required::before{
+   display: none;
+
+  }
+  .van-cell--required span::after{
+    // position: absolute;
+    left: 0;
+    color: #ee0a24;
+    font-size: 16px;
+    content: '*';
+    margin-left: 2px;
+  }
+
+}
+}
+.associate-ent-group {
+  position: absolute;
+  top: 36px;
+  left: 46px;
+  width: 287px;
+  max-height: 245px;
+  z-index: 99;
+  background: #FFFFFF;
+  box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08);
+  border-radius: 4px;
+  padding-left: 16px;
+  overflow-y:scroll;
+}
+ .associate-ent-group .associate-ent-item {
+  // font-family: PingFang SC;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: #171826;
+  padding: 14px 16px;
+  padding-left: 0;
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
+}
+.associate-ent-group .associate-ent-item:last-child {
+  border-bottom-color: transparent;
+}
+.highlight-text {
+    color: #2cb7ca!important;
+}
+</style>

src/views/invoice/viewInvoice.vue

@@ -0,0 +1,561 @@
+<template>
+  <div class="Invoicing">
+    <div class="header">
+      <p class="rightBtn" @click="tipShow = true">开票规则</p>
+      <Progress :active="status" :steps="steps"></Progress>
+    </div>
+    <div class="j-body">
+      <div class="j-content">
+        <h1 class="title-module">发票信息</h1>
+        <van-field v-model.trim="infoMap.code" label="订单编号：" readonly type="textarea" rows="1" autosize></van-field>
+        <van-field :value ="infoMap.type | typeFilter" label="发票类型：" readonly type="textarea" rows="1" autosize></van-field>
+
+        <van-field v-model.trim="infoMap.content" label="发票内容：" readonly></van-field>
+
+        <van-field :value="infoMap.invoiceHeader | invoiceHeaderFilter" label="发票抬头：" readonly type="textarea" rows="1"
+          autosize></van-field>
+
+        <van-field v-model.trim="infoMap.company" label="公司名称：" maxlength="50" :required="requireds.company"
+          v-if="showModule.company" type="textarea" rows="1" autosize readonly></van-field>
+
+        <van-field v-model.trim="infoMap.dutyparagraph" label="单位税号：" :required="requireds.dutyparagraph"
+          v-if="showModule.dutyparagraph" type="textarea" rows="1" autosize readonly></van-field>
+
+        <van-field v-model.trim="infoMap.unitAddress" label="单位地址：" :required="requireds.unitAddress"
+          v-if="showModule.unitAddress" type="textarea" rows="1" autosize readonly></van-field>
+
+        <van-field v-model.trim="infoMap.tel" label="电话号码：" :required="requireds.tel" v-if="showModule.tel"
+          readonly></van-field>
+
+        <van-field v-model.trim="infoMap.bank" label="开户银行：" :required="requireds.bank" v-if="showModule.bank"
+          type="textarea" rows="1" autosize readonly></van-field>
+
+        <van-field v-model.trim="infoMap.bankCode" label="银行账号：" :required="requireds.bankCode" v-if="showModule.bankCode"
+          type="textarea" rows="1" autosize readonly></van-field>
+
+        <van-field v-model.trim="infoMap.desc" label="开票备注：" :required="requireds.desc" v-if="showModule.desc"
+          type="textarea" rows="1" autosize readonly></van-field>
+      </div>
+      <div class="j-content">
+        <van-field v-model.trim="infoMap.name" label="收件人：" :required="requireds.name" v-if="showModule.name"
+          readonly></van-field>
+
+        <van-field v-model.trim="infoMap.phone" label="联系电话：" :required="requireds.phone" readonly></van-field>
+
+        <van-field v-model.trim="infoMap.deliveryAddress" label="收件地址：" :required="requireds.deliveryAddress"
+          type="textarea" rows="1" autosize v-if="showModule.deliveryAddress" readonly></van-field>
+
+        <van-field v-model.trim="infoMap.email" label="电子邮箱：" :required="requireds.email" type="textarea" rows="1"
+          autosize v-if="showModule.email" readonly></van-field>
+      </div>
+    </div>
+    <div class="j-bottom">
+      <p class="b-desc">{{ desc }}</p>
+      <div class="j-button-group">
+        <button :class="{ 'j-button-confirm': true, 'grey': btntext === '开票中' }" @click="confirm_ok"
+          :disabled="btntext === '开票中'">{{ btntext }}</button>
+      </div>
+    </div>
+    <popupTip v-model="tipShow"
+      text="开票规则：<br>1.平台提供电子普通发票、电子专用发票、纸质普通发票、纸质专用发票，开票内容统一为“信息技术服务-技术服务费”。<br>2.您申请的电子发票将在3个工作日内由平台开具并发送至您的邮箱，请注意查收；您申请的纸质发票将在25个工作日内由平台开具并邮寄给您，请注意查收，开票金额<200元发票邮寄费用自行承担；<br>3.如有问题可联系客服，客服电话：400-108-6670。">
+    </popupTip>
+    <popupTip v-model="logisticsShow">
+      <div class="logistics">
+        <div class="logistics_title">查看物流</div>
+        <div class="logistics_content">
+          <div class="logistics_item"><span class="logistics_key">物流公司：</span><span class="logistics_val">顺丰快递</span>
+          </div>
+          <div class="logistics_item"><span class="logistics_key">快递编号：</span><span class="logistics_val">{{logistics_code}}</span><span
+              class="logistics_btn" @click="copy_(logistics_code)">复制</span></div>
+        </div>
+      </div>
+    </popupTip>
+  </div>
+</template>
+<script>
+import { ajaxInvoiceQuery } from '@/api/modules'
+import { copyText } from '@/utils/'
+import { Field, Icon, Button } from 'vant'
+import popupTip from '@/components/invoice/popupTip'
+import radioGroup from '@/components/invoice/radioGroup'
+import Progress from '@/views/order/components/dataexport/DataExportProgress'
+export default {
+  name: 'viewInvoice',
+  components: {
+    [Field.name]: Field,
+    [Icon.name]: Icon,
+    [Button.name]: Button,
+    popupTip,
+    radioGroup,
+    Progress
+  },
+  data() {
+    return {
+      steps:[
+        {
+          text: '已提交'
+        },
+        {
+          text: '财务处理'
+        },
+        {
+          text: '发票开具'
+        }
+      ],
+      status: 2,
+      tipShow: false,
+      logisticsShow: false,
+      infoMap: {
+        code: '',
+        price: '',
+        type: '1',
+        invoiceHeader: '2',
+        content: '信息技术服务-技术服务费',
+        company: '',
+        dutyparagraph: '',
+        unitAddress: '',
+        phone: '',
+        bank: '',
+        bankCode: '',
+        desc: '',
+        tel: '',
+        email: '',
+        deliveryAddress: '',
+        name: '',
+      },
+      showModule: {
+        company: false,
+        dutyparagraph: false,
+        bankCode: false,
+        bank: false,
+        tel: false,
+        unitAddress: false,
+        desc: false,
+        name: false,
+        phone: true,
+        deliveryAddress: false,
+        email: false
+      },
+      requireds: {
+        company: false,
+        dutyparagraph: false,
+        unitAddress: false,
+        phone: false,
+        bank: false,
+        bankCode: false,
+        desc: false,
+        tel: false,
+        email: false,
+        deliveryAddress: false,
+        name: false,
+      },
+      logistics_code:'',
+      url:'',
+      onlyIdentifying:'',
+      invoiceMoney:'',
+      operator:''
+
+    }
+  },
+  computed: {
+    btntext() {
+      if (this.status === 2) {
+        return '开票中'
+      }
+      if (this.infoMap.type === '1' || this.infoMap.type === '2') {
+        return '查看发票'
+      }
+      if (this.infoMap.type == '3' || this.infoMap.type == '4') {
+        return '查看物流'
+      }
+    },
+    desc() {
+      if (this.infoMap.type === '1' || this.infoMap.type === '2') {
+        return '您申请的发票将在3个工作日内由平台开具并发送至您的邮箱，请注意查收。'
+      } else if ((this.infoMap.type == '3' || this.infoMap.type == '4') && this.infoMap.price >= 200) {
+        return '您申请的发票将在25个工作日由平台开具并邮寄给您，请注意查收。'
+      } else if ((this.infoMap.type == '3' || this.infoMap.type == '4') && this.infoMap.price < 200) {
+        return '您申请的发票将在25个工作日由平台开具并邮寄给您，请注意查收，另开票金额＜200元，发票邮寄费用需您自行承担。'
+      }
+    },
+
+
+  },
+  filters: {
+    invoiceHeaderFilter(val) {
+      if (val === '1') {
+        return '个人'
+      } else if (val === '2') {
+        return '单位'
+      }
+    },
+    typeFilter(val) {
+      if (val === '1') {
+        return '电子普通发票'
+      } else if (val === '2') {
+        return '电子专用发票'
+      } else if (val === '3') {
+        return '纸质普通发票'
+      } else if (val === '4') {
+        return '纸质专用发票'
+      }
+    }
+  },
+    created() {
+      this.initData()
+
+    },
+    mounted() {
+
+    },
+    methods: {
+      initData(){
+      let {onlyIdentifying,invoiceMoney,operator} = this.$route.query
+      this.onlyIdentifying=onlyIdentifying?onlyIdentifying:''
+      this.invoiceMoney=invoiceMoney?invoiceMoney:''
+      this.operator=operator?operator:''
+      const loading = this.$toast.loading({ duration: 0, message: 'loading...' })
+      ajaxInvoiceQuery({
+        onlyIdentifying:this.onlyIdentifying,
+        invoiceMoney:this.invoiceMoney,
+        operator:this.operator
+      }).then(res=>{
+        loading.clear()
+        if(res.data){
+          this.infoMap.code = res.data.orderCodes?res.data.orderCodes:''
+          this.infoMap.price = res.data.money?res.data.money/100:0
+          if(res.data.invoice){
+            if(res.data.invoice.invoice_status === 1){
+              this.status = 3  
+            }else{
+              this.status = 2
+            }
+            this.infoMap.type = this.DigitstoChinese_type(res.data.invoice.invoice_variety)
+            this.infoMap.content = res.data.invoice.invoice_content
+            this.infoMap.invoiceHeader = this.DigitstoChinese_invoiceHeader(res.data.invoice.invoice_type)
+            this.infoMap.company = res.data.invoice.company_name || '--'
+            this.infoMap.dutyparagraph = res.data.invoice.taxpayer_identnum || '--'
+            this.infoMap.unitAddress = res.data.invoice.company_address || '--'
+            this.infoMap.tel = res.data.invoice.company_phone || '--'
+            this.infoMap.bank = res.data.invoice.bank_name || '--'
+            this.infoMap.bankCode = res.data.invoice.bank_account || '--'
+            this.infoMap.desc = res.data.invoice.remark || '--'
+            this.infoMap.name = res.data.invoice.recipient || '--'
+            this.infoMap.phone = res.data.invoice.phone || '--'
+            this.infoMap.email = res.data.invoice.mail || '--'
+            this.infoMap.deliveryAddress = res.data.invoice.delivery_address || '--'
+            this.url = res.data.invoice.url
+            this.logistics_code = res.data.invoice.logistics_code? res.data.invoice.logistics_code : ''
+            this.initshowModule()
+          }    
+        }
+      })  
+    },
+      confirm_ok() {
+        if (this.btntext === '查看发票') {
+          if (this.infoMap.type === '2' || (this.infoMap.type === '1' && this.infoMap.price >= 10000)) {
+            location.href = this.url
+          } else {
+            const eleLink = document.createElement("a"); // 新建A标签
+            eleLink.href = this.url; // 下载的路径
+            eleLink.download = ''; // 设置下载的属性，可以为空
+            eleLink.style.display = "none";
+            document.body.appendChild(eleLink);
+            eleLink.click(); // 触发点击事件
+            document.body.removeChild(eleLink);
+          }
+        } else {
+          this.logisticsShow = true
+        }
+      },
+      initshowModule() {
+        if (this.infoMap.invoiceHeader === '2') {
+          this.showModule.company = true
+          this.showModule.dutyparagraph = true
+          this.showModule.bankCode = true
+          this.showModule.bank = true
+          this.showModule.unitAddress = true
+          this.showModule.tel = true
+        } else {
+          this.showModule.company = false
+          this.showModule.dutyparagraph = false
+          this.showModule.bankCode = false
+          this.showModule.bank = false
+          this.showModule.unitAddress = false
+          this.showModule.tel = false
+        }
+        if (this.infoMap.type !== '1') {
+          this.showModule.desc = true
+        } else {
+          this.showModule.desc = false
+        }
+        if (this.infoMap.type === '3' || this.infoMap.type === '4') {
+          this.showModule.name = true
+          this.showModule.deliveryAddress = true
+
+        } else {
+          this.showModule.name = false
+          this.showModule.deliveryAddress = false
+        }
+        if (this.infoMap.type === '1' || this.infoMap.type === '2') {
+          this.showModule.email = true
+        } else {
+          this.showModule.email = false
+        }
+      },
+      copy_(code) {
+        if (!code) {
+          this.$toast('暂无快递单号')
+          return
+        }
+        copyText(code)
+        this.$toast('快递单号复制成功')
+      },
+      DigitstoChinese_invoiceHeader(val) {
+      if (val === '个人') {
+        return '1'
+      } else if (val === '单位') {
+        return '2'
+      }
+    },
+     DigitstoChinese_type(val) {
+      if (val === '电子普通发票') {
+        return '1'
+      } else if (val === '电子专用发票') {
+        return '2'
+      } else if (val === '纸质普通发票') {
+        return '3'
+      } else if (val === '纸质专用发票') {
+        return '4'
+      }
+     }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.Invoicing {
+  background: #F5F6F7;
+}
+
+.logistics {
+  .logistics_title {
+    font-size: 18px;
+    color: #171826;
+    text-align: center;
+    margin-bottom: 24px;
+  }
+
+  .logistics_content {
+
+    .logistics_item {
+      margin-bottom: 5px;
+
+      .logistics_key {
+        font-size: 14px;
+        color: #5F5E64;
+        line-height: 20px;
+
+      }
+
+      .logistics_val {
+        font-size: 14px;
+        color: #171826;
+        line-height: 20px;
+        word-wrap: break-word;
+      }
+
+      .logistics_btn {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #2ABED1;
+        margin-left: 5px;
+      }
+    }
+  }
+}
+
+.header {
+  padding:  6px 6px 12px 6px;
+  background-color: #fff;
+
+  .item {
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: 0em;
+      color: #9B9CA3;
+    }
+
+    .value {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: 0em;
+      color: #171826;
+    }
+  }
+  .rightBtn {
+      text-align: right;
+      padding-right: 6px;
+      box-sizing: border-box;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #2ABED1;
+    }
+}
+
+.j-body {
+  flex: 1;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  padding: 0 12px 19px 12px;
+}
+
+.j-bottom {
+  .b-desc {
+    text-align: justify;
+    font-size: 13px;
+    color: #FF9F40;
+    padding: 7px 12px;
+    line-height: 20px;
+    background-color: #FFF4E8;
+  }
+
+  .j-button-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 8px 16px 46px 16px;
+    background-color: #fff;
+  }
+
+  .j-button-confirm {
+    color: #fff;
+    background-color: #2cb7ca;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    width: 100%;
+    height: 46px;
+    font-size: 18px;
+    line-height: inherit;
+    text-align: center;
+    border-radius: 8px;
+    outline: none;
+    border: 0;
+    appearance: none;
+
+  }
+
+  button[disabled] {
+    opacity: 0.5;
+  }
+}
+
+.grey {
+  // color: #5f5e64!important;
+  // background-color: #edeff2!important;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.j-content {
+  background-color: #fff;
+  margin-top: 12px;
+  border-radius: 8px;
+
+  .title-module {
+    font-size: 18px;
+    line-height: 26px;
+    padding: 16px 16px 6px;
+    color: #171826;
+    font-weight: bold;
+  }
+
+  .item-box-type {
+    display: flex;
+    padding: 16px 0 2px 16px;
+    position: relative;
+  }
+
+  .item-box-type::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0;
+    bottom: 0;
+    left: 16px;
+    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+
+  .item-box-title {
+    font-family: PingFang SC;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #5F5E64;
+    width: 80px;
+  }
+
+  .van-cell {
+    padding: 10px 16px;
+    background-color: #fff0;
+  }
+
+  .van-cell::after {
+    right: 0;
+    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
+  }
+
+  ::v-deep {
+    .van-cell__title.van-field__label {
+      font-size: 15px;
+      margin-right: 0;
+      width: 80px;
+      color: #5F5E64;
+    }
+
+    .van-field__body {
+      font-size: 16px;
+    }
+
+    .van-field__control::placeholder {
+      font-weight: 400;
+      color: #C0C4CC;
+    }
+
+    .van-cell--required::before {
+      display: none;
+
+    }
+
+    .van-cell--required span::after {
+      // position: absolute;
+      left: 0;
+      color: #ee0a24;
+      font-size: 16px;
+      content: '*';
+      margin-left: 2px;
+    }
+
+  }
+}</style>

src/views/order/components/dataexport/DataExportProgress.vue

@@ -16,11 +16,11 @@ export default {
     active: {
       type: Number,
       default: 1
-    }
-  },
-  data () {
-    return {
-      steps: [
+    },
+    steps: {
+      type: Array,
+      default () {
+        return [
         {
           icon: 'icon-shaixuan',
           text: '条件筛选'
@@ -34,6 +34,13 @@ export default {
           text: '数据导出'
         }
       ]
+      }
+
+    }
+  },
+  data () {
+    return {
+      
     }
   }
 }