From 22d115fc61e76c24211b3700bc01470d80733142 Mon Sep 17 00:00:00 2001
From: AMEN <amen@ymwl.edu.kg>
Date: Wed, 17 Jul 2024 22:16:37 +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=E4=B8=AD=EF=BC=8C=E7=9B=AE=E5=89=8D?=
 =?UTF-8?q?=E6=9C=AA=E5=81=9A=E6=90=9C=E7=B4=A2=EF=BC=8C=E6=9C=AA=E5=81=9A?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=A3=81=E7=BA=B8=E5=92=8C=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=A3=81=E7=BA=B8=E5=92=8C=E5=88=86=E9=A1=B5=E3=80=82=E5=8F=AA?=
 =?UTF-8?q?=E5=81=9A=E4=BA=86=E6=9F=A5=E7=9C=8B=E4=B8=93=E5=8C=BA=E5=92=8C?=
 =?UTF-8?q?=E8=BF=9B=E5=85=A5=E4=B8=93=E5=8C=BA=EF=BC=8C=E5=BE=85=E4=B8=8B?=
 =?UTF-8?q?=E6=AC=A1=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/cat/utils.js                        |  12 ++
 .../desktop/setting/wallpaper/CatBody.vue     | 126 ++++++++++++++
 .../desktop/setting/wallpaper/CatHead.vue     |  76 +++++++++
 .../desktop/setting/wallpaper/GalleryBody.vue | 160 ++++++++++++------
 .../desktop/setting/wallpaper/GalleryHead.vue |   6 +-
 5 files changed, 325 insertions(+), 55 deletions(-)
 create mode 100644 src/utils/cat/utils.js
 create mode 100644 src/views/desktop/setting/wallpaper/CatBody.vue
 create mode 100644 src/views/desktop/setting/wallpaper/CatHead.vue

