From 3fe17fae5ab3178c847b57c16a5ea75d5b438b30 Mon Sep 17 00:00:00 2001
From: Jason <5340635+wen-jason@user.noreply.gitee.com>
Date: Tue, 13 Sep 2022 19:07:36 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=85=8D=E7=BD=AE=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=EF=BC=8C=E8=B0=83=E6=95=B4=E7=99=BB=E5=BD=95=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=EF=BC=8C=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/components/link/index.ts        |   1 -
 admin/src/components/link/picker.vue      |  35 +++++-
 admin/src/components/link/shop-pages.vue  |   9 +-
 admin/src/views/consumer/lists/detail.vue |   7 +-
 admin/src/views/decoration/tabbar.vue     | 133 ++++++++++++++--------
 app/src/components/tabbar/tabbar.vue      |  33 ++++++
 app/src/pages.json                        |  26 -----
 app/src/pages/index/index.vue             |   1 +
 app/src/pages/news/news.vue               |   1 +
 app/src/pages/user/user.vue               |   1 +
 app/src/stores/app.ts                     |  14 +--
 app/src/utils/util.ts                     |  12 +-
 12 files changed, 173 insertions(+), 100 deletions(-)
 create mode 100644 app/src/components/tabbar/tabbar.vue

diff --git a/admin/src/components/link/index.ts b/admin/src/components/link/index.ts
index bca179fb..58f3673e 100644
--- a/admin/src/components/link/index.ts
+++ b/admin/src/components/link/index.ts
@@ -7,6 +7,5 @@ export interface Link {
     path: string
     name?: string
     type: string
-    isTab: boolean
     query?: Record<string, any>
 }
diff --git a/admin/src/components/link/picker.vue b/admin/src/components/link/picker.vue
index 83fe6c06..a486e1e3 100644
--- a/admin/src/components/link/picker.vue
+++ b/admin/src/components/link/picker.vue
@@ -1,14 +1,18 @@
 <template>
-    <div class="link-picker flex-1" @click="popupRef?.open()">
+    <div class="link-picker flex-1" @click="!disabled && popupRef?.open()">
         <el-input
-            class="cursor-pointer"
             :model-value="modelValue?.name ?? modelValue?.path"
             placeholder="请选择链接"
             readonly
+            :disabled="disabled"
         >
             <template #suffix>
                 <icon v-if="!modelValue?.path" name="el-icon-ArrowRight" />
-                <icon v-else name="el-icon-Close" @click.stop="emit('update:modelValue', {})" />
+                <icon
+                    v-else
+                    name="el-icon-Close"
+                    @click.stop="!disabled && emit('update:modelValue', {})"
+                />
             </template>
         </el-input>
         <popup ref="popupRef" width="700px" title="链接选择" @confirm="handleConfirm">
@@ -24,6 +28,10 @@ import Popup from '@/components/popup/index.vue'
 const props = defineProps({
     modelValue: {
         type: Object
+    },
+    disabled: {
+        type: Boolean,
+        default: false
     }
 })
 const emit = defineEmits<{
@@ -47,3 +55,24 @@ watch(
     }
 )
 </script>
