forked from gxwebsoft/websoft-cms
12 changed files with 762 additions and 154 deletions
|
After Width: | Height: | Size: 953 B |
@ -1,120 +0,0 @@ |
|||||
<template> |
|
||||
<div class="login-layout mt-[100px] m-auto sm:w-screen-xl w-full"> |
|
||||
<div class="mt-[100px] m-auto flex sm:flex-row flex-col sm:p-0 p-3"> |
|
||||
<el-card shadow="hover" class="sm:w-[250px] sm:flex sm:mb-0 mb-5 justify-center w-full"> |
|
||||
<div class="flex justify-center pb-4 flex-col justify-center items-center"> |
|
||||
<el-avatar :src="userInfo?.avatar" :size="70" /> |
|
||||
<text class="text-gray-400 py-1 text-sm">更换头像</text> |
|
||||
</div> |
|
||||
<!-- 用户菜单 --> |
|
||||
<UserMenu :activeIndex="activeIndex" @done="onDone" /> |
|
||||
</el-card> |
|
||||
<el-card shadow="hover" class="flash bg-white hover:shadow w-full sm:ml-6 ml-0"> |
|
||||
<template #header>账号信息</template> |
|
||||
<el-form :model="form" label-width="auto" size="large" label-position="top" class="sm:w-screen-md w-full sm:px-6 sm:py-2"> |
|
||||
<el-form-item label="手机号码"> |
|
||||
<el-input disabled v-model="form.mobile" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="昵称"> |
|
||||
<el-input v-model="form.nickname" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="邮箱账号"> |
|
||||
<el-input v-model="form.email" placeholder="邮箱账号" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="性别"> |
|
||||
<el-radio-group v-model="form.sex"> |
|
||||
<el-radio value="1">男</el-radio> |
|
||||
<el-radio value="2">女</el-radio> |
|
||||
</el-radio-group> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="个人签名"> |
|
||||
<el-input v-model="form.comments" type="textarea" placeholder="个人签名" :rows="4" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" size="large" @click="onSubmit">保存</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState"; |
|
||||
import useFormData from '@/utils/use-form-data'; |
|
||||
import type { User } from '@/api/system/user/model'; |
|
||||
import { ref } from 'vue' |
|
||||
import {useServerRequest} from "~/composables/useServerRequest"; |
|
||||
import type {ApiResult} from "~/api"; |
|
||||
import UserMenu from "~/components/UserMenu.vue"; |
|
||||
|
|
||||
// 配置信息 |
|
||||
const runtimeConfig = useRuntimeConfig(); |
|
||||
const route = useRoute(); |
|
||||
const website = useWebsite() |
|
||||
const config = useConfigInfo(); |
|
||||
const userInfo = ref<User>(); |
|
||||
const activeIndex = ref(''); |
|
||||
|
|
||||
|
|
||||
// 配置信息 |
|
||||
const { form, assignFields } = useFormData<User>({ |
|
||||
userId: undefined, |
|
||||
nickname: '', |
|
||||
username: '', |
|
||||
phone: '', |
|
||||
mobile: '', |
|
||||
sex: '', |
|
||||
sexName: '', |
|
||||
email: '', |
|
||||
password: '', |
|
||||
code: '', |
|
||||
smsCode: '', |
|
||||
comments: '', |
|
||||
remember: true, |
|
||||
isAdmin: true |
|
||||
}); |
|
||||
|
|
||||
useHead({ |
|
||||
title: `用户中心 - ${config.value?.siteName}`, |
|
||||
meta: [{ name: website.value.keywords, content: website.value.comments }] |
|
||||
}); |
|
||||
|
|
||||
const onDone = (index: string) => { |
|
||||
activeIndex.value = index; |
|
||||
} |
|
||||
|
|
||||
const onSubmit = async () => { |
|
||||
const {data: modify } = await useServerRequest<ApiResult<User>>('/auth/user',{ |
|
||||
baseURL: runtimeConfig.public.apiServer, |
|
||||
method: 'put', |
|
||||
body: form |
|
||||
}) |
|
||||
if(modify.value?.code == 0){ |
|
||||
ElMessage.success('修改成功') |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const reload = async () => { |
|
||||
const {data: response} = await useServerRequest<ApiResult<User>>('/auth/user',{baseURL: runtimeConfig.public.apiServer}) |
|
||||
if(response.value?.data){ |
|
||||
userInfo.value = response.value?.data; |
|
||||
assignFields(response.value?.data); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
watch( |
|
||||
() => route.path, |
|
||||
(path) => { |
|
||||
activeIndex.value = path; |
|
||||
console.log(path,'=>Path') |
|
||||
reload(); |
|
||||
}, |
|
||||
{ immediate: true } |
|
||||
); |
|
||||
</script> |
|
||||
<style lang="less"> |
|
||||
body{ |
|
||||
background: url("https://oss.wsdns.cn/20240328/797a8e323bba4fc6827abf9d8b98ba45.png"); |
|
||||
background-size: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,353 @@ |
|||||
|
<template> |
||||
|
<div class="common-layout"> |
||||
|
<el-container> |
||||
|
<el-header class="bg-black flex items-center justify-between" height="50px"> |
||||
|
<el-space class="flex items-center" @click="navigateTo('/manage', { replace: false })"> |
||||
|
<div class="expand flex items-center justify-center block bg-gray-800 hover:bg-gray-700 h-[32px] w-[32px] cursor-pointer" @mouseover="visible = true"><el-icon color="white" class="block" size="20"><Expand /></el-icon></div> |
||||
|
<el-avatar src="https://oss.wsdns.cn/20240331/7f7f7f57e12c45338beb7bfc7ecccfe9.png" class="cursor-pointer" shape="square" :size="32" /> |
||||
|
<div class="user-center text-white text-lg cursor-pointer">控制台</div> |
||||
|
</el-space> |
||||
|
<template v-if="token"> |
||||
|
<el-dropdown @command="handleCommand"> |
||||
|
<el-avatar class="cursor-pointer" :src="userInfo?.avatar" :size="30" /> |
||||
|
<el-button circle :icon="ElIconUserFilled" color="#155FAA"></el-button> |
||||
|
<template #dropdown> |
||||
|
<el-dropdown-menu> |
||||
|
<el-dropdown-item command="user">个人中心</el-dropdown-item> |
||||
|
<el-dropdown-item divided command="logOut" @click="navigateTo('/user/logout')">退出</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</template> |
||||
|
</el-dropdown> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<el-button v-if="config.showLoginButton" circle :icon="ElIconUserFilled" @click="goLogin"></el-button> |
||||
|
</template> |
||||
|
</el-header> |
||||
|
<el-container> |
||||
|
<el-aside width="200px" class="bg-white" :style="{ minHeight: 'calc(100vh - 60px)' }"> |
||||
|
<div class="flex items-center justify-between py-4 px-5 text-lg font-bold text-center bg-white border-b-1 border-b-gray-100 border-b-solid"> |
||||
|
企业官网 WDS |
||||
|
<el-icon><Memo /></el-icon> |
||||
|
</div> |
||||
|
<el-menu |
||||
|
default-active="2" |
||||
|
class="el-menu-vertical-demo" |
||||
|
style="border: none" |
||||
|
@open="handleOpen" |
||||
|
@close="handleClose" |
||||
|
> |
||||
|
<el-menu-item index="1"> |
||||
|
<span>概况</span> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item index="2"> |
||||
|
<span>栏目管理</span> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item index="3"> |
||||
|
<span>文章列表</span> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item index="4"> |
||||
|
<span>素材管理</span> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item index="5"> |
||||
|
<span>广告管理</span> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item index="6"> |
||||
|
<span>订单管理</span> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item index="7"> |
||||
|
<span>用户管理</span> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item index="8"> |
||||
|
<span>系统设置</span> |
||||
|
</el-menu-item> |
||||
|
</el-menu> |
||||
|
</el-aside> |
||||
|
<el-main class="overflow-y-hidden relative"> |
||||
|
<div class="absolute inset-0 bg-black opacity-10 z-1" v-if="visible" @click="visible = false"></div> |
||||
|
<div v-if="visible" class="drawer w-screen-lg h-full bg-white left-0 top-[50px] fixed z-2 shadow-lg"> |
||||
|
<div class="flex items-center justify-between p-3 border-b border-b-solid border-b-gray-200"> |
||||
|
<div class="text-lg font-bold">产品与服务</div> |
||||
|
<el-space class="flex items-center"> |
||||
|
<el-input |
||||
|
class="w-20" |
||||
|
placeholder="站内搜索" |
||||
|
:suffix-icon="ElIconSearch" |
||||
|
v-model="form.comments" |
||||
|
@keyup.enter.native="handleSearch" |
||||
|
/> |
||||
|
<!-- <el-input v-model="search" placeholder="搜索应用" class="w-[200px]" />--> |
||||
|
<div class="cursor-pointer mt-1 ml-5" @click="visible = false"><el-icon size="24" color="gray"><Close /></el-icon></div> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
<div class="menu-content flex"> |
||||
|
<div class="w-[200px] bg-gray-50"> |
||||
|
<el-menu |
||||
|
default-active="2" |
||||
|
class="el-menu-vertical-demo" |
||||
|
style="border-right: 1px solid #f9fafb" |
||||
|
@open="handleOpen" |
||||
|
@close="handleClose" |
||||
|
> |
||||
|
<el-menu-item index="2"> |
||||
|
<span>精选</span> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item index="3"> |
||||
|
<span>网页</span> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item index="4"> |
||||
|
<span>移动</span> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item index="5"> |
||||
|
<span>办公</span> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item index="6"> |
||||
|
<span>其他</span> |
||||
|
</el-menu-item> |
||||
|
</el-menu> |
||||
|
</div> |
||||
|
<div class="w-full p-3"> |
||||
|
<el-scrollbar class="w-full" height="calc(100vh - 108px)"> |
||||
|
<el-row :gutter="16"> |
||||
|
<template v-for="item in 20" :key="item"> |
||||
|
<el-col :span="8"> |
||||
|
<div class="px-3 py-1 mb-2 text-sm text-gray-700 font-bold flex justify-between items-center">API 与工具</div> |
||||
|
<p class="scrollbar-demo-item hover:bg-gray-100 px-3 py-1 mb-2 cursor-pointer text-sm text-gray-500 flex justify-between items-center"> |
||||
|
<span class="product-name">{{ item }} 云服务器 ECS</span> |
||||
|
<span class="icon flex items-center hover:flex"> |
||||
|
<el-icon color="gray"><Star /></el-icon> |
||||
|
</span> |
||||
|
</p> |
||||
|
</el-col> |
||||
|
</template> |
||||
|
</el-row> |
||||
|
</el-scrollbar> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="my-3"> |
||||
|
<el-alert type="warning"> |
||||
|
<template #title> |
||||
|
<text type="text" class="cursor-pointer">关于《小程序技术平台服务协议》更新公告</text> |
||||
|
</template> |
||||
|
</el-alert> |
||||
|
</div> |
||||
|
<el-card shadow="hover" class="flash mt-4 bg-white hover:shadow rounded-lg"> |
||||
|
<template #header>我的应用</template> |
||||
|
<el-row :gutter="16"> |
||||
|
<template v-for="(item,index) in list" :key="index"> |
||||
|
<el-col :span="6" @click="openSpmUrl(`https://${item.tenantId}.websoft.top/token-login`,item,item.tenantId)"> |
||||
|
<div class="app-item block border-solid rounded-lg border-gray-300 border-1 bg-white mb-4 p-3 flex flex-row items-center hover:border-blue-4 hover:border-1.5 cursor-pointer"> |
||||
|
<el-avatar :src="item?.logo" shape="square" /> |
||||
|
<div class="info ml-2"> |
||||
|
<div class="app-item-title font-bold flex items-center">{{ item.tenantName }}<el-tag type="warning" class="ml-2" size="small">网页</el-tag></div> |
||||
|
<div class="app-item-desc text-gray-400">{{ item.comments }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</template> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
|
||||
|
<!-- <el-card shadow="hover" class="mt-4">--> |
||||
|
<!-- <el-tabs v-model="activeIndex" type="">--> |
||||
|
<!-- <el-tab-pane label="微信小程序" name="mp-weixin">--> |
||||
|
<!-- <el-table :data="tableData" stripe style="width: 100%">--> |
||||
|
<!-- <el-table-column prop="date" label="Date" width="180" />--> |
||||
|
<!-- <el-table-column prop="name" label="Name" width="180" />--> |
||||
|
<!-- <el-table-column prop="address" label="Address" />--> |
||||
|
<!-- </el-table>--> |
||||
|
<!-- </el-tab-pane>--> |
||||
|
<!-- <el-tab-pane label="网页/移动应用" name="web">--> |
||||
|
<!-- </el-tab-pane>--> |
||||
|
<!-- </el-tabs>--> |
||||
|
<!-- </el-card>--> |
||||
|
<el-card shadow="hover" class="flash mt-4 bg-white hover:shadow "> |
||||
|
<template #header>开发工具推荐</template> |
||||
|
<el-row :gutter="16"> |
||||
|
<template v-for="(item,index) in list" :key="index"> |
||||
|
<el-col :span="6" @click="openSpmUrl(`https://${item.tenantId}.websoft.top/token-login`,item,item.tenantId)"> |
||||
|
<div class="app-item block border-solid rounded-lg border-gray-300 border-1 mb-4 p-3 flex flex-row items-center hover:border-blue-4 hover:border-1.5 cursor-pointer"> |
||||
|
<div class="info ml-2"> |
||||
|
<div class="app-item-title">{{ item.tenantName }}</div> |
||||
|
<div class="app-item-desc text-gray-400">{{ item.comments }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</template> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
</el-main> |
||||
|
</el-container> |
||||
|
</el-container> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState"; |
||||
|
import useFormData from '@/utils/use-form-data'; |
||||
|
import type { User } from '@/api/system/user/model'; |
||||
|
import { ref } from 'vue' |
||||
|
import {useServerRequest} from "~/composables/useServerRequest"; |
||||
|
import type {ApiResult, PageResult} from "~/api"; |
||||
|
import type {Company} from "~/api/system/company/model"; |
||||
|
import type {Tenant} from "~/api/system/tenant/model"; |
||||
|
|
||||
|
// 配置信息 |
||||
|
const runtimeConfig = useRuntimeConfig(); |
||||
|
const route = useRoute(); |
||||
|
const website = useWebsite() |
||||
|
const config = useConfigInfo(); |
||||
|
const token = useToken(); |
||||
|
const userInfo = ref<User>(); |
||||
|
const visible = ref(false); |
||||
|
const showIcon = ref(false); |
||||
|
const activeIndex = ref('mp-weixin'); |
||||
|
const list = ref<Tenant[]>(); |
||||
|
const avatar = ref(localStorage.getItem('avatar')) |
||||
|
|
||||
|
|
||||
|
import { |
||||
|
Document, |
||||
|
Menu as IconMenu, |
||||
|
Location, |
||||
|
Expand, |
||||
|
Memo, |
||||
|
Close, |
||||
|
Star, |
||||
|
Setting, |
||||
|
} from '@element-plus/icons-vue' |
||||
|
import {navigateTo} from "#imports"; |
||||
|
const handleOpen = (key: string, keyPath: string[]) => { |
||||
|
console.log(key, keyPath) |
||||
|
} |
||||
|
const handleClose = (key: string, keyPath: string[]) => { |
||||
|
console.log(key, keyPath) |
||||
|
} |
||||
|
|
||||
|
const tableData = [ |
||||
|
{ |
||||
|
date: '2016-05-03', |
||||
|
name: 'Tom', |
||||
|
address: 'No. 189, Grove St, Los Angeles', |
||||
|
}, |
||||
|
{ |
||||
|
date: '2016-05-02', |
||||
|
name: 'Tom', |
||||
|
address: 'No. 189, Grove St, Los Angeles', |
||||
|
}, |
||||
|
{ |
||||
|
date: '2016-05-04', |
||||
|
name: 'Tom', |
||||
|
address: 'No. 189, Grove St, Los Angeles', |
||||
|
}, |
||||
|
{ |
||||
|
date: '2016-05-01', |
||||
|
name: 'Tom', |
||||
|
address: 'No. 189, Grove St, Los Angeles', |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
// 配置信息 |
||||
|
const { form, assignFields } = useFormData<User>({ |
||||
|
userId: undefined, |
||||
|
nickname: '', |
||||
|
username: '', |
||||
|
phone: '', |
||||
|
mobile: '', |
||||
|
sex: '', |
||||
|
sexName: '', |
||||
|
email: '', |
||||
|
password: '', |
||||
|
code: '', |
||||
|
smsCode: '', |
||||
|
comments: '', |
||||
|
remember: true, |
||||
|
isAdmin: true |
||||
|
}); |
||||
|
|
||||
|
useHead({ |
||||
|
title: `用户中心 - ${config.value?.siteName}`, |
||||
|
meta: [{ name: website.value.keywords, content: website.value.comments }] |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
function handleCommand(command: string) { |
||||
|
switch (command) { |
||||
|
case 'logOut': |
||||
|
logOut(); |
||||
|
break; |
||||
|
default: |
||||
|
navigateTo('/user'); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function logOut() { |
||||
|
token.value = '' |
||||
|
navigateTo('/passport/login') |
||||
|
} |
||||
|
|
||||
|
const onDone = (index: string) => { |
||||
|
activeIndex.value = index; |
||||
|
} |
||||
|
|
||||
|
const onSubmit = async () => { |
||||
|
const {data: modify } = await useServerRequest<ApiResult<User>>('/auth/user',{ |
||||
|
baseURL: runtimeConfig.public.apiServer, |
||||
|
method: 'put', |
||||
|
body: form |
||||
|
}) |
||||
|
if(modify.value?.code == 0){ |
||||
|
ElMessage.success('修改成功') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handleSearch = () => { |
||||
|
console.log('搜索') |
||||
|
} |
||||
|
|
||||
|
|
||||
|
const getUserInfo = async () => { |
||||
|
const {data: response} = await useServerRequest<ApiResult<User>>('/auth/user',{baseURL: runtimeConfig.public.apiServer}) |
||||
|
if(response.value?.data){ |
||||
|
userInfo.value = response.value?.data; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
const reload = async () => { |
||||
|
const {data: response} = await useServerRequest<ApiResult<PageResult<Tenant>>>('/system/tenant/page',{baseURL: runtimeConfig.public.apiServerDev, params: { |
||||
|
userId: localStorage.getItem('UserId') |
||||
|
}}) |
||||
|
if(response.value?.data){ |
||||
|
console.log(response.value,'tenantList') |
||||
|
if (response.value?.data.list) { |
||||
|
list.value = response.value?.data.list; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
watch( |
||||
|
() => route.path, |
||||
|
() => { |
||||
|
reload(); |
||||
|
getUserInfo(); |
||||
|
}, |
||||
|
{ immediate: true } |
||||
|
); |
||||
|
</script> |
||||
|
<style lang="less"> |
||||
|
.el-row { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.el-row:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
.el-col { |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.grid-content { |
||||
|
border-radius: 4px; |
||||
|
min-height: 36px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,208 @@ |
|||||
|
<template> |
||||
|
<!-- Banner --> |
||||
|
<Banner :layout="layout" /> |
||||
|
|
||||
|
<div class="container flex flex-col w-full md:w-screen-xl m-auto my-3"> |
||||
|
|
||||
|
<Breadcrumb :data="form" :title="`搜索结果`" /> |
||||
|
|
||||
|
<el-main class="overflow-y-hidden"> |
||||
|
<el-card shadow="hover" class="flash mt-4 bg-white hover:shadow rounded-lg"> |
||||
|
<template #header>我的应用</template> |
||||
|
<el-row :gutter="16"> |
||||
|
<template v-for="(item,index) in list" :key="index"> |
||||
|
<el-col :span="6" @click="openSpmUrl(`https://${item.tenantId}.websoft.top/token-login`,item,item.tenantId)"> |
||||
|
<div class="app-item block border-solid rounded-lg border-gray-300 border-0.5 bg-white mb-4 p-3 flex flex-row items-center hover:bg-gray-50 cursor-pointer"> |
||||
|
<el-avatar :src="item?.logo" shape="square" /> |
||||
|
<div class="info ml-2"> |
||||
|
<div class="app-item-title font-bold flex items-center">{{ item.tenantName }}<el-tag type="warning" class="ml-2" size="small">网页</el-tag></div> |
||||
|
<div class="app-item-desc text-gray-400">{{ item.comments }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</template> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
|
||||
|
<!-- <el-card shadow="hover" class="mt-4">--> |
||||
|
<!-- <el-tabs v-model="activeIndex" type="">--> |
||||
|
<!-- <el-tab-pane label="微信小程序" name="mp-weixin">--> |
||||
|
<!-- <el-table :data="tableData" stripe style="width: 100%">--> |
||||
|
<!-- <el-table-column prop="date" label="Date" width="180" />--> |
||||
|
<!-- <el-table-column prop="name" label="Name" width="180" />--> |
||||
|
<!-- <el-table-column prop="address" label="Address" />--> |
||||
|
<!-- </el-table>--> |
||||
|
<!-- </el-tab-pane>--> |
||||
|
<!-- <el-tab-pane label="网页/移动应用" name="web">--> |
||||
|
<!-- </el-tab-pane>--> |
||||
|
<!-- </el-tabs>--> |
||||
|
<!-- </el-card>--> |
||||
|
<el-card shadow="hover" class="flash mt-4 bg-white hover:shadow "> |
||||
|
<template #header>开发工具推荐</template> |
||||
|
<el-row :gutter="16"> |
||||
|
<template v-for="(item,index) in list" :key="index"> |
||||
|
<el-col :span="6" @click="openSpmUrl(`https://${item.tenantId}.websoft.top/token-login`,item,item.tenantId)"> |
||||
|
<div class="app-item block border-solid rounded-lg border-gray-300 border-1 mb-4 p-3 flex flex-row items-center hover:border-blue-5 hover:border-1.5 cursor-pointer"> |
||||
|
<div class="info ml-2"> |
||||
|
<div class="app-item-title">{{ item.tenantName }}</div> |
||||
|
<div class="app-item-desc text-gray-400">{{ item.comments }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</template> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
</el-main> |
||||
|
|
||||
|
<!-- 左右结构 --> |
||||
|
<div class="news-box sm:mt-0 mt-2 flex sm:flex-row flex-col justify-between sm:space-x-4"> |
||||
|
<div class="left sm:w-18/24"> |
||||
|
<!-- 文章列表 --> |
||||
|
<div class="news-list"> |
||||
|
<ul class="infinite-list px-3" v-infinite-scroll="load" :infinite-scroll-disabled="disabled"> |
||||
|
<li v-for="item in list"> |
||||
|
<div class="item flex justify-between py-3 px-4 gap-xl mb-5 rounded-lg mb-3 bg-white hover:shadow"> |
||||
|
<div class="item-info py-2 flex flex-col justify-between"> |
||||
|
<div class="title line-clamp-2 overflow-hidden text-ellipsis group-hover:group-hover:text-ellipsis"> |
||||
|
<a :href="`/article/detail/${item.articleId}`" target="_blank" class="text-xl">{{ item.title }}</a> |
||||
|
</div> |
||||
|
<div class="desc max-w-22/24 text-gray-5 sm:block hidden" v-html="item.comments"></div> |
||||
|
<div class="actions text-gray-4 text-sm flex gap-2xl"> |
||||
|
<span href="#">{{ item.updateTime }}</span> |
||||
|
<span href="#">浏览：{{ item.actualViews }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="item-image flex items-center" @click="navigateTo(`/article/detail/${item.articleId}`)"> |
||||
|
<el-image :src="item.image" lazy class="sm:w-[140px] sm:h-[140px] w-[110px] h-[110px] bg-gray-50 cursor-pointer transition rounded-lg sm:rounded-lg ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300" fit="contain" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<div class="text-center text-gray-4"> |
||||
|
<text v-if="disabled">没有更多了</text> |
||||
|
<text @click="load" v-else>加载更多</text> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="right sm:mt-0 mt-4 sm:w-6/24"> |
||||
|
<!-- 推荐文章 --> |
||||
|
<div class="category-item bg-white rounded-lg p-3 hover:shadow"> |
||||
|
<div class="category-name text-lg text-gray-600 border-b border-gray-200 border-b-solid pb-2 mx-2"> |
||||
|
<el-icon> |
||||
|
<ElIconLink/> |
||||
|
</el-icon> |
||||
|
<text class="ml-2">推荐文章</text> |
||||
|
</div> |
||||
|
<div class="flex flex-wrap px-2 py-4"> |
||||
|
<div v-for="(item,index) in links" class="flex items-center"> |
||||
|
<a :href="item.url" target="_blank">{{ item.name }}</a> |
||||
|
<el-divider v-if="index + 1 != links.length" direction="vertical" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="category-item mt-4 bg-white rounded-lg p-3 hover:shadow"> |
||||
|
<div class="category-name text-lg text-gray-600 border-b border-gray-200 border-b-solid pb-2 mx-2"> |
||||
|
<el-icon> |
||||
|
<ElIconLink/> |
||||
|
</el-icon> |
||||
|
<text class="ml-2">点击排行</text> |
||||
|
</div> |
||||
|
<div class="flex flex-wrap px-2 py-4"> |
||||
|
<div v-for="(item,index) in links" class="flex items-center"> |
||||
|
<a :href="item.url" target="_blank">{{ item.name }}</a> |
||||
|
<el-divider v-if="index + 1 != links.length" direction="vertical" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <el-divider />--> |
||||
|
<!-- <div v-if="!list">--> |
||||
|
<!-- <el-empty description="404 页面不存在"></el-empty>--> |
||||
|
<!-- </div>--> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import type {ApiResult, PageResult} from "~/api"; |
||||
|
import type {Article} from "~/api/cms/article/model"; |
||||
|
import {useServerRequest} from "~/composables/useServerRequest"; |
||||
|
import Breadcrumb from "~/components/Breadcrumb.vue"; |
||||
|
import {useForm, useWebsite} from "~/composables/configState"; |
||||
|
import type {Navigation} from "~/api/cms/navigation/model"; |
||||
|
import {getIdByParam, getIdBySpm, getPath} from "~/utils/common"; |
||||
|
|
||||
|
const route = useRoute(); |
||||
|
|
||||
|
// 页面信息 |
||||
|
const list = ref<Article[]>([]); |
||||
|
const title = ref(); |
||||
|
const categoryName = ref(); |
||||
|
const count = ref() |
||||
|
const links = ref<any[]>(); |
||||
|
const page = ref<number>(0); |
||||
|
const disabled = ref<boolean>(false); |
||||
|
const newList = ref<Article[]>(); |
||||
|
const layout = ref<any>(); |
||||
|
|
||||
|
// 获取状态 |
||||
|
const form = ref<Navigation>(); |
||||
|
const website = useWebsite(); |
||||
|
|
||||
|
const load = () => { |
||||
|
if(!disabled.value){ |
||||
|
page.value++; |
||||
|
// reload(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 请求数据 |
||||
|
const reload = async () => { |
||||
|
|
||||
|
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{query: {path: getPath()}}) |
||||
|
if(nav.value?.data){ |
||||
|
form.value = nav.value?.data; |
||||
|
} |
||||
|
// 页面布局 |
||||
|
if(form.value?.layout){ |
||||
|
layout.value = JSON.parse(form.value?.layout) |
||||
|
} |
||||
|
console.log(layout.value) |
||||
|
|
||||
|
// 获取文章分页 |
||||
|
const { data: articleList } = await useServerRequest<ApiResult<PageResult<Article>>>('/cms/article/page',{ |
||||
|
params: { |
||||
|
page: page.value, |
||||
|
categoryId: getIdByParam() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
if(articleList.value?.data){ |
||||
|
list.value = articleList.value.data.list |
||||
|
} |
||||
|
console.log(list.value) |
||||
|
|
||||
|
useHead({ |
||||
|
title: `${form.value.title} - ${website.value.websiteName}`, |
||||
|
meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }], |
||||
|
bodyAttrs: { |
||||
|
class: "page-container", |
||||
|
}, |
||||
|
script: [ |
||||
|
{ |
||||
|
children: "console.log('Hello World')", |
||||
|
}, |
||||
|
], |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
watch( |
||||
|
() => route, |
||||
|
() => { |
||||
|
reload(); |
||||
|
}, |
||||
|
{ immediate: true } |
||||
|
); |
||||
|
|
||||
|
</script> |
||||
Loading…
Reference in new issue