更新
This commit is contained in:
parent
38ae2481f4
commit
01bdcd0b59
@ -1,69 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 文章分类列表
|
||||
export function articleCateLists(params?: any) {
|
||||
return request.get({ url: '/article.articleCate/lists', params })
|
||||
}
|
||||
// 文章分类列表
|
||||
export function articleCateAll(params?: any) {
|
||||
return request.get({ url: '/article.articleCate/all', params })
|
||||
}
|
||||
|
||||
// 添加文章分类
|
||||
export function articleCateAdd(params: any) {
|
||||
return request.post({ url: '/article.articleCate/add', params })
|
||||
}
|
||||
|
||||
// 编辑文章分类
|
||||
export function articleCateEdit(params: any) {
|
||||
return request.post({ url: '/article.articleCate/edit', params })
|
||||
}
|
||||
|
||||
// 删除文章分类
|
||||
export function articleCateDelete(params: any) {
|
||||
return request.post({ url: '/article.articleCate/delete', params })
|
||||
}
|
||||
|
||||
// 文章分类详情
|
||||
export function articleCateDetail(params: any) {
|
||||
return request.get({ url: '/article.articleCate/detail', params })
|
||||
}
|
||||
|
||||
// 文章分类状态
|
||||
export function articleCateStatus(params: any) {
|
||||
return request.post({ url: '/article.articleCate/updateStatus', params })
|
||||
}
|
||||
|
||||
// 文章列表
|
||||
export function articleLists(params?: any) {
|
||||
return request.get({ url: '/article.article/lists', params })
|
||||
}
|
||||
// 文章列表
|
||||
export function articleAll(params?: any) {
|
||||
return request.get({ url: '/article/all', params })
|
||||
}
|
||||
|
||||
// 添加文章
|
||||
export function articleAdd(params: any) {
|
||||
return request.post({ url: '/article.article/add', params })
|
||||
}
|
||||
|
||||
// 编辑文章
|
||||
export function articleEdit(params: any) {
|
||||
return request.post({ url: '/article.article/edit', params })
|
||||
}
|
||||
|
||||
// 删除文章
|
||||
export function articleDelete(params: any) {
|
||||
return request.post({ url: '/article.article/delete', params })
|
||||
}
|
||||
|
||||
// 文章详情
|
||||
export function articleDetail(params: any) {
|
||||
return request.get({ url: '/article.article/detail', params })
|
||||
}
|
||||
|
||||
// 文章分类状态
|
||||
export function articleStatus(params: any) {
|
||||
return request.post({ url: '/article.article/updateStatus', params })
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// H5渠道配置保存
|
||||
export function setH5Config(params: any) {
|
||||
return request.post({ url: '/channel/WebPageSetting/setConfig', params })
|
||||
}
|
||||
|
||||
// H5渠道配置详情
|
||||
export function getH5Config() {
|
||||
return request.get({ url: '/channel/WebPageSetting/getConfig' })
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 微信开发平台配置保存
|
||||
export function setOpenSettingConfig(params: any) {
|
||||
return request.post({ url: '/channel/OpenSetting/setConfig', params })
|
||||
}
|
||||
|
||||
// 微信开发平台配置详情
|
||||
export function getOpenSettingConfig() {
|
||||
return request.get({ url: '/channel/OpenSetting/getConfig' })
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 微信小程序配置保存
|
||||
export function setWeappConfig(params: any) {
|
||||
return request.post({ url: '/channel/MnpSettings/setConfig', params })
|
||||
}
|
||||
|
||||
// 微信小程序配置详情
|
||||
export function getWeappConfig() {
|
||||
return request.get({ url: '/channel/MnpSettings/getConfig' })
|
||||
}
|
||||
@ -1,110 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 微信公众号配置保存
|
||||
export function setOaConfig(params: any) {
|
||||
return request.post({ url: '/channel/OfficialAccountSetting/setConfig', params })
|
||||
}
|
||||
|
||||
// 微信公众号配置详情
|
||||
export function getOaConfig() {
|
||||
return request.get({ url: '/channel/OfficialAccountSetting/getConfig' })
|
||||
}
|
||||
|
||||
export interface Menu {
|
||||
name: string
|
||||
has_menu?: boolean
|
||||
type?: string
|
||||
url?: string
|
||||
appid?: string
|
||||
pagepath?: string
|
||||
sub_button: Menu[] | any
|
||||
}
|
||||
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @description 获取菜单
|
||||
*/
|
||||
export function getOaMenu() {
|
||||
return request.get({ url: '/channel/OfficialAccountMenu/detail' })
|
||||
}
|
||||
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @param { Menu } Menu
|
||||
* @description 菜单保存
|
||||
*/
|
||||
export function setOaMenuSave(params: Menu | any) {
|
||||
return request.post({ url: '/channel/OfficialAccountMenu/save', params })
|
||||
}
|
||||
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @param { Menu } Menu
|
||||
* @description 菜单发布
|
||||
*/
|
||||
export function setOaMenuPublish(params: Menu | any) {
|
||||
return request.post({ url: '/channel/OfficialAccountMenu/saveAndPublish', params })
|
||||
}
|
||||
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @param { string } reply_type
|
||||
* @description 获取回复列表
|
||||
*/
|
||||
export function getOaReplyList(params: { reply_type: string }) {
|
||||
return request.get({ url: '/channel/OfficialAccountReply/lists', params })
|
||||
}
|
||||
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @param { number } id
|
||||
* @description 回复列表删除
|
||||
*/
|
||||
export function oaReplyDel(params: { id: number }) {
|
||||
return request.post({ url: '/channel/OfficialAccountReply/delete', params })
|
||||
}
|
||||
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @param { number } id
|
||||
* @description 回复状态修改
|
||||
*/
|
||||
export function changeOaReplyStatus(params: { id: number }) {
|
||||
return request.post({ url: '/channel/OfficialAccountReply/status', params })
|
||||
}
|
||||
|
||||
export interface Reply {
|
||||
content: string // 内容
|
||||
content_type: number // 内容类型: 1=文本
|
||||
keyword?: string // 关键词
|
||||
matching_type?: number // 匹配方式: [1=全匹配, 2=模糊匹配]
|
||||
name: string // 规则名称
|
||||
status: number // 状态: 1=开启, 0=关闭
|
||||
reply_type: number // 类型: 回复类型 1-关注回复 2-关键词回复 3-默认回复
|
||||
reply_num: number // 回复数量`
|
||||
sort: number // 排序
|
||||
}
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @description 回复添加
|
||||
*/
|
||||
export function oaReplyAdd(params: Reply) {
|
||||
return request.post({ url: '/channel/OfficialAccountReply/add', params })
|
||||
}
|
||||
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @description 回复编辑
|
||||
*/
|
||||
export function oaReplyEdit(params: Reply) {
|
||||
return request.post({ url: '/channel/OfficialAccountReply/edit', params })
|
||||
}
|
||||
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @param { string } type
|
||||
* @description 获取回复详情
|
||||
*/
|
||||
export function getOaReplyDetail(params: { id: number }) {
|
||||
return request.get({ url: '/channel/OfficialAccountReply/detail', params })
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 页面装修详情
|
||||
export function getDecoratePages(params: any) {
|
||||
return request.get({ url: '/decorate.page/detail', params }, { ignoreCancelToken: true })
|
||||
}
|
||||
|
||||
// 页面装修保存
|
||||
export function setDecoratePages(params: any) {
|
||||
return request.post({ url: '/decorate.page/save', params })
|
||||
}
|
||||
|
||||
// 获取首页文章数据
|
||||
export function getDecorateArticle(params?: any) {
|
||||
return request.get({ url: '/decorate.data/article', params })
|
||||
}
|
||||
|
||||
// 底部导航详情
|
||||
export function getDecorateTabbar(params?: any) {
|
||||
return request.get({ url: '/decorate.tabbar/detail', params })
|
||||
}
|
||||
|
||||
// 底部导航保存
|
||||
export function setDecorateTabbar(params: any) {
|
||||
return request.post({ url: '/decorate.tabbar/save', params })
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @description 获取热门搜索数据
|
||||
*/
|
||||
export function getSearch() {
|
||||
return request.get({ url: '/setting/HotSearch/getConfig' })
|
||||
}
|
||||
|
||||
export interface List {
|
||||
name: string // 搜索关键字
|
||||
sort: number // 热门搜索排序
|
||||
}
|
||||
|
||||
export interface Search {
|
||||
status: number // 是否开启搜索0/1
|
||||
data: List[]
|
||||
}
|
||||
/**
|
||||
* @return { Promise }
|
||||
* @param { Search } Search
|
||||
* @description 设置热门搜索
|
||||
*/
|
||||
export function setSearch(params: Search) {
|
||||
return request.post({ url: '/setting/HotSearch/setConfig', params })
|
||||
}
|
||||
@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup
|
||||
ref="popupRef"
|
||||
:title="popupTitle"
|
||||
:async="true"
|
||||
width="550px"
|
||||
@confirm="handleSubmit"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
|
||||
<el-form-item label="栏目名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入栏目名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<div>
|
||||
<el-input-number v-model="formData.sort" :min="0" :max="9999" />
|
||||
<div class="form-tips">默认为0， 数值越大越排前</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="is_show">
|
||||
<el-switch v-model="formData.is_show" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { articleCateEdit, articleCateAdd, articleCateDetail } from '@/api/article'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑栏目' : '新增栏目'
|
||||
})
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
sort: 0,
|
||||
is_show: 1
|
||||
})
|
||||
|
||||
const formRules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入栏目名称',
|
||||
trigger: ['blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
mode.value == 'edit' ? await articleCateEdit(formData) : await articleCateAdd(formData)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
const open = (type = 'add') => {
|
||||
mode.value = type
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
const setFormData = (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
const data = await articleCateDetail({
|
||||
id: row.id
|
||||
})
|
||||
setFormData(data)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
@ -1,108 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-alert
|
||||
type="warning"
|
||||
title="温馨提示：用于管理网站的分类，只可添加到一级"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never" v-loading="pager.loading">
|
||||
<div>
|
||||
<el-button
|
||||
class="mb-4"
|
||||
v-perms="['article.articleCate/add']"
|
||||
type="primary"
|
||||
@click="handleAdd()"
|
||||
>
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table size="large" border :data="pager.lists">
|
||||
<el-table-column label="栏目名称" prop="name" min-width="120" />
|
||||
<el-table-column label="文章数" prop="article_count" min-width="120" />
|
||||
<el-table-column label="状态" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-perms="['article.articleCate/updateStatus']"
|
||||
v-model="row.is_show"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="changeStatus($event, row.id)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="sort" min-width="120" />
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-perms="['article.articleCate/edit']"
|
||||
type="primary"
|
||||
link
|
||||
@click="handleEdit(row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-perms="['article.articleCate/delete']"
|
||||
type="danger"
|
||||
link
|
||||
@click="handleDelete(row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="flex justify-end mt-4">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="articleColumn">
|
||||
import { articleCateDelete, articleCateLists, articleCateStatus } from '@/api/article'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import feedback from '@/utils/feedback'
|
||||
import EditPopup from './edit.vue'
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
const showEdit = ref(false)
|
||||
|
||||
const { pager, getLists } = usePaging({
|
||||
fetchFun: articleCateLists
|
||||
})
|
||||
const handleAdd = async () => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('add')
|
||||
}
|
||||
|
||||
const handleEdit = async (data: any) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('edit')
|
||||
editRef.value?.getDetail(data)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await feedback.confirm('确定要删除？')
|
||||
await articleCateDelete({ id })
|
||||
getLists()
|
||||
}
|
||||
|
||||
const changeStatus = async (is_show: any, id: number) => {
|
||||
try {
|
||||
await articleCateStatus({ id, is_show })
|
||||
getLists()
|
||||
} catch (error) {
|
||||
getLists()
|
||||
}
|
||||
}
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
@ -1,173 +0,0 @@
|
||||
<template>
|
||||
<div class="article-edit">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-page-header :content="$route.meta.title" @back="$router.back()" />
|
||||
</el-card>
|
||||
<el-card class="mt-4 !border-none" shadow="never">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
class="ls-form"
|
||||
:model="formData"
|
||||
label-width="85px"
|
||||
:rules="rules"
|
||||
>
|
||||
<div class="xl:flex">
|
||||
<div>
|
||||
<el-form-item label="文章标题" prop="title">
|
||||
<div class="w-80">
|
||||
<el-input
|
||||
v-model="formData.title"
|
||||
placeholder="请输入文章标题"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 3 }"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章栏目" prop="cid">
|
||||
<el-select
|
||||
class="w-80"
|
||||
v-model="formData.cid"
|
||||
placeholder="请选择文章栏目"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsData.article_cate"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章简介" prop="desc">
|
||||
<div class="w-80">
|
||||
<el-input
|
||||
v-model="formData.desc"
|
||||
placeholder="请输入文章简介"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 6 }"
|
||||
:maxlength="200"
|
||||
show-word-limit
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="摘要" prop="abstract">
|
||||
<div class="w-80">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 6, maxRows: 6 }"
|
||||
v-model="formData.abstract"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章封面" prop="image">
|
||||
<div>
|
||||
<div>
|
||||
<material-picker v-model="formData.image" :limit="1" />
|
||||
</div>
|
||||
<div class="form-tips">建议尺寸：240*180px</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="作者" prop="author">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.author" placeholder="请输入作者名称" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<div>
|
||||
<el-input-number v-model="formData.sort" :min="0" :max="9999" />
|
||||
<div class="form-tips">默认为0， 数值越大越排前</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="初始浏览量" prop="click_virtual">
|
||||
<div>
|
||||
<el-input-number v-model="formData.click_virtual" :min="0" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章状态" required prop="is_show">
|
||||
<el-radio-group v-model="formData.is_show">
|
||||
<el-radio :label="1">显示</el-radio>
|
||||
<el-radio :label="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="xl:ml-20">
|
||||
<el-form-item label="文章内容" prop="content">
|
||||
<editor v-model="formData.content" :height="667" :width="375" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<footer-btns>
|
||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="articleListsEdit">
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { useDictOptions } from '@/hooks/useDictOptions'
|
||||
import { articleDetail, articleEdit, articleAdd, articleCateAll } from '@/api/article'
|
||||
import useMultipleTabs from '@/hooks/useMultipleTabs'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
title: '',
|
||||
image: '',
|
||||
cid: '',
|
||||
desc: '',
|
||||
author: '',
|
||||
content: '',
|
||||
click_virtual: 0,
|
||||
sort: 0,
|
||||
is_show: 1,
|
||||
abstract: ''
|
||||
})
|
||||
|
||||
const { removeTab } = useMultipleTabs()
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const rules = reactive({
|
||||
title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
|
||||
cid: [{ required: true, message: '请选择文章栏目', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
const getDetails = async () => {
|
||||
const data = await articleDetail({
|
||||
id: route.query.id
|
||||
})
|
||||
Object.keys(formData).forEach((key) => {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
})
|
||||
}
|
||||
|
||||
const { optionsData } = useDictOptions<{
|
||||
article_cate: any[]
|
||||
}>({
|
||||
article_cate: {
|
||||
api: articleCateAll
|
||||
}
|
||||
})
|
||||
|
||||
const handleSave = async () => {
|
||||
await formRef.value?.validate()
|
||||
if (route.query.id) {
|
||||
await articleEdit(formData)
|
||||
} else {
|
||||
await articleAdd(formData)
|
||||
}
|
||||
removeTab()
|
||||
router.back()
|
||||
}
|
||||
|
||||
route.query.id && getDetails()
|
||||
</script>
|
||||
@ -1,170 +0,0 @@
|
||||
<template>
|
||||
<div class="article-lists">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
|
||||
<el-form-item label="文章标题">
|
||||
<el-input
|
||||
class="w-[280px]"
|
||||
v-model="queryParams.title"
|
||||
clearable
|
||||
@keyup.enter="resetPage"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="栏目名称">
|
||||
<el-select class="w-[280px]" v-model="queryParams.cid">
|
||||
<el-option label="全部" value />
|
||||
<el-option
|
||||
v-for="item in optionsData.article_cate"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章状态">
|
||||
<el-select class="w-[280px]" v-model="queryParams.is_show">
|
||||
<el-option label="全部" value />
|
||||
<el-option label="显示" :value="1" />
|
||||
<el-option label="隐藏" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetPage">查询</el-button>
|
||||
<el-button @click="resetParams">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div>
|
||||
<router-link
|
||||
v-perms="['article.article/add', 'article.article/add:edit']"
|
||||
:to="{
|
||||
path: getRoutePath('article.article/add:edit')
|
||||
}"
|
||||
>
|
||||
<el-button type="primary" class="mb-4">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
发布文章
|
||||
</el-button>
|
||||
</router-link>
|
||||
</div>
|
||||
<el-table size="large" border v-loading="pager.loading" :data="pager.lists">
|
||||
<el-table-column label="ID" prop="id" min-width="80" />
|
||||
<el-table-column label="封面" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<image-contain
|
||||
v-if="row.image"
|
||||
:src="row.image"
|
||||
:width="60"
|
||||
:height="45"
|
||||
:preview-src-list="[row.image]"
|
||||
preview-teleported
|
||||
fit="contain"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="标题"
|
||||
prop="title"
|
||||
min-width="160"
|
||||
show-tooltip-when-overflow
|
||||
/>
|
||||
<el-table-column label="栏目" prop="cate_name" min-width="100" />
|
||||
<el-table-column label="作者" prop="author" min-width="120" />
|
||||
<el-table-column label="浏览量" prop="click" min-width="100" />
|
||||
<el-table-column label="状态" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-perms="['article.article/updateStatus']"
|
||||
v-model="row.is_show"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="changeStatus($event, row.id)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="sort" min-width="100" />
|
||||
<el-table-column label="发布时间" prop="create_time" min-width="120" />
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-perms="['article.article/edit', 'article.article/add:edit']"
|
||||
type="primary"
|
||||
link
|
||||
>
|
||||
<router-link
|
||||
:to="{
|
||||
path: getRoutePath('article.article/add:edit'),
|
||||
query: {
|
||||
id: row.id
|
||||
}
|
||||
}"
|
||||
>
|
||||
编辑
|
||||
</router-link>
|
||||
</el-button>
|
||||
<el-button
|
||||
v-perms="['article.article/delete']"
|
||||
type="danger"
|
||||
link
|
||||
@click="handleDelete(row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="flex justify-end mt-4">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="articleLists">
|
||||
import { articleLists, articleDelete, articleStatus, articleCateAll } from '@/api/article'
|
||||
import { useDictOptions } from '@/hooks/useDictOptions'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import { getRoutePath } from '@/router'
|
||||
import feedback from '@/utils/feedback'
|
||||
const queryParams = reactive({
|
||||
title: '',
|
||||
cid: '',
|
||||
is_show: ''
|
||||
})
|
||||
|
||||
const { pager, getLists, resetPage, resetParams } = usePaging({
|
||||
fetchFun: articleLists,
|
||||
params: queryParams
|
||||
})
|
||||
|
||||
const { optionsData } = useDictOptions<{
|
||||
article_cate: any[]
|
||||
}>({
|
||||
article_cate: {
|
||||
api: articleCateAll
|
||||
}
|
||||
})
|
||||
|
||||
const changeStatus = async (is_show: any, id: number) => {
|
||||
try {
|
||||
await articleStatus({ id, is_show })
|
||||
getLists()
|
||||
} catch (error) {
|
||||
getLists()
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await feedback.confirm('确定要删除？')
|
||||
await articleDelete({ id })
|
||||
getLists()
|
||||
}
|
||||
|
||||
onActivated(() => {
|
||||
getLists()
|
||||
})
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-alert type="warning" title="温馨提示：H5设置" :closable="false" show-icon />
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<el-form ref="formRef" :model="formData" label-width="120px">
|
||||
<el-form-item label="渠道状态" required prop="status">
|
||||
<div>
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :label="1">开启</el-radio>
|
||||
<el-radio :label="0">关闭</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">状态为关闭时，将不对外提供服务，请谨慎操作</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="关闭后访问页面" prop="page_status">
|
||||
<el-radio-group v-model="formData.page_status">
|
||||
<el-radio :label="0">空页面</el-radio>
|
||||
<el-radio :label="1">自定义链接</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="page_url" v-if="formData.page_status == 1">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.page_url" placeholder="请输入完整的url" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="访问链接">
|
||||
<div class="flex-1 min-w-0 break-words">
|
||||
{{ formData.url }}
|
||||
<el-button v-copy="formData.url">复制</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<footer-btns v-perms="['channel/web_page_setting/setConfig']">
|
||||
<el-button type="primary" @click="handelSave">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="h5Config">
|
||||
import { getH5Config, setH5Config } from '@/api/channel/h5'
|
||||
|
||||
const formData = reactive({
|
||||
status: 0,
|
||||
page_status: 0,
|
||||
page_url: '',
|
||||
url: ''
|
||||
})
|
||||
|
||||
const getDetail = async () => {
|
||||
const data = await getH5Config()
|
||||
for (const key in formData) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
|
||||
const handelSave = async () => {
|
||||
await setH5Config(formData)
|
||||
getDetail()
|
||||
}
|
||||
|
||||
getDetail()
|
||||
</script>
|
||||
@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-alert
|
||||
type="warning"
|
||||
title="温馨提示：填写微信开放平台开发配置，请前往微信开放平台创建应用并完成认证；网站应用配置主要用于网站微信登录和微信支付"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</el-card>
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="160px">
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div class="font-medium mb-7">网站应用</div>
|
||||
<el-form-item label="AppID" prop="app_id">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.app_id" placeholder="请输入AppID" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="AppSecret" prop="app_secret">
|
||||
<div>
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.app_secret" placeholder="请输入AppSecret" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
</el-form>
|
||||
<footer-btns v-perms="['channel/OpenSetting/setConfig']">
|
||||
<el-button type="primary" @click="handelSave">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="wxDevConfig">
|
||||
import { getOpenSettingConfig, setOpenSettingConfig } from '@/api/channel/open_setting'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
|
||||
const formData = reactive({
|
||||
app_id: '',
|
||||
app_secret: ''
|
||||
})
|
||||
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const formRules = {
|
||||
app_id: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入AppID',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
app_secret: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入AppSecret',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
const data = await getOpenSettingConfig()
|
||||
for (const key in formData) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
|
||||
const handelSave = async () => {
|
||||
await formRef.value?.validate()
|
||||
await setOpenSettingConfig(formData)
|
||||
getDetail()
|
||||
}
|
||||
|
||||
getDetail()
|
||||
</script>
|
||||
@ -1,198 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-alert
|
||||
type="warning"
|
||||
title="温馨提示：填写微信小程序开发配置，请前往微信公众平台申请小程序并完成认证"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</el-card>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
:label-width="appStore.isMobile ? '80px' : '160px'"
|
||||
>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div class="font-medium mb-7">微信小程序</div>
|
||||
<el-form-item label="小程序名称" prop="name">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.name" placeholder="请输入小程序名称" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="原始ID" prop="original_id">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.original_id" placeholder="请输入原始ID" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="小程序码" prop="qr_code">
|
||||
<div class="flex-1">
|
||||
<div>
|
||||
<material-picker v-model="formData.qr_code" :limit="1" />
|
||||
</div>
|
||||
<div class="form-tips">建议尺寸：宽400px*高400px。jpg，jpeg，png格式</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div class="font-medium mb-7">开发者ID</div>
|
||||
<el-form-item label="AppID" prop="app_id">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.app_id" placeholder="请输入AppID" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="AppSecret" prop="app_secret">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.app_secret" placeholder="请输入AppSecret" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="form-tips">
|
||||
小程序账号登录微信公众平台，点击开发>开发设置->开发者ID，设置AppID和AppSecret
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div class="font-medium mb-7">服务器域名</div>
|
||||
<el-form-item label="request合法域名" prop="appId">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="sm:flex">
|
||||
<div class="mr-4 sm:w-80 flex">
|
||||
<el-input v-model="formData.request_domain" disabled />
|
||||
</div>
|
||||
<el-button v-copy="formData.request_domain">复制</el-button>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
小程序账号登录微信公众平台，点击开发>开发设置->服务器域名，填写https协议域名
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="socket合法域名">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="sm:flex">
|
||||
<div class="mr-4 sm:w-80 flex">
|
||||
<el-input v-model="formData.socket_domain" disabled />
|
||||
</div>
|
||||
<el-button v-copy="formData.socket_domain">复制</el-button>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
小程序账号登录微信公众平台，点击开发>开发设置->服务器域名，填写wss协议域名
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="uploadFile合法域名">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="sm:flex">
|
||||
<div class="mr-4 sm:w-80 flex">
|
||||
<el-input v-model="formData.upload_file_domain" disabled />
|
||||
</div>
|
||||
<el-button v-copy="formData.upload_file_domain">复制</el-button>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
小程序账号登录微信公众平台，点击开发>开发设置->服务器域名，填写https协议域名
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="downloadFile合法域名">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="sm:flex">
|
||||
<div class="mr-4 sm:w-80 flex">
|
||||
<el-input v-model="formData.download_file_domain" disabled />
|
||||
</div>
|
||||
<el-button v-copy="formData.download_file_domain">复制</el-button>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
小程序账号登录微信公众平台，点击开发>开发设置->服务器域名，填写https协议域名
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="udp合法域名">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="sm:flex">
|
||||
<div class="mr-4 sm:w-80 flex">
|
||||
<el-input v-model="formData.udp_domain" disabled />
|
||||
</div>
|
||||
<el-button v-copy="formData.udp_domain">复制</el-button>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
小程序账号登录微信公众平台，点击开发>开发设置->服务器域名，填写udp协议域名
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div class="font-medium mb-7">业务域名</div>
|
||||
<el-form-item label="业务域名">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="sm:flex">
|
||||
<div class="mr-4 sm:w-80 flex">
|
||||
<el-input v-model="formData.business_domain" disabled />
|
||||
</div>
|
||||
<el-button v-copy="formData.business_domain">复制</el-button>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
小程序账号登录微信公众平台，点击开发>开发设置->业务域名，填写业务域名
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
</el-form>
|
||||
<footer-btns v-perms="['channel/mnp_settings/setConfig']">
|
||||
<el-button type="primary" @click="handelSave">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="weappConfig">
|
||||
import { getWeappConfig, setWeappConfig } from '@/api/channel/weapp'
|
||||
import useAppStore from '@/stores/modules/app'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
original_id: '',
|
||||
qr_code: '',
|
||||
app_id: '',
|
||||
app_secret: '',
|
||||
business_domain: '',
|
||||
download_file_domain: '',
|
||||
request_domain: '',
|
||||
socket_domain: '',
|
||||
tcpDomain: '',
|
||||
udp_domain: '',
|
||||
upload_file_domain: ''
|
||||
})
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const formRules = {
|
||||
app_id: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入AppID',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
app_secret: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入AppSecret',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
]
|
||||
}
|
||||
const getDetail = async () => {
|
||||
const data = await getWeappConfig()
|
||||
for (const key in formData) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
|
||||
const handelSave = async () => {
|
||||
await formRef.value?.validate()
|
||||
await setWeappConfig(formData)
|
||||
getDetail()
|
||||
}
|
||||
|
||||
getDetail()
|
||||
</script>
|
||||
@ -1,215 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-alert
|
||||
type="warning"
|
||||
title="温馨提示：填写微信公众号开发配置，请前往微信公众平台申请服务号并完成认证"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</el-card>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
:label-width="appStore.isMobile ? '80px' : '160px'"
|
||||
>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div class="font-medium mb-7">微信公众号</div>
|
||||
<el-form-item label="公众号名称" prop="name">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.name" placeholder="请输入公众号名称" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="原始ID" prop="original_id">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.original_id" placeholder="请输入原始ID" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="公众号二维码" prop="qr_code">
|
||||
<div>
|
||||
<div>
|
||||
<material-picker v-model="formData.qr_code" :limit="1" />
|
||||
</div>
|
||||
<div class="form-tips">建议尺寸：宽400px*高400px。jpg，jpeg，png格式</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div class="font-medium mb-7">公众号开发者信息</div>
|
||||
<el-form-item label="AppID" prop="app_id">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.app_id" placeholder="请输入AppID" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="AppSecret" prop="app_secret">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.app_secret" placeholder="请输入AppSecret" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="form-tips">
|
||||
小程序账号登录微信公众平台，点击开发>开发设置->开发者ID，设置AppID和AppSecret
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div class="font-medium mb-7">服务器配置</div>
|
||||
<el-form-item label="URL">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="sm:flex">
|
||||
<div class="mr-4 sm:w-80 flex">
|
||||
<el-input v-model="formData.url" disabled />
|
||||
</div>
|
||||
<el-button v-copy="formData.url">复制</el-button>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
登录微信公众平台，点击开发>基本配置>服务器配置，填写服务器地址（URL）
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="Token" prop="Token">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.token" placeholder="请输入Token" />
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
登录微信公众平台，点击开发>基本配置>服务器配置，设置令牌Token。不填默认为“likeshop”
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="EncodingAESKey" prop="encoding_aes_key">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="w-80">
|
||||
<el-input
|
||||
v-model="formData.encoding_aes_key"
|
||||
placeholder="请输入EncodingAESKey"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
消息加密密钥由43位字符组成，字符范围为A-Z,a-z,0-9
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="消息加密方式" required prop="encryption_type">
|
||||
<div class="flex-1 min-w-0">
|
||||
<el-radio-group
|
||||
class="flex-col !items-start min-w-0"
|
||||
v-model="formData.encryption_type"
|
||||
>
|
||||
<el-radio :label="1">
|
||||
明文模式 (不使用消息体加解密功能，安全系数较低)
|
||||
</el-radio>
|
||||
|
||||
<el-radio :label="2">
|
||||
兼容模式 (明文、密文将共存，方便开发者调试和维护)
|
||||
</el-radio>
|
||||
<el-radio :label="3">
|
||||
安全模式（推荐） (消息包为纯密文，需要开发者加密和解密，安全系数高)
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div class="font-medium mb-7">功能设置</div>
|
||||
<el-form-item label="业务域名">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="sm:flex">
|
||||
<div class="mr-4 sm:w-80 flex">
|
||||
<el-input v-model="formData.business_domain" disabled />
|
||||
</div>
|
||||
<el-button v-copy="formData.business_domain">复制</el-button>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
登录微信公众平台，点击设置>公众号设置>功能设置，填写业务域名
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="JS接口安全域名">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="sm:flex">
|
||||
<div class="mr-4 sm:w-80 flex">
|
||||
<el-input v-model="formData.js_secure_domain" disabled />
|
||||
</div>
|
||||
<el-button v-copy="formData.js_secure_domain">复制</el-button>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
登录微信公众平台，点击设置>公众号设置>功能设置，填写JS接口安全域名
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="网页授权域名">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="sm:flex">
|
||||
<div class="mr-4 sm:w-80 flex">
|
||||
<el-input v-model="formData.web_auth_domain" disabled />
|
||||
</div>
|
||||
<el-button v-copy="formData.web_auth_domain">复制</el-button>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
登录微信公众平台，点击设置>公众号设置>功能设置，填写网页授权域名
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
</el-form>
|
||||
<footer-btns v-perms="['channel/official_account_setting/setConfig']">
|
||||
<el-button type="primary" @click="handelSave">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="wxOaConfig">
|
||||
import { getOaConfig, setOaConfig } from '@/api/channel/wx_oa'
|
||||
import useAppStore from '@/stores/modules/app'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
const appStore = useAppStore()
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
original_id: ' ',
|
||||
qr_code: '',
|
||||
app_id: '',
|
||||
app_secret: '',
|
||||
url: '',
|
||||
token: '',
|
||||
encoding_aes_key: '',
|
||||
encryption_type: 1,
|
||||
business_domain: '',
|
||||
js_secure_domain: '',
|
||||
web_auth_domain: ''
|
||||
})
|
||||
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const formRules = {
|
||||
app_id: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入AppID',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
app_secret: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入AppSecret',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
const data = await getOaConfig()
|
||||
for (const key in formData) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
|
||||
const handelSave = async () => {
|
||||
await formRef.value?.validate()
|
||||
await setOaConfig(formData)
|
||||
getDetail()
|
||||
}
|
||||
|
||||
getDetail()
|
||||
</script>
|
||||
@ -1,47 +0,0 @@
|
||||
<script setup lang="ts" name="wxOaMenu">
|
||||
import OaPhone from './menu_com/oa-phone.vue'
|
||||
import OaAttr from './menu_com/oa-attr.vue'
|
||||
import { useMenuOa } from './menu_com/useMenuOa'
|
||||
|
||||
const { getOaMenuFunc, handleSave, handlePublish } = useMenuOa(undefined)
|
||||
getOaMenuFunc()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="menu-oa">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-alert
|
||||
type="warning"
|
||||
title="配置微信公众号菜单，点击确认，保存菜单并发布至微信公众号"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div class="lg:flex flex-1">
|
||||
<!-- Phone -->
|
||||
<oa-phone></oa-phone>
|
||||
|
||||
<!-- Attr -->
|
||||
<div class="mt-4 lg:mt-0 max-w-[400px]">
|
||||
<oa-attr></oa-attr>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<footer-btns>
|
||||
<el-button type="primary" @click="handleSave" v-perms="['channel:oaMenu:save']">
|
||||
保存
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handlePublish" v-perms="['channel:oaMenu:publish']">
|
||||
发布
|
||||
</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-oa {
|
||||
}
|
||||
</style>
|
||||
@ -1,90 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useMenuOa } from './useMenuOa'
|
||||
import oaMenuForm from './oa-menu-form.vue'
|
||||
import oaMenuFormEdit from './oa-menu-form-edit.vue'
|
||||
|
||||
const menuRef = shallowRef()
|
||||
|
||||
const {
|
||||
menuList,
|
||||
menuIndex,
|
||||
handleAddSubMenu,
|
||||
handleEditSubMenu,
|
||||
handleDelMenu,
|
||||
handleDelSubMenu
|
||||
} = useMenuOa(menuRef)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Attr -->
|
||||
<template v-for="(attrItem, attrIndex) in menuList" :key="attrIndex">
|
||||
<div class="flex-1 oa-attr min-w-0" v-show="attrIndex === menuIndex">
|
||||
<div class="text-base oa-attr-title">菜单配置</div>
|
||||
|
||||
<del-wrap @close="handleDelMenu(menuIndex)">
|
||||
<div class="flex items-center w-full p-4 mt-4 rounded bg-fill-light">
|
||||
<oa-menu-form
|
||||
ref="menuRef"
|
||||
modular="master"
|
||||
v-model:name="attrItem.name"
|
||||
v-model:menuType="attrItem.has_menu"
|
||||
v-model:visitType="attrItem.type"
|
||||
v-model:url="attrItem.url"
|
||||
v-model:appId="attrItem.appid"
|
||||
v-model:pagePath="attrItem.pagepath"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<!-- 编辑子菜单 -->
|
||||
<ul>
|
||||
<li
|
||||
class="flex"
|
||||
v-for="(subItem, subIndex) in attrItem.sub_button"
|
||||
:key="subIndex"
|
||||
style="padding: 8px"
|
||||
>
|
||||
<span class="mr-auto">{{ subItem.name }}</span>
|
||||
<!-- 编辑子菜单 -->
|
||||
<oa-menu-form-edit
|
||||
modular="edit"
|
||||
:subItem="subItem"
|
||||
@edit="handleEditSubMenu($event, subIndex)"
|
||||
>
|
||||
<el-button link>
|
||||
<el-icon><EditPen /></el-icon>
|
||||
</el-button>
|
||||
</oa-menu-form-edit>
|
||||
|
||||
<!-- 删除子菜单 -->
|
||||
<popup @confirm="handleDelSubMenu(menuIndex, subIndex)">
|
||||
是否删除当前子菜单？
|
||||
<template #trigger>
|
||||
<el-button link>
|
||||
<el-icon class="ml-5"><Delete /></el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</popup>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 新增子菜单 -->
|
||||
<oa-menu-form-edit modular="add" @add="handleAddSubMenu">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
:disabled="attrItem.sub_button.length >= 5"
|
||||
>
|
||||
添加子菜单({{ attrItem.sub_button.length }}/5)
|
||||
</el-button>
|
||||
</oa-menu-form-edit>
|
||||
</div>
|
||||
</oa-menu-form>
|
||||
</div>
|
||||
</del-wrap>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.oa-attr {
|
||||
}
|
||||
</style>
|
||||
@ -1,73 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import oaMenuForm from './oa-menu-form.vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'add', value: any): void
|
||||
(event: 'edit', value: any): void
|
||||
}>()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modular: string
|
||||
subItem?: any
|
||||
}>(),
|
||||
{
|
||||
modular: 'edit',
|
||||
subItem: {}
|
||||
}
|
||||
)
|
||||
|
||||
const menuFormEditRef = shallowRef()
|
||||
const menuFromPopupRef = shallowRef()
|
||||
|
||||
const form = {
|
||||
name: '',
|
||||
type: 'view',
|
||||
url: '',
|
||||
appid: '',
|
||||
pagepath: ''
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
if (Object.keys(props.subItem).length != 0) {
|
||||
for (const key in form) {
|
||||
//@ts-ignore
|
||||
form[key] = props.subItem[key]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const handleRules = async () => {
|
||||
await menuFormEditRef.value.menuFormRef.validate()
|
||||
if (props.modular === 'edit') {
|
||||
emit('edit', { ...form })
|
||||
} else {
|
||||
emit('add', { ...form })
|
||||
}
|
||||
menuFromPopupRef.value.close()
|
||||
menuFormEditRef.value.menuFormRef.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<popup
|
||||
ref="menuFromPopupRef"
|
||||
async
|
||||
:clickModalClose="false"
|
||||
:title="`${modular === 'add' ? '新增' : '编辑'}子菜单`"
|
||||
@confirm="handleRules"
|
||||
>
|
||||
<oa-menu-form
|
||||
ref="menuFormEditRef"
|
||||
modular="secondary"
|
||||
v-model:name="form.name"
|
||||
v-model:visitType="form.type"
|
||||
v-model:url="form.url"
|
||||
v-model:appId="form.appid"
|
||||
v-model:pagePath="form.pagepath"
|
||||
></oa-menu-form>
|
||||
<template #trigger>
|
||||
<slot></slot>
|
||||
</template>
|
||||
</popup>
|
||||
</template>
|
||||
@ -1,108 +0,0 @@
|
||||
<template>
|
||||
<el-form ref="menuFormRef" :rules="rules" :model="menuForm" label-width="100px">
|
||||
<!-- 菜单名称 -->
|
||||
<el-form-item :label="modular === 'master' ? '主菜单名称' : '子菜单名称'" prop="name">
|
||||
<el-input v-model="menuForm.name" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 菜单类型 -->
|
||||
<el-form-item label="主菜单类型" prop="menuType" v-if="modular === 'master'">
|
||||
<el-radio-group v-model="menuForm.menuType">
|
||||
<el-radio :label="false">不配置子菜单</el-radio>
|
||||
<el-radio :label="true">配置子菜单</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="" v-if="menuForm.menuType && modular === 'master'">
|
||||
<slot></slot>
|
||||
</el-form-item>
|
||||
|
||||
<template v-if="!menuForm.menuType">
|
||||
<!-- 跳转链接 -->
|
||||
<el-form-item label="跳转链接" prop="visitType">
|
||||
<el-radio-group v-model="menuForm.visitType">
|
||||
<el-radio label="view">网页</el-radio>
|
||||
<el-radio label="miniprogram">小程序</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 网址 -->
|
||||
<el-form-item label="网址" prop="url">
|
||||
<el-input v-model="menuForm.url" />
|
||||
</el-form-item>
|
||||
|
||||
<template v-if="menuForm.visitType == 'miniprogram'">
|
||||
<!-- AppId -->
|
||||
<el-form-item label="AppId" prop="appId">
|
||||
<el-input v-model="menuForm.appId" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 路径 -->
|
||||
<el-form-item label="路径" prop="pagePath">
|
||||
<el-input v-model="menuForm.pagePath" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { rules } from './useMenuOa'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:name',
|
||||
'update:menuType',
|
||||
'update:visitType',
|
||||
'update:url',
|
||||
'update:appId',
|
||||
'update:pagePath'
|
||||
])
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modular?: string
|
||||
name?: string
|
||||
menuType?: boolean
|
||||
visitType?: string
|
||||
url?: string
|
||||
appId?: string
|
||||
pagePath?: string
|
||||
}>(),
|
||||
{
|
||||
modular: 'master',
|
||||
name: '',
|
||||
menuType: false,
|
||||
visitType: 'view',
|
||||
url: '',
|
||||
appId: '',
|
||||
pagePath: ''
|
||||
}
|
||||
)
|
||||
|
||||
const menuFormRef = shallowRef<FormInstance>()
|
||||
// 表单数据
|
||||
const menuForm = ref({ ...props })
|
||||
|
||||
watch(
|
||||
() => props,
|
||||
(value) => {
|
||||
menuForm.value = value
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watchEffect(() => {
|
||||
if (props.modular === 'master') {
|
||||
emit('update:menuType', menuForm.value.menuType)
|
||||
}
|
||||
emit('update:name', menuForm.value.name)
|
||||
emit('update:visitType', menuForm.value.visitType)
|
||||
emit('update:url', menuForm.value.url)
|
||||
emit('update:appId', menuForm.value.appId)
|
||||
emit('update:pagePath', menuForm.value.pagePath)
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
menuFormRef
|
||||
})
|
||||
</script>
|
||||
@ -1,121 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useMenuOa } from './useMenuOa'
|
||||
import useSettingStore from '@/stores/modules/setting'
|
||||
|
||||
// 菜单颜色（这里采用全局颜色）
|
||||
const settingStore = useSettingStore()
|
||||
const themeColor = computed(() => settingStore.theme || '#4A5DFF')
|
||||
|
||||
const { menuList, menuIndex, handleAddMenu } = useMenuOa(useMenuOa)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Phone -->
|
||||
<div class="oa-phone mr-[35px]">
|
||||
<div class="oa-phone-content"></div>
|
||||
|
||||
<div class="flex oa-phone-menu">
|
||||
<div class="flex items-center justify-center oa-phone-menu-switch">
|
||||
<el-icon>
|
||||
<Grid />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<template v-for="(menuItem, i) in menuList" :key="i">
|
||||
<div class="relative flex-1" @click="menuIndex = i">
|
||||
<!-- 一级菜单 -->
|
||||
<div
|
||||
class="flex items-center justify-center flex-1 text-sm oa-phone-menu-item"
|
||||
:class="{ 'active-menu': menuIndex === i }"
|
||||
>
|
||||
{{ menuItem.name }}
|
||||
</div>
|
||||
|
||||
<!-- 二级菜单 -->
|
||||
<div
|
||||
class="oa-phone-menu-subitem"
|
||||
v-show="menuItem.sub_button.length && menuItem.has_menu"
|
||||
>
|
||||
<template v-for="(subItem, index2) in menuItem.sub_button" :key="index2">
|
||||
<div class="oa-phone-menu-subitem-title">
|
||||
{{ subItem.name }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 新增菜单 -->
|
||||
<template v-if="menuList.length <= 2">
|
||||
<div class="flex items-center justify-center flex-1 h-full" @click="handleAddMenu">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.oa-phone {
|
||||
width: 260px;
|
||||
height: 461px;
|
||||
border: 1px solid #e5e5ea;
|
||||
flex: none;
|
||||
&-content {
|
||||
height: 420px;
|
||||
border-bottom: 1px solid #e5e5ea;
|
||||
}
|
||||
|
||||
&-menu {
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
&-switch {
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #e5e5ea;
|
||||
}
|
||||
|
||||
// 一级菜单
|
||||
&-item {
|
||||
height: 100%;
|
||||
border-right: 1px solid #e5e5ea;
|
||||
}
|
||||
|
||||
&-item:nth-child(4) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.active-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.active-menu::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
border: 1px solid v-bind(themeColor);
|
||||
}
|
||||
|
||||
// 二级菜单
|
||||
&-subitem {
|
||||
width: 98%;
|
||||
left: 2px;
|
||||
bottom: calc(100% + 10px);
|
||||
position: absolute;
|
||||
border: 1px solid #e5e5ea;
|
||||
border-top: none;
|
||||
|
||||
&-title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e5e5ea;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,165 +0,0 @@
|
||||
import { ref } from 'vue'
|
||||
import feedback from '@/utils/feedback'
|
||||
import type { FormRules } from 'element-plus'
|
||||
import { setOaMenuSave, getOaMenu, setOaMenuPublish } from '@/api/channel/wx_oa'
|
||||
import type { Menu } from '@/api/channel/wx_oa'
|
||||
|
||||
// 菜单实例
|
||||
export const menuRef = shallowRef()
|
||||
// 菜单数据
|
||||
const menuList = ref<Menu[]>([])
|
||||
const menuIndex = ref<number>(0)
|
||||
|
||||
// 校验
|
||||
export const rules = reactive<FormRules>({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
{
|
||||
min: 1,
|
||||
max: 12,
|
||||
message: '长度限制12个字符',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
menuType: [
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
visitType: [
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
url: [
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
{
|
||||
pattern:
|
||||
/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/,
|
||||
message: '请输入合法的网址链接',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
appId: [
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
pagePath: [
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
export const useMenuOa = (ref: any) => {
|
||||
if (ref) menuRef.value = ref
|
||||
|
||||
// 添加主菜单
|
||||
const handleAddMenu = () => {
|
||||
menuList.value.push({
|
||||
name: '菜单名称',
|
||||
has_menu: false,
|
||||
type: 'view',
|
||||
url: '',
|
||||
appid: '',
|
||||
pagepath: '',
|
||||
sub_button: []
|
||||
})
|
||||
}
|
||||
|
||||
// 添加子菜单
|
||||
const handleAddSubMenu = (event?: Menu) => {
|
||||
const index = menuIndex.value
|
||||
if (menuList.value[index].sub_button.length >= 5) {
|
||||
feedback.msgError('已添加上限～')
|
||||
return
|
||||
}
|
||||
menuList.value[index].sub_button.push(event)
|
||||
}
|
||||
|
||||
// 编辑子菜单
|
||||
const handleEditSubMenu = (event: Menu, subIndex: number) => {
|
||||
const index = menuIndex.value
|
||||
menuList.value[index].sub_button[subIndex] = event
|
||||
}
|
||||
|
||||
// 删除主菜单
|
||||
const handleDelMenu = (index: number) => {
|
||||
if (index != 0) {
|
||||
menuIndex.value--
|
||||
}
|
||||
menuList.value.splice(index, 1)
|
||||
}
|
||||
|
||||
// 删除子菜单
|
||||
const handleDelSubMenu = (index: number, subIndex: number) => {
|
||||
menuList.value[index].sub_button.splice(subIndex, 1)
|
||||
}
|
||||
|
||||
// 获取菜单
|
||||
const getOaMenuFunc = async () => {
|
||||
try {
|
||||
menuList.value = await getOaMenu()
|
||||
} catch (error) {
|
||||
console.log('获取菜单=>', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 保存菜单
|
||||
const handleSave = async () => {
|
||||
const refs = menuRef.value.value
|
||||
for (let i = 0; i < refs.length; i++) {
|
||||
try {
|
||||
await refs[i].menuFormRef.validate()
|
||||
} catch (error) {
|
||||
menuIndex.value = i
|
||||
return
|
||||
}
|
||||
}
|
||||
await setOaMenuSave(menuList.value)
|
||||
}
|
||||
|
||||
// 保存菜单
|
||||
const handlePublish = async () => {
|
||||
const refs = menuRef.value.value
|
||||
for (let i = 0; i < refs.length; i++) {
|
||||
try {
|
||||
await refs[i].menuFormRef.validate()
|
||||
} catch (error) {
|
||||
menuIndex.value = i
|
||||
return
|
||||
}
|
||||
}
|
||||
await setOaMenuPublish(menuList.value)
|
||||
}
|
||||
|
||||
return {
|
||||
menuList,
|
||||
menuIndex,
|
||||
handleAddMenu,
|
||||
handleAddSubMenu,
|
||||
handleEditSubMenu,
|
||||
handleDelMenu,
|
||||
handleDelSubMenu,
|
||||
getOaMenuFunc,
|
||||
handleSave,
|
||||
handlePublish
|
||||
}
|
||||
}
|
||||
@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-alert
|
||||
type="warning"
|
||||
title="温馨提示：1.粉丝在公众号发送内容时，系统无法匹配情况下发送启用的默认文本回复；2.同时只能启用一个默认回复。"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div>
|
||||
<el-button class="mb-4" type="primary" @click="handleAdd()">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table size="large" :data="pager.lists" v-loading="pager.loading">
|
||||
<el-table-column label="规则名称" prop="name" min-width="120" />
|
||||
<el-table-column label="回复类型" min-width="120">
|
||||
<template #default="{ row }">
|
||||
{{ getContentType(row.content_type) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="回复内容" prop="content" min-width="120" />
|
||||
<el-table-column label="状态" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-model="row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="changeStatus(row.id)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="sort" min-width="120" />
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEdit(row)"> 编辑 </el-button>
|
||||
<el-button type="danger" link @click="handleDelete(row.id)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="flex justify-end mt-4">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { oaReplyDel, getOaReplyList, changeOaReplyStatus } from '@/api/channel/wx_oa'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import feedback from '@/utils/feedback'
|
||||
import EditPopup from './edit.vue'
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
const showEdit = ref(false)
|
||||
|
||||
const getContentType = computed(() => {
|
||||
return (val: number) => {
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '文本'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const { pager, getLists } = usePaging({
|
||||
fetchFun: getOaReplyList,
|
||||
params: {
|
||||
reply_type: 1
|
||||
}
|
||||
})
|
||||
|
||||
const handleAdd = async () => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('add', 1)
|
||||
}
|
||||
|
||||
const handleEdit = async (data: any) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('edit', 1)
|
||||
editRef.value?.getDetail(data)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await feedback.confirm('确定要删除？')
|
||||
await oaReplyDel({ id })
|
||||
feedback.msgSuccess('删除成功')
|
||||
getLists()
|
||||
}
|
||||
|
||||
const changeStatus = async (id: number) => {
|
||||
try {
|
||||
await changeOaReplyStatus({ id })
|
||||
getLists()
|
||||
} catch (error) {
|
||||
getLists()
|
||||
}
|
||||
}
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
@ -1,189 +0,0 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup
|
||||
ref="popupRef"
|
||||
:title="popupTitle"
|
||||
:async="true"
|
||||
width="500px"
|
||||
@confirm="handleSubmit"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
label-width="84px"
|
||||
:rules="formRules"
|
||||
class="pr-10"
|
||||
>
|
||||
<el-form-item label="规则名称" prop="name">
|
||||
<div class="flex-1">
|
||||
<el-input v-model="formData.name" placeholder="请输入规则名称" />
|
||||
<div class="form-tips">方便通过名称管理关注回复内容</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键词" prop="keyword" v-if="formData.reply_type == 2">
|
||||
<div class="flex-1">
|
||||
<el-input v-model="formData.keyword" placeholder="请输入关键词" />
|
||||
<div class="form-tips">方便通过名称管理关注回复内容</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="匹配方式" prop="matching_type" v-if="formData.reply_type == 2">
|
||||
<div class="flex-1">
|
||||
<el-radio-group v-model="formData.matching_type">
|
||||
<el-radio :label="1">全匹配</el-radio>
|
||||
<el-radio :label="2">模糊匹配</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">模糊匹配时，关键词部分匹配用户输入的内容即可</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="回复类型" prop="content_type" :min="0">
|
||||
<div class="flex-1">
|
||||
<el-radio-group v-model="formData.content_type">
|
||||
<el-radio :label="1">文本</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">暂时只支持文本类型</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="回复内容" prop="content">
|
||||
<div class="flex-1">
|
||||
<el-input
|
||||
v-model="formData.content"
|
||||
:autosize="{ minRows: 4, maxRows: 4 }"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
placeholder="请输入回复内容"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<div class="flex-1">
|
||||
<el-input-number v-model="formData.sort" :min="0" :max="9999" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="回复数量"
|
||||
prop="reply_num"
|
||||
required
|
||||
v-if="formData.reply_type == 2"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<el-radio-group v-model="formData.reply_num">
|
||||
<el-radio :label="1">回复匹配首词条</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">
|
||||
设置关键词匹配多条时回复的数量，暂时支持回复一条内容
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="启用状态">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { oaReplyEdit, oaReplyAdd, getOaReplyDetail } from '@/api/channel/wx_oa'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import type { FormRules } from 'element-plus'
|
||||
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑' : '新增'
|
||||
})
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
reply_type: 0,
|
||||
content_type: 1,
|
||||
keyword: '',
|
||||
content: '',
|
||||
matching_type: 1,
|
||||
status: 1,
|
||||
sort: 0,
|
||||
reply_num: 1
|
||||
})
|
||||
|
||||
const formRules: FormRules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入规则名称',
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
keyword: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入关键词',
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
matching_type: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择匹配方式',
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
content_type: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择回复类型',
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入回复内容',
|
||||
trigger: ['blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
mode.value == 'edit' ? await oaReplyEdit(formData) : await oaReplyAdd(formData)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
const open = (modes = 'add', type = 0) => {
|
||||
mode.value = modes
|
||||
formData.reply_type = type
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
const setFormData = (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
const data = await getOaReplyDetail({
|
||||
id: row.id
|
||||
})
|
||||
setFormData(data)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
@ -1,108 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-alert
|
||||
type="warning"
|
||||
title="温馨提示：1.粉丝关注公众号时，会自动发送启用的关注回复；2.同时只能启用一个关注回复。"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div>
|
||||
<el-button class="mb-4" type="primary" @click="handleAdd()">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table size="large" :data="pager.lists" v-loading="pager.loading">
|
||||
<el-table-column label="规则名称" prop="name" min-width="120" />
|
||||
<el-table-column label="回复类型" min-width="120">
|
||||
<template #default="{ row }">
|
||||
{{ getContentType(row.content_type) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="回复内容" prop="content" min-width="120" />
|
||||
<el-table-column label="状态" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-model="row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="changeStatus(row.id)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="sort" min-width="120" />
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEdit(row)"> 编辑 </el-button>
|
||||
<el-button type="danger" link @click="handleDelete(row.id)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="flex justify-end mt-4">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { oaReplyDel, getOaReplyList, changeOaReplyStatus } from '@/api/channel/wx_oa'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import feedback from '@/utils/feedback'
|
||||
import EditPopup from './edit.vue'
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
const showEdit = ref(false)
|
||||
|
||||
const getContentType = computed(() => {
|
||||
return (val: number) => {
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '文本'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const { pager, getLists } = usePaging({
|
||||
fetchFun: getOaReplyList,
|
||||
params: {
|
||||
reply_type: 1
|
||||
}
|
||||
})
|
||||
|
||||
const handleAdd = async () => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('add', 1)
|
||||
}
|
||||
|
||||
const handleEdit = async (data: any) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('edit', 1)
|
||||
editRef.value?.getDetail(data)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await feedback.confirm('确定要删除？')
|
||||
await oaReplyDel({ id })
|
||||
getLists()
|
||||
}
|
||||
|
||||
const changeStatus = async (id: number) => {
|
||||
try {
|
||||
await changeOaReplyStatus({ id })
|
||||
getLists()
|
||||
} catch (error) {
|
||||
getLists()
|
||||
}
|
||||
}
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-alert
|
||||
type="warning"
|
||||
title="温馨提示：1.粉丝在公众号发送内容时，通过关键词可触发关键词回复；2.同时可启用多个关键词回复，有多条关键词匹配时优选选择排序靠前的一条"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div>
|
||||
<el-button class="mb-4" type="primary" @click="handleAdd()">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table size="large" :data="pager.lists" v-loading="pager.loading">
|
||||
<el-table-column label="规则名称" prop="name" min-width="120" />
|
||||
|
||||
<el-table-column label="关键词" prop="keyword" min-width="120" />
|
||||
<el-table-column label="匹配方式" min-width="120">
|
||||
<template #default="{ row }">
|
||||
{{ getMatchingType(row.matching_type) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="回复类型" min-width="120">
|
||||
<template #default="{ row }">
|
||||
{{ getContentType(row.content_type) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-model="row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="changeStatus(row.id)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="sort" min-width="120" />
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEdit(row)"> 编辑 </el-button>
|
||||
<el-button type="danger" link @click="handleDelete(row.id)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="flex justify-end mt-4">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { oaReplyDel, getOaReplyList, changeOaReplyStatus } from '@/api/channel/wx_oa'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import feedback from '@/utils/feedback'
|
||||
import EditPopup from './edit.vue'
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
const showEdit = ref(false)
|
||||
|
||||
const getMatchingType = computed(() => {
|
||||
return (val: number) => {
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '全匹配'
|
||||
case 2:
|
||||
return '模糊匹配'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const getContentType = computed(() => {
|
||||
return (val: number) => {
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '文本'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const { pager, getLists } = usePaging({
|
||||
fetchFun: getOaReplyList,
|
||||
params: {
|
||||
reply_type: 2
|
||||
}
|
||||
})
|
||||
const handleAdd = async () => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('add', 2)
|
||||
}
|
||||
|
||||
const handleEdit = async (data: any) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('edit', 2)
|
||||
editRef.value?.getDetail(data)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await feedback.confirm('确定要删除？')
|
||||
await oaReplyDel({ id })
|
||||
getLists()
|
||||
}
|
||||
|
||||
const changeStatus = async (id: number) => {
|
||||
try {
|
||||
await changeOaReplyStatus({ id })
|
||||
getLists()
|
||||
} catch (error) {
|
||||
getLists()
|
||||
}
|
||||
}
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<draggable class="draggable" v-model="navLists" animation="300">
|
||||
<template v-slot:item="{ element: item, index }">
|
||||
<del-wrap class="max-w-[400px]" :key="index" @close="handleDelete(index)">
|
||||
<div class="bg-fill-light flex items-center w-full p-4 mb-4 cursor-move">
|
||||
<material-picker
|
||||
v-model="item.image"
|
||||
upload-class="bg-body"
|
||||
size="60px"
|
||||
exclude-domain
|
||||
>
|
||||
<template #upload>
|
||||
<div class="upload-btn w-[60px] h-[60px]">
|
||||
<icon name="el-icon-Plus" :size="20" />
|
||||
</div>
|
||||
</template>
|
||||
</material-picker>
|
||||
<div class="ml-3 flex-1">
|
||||
<div class="flex">
|
||||
<span class="text-tx-regular flex-none mr-3">名称</span>
|
||||
<el-input v-model="item.name" placeholder="请输入名称" />
|
||||
</div>
|
||||
<div class="flex mt-[18px]">
|
||||
<span class="text-tx-regular flex-none mr-3">链接</span>
|
||||
<link-picker v-model="item.link" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</del-wrap>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" @click="handleAdd">添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import feedback from '@/utils/feedback'
|
||||
import type { PropType } from 'vue'
|
||||
import Draggable from 'vuedraggable'
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array as PropType<any[]>,
|
||||
default: () => []
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const navLists = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(value) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
|
||||
const handleAdd = () => {
|
||||
if (props.modelValue?.length < props.max) {
|
||||
navLists.value.push({
|
||||
image: '',
|
||||
name: '导航名称',
|
||||
link: {}
|
||||
})
|
||||
} else {
|
||||
feedback.msgError(`最多添加${props.max}个`)
|
||||
}
|
||||
}
|
||||
const handleDelete = (index: number) => {
|
||||
if (props.modelValue?.length <= props.min) {
|
||||
return feedback.msgError(`最少保留${props.min}个`)
|
||||
}
|
||||
navLists.value.splice(index, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<el-image :style="styles" v-bind="props" :src="getImageUrl(src)">
|
||||
<template #placeholder>
|
||||
<div class="image-slot"></div>
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<icon name="el-icon-Picture" :size="30" />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import type { CSSProperties } from 'vue'
|
||||
import { addUnit } from '@/utils/util'
|
||||
import { imageProps } from 'element-plus'
|
||||
import useAppStore from '@/stores/modules/app'
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: 'auto'
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: 'auto'
|
||||
},
|
||||
radius: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
...imageProps
|
||||
})
|
||||
|
||||
const { getImageUrl } = useAppStore()
|
||||
const styles = computed<CSSProperties>(() => {
|
||||
return {
|
||||
width: addUnit(props.width),
|
||||
height: addUnit(props.height),
|
||||
borderRadius: addUnit(props.radius)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-image {
|
||||
display: block;
|
||||
.image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fafafa;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<div class="pages-setting">
|
||||
<div
|
||||
class="title flex items-center before:w-[3px] before:h-[14px] before:block before:bg-primary before:mr-2"
|
||||
>
|
||||
{{ widget?.title }}
|
||||
</div>
|
||||
<keep-alive>
|
||||
<component
|
||||
class="pt-5 pr-4"
|
||||
:is="widgets[widget?.name]?.attr"
|
||||
:content="widget?.content"
|
||||
:styles="widget?.styles"
|
||||
:type="type"
|
||||
/>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import widgets from '../widgets'
|
||||
|
||||
const props = defineProps({
|
||||
widget: {
|
||||
type: Object as PropType<Record<string, any>>,
|
||||
default: () => ({})
|
||||
},
|
||||
type: {
|
||||
type: String as PropType<'mobile' | 'pc'>,
|
||||
default: 'mobile'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<el-menu
|
||||
:default-active="modelValue"
|
||||
class="w-[160px] min-h-[668px] pages-menu"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item v-for="(item, key) in menus" :index="key" :key="item.id">
|
||||
<span>{{ item.name }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
defineProps({
|
||||
menus: {
|
||||
type: Object as PropType<Record<string, any>>,
|
||||
default: () => ({})
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '1'
|
||||
}
|
||||
})
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
const handleSelect = (index: string) => {
|
||||
emit('update:modelValue', index)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pages-menu {
|
||||
:deep(.el-menu-item) {
|
||||
border-color: transparent;
|
||||
&.is-active {
|
||||
border-right-width: 2px;
|
||||
border-color: var(--el-color-primary);
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<div class="pages-preview">
|
||||
<div
|
||||
v-for="(widget, index) in pageData"
|
||||
:key="widget.id"
|
||||
class="relative"
|
||||
:class="{
|
||||
'cursor-pointer': !widget?.disabled
|
||||
}"
|
||||
@click="handleClick(widget, index)"
|
||||
>
|
||||
<div
|
||||
class="absolute w-full h-full z-[100] border-dashed"
|
||||
:class="{
|
||||
select: index == modelValue,
|
||||
'border-[#dcdfe6] border-2': !widget?.disabled
|
||||
}"
|
||||
:style="widget.styles"
|
||||
></div>
|
||||
<slot>
|
||||
<component
|
||||
:is="widgets[widget?.name]?.content"
|
||||
:content="widget.content"
|
||||
:styles="widget.styles"
|
||||
:key="widget.id"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import widgets from '../widgets'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
defineProps({
|
||||
pageData: {
|
||||
type: Array as PropType<any[]>,
|
||||
default: () => []
|
||||
},
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: number): void
|
||||
}>()
|
||||
|
||||
const handleClick = (widget: any, index: number) => {
|
||||
if (widget.disabled) return
|
||||
emit('update:modelValue', index)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pages-preview {
|
||||
width: 460px;
|
||||
height: 360px;
|
||||
background: url(../../image/pc_index.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
.select {
|
||||
@apply border-primary border-solid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<div class="shadow mx-[30px] pages-preview">
|
||||
<el-scrollbar>
|
||||
<div
|
||||
v-for="(widget, index) in pageData"
|
||||
:key="widget.id"
|
||||
class="relative"
|
||||
:class="{
|
||||
'cursor-pointer': !widget?.disabled
|
||||
}"
|
||||
@click="handleClick(widget, index)"
|
||||
>
|
||||
<div
|
||||
class="absolute w-full h-full z-[100] border-dashed"
|
||||
:class="{
|
||||
select: index == modelValue,
|
||||
'border-[#dcdfe6] border-2': !widget?.disabled
|
||||
}"
|
||||
></div>
|
||||
<slot>
|
||||
<component
|
||||
:is="widgets[widget?.name]?.content"
|
||||
:content="widget.content"
|
||||
:styles="widget.styles"
|
||||
:key="widget.id"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import widgets from '../widgets'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
defineProps({
|
||||
pageData: {
|
||||
type: Array as PropType<any[]>,
|
||||
default: () => []
|
||||
},
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: number): void
|
||||
}>()
|
||||
|
||||
const handleClick = (widget: any, index: number) => {
|
||||
if (widget.disabled) return
|
||||
emit('update:modelValue', index)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pages-preview {
|
||||
background-color: #f8f8f8;
|
||||
width: 360px;
|
||||
height: 615px;
|
||||
color: #333;
|
||||
.select {
|
||||
@apply border-primary border-solid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="70px">
|
||||
<el-form-item label="是否启用" v-if="type == 'mobile'">
|
||||
<el-radio-group v-model="content.enabled">
|
||||
<el-radio :label="1">开启</el-radio>
|
||||
<el-radio :label="0">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片设置">
|
||||
<div class="flex-1">
|
||||
<div class="form-tips">最多添加5张，建议图片尺寸：750px*340px</div>
|
||||
<draggable class="draggable" v-model="content.data" animation="300">
|
||||
<template v-slot:item="{ element: item, index }">
|
||||
<del-wrap
|
||||
:key="index"
|
||||
@close="handleDelete(index)"
|
||||
class="max-w-[400px]"
|
||||
>
|
||||
<div
|
||||
class="bg-fill-light flex items-center w-full p-4 mt-4 cursor-move"
|
||||
>
|
||||
<material-picker
|
||||
v-model="item.image"
|
||||
upload-class="bg-body"
|
||||
exclude-domain
|
||||
/>
|
||||
<div class="ml-3 flex-1">
|
||||
<el-form-item label="图片名称">
|
||||
<el-input
|
||||
v-model="item.name"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="mt-[18px]" label="图片链接">
|
||||
<link-picker
|
||||
v-if="type == 'mobile'"
|
||||
v-model="item.link"
|
||||
/>
|
||||
<el-input
|
||||
v-if="type == 'pc'"
|
||||
placeholder="请输入链接"
|
||||
v-model="item.link.path"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</del-wrap>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="content.data?.length < limit">
|
||||
<el-button type="primary" @click="handleAdd">添加图片</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import feedback from '@/utils/feedback'
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
import Draggable from 'vuedraggable'
|
||||
const limit = 5
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
},
|
||||
type: {
|
||||
type: String as PropType<'mobile' | 'pc'>,
|
||||
default: 'mobile'
|
||||
}
|
||||
})
|
||||
|
||||
const handleAdd = () => {
|
||||
if (props.content.data?.length < limit) {
|
||||
props.content.data.push({
|
||||
image: '',
|
||||
name: '',
|
||||
link: {}
|
||||
})
|
||||
} else {
|
||||
feedback.msgError(`最多添加${limit}张图片`)
|
||||
}
|
||||
}
|
||||
const handleDelete = (index: number) => {
|
||||
if (props.content.data?.length <= 1) {
|
||||
return feedback.msgError('最少保留一张图片')
|
||||
}
|
||||
props.content.data.splice(index, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<div class="banner" :style="styles">
|
||||
<div class="banner-image w-full h-full">
|
||||
<decoration-img
|
||||
width="100%"
|
||||
:height="styles.height || height"
|
||||
:src="getImage"
|
||||
fit="contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
import DecorationImg from '../../decoration-img.vue'
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '170px'
|
||||
}
|
||||
})
|
||||
|
||||
const getImage = computed(() => {
|
||||
const { data } = props.content
|
||||
if (Array.isArray(data)) {
|
||||
return data[0] ? data[0].image : ''
|
||||
}
|
||||
return ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,8 +0,0 @@
|
||||
import attr from './attr.vue'
|
||||
import content from './content.vue'
|
||||
import options from './options'
|
||||
export default {
|
||||
attr,
|
||||
content,
|
||||
options
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
export default () => ({
|
||||
title: '首页轮播图',
|
||||
name: 'banner',
|
||||
content: {
|
||||
enabled: 1,
|
||||
data: [
|
||||
{
|
||||
image: '',
|
||||
name: '',
|
||||
link: {}
|
||||
}
|
||||
]
|
||||
},
|
||||
styles: {}
|
||||
})
|
||||
@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="90px">
|
||||
<el-form-item label="客服标题">
|
||||
<el-input class="w-[400px]" v-model="content.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="服务时间">
|
||||
<el-input class="w-[400px]" v-model="content.time" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input class="w-[400px]" v-model="content.mobile" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客服二维码">
|
||||
<div>
|
||||
<material-picker v-model="content.qrcode" exclude-domain />
|
||||
<div class="form-tips">建议图片尺寸：200*200像素；图片格式：jpg、png、jpeg</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div class="customer-service">
|
||||
<decoration-img width="140px" height="140px" :src="content.qrcode" alt="" />
|
||||
<div class="text-[15px] mt-[7px] font-medium">{{ content.title }}</div>
|
||||
<div class="text-[#666] mt-[20px]">服务时间：{{ content.time }}</div>
|
||||
<div class="text-[#666] mt-[7px]">客服电话：{{ content.mobile }}</div>
|
||||
<div
|
||||
class="text-white text-[16px] rounded-[42px] bg-[#4173FF] w-full h-[42px] flex justify-center items-center mt-[50px]"
|
||||
>
|
||||
保存二维码图片
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
import DecorationImg from '../../decoration-img.vue'
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.customer-service {
|
||||
margin: 10px 18px;
|
||||
border-radius: 10px;
|
||||
padding: 50px 55px 80px;
|
||||
background: #fff;
|
||||
@apply flex flex-col justify-center items-center;
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +0,0 @@
|
||||
import attr from './attr.vue'
|
||||
import content from './content.vue'
|
||||
import options from './options'
|
||||
export default {
|
||||
attr,
|
||||
content,
|
||||
options
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
export default () => ({
|
||||
title: '客服设置',
|
||||
name: 'customer-service',
|
||||
content: {
|
||||
title: '添加客服二维码',
|
||||
time: '',
|
||||
mobile: '',
|
||||
qrcode: ''
|
||||
},
|
||||
styles: {}
|
||||
})
|
||||
@ -1,14 +0,0 @@
|
||||
const widgets: Record<string, any> = import.meta.glob('./**/index.ts', { eager: true })
|
||||
interface Widget {
|
||||
attr: any
|
||||
content: any
|
||||
options: any
|
||||
}
|
||||
console.log(widgets)
|
||||
const exportWidgets: Record<string, Widget> = {}
|
||||
Object.keys(widgets).forEach((key) => {
|
||||
const widgetName = key.replace(/^\.\/([\w-]+).*/gi, '$1')
|
||||
exportWidgets[widgetName] = widgets[key]?.default
|
||||
})
|
||||
|
||||
export default exportWidgets
|
||||
@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="70px">
|
||||
<el-form-item label="排版样式">
|
||||
<el-radio-group v-model="content.style">
|
||||
<el-radio :label="1">横排</el-radio>
|
||||
<el-radio :label="2">竖排</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题名称">
|
||||
<el-input class="w-[400px]" v-model="content.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单设置">
|
||||
<div class="flex-1">
|
||||
<AddNav v-model="content.data" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
import AddNav from '../../add-nav.vue'
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div class="my-service">
|
||||
<div v-if="content.title" class="title px-[15px] py-[10px]">
|
||||
<div>{{ content.title }}</div>
|
||||
</div>
|
||||
<div v-if="content.style == 1" class="flex flex-wrap pt-[20px] pb-[10px]">
|
||||
<div
|
||||
v-for="(item, index) in content.data"
|
||||
:key="index"
|
||||
class="flex flex-col items-center w-1/4 mb-[15px]"
|
||||
>
|
||||
<decoration-img width="26px" height="26px" :src="item.image" alt="" />
|
||||
<div class="mt-[7px]">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="content.style == 2">
|
||||
<div
|
||||
v-for="(item, index) in content.data"
|
||||
:key="index"
|
||||
class="flex items-center border-b border-[#e5e5e5] h-[50px] px-[12px]"
|
||||
>
|
||||
<decoration-img width="24px" height="24px" :src="item.image" alt="" />
|
||||
<div class="ml-[10px] flex-1">{{ item.name }}</div>
|
||||
<div>
|
||||
<icon name="el-icon-ArrowRight" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
import DecorationImg from '../../decoration-img.vue'
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-service {
|
||||
margin: 10px 10px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 7px;
|
||||
.title {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +0,0 @@
|
||||
import attr from './attr.vue'
|
||||
import content from './content.vue'
|
||||
import options from './options'
|
||||
export default {
|
||||
attr,
|
||||
content,
|
||||
options
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
export default () => ({
|
||||
title: '我的服务',
|
||||
name: 'my-service',
|
||||
content: {
|
||||
style: 1,
|
||||
title: '我的服务',
|
||||
data: [
|
||||
{
|
||||
image: '',
|
||||
name: '导航名称',
|
||||
link: {}
|
||||
}
|
||||
]
|
||||
},
|
||||
styles: {}
|
||||
})
|
||||
@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="70px">
|
||||
<el-form-item label="是否启用">
|
||||
<el-radio-group v-model="content.enabled">
|
||||
<el-radio :label="1">开启</el-radio>
|
||||
<el-radio :label="0">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单设置">
|
||||
<div class="flex-1">
|
||||
<div class="form-tips mb-4">最多可添加10个，建议图片尺寸：100px*100px</div>
|
||||
<AddNav v-model="content.data" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
import AddNav from '../../add-nav.vue'
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div class="nav bg-white pt-[15px] pb-[8px]">
|
||||
<div class="flex flex-wrap">
|
||||
<div
|
||||
v-for="(item, index) in content.data"
|
||||
:key="index"
|
||||
class="flex flex-col items-center w-1/5 mb-[15px]"
|
||||
>
|
||||
<decoration-img width="41px" height="41px" :src="item.image" alt="" />
|
||||
<div class="mt-[7px]">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
import DecorationImg from '../../decoration-img.vue'
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,8 +0,0 @@
|
||||
import attr from './attr.vue'
|
||||
import content from './content.vue'
|
||||
import options from './options'
|
||||
export default {
|
||||
attr,
|
||||
content,
|
||||
options
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
export default () => ({
|
||||
title: '导航菜单',
|
||||
name: 'nav',
|
||||
content: {
|
||||
enabled: 1,
|
||||
data: [
|
||||
{
|
||||
image: '',
|
||||
name: '导航名称',
|
||||
link: {}
|
||||
}
|
||||
]
|
||||
},
|
||||
styles: {}
|
||||
})
|
||||
@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div class="news">
|
||||
<div class="flex items-center news-title mx-[10px] my-[15px] text-[17px] font-medium">
|
||||
最新资讯
|
||||
</div>
|
||||
<div
|
||||
v-for="item in newsList"
|
||||
:key="item.id"
|
||||
class="news-card flex bg-white px-[10px] py-[16px] text-[#333] border-[#f2f2f2] border-b"
|
||||
>
|
||||
<div class="mr-[10px]" v-if="item.image">
|
||||
<img :src="item.image" class="w-[120px] h-[90px] object-contain" />
|
||||
</div>
|
||||
<div class="flex flex-col justify-between flex-1">
|
||||
<div class="text-[15px] font-medium line-clamp-2">{{ item.title }}</div>
|
||||
<div class="line-clamp-1 text-sm mt-[8px]">
|
||||
{{ item.desc }}
|
||||
</div>
|
||||
|
||||
<div class="text-[#999] text-xs w-full flex justify-between mt-[8px]">
|
||||
<div>{{ item.create_time }}</div>
|
||||
<div class="flex items-center">
|
||||
<icon name="el-icon-View" />
|
||||
<div class="ml-[5px]">{{ item.click }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import { getDecorateArticle } from '@/api/decoration'
|
||||
import type options from './options'
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
const newsList = ref<any[]>([])
|
||||
const getData = async () => {
|
||||
const data = await getDecorateArticle({
|
||||
limit: 10
|
||||
})
|
||||
newsList.value = data
|
||||
}
|
||||
getData()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.news {
|
||||
.news-title {
|
||||
&::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 17px;
|
||||
display: block;
|
||||
margin-right: 5px;
|
||||
background: #4173ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +0,0 @@
|
||||
import attr from './attr.vue'
|
||||
import content from './content.vue'
|
||||
import options from './options'
|
||||
export default {
|
||||
attr,
|
||||
content,
|
||||
options
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
export default () => ({
|
||||
title: '资讯',
|
||||
name: 'news',
|
||||
disabled: 1,
|
||||
content: {},
|
||||
styles: {}
|
||||
})
|
||||
@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<div class="search-con flex items-center px-[15px]">
|
||||
<icon name="el-icon-Search" :size="17" />
|
||||
<span class="ml-[5px]">请输入关键词搜索</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search {
|
||||
background-color: #fff;
|
||||
padding: 7px 12px;
|
||||
.search-con {
|
||||
height: 100%;
|
||||
height: 36px;
|
||||
border-radius: 36px;
|
||||
background: #f4f4f4;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +0,0 @@
|
||||
import attr from './attr.vue'
|
||||
import content from './content.vue'
|
||||
import options from './options'
|
||||
export default {
|
||||
attr,
|
||||
content,
|
||||
options
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
export default () => ({
|
||||
title: '搜索',
|
||||
name: 'search',
|
||||
disabled: 1,
|
||||
content: {},
|
||||
styles: {}
|
||||
})
|
||||
@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="70px">
|
||||
<el-form-item label="是否启用">
|
||||
<el-radio-group v-model="content.enabled">
|
||||
<el-radio :label="1">开启</el-radio>
|
||||
<el-radio :label="0">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片设置">
|
||||
<div class="flex-1">
|
||||
<div class="form-tips">最多添加5张，建议图片尺寸：750px*200px</div>
|
||||
<draggable class="draggable" v-model="content.data" animation="300">
|
||||
<template v-slot:item="{ element: item, index }">
|
||||
<del-wrap
|
||||
:key="index"
|
||||
@close="handleDelete(index)"
|
||||
class="max-w-[400px]"
|
||||
>
|
||||
<div
|
||||
class="bg-fill-light flex items-center w-full p-4 mt-4 cursor-move"
|
||||
>
|
||||
<material-picker
|
||||
v-model="item.image"
|
||||
upload-class="bg-body"
|
||||
exclude-domain
|
||||
/>
|
||||
<div class="ml-3 flex-1">
|
||||
<el-form-item label="图片名称">
|
||||
<el-input
|
||||
v-model="item.name"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="mt-[18px]" label="图片链接">
|
||||
<link-picker v-model="item.link" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</del-wrap>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="content.data?.length < limit">
|
||||
<el-button type="primary" @click="handleAdd">添加图片</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import feedback from '@/utils/feedback'
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
import Draggable from 'vuedraggable'
|
||||
const limit = 5
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
const handleAdd = () => {
|
||||
if (props.content.data?.length < limit) {
|
||||
props.content.data.push({
|
||||
image: '',
|
||||
name: '',
|
||||
link: {}
|
||||
})
|
||||
} else {
|
||||
feedback.msgError(`最多添加${limit}张图片`)
|
||||
}
|
||||
}
|
||||
const handleDelete = (index: number) => {
|
||||
if (props.content.data?.length <= 1) {
|
||||
return feedback.msgError('最少保留一张图片')
|
||||
}
|
||||
props.content.data.splice(index, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div class="banner mx-[10px] mt-[10px]">
|
||||
<div class="banner-image">
|
||||
<decoration-img width="100%" height="100px" :src="getImage" fit="contain" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
import DecorationImg from '../../decoration-img.vue'
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
const getImage = computed(() => {
|
||||
const { data } = props.content
|
||||
if (Array.isArray(data)) {
|
||||
return data[0] ? data[0].image : ''
|
||||
}
|
||||
return ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,8 +0,0 @@
|
||||
import attr from './attr.vue'
|
||||
import content from './content.vue'
|
||||
import options from './options'
|
||||
export default {
|
||||
attr,
|
||||
content,
|
||||
options
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
export default () => ({
|
||||
title: '个人中心广告图',
|
||||
name: 'user-banner',
|
||||
content: {
|
||||
enabled: 1,
|
||||
data: [
|
||||
{
|
||||
image: '',
|
||||
name: '',
|
||||
link: {}
|
||||
}
|
||||
]
|
||||
},
|
||||
styles: {}
|
||||
})
|
||||
@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type options from './options'
|
||||
type OptionsType = ReturnType<typeof options>
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: Object as PropType<OptionsType['content']>,
|
||||
default: () => ({})
|
||||
},
|
||||
styles: {
|
||||
type: Object as PropType<OptionsType['styles']>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div class="user-info flex items-center px-[25px]">
|
||||
<img src="./images/default_avatar.png" class="w-[60px] h-[60px]" alt="" />
|
||||
<div class="text-white text-[18px] ml-[10px]">未登录</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-info {
|
||||
background: url(./images/my_topbg.png);
|
||||
height: 115px;
|
||||
background-position: bottom;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 139 KiB |
@ -1,8 +0,0 @@
|
||||
import attr from './attr.vue'
|
||||
import content from './content.vue'
|
||||
import options from './options'
|
||||
export default {
|
||||
attr,
|
||||
content,
|
||||
options
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
export default () => ({
|
||||
title: '用户信息',
|
||||
name: 'user-info',
|
||||
disabled: 1,
|
||||
content: {},
|
||||
styles: {}
|
||||
})
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 516 KiB |
@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<div class="decoration-pages min-w-[1100px]">
|
||||
<el-card shadow="never" class="!border-none flex-1 flex" :body-style="{ flex: 1 }">
|
||||
<div class="flex h-full items-start">
|
||||
<Menu v-model="activeMenu" :menus="menus" />
|
||||
<preview v-model="selectWidgetIndex" :pageData="getPageData" />
|
||||
<attr-setting class="flex-1" :widget="getSelectWidget" />
|
||||
</div>
|
||||
</el-card>
|
||||
<footer-btns class="mt-4" :fixed="false" v-perms="['decorate:pages:save']">
|
||||
<el-button type="primary" @click="setData">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="decorationPages">
|
||||
import Menu from '../component/pages/menu.vue'
|
||||
import Preview from '../component/pages/preview.vue'
|
||||
import AttrSetting from '../component/pages/attr-setting.vue'
|
||||
import widgets from '../component/widgets'
|
||||
import { getDecoratePages, setDecoratePages } from '@/api/decoration'
|
||||
import { getNonDuplicateID } from '@/utils/util'
|
||||
enum pagesTypeEnum {
|
||||
HOME = '1',
|
||||
USER = '2',
|
||||
SERVICE = '3'
|
||||
}
|
||||
|
||||
const generatePageData = (widgetNames: string[]) => {
|
||||
return widgetNames.map((widgetName) => {
|
||||
const options = {
|
||||
id: getNonDuplicateID(),
|
||||
...(widgets[widgetName]?.options() || {})
|
||||
}
|
||||
return options
|
||||
})
|
||||
}
|
||||
|
||||
const menus: Record<
|
||||
string,
|
||||
{
|
||||
id: number
|
||||
name: string
|
||||
pageData: any[]
|
||||
}
|
||||
> = reactive({
|
||||
[pagesTypeEnum.HOME]: {
|
||||
id: 1,
|
||||
type: 1,
|
||||
name: '首页装修',
|
||||
pageData: generatePageData(['search', 'banner', 'nav', 'news'])
|
||||
},
|
||||
[pagesTypeEnum.USER]: {
|
||||
id: 2,
|
||||
type: 2,
|
||||
name: '个人中心',
|
||||
pageData: generatePageData(['user-info', 'my-service', 'user-banner'])
|
||||
},
|
||||
[pagesTypeEnum.SERVICE]: {
|
||||
id: 3,
|
||||
type: 3,
|
||||
name: '客服设置',
|
||||
pageData: generatePageData(['customer-service'])
|
||||
}
|
||||
})
|
||||
|
||||
const activeMenu = ref('1')
|
||||
const selectWidgetIndex = ref(-1)
|
||||
const getPageData = computed(() => {
|
||||
return menus[activeMenu.value]?.pageData ?? []
|
||||
})
|
||||
const getSelectWidget = computed(() => {
|
||||
return menus[activeMenu.value]?.pageData[selectWidgetIndex.value] ?? ''
|
||||
})
|
||||
|
||||
const getData = async () => {
|
||||
const data = await getDecoratePages({ id: activeMenu.value })
|
||||
menus[String(data.id)].pageData = JSON.parse(data.data)
|
||||
}
|
||||
|
||||
const setData = async () => {
|
||||
await setDecoratePages({
|
||||
...menus[activeMenu.value],
|
||||
data: JSON.stringify(menus[activeMenu.value].pageData)
|
||||
})
|
||||
getData()
|
||||
}
|
||||
watch(
|
||||
activeMenu,
|
||||
() => {
|
||||
selectWidgetIndex.value = getPageData.value.findIndex((item) => !item.disabled)
|
||||
getData()
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.decoration-pages {
|
||||
min-height: calc(100vh - var(--navbar-height) - 80px);
|
||||
@apply flex flex-col;
|
||||
}
|
||||
</style>
|
||||
@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<div class="decoration-pages min-w-[1100px]">
|
||||
<el-card shadow="never" class="!border-none flex-1 flex" :body-style="{ flex: 1 }">
|
||||
<div class="flex h-full items-start">
|
||||
<Menu v-model="activeMenu" :menus="menus" />
|
||||
<preview-pc class="mx-4" v-model="selectWidgetIndex" :pageData="getPageData" />
|
||||
<attr-setting class="flex-1" :widget="getSelectWidget" type="pc" />
|
||||
</div>
|
||||
</el-card>
|
||||
<footer-btns class="mt-4" :fixed="false" v-perms="['decorate:pages:save']">
|
||||
<el-button type="primary" @click="setData">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="decorationPc">
|
||||
import Menu from './component/pages/menu.vue'
|
||||
import PreviewPc from './component/pages/preview-pc.vue'
|
||||
import AttrSetting from './component/pages/attr-setting.vue'
|
||||
import widgets from './component/widgets'
|
||||
import { getDecoratePages, setDecoratePages } from '@/api/decoration'
|
||||
import { getNonDuplicateID } from '@/utils/util'
|
||||
enum pagesTypeEnum {
|
||||
HOME = '4'
|
||||
}
|
||||
|
||||
const generatePageData = (widgetNames: string[]) => {
|
||||
return widgetNames.map((widgetName) => {
|
||||
const options = {
|
||||
id: getNonDuplicateID(),
|
||||
...(widgets[widgetName]?.options() || {})
|
||||
}
|
||||
return options
|
||||
})
|
||||
}
|
||||
|
||||
const menus: Record<
|
||||
string,
|
||||
{
|
||||
id: number
|
||||
name: string
|
||||
pageData: any[]
|
||||
}
|
||||
> = reactive({
|
||||
[pagesTypeEnum.HOME]: {
|
||||
id: 4,
|
||||
type: 4,
|
||||
name: '首页装修',
|
||||
pageData: []
|
||||
}
|
||||
})
|
||||
|
||||
const activeMenu = ref('4')
|
||||
const selectWidgetIndex = ref(0)
|
||||
const getPageData = computed(() => {
|
||||
return menus[activeMenu.value]?.pageData ?? []
|
||||
})
|
||||
const getSelectWidget = computed(() => {
|
||||
return menus[activeMenu.value]?.pageData[selectWidgetIndex.value] ?? ''
|
||||
})
|
||||
|
||||
const getData = async () => {
|
||||
const data = await getDecoratePages({ id: activeMenu.value })
|
||||
menus[String(data.id)].pageData = JSON.parse(data.data)
|
||||
selectWidgetIndex.value = getPageData.value.findIndex((item) => !item.disabled)
|
||||
}
|
||||
|
||||
const setData = async () => {
|
||||
await setDecoratePages({
|
||||
...menus[activeMenu.value],
|
||||
data: JSON.stringify(menus[activeMenu.value].pageData)
|
||||
})
|
||||
getData()
|
||||
}
|
||||
watch(
|
||||
activeMenu,
|
||||
() => {
|
||||
selectWidgetIndex.value = getPageData.value.findIndex((item) => !item.disabled)
|
||||
getData()
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.decoration-pages {
|
||||
min-height: calc(100vh - var(--navbar-height) - 80px);
|
||||
@apply flex flex-col;
|
||||
}
|
||||
</style>
|
||||
@ -1,217 +0,0 @@
|
||||
<template>
|
||||
<div class="decoration-tabbar min-w-[800px]">
|
||||
<el-card shadow="never" class="!border-none flex-1" :body-style="{ height: '100%' }">
|
||||
<div class="flex h-full items-start">
|
||||
<div class="pages-preview mx-[30px]">
|
||||
<div class="tabbar flex">
|
||||
<div
|
||||
class="tabbar-item flex flex-col justify-center items-center flex-1"
|
||||
v-for="(item, index) in tabbar.list"
|
||||
:key="index"
|
||||
:style="{ color: tabbar.style.default_color }"
|
||||
>
|
||||
<img class="w-[22px] h-[22px]" :src="item.unselected" alt="" />
|
||||
<div class="leading-3 text-[12px] mt-[4px]">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div
|
||||
class="title flex items-center before:w-[3px] before:h-[14px] before:block before:bg-primary before:mr-2"
|
||||
>
|
||||
底部导航设置
|
||||
<span class="form-tips ml-[10px] !mt-0">
|
||||
至少添加2个导航，最多添加5个导航
|
||||
</span>
|
||||
</div>
|
||||
<el-form class="mt-4" label-width="70px">
|
||||
<el-tabs model-value="content">
|
||||
<el-tab-pane label="导航图片" name="content">
|
||||
<div class="mb-[18px]">
|
||||
<draggable
|
||||
class="draggable"
|
||||
v-model="tabbar.list"
|
||||
animation="300"
|
||||
draggable=".draggable"
|
||||
:move="onMove"
|
||||
>
|
||||
<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" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</del-wrap>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<el-form-item v-if="tabbar.list?.length < max" label-width="0">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
添加导航
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="样式设置" name="styles">
|
||||
<el-form-item label="默认颜色">
|
||||
<color-picker
|
||||
class="max-w-[400px]"
|
||||
v-model="tabbar.style.default_color"
|
||||
default-color="#999999"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="选中颜色">
|
||||
<color-picker
|
||||
class="max-w-[400px]"
|
||||
v-model="tabbar.style.selected_color"
|
||||
default-color="#4173ff"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<footer-btns class="mt-4" :fixed="false" v-perms="['decorate:tabbar:save']">
|
||||
<el-button type="primary" @click="setData">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="decorationTabbar">
|
||||
import { getDecorateTabbar, setDecorateTabbar } from '@/api/decoration'
|
||||
import feedback from '@/utils/feedback'
|
||||
import Draggable from 'vuedraggable'
|
||||
|
||||
const max = 5
|
||||
const min = 2
|
||||
const tabbar = reactive({
|
||||
style: {
|
||||
default_color: '',
|
||||
selected_color: ''
|
||||
},
|
||||
list: [
|
||||
{
|
||||
name: '',
|
||||
selected: '',
|
||||
unselected: '',
|
||||
link: {}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
selected: '',
|
||||
unselected: '',
|
||||
link: {}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const handleAdd = () => {
|
||||
if (tabbar.list?.length < max) {
|
||||
tabbar.list.push({
|
||||
name: '',
|
||||
selected: '',
|
||||
unselected: '',
|
||||
link: {}
|
||||
})
|
||||
} else {
|
||||
feedback.msgError(`最多添加${max}个`)
|
||||
}
|
||||
}
|
||||
const handleDelete = (index: number) => {
|
||||
if (tabbar.list?.length <= min) {
|
||||
return feedback.msgError(`最少保留${min}个`)
|
||||
}
|
||||
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.style = data.style
|
||||
}
|
||||
const setData = async () => {
|
||||
await setDecorateTabbar(toRaw(tabbar))
|
||||
getData()
|
||||
}
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.decoration-tabbar {
|
||||
min-height: calc(100vh - var(--navbar-height) - 80px);
|
||||
@apply flex flex-col;
|
||||
.pages-preview {
|
||||
background-color: #f7f7f7;
|
||||
width: 360px;
|
||||
height: 615px;
|
||||
color: #333;
|
||||
position: relative;
|
||||
.tabbar {
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
background-color: #fff;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border: 2px solid var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,171 +0,0 @@
|
||||
<template>
|
||||
<div class="hot-search">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-form ref="formRef" :model="formData" label-width="100px">
|
||||
<el-form-item label="功能状态" style="margin-bottom: 0">
|
||||
<div>
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :label="1">开启</el-radio>
|
||||
<el-radio :label="0">关闭</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<div class="form-tips">默认开启，关闭则前端不显示该功能</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div class="lg:flex">
|
||||
<div class="flex-1 min-w-0">
|
||||
<el-button type="primary" class="mb-4" @click="handleAdd">添加</el-button>
|
||||
<el-table size="large" border :data="formData.data">
|
||||
<el-table-column label="关键词" prop="describe" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<el-input
|
||||
v-model="row.name"
|
||||
clearable
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
maxlength="30"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="describe" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.sort" type="number" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="80" fixed="right">
|
||||
<template #default="{ $index }">
|
||||
<el-button
|
||||
v-perms="['setting:storage:edit']"
|
||||
type="danger"
|
||||
link
|
||||
@click="handleDel($index)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="hot-search-phone mt-4 lg:mt-0 lg:ml-4 flex-none">
|
||||
<div class="mb-4 text-center">- 热搜预览图 -</div>
|
||||
<div class="hot-search-phone-content">
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-com">
|
||||
<div class="search-con flex items-center px-[15px]">
|
||||
<icon name="el-icon-Search" :size="17" />
|
||||
<span class="ml-[5px]">请输入关键词搜索</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 热门搜索 -->
|
||||
<div class="hot-search-title">热门搜索</div>
|
||||
<div class="hot-search-text">
|
||||
<span v-for="(text, index) in list" :key="index">
|
||||
{{ text.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<footer-btns v-perms="['setting/HotSearch/setConfig']">
|
||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="search">
|
||||
import { getSearch, setSearch } from '@/api/setting/search'
|
||||
import type { Search } from '@/api/setting/search'
|
||||
|
||||
const formData = reactive<Search>({
|
||||
status: 1,
|
||||
data: []
|
||||
})
|
||||
|
||||
const list = computed(() => {
|
||||
return formData.data.filter((text) => text.name).sort((v1, v2) => v2.sort - v1.sort)
|
||||
})
|
||||
|
||||
// 获取登录注册数据
|
||||
const getData = async () => {
|
||||
try {
|
||||
const data = await getSearch()
|
||||
for (const key in formData) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取=>', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
formData.data.push({
|
||||
name: '',
|
||||
sort: 0
|
||||
})
|
||||
}
|
||||
|
||||
const handleDel = (index: number) => {
|
||||
formData.data.splice(index, 1)
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await setSearch(formData)
|
||||
getData()
|
||||
} catch (error) {
|
||||
console.log('保存=>', error)
|
||||
}
|
||||
}
|
||||
|
||||
getData()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hot-search {
|
||||
.hot-search-phone {
|
||||
width: 300px;
|
||||
background-color: #fff;
|
||||
&-content {
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
padding: 12px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e6e6e6;
|
||||
|
||||
.search-com {
|
||||
.search-con {
|
||||
height: 100%;
|
||||
height: 36px;
|
||||
border-radius: 36px;
|
||||
background: #f4f4f4;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.hot-search-title {
|
||||
padding: 10px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hot-search-text {
|
||||
span {
|
||||
font-size: 12px;
|
||||
border-radius: 100px;
|
||||
padding: 5px 10px;
|
||||
margin: 0 6px 6px 0;
|
||||
display: inline-block;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,63 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="基础使用" shadow="none" class="!border-none">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="flex m-4">
|
||||
<div class="mr-4">选择图片：</div>
|
||||
<material-picker v-model="state.value1" />
|
||||
</div>
|
||||
<div class="flex m-4">
|
||||
<div class="mr-4">选择视频：</div>
|
||||
<material-picker type="video" v-model="state.value3" />
|
||||
</div>
|
||||
<div class="flex flex-1 m-4">
|
||||
<div class="mr-4">多张图片：</div>
|
||||
<div class="flex-1">
|
||||
<!-- 外层需要有足够的宽度，这样预览图和选择按钮才不会直接换行 -->
|
||||
<material-picker :limit="4" v-model="state.value2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card header="进阶用法" shadow="none" class="!border-none mt-4">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="flex m-4">
|
||||
<div class="mr-4">自定义选择器大小：</div>
|
||||
<material-picker size="60px" v-model="state.value4" />
|
||||
</div>
|
||||
<div class="flex m-4">
|
||||
<div class="mr-4">使用插槽：</div>
|
||||
<material-picker v-model="state.value5">
|
||||
<template #upload>
|
||||
<el-button>选择文件</el-button>
|
||||
</template>
|
||||
</material-picker>
|
||||
</div>
|
||||
<div class="flex m-4">
|
||||
<div class="mr-4">选出地址不带域名：</div>
|
||||
<material-picker :exclude-domain="true" v-model="state.value6" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex m-4 items-center">
|
||||
<div class="w-20 flex-none">带域名：</div>
|
||||
<el-input class="w-[500px]" :model-value="state.value5" />
|
||||
</div>
|
||||
<div class="flex m-4 items-center">
|
||||
<div class="w-20 flex-none">不带域名：</div>
|
||||
<el-input class="w-[500px]" :model-value="state.value6" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: [],
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: ''
|
||||
})
|
||||
</script>
|
||||
@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="element-plus图标" shadow="none" class="!border-none">
|
||||
<div class="flex items-center">
|
||||
<icon class="m-4" :size="24" name="el-icon-Search" />
|
||||
<icon class="m-4" :size="24" name="el-icon-Plus" />
|
||||
<icon class="m-4" :size="24" name="el-icon-FullScreen" />
|
||||
<icon class="m-4" :size="24" name="el-icon-Setting" />
|
||||
<icon class="m-4" :size="24" name="el-icon-Warning" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card header="本地图标" shadow="none" class="!border-none mt-4">
|
||||
<div class="flex items-center">
|
||||
<icon class="m-4" :size="24" name="local-icon-baoxian" />
|
||||
<icon class="m-4" :size="24" name="local-icon-youhui" />
|
||||
<icon class="m-4" :size="24" name="local-icon-daiyunying" />
|
||||
<icon class="m-4" :size="24" name="local-icon-diancanshezhi" />
|
||||
<icon class="m-4" :size="24" name="local-icon-dianzifapiao" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card header="图标选择器" shadow="none" class="!border-none mt-4">
|
||||
<div class="flex items-center">
|
||||
<icon-picker v-model="state.value" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card
|
||||
header="element-plus图标库大全（点击复制图标名称）"
|
||||
shadow="none"
|
||||
class="!border-none mt-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex flex-wrap">
|
||||
<div v-for="item in getElementPlusIconNames()" :key="item" class="m-1">
|
||||
<el-button v-copy="item">
|
||||
<icon :name="item" :size="20" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card
|
||||
header="本地图标库大全（点击复制图标名称）"
|
||||
shadow="none"
|
||||
class="!border-none mt-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex flex-wrap">
|
||||
<div v-for="item in getLocalIconNames()" :key="item" class="m-1">
|
||||
<el-button v-copy="item">
|
||||
<icon :name="item" :size="20" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Icon from '@/components/icon/index.vue'
|
||||
import { getElementPlusIconNames, getLocalIconNames } from '@/components/icon'
|
||||
const state = reactive({
|
||||
value: ''
|
||||
})
|
||||
</script>
|
||||
@ -1,12 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="基础使用" shadow="none" class="!border-none">
|
||||
<link-picker v-model="state.value1" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const state = reactive({
|
||||
value1: {}
|
||||
})
|
||||
</script>
|
||||
@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="基础使用" shadow="none" class="!border-none">
|
||||
<overflow-tooltip class="w-20 m-4" content="超出自动打点，悬浮弹窗显示全部内容" />
|
||||
<overflow-tooltip class="w-60 m-4" content="超出自动打点，悬浮弹窗显示全部内容" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup></script>
|
||||
@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="基础使用" shadow="none" class="!border-none">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="m-4">
|
||||
<popover-input @confirm="onConfirm">
|
||||
<template #default>
|
||||
<el-button> 点击输入 </el-button>
|
||||
</template>
|
||||
</popover-input>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<popover-input type="number" @confirm="onConfirm">
|
||||
<template #default>
|
||||
<el-button> 输入数字 </el-button>
|
||||
</template>
|
||||
</popover-input>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<popover-input size="small" @confirm="onConfirm">
|
||||
<template #default>
|
||||
<el-button> 调整大小 </el-button>
|
||||
</template>
|
||||
</popover-input>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<popover-input :limit="20" :show-limit="true" @confirm="onConfirm">
|
||||
<template #default>
|
||||
<el-button> 限制输入长度 </el-button>
|
||||
</template>
|
||||
</popover-input>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<popover-input value="默认值" @confirm="onConfirm">
|
||||
<template #default>
|
||||
<el-button> 默认值 </el-button>
|
||||
</template>
|
||||
</popover-input>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const onConfirm = (value: string) => {
|
||||
console.log(value)
|
||||
}
|
||||
</script>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="基础使用" shadow="none" class="!border-none">
|
||||
<editor v-model="state.value1" height="500px" />
|
||||
</el-card>
|
||||
<el-card header="简洁模式" shadow="none" class="!border-none mt-4">
|
||||
<editor v-model="state.value2" height="500px" mode="simple" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: ''
|
||||
})
|
||||
</script>
|
||||
@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card header="基础使用" shadow="none" class="!border-none">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="m-4">
|
||||
<upload
|
||||
@change="onChange"
|
||||
@success="onSuccess"
|
||||
@error="onError"
|
||||
:show-progress="true"
|
||||
>
|
||||
<el-button type="primary">上传图片</el-button>
|
||||
</upload>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<upload
|
||||
type="video"
|
||||
@change="onChange"
|
||||
@success="onSuccess"
|
||||
@error="onError"
|
||||
:show-progress="true"
|
||||
>
|
||||
<el-button type="primary">上传视频</el-button>
|
||||
</upload>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<upload
|
||||
:multiple="false"
|
||||
@change="onChange"
|
||||
@success="onSuccess"
|
||||
@error="onError"
|
||||
:show-progress="true"
|
||||
>
|
||||
<el-button type="primary">取消多选</el-button>
|
||||
</upload>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<upload
|
||||
:limit="2"
|
||||
@change="onChange"
|
||||
@success="onSuccess"
|
||||
@error="onError"
|
||||
:show-progress="true"
|
||||
>
|
||||
<el-button type="primary">一次最多上传2张</el-button>
|
||||
</upload>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Upload from '@/components/upload/index.vue'
|
||||
const onChange = (file: any) => {
|
||||
console.log('上传文件的状态发生改变', file)
|
||||
}
|
||||
|
||||
const onSuccess = (file: any) => {
|
||||
console.log('上传文件成功', file)
|
||||
}
|
||||
|
||||
const onError = (file: any) => {
|
||||
console.log('上传文件失败', file)
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user