diff --git a/src/utils/cat/utils.js b/src/utils/cat/utils.js
new file mode 100644
index 0000000..7ad2553
--- /dev/null
+++ b/src/utils/cat/utils.js
@@ -0,0 +1,12 @@
+/*
+ * @作者：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/setting/wallpaper/CatBody.vue b/src/views/desktop/setting/wallpaper/CatBody.vue
new file mode 100644
index 0000000..e809396
--- /dev/null
+++ b/src/views/desktop/setting/wallpaper/CatBody.vue
@@ -0,0 +1,126 @@
+<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>
+</template>
+
+<script>
+import {uuid} from '@/utils/cat/utils';
+export default {
+  name: "CatBody",
+  components: {},
+  data () {
+    return {
+      catData:{
+        pcCat:[],
+        mDong:[],
+        mJin:[],
+        search:[],
+        specialZone:[]
+      },
+      nowPage:0,//0是首页 1 是专区内容 2 是搜索内容
+      nowList:[],
+      pageNo:1,
+      total:0
+    }
+  },
+  setup(props, {emit}) {
+    const that = getCurrentInstance();
+    const xiaoNiaoInit = () => {
+      //https://digbird.shanhutech.cn/intf/getCategory?type=1手机壁纸专区
+      //https://digbird.shanhutech.cn/intf/getCategory?type=2静态壁纸专区
+      fetch("https://wp.shanhutech.cn/intf/getCategory")
+        .then(function (res){emit("closeLoading");return res.json()})
+        .then(function (res){
+          emit("closeLoading")
+          that.data.catData.pcCat = res.data;
+          that.data.nowList = that.data.catData.pcCat
+        });
+    };
+    const accessZone = (item) => {
+      zoneClick()
+      that.data.nowPage = 1;
+      const script = document.createElement("script");
+      script.id = "jsonp-id";
+      let uid = uuid();
+      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";
+
+      script.src = jsonpUrl;
+      document.body.appendChild(script);
+      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")
+    };
+    return {
+      xiaoNiaoInit,
+      accessZone,
+      zoneClick,
+    }
+  },
+  methods: {
+    wallpaperClick() {
+      this.xiaoNiaoInit()
+    },
+    wallpaperClickCache() {
+      this.nowPage = 0;
+      this.nowList = this.catData.pcCat
+    },
+    catClick(item) {
+
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import './body.scss';
+</style>
diff --git a/src/views/desktop/setting/wallpaper/CatHead.vue b/src/views/desktop/setting/wallpaper/CatHead.vue
new file mode 100644
index 0000000..6a0da7f
--- /dev/null
+++ b/src/views/desktop/setting/wallpaper/CatHead.vue
@@ -0,0 +1,76 @@
+<template>
+  <a-card class="ax_plain_card" :bordered="false" :bodyStyle="{ padding: '0' }">
+    <div class="px-12 flex justify-between py-8">
+      <div class="flex gc-4" v-if="isHome===false">
+        <a-button size="small" type="primary" @click="nowHome">首页</a-button>
+      </div>
+      <div>
+        <a-input v-model:value="searchValue" placeholder="搜索关键词" />
+      </div>
+      <div>
+        <a-select
+          v-model:value="wallpaperValue"
+          :options="wallpaperMode"
+        ></a-select>
+      </div>
+      <div>
+        <a-button size="small" type="primary" @click="search">搜索</a-button>
+      </div>
+    </div>
+  </a-card>
+</template>
+<script>
+export default {
+  name: 'CatHead',
+  data () {
+    return {
+      isHome:true,
+      searchValue:'',
+      wallpaperValue:'d',
+      wallpaperMode: [
+        {
+          label: '动态壁纸',
+          value: 'd',
+        },
+        {
+          label: '静态壁纸',
+          value: 'j',
+        }
+      ]
+    }
+  },
+  setup (props, {emit}) {
+    const that = getCurrentInstance();
+    const noHome = () => {
+      that.data.isHome = false
+    };
+    const home = () => {
+
+      that.data.isHome = true
+    };
+    const nowHome = () => {
+      // 沟通父组件与body组件 回到首页了
+      emit('home')
+    }
+    return {
+      noHome,
+      home,
+      nowHome
+    }
+  },
+  methods: {
+    search(){
+
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.ax_plain_card {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+</style>
diff --git a/src/views/desktop/setting/wallpaper/GalleryBody.vue b/src/views/desktop/setting/wallpaper/GalleryBody.vue
index 9816f73..58e3fea 100644
--- a/src/views/desktop/setting/wallpaper/GalleryBody.vue
+++ b/src/views/desktop/setting/wallpaper/GalleryBody.vue
@@ -1,63 +1,72 @@
 <template>
   <a-card class="gallery-body h-100" :body-style="{ paddingTop: '0' }">
-    <GalleryHead />
-    <template v-if="galleryType !== 'base64'">
-      <template v-if="galleryData.length > 0">
-        <div class="list">
-          <div
-            class="source-item"
-            :bordered="false"
-            v-for="(item, key) in galleryData"
-            :key="item"
-            @click="selectItem(item)"
-            justify="center"
-          >
-            <div class="selected" v-if="currentGallery === item">
-              <CheckOutlined />
+    <a-menu style="width:100%;height:9%" v-model:selectedKeys="current" mode="horizontal" :items="items" @click="wallpaperClick" />
+    <template v-if="current[0]==='local'">
+      <GalleryHead />
+      <template v-if="galleryType !== 'base64'">
+        <template v-if="galleryData.length > 0">
+          <div class="list">
+            <div
+              class="source-item"
+              :bordered="false"
+              v-for="(item, key) in galleryData"
+              :key="item"
+              @click="selectItem(item)"
+              justify="center"
+            >
+              <div class="selected" v-if="currentGallery === item">
+                <CheckOutlined />
+              </div>
+              <img
+                :src="getStaticImage(item)"
+                v-if="galleryType === 'image'"
+                :alt="item"
+                height="80"
+              />
+              <video
+                muted
+                controlslist="nodownload"
+                v-else
+                ref="videoRefs"
+                @mouseenter="mouseenter(key)"
+                @mouseleave="mouseleave(key)"
+                :src="item"
+                height="80"
+              ></video>
             </div>
-            <img
-              :src="getStaticImage(item)"
-              v-if="galleryType === 'image'"
-              :alt="item"
-              height="80"
-            />
-            <video
-              muted
-              controlslist="nodownload"
-              v-else
-              ref="videoRefs"
-              @mouseenter="mouseenter(key)"
-              @mouseleave="mouseleave(key)"
-              :src="item"
-              height="80"
-            ></video>
           </div>
-        </div>
-      </template>
+        </template>
 
-      <a-empty v-else></a-empty>
+        <a-empty v-else></a-empty>
+      </template>
+      <template v-else>
+        <a-card :body-style="{ position: 'relative' }">
+          <a-upload-dragger
+            @change="upload"
+            :customRequest="() => false"
+            :max-count="1"
+            :file-list="fileList"
+          >
+            <div class="bg-image">
+              <a-image :src="backgroundSrc"></a-image>
+            </div>
+            <div class="upload-info">
+              <p class="ant-upload-drag-icon">
+                <inbox-outlined></inbox-outlined>
+              </p>
+              <p class="ant-upload-text">拖拽图片到此上传</p>
+              <p class="ant-upload-hint">图片不限大小，但会占用计算机的存储空间</p>
+            </div>
+          </a-upload-dragger>
+        </a-card>
+      </template>
     </template>
+
     <template v-else>
-      <a-card :body-style="{ position: 'relative' }">
-        <a-upload-dragger
-          @change="upload"
-          :customRequest="() => false"
-          :max-count="1"
-          :file-list="fileList"
-        >
-          <div class="bg-image">
-            <a-image :src="backgroundSrc"></a-image>
-          </div>
-          <div class="upload-info">
-            <p class="ant-upload-drag-icon">
-              <inbox-outlined></inbox-outlined>
-            </p>
-            <p class="ant-upload-text">拖拽图片到此上传</p>
-            <p class="ant-upload-hint">图片不限大小，但会占用计算机的存储空间</p>
-          </div>
-        </a-upload-dragger>
-      </a-card>
+      <CatHead ref="catHead" @home="home"></CatHead>
+      <CatBody ref="catBody" @zoneClick="zoneClick" @closeLoading="closeLoading"></CatBody>
     </template>
+
   </a-card>
 </template>
 
@@ -69,8 +78,55 @@ import localforage from 'localforage';
 import { currentGallery, galleryData, galleryType, setBase64Background } from './data/data';
 import GalleryHead from './GalleryHead.vue';
 
+import CatHead from "@/views/desktop/setting/wallpaper/CatHead.vue";
+import CatBody from "@/views/desktop/setting/wallpaper/CatBody.vue";
+
 const store = usePageStore();
 const fileList = ref([]);
+const current = ref<string[]>(['local']);
+const catLoading = ref<boolean>(false);
+const items = [
+  {
+    key: 'local',
+    label: '本地壁纸',
+    title: '本地壁纸',
+  },
+  {
+    key: 'xiaoNiao',
+    label: '小鸟壁纸',
+    title: '小鸟壁纸',
+  }
+]
+const catBody = ref();
+const catHead = ref();
+const wallpaperClick = (e) => {
+  // 用两个nextTick套用或 setTimeout 因为CatBody是用v-if包裹的
+  // setTimeout( () => {
+  //
+  // },0)
+
+  if (e.key === 'xiaoNiao'){
+    nextTick(()=> {
+      nextTick(()=>{
+        // 全局loading在这里启用
+        // catLoading.value = true
+        catBody.value.wallpaperClick()
+      })
+    })
+  }
+}
+
+const zoneClick = () => {
+  catHead.value.noHome()
+}
+const home = () => {
+  catHead.value.home()
+  catBody.value.wallpaperClickCache()
+}
+const closeLoading = () => {
+  catLoading.value = false
+}
+
 const comBackground = computed(() => {
   return store.$state.desktop.background;
 });
diff --git a/src/views/desktop/setting/wallpaper/GalleryHead.vue b/src/views/desktop/setting/wallpaper/GalleryHead.vue
index 6b2093f..315d598 100644
--- a/src/views/desktop/setting/wallpaper/GalleryHead.vue
+++ b/src/views/desktop/setting/wallpaper/GalleryHead.vue
@@ -1,8 +1,8 @@
 <template>
   <a-card class="ax_plain_card" :bordered="false" :bodyStyle="{ padding: '0' }">
-    <div class="system__head">
-      <div>壁纸选择</div>
-    </div>
+<!--    <div class="system__head">-->
+<!--      <div>壁纸选择</div>-->
+<!--    </div>-->
     <div class="px-12 flex justify-between py-8">
       <div>
         <a-radio-group
-- 
Gitee