+
+<style scoped lang="scss">
+.link-picker {
+    :deep(.el-input) {
+        &.is-disabled {
+            .el-input__inner {
+                cursor: not-allowed;
+            }
+            .el-input__suffix {
+                cursor: not-allowed;
+            }
+        }
+        .el-input__inner {
+            cursor: pointer;
+        }
+        .el-input__suffix {
+            cursor: pointer;
+        }
+    }
+}
+</style>
diff --git a/admin/src/components/link/shop-pages.vue b/admin/src/components/link/shop-pages.vue
index e7681210..e5c747b4 100644
--- a/admin/src/components/link/shop-pages.vue
+++ b/admin/src/components/link/shop-pages.vue
@@ -35,20 +35,17 @@ const linkList = ref([
     {
         path: '/pages/index/index',
         name: '商城首页',
-        type: LinkTypeEnum.SHOP_PAGES,
-        isTab: true
+        type: LinkTypeEnum.SHOP_PAGES
     },
     {
         path: '/pages/news/news',
         name: '文章资讯',
-        type: LinkTypeEnum.SHOP_PAGES,
-        isTab: true
+        type: LinkTypeEnum.SHOP_PAGES
     },
     {
         path: '/pages/user/user',
         name: '个人中心',
-        type: LinkTypeEnum.SHOP_PAGES,
-        isTab: true
+        type: LinkTypeEnum.SHOP_PAGES
     },
     {
         path: '/pages/collection/collection',
diff --git a/admin/src/views/consumer/lists/detail.vue b/admin/src/views/consumer/lists/detail.vue
index f7cd9932..58e78362 100644
--- a/admin/src/views/consumer/lists/detail.vue
+++ b/admin/src/views/consumer/lists/detail.vue
@@ -57,7 +57,11 @@
                 </el-form-item>
                 <el-form-item label="联系电话：">
                     {{ formData.mobile || '-' }}
-                    <popover-input class="ml-[10px]" @confirm="handleEdit($event, 'mobile')">
+                    <popover-input
+                        class="ml-[10px]"
+                        type="number"
+                        @confirm="handleEdit($event, 'mobile')"
+                    >
                         <el-button type="primary" link v-perms="['user:edit']">
                             <icon name="el-icon-EditPen" />
                         </el-button>
@@ -104,6 +108,7 @@ const getDetails = async () => {
 }
 
 const handleEdit = async (value: string, field: string) => {
+    if (!value) return
     await userEdit({
         id: route.query.id,
         field,
diff --git a/admin/src/views/decoration/tabbar.vue b/admin/src/views/decoration/tabbar.vue
index 7b378ae9..4f6661d8 100644
--- a/admin/src/views/decoration/tabbar.vue
+++ b/admin/src/views/decoration/tabbar.vue
@@ -28,54 +28,76 @@
                         <el-tabs model-value="content">
                             <el-tab-pane label="导航图片" name="content">
                                 <div class="mb-[18px]">
-                                    <del-wrap
-                                        v-for="(item, index) in tabbar.list"
-                                        :key="index"
-                                        @close="handleDelete(index)"
-                                        class="max-w-[400px]"
+                                    <draggable
+                                        class="draggable"
+                                        v-model="tabbar.list"
+                                        animation="300"
+                                        draggable=".draggable"
+                                        :move="onMove"
                                     >
-                                        <div class="bg-fill-light w-full p-4 mt-4">
-                                            <el-form-item label="导航图标">
-                                                <material-picker
-                                                    v-model="item.unselected"
-                                                    upload-class="bg-body"
-                                                    size="60px"
-                                                >
-                                                    <template #upload>
-                                                        <div class="upload-btn w-[60px] h-[60px]">
-                                                            <icon name="el-icon-Plus" :size="16" />
-                                                            <span class="text-xs leading-5">
-                                                                未选中
-                                                            </span>
-                                                        </div>
-                                                    </template>
-                                                </material-picker>
-                                                <material-picker
-                                                    v-model="item.selected"
-                                                    upload-class="bg-body"
-                                                    size="60px"
-                                                >
-                                                    <template #upload>
-                                                        <div class="upload-btn w-[60px] h-[60px]">
-                                                            <icon name="el-icon-Plus" :size="16" />
-                                                            <span class="text-xs leading-5">
-                                                                选中
-                                                            </span>
-                                                        </div>
-                                                    </template>
-                                                </material-picker>
-                                            </el-form-item>
-                                            <el-form-item label="导航名称">
-                                                <el-input
-                                                    v-model="item.name"
-                                                    placeholder="请输入名称"
-                                                />
-                                            </el-form-item>
-                                            <el-form-item label="链接地址">
-                                                <link-picker v-model="item.link" />
-                                            </el-form-item>
-                                        </div>
-                                    </del-wrap>
+                                        <template v-slot:item="{ element, index }">
+                                            <del-wrap
+                                                @close="handleDelete(index)"
+                                                class="max-w-[400px]"
+                                                :class="{ draggable: index != 0 }"
+                                            >
+                                                <div class="bg-fill-light w-full p-4 mt-4">
+                                                    <el-form-item label="导航图标">
+                                                        <material-picker
+                                                            v-model="element.unselected"
+                                                            upload-class="bg-body"
+                                                            size="60px"
+                                                        >
+                                                            <template #upload>
+                                                                <div
+                                                                    class="upload-btn w-[60px] h-[60px]"
+                                                                >
+                                                                    <icon
+                                                                        name="el-icon-Plus"
+                                                                        :size="16"
+                                                                    />
+                                                                    <span class="text-xs leading-5">
+                                                                        未选中
+                                                                    </span>
+                                                                </div>
+                                                            </template>
+                                                        </material-picker>
+                                                        <material-picker
+                                                            v-model="element.selected"
+                                                            upload-class="bg-body"
+                                                            size="60px"
+                                                        >
+                                                            <template #upload>
+                                                                <div
+                                                                    class="upload-btn w-[60px] h-[60px]"
+                                                                >
+                                                                    <icon
+                                                                        name="el-icon-Plus"
+                                                                        :size="16"
+                                                                    />
+                                                                    <span class="text-xs leading-5">
+                                                                        选中
+                                                                    </span>
+                                                                </div>
+                                                            </template>
+                                                        </material-picker>
+                                                    </el-form-item>
+                                                    <el-form-item label="导航名称">
+                                                        <el-input
+                                                            v-model="element.name"
+                                                            placeholder="请输入名称"
+                                                        />
+                                                    </el-form-item>
+                                                    <el-form-item label="链接地址">
+                                                        <link-picker
+                                                            v-model="element.link"
+                                                            :disabled="index == 0"
+                                                        />
+                                                    </el-form-item>
+                                                </div>
+                                            </del-wrap>
+                                        </template>
+                                    </draggable>
                                 </div>
 
                                 <el-form-item v-if="tabbar.list?.length < max" label-width="0">
@@ -111,6 +133,8 @@
 <script lang="ts" setup>
 import { getDecorateTabbar, setDecorateTabbar } from '@/api/decoration'
 import feedback from '@/utils/feedback'
+import Draggable from 'vuedraggable'
+
 const max = 5
 const min = 2
 const tabbar = reactive({
@@ -119,6 +143,12 @@ const tabbar = reactive({
         selectedColor: ''
     },
     list: [
+        {
+            name: '',
+            selected: '',
+            unselected: '',
+            link: {}
+        },
         {
             name: '',
             selected: '',
@@ -147,9 +177,16 @@ const handleDelete = (index: number) => {
     tabbar.list.splice(index, 1)
 }
 
+const onMove = (e: any) => {
+    if (e.relatedContext.index == 0) {
+        return false
+    }
+    return true
+}
+
 const getData = async () => {
     const data = await getDecorateTabbar()
-    tabbar.list = data.list
+    tabbar.list = data.list.map((item: any) => ({ ...item, link: JSON.parse(item.link) }))
     tabbar.style = data.style
 }
 const setData = async () => {
diff --git a/app/src/components/tabbar/tabbar.vue b/app/src/components/tabbar/tabbar.vue
new file mode 100644
index 00000000..7540a235
--- /dev/null
+++ b/app/src/components/tabbar/tabbar.vue
@@ -0,0 +1,33 @@
+<template>
+    <u-tabbar v-bind="tabbarStyle" :list="tabbarList" @change="handleChange"></u-tabbar>
+</template>
+
+<script lang="ts" setup>
+import { useAppStore } from '@/stores/app'
+import { currentPage, navigateTo } from '@/utils/util'
+import { onLoad } from '@dcloudio/uni-app'
+import { computed, onMounted, ref } from 'vue'
+const appStore = useAppStore()
+const tabbarList = computed(() => {
+    return appStore.getTabbarConfig.map((item: any) => ({
+        iconPath: item.unselected,
+        selectedIconPath: item.selected,
+        text: item.name,
+        link: JSON.parse(item.link),
+        pagePath: JSON.parse(item.link).path
+    }))
+})
+
+const tabbarStyle = computed(() => ({
+    activeColor: appStore.getStyleConfig.selectedColor,
+    inactiveColor: appStore.getStyleConfig.defaultColor
+}))
+const handleChange = (index: number) => {
+    const selectTab = tabbarList.value[index]
+    navigateTo(selectTab.link, 'reLaunch')
+}
+// onMounted(() => {
+//     const page = currentPage()
+//     console.log(page)
+// })
+</script>
diff --git a/app/src/pages.json b/app/src/pages.json
index 77206e86..9bc91660 100644
--- a/app/src/pages.json
+++ b/app/src/pages.json
@@ -117,32 +117,6 @@
         "navigationBarBackgroundColor": "#FFFFFF",
         "backgroundColor": "#F8F8F8"
     },
-    "tabBar": {
-        "color": "#666666",
-        "selectedColor": "#4173FF",
-        "borderStyle": "black",
-        "backgroundColor": "#ffffff",
-        "list": [
-            {
-                "iconPath": "/static/images/tabs/home.png",
-                "selectedIconPath": "/static/images/tabs/home_s.png",
-                "pagePath": "pages/index/index",
-                "text": "首页"
-            },
-            {
-                "iconPath": "/static/images/tabs/news.png",
-                "selectedIconPath": "/static/images/tabs/news_s.png",
-                "pagePath": "pages/news/news",
-                "text": "资讯"
-            },
-            {
-                "iconPath": "/static/images/tabs/user.png",
-                "selectedIconPath": "/static/images/tabs/user_s.png",
-                "pagePath": "pages/user/user",
-                "text": "我的"
-            }
-        ]
-    },
     "easycom": {
         "custom": {
             "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue",
diff --git a/app/src/pages/index/index.vue b/app/src/pages/index/index.vue
index 953bf080..6a5f62a9 100644
--- a/app/src/pages/index/index.vue
+++ b/app/src/pages/index/index.vue
@@ -24,6 +24,7 @@
                 :item="item"
             />
         </view>
+        <tabbar />
     </view>
 </template>
 
diff --git a/app/src/pages/news/news.vue b/app/src/pages/news/news.vue
index 698d6c9c..8c8f7752 100644
--- a/app/src/pages/news/news.vue
+++ b/app/src/pages/news/news.vue
@@ -19,6 +19,7 @@
                 </view>
             </tab>
         </tabs>
+        <tabbar />
     </view>
 </template>
 
diff --git a/app/src/pages/user/user.vue b/app/src/pages/user/user.vue
index e113a393..bf1fd9a5 100644
--- a/app/src/pages/user/user.vue
+++ b/app/src/pages/user/user.vue
@@ -16,6 +16,7 @@
                 <w-user-banner :content="item.content" :styles="item.styles" />
             </template>
         </view>
+        <tabbar />
     </view>
 </template>
 
diff --git a/app/src/stores/app.ts b/app/src/stores/app.ts
index 105483aa..822f055c 100644
--- a/app/src/stores/app.ts
+++ b/app/src/stores/app.ts
@@ -9,16 +9,16 @@ export const useAppStore = defineStore({
     state: (): AppSate => ({
         config: {
             website: {},
-            login: {}
+            login: {},
+            tabbar: [],
+            style: {}
         }
     }),
     getters: {
-        getWebsiteConfig(state) {
-            return state.config.website
-        },
-        getLoginConfig(state) {
-            return state.config.login
-        }
+        getWebsiteConfig: (state) => state.config.website,
+        getLoginConfig: (state) => state.config.login,
+        getTabbarConfig: (state) => state.config.tabbar,
+        getStyleConfig: (state) => state.config.style
     },
     actions: {
         getImageUrl(url: string) {
diff --git a/app/src/utils/util.ts b/app/src/utils/util.ts
index 1bfe679f..4653ebf4 100644
--- a/app/src/utils/util.ts
+++ b/app/src/utils/util.ts
@@ -28,7 +28,6 @@ export const getRect = (selector: string, all = false, context?: any) => {
 }
 
 /**
-<<<<<<< HEAD
  * @description 获取当前页面实例
  */
 export function currentPage() {
@@ -52,19 +51,16 @@ export enum LinkTypeEnum {
     'SHOP_PAGES' = 'shop',
     'CUSTOM_LINK' = 'custom'
 }
-export function navigateTo(link: Link) {
+
+export function navigateTo(link: Link, navigateType: 'navigateTo' | 'reLaunch' = 'navigateTo') {
     let url: string
     switch (link.type) {
         case LinkTypeEnum.SHOP_PAGES:
             url = link.query ? `${link.path}?${objectToQuery(link.query)}` : link.path
-            if (link.isTab) {
-                uni.switchTab({ url })
-            } else {
-                uni.navigateTo({ url })
-            }
+            uni[navigateType]({ url })
             break
         case LinkTypeEnum.CUSTOM_LINK:
-            uni.navigateTo({ url: `/pages/webview/webview?url=${link.path}` })
+            uni[navigateType]({ url: `/pages/webview/webview?url=${link.path}` })
     }
 }