mirage
/
edu
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
admin/src/components/link/index.ts
View File

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

35
admin/src/components/link/picker.vue
View File

@ -1,14 +1,18 @@
<template> <template>
<div class="link-picker flex-1" @click="popupRef?.open()"> <div class="link-picker flex-1" @click="!disabled && popupRef?.open()">
<el-input <el-input
class="cursor-pointer"
:model-value="modelValue?.name ?? modelValue?.path" :model-value="modelValue?.name ?? modelValue?.path"
placeholder="请选择链接" placeholder="请选择链接"
readonly readonly
:disabled="disabled"
> >
<template #suffix> <template #suffix>
<icon v-if="!modelValue?.path" name="el-icon-ArrowRight" /> <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> </template>
</el-input> </el-input>
<popup ref="popupRef" width="700px" title="链接选择" @confirm="handleConfirm"> <popup ref="popupRef" width="700px" title="链接选择" @confirm="handleConfirm">
@ -24,6 +28,10 @@ import Popup from '@/components/popup/index.vue'
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Object type: Object
},
disabled: {
type: Boolean,
default: false
} }
}) })
const emit = defineEmits<{ const emit = defineEmits<{
@ -47,3 +55,24 @@ watch(
} }
) )
</script> </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>

9
admin/src/components/link/shop-pages.vue
View File

