From aa859032b983d38d53e928d000e526104ae1d934 Mon Sep 17 00:00:00 2001
From: AMEN <amen@ymwl.edu.kg>
Date: Thu, 18 Jul 2024 12:02:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E5=8F=98=E7=B3=BB=E7=BB=9F=E5=A3=81?=
 =?UTF-8?q?=E7=BA=B8=E8=AE=BE=E7=BD=AE=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=B0=8F?=
 =?UTF-8?q?=E9=B8=9F=E5=A3=81=E7=BA=B8=EF=BC=8C=E5=B0=8F=E9=B8=9F=E5=A3=81?=
 =?UTF-8?q?=E7=BA=B8=E5=BC=80=E5=8F=91=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/cat/utils.js                        |  12 -
 src/views/desktop/background/Background.vue   |   7 +-
 .../desktop/setting/wallpaper/CatBody.vue     | 252 ++++++++++++++----
 .../desktop/setting/wallpaper/CatHead.vue     |  10 +-
 .../desktop/setting/wallpaper/GalleryBody.vue |   6 +-
 5 files changed, 221 insertions(+), 66 deletions(-)
 delete mode 100644 src/utils/cat/utils.js

diff --git a/src/utils/cat/utils.js b/src/utils/cat/utils.js
deleted file mode 100644
index 7ad2553..0000000
--- a/src/utils/cat/utils.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * @作者：AMEN
- * @官网：https://www.ymypay.cn/
- * @博客：https://blog.ymypay.cn/
- * 湮灭网络工作室
- */
-export const uuid = () => {
-  function S4() {
-    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
-  }
-  return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4();
-}
diff --git a/src/views/desktop/background/Background.vue b/src/views/desktop/background/Background.vue
index 2444313..17d868d 100644
--- a/src/views/desktop/background/Background.vue
+++ b/src/views/desktop/background/Background.vue
@@ -4,7 +4,7 @@
       <VideoBackground class="h-100" :src="backgroundSrc"></VideoBackground>
     </div>
     <div
-      v-else-if="comBackground.type === 'image' || comBackground.type === 'base64'"
+      v-else-if="comBackground.type === 'image' || comBackground.type === 'base64' || comBackground.type === 'cdnImage'"
       class="app-background"
     >
       <div class="w-100 h-100 background" :style="style"></div>
