| @@ -11,6 +11,19 @@ export function getUser() { | |||
| }) | |||
| } | |||
| /** | |||
| * @description:用户角色 | |||
| * @param | |||
| * @return: | |||
| */ | |||
| export function localDeployApi() { | |||
| return request({ | |||
| url: `/localDeploy`, | |||
| method: 'get', | |||
| }) | |||
| } | |||
| /** | |||
| * @description: api 剩余时长 | |||
| * @param | |||
| @@ -33,4 +46,17 @@ export function privateDeployAdminCurrent() { | |||
| url: `/serviceInfo/privateDeployAdminCurrent`, | |||
| method: 'get', | |||
| }) | |||
| } | |||
| } | |||
| /** | |||
| * @description: 视频制作统计 | |||
| * @param | |||
| * @return: | |||
| */ | |||
| export function videoListApi(pageNum, pageSize) { | |||
| return request({ | |||
| url: `/serviceInfo/privateDeployAdminCurrentVideoRecords?pageNum=${pageNum}&pageSize=${pageSize}`, | |||
| method: 'get', | |||
| }) | |||
| } | |||
| @@ -0,0 +1,13 @@ | |||
| import request from "@/utils/request.js"; | |||
| /** | |||
| * @description: 密钥查看 | |||
| * @param | |||
| * @return: | |||
| */ | |||
| export function secretKeyApi() { | |||
| return request({ | |||
| url: `/thirdPartyApi/current`, | |||
| method: 'get', | |||
| }) | |||
| } | |||
| @@ -21,18 +21,30 @@ | |||
| <el-icon><i-ep-House /></el-icon> | |||
| <span>首页</span> | |||
| </el-menu-item> | |||
| <el-menu-item index="2" @click="router.push('/apiManage')"> | |||
| <el-icon><i-ep-link /></el-icon> | |||
| <span>API接入方管理</span> | |||
| </el-menu-item> | |||
| <el-menu-item index="3" @click="router.push('/privatization')"> | |||
| <el-icon><i-ep-edit /></el-icon> | |||
| <span>私有化客户管理</span> | |||
| </el-menu-item> | |||
| <el-menu-item index="4" @click="router.push('/template')"> | |||
| <el-icon><i-ep-edit /></el-icon> | |||
| <span>模版管理</span> | |||
| </el-menu-item> | |||
| <!-- 邃芒后台 --> | |||
| <el-menu-item v-if="isAdmin === '1'" index="2" @click="router.push('/apiManage')"> | |||
| <el-icon><i-ep-link /></el-icon> | |||
| <span>API接入方管理</span> | |||
| </el-menu-item> | |||
| <el-menu-item v-if="isAdmin === '1' && localDeploy !== 'true'" index="3" @click="router.push('/privatization')"> | |||
| <el-icon><i-ep-edit /></el-icon> | |||
| <span>私有化客户管理</span> | |||
| </el-menu-item> | |||
| <!-- 私有化客户管理 API v-if="(isAdmin === '1' && localDeploy === 'true') || isAdmin === '0'" --> | |||
| <template v-else> | |||
| <el-menu-item index="4" @click="router.push('/template')"> | |||
| <el-icon><i-ep-edit /></el-icon> | |||
| <span>模版管理</span> | |||
| </el-menu-item> | |||
| <el-menu-item index="5" @click="router.push('/secretKey')"> | |||
| <el-icon><i-ep-edit /></el-icon> | |||
| <span>密钥查看</span> | |||
| </el-menu-item> | |||
| <el-menu-item index="6" @click="router.push('/video')"> | |||
| <el-icon><i-ep-edit /></el-icon> | |||
| <span>视频制作统计</span> | |||
| </el-menu-item> | |||
| </template> | |||
| </el-menu> | |||
| </div> | |||
| </div> | |||
| @@ -98,6 +110,10 @@ const AccessToken = localStorage.getItem("AccessToken"); | |||
| // 当前语言状态与国际化组件 | |||
| const { locale } = useI18n(); | |||
| const lanChange = ref(locale); | |||
| const isLogin = ref(false); | |||
| const isAdmin = localStorage.getItem("isAdmin") | |||
| const localDeploy = localStorage.getItem("localDeploy") | |||
| function logout() { | |||
| const msg = | |||
| (lanChange.value as string) == "zh-cn" | |||
| @@ -112,6 +128,7 @@ function logout() { | |||
| }).then(() => { | |||
| logoutApi().then(res => { | |||
| userInfoPinia.loginOut(); | |||
| localStorage.clear() | |||
| router.push(`/login`); | |||
| }) | |||
| localStorage.removeItem("AccessToken"); | |||
| @@ -165,6 +182,9 @@ async function getMenuNavFunc() { | |||
| try { | |||
| const res = await getMenuNavApi(); | |||
| MenuList.value = res.data.menuList; | |||
| if (res.code === 200) { | |||
| isLogin.value = true | |||
| } | |||
| } catch (error) { | |||
| console.log(error); | |||
| } | |||
| @@ -176,7 +196,6 @@ const showChildrenRouter = ref(""); | |||
| //#endregion ------------------------------------ | |||
| const isLogin = ref(false); | |||
| </script> | |||
| @@ -200,6 +200,28 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||
| name: "ruleListMangage.title", | |||
| }, | |||
| }, | |||
| { | |||
| path: "/secretKey", | |||
| component: () => import("@/views/secretKey/index.vue"), | |||
| name: "secretKey", | |||
| meta: { | |||
| title: "secretKey", | |||
| icon: "homepage", | |||
| affix: true, | |||
| name: "ruleListMangage.title", | |||
| }, | |||
| }, | |||
| { | |||
| path: "/video", | |||
| component: () => import("@/views/video/index.vue"), | |||
| name: "video", | |||
| meta: { | |||
| title: "video", | |||
| icon: "homepage", | |||
| affix: true, | |||
| name: "ruleListMangage.title", | |||
| }, | |||
| }, | |||
| ], | |||
| } | |||
| ]; | |||
| @@ -28,10 +28,10 @@ request.interceptors.request.use( | |||
| function (config) { | |||
| // // 给所有授权的请求提供token | |||
| // const AccessToken = localStorage.getItem("AccessToken") | |||
| // if (AccessToken) { | |||
| // config.headers.token = AccessToken | |||
| // } | |||
| const AccessToken = localStorage.getItem("AccessToken") | |||
| if (AccessToken) { | |||
| config.headers.token = AccessToken | |||
| } | |||
| return config | |||
| }, | |||
| function (error) { | |||
| @@ -59,7 +59,7 @@ request.interceptors.response.use( | |||
| } | |||
| let code = response.data.code | |||
| // 当token无效(过期或损坏)时 1053为未登录 | |||
| if (code == 1052 || code == 1053) { | |||
| if (code == 1052 || code == 1053 || code === 701) { | |||
| // localStorage.removeItem("AccessToken"); | |||
| router.push("/login"); | |||
| // ElMessage.error("登录过期,请重新登录!"); | |||
| @@ -78,7 +78,7 @@ request.interceptors.response.use( | |||
| ); | |||
| // 其他错误 | |||
| } else { | |||
| return Promise.reject(response.data) | |||
| return Promise.reject(response.data.message) | |||
| } | |||
| } else { | |||
| // 正常返回 | |||
| @@ -67,7 +67,7 @@ | |||
| >查看密钥</el-button> | |||
| <el-button link type="primary" size="small" @click="loginAccount(scope.row)">{{ scope.row.mallUserInfo ? '修改登录账号' : '新增登录账号'}}</el-button> | |||
| <el-button link type="primary" size="small" @click="setTime(scope.row.id)">设置时长</el-button> | |||
| <el-button link type="primary" size="small" @click="modelDialogVisible = true">关联模版</el-button> | |||
| <el-button link type="primary" size="small" @click="associationTemp(scope.row.id)">关联模版</el-button> | |||
| </template> | |||
| </el-table-column> | |||
| </el-table> | |||
| @@ -143,7 +143,7 @@ | |||
| </el-dialog> | |||
| <!-- 登录账号 --> | |||
| <el-dialog v-model="accountDialogVisible" title="登录账号" width="35%" :before-close="handleClose" > | |||
| <el-dialog v-model="accountDialogVisible" v-if="accountDialogVisible" title="登录账号" width="35%" :before-close="handleClose" > | |||
| <el-form ref="ruleForm2" label-position="left" label-width="120px" :model="formData2" :rules="rules2"> | |||
| <el-form-item label="用户名" prop="username"> | |||
| <el-input :disabled="mallUserInfoFlag" v-model="formData2.username" :placeholder="$t('businessMangage.nameInputText')" /> | |||
| @@ -171,8 +171,8 @@ | |||
| </span> | |||
| </template> | |||
| </el-dialog> | |||
| <el-dialog v-model="modelDialogVisible" title="关联模版" width="60%" :before-close="handleClose" > | |||
| <model></model> | |||
| <el-dialog v-model="modelDialogVisible" v-if="modelDialogVisible" title="关联模版" width="60%" :before-close="handleClose" > | |||
| <model :serviceId="serviceId" @close="handleClose"></model> | |||
| </el-dialog> | |||
| <div class="pagination"> | |||
| @@ -397,6 +397,7 @@ const loginAccount = (item) => { | |||
| accountDialogVisible.value = true | |||
| } | |||
| // 登录账号 | |||
| const formData2 = ref({ | |||
| serviceId: "", | |||
| username: "", | |||
| @@ -464,6 +465,11 @@ const addAccount = async (refForm) => { | |||
| // 关联模版 | |||
| const modelDialogVisible = ref(false); | |||
| const serviceId = ref('') | |||
| function associationTemp(id) { | |||
| modelDialogVisible.value = true | |||
| serviceId.value = id | |||
| } | |||
| onMounted(() => { | |||
| getBusinessListFunc(1, 10); | |||
| @@ -13,6 +13,15 @@ | |||
| <img :src="scope.row.coverImg" width="50" /> | |||
| </template> | |||
| </el-table-column> | |||
| <el-table-column | |||
| prop="createTime" | |||
| :label="$t('businessMangage.createTime')" | |||
| align="center" | |||
| > | |||
| <template #default="scope"> | |||
| {{ getDate(scope.row.createDate) }} | |||
| </template> | |||
| </el-table-column> | |||
| </el-table> | |||
| <div class="pagination"> | |||
| <el-pagination | |||
| @@ -29,11 +38,7 @@ | |||
| /> | |||
| </div> | |||
| <div style="margin-top: 20px"> | |||
| <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])" | |||
| >Toggle selection status of second and third rows</el-button | |||
| > | |||
| <el-button @click="toggleSelection()">Clear selection</el-button> --> | |||
| <el-button @click="toggleSelection([tableData[1], tableData[2]])" | |||
| <el-button @click="handleClose" | |||
| >取消</el-button | |||
| > | |||
| <el-button type="primary" @click="addModel()">确认关联</el-button> | |||
| @@ -44,6 +49,19 @@ | |||
| import { ref } from 'vue' | |||
| import { ElTable } from 'element-plus' | |||
| import { modelAllList, personMouldIdList, associatedMould } from '@/apis/apiManage.js' | |||
| import dayjs from "dayjs"; | |||
| const emit = defineEmits(["close"]); | |||
| const props = defineProps({ | |||
| serviceId: { | |||
| required: true, | |||
| } | |||
| }); | |||
| const getDate = (val) => { | |||
| return dayjs(val).format("YYYY-MM-DD"); | |||
| }; | |||
| interface User { | |||
| date: string | |||
| @@ -66,7 +84,6 @@ const toggleSelection = (rows?: User[]) => { | |||
| } | |||
| } | |||
| const handleSelectionChange = (val: User[]) => { | |||
| debugger | |||
| multipleSelection.value = val | |||
| } | |||
| const pageNum = ref(1); | |||
| @@ -87,9 +104,27 @@ const modelAllListFunc = async (PageNum, PageSize) => { | |||
| try { | |||
| const res = await modelAllList(PageNum, PageSize); | |||
| const modelIds = await personMouldIdList(); | |||
| let idIndx = [] | |||
| res.data.list.forEach((ele, idx) => { | |||
| modelIds.data.forEach(item => { | |||
| if (ele.id === item.personMouldId) { | |||
| idIndx.push(idx) | |||
| } | |||
| }) | |||
| }) | |||
| console.log(res, "res"); | |||
| tableData.value = res.data.list; | |||
| total.value = res.data.total * 1; | |||
| // 选中关联模版 | |||
| if(idIndx.length) { | |||
| setTimeout(()=> { | |||
| let list = [] | |||
| idIndx.forEach(d => { | |||
| list.push(tableData.value[d]) | |||
| }) | |||
| toggleSelection(list) | |||
| }, 500) | |||
| } | |||
| } catch (error) { | |||
| console.log(error, "err"); | |||
| } | |||
| @@ -97,33 +132,24 @@ const modelAllListFunc = async (PageNum, PageSize) => { | |||
| const addModel = async () => { | |||
| console.log(multipleSelection.value) | |||
| debugger | |||
| let mouldIds = [] | |||
| multipleSelection.value.forEach(res => { | |||
| mouldIds.push(res.id) | |||
| }) | |||
| const data = { | |||
| mouldIds: [], | |||
| serviceId: '' | |||
| mouldIds: mouldIds, | |||
| serviceId: props.serviceId | |||
| } | |||
| const res = await associatedMould(data); | |||
| // await refForm.validate(async (valid, fields) => { | |||
| // if (valid) { | |||
| // const data = formData2.value; | |||
| // try { | |||
| // const res = await associatedMould(data); | |||
| // if (res.code == 200) { | |||
| // ElMessage.success("添加成功!"); | |||
| // dialogVisible.value = false; | |||
| // } | |||
| // getBusinessListFunc(1, 10); | |||
| // pageNum.value = 1; | |||
| // pageSize.value = 10; | |||
| // } catch (error) { | |||
| // console.log(error, "err"); | |||
| // ElMessage.error(error.message); | |||
| // } | |||
| // } else { | |||
| // ElMessage.error("请完善信息!"); | |||
| // } | |||
| // }); | |||
| if(res.code === 200) { | |||
| ElMessage.success("关联成功!"); | |||
| handleClose() | |||
| } | |||
| }; | |||
| function handleClose() { | |||
| emit("close"); | |||
| } | |||
| onMounted(() => { | |||
| modelAllListFunc(1, 10); | |||
| }); | |||
| @@ -14,23 +14,26 @@ | |||
| <ul class="user-info"> | |||
| <li><div style="height: 100%"><el-icon><i-ep-UserFilled /></el-icon> 登录账号<div class="user-right">{{ userData.username }}</div></div></li> | |||
| <li><el-icon><i-ep-Avatar /></el-icon> 用户昵称 <div class="user-right">{{ userData.name }}</div></li> | |||
| <li><el-icon><i-ep-User /></el-icon> 当前账户时长 <div class="user-right"> {{ userData.remainingTimes }} (秒)</div></li> | |||
| <li><el-icon><i-ep-User /></el-icon> 手机号 <div class="user-right"> {{ userData.phone }}</div></li> | |||
| <li v-if="(userData.isAdmin === 1 && userData.localDeploy) || userData.isAdmin === 0"><el-icon><i-ep-User /></el-icon> 当前账户时长 <div class="user-right"> {{ userData.remainingTimes }} (秒)</div></li> | |||
| <li> | |||
| <el-icon><i-ep-edit /></el-icon> 安全设置 | |||
| <div class="user-right"> | |||
| <a @click="editDialogVisible = true">修改密码</a> | |||
| </div> | |||
| </li> | |||
| <template v-if="userData.isAdmin === '1' && !userData.localDeploy"> | |||
| <li><el-icon><i-ep-User /></el-icon> 剩余时长 <div class="user-right"> {{ }}(秒)</div></li> | |||
| <li> | |||
| <li v-if="userData.isAdmin === '1' && userData.localDeploy"> | |||
| <el-icon><i-ep-Pointer /></el-icon> 视频制作统计 | |||
| <div class="user-right"> | |||
| <a>查看</a> | |||
| <a @click="videoDialogVisible = true">查看</a> | |||
| </div> | |||
| </li> | |||
| <li v-if="userData.isAdmin === 0"> | |||
| <el-icon><i-ep-Pointer /></el-icon>密钥 | |||
| <div class="user-right"> | |||
| <a @click="router.push('/secretKey')">查看</a> | |||
| </div> | |||
| </li> | |||
| </template> | |||
| </ul> | |||
| </div> | |||
| </el-card> | |||
| @@ -41,31 +44,50 @@ | |||
| </template> | |||
| <script setup lang="ts"> | |||
| import editPass from '../editPass/index.vue' | |||
| import { getUser, privateDeployAdminCurrent, current } from "@/apis/home.js"; | |||
| import { useRoute, useRouter } from "vue-router"; | |||
| import { getUser, privateDeployAdminCurrent, current, localDeployApi } from "@/apis/home.js"; | |||
| const route = useRoute(); | |||
| const router = useRouter(); | |||
| const Avatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png') | |||
| const editDialogVisible = ref(false) | |||
| const handleClose = () => { | |||
| editDialogVisible.value = false; | |||
| }; | |||
| const userData = ref({}); | |||
| const userData = ref({ | |||
| username: '', | |||
| name: '', | |||
| remainingTimes: '', | |||
| phone: '', | |||
| isAdmin: '', | |||
| localDeploy: '' | |||
| }); | |||
| function getUserFn() { | |||
| getUser().then(res => { | |||
| userData.value = res.data | |||
| localStorage.setItem("username", res.data.username); | |||
| localStorage.setItem("isAdmin", res.data.isAdmin); // isAdmin=1,为管理人员(邃芒后台) , isAdmin=0,为API接入方登录后台 isAmin=1&&localDeploy=true,就是私有化部署的管理后台 | |||
| if (res.data.isAdmin === 1 && res.data.localDeploy || res.data.isAdmin === 0) { | |||
| getTime() | |||
| } | |||
| }) | |||
| } | |||
| function localDeployFn() { | |||
| localDeployApi().then(res => { | |||
| userData.value.localDeploy = res.data | |||
| localStorage.setItem("localDeploy", res.data); | |||
| }) | |||
| } | |||
| // 当前账户时长 | |||
| async function getTime() { | |||
| let res = userData.isAdmin === 1 && userData.localDeploy ? await privateDeployAdminCurrent() : await current() | |||
| userData.value.remainingTimes = res.data.remainingTimes | |||
| } | |||
| onMounted(() => { | |||
| getUserFn() | |||
| onMounted(async () => { | |||
| await getUserFn() | |||
| await localDeployFn() | |||
| }); | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| @@ -184,15 +184,15 @@ const getDate = (val) => { | |||
| const handleSizeChange = (val) => { | |||
| pageSize.value = val; | |||
| getBusinessListFunc(pageNum.value, pageSize.value); | |||
| getListData(pageNum.value, pageSize.value); | |||
| }; | |||
| const handleCurrentChange = (val) => { | |||
| pageNum.value = val; | |||
| getBusinessListFunc(pageNum.value, pageSize.value); | |||
| getListData(pageNum.value, pageSize.value); | |||
| }; | |||
| const getBusinessListFunc = async (PageNum, PageSize) => { | |||
| const getListData = async (PageNum, PageSize) => { | |||
| try { | |||
| const res = await businessListApi(PageNum, PageSize, 2); | |||
| console.log(res, "res"); | |||
| @@ -278,7 +278,7 @@ const addNew = async (refForm) => { | |||
| ElMessage.success("添加成功!"); | |||
| dialogVisible.value = false; | |||
| } | |||
| getBusinessListFunc(1, 10); | |||
| getListData(1, 10); | |||
| pageNum.value = 1; | |||
| pageSize.value = 10; | |||
| } catch (error) { | |||
| @@ -317,7 +317,7 @@ const setTime = (id) => { | |||
| } | |||
| onMounted(() => { | |||
| getBusinessListFunc(1, 10); | |||
| getListData(1, 10); | |||
| }); | |||
| </script> | |||
| @@ -0,0 +1,43 @@ | |||
| <template> | |||
| <el-form :model="form" label-width="120px" class="page"> | |||
| <el-form-item label="name"> | |||
| <el-input v-model="form.name" /> | |||
| </el-form-item> | |||
| <el-form-item label="appId"> | |||
| <el-input v-model="form.appId" /> | |||
| </el-form-item> | |||
| <el-form-item label="appKey"> | |||
| <el-input v-model="form.appKey" /> | |||
| </el-form-item> | |||
| <el-form-item label="signKey"> | |||
| <el-input v-model="form.signKey" /> | |||
| </el-form-item> | |||
| </el-form> | |||
| </template> | |||
| <script lang="ts" setup> | |||
| import { reactive } from 'vue' | |||
| import { secretKeyApi } from '@/apis/secretKey.js' | |||
| const form = ref({ | |||
| name: '', | |||
| appId: '', | |||
| appKey: '', | |||
| signKey: '' | |||
| }) | |||
| function getSecretKey() { | |||
| secretKeyApi().then(res => { | |||
| form.value = res.data | |||
| }) | |||
| } | |||
| onMounted(() => { | |||
| getSecretKey(); | |||
| }); | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page{ | |||
| height: calc(100vh - 80px); | |||
| background-color: #ffffff; | |||
| border-radius: 30px 0 0 0; | |||
| overflow: hidden; | |||
| padding: 10vh; | |||
| } | |||
| </style> | |||
| @@ -14,11 +14,11 @@ | |||
| align="center" | |||
| /> | |||
| <el-table-column | |||
| prop="address" | |||
| label="图片" | |||
| align="center" | |||
| /> | |||
| <el-table-column label="图片" align="center"> | |||
| <template #default="scope"> | |||
| <img :src="scope.row.coverImg" width="50" /> | |||
| </template> | |||
| </el-table-column> | |||
| <el-table-column | |||
| prop="createTime" | |||
| label="创建时间" | |||
| @@ -73,15 +73,15 @@ const getDate = (val) => { | |||
| const handleSizeChange = (val) => { | |||
| pageSize.value = val; | |||
| getBusinessListFunc(pageNum.value, pageSize.value); | |||
| getListData(pageNum.value, pageSize.value); | |||
| }; | |||
| const handleCurrentChange = (val) => { | |||
| pageNum.value = val; | |||
| getBusinessListFunc(pageNum.value, pageSize.value); | |||
| getListData(pageNum.value, pageSize.value); | |||
| }; | |||
| const getBusinessListFunc = async (PageNum, PageSize) => { | |||
| const getListData = async (PageNum, PageSize) => { | |||
| try { | |||
| const res = await templateListApi(PageNum, PageSize); | |||
| console.log(res, "res"); | |||
| @@ -92,7 +92,7 @@ const getBusinessListFunc = async (PageNum, PageSize) => { | |||
| } | |||
| }; | |||
| onMounted(() => { | |||
| getBusinessListFunc(1, 10); | |||
| getListData(1, 10); | |||
| }); | |||
| </script> | |||
| @@ -0,0 +1,148 @@ | |||
| <template> | |||
| <div class="page justify-around"> | |||
| <el-table | |||
| :data="tableData" | |||
| style="width: 100%; height: 90%" | |||
| size="large" | |||
| align="center" | |||
| border | |||
| > | |||
| <el-table-column | |||
| prop="serviceId" | |||
| label="接入方编码" | |||
| align="center"> | |||
| <template #default="scope"> | |||
| <el-button type="primary" text @click="getDetail(scope.row.serviceId)">{{ scope.row.serviceId }}</el-button> | |||
| </template> | |||
| </el-table-column> | |||
| <el-table-column | |||
| prop="videoTime" | |||
| label="视频时长" | |||
| align="center" | |||
| /> | |||
| <el-table-column | |||
| prop="videoUrl" | |||
| label="视频链接" | |||
| align="center" | |||
| /> | |||
| <el-table-column | |||
| prop="createTime" | |||
| label="创建时间" | |||
| align="center" | |||
| > | |||
| <template #default="scope"> | |||
| {{ getDate(scope.row.createTime) }} | |||
| </template> | |||
| </el-table-column> | |||
| </el-table> | |||
| <div class="pagination"> | |||
| <el-pagination | |||
| v-model:current-page="pageNum" | |||
| v-model:page-size="pageSize" | |||
| :page-sizes="[10, 50, 100]" | |||
| :small="false" | |||
| :disabled="false" | |||
| :background="true" | |||
| layout="total, sizes, prev, pager, next, jumper" | |||
| :total="total" | |||
| @size-change="handleSizeChange" | |||
| @current-change="handleCurrentChange" | |||
| /> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <!-- videoType==1为竖,==2为横 --> | |||
| <script setup> | |||
| //#region 导入 | |||
| import { videoListApi } from '@/apis/home.js' | |||
| import { useI18n } from "vue-i18n"; | |||
| import dayjs from "dayjs"; | |||
| import { useRoute, useRouter } from "vue-router"; | |||
| const route = useRoute(); | |||
| const router = useRouter(); | |||
| const tableData = ref([]); | |||
| const pageNum = ref(1); | |||
| const pageSize = ref(10); | |||
| const total = ref(0); | |||
| const getDate = (val) => { | |||
| return dayjs(val).format("YYYY-MM-DD"); | |||
| }; | |||
| const handleSizeChange = (val) => { | |||
| pageSize.value = val; | |||
| getBusinessListFunc(pageNum.value, pageSize.value); | |||
| }; | |||
| const handleCurrentChange = (val) => { | |||
| pageNum.value = val; | |||
| getBusinessListFunc(pageNum.value, pageSize.value); | |||
| }; | |||
| const getBusinessListFunc = async (PageNum, PageSize) => { | |||
| try { | |||
| const res = await videoListApi(PageNum, PageSize); | |||
| console.log(res, "res"); | |||
| tableData.value = res.data.list; | |||
| total.value = res.data.total * 1; | |||
| } catch (error) { | |||
| console.log(error, "err"); | |||
| } | |||
| }; | |||
| //查看详情 | |||
| function getDetail(id) { | |||
| router.push({ | |||
| path: "/apiManage", | |||
| query: { | |||
| id, | |||
| }, | |||
| }); | |||
| } | |||
| onMounted(() => { | |||
| getBusinessListFunc(1, 10); | |||
| }); | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| height: calc(100vh - 80px); | |||
| // height: calc(100vh - 80px); | |||
| background-color: #ffffff; | |||
| border-radius: 30px 0 0 0; | |||
| overflow: hidden; | |||
| padding: 10vh; | |||
| .addbtn { | |||
| margin-bottom: 2vh; | |||
| } | |||
| .formData { | |||
| padding: 5vh 3vh; | |||
| } | |||
| .pagination { | |||
| position: fixed; | |||
| left: 55%; | |||
| bottom: 8vh; | |||
| transform: translateX(-50%); | |||
| border-radius: 5px; | |||
| padding: 10px 20px; | |||
| z-index: 99; | |||
| transition: all 0.3s; | |||
| cursor: pointer; | |||
| &:hover { | |||
| background-color: #b8b8b873; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||