登录配置相关,调整登录逻辑,底部导航配置相关

This commit is contained in:
Jason
2022-09-13 19:07:36 +08:00
parent b47fc4219e
commit 3fe17fae5a
12 changed files with 173 additions and 100 deletions

View File

@@ -7,6 +7,5 @@ export interface Link {
path: string
name?: string
type: string
isTab: boolean
query?: Record<string, any>
}

View File

@@ -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>

View File

@@ -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',

View File

@@ -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,

View File

@@ -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 () => {