幸福存折

src/App.vue

@@ -143,6 +143,10 @@ export default defineComponent({
     font-size: 19px
 .fz20
     font-size: 20px
+.fz26
+    font-size: 26px
+.fz28
+    font-size: 28px
 .mycard
     box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important
     border-radius: 0.475rem !important

src/components/layout/userInfo.vue

@@ -31,6 +31,9 @@
       <q-item clickable v-ripple class="rounded-borders lang-demo">
         <q-item-section>{{ $t('userMenu.fapiao') }}</q-item-section>
       </q-item>
+      <q-item clickable v-ripple class="rounded-borders lang-demo">
+        <q-item-section @click="goUrl('/passbook')">幸福存折</q-item-section>
+      </q-item>
     </q-list>
 
     <q-separator color="grey-3" class="q-my-sm" />

src/components/passbook/passbookHead.vue

+<template>
+    <div class="banner q-pa-sm q-mt-lg" style="position: relative;">
+        <q-img src="../../assets/images/personal/bg1.png"
+        width="156px"
+        height="162px" style="position: absolute; bottom: 0px;"/> 
+        <div class="text-center" style="position: absolute; top: -27px;width: 100%;left:0;">
+                <q-img src="../../assets/images/personal/title.png"
+            width="199px"
+            height="59px"/>
+        </div>
+        <div class="row justify-between passbookHead-form">
+            <div class="column">
+                <p class="text-white" style="opacity: .5;">可用余额</p>
+                <div class="row items-end text-white">
+                    <div class="fz16">
+                        ¥
+                    </div>
+                    <div class="fz26 q-pl-sm">
+                        <span style="position: relative; top: 5px;">1298.25</span>
+                    </div>
+                    <div class="fz12 q-pl-lg cursor-pointer">
+                        使用规则
+                    </div>
+                </div>
+            </div>
+            <div class="row items-center">
+                <div class="q-pa-xs q-px-sm bg-amber-3 rounded-borders text-orange-14 passbookHeadButtom">
+                    <q-icon class="q-pr-sm" name="list"></q-icon>
+                <span class="fz14">查看明细</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+    import { useRouter } from 'vue-router';
+    import { defineComponent, ref, reactive, toRefs, provide } from 'vue'
+    import { useI18n } from 'vue-i18n'
+    export default defineComponent({
+    name: 'user-info',
+    props: {
+      user: {
+        type: Object,
+        require: true
+      }
+    },
+    setup(props) {
+      const $router = useRouter();
+      const data=reactive({
+          
+      })
+      
+      const methods = {
+          
+      }
+      return {...toRefs(data),...methods}
+    }
+  })
+  </script>
+<style>
+.banner {
+    /* width: 963px; */
+    /* height: 162px; */
+    background: -webkit-linear-gradient(left, #F0886B , #ED6A6B);
+    background:    -moz-linear-gradient(right, #F0886B, #ED6A6B);
+    background:      -o-linear-gradient(right, #F0886B, #ED6A6B);
+    background:         linear-gradient(to right, #F0886B , #ED6A6B); 
+    border-radius: 24px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    border: 6px solid #EEA376;
+    padding: 0 57px;
+}
+.passbookHead-form{
+    padding: 36px 0 37px 196px;
+}
+.passbookHeadButtom{
+    border: 2px solid #F6CA58;
+}
+</style>
\ No newline at end of file

src/components/passbook/rebate.vue

+<template>
+    <div class="bg-white q-mt-lg">
+       <rebatehead :title="title"/> 
+       <q-separator color="grey-3" class="q-my-sm" />
+        <div class="row justify-between rebate-form">
+            <div class="column rebate-left fz14">
+                <div class="row items-center left-text text-grey-9">
+                    <div>订单信息</div><div>系列</div>
+                    <div>人数</div><div>返佣</div>
+                </div>
+                <q-separator color="grey-3" />
+                <div class="column">
+                    <div 
+                    v-for="(item,index) in 3"
+                    class="row items-center left-text text-dark">
+                        <div>订单信息</div>
+                        <div>订单信息</div>
+                        <div>订单信息</div>
+                        <div><span class="text-red">+¥4.55</span></div>
+                    </div>
+                    <div class="text-center q-mt-xl q-pb-lg">
+                        <svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
+                        <div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
+                    </div>
+                </div>
+                
+            </div>
+            <div class="rebate-right">
+                111
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+    import { useRouter } from 'vue-router';
+    import { defineComponent, ref, reactive, toRefs, provide } from 'vue'
+    import { useI18n } from 'vue-i18n'
+    import rebatehead from '../../components/passbook/rebate/rebatehead.vue'
+    export default defineComponent({
+    name: 'user-info',
+    components: { rebatehead },
+    props: {
+      user: {
+        type: Object,
+        require: true
+      }
+    },
+    setup(props) {
+      const $router = useRouter();
+      const data=reactive({
+        title: '人头返佣',
+        DetailList: [],
+        cols: [
+            { name: 'Room', label: '订单信息', field: (row: any) => row.Date, align: 'left' },
+            { name: '', label: '系列', field: (row: any) => row.Date, align: 'left' },
+            { name: '', label: '人数', field: (row: any) => row.Date, align: 'left' },
+            { name: '', label: '返佣', field: (row: any) => row.Date, align: 'left' },
+        ]
+      })
+      
+      const methods = {
+          
+      }
+      return {...toRefs(data),...methods}
+    }
+  })
+  </script>
+<style>
+    .rebate-form{
+        padding: 15px 30px 0 30px;
+    }
+    .rebate-left {
+        width: 70%;
+    }
+    .left-text div{
+        display: inline-block;
+        width: 25%;
+        text-indent: 31px;
+    }
+    .left-text:nth-child(2n){
+        background: #E0E0E0;
+    }
+
+</style>
\ No newline at end of file

src/components/passbook/rebate/rebatehead.vue

+<template>
+    <div class="row justify-between q-px-lg q-py-sm">
+        <span class="fz16 text-weight-bold dark">{{title}}</span>
+        <span>
+            <span class="fz12 cursor-pointer">规则说明</span>
+            <q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 10]"
+            :model-value="canHide">
+                <div class="q-px-md q-py-sm" style="opacity: 0.5;">
+                    <div>121212195959</div>
+                    <div>1212121</div>
+                    <div>1212121</div>
+                    
+                </div>
+            </q-popup-proxy>
+        </span>
+    </div>
+</template>
+<script lang="ts">
+    import { useRouter } from 'vue-router';
+    import { defineComponent, ref, reactive, toRefs, provide } from 'vue'
+    import { useI18n } from 'vue-i18n'
+    export default defineComponent({
+    name: 'user-info',
+    components: {  },
+    props: {
+        title: {
+        type: String,
+        require: true
+      }
+    },
+    setup(props) {
+      const $router = useRouter();
+      const data=reactive({
+          title: props.title,
+          canHide: false
+      })
+      
+      const methods = {
+          
+      }
+      return {...toRefs(data),...methods}
+    }
+  })
+  </script>
+<style>
+
+</style>
\ No newline at end of file

src/pages/passbook/passbook.vue

+<template>
+    <div class="column items-center">
+        <div class="passbook-form q-mt-sm">
+            <passbookHead/>
+            <rebate/>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+    import { useRouter } from 'vue-router';
+    import { defineComponent, ref, reactive, toRefs, provide } from 'vue'
+    import { useI18n } from 'vue-i18n'
+    import passbookHead from '../../components/passbook/passbookHead.vue'
+    import rebate from '../../components/passbook/rebate.vue'
+    export default defineComponent({
+    name: 'user-info',
+    components: { passbookHead,rebate },
+    props: {
+      user: {
+        type: Object,
+        require: true
+      }
+    },
+    setup(props) {
+      const $router = useRouter();
+      const data=reactive({
+          
+      })
+      
+      const methods = {
+          
+      }
+      return {...toRefs(data),...methods}
+    }
+  })
+  </script>
+<style>
+.passbook-form{
+    width: 963px;
+    min-width: 663px;
+}
+</style>
\ No newline at end of file

src/router/routes.ts

@@ -12,7 +12,8 @@ const routes: RouteRecordRaw[] = [
       { path: '/hotel/modify/:orderId', component: () => import('pages/hotel/ModifyHotelOrder.vue') },
       { path: '/hotel/offer/:orderId', component: () => import('pages/hotel/ListOfQuotation.vue') },
 
-      { path: '/personal', component: () => import('pages/personal/personal.vue') },
+      { path: '/personal', component: () => import('pages/personal/personal.vue') },//个人中心
+      { path: '/passbook', component: () => import('pages/passbook/passbook.vue') },//幸福存折
 
       { path: '/scattered', component: () => import('pages/scattered/HotelList.vue') },//散客
       { path: '/scattered/HotelDetails/:hotelId/:groupBookingFlg/:lowrateBySetCurrency', component: () => import('pages/scattered/hotelDetails.vue') },