登录配置相关，调整登录逻辑，底部导航配置相关
This commit is contained in:
Jason
parent
b47fc4219e
commit
3fe17fae5a
|
|
@ -7,6 +7,5 @@ export interface Link {
|
|||
path: string
|
||||
name?: string
|
||||
type: string
|
||||
isTab: boolean
|
||||
query?: Record<string, any>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 () => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
:item="item"
|
||||
/>
|
||||
</view>
|
||||
<tabbar />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
</view>
|
||||
</tab>
|
||||
</tabs>
|
||||
<tabbar />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<w-user-banner :content="item.content" :styles="item.styles" />
|
||||
</template>
|
||||
</view>
|
||||
<tabbar />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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}` })
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue