feat: works delete

src/api/material.ts

@@ -3,7 +3,7 @@
  * @Date: 2021-08-27 14:42:15
  * @Description: 媒体相关接口
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-13 00:25:25
+ * @LastEditTime: 2023-12-11 11:40:47
  */
 import fetch from '@/utils/axios'
 
@@ -23,6 +23,7 @@ export const getImagesList = (params: Type.Object = {}) => fetch('design/imgs',
 // 我的上传列表
 export const getMyPhoto = (params: Type.Object = {}) => fetch('design/user/image', params)
 export const deleteMyPhoto = (params: Type.Object = {}) => fetch('design/user/image/del', params, 'post')
+export const deleteMyWorks = (params: Type.Object = {}) => fetch('design/poster/del', params, 'post')
 
 // 添加图片
 export const addMyPhoto = (params: Type.Object = {}) => fetch('design/user/add_image', params)

src/components/modules/panel/wrap/UserWrap.vue

@@ -3,7 +3,7 @@
  * @Date: 2022-02-13 22:18:35
  * @Description: 我的
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-04 19:11:12
+ * @LastEditTime: 2023-12-11 11:50:34
 -->
 <template>
   <div class="wrap">
@@ -17,12 +17,12 @@
       </uploader>
       <el-button class="upload-btn upload-psd" plain type="primary" @click="openPSD">上传 PSD 模板</el-button>
       <div style="margin: 1rem; height: 100vh">
-        <photo-list ref="imgListRef" :edit="editOptions" :isDone="isDone" :listData="imgList" @load="load" @drag="dragStart" @select="selectImg" />
+        <photo-list ref="imgListRef" :edit="editOptions.photo" :isDone="isDone" :listData="imgList" @load="load" @drag="dragStart" @select="selectImg" />
       </div>
     </div>
     <div v-show="tabActiveName === 'design'" class="wrap">
       <ul ref="listRef" v-infinite-scroll="loadDesign" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
-        <img-water-fall :listData="designList" @select="selectDesign" />
+        <img-water-fall :edit="editOptions.works" :listData="designList" @select="selectDesign" />
         <!-- <div v-show="loading" class="loading"><i class="el-icon-loading"></i>拼命加载中..</div> -->
         <div v-show="isDone" class="loading">全部加载完毕</div>
       </ul>
@@ -145,12 +145,29 @@ export default defineComponent({
       api.material.deleteMyPhoto({ id: item.id, key })
       state.imgListRef.delItem(i) // 通知标记
     }
-    state.editOptions = [
+    const deleteWorks = async ({ i, item }: any) => {
+      const isPass = await useConfirm('警告', '删除后不可找回，请确认操作', 'warning')
+      if (isPass) {
+        await api.material.deleteMyWorks({ id: item.id })
+        setTimeout(() => {
+          router.push({ path: '/home', query: {  }, replace: true })
+          loadDesign(true)
+        }, 300);
+      }
+    }
+    state.editOptions = {
+      photo: [
       {
         name: '删除',
         fn: deleteImg,
       },
+    ],works: [
+      {
+        name: '删除',
+        fn: deleteWorks,
+      },
     ]
+    }
     const dragStart = (index: number) => {
       const item = state.imgList[index]
       store.commit('selectItem', { data: { value: item }, type: 'image' })

src/components/modules/panel/wrap/components/editModel.vue

@@ -2,19 +2,17 @@
  * @Author: ShawnPhang
  * @Date: 2022-01-11 17:54:14
  * @Description: 模板编辑组件
- * @LastEditors: ShawnPhang
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2022-02-24 15:00:36
+ * @LastEditTime: 2023-12-11 11:35:48
 -->
 <template>
   <div class="wrap">
     <slot />
     <div class="showMask" @click.stop="">
-      <el-dropdown placement="bottom-end">
+      <el-dropdown placement="bottom-end" :show-arrow="false">
         <i class="iconfont icon-more"></i>
         <template #dropdown>
           <el-dropdown-menu>
-            <!-- <el-dropdown-item @click="action('edit')">编辑</el-dropdown-item>
-            <el-dropdown-item @click="action('del')">删除</el-dropdown-item> -->
             <el-dropdown-item v-for="(op, oi) in options" :key="oi + 'o'" @click="op.fn(data)">{{ op.name }}</el-dropdown-item>
           </el-dropdown-menu>
         </template>

src/components/modules/panel/wrap/components/imgWaterFall.vue

@@ -3,14 +3,19 @@
  * @Date: 2021-12-16 16:20:16
  * @Description: 瀑布流组件
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-03 23:22:46
+ * @LastEditTime: 2023-12-11 11:45:24
 -->
 <template>
   <div ref="imgWaterFall" :style="{ height: countHeight + 'px' }" class="img-water-fall">
     <!-- backgroundImage: `url(${item.cover})` -->
-    <div v-for="(item, index) in list" :key="index + 'iwf'" :style="{ top: item.top + 'px', left: item.left + 'px', width: width + 'px', height: item.height + 'px' }" class="img-box" @click.stop="selectItem(item, index)">
+    <div v-for="(item, i) in list" :key="i + 'iwf'" :style="{ top: item.top + 'px', left: item.left + 'px', width: width + 'px', height: item.height + 'px' }" class="img-box" @click.stop="selectItem(item, i)">
+      <edit-model v-if="edit" :options="edit" :data="{ item, i }">
+        {{ item.isDelect }}
+        <div v-if="item.isDelect" class="list__mask">已删除</div>
         <el-image v-if="!item.fail" class="img" :src="item.cover" lazy loading="lazy" @error="loadError(item)" />
         <div v-else class="fail_img">{{ item.title }}</div>
+      </edit-model>
+      <el-image v-else class="img" :src="item.cover" lazy loading="lazy" @error="loadError(item)" />
     </div>
   </div>
 </template>
@@ -26,6 +31,7 @@ export default defineComponent({
       type: Array,
       required: true,
     },
+    edit: {}
   },
   emits: ['select', 'load'],
   setup(props, { emit }) {
@@ -125,4 +131,17 @@ export default defineComponent({
     pointer-events: none;
   }
 }
+.list {
+  &__mask {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
 </style>

src/components/modules/panel/wrap/components/photoList.vue

@@ -3,7 +3,7 @@
  * @Date: 2022-02-23 15:48:52
  * @Description: 图片列表组件 Bookshelf Layout 
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-12 14:05:31
+ * @LastEditTime: 2023-12-11 11:12:04
 -->
 <template>
   <ul ref="listRef" class="img-list-wrap" :style="{ paddingBottom: isShort ? '15px' : '200px' }" @scroll="scrollEvent($event)">
@@ -225,7 +225,7 @@ export default defineComponent({
     z-index: 2;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(0, 0, 0, 0.5);
     color: #ffffff;
     display: flex;
     align-items: center;

src/config.ts

@@ -10,8 +10,8 @@ export default {
   VERSION: version,
   APP_NAME: '迅排设计',
   COPYRIGHT: 'ShawnPhang - Palxp.cn',
-  // API_URL: isDev ? 'http://localhost:9998' : '${API}',
+  API_URL: isDev ? 'http://localhost:9998' : '${API}',
-  API_URL: 'https://palxp.cn:8887', // 服务端地址
+  // API_URL: 'https://palxp.cn:8887', // 服务端地址
   SCREEN_URL: isDev ? 'http://localhost:7001' : '#{SCREEN_URL}', // 截图服务地址
   IMG_URL: 'https://store.palxp.com/', // 七牛云资源地址
   // ICONFONT_URL: '//at.alicdn.com/t/font_3223711_74mlzj4jdue.css',

src/utils/axios.ts

@@ -1,16 +1,16 @@
 /*
  * @Author: ShawnPhang
  * @Date: 2021-07-13 02:48:38
- * @Description: 接口规则：只有正确code为200时返回result结果对象，错误返回整个结果对象
+ * @Description: 本地测试项目请勿修改此文件
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-28 15:58:41
+ * @LastEditTime: 2023-12-11 10:19:28
  */
 import axios from 'axios'
 import store from '@/store'
 import app_config from '@/config'
 
 axios.defaults.timeout = 30000
-// axios.defaults.headers.Authorization = 'Bearer ';
+axios.defaults.headers.authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';
 // const version = app_config.VERSION;
 const baseUrl = app_config.API_URL
 
@@ -48,14 +48,11 @@ axios.interceptors.response.use(
   (res: Type.Object) => {
     // store.dispatch('hideLoading');
 
-    // if (res.status !== 200) {
+    // 接口规则：只有正确code为200时返回result结果对象，错误返回整个结果对象
-    //   // return falseInfo
-    // }
 
     if (!res.data) {
       return Promise.reject(res)
     }
-    // console.log(res.headers.authorization);
     if (res.data.code === 401) {
       console.log('登录失效')
       store.commit('changeOnline', false)
@@ -71,10 +68,6 @@ axios.interceptors.response.use(
   },
   (error) => {
     // if (error.response.status === 401) {
-    //   setTimeout(() => {
-    //     window.localStorage.clear()
-    //     // window.location.href = app_config.login + "?" + "redirect=" + window.location.href;
-    //   }, 1000)
     // }
     store.dispatch('hideLoading')
     return Promise.reject(error)
@@ -89,21 +82,19 @@ const fetch = (url: string, params: Type.Object, type: string | undefined = 'get
     // store.commit('loading', '加载中..');
   }
 
-  const objtest: Type.Object = {}
+  const token = localStorage.getItem('xp_token')
-  // const { value } = JSON.parse(localStorage.getItem('pro__Access-Token') || '{}')
+  const headerObject: Type.Object = { }
-  // objtest.Authorization = `Bearer ${value}`
+  token && (headerObject.authorization = token)
+  
   if (type === 'get') {
     return axios.get(url, {
-      // headers: {
+      headers: Object.assign(headerObject, exheaders),
-      //   // Authorization: String(localStorage.getItem('token')),
-      // },
-      headers: Object.assign(objtest, exheaders),
       params,
       ...extra,
     })
   } else {
     return (axios as Type.Object)[type](url, params, {
-      headers: Object.assign(objtest, exheaders),
+      headers: Object.assign(headerObject, exheaders),
       ...extra,
     })
   }

src/views/components/HeaderOptions.vue

@@ -3,7 +3,7 @@
  * @Date: 2022-01-12 11:26:53
  * @Description: 顶部操作按钮组
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-16 09:23:06
+ * @LastEditTime: 2023-12-11 12:40:59
 -->
 <template>
   <div class="top-title"><el-input v-model="title" placeholder="未命名的设计" class="input-wrap" /></div>
@@ -36,6 +36,7 @@ import SaveImage from '@/components/business/save-download/CreateCover.vue'
 import { useFontStore } from '@/common/methods/fonts'
 import copyRight from './CopyRight.vue'
 import _config from '@/config'
+import useConfirm from '@/common/methods/confirm'
 import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 
 export default defineComponent({
@@ -101,6 +102,13 @@ export default defineComponent({
       if (state.loading === true) {
         return
       }
+      // 临时提示
+      if (proxy.title === '自设计模板') {
+        const isPass = await useConfirm('提示', 'PSD自设计作品暂时保存在Github，下载可能失败', 'warning')
+        if (!isPass) {
+          return
+        }
+      }
       state.loading = true
       context.emit('update:modelValue', true)
       context.emit('change', { downloadPercent: 1, downloadText: '正在处理封面' })