wxmini/pages/piano/wallpaper/wallpaper.js

// pages/piano/wallpaper/wallpaper.js
const { deviceWallPaper } = require('../../../request/deviceListRequest')
// const sharp = require('sharp');
// const fs = require('fs');

import routeUtil from '../../../utils/routeUtil';
import store from '../../../utils/store';

Page({
  /**
   * 页面的初始数据
   */
  data: {
    topImg:
    {
      //      pic: "",
      //      id: "",
    },
    imageList: [],
    image4List: [],
    _allImageList: [],
    _netImageList: [],
    _device: {},
    selectIndex: 0,
    _localImgPicKey: "_localImgPicListKey",

    navbarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      title: '壁纸设置', //导航栏 中间的标题
    },
    showAllImages: false,
    useSystemNavBar: true // 设置为 true 以使用系统导航栏

  },
  footerTap() {
    var p = {
      "deviceId": this.data._device.deviceId,
      "topImg": this.data.topImg
    }
    var param = "?param=" +  JSON.stringify(p);
    routeUtil.jumpParam("../cropper/cropper", param);
  },
  imageTopTap() {
    this.setData({
      topImg: {}
    })
  },
  toggleShowAll: function () {
    this.setData({
      showAllImages: !this.data.showAllImages
    });
  },
  imageTap(e) {
    console.log(e)
    // wxfile://tmp_d3e57489ead39c698676ff860df9cb8a37f66ee1a4777dbb.jpg
    let image = e.currentTarget.dataset.image;
    let _this = this;
    if (image.id == this.data.topImg.id) {
      _this.setData({
        topImg: {}
      })
    } else {
      _this.setData({
        topImg: image ?? {}
      })
    }

  },

  async wallpaperList() {
    let _this = this;
    deviceWallPaper().then(res => {
      let data = res ?? []

      data.sort((a, b) => a.sort - b.sort);

      // 网络的
      _this.data._netImageList = data;



      let localImgList = store.getStore(_this.data._localImgPicKey);
      console.log("壁纸列表", data.length, "空", localImgList);
      let allImgs = []
      if (localImgList) {
        console.log("壁纸列表2", data, "空", JSON.stringify(localImgList), "空");
        allImgs = localImgList.concat(data)
      }
      _this.data._allImageList = allImgs;
      _this.setData({
        imageList: _this.data._allImageList,
        image4List: _this.data._allImageList.slice(0, 4),
        // topImg: data[0] ?? {}
      })

    })
  },
  async updateTopImg(topUrl) {
    let _this = this;

    let newImg = {
      "pic": topUrl, "id": "0"
    }
    let myImgList = store.getStore(_this.data._localImgPicKey)
    myImgList = myImgList ?? []
    console.log("updateTopImg1", myImgList)

    // 移除保存的重复图片
    let myIndex = myImgList.findIndex(img => img.pic === topUrl);


    let imgList = _this.data._netImageList
    // 移除网络的重复图片
    let findImg = imgList.find(function (img) { return img.pic === topUrl })
    console.log("updateTopImg3", findImg)
    if (findImg) {
      // 官方不动位置
      // let index = imgList.findIndex(img => img.pic === findImg.pic);
      // imgList.splice(index, 1);
      // imgList.unshift(findImg);
    } else {
      if (myIndex < 0) {
        // 不是官方的壁纸，才添加进缓存
        myImgList.unshift(newImg)
        console.log("updateTopImg5", myImgList.length)

      }
    }

    if (myImgList.length > 1) {
      console.log("updateTopImg4", myImgList.length)
      // 本地图片缓存最多保存1张， 10张
      myImgList.pop()
    }

    console.log("updateTopImg2", imgList, findImg)
    _this.data._allImageList = myImgList.concat(imgList);

    _this.setData({
      imageList: _this.data._allImageList,
      image4List: _this.data._allImageList.slice(0, 4),
      topImg: newImg
    })
    store.setStore(_this.data._localImgPicKey, myImgList)
    // }
  },
  hideCut(e) {
    const img = arguments[0].detail
    if (img && img.path) {
      console.log("裁剪图片：", img)
    }

    this.setData({
      showCropImg: true,
      topImg: { "pic": img.path }
    })

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let param = JSON.parse(options.param)
    console.log(param)

    this.data._localImgPicKey = this.data._localImgPicKey + param.deviceId;
    this.data._device = param
    this.wallpaperList();



  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})