发票

src/assets/styles/common.css

@@ -161,6 +161,12 @@ page {
 .text-info{
 	color:#b1b7cf;
 }
+.text-black{
+	color: black;
+}
+.text-red{
+	color: red;
+}
 .bg-white{
 	background-color: #FFF;
 }
@@ -489,9 +495,6 @@ page {
 .q-pt-md{
 	padding-top: 12px;
 }
-.q-pb-md{
-	padding-bottom: 10px;
-}
 .q-ma-lg{
 	margin:20px
 }
@@ -598,9 +601,15 @@ page {
 .fz12{
 	font-size: 12px;
 }
+.fz13{
+	font-size: 13px;
+}
 .fz14{
 	font-size: 14px;
 }
+.fz15{
+	font-size: 15px;
+}
 .fz16{
 	font-size: 16px;
 }

src/services/OrderService.ts

@@ -3,6 +3,22 @@ import Api,{ HttpResponse, Result } from './../utils/request';
 
 class OrderService{
 
+    static async GetUserDutyParagraph():Promise<HttpResponse>{
+        return Api.Post("ppt_GetUserDutyParagraph",{})
+    }
+
+    static async GetPPTUserInvoicePage(pageIndex:number,pageSize:number):Promise<HttpResponse>{
+        let msg = {
+            pageIndex,
+            pageSize
+        }
+        return Api.Post("ppt_GetPPTUserInvoicePage",msg)
+    }
+
+    static async SetPPTUserInvoice(params:any):Promise<HttpResponse>{
+        return Api.Post("ppt_SetPPTUserInvoice",params)
+    }
+
     static async CreatePPTPayOrder(orderid:Number):Promise<HttpResponse>{
         let msg = {orderid}
         return Api.Post("ppt_CreatePPTPayOrder",msg)

src/views/TemplateCenter/Layout.vue

@@ -16,7 +16,7 @@
         <div class="col row">
             <div class="user-center-menu column ">
                 <el-menu :default-active="activeIndex" class="no-border md-menu col" router>
-                    <el-menu-item :index="i" v-for="(x,i) in menus" :key="i" :route="x.url">
+                    <el-menu-item :index="`${i}`" v-for="(x,i) in menus" :key="i" :route="x.url">
                         <component :is="x.icon" style="font-size: 20px;"></component>
                         <span class="q-ml-lg">{{ x.name }}</span>
                     </el-menu-item>

src/views/UserCenter/Layout.vue

@@ -12,8 +12,8 @@
         </div>
         <div class="col row">
             <div class="user-center-menu column ">
-                <el-menu :default-active="activeIndex" class="no-border md-menu col" router>
-                    <el-menu-item :index="i" v-for="(x,i) in menus" :key="i" :route="x.url">
+                <el-menu :default-active="String(activeIndex)" class="no-border md-menu col" router>
+                    <el-menu-item :index="`${i}`" v-for="(x,i) in menus" :key="i" :route="x.url">
                         <component :is="x.icon" style="font-size: 20px;"></component>
                         <span class="q-ml-lg">{{ x.name }}</span>
                     </el-menu-item>

src/views/UserCenter/Order.vue

@@ -6,8 +6,17 @@
       <el-tab-pane label="已完成" name="finish"></el-tab-pane>
       <el-tab-pane label="待开票" name="invoice"></el-tab-pane>
       <el-tab-pane label="历史发票" name="invoiceHistory"></el-tab-pane>
-      <div class="order-bar rounded row">
-        <div class="item" style="width: 280px !important; min-width: 280px; text-align: left;">商品信息</div>
+      <div v-if="activeName!='invoiceHistory'" class="order-bar rounded row">
+        <div class="item" style="width: 280px !important; min-width: 280px; text-align: left;"
+        :class="[activeName=='invoice'?'cursor-pointer':'']"
+        @click="activeName=='invoice'?(datas.selectAll=!datas.selectAll,setSelecAll()):''">
+          <el-checkbox v-if="activeName=='invoice'&&orders.length>0" class="fz14" 
+          label="全选" v-model="datas.selectAll" 
+          :indeterminate="datas.indeterminate"
+          @click.stop=""
+          @change="setSelecAll" :disabled="orders.length==0"
+          style="position: relative;top: 2px;"/>
+          商品信息</div>
         <div class="item col">时长</div>
         <div class="item col" >单价</div>
         <div class="item col">数量</div>
@@ -16,16 +25,48 @@
         </div>
         <div class="item col">实付款</div>
         <div class="item col">订单状态</div>
-        <div class="item">操作</div>
+        <div class="item row items-center">
+          
+          <el-tooltip v-if="activeName=='invoice'&&orders.length>0"
+            class="box-item"
+            effect="dark"
+            content="发票"
+            placement="top"
+          >
+            <el-button link class="q-ml-md" @click="MakeOutInvoice">
+              <el-icon><Printer /></el-icon>
+            </el-button>
+          </el-tooltip>
+          <span v-else>操作</span>
+        </div>
+      </div>
+      <div v-else class="order-bar rounded row order-InvoiceH">
+        <div class="item" style="width: 180px !important; min-width: 180px; text-align: left;">
+          申请时间
+        </div>
+        <div class="item" style="width: 200px !important; min-width: 200px;">抬头</div>
+        <div class="item col" >开票金额</div>
+        <div class="item col">税号</div>
+        <!-- <div class="item none-width">
+          <div style="background-color: rgba(0,0,0,.08);width:1px">&nbsp;</div>
+        </div> -->
+        <div class="item col">联系邮箱</div>
+        <div class="item col">开具方式 </div>
+        <div class="item row items-center">
+          操作
+        </div>
       </div>
     </el-tabs>
 
-    <template v-if="orders && orders.length>0 && !loading">
+    <template v-if="activeName!='invoiceHistory'&&orders && orders.length>0 && !loading">
       <div v-loading="CancelLoading">
         <div class="order-body q-mt-lg" v-for="x in orders" :key="x.orderid">
           <div class="order-item rounded">
-  
-            <div class="title">
+            <div class="title" @click="activeName=='invoice'?getCheck(x,1):''"
+            :class="[activeName=='invoice'?'cursor-pointer':'']">
+              <el-checkbox v-if="activeName=='invoice'" class="fz14 q-pr-md" v-model="x.check" 
+                @click.stop="getCheck(x)"
+                style="position: relative;top: 2px;"/>
               <span>{{ x.create }}</span>
               <span class="q-ml-md">{{ x.ordernum }}</span>
             </div>
@@ -53,7 +94,7 @@
                 <el-button  link  @click="forwardOrderDetail(x.orderid)">订单详情</el-button>
               </div>
               <div class="item column">
-                <el-button type="primary" v-if="x.status==2">发票</el-button>
+                <el-button type="primary" v-if="x.status==2&&!x.invoiceId" @click="MakeOutInvoice(x)">发票</el-button>
                 <br />
                 <el-button type="default" v-if="x.status==2" @click="redicetTo('https://work.weixin.qq.com/kfid/kfc378aada578ca8b0e')">售后</el-button>
                 <el-button type="warning" v-if="x.status==1" @click="goControls(1,x.orderid)">支付</el-button>
@@ -67,21 +108,61 @@
       </div>
       
     </template>
+    <template v-if="activeName=='invoiceHistory'&&orders && orders.length>0 && !loading">
+      <div v-loading="CancelLoading">
+        <div class="order-body order-InvoiceC" v-for="x in orders" :key="x.orderid">
+          <div class="order-item">
+  
+            <div class="bg-white row items-center">
+              <div class="item row items-center"  style="width: 180px !important; min-width: 180px; text-align: left;padding:24px;">
+                <div>{{ x.CreateTime }}</div>
+              </div>
+              <div class="item" style="width: 200px !important; min-width: 200px;">
+                {{ x.InvoiceTitle }}
+              </div>
+              <div class="item col"> 
+                <div class="text-weight-bold q-mb-sm" style="font-size: 16px">¥ {{x.Money.toFixed(2)}}</div>
+              </div>
+              <div class="item col">{{x.InvoiceTaxNo}}</div>
+              <!-- <div class="item none-width">
+                <div style="background-color: rgba(0,0,0,.08);width:1px;height:72px;">&nbsp;</div>
+              </div> -->
+              <div class="item col">
+                {{ x.Email }}
+              </div>
+              <div class="item col">
+                {{ x.IssuedType==1?'电子普通发票':'增值税专用发票' }}
+              </div>
+              <div class="item">
+                <el-button @click="getInvoiceDetails(x)">详情</el-button>
+              </div>
+            </div>
+  
+          </div>
+        </div>
+      </div>
+    </template>
     <div v-if="loading" style="height: 200px;margin-top: 100px;" v-loading="loading"></div>
     <div v-if="(!orders || orders.length==0) && !loading">
       <el-empty class="q-ma-xl" description="暂无数据" />
     </div>
   </div>
-  <WePay v-if="showPay" :orderid="orderid" @close="showPay=false" @success="showPay=false"></WePay> 
+  <openInvoice :show="showOpenInvoice" :InvoiceDatas="InvoiceDatas" 
+  @close="showOpenInvoice=false" 
+  @success="successInvoice"></openInvoice> 
+  <Invoice :show="showInvoice" :InvoiceDetails="InvoiceDetails" 
+  @close="showInvoice=false"></Invoice> 
 </template>
 
 <script lang="ts" setup>
 import { ApiResult } from "@/configs/axios";
 import OrderService from "@/services/OrderService";
-import { ref, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { openNewBlank } from '@/utils/common'
 import WePay from '@/components/Pay/WePay.vue'
+import openInvoice from './components/openInvoice.vue'
+import Invoice from './components/InvoiceDetails.vue'
 import { ElMessageBox } from "element-plus";
 const activeName = ref<string>('all')
 const parameters = ref({
@@ -91,7 +172,11 @@ const parameters = ref({
   endtime:'',
   orderstatus:0
 })
-const orders = ref<any[]>()
+const datas = reactive({
+    selectAll: false,
+    indeterminate: false,// 未全选状态
+})
+const orders = ref<any[]>([])
 const orderid = ref<Number>(0)
 const count = ref(0)
 const loading = ref(false)
@@ -99,6 +184,128 @@ const router = useRouter()
 const showPay = ref(false)
 const orderRef = ref<any>()
 const CancelLoading = ref(false)
+const showOpenInvoice = ref(false)
+const showInvoice = ref(false)
+const InvoiceDatas = reactive({
+  total: 0,
+  Ids: [],
+  orderid: [],
+  isMore: 0,
+} as any)
+const InvoiceDetails = ref({})
+
+const getInvoiceDetails = (item:any) => {
+  InvoiceDetails.value = item
+  showInvoice.value = true
+}
+
+const successInvoice = () => {
+  showOpenInvoice.value = false
+  datas.selectAll = false
+  datas.indeterminate = false
+  InvoiceDatas.Ids = []
+  InvoiceDatas.orderid = []
+  search()
+}
+
+const MakeOutInvoice = (item:any) => {
+  SumUp()
+  if(item&&item.orderid){
+    InvoiceDatas.orderid = []
+    InvoiceDatas.isMore = 0
+    InvoiceDatas.total = item.price
+    InvoiceDatas.orderid.push(item.orderid)
+  }else{
+    InvoiceDatas.isMore = 1
+    if(InvoiceDatas.Ids.length==0) return ElMessage.warning({
+        showClose: true,
+        message: `请勾选需要发票的数据`,
+      })
+    
+  }
+  showOpenInvoice.value = true
+}
+
+const getCheck = (item:any,type:any) => {
+  if(type) item.check = !item.check
+  let filter = InvoiceDatas.Ids.filter(x=>x==item.orderid)
+  if(filter.length==0&&(!item.check||item.check)) {
+    InvoiceDatas.Ids.push(item.orderid)
+  }else {
+    let newIds = InvoiceDatas.Ids.filter(x=>x!=item.orderid)
+    InvoiceDatas.Ids = newIds
+  }
+  CheckStatus() 
+}
+
+const CheckStatus = () => {
+  if(InvoiceDatas.Ids.length==0) {
+    datas.selectAll = false
+    datas.indeterminate = false
+  }else if(InvoiceDatas.Ids.length>0){
+    if(orders.value.length==InvoiceDatas.Ids.length){
+      datas.selectAll = true
+      datas.indeterminate = false
+    }else if(orders.value.length>InvoiceDatas.Ids.length){
+      datas.selectAll = false
+      datas.indeterminate = true
+    }
+  }
+}
+
+const setSelecAll = () => {
+  if(datas.selectAll||datas.indeterminate) {
+    InvoiceDatas.Ids = orders.value.map(x=>{return x.orderid})
+    orders.value.forEach(y=>{
+      y.check = true
+    })
+    if(datas.indeterminate) datas.selectAll = true
+    datas.indeterminate = false
+  }else {
+    orders.value.forEach(y=>{
+      y.check = false
+    })
+    InvoiceDatas.Ids = []
+    datas.indeterminate = false
+  }
+}
+
+const SumUp = () => {
+  if(InvoiceDatas.Ids.length>0){
+    let total = 0
+    for(let i=0;i<orders.value.length;i++){
+      let filter = InvoiceDatas.Ids.filter(x=>x==orders.value[i].orderid)
+      if(filter.length>0) total+=(orders.value[i].price*100)
+    }
+    InvoiceDatas.total = total/100
+  }
+}
+
+const newDatasSelected = () =>{
+    if(InvoiceDatas.Ids.length==0) {
+      for(let i=0;i<orders.value.length;i++){
+        orders.value[i].check = false
+      }
+      datas.selectAll = false
+      datas.indeterminate = false
+    }else if(InvoiceDatas.Ids.length>0){
+      if(orders.value.length==InvoiceDatas.Ids.length){
+        for(let i=0;i<orders.value.length;i++){
+          orders.value[i].check = true
+        }
+        datas.selectAll = true
+        datas.indeterminate = false
+      }else if(orders.value.length>InvoiceDatas.Ids.length){
+        for(let i=0;i<orders.value.length;i++){
+          let x = orders.value[i]
+          let findObj = InvoiceDatas.Ids.find(y=> y==x.orderid)
+          if(findObj) orders.value[i].check = true
+        }
+        datas.selectAll = false
+        datas.indeterminate = true
+      }
+    }
+  }
 
 const goControls = (type:Number,id:any) => {
   orderid.value = id
@@ -133,11 +340,27 @@ const CanceltOrders = async ()=>{
 const redicetTo = (url:string)=>openNewBlank(url)
   
 const tabsHandlerClick = (e:any)=>{
-  console.log(e.props.name)
+  activeName.value = e.props.name
   if(e.props.name=='all') parameters.value.orderstatus = 0
   if(e.props.name=='pay') parameters.value.orderstatus = 1
   if(e.props.name=='finish') parameters.value.orderstatus = 2
-  search()
+  if(e.props.name=='invoice') parameters.value.orderstatus = 4
+  if(e.props.name=='invoiceHistory') searchHistorical()
+  else search()
+  
+}
+
+const searchHistorical = async () => {
+  orders.value = []
+  parameters.value.pageIndex=1
+  await HistoricalInvoice()
+}
+const HistoricalInvoice = async () => {
+  const response = await OrderService.GetPPTUserInvoicePage(parameters.value.pageIndex,parameters.value.pageSize)
+  if(response.data.resultCode == ApiResult.SUCCESS){
+    orders.value = response.data.data.pageData
+    count.value = response.data.data.pageCount
+  }
 }
 
 const search = async () => {
@@ -150,12 +373,21 @@ const getOrders = async ()=>{
 
   const response = await OrderService.GetOrders(parameters.value)
   if(response.data.resultCode == ApiResult.SUCCESS){
+    let arrList = function(list){
+      list.forEach(x=>{
+        x.check = false
+      })
+    }
+    arrList(response.data.data.pageData)
     orders.value = response.data.data.pageData
     count.value = response.data.data.pageCount
     
   }
 
   loading.value=false
+  if(parameters.value.orderstatus==4){
+    newDatasSelected()
+  }
 }
 
 const scrollingHandler = () =>{
@@ -164,7 +396,8 @@ const scrollingHandler = () =>{
         let scrollTop = orderRef.value.scrollTop
         if(maxHeight - scrollTop==0 && parameters.value.pageCount > parameters.value.pageIndex) {
           parameters.value.pageIndex++
-            getOrders()
+          if(activeName.value=='invoiceHistory') HistoricalInvoice()
+          else getOrders()
         }
     }
     
@@ -175,7 +408,6 @@ const forwardOrderDetail = (id:string)=>{
 }
 
 getOrders()
-
 onMounted(()=>{
     orderRef.value.addEventListener("scroll", scrollingHandler);
 })
@@ -229,4 +461,14 @@ onMounted(()=>{
   white-space: nowrap;
   overflow: hidden;
 }
+.order-body.order-InvoiceC .order-item{
+  border: 0;
+  border-bottom: 1px solid rgba(0,0,0,.08);
+}
+.order-bar.order-InvoiceH .item, .order-body.order-InvoiceC .order-item .item{
+  text-overflow: ellipsis;
+}
+.order-bar.order-InvoiceH .item,.order-body.order-InvoiceC .order-item .item{
+  text-align: left;
+}
 </style>
\ No newline at end of file

src/views/UserCenter/components/InvoiceDetails.vue

+<template>
+    <el-dialog v-model="dialogVisible" 
+     width="450" 
+     title="发票详情"
+    :close-on-press-escape="false" :close-on-click-modal="false"
+    @close="close">
+      <div class="InvoiceVerify">
+        <div class="InvoiceVerify-box fz14">
+            <div class="row flex-between items-center q-py-sm">
+                <span>开票金额</span>
+                <span class="text-bold">￥{{InvoiceDetails.Money.toFixed(2)}}</span>
+            </div>
+            <div class="row flex-between items-center q-py-sm">
+                <span>开具方式</span>
+                <span class="text-bold">{{InvoiceDetails.IssuedType==1?'电子普通发票':'增值税专用发票'}}</span>
+            </div>
+            <div class="row flex-between items-center q-py-sm">
+                <span>发票类型</span>
+                <span class="text-bold">{{InvoiceDetails.InvoiceType==1?'企业':'个人'}}</span>
+            </div>
+            <div class="row flex-between items-center q-py-sm">
+                <span>发票抬头</span>
+                <span class="text-bold">{{InvoiceDetails.InvoiceTitle}}</span>
+            </div>
+            <div class="row flex-between items-center q-py-sm">
+                <span>邮箱地址</span>
+                <span class="text-bold">{{InvoiceDetails.Email}}</span>
+            </div>
+        </div>
+      </div>
+      <div v-if="Orders.length>0" class="order-body q-pt-md">
+          <div class="order-item rounded">
+            <div class="title row flex-between items-center">
+              <span class="">订单</span>
+              <el-button v-if="props.InvoiceDetails.OrderList.length>1" link
+                  @clcik="MoreData">
+                  <el-icon v-if="!isMore"><ArrowRight /></el-icon>
+                  <el-icon v-else><ArrowUp /></el-icon>
+              </el-button>
+            </div>
+            <!-- :class="[!isMore||isMore?'animate__fadeInUp':'']" -->
+            <div class="animate__animated">
+              <div v-for="x in Orders" :key="x.OrderId"
+              class="order-list">
+                <div class="bg-white row flex-between q-px-md q-pt-md text-5B5D62">
+                  <span>{{ x.PayTime }}</span>
+                  <span class="q-ml-md">{{ x.OrderNum }}</span>
+                </div>
+                <div class="bg-white rounded row items-center q-pb-md">
+                    <div class="item items-center"  style="padding: 5px 10px;">
+                      <div>{{ x.PriceTypeName }}_{{ x.VipName }}</div>
+                    </div>
+                    <div class="item">{{x.InvalidName}}</div>
+                    <div class="item col text-right">¥{{ x.TradePrice.toFixed(2) }}</div>
+                  </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+        
+        <!-- <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="close">取消</el-button>
+          </div>
+        </template> -->
+      </el-dialog>
+  </template>
+  
+  <script lang="ts" setup>
+  import { ApiResult, VipType } from '@/configs/axios'
+  import { EntMemberRight, FreeMemberRight, PersonMemberRight } from '@/configs/customer'
+  import OrderService from '@/services/OrderService'
+  import { ref, onMounted, reactive, watch } from 'vue'
+  import { ElMessage, FormInstance, FormRules } from 'element-plus';
+  
+  const props = defineProps({
+    InvoiceDetails: {} as Object,
+    show: true as Boolean
+  })
+  
+  const isMore = ref(false)
+  const Orders = ref([] as any)
+  const emit = defineEmits<{
+    (event: 'close'): void,
+    (event: 'success'): void
+  }>()
+
+  const dialogVisible = ref(false)
+
+  const MoreData = () => {
+    isMore.value = !isMore.value
+    if(isMore.value) Orders.value = JSON.parse(JSON.stringify(props.InvoiceDetails.OrderList))
+    else{
+        Orders.value = []
+        Orders.value.push(props.InvoiceDetails.OrderList[0])
+    }
+  }
+  const close = ()=>{
+    emit('close')
+  }
+  
+  watch(()=>props.show,(n,o)=>{
+    if(n) {
+        Orders.value = []
+        Orders.value.push(props.InvoiceDetails.OrderList[0])
+        dialogVisible.value = true
+    }
+    else dialogVisible.value = false
+  })
+  </script>
+  
+  <style scoped>
+.InvoiceVerify-title{
+    color: #9BA1AA;
+}
+.InvoiceVerify-box{
+    border-radius: 8px;
+    background: #F6F7F9;
+    padding: 10px 20px;
+}
+.order-body{
+
+}
+.order-body .order-item{
+  background: #f6f7f9;
+  border:1px solid rgba(0,0,0,.08);
+  font-size: 14px;
+  
+}
+.order-body .order-item .title{
+  padding: 0 14px;
+  height: 35px;
+  line-height: 35px;
+  color:grey;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.order-body .order-item .item{
+  height: auto;
+  line-height: 1;
+  color: #000;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 0 10px;
+}
+.order-list{
+    border-bottom: 1px solid rgba(0,0,0,.08);
+}
+.order-list:last-child{
+    border: 0;
+}
+  </style>
\ No newline at end of file

src/views/UserCenter/components/openInvoice.vue

+<template>
+    <el-dialog v-model="dialogVisible" 
+     width="450" 
+     :show-close="StepNumber==3?false:true" 
+     :title="dialogTitle"
+    :close-on-press-escape="false" :close-on-click-modal="false"
+    @close="close">
+        <!-- 填写发票信息 -->
+        <div v-if="StepNumber==1" class="FillOutInvoice">
+            <div class="FillOutInvoice-tips fz13">
+                <p class="q-mb-md">填写须知</p>
+                <ul>
+                    <li>提交前请确认填写信息完整无误，已经开具的发票不可重开:</li>
+                    <li>增值税电子发票和纸质发票具有相同法律效力，均支持报销;</li>
+                    <li>更多问题请咨询在线客服。</li>
+                </ul>
+            </div> 
+            <el-divider border-style="dotted" />
+            <el-form ref="BillingFormRef" :model="BillingParameter" :rules="rules" label-width="85px">
+                <div class="row fz14 q-pb-md">
+                    <div class="FillOutInvoice-title q-pr-md">发票金额</div>
+                    <span class="text-bold text-red">￥{{InvoiceDatas.total.toFixed(2)}}</span>
+                </div>
+                <div class="row items-center fz14">
+                    <div class="FillOutInvoice-title shrink q-pr-md">开具方式</div>
+                    <div>
+                        <el-radio-group v-model="BillingParameter.IssuedType" @change="getBillingType">
+                            <el-radio :label="1" class="row items-center">
+                                <span class="text-black">
+                                    <span>电子普通发票</span>
+                                    <el-icon color="#9BA1AA" style="position: relative;top: 2px;left: 2px;">
+                                        <Warning style="transform: rotate(180deg);"/>
+                                    </el-icon>
+                                </span>
+                            </el-radio>
+                            <el-radio :label="2">
+                                <span class="text-black">
+                                    增值税专用发票 
+                                </span>
+                            </el-radio>
+                        </el-radio-group>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="FillOutInvoice-title shrink q-pr-md">&nbsp;</div>
+                    <div class="FillOutInvoice-InstBox col">
+                        <ol class="FillOutInvoice-Inst fz13 text-black">
+                            <template v-if="BillingParameter.IssuedType==1">
+                                <li>电子普通发票单张最高开票金额为10000元;</li>
+                                <li>若为香港、海外的公司或工会等无税号，请联系在线客服开票;</li>
+                                <li>开票申请提交后，电子普通发票将在3个工作日内发到您的邮箱。</li>
+                            </template>
+                            <template v-if="BillingParameter.IssuedType==2">
+                                <li>若为香港、海外的公司或工会等无税号，请联系在线客服开票;</li>
+                                <li>若开票失败，请耐心等待1-2工作日，我们会及时处理并开具发票。</li>
+                            </template>
+                        </ol>
+                    </div>
+                </div>
+                <div class="row items-center fz14 q-py-md">
+                    <div class="FillOutInvoice-title shrink q-pr-md">发票类型</div>
+                    <div>
+                        <p v-if="BillingParameter.IssuedType==2" class="text-black q-py-sm">
+                            企业
+                        </p>
+                        <el-radio-group v-else v-model="BillingParameter.InvoiceType">
+                            <el-radio :label="1" class="row items-center">
+                                <span class="text-black">
+                                    企业
+                                </span>
+                            </el-radio>
+                            <el-radio :label="2">
+                                <span class="text-black">
+                                    个人 
+                                </span>
+                            </el-radio>
+                        </el-radio-group>
+                    </div>
+                </div>
+                <el-form-item label="发票抬头" prop="InvoiceTitle">
+                    <el-input v-model="BillingParameter.InvoiceTitle" placeholder="例如:高小定"></el-input>
+                </el-form-item>
+                <el-form-item label="税号" prop="InvoiceTaxNo">
+                    <el-input v-model="BillingParameter.InvoiceTaxNo" placeholder="例如:1232000046600736XP"></el-input>
+                </el-form-item>
+                <el-form-item label="邮箱地址" prop="Email">
+                    <el-input v-model="BillingParameter.Email" placeholder="例如:gaoxiaoding@gaoding.com"></el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div v-if="StepNumber==2" class="InvoiceVerify">
+            <p class="InvoiceVerify-title fz14 q-pb-lg">请确认信息无误，提交后将无法修改。</p>
+            <div class="InvoiceVerify-box fz14">
+                <div class="row flex-between items-center q-py-sm">
+                    <span>开票金额</span>
+                    <span class="text-bold">￥{{InvoiceDatas.total.toFixed(2)}}</span>
+                </div>
+                <div class="row flex-between items-center q-py-sm">
+                    <span>开具方式</span>
+                    <span class="text-bold">{{BillingParameter.IssuedType==1?'电子普通发票':'增值税专用发票'}}</span>
+                </div>
+                <div class="row flex-between items-center q-py-sm">
+                    <span>发票类型</span>
+                    <span class="text-bold">{{BillingParameter.InvoiceType==1?'企业':'个人'}}</span>
+                </div>
+                <div class="row flex-between items-center q-py-sm">
+                    <span>发票抬头</span>
+                    <span class="text-bold">{{BillingParameter.InvoiceTitle}}</span>
+                </div>
+                <div class="row flex-between items-center q-py-sm">
+                    <span>邮箱地址</span>
+                    <span class="text-bold">{{BillingParameter.Email}}</span>
+                </div>
+            </div>
+        </div>
+        <div v-if="StepNumber==3" class="InvoiceResult">
+            <div class="row items-center">
+                <el-icon color="#1CCC66" size="25"><SuccessFilled /></el-icon>
+                <span class="text-black fz20 q-pl-lg">提交成功</span>
+            </div>
+            <div class="row fz14">
+                <div style="width: 25px;">&nbsp;</div>
+                <div class="q-pl-lg q-pt-md" style="color: #9BA1AA;">电子发票将在3个工作日内发送到您的邮箱。</div>
+            </div>
+        </div>
+        <template #footer>
+          <div class="dialog-footer">
+            <template v-if="StepNumber==1">
+                <el-button @click="close">取消</el-button>
+                <el-button type="primary"
+                @click="submitForm(BillingFormRef)">
+                    申请开票
+                </el-button>
+            </template>
+            <template v-if="StepNumber==2">
+                <el-button @click="StepNumber=1,dialogTitle='申请开票'">返回修改</el-button>
+                <el-button type="primary"
+                @click="setOrderInvoice" :loading="loading">
+                    确认提交
+                </el-button>
+            </template>
+            <template v-if="StepNumber==3">
+                <el-button type="primary"
+                @click="success">
+                    知道了
+                </el-button>
+            </template>
+          </div>
+        </template>
+      </el-dialog>
+  </template>
+  
+  <script lang="ts" setup>
+    import { ApiResult, VipType } from '@/configs/axios'
+    import { EntMemberRight, FreeMemberRight, PersonMemberRight } from '@/configs/customer'
+    import OrderService from '@/services/OrderService'
+    import { ref, onMounted, reactive, watch } from 'vue'
+    import { ElMessage, FormInstance, FormRules } from 'element-plus';
+    
+    const props = defineProps({
+        InvoiceDatas: {} as Object,
+        show: true as Boolean
+    })
+    
+    const emit = defineEmits<{
+        (event: 'close'): void,
+        (event: 'success'): void
+    }>()
+
+    const OrderInvoiceRef = ref()
+    const dialogVisible = ref(false)
+    const dialogTitle = ref('申请开票')
+    const StepNumber = ref(1)
+    const loading = ref(false)
+    const BillingParameter = reactive({
+        IssuedType: 1,
+        InvoiceType: 1,
+        InvoiceTitle: '',
+        InvoiceTaxNo: '',
+        Email: '',
+        OrderIds: [],
+    })
+    const BillingFormRef = ref<FormInstance>()
+    const rules = reactive<FormRules<RuleForm>>({
+        InvoiceTitle: [
+            { required: true, message: '请填写发票抬头', trigger: 'blur' },
+        ],
+        InvoiceTaxNo: [
+            { required: true, message: '请填写纳税人识别号', trigger: 'blur' },
+            { min: 6, message: '请填写正确的纳税人识别号', trigger: 'blur' },
+        ],
+        Email: [
+            { required: true, message: '请填写邮箱', trigger: 'blur' },
+            { min: 6, message: '请填写正确的邮箱', trigger: 'blur' },
+        ],
+        
+    })
+    const InvoiceInfor = ref([] as any)
+
+    const submitForm = async (formEl: FormInstance | undefined) => {
+        BillingParameter.OrderIds = props.InvoiceDatas.isMore?props.InvoiceDatas.Ids:props.InvoiceDatas.orderid
+        if (!formEl) return
+        await formEl.validate(async (valid) => {
+            if (valid) {
+                StepNumber.value = 2
+                dialogTitle.value = '发票信息确认'
+            }
+        })
+    }
+
+    const setOrderInvoice = async () => {
+        loading.value = true
+        const response = await OrderService.SetPPTUserInvoice(BillingParameter)
+        if(response.data.resultCode == ApiResult.SUCCESS){
+            StepNumber.value = 3
+            dialogTitle.value = ''
+            if (!BillingFormRef.value) return
+            BillingFormRef.value.resetFields()
+        } else ElMessage.warning({
+            showClose: true,
+            message: `${response.data.message}`,
+        })
+        loading.value = false
+    }
+    const success = () => {
+        emit('success')
+    }
+    const getBillingType = () =>{
+        if(BillingParameter.IssuedType==2) BillingParameter.InvoiceType = 1
+    }
+    const close = ()=>{
+        emit('close')
+        if (!BillingFormRef.value) return
+        BillingFormRef.value.resetFields()
+    }
+
+    const getInvoiceInfor = async () => {
+        const response = await OrderService.GetUserDutyParagraph()
+        if(response.data.resultCode == ApiResult.SUCCESS){
+            if(response.data.data.Email){
+                InvoiceInfor.value = response.data.data
+                BillingParameter.IssuedType = InvoiceInfor.value.IssuedType
+                BillingParameter.InvoiceType = InvoiceInfor.value.InvoiceType
+                BillingParameter.InvoiceTitle = InvoiceInfor.value.InvoiceTitle
+                BillingParameter.InvoiceTaxNo = InvoiceInfor.value.InvoiceTaxNo
+                BillingParameter.Email = InvoiceInfor.value.Email
+            }
+        }
+    }
+    getInvoiceInfor()
+    watch(()=>props.show,(n,o)=>{
+        if(n) {
+            StepNumber.value = 1
+            dialogVisible.value = true
+        }
+        else dialogVisible.value = false
+    })
+  </script>
+  
+  <style scoped>
+.FillOutInvoice{
+    
+}
+.FillOutInvoice-tips{
+    color: #9BA1AA;
+}
+.FillOutInvoice-tips ul{
+    padding: 0 25px;
+}
+.FillOutInvoice-tips ul li{
+    list-style: disc;
+    padding-bottom: 5px;
+}
+.FillOutInvoice-title{
+    width: 85px;
+    font-size: 14px;
+    text-align: right;
+}
+.FillOutInvoice-InstBox{
+    border-radius: 8px;
+    background: #FEF3E9;
+    border: 1px solid #FCE8D3;
+    padding: 8px 0;
+}
+.FillOutInvoice-Inst{
+    list-style-type:demical;
+    padding: 0 25px;
+}
+.InvoiceVerify-title{
+    color: #9BA1AA;
+}
+.InvoiceVerify-box{
+    border-radius: 8px;
+    background: #F6F7F9;
+    padding: 10px 20px;
+}
+  </style>
\ No newline at end of file