初始版本

business_uniapp/src/components/widgets/nav/nav.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="relative mx-[20rpx] mt-[20rpx]">
+        <swiper
+            class="py-[20rpx] bg-white rounded-lg"
+            :style="{
+                height: navList[0].length > content.per_line ? '288rpx' : '132rpx'
+            }"
+            :autoplay="false"
+            :indicator-dots="false"
+            @change="swiperChange"
+        >
+            <swiper-item v-for="(sItem, sIndex) in navList" :key="sIndex">
+                <view class="nav" v-if="navList.length && content.enabled">
+                    <view
+                        class="grid grid-rows-auto gap-y-3 w-full"
+                        :style="{ 'grid-template-columns': `repeat(${content.per_line}, 1fr)` }"
+                    >
+                        <view
+                            v-for="(item, index) in sItem"
+                            :key="index"
+                            class="flex flex-col items-center"
+                            @click="handleClick(item.link)"
+                        >
+                            <u-image width="82" height="82" :src="getImageUrl(item.image)" alt=""/>
+                            <view class="mt-[14rpx] text-xs">{{ item.name }}</view>
+                        </view>
+                    </view>
+                </view>
+            </swiper-item>
+        </swiper>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {ref, watch, computed} from 'vue'
+import {useAppStore} from '@/stores/app'
+import {navigateTo, sliceArray} from '@/utils/util'
+
+const props = defineProps({
+    content: {
+        type: Object,
+        default: () => ({})
+    },
+    styles: {
+        type: Object,
+        default: () => ({})
+    }
+})
+
+const {getImageUrl} = useAppStore()
+const swiperCurrent = ref<number>(0)
+const navList = ref<Record<string, any>>([])
+
+const pagesNum = computed<number>(() => {
+    return props.content.per_line * props.content.show_line
+})
+
+watch(
+    () => props.content.data,
+    (val) => {
+        const num = props.content.style === 1 ? val.length : pagesNum.value
+        navList.value = sliceArray(val, num)
+        console.log(navList.value)
+    },
+    {deep: true, immediate: true}
+)
+
+const handleClick = (link: any) => {
+    navigateTo(link)
+}
+
+const swiperChange = (e: any) => {
+    swiperCurrent.value = e.detail.current
+}
+</script>