Merge branch 'master' of http://git.izouma.com/xiongzhu/paimaide

src/components/AddressItem.vue

@@ -64,7 +64,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .address {
-    background: rgba(255, 255, 255, 1);
+    background: rgba(var(--ion-text-color-rgb), 1);
     border-radius: 2px;
     padding: 15px;
     display: flex;

src/components/ChatInfo.vue

@@ -32,7 +32,7 @@ export default {
         .chat-content {
             flex-direction: row-reverse;
             .chat-message {
-                background: #ffffff;
+                background: var(--ion-text-color);
                 border-radius: 2px 12px 12px 12px;
                 color: #000000;
             }
@@ -62,7 +62,7 @@ export default {
         font-size: 16px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
-        color: #ffffff;
+        color: var(--ion-text-color);
         line-height: 26px;
         padding: 10px;
         margin: 0 8px;

src/components/DistributionOrder.vue

@@ -43,7 +43,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .orderInfo {
-    background: rgba(255, 255, 255, 1);
+    background: rgba(var(--ion-text-color-rgb), 1);
     border-radius: 2px;
     padding: 0 15px 15px;
     margin-bottom: 10px;
@@ -60,7 +60,7 @@ export default {
         background: rgba(255, 143, 0, 1);
         border-radius: 0px 100px 100px 0px;
         font-size: 12px;
-        color: rgba(255, 255, 255, 1);
+        color: rgba(var(--ion-text-color-rgb), 1);
         line-height: 24px;
         text-align: center;
         position: absolute;

src/components/OrderInfo.vue

@@ -418,7 +418,7 @@ export default {
 <style lang="less" scoped>
 .order-info {
     padding: 0 15px;
-    background: rgba(255, 255, 255, 1);
+    background: rgba(var(--ion-text-color-rgb), 1);
     border-radius: 2px;
 }
 .order-top {
@@ -531,7 +531,7 @@ export default {
 .getsold {
     width: 300px;
     height: 405px;
-    background: rgba(255, 255, 255, 1);
+    background: rgba(var(--ion-text-color-rgb), 1);
     border-radius: 4px;
     padding: 15px 20px;
     box-sizing: border-box;

src/components/ProductBanner.vue

@@ -96,7 +96,7 @@ export default {
     }
     .mySwiper {
         border-radius: @radius;
-        border: 2px solid #ffffff;
+        border: 2px solid var(--ion-text-color);
         padding: 5px;
         overflow: hidden;
         .detail-animate();
@@ -147,7 +147,7 @@ export default {
     top: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(var(--ion-text-color-rgb), 0.5);
     .f();
     justify-content: center;
 

src/components/ProductTitle.vue

@@ -20,7 +20,7 @@ export default {
 <style lang="less" scoped>
 .product-title {
     font-size: 20px;
-    color: #ffffff;
+    color: var(--ion-text-color);
     line-height: 44px;
     padding: 0 30px;
     position: relative;
@@ -41,7 +41,7 @@ export default {
 
     &.isSmall {
         font-size: 18px;
-        color: #ffffff;
+        color: var(--ion-text-color);
         line-height: 24px;
         text-align: center;
         .f();

src/components/RankItem.vue

@@ -43,7 +43,7 @@ export default {
 <style lang="less" scoped>
 .rankItem {
     height: 68px;
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(var(--ion-text-color-rgb), 0.2);
     border-radius: 6px;
     display: flex;
     padding: 0 14px;
@@ -55,7 +55,7 @@ export default {
     font-size: 14px;
     font-weight: bold;
     text-align: center;
-    color: rgba(255, 255, 255, 1);
+    color: rgba(var(--ion-text-color-rgb), 1);
     line-height: 20px;
     width: 20px;
     margin-right: 15px;

src/components/Record.vue

@@ -63,7 +63,7 @@ export default {
 <style lang="less" scoped>
 .record {
     margin: 0 0 10px;
-    background: rgba(255, 255, 255, 1);
+    background: rgba(var(--ion-text-color-rgb), 1);
     border-radius: 2px;
     padding: 0 15px;
 }

src/components/RecordOrder.vue

@@ -55,7 +55,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .orderInfo {
-    background: rgba(255, 255, 255, 1);
+    background: rgba(var(--ion-text-color-rgb), 1);
     border-radius: 2px;
     padding: 0 15px 15px;
     margin-bottom: 10px;
@@ -72,7 +72,7 @@ export default {
         background: rgba(255, 143, 0, 1);
         border-radius: 0px 100px 100px 0px;
         font-size: 12px;
-        color: rgba(255, 255, 255, 1);
+        color: rgba(var(--ion-text-color-rgb), 1);
         line-height: 24px;
         text-align: center;
         position: absolute;

src/router/index.js

@@ -18,7 +18,7 @@ const router = createRouter({
             path: '/',
             component: TabsPage,
             meta: {
-                allowGuest: true
+                // allowGuest: true
             },
             children: [
                 {
@@ -64,6 +64,11 @@ const router = createRouter({
                     meta: {
                         allowGuest: true
                     }
+                },
+                {
+                    path: '/distribution1',
+                    name: 'distribution1',
+                    component: () => import('@/views/DistributionPage.vue')
                 }
             ]
         },
@@ -148,16 +153,17 @@ const router = createRouter({
             name: 'changeText',
             component: () => import('@/views/ChangeTextPage.vue')
         },
+        {
+            path: '/distribution',
+            name: 'distribution',
+            component: () => import('@/views/DistributionPage.vue'),
+            meta: { showToolbar: true }
+        },
         {
             path: '/chat',
             name: 'chat',
             component: () => import('@/views/ChatPage.vue')
         },
-        {
-            path: '/distributionMine',
-            name: 'distributionMine',
-            component: () => import('@/views/DistributionPage.vue')
-        },
         {
             path: '/commissionList',
             name: 'commissionList',

src/views/DistributionPage.vue

@@ -1,6 +1,6 @@
 <template>
     <ion-page>
-        <ion-header v-if="routeName === 'distributionMine'">
+        <ion-header v-if="showToolbar">
             <ion-toolbar>
                 <ion-buttons slot="start">
                     <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
@@ -92,7 +92,8 @@ export default {
             showQR: false,
             records: [],
             superior: null,
-            showShareModal: false
+            showShareModal: false,
+            showToolbar: false
         }
     },
     setup() {
@@ -111,7 +112,7 @@ export default {
     created() {
         this.getStat()
         this.getLatestRecords()
-        if (this.user.superiorId) {
+        if (this.user && this.user.superiorId) {
             this.$http
                 .get('/user/mySuperior')
                 .then(res => {
@@ -120,6 +121,9 @@ export default {
                 .catch(() => {})
         }
     },
+    ionViewWillEnter() {
+        this.showToolbar = this.$route.meta.showToolbar === true
+    },
     methods: {
         getStat() {
             this.$http.get('/commission/myStat').then(res => {
@@ -371,7 +375,7 @@ ion-content {
         border-radius: 4px;
         font-size: 16px;
         font-weight: bold;
-        color: #60616d;
+        color: var(--ion-color-step-400);
         .f();
         justify-content: center;
         margin: 10px auto 0 auto;

src/views/HomePage.vue

@@ -402,9 +402,6 @@ function goRank() {
             height: 22px;
             margin-right: 6px;
         }
-        span {
-            color: #60616d;
-        }
     }
     .tool + .tool {
         margin-left: 15px;
@@ -421,6 +418,9 @@ function goRank() {
         margin-left: 15px;
     }
 }
+.dark .tools {
+    color: var(--ion-color-step-350);
+}
 
 .rank-content {
     background: linear-gradient(85deg, #0741c3 0%, #8a03d3 100%);
@@ -458,7 +458,7 @@ function goRank() {
     padding: 6px 0;
     .name {
         font-size: 13px;
-        color: #ffffff;
+        color: var(--ion-text-color);
         line-height: 18px;
         width: 50px;
         flex-shrink: 0;
@@ -475,10 +475,10 @@ function goRank() {
 
     .more {
         font-size: 10px;
-        color: rgba(255, 255, 255, 0.6);
+        color: rgba(var(--ion-text-color-rgb), 0.6);
         line-height: 18px;
     }
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    border-bottom: 1px solid rgba(var(--ion-text-color-rgb), 0.2);
 }
 
 @keyframes goDown {

src/views/MinePage.vue

@@ -71,7 +71,7 @@
                     :title="$t('distribution.myProfit')"
                     :value="$t('mine.newProfit')"
                     is-link
-                    :to="{ name: 'distributionMine' }"
+                    :to="{ name: 'distribution' }"
                 >
                     <template #icon>
                         <img class="menu-icon" src="../assets/info_icon_shoyi.png" alt="" />

src/views/ProductDetailPage.vue

@@ -271,12 +271,12 @@ const pay = () => {
             .val {
                 font-size: 16px;
                 font-weight: bold;
-                color: #ffffff;
+                color: var(--ion-text-color);
                 line-height: 24px;
             }
             .name {
                 font-size: 11px;
-                color: #ffffff;
+                color: var(--ion-text-color);
                 line-height: 11px;
                 margin-top: 2px;
             }
@@ -306,7 +306,7 @@ const pay = () => {
             .val {
                 font-size: 16px;
                 font-weight: bold;
-                color: #ffffff;
+                color: var(--ion-text-color);
                 line-height: 24px;
                 .f();
                 small {
@@ -317,7 +317,7 @@ const pay = () => {
             }
             .name {
                 font-size: 11px;
-                color: #ffffff;
+                color: var(--ion-text-color);
                 line-height: 11px;
                 margin-top: 2px;
             }
@@ -440,7 +440,7 @@ const pay = () => {
     left: 16px;
     width: 34px;
     height: 34px;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(var(--ion-color-dark-contrast-rgb), 0.5);
     backdrop-filter: blur(1px);
     display: flex;
     justify-content: center;

src/views/RankPage.vue

@@ -135,7 +135,7 @@ ion-content {
         top: 41px;
         left: 18px;
         font-size: 10px;
-        color: rgba(255, 255, 255, 0.6);
+        color: rgba(var(--ion-text-color-rgb), 0.6);
         line-height: 10px;
     }
 }

src/views/TabsPage.vue

@@ -15,7 +15,7 @@
                 <ion-tab-button tab="rank" href="/rank">
                     <img :src="tabIconRank" class="tab-icon" alt="" />
                 </ion-tab-button>
-                <ion-tab-button tab="distribution" href="/distribution">
+                <ion-tab-button tab="distribution" href="/distribution1">
                     <ion-icon :icon="activeTab === 'distribution' ? tabIconProfitPre : tabIconProfit" />
                     <ion-label>{{ $t('common.profit') }}</ion-label>
                 </ion-tab-button>
@@ -27,8 +27,8 @@
         </ion-tabs>
     </ion-page>
 </template>
-<script>
-import { defineComponent, ref } from 'vue'
+<script setup>
+import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import tabIconHome from '@/assets/tabbar_icon_home.svg'
 import tabIconHomePre from '@/assets/tabbar_icon_home_pre.svg'
@@ -40,55 +40,37 @@ import tabIconProfitPre from '@/assets/tabbar_icon_profit_pre.svg'
 import tabIconMine from '@/assets/tabbar_icon_mine.svg'
 import tabIconMinePre from '@/assets/tabbar_icon_mine_pre.svg'
 
-export default defineComponent({
-    name: 'TabsPage',
-    setup() {
-        const route = useRoute()
-        const activeTab = ref(null)
-        if (route.path === '/home') {
-            activeTab.value = 'home'
-        } else if (route.path == '/news') {
-            activeTab.value = 'news'
-        } else if (route.path == '/rank') {
-            activeTab.value = 'rank'
-        } else if (route.path == '/distribution') {
-            activeTab.value = 'distribution'
-        } else {
-            activeTab.value = 'mine'
-        }
-        const tabChange = tabInfo => {
-            if (tabInfo.tab === 'home') {
-                activeTab.value = 'home'
-            }
-            if (tabInfo.tab === 'news') {
-                activeTab.value = 'news'
-            }
-            if (tabInfo.tab === 'rank') {
-                activeTab.value = 'rank'
-            }
-            if (tabInfo.tab === 'distribution') {
-                activeTab.value = 'distribution'
-            }
+const route = useRoute()
+const activeTab = ref(null)
+if (route.path === '/home') {
+    activeTab.value = 'home'
+} else if (route.path == '/news') {
+    activeTab.value = 'news'
+} else if (route.path == '/rank') {
+    activeTab.value = 'rank'
+} else if (route.path == '/distribution1') {
+    activeTab.value = 'distribution'
+} else {
+    activeTab.value = 'mine'
+}
+const tabChange = tabInfo => {
+    if (tabInfo.tab === 'home') {
+        activeTab.value = 'home'
+    }
+    if (tabInfo.tab === 'news') {
+        activeTab.value = 'news'
+    }
+    if (tabInfo.tab === 'rank') {
+        activeTab.value = 'rank'
+    }
+    if (tabInfo.tab === 'distribution') {
+        activeTab.value = 'distribution'
+    }
 
-            if (tabInfo.tab === 'mine') {
-                activeTab.value = 'mine'
-            }
-        }
-        return {
-            tabChange,
-            activeTab,
-            tabIconHome,
-            tabIconHomePre,
-            tabIconNews,
-            tabIconNewsPre,
-            tabIconRank,
-            tabIconMine,
-            tabIconMinePre,
-            tabIconProfit,
-            tabIconProfitPre
-        }
+    if (tabInfo.tab === 'mine') {
+        activeTab.value = 'mine'
     }
-})
+}
 </script>
 
 <style lang="less" scoped>