@ -35,20 +35,17 @@ const linkList = ref([
{ {
path: '/pages/index/index', path: '/pages/index/index',
name: '商城首页', name: '商城首页',
type: LinkTypeEnum.SHOP_PAGES, type: LinkTypeEnum.SHOP_PAGES
isTab: true
}, },
{ {
path: '/pages/news/news', path: '/pages/news/news',
name: '文章资讯', name: '文章资讯',
type: LinkTypeEnum.SHOP_PAGES, type: LinkTypeEnum.SHOP_PAGES
isTab: true
}, },
{ {
path: '/pages/user/user', path: '/pages/user/user',
name: '个人中心', name: '个人中心',
type: LinkTypeEnum.SHOP_PAGES, type: LinkTypeEnum.SHOP_PAGES
isTab: true
}, },
{ {
path: '/pages/collection/collection', path: '/pages/collection/collection',

7
admin/src/views/consumer/lists/detail.vue
View File

@ -57,7 +57,11 @@
</el-form-item> </el-form-item>
<el-form-item label="联系电话："> <el-form-item label="联系电话：">
{{ formData.mobile || '-' }} {{ 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']"> <el-button type="primary" link v-perms="['user:edit']">
<icon name="el-icon-EditPen" /> <icon name="el-icon-EditPen" />
</el-button> </el-button>
@ -104,6 +108,7 @@ const getDetails = async () => {
} }
const handleEdit = async (value: string, field: string) => { const handleEdit = async (value: string, field: string) => {
if (!value) return
await userEdit({ await userEdit({
id: route.query.id, id: route.query.id,
field, field,

133
admin/src/views/decoration/tabbar.vue
View File

@ -28,54 +28,76 @@
<el-tabs model-value="content"> <el-tabs model-value="content">
<el-tab-pane label="导航图片" name="content"> <el-tab-pane label="导航图片" name="content">
<div class="mb-[18px]"> <div class="mb-[18px]">
<del-wrap <draggable
v-for="(item, index) in tabbar.list" class="draggable"
:key="index" v-model="tabbar.list"
@close="handleDelete(index)" animation="300"
class="max-w-[400px]" draggable=".draggable"
:move="onMove"
> >
<div class="bg-fill-light w-full p-4 mt-4"> <template v-slot:item="{ element, index }">
<el-form-item label="导航图标"> <del-wrap
<material-picker @close="handleDelete(index)"
v-model="item.unselected" class="max-w-[400px]"
upload-class="bg-body" :class="{ draggable: index != 0 }"
size="60px" >
> <div class="bg-fill-light w-full p-4 mt-4">
<template #upload> <el-form-item label="导航图标">
<div class="upload-btn w-[60px] h-[60px]"> <material-picker
<icon name="el-icon-Plus" :size="16" /> v-model="element.unselected"
<span class="text-xs leading-5"> upload-class="bg-body"
未选中 size="60px"
</span> >
</div> <template #upload>
</template> <div
</material-picker> class="upload-btn w-[60px] h-[60px]"
<material-picker >
v-model="item.selected" <icon
upload-class="bg-body" name="el-icon-Plus"
size="60px" :size="16"
> />
<template #upload> <span class="text-xs leading-5">
<div class="upload-btn w-[60px] h-[60px]"> 未选中
<icon name="el-icon-Plus" :size="16" /> </span>
<span class="text-xs leading-5"> </div>
选中 </template>
</span> </material-picker>
</div> <material-picker
</template> v-model="element.selected"
</material-picker> upload-class="bg-body"
</el-form-item> size="60px"
<el-form-item label="导航名称"> >
<el-input <template #upload>
v-model="item.name" <div
placeholder="请输入名称" class="upload-btn w-[60px] h-[60px]"
/> >
</el-form-item> <icon
<el-form-item label="链接地址"> name="el-icon-Plus"
<link-picker v-model="item.link" /> :size="16"
</el-form-item> />
</div> <span class="text-xs leading-5">
</del-wrap> 选中
</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> </div>
<el-form-item v-if="tabbar.list?.length < max" label-width="0"> <el-form-item v-if="tabbar.list?.length < max" label-width="0">
@ -111,6 +133,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { getDecorateTabbar, setDecorateTabbar } from '@/api/decoration' import { getDecorateTabbar, setDecorateTabbar } from '@/api/decoration'
import feedback from '@/utils/feedback' import feedback from '@/utils/feedback'
import Draggable from 'vuedraggable'
const max = 5 const max = 5
const min = 2 const min = 2
const tabbar = reactive({ const tabbar = reactive({
@ -119,6 +143,12 @@ const tabbar = reactive({
selectedColor: '' selectedColor: ''
}, },
list: [ list: [
{
name: '',
selected: '',
unselected: '',
link: {}
},
{ {
name: '', name: '',
selected: '', selected: '',
@ -147,9 +177,16 @@ const handleDelete = (index: number) => {
tabbar.list.splice(index, 1) tabbar.list.splice(index, 1)
} }
const onMove = (e: any) => {
if (e.relatedContext.index == 0) {
return false
}
return true
}
const getData = async () => { const getData = async () => {
const data = await getDecorateTabbar() 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 tabbar.style = data.style
} }
const setData = async () => { const setData = async () => {

33
app/src/components/tabbar/tabbar.vue Normal file
View File

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

26
app/src/pages.json
View File

@ -117,32 +117,6 @@
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#F8F8F8" "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": { "easycom": {
"custom": { "custom": {
"^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue", "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue",

1
app/src/pages/index/index.vue
View File

@ -24,6 +24,7 @@
:item="item" :item="item"
/> />
</view> </view>
<tabbar />
</view> </view>
</template> </template>

1
app/src/pages/news/news.vue
View File

@ -19,6 +19,7 @@
</view> </view>
</tab> </tab>
</tabs> </tabs>
<tabbar />
</view> </view>
</template> </template>

1
app/src/pages/user/user.vue
View File

@ -16,6 +16,7 @@
<w-user-banner :content="item.content" :styles="item.styles" /> <w-user-banner :content="item.content" :styles="item.styles" />
</template> </template>
</view> </view>
<tabbar />
</view> </view>
</template> </template>

14
app/src/stores/app.ts
View File

@ -9,16 +9,16 @@ export const useAppStore = defineStore({
state: (): AppSate => ({ state: (): AppSate => ({
config: { config: {
website: {}, website: {},
login: {} login: {},
tabbar: [],
style: {}
} }
}), }),
getters: { getters: {
getWebsiteConfig(state) { getWebsiteConfig: (state) => state.config.website,
return state.config.website getLoginConfig: (state) => state.config.login,
}, getTabbarConfig: (state) => state.config.tabbar,
getLoginConfig(state) { getStyleConfig: (state) => state.config.style
return state.config.login
}
}, },
actions: { actions: {
getImageUrl(url: string) { getImageUrl(url: string) {

12
app/src/utils/util.ts
View File

@ -28,7 +28,6 @@ export const getRect = (selector: string, all = false, context?: any) => {
} }
/** /**
<<<<<<< HEAD
* @description 获取当前页面实例 * @description 获取当前页面实例
*/ */
export function currentPage() { export function currentPage() {
@ -52,19 +51,16 @@ export enum LinkTypeEnum {
'SHOP_PAGES' = 'shop', 'SHOP_PAGES' = 'shop',
'CUSTOM_LINK' = 'custom' 'CUSTOM_LINK' = 'custom'
} }
export function navigateTo(link: Link) {
export function navigateTo(link: Link, navigateType: 'navigateTo' | 'reLaunch' = 'navigateTo') {
let url: string let url: string
switch (link.type) { switch (link.type) {
case LinkTypeEnum.SHOP_PAGES: case LinkTypeEnum.SHOP_PAGES:
url = link.query ? `${link.path}?${objectToQuery(link.query)}` : link.path url = link.query ? `${link.path}?${objectToQuery(link.query)}` : link.path
if (link.isTab) { uni[navigateType]({ url })
uni.switchTab({ url })
} else {
uni.navigateTo({ url })
}
break break
case LinkTypeEnum.CUSTOM_LINK: case LinkTypeEnum.CUSTOM_LINK:
uni.navigateTo({ url: `/pages/webview/webview?url=${link.path}` }) uni[navigateType]({ url: `/pages/webview/webview?url=${link.path}` })
} }
} }