diff --git a/src/api/apiClass.ts b/src/api/apiClass.ts new file mode 100644 index 00000000..0885cde0 --- /dev/null +++ b/src/api/apiClass.ts @@ -0,0 +1,142 @@ +/* + * @Author: 秦少卫 + * @Date: 2024-10-07 17:00:17 + * @LastEditors: 秦少卫 + * @LastEditTime: 2024-10-07 17:00:59 + * @Description: api接口格式化工具 + */ + +import axios, { AxiosInstance, AxiosResponse } from 'axios'; +import qs from 'qs'; +import _ from 'lodash-es'; +const baseURL = import.meta.env.APP_APIHOST; +const tokenKey = 'token'; +function getToken() { + const token = localStorage.getItem(tokenKey); + return token; +} + +const getValue = (item: any) => { + const newData: any = { + id: item.id, + }; + + Object.keys(item.attributes).forEach((key) => { + const info = item.attributes[key]; + newData[key] = info; + if (_.isObject(info)) { + const itemId = _.get(info, 'data.id'); + const itemUrl = _.get(info, 'data.attributes.url'); + const itemImgFormats = _.get(info, 'data.attributes.formats'); + // id、url、图片 Format 属性新增 + if (itemId) { + newData[key + 'Id'] = itemId; + } + if (itemUrl) { + newData[key + 'Url'] = baseURL + itemUrl; + } + if (itemImgFormats) { + addImgFormat(newData, key, itemImgFormats); + } + } + }); + return newData; +}; + +const addImgFormat = (data: any, key: string, item: any) => { + Object.keys(item).forEach((imgKey) => { + data[key + 'Url' + _.capitalize(imgKey)] = baseURL + item[imgKey].url; + }); +}; + +const mapValue = (arr: any) => { + return arr.map((item: any) => getValue(item)); +}; + +interface IPageParams { + [key: string]: any; + pagination?: { + page: number; + pageSize: number; + }; +} + +export default class ServerApi { + instance: AxiosInstance; + apiPath: string; + constructor(path: string, hasToken?: boolean) { + this.apiPath = path; + this.instance = this._initInstance(hasToken); + } + + _initInstance(hasToken?: boolean) { + const instance = axios.create({ baseURL }); + + // 统一处理请求数据 + instance.interceptors.request.use(function (config: any) { + const token = getToken(); + if (token && hasToken) { + config.headers['Authorization'] = `Bearer ${token}`; + } + return config; + }); + + // 统一处理返回数据 + instance.interceptors.response.use(function (response: AxiosResponse) { + // console.log(, 'response'); + + if (!response.config.skipResponse as any) { + if (response.data?.data?.attributes) { + response.data.data = getValue(response.data.data); + } + if (response.data?.data?.length) { + response.data.data = mapValue(response.data.data); + } + if (response.data?.meta?.pagination) { + response.data.pagination = response.data.meta.pagination; + delete response.data.meta; + } + } + return response.data; + }); + return instance; + } + // 查询详情 + get(id: string | number, data = {}) { + return this.instance.get(`${this.apiPath}/${id}?${qs.stringify(data)}`); + } + // 添加 + add(data = {}) { + return this.instance.post(this.apiPath, data); + } + // 删除 + del(id: string | number) { + return this.instance.delete(`${this.apiPath}/${id}`); + } + // 查找 + find(data = {} as IPageParams, pageSize?: number) { + if (pageSize) { + data.pagination = { + page: 1, + pageSize: 50, + }; + } + return this.instance.get(`${this.apiPath}/?${qs.stringify(data)}`); + } + // 更新 + update(id: string, data = {}) { + return this.instance.put(`${this.apiPath}/${id}`, data); + } + + IGet(data = {}, skip = true) { + return this.instance.get(`${this.apiPath}`, { + params: data, + skipResponse: skip, + }); + } + IPost(data = {}, skip = true) { + return this.instance.post(`${this.apiPath}`, data, { + skipResponse: skip, + }); + } +} diff --git a/src/api/material.ts b/src/api/material.ts index 58565e84..ad331ff0 100644 --- a/src/api/material.ts +++ b/src/api/material.ts @@ -2,13 +2,15 @@ * @Author: 秦少卫 * @Date: 2024-04-24 14:07:06 * @LastEditors: 秦少卫 - * @LastEditTime: 2024-06-12 21:42:00 + * @LastEditTime: 2024-10-07 17:06:16 * @Description: 用户接口登录 */ import qs from 'qs'; import axios from 'axios'; +import ApiClass from './apiClass'; + const baseURL = import.meta.env.APP_APIHOST; const instance = axios.create({ baseURL }); @@ -42,4 +44,32 @@ export const getTmplTypes = () => instance.get('/api/templ-types'); export const getTmplList = (data: any) => instance.get('/api/templs?' + data); // 获取banner -export const getBannerList = (data: any) => instance.get('/api/banners?' + data); +// export const getBannerList = (data: any) => instance.get('/api/banners?' + data); + +// 新版 API--------------------- +// 获取模板列表 +export const templsApi = new ApiClass('/api/templs'); +// 获取模板动态参数 +export const customDynamicsApi = new ApiClass('/api/custom/dynamics'); +// 获取模板渲染后的数据 +export const customRenderApi = new ApiClass('/api/custom/render'); +// 素材接口 +export const commonMaterialsApi = new ApiClass('/api/materials'); +// 素材分类 +export const commonMaterialsTypeApi = new ApiClass('/api/material-types'); +// 获取模板类型 +export const commonTmplTypeApi = new ApiClass('/api/templ-types'); +// 获取模板列表 +export const commonTmplApi = new ApiClass('/api/templs'); +// 获取组合元素分类 +export const commonFontGroupTypeApi = new ApiClass('/api/font-style-types'); +// 获取组合元素 +export const commonFontGroupApi = new ApiClass('/api/font-styles'); +// 获取字体列表 +export const commonFontApi = new ApiClass('/api/fonts'); +// 获取边框列表 +export const commonFontStyleApi = new ApiClass('/api/fontborders'); +// 获取画布大小 +export const commonSizeApi = new ApiClass('/api/sizes'); +// banner接口 +export const commonBannerApi = new ApiClass('/api/banners'); diff --git a/src/views/template/components/banner.vue b/src/views/template/components/banner.vue index 2fc6beec..74636859 100644 --- a/src/views/template/components/banner.vue +++ b/src/views/template/components/banner.vue @@ -2,7 +2,7 @@ * @Author: 秦少卫 * @Date: 2024-06-12 16:48:10 * @LastEditors: 秦少卫 - * @LastEditTime: 2024-06-12 21:51:40 + * @LastEditTime: 2024-10-07 17:05:39 * @Description: 幻灯片 -->