@@ -40,12 +40,11 @@ const getLocalBackground = async () => {
   let bg = '';
 
   if (src) {
-    if (type === 'base64' || type === 'video') {
+    if (type === 'base64' || type === 'video' || type === 'cdnImage') {
       bg = src;
     } else {
       bg = getStaticImage(src) || defaultBackground;
     }
-
     backgroundSrc.value = bg;
   } else {
     backgroundSrc.value = defaultBackground;
@@ -63,7 +62,7 @@ onMounted(async () => {
 });
 
 const style = computed((): CSSProperties => {
-  if (comBackground.value.type === 'image' || comBackground.value.type === 'base64') {
+  if (comBackground.value.type === 'image' || comBackground.value.type === 'base64' || comBackground.value.type === 'cdnImage') {
     return {
       background: `url('${backgroundSrc.value}')`,
       filter: `
diff --git a/src/views/desktop/setting/wallpaper/CatBody.vue b/src/views/desktop/setting/wallpaper/CatBody.vue
index e809396..5a23acb 100644
--- a/src/views/desktop/setting/wallpaper/CatBody.vue
+++ b/src/views/desktop/setting/wallpaper/CatBody.vue
@@ -1,40 +1,66 @@
 <template>
-  <div class="list">
-    <div
-      class="source-item"
-      :bordered="false"
-      v-for="(item, key) in nowList"
-      :key="item"
-      @click=""
-      justify="center"
-    >
-      <img
-        v-if="nowPage === 0"
-        :src="item.icon"
-        :alt="item.category"
-        height="80"
-        @click="accessZone(item)"
-      />
-      <img
-        v-if="nowPage === 1"
-        :src="item.url===undefined ? item.image : item.url"
-        :alt="item.tag===undefined ? item.title : item.tag"
-        height="80"
-        @click="catClick(item)"
-      />
-      <img
-        v-if="nowPage === 2"
-        :src="item.url===undefined ? item.image : item.url"
-        :alt="item.tag===undefined ? item.title : item.tag"
-        height="80"
-        @click="catClick(item)"
-      />
+  <div>
+    <div class="alist">
+      <div
+        class="source-item"
+        :bordered="false"
+        v-for="(item, key) in nowList"
+        :key="item"
+        @click=""
+        justify="center"
+      >
+        <img
+          v-if="nowPage === 0"
+          :src="item.icon"
+          :alt="item.category"
+          height="80"
+          @click="accessZone(item)"
+        />
+        <a-dropdown :trigger="['click']">
+          <img
+            v-if="nowPage !== 0"
+            :src="item.url===undefined ? item.image : item.url"
+            :alt="item.tag===undefined ? item.title : item.tag"
+            height="80"
+          />
+<!--          <img-->
+<!--            v-if="nowPage === 2"-->
+<!--            :src="item.url===undefined ? item.image : item.url"-->
+<!--            :alt="item.tag===undefined ? item.title : item.tag"-->
+<!--            height="80"-->
+<!--          />-->
+          <template #overlay v-if="nowPage !== 0">
+            <a-menu>
+              <a-menu-item>
+                <a href="javascript:;" @click="catClick(item,'yj')">预览静态壁纸</a>
+              </a-menu-item>
+              <a-menu-item>
+                <a href="javascript:;" @click="catClick(item,'uj')">使用静态壁纸</a>
+              </a-menu-item>
+              <a-menu-item v-if="item.image !== undefined">
+                <a href="javascript:;" @click="catClick(item,'yd')">预览动态壁纸</a>
+              </a-menu-item>
+              <a-menu-item v-if="item.image !== undefined">
+                <a href="javascript:;" @click="catClick(item,'ud')">使用动态壁纸</a>
+              </a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </div>
+    </div>
+
+    <div v-if="nowPage !== 0">
+      <a-pagination @change="sizeChange" v-model:current="pageNo" :total="total" defaultPageSize="24" :showSizeChanger="false" />
     </div>
   </div>
 </template>
 
 <script>
-import {uuid} from '@/utils/cat/utils';
+import { nanoid } from 'nanoid';
+import {Modal} from "ant-design-vue";
+import { changeGalleryType, currentGallery, galleryType, setBase64Background } from './data/data';
+import { setBackground } from '@/store/page/utils';
+
 export default {
   name: "CatBody",
   components: {},
@@ -50,7 +76,10 @@ export default {
       nowPage:0,//0是首页 1 是专区内容 2 是搜索内容
       nowList:[],
       pageNo:1,
-      total:0
+      total:0,
+      nowItem:null,
+      searchValue:null,
+      wallpaperValue:'d'
     }
   },
   setup(props, {emit}) {
@@ -68,18 +97,27 @@ export default {
     };
     const accessZone = (item) => {
       zoneClick()
+      that.data.nowItem = item
       that.data.nowPage = 1;
+      getAccessZone()
+    };
+    const zoneClick = () => {
+      emit("zoneClick")
+    };
+    const getAccessZone = () => {
+      let item = that.data.nowItem
       const script = document.createElement("script");
       script.id = "jsonp-id";
-      let uid = uuid();
+      let uid = nanoid();
+      // 删除横线和下划线
+      uid = uid.replace("_","")
+      uid = uid.replace("-","")
       let fname = "f"+uid;
       window[fname] = function (res){
         emit("closeLoading")
         that.data.total = res.data.total_count;
-        // that.data.catData.specialZone = list;
         that.data.catData.specialZone = res.data.list;
         that.data.nowList = that.data.catData.specialZone
-        console.log(that.data.nowList)
       }
       var jsonpUrl = "https://bizhi.shanhutech.cn/live/wallpaper/categoryList?callback=" + fname + "&category=" + item.show_name + "&pageno=" + that.data.pageNo + "&count=24&type=1";
 
@@ -88,21 +126,60 @@ export default {
       setTimeout(function (){
         document.body.removeChild(script);
       },1);
-      // fetch("https://bizhi.shanhutech.cn/live/wallpaper/categoryList?callback=" + uid + "&category=" + item.show_name + "&pageno=" + that.data.pageNo + "&count=24&type=1")
-      //   .then(function (res){emit("closeLoading");return res.json()})
-      //   .then(function (res){
-      //     emit("closeLoading")
-      //     that.data.catData.specialZone = res.data;
-      //     that.data.nowList = that.data.catData.specialZone
-      //   });
     };
-    const zoneClick = () => {
-      emit("zoneClick")
+    const search = (searchValue,wallpaperValue) => {
+      that.data.searchValue = searchValue;
+      that.data.wallpaperValue = wallpaperValue;
+      that.data.pageNo = 1;
+      that.data.nowPage = 2;
+      if (wallpaperValue === 'd'){
+        getSearchd()
+      } else {
+        getSearchj()
+      }
+    };
+    const getSearchd = () => {
+      const script = document.createElement("script");
+      script.id = "jsonp-id";
+      let uid = nanoid();
+      // 删除横线和下划线
+      uid = uid.replace("_","")
+      uid = uid.replace("-","")
+      let fname = "f"+uid;
+      window[fname] = function (res){
+        emit("closeLoading")
+        that.data.total = res.data.total_count;
+        that.data.catData.specialZone = res.data.list;
+        that.data.nowList = that.data.catData.specialZone
+      }
+      var jsonpUrl = "https://bizhi.shanhutech.cn/live/wallpaper/searchList?callback=" + fname + "&keyword=" + encodeURIComponent(that.data.searchValue) + "&pageno=" + that.data.pageNo + "&count=24";
+      // jsonpUrl = "https://bizhi.shanhutech.cn/live/wallpaper/searchList?callback="+fname+"&keyword="+encodeURIComponent(that.dataParam.keyword)+"&pageno="+page+"&count="+that.dataParam.count;
+
+      script.src = jsonpUrl;
+      document.body.appendChild(script);
+      setTimeout(function (){
+        document.body.removeChild(script);
+      },1);
     };
+    const getSearchj = () => {
+      let url = "https://wp.shanhutech.cn/intf/search?content="+encodeURIComponent(that.data.searchValue)+"&pageno="+that.data.pageNo+"&count=24";
+      fetch(url)
+        .then(function (res){emit("closeLoading");return res.json()})
+        .then(function (res){
+          emit("closeLoading")
+
+          that.data.total = res.data.total_count;
+          that.data.nowList = res.data.list
+        });
+    }
     return {
       xiaoNiaoInit,
       accessZone,
       zoneClick,
+      getAccessZone,
+      search,
+      getSearchd,
+      getSearchj
     }
   },
   methods: {
@@ -113,7 +190,85 @@ export default {
       this.nowPage = 0;
       this.nowList = this.catData.pcCat
     },
-    catClick(item) {
+    catClick(item, t) {
+
+      // 是否拥有动态壁纸
+      let isD = true;
+      let mp4 = null;
+      let img = null;
+      let title = null
+
+      if (item.image !== undefined) {
+        isD = false
+        mp4 = item.file_url_10s
+        img = item.image
+        title = item.title
+      } else {
+        img = item.url
+        title = item.tag
+      }
+      switch (t){
+        case 'yj':
+          Modal.confirm({
+            maskClosable:true,
+            closable:true,
+            icon:null,
+            footer:null,
+            title: title,
+            content: h('div', {}, [
+              h('img',{
+                src: img,
+                alt: title,
+                style: 'width: 100%; height: 100%;'
+              })
+            ])
+          });
+          break;
+        case 'uj':
+          if (img) {
+            setBackground(img, "cdnImage");
+          }
+          break;
+        case 'yd':
+          Modal.confirm({
+            maskClosable:true,
+            closable:true,
+            icon:null,
+            footer:null,
+            title: title + "(动态壁纸需要时间加载)",
+            content: h('div', {}, [
+              h('video',{
+                src:mp4,
+                autoPlay: '',
+                loop: '',
+                alt: title,
+                style: 'width: 100%; height: 100%;'
+              },[
+                h('source', {src: mp4,type: 'video/mp4'})
+                ]
+              )
+            ])
+          });
+          break;
+        case 'ud':
+          if (mp4) {
+            setBackground(mp4, "video");
+          }
+          break;
+      }
+
+    },
+    sizeChange(page, pageSize) {
+      this.pageNo = page;
+      if (this.nowPage === 1){
+        this.getAccessZone();
+      } else {
+        if (this.wallpaperValue === 'd'){
+          this.getSearchd();
+        } else {
+          this.getSearchj();
+        }
+      }
 
     }
   }
@@ -123,4 +278,11 @@ export default {
 
 <style lang="scss" scoped>
 @import './body.scss';
+.alist {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  place-items: start;
+  text-align: center;
+}
 </style>
diff --git a/src/views/desktop/setting/wallpaper/CatHead.vue b/src/views/desktop/setting/wallpaper/CatHead.vue
index 6a0da7f..34787c1 100644
--- a/src/views/desktop/setting/wallpaper/CatHead.vue
+++ b/src/views/desktop/setting/wallpaper/CatHead.vue
@@ -51,17 +51,19 @@ export default {
     const nowHome = () => {
       // 沟通父组件与body组件 回到首页了
       emit('home')
+    };
+    const search = () => {
+      noHome()
+      emit('search',that.data.searchValue,that.data.wallpaperValue)
     }
     return {
       noHome,
       home,
-      nowHome
+      nowHome,
+      search
     }
   },
   methods: {
-    search(){
-
-    },
 
   }
 }
diff --git a/src/views/desktop/setting/wallpaper/GalleryBody.vue b/src/views/desktop/setting/wallpaper/GalleryBody.vue
index 58e3fea..236574a 100644
--- a/src/views/desktop/setting/wallpaper/GalleryBody.vue
+++ b/src/views/desktop/setting/wallpaper/GalleryBody.vue
@@ -63,7 +63,7 @@
     </template>
 
     <template v-else>
-      <CatHead ref="catHead" @home="home"></CatHead>
+      <CatHead ref="catHead" @home="home" @search="search"></CatHead>
       <CatBody ref="catBody" @zoneClick="zoneClick" @closeLoading="closeLoading"></CatBody>
     </template>
 
@@ -127,6 +127,10 @@ const closeLoading = () => {
   catLoading.value = false
 }
 
+const search = (searchValue,wallpaperValue) => {
+  catBody.value.search(searchValue,wallpaperValue)
+}
+
 const comBackground = computed(() => {
   return store.$state.desktop.background;
 });
-- 
Gitee