发票

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/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