feature：修改壁纸列表的保存，显示问题

pages/piano/cropper/cropper.js

@@ -25,9 +25,11 @@ Page({
     _chunks: [],
     progress: 0,
     _timer: null,
+    // 裁剪后的图片地址
     _imgUrl: null,
     _imgMD5: null,
     _imgIndex: null,
+    // 从上级界面过来的图片地址，也是要返回去的地址
     _imgTopPic: null,
     _imgNext: 0,
     max_scale: 2,
@@ -37,7 +39,7 @@ Page({
   cropper: null,
   callback() {
     let that = this
-    if (this.data.progress > 0) {
+    if (this.data._chunks.length > 0) {
       wx.showModal({
         title: '保存壁纸中，确定要中断退出吗？',
         content: '',
@@ -158,75 +160,109 @@ Page({
       delta: -1
     })
   },
+  _uploadImage(url) {
+    wx.showLoading({
+      title: '壁纸裁剪中',
+    })
+    const fs = wx.getFileSystemManager();
+
+    let _this = this;
+    // app.globalData.imgSrc = obj.url;
+    console.log("裁剪壁纸:", url);
+    _this.data._imgUrl = url
+    fs.readFile({
+      filePath: _this.data._imgUrl,
+      encoding: '', // 不指定编码以获取原始二进制数据
+      success: (obj) => {
+        console.log("加载文件成功:", obj.data.byteLength, obj.data.length)
+
+        fs.getFileInfo({
+          "filePath": _this.data._imgUrl, "digestAlgorithm": "md5", success: (res2) => {
+            console.log("md5:", res2)
+            _this.data._imgMD5 = res2.digest
+            _this.data._imgIndex = 0
+
+            console.log("加载文件成功:", obj.data.byteLength, obj.data.length, obj.getFileInfo)
+
+            let binData = obj.data;
+            // let myMd5 = _this.getImgMd5(binData)
+            // let my2Md5 = _this.getImg2Md5(binData)
+            // let my3Md5 = _this.getImg3Md5(binData)
+            // todo 测试用
+            // wx.setClipboardData({
+            //   data: res2.digest,
+            // })
+
+            _this.sliceDataIntoChunks(binData, 64);
+
+            console.log("加载文件成功2:", binData.byteLength, binData.length)
+            _this.data._imageBufferLength = binData.byteLength ?? binData.length
+            wx.hideLoading();
+            wx.showLoading({
+              title: '开始传输壁纸',
+            })
+
+            console.log("md5 2:", _this.data._imgMD5)
+            _this.startImage()
+          }, fail: (err) => {
+            console.error('getFileInfo失败：', err);
+          },
+        })
+
+      },
+      fail: (err) => {
+        s
+        wx.hideLoading()
+        wx.showToast({
+          title: '读取该图片失败',
+        })
+        console.error('读取 .bin 文件失败：', err);
+      },
+    });
+  },
   submit() {
     let _this = this
     // if (_this.data._chunks.length > 0) {
     //   return;
     // }
-
+    let _imgTopPic = _this.data._imgTopPic ?? ""
+    if (_imgTopPic.startsWith("http")) {
+      // 服务器的走下载图片
+      console.log("服务器的走下载图片", _this.data._imgTopPic)
+      _this._downloadAndSaveFile(_this.data._imgTopPic)
+      return;
+    }
     // 读取裁剪的jpg图片
-    const fs = wx.getFileSystemManager();
     this.cropper.getImg((res) => {
-      wx.showLoading({
-        title: '壁纸裁剪中',
-      })
-      // app.globalData.imgSrc = obj.url;
-      console.log("裁剪壁纸:", res);
-      _this.data._imgUrl = res.url
       _this.data._imgTopPic = res.url
-      fs.readFile({
-        filePath: _this.data._imgUrl,
-        encoding: '', // 不指定编码以获取原始二进制数据
-        success: (obj) => {
-          console.log("加载文件成功:", obj.data.byteLength, obj.data.length)
-
-          fs.getFileInfo({
-            "filePath": _this.data._imgUrl, "digestAlgorithm": "md5", success: (res2) => {
-              console.log("md5:", res2)
-              _this.data._imgMD5 = res2.digest
-              _this.data._imgIndex = 0
-
-              console.log("加载文件成功:", obj.data.byteLength, obj.data.length, obj.getFileInfo)
-
-              let binData = obj.data;
-              // let myMd5 = _this.getImgMd5(binData)
-              // let my2Md5 = _this.getImg2Md5(binData)
-              // let my3Md5 = _this.getImg3Md5(binData)
-              // todo 测试用
-              // wx.setClipboardData({
-              //   data: res2.digest,
-              // })
-
-              _this.sliceDataIntoChunks(binData, 64);
-
-              console.log("加载文件成功2:", binData.byteLength, binData.length)
-              _this.data._imageBufferLength = binData.byteLength ?? binData.length
-              wx.hideLoading();
-              wx.showLoading({
-                title: '开始传输壁纸',
-              })
-
-              console.log("md5 2:", _this.data._imgMD5)
-              _this.startImage()
-            }, fail: (err) => {
-              console.error('getFileInfo失败：', err);
-            },
-          })
-
-        },
-        fail: (err) => {
-          s
-          wx.hideLoading()
+      _this._uploadImage(res.url)
+    });
+  },
+  _downloadAndSaveFile(url) {
+    let _this = this
+    // 下载文件
+    wx.downloadFile({
+      url: url,
+      success: function (res) {
+        if (res.statusCode === 200) {
+          const tempFilePath = res.tempFilePath;
+          _this.data._imgTopPic = url
+          _this._uploadImage(tempFilePath)
+        } else {
           wx.showToast({
-            title: '读取该图片失败',
-          })
-          console.error('读取 .bin 文件失败：', err);
-        },
-      });
+            title: '下载图片失败',
+            icon: 'error'
+          });
+        }
+      },
+      fail: function (err) {
+        console.error('下载文件失败', err);
+        wx.showToast({
+          title: '下载失败',
+          icon: 'error'
+        });
+      }
     });
-    // 651kb的
-    // _this.downloadAndSaveFile("https://music-play.oss-cn-shenzhen.aliyuncs.com/backOss/file/8770a6097d9940b59032d099b2fdde3b.bin");
-
   },
 
   checkAndRequestImagePermission: function () {
@@ -285,10 +321,13 @@ Page({
     BtHelper.sendCallBack(BtCmd.wallPaper(1), function (res) {
       if (!res) {
         wx.hideLoading()
-        wx.showToast({
-          title: '发送图片失败',
-          icon: 'error'
-        })
+        wx.setTimeout(function () {
+          wx.showToast({
+            title: '发送失败',
+            icon: 'error',
+            duration: 2000
+          })
+        }, 100)
       }
     });
   },
@@ -444,7 +483,7 @@ Page({
   },
   failSend(showToast) {
     let _this = this
-    _this.data._chunks = null
+    _this.data._chunks = []
     _this.data._imgMD5 = null
     _this.data._imgIndex = 0
     _this.data._imgNext = 0
@@ -457,11 +496,12 @@ Page({
       // })
       wx.showToast({
         title: '发送图片败',
-        icon: 'failure'
+        icon: 'error'
       })
     }
     _this.setData({
       progress: 0,
+      showProgress: false,
       showCropImg: false
     });
   },
@@ -524,6 +564,7 @@ Page({
 
       switch (name) {
         case EnumCmdEvent.onoffline:
+          wx.hideLoading();
           _this.disconnect(event)
           break;
         case EnumCmdEvent.wallpaper:
@@ -563,6 +604,17 @@ Page({
           // 收到回复md5，开始发送图片
           if (kind == 1 && value === 1) {
             _this.sendImage(0)
+          } else if (kind == 0 && value === 3) {
+            _this.failSend(false)
+            wx.showModal({
+              title: '发送图片失败，请重启设备再试试吧',
+              showCancel: false,
+              success: function (res) {
+                if (res.confirm) {
+                  console.log('用户点击确定')
+                }
+              }
+            })
           } else {
             _this.failSend(true)
           }

pages/piano/wallpaper/wallpaper.js

@@ -31,14 +31,18 @@ Page({
       //      pic: "",
       //      id: "",
     },
-    imageList: [
-    ],
+    imageList: [],
+    image4List: [],
+    _locImageList: [],
     selectIndex: 0,
+    _localImgPicKey: "_localImgPicListKey",
     navbarData: {
       showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
       title: '壁纸设置', //导航栏 中间的标题
     },
-    showCropImg: false,
+    showAllImages: false,
+    useSystemNavBar: true // 设置为 true 以使用系统导航栏
+
   },
   closePage() {
 
@@ -52,6 +56,11 @@ Page({
       topImg: {}
     })
   },
+  toggleShowAll: function () {
+    this.setData({
+      showAllImages: !this.data.showAllImages
+    });
+  },
   imageTap(e) {
     console.log(e)
     // wxfile://tmp_d3e57489ead39c698676ff860df9cb8a37f66ee1a4777dbb.jpg
@@ -67,28 +76,30 @@ Page({
       })
     }
 
-  }, wallpaperList() {
+  },
+
+  async wallpaperList() {
     let _this = this;
     deviceWallPaper().then(res => {
-      console.log("壁纸列表", res);
       let data = res ?? []
 
-      let localImg = store.getStore("_imgTopPic");
-      if (localImg) {
-        data.unshift({
-          id: 0,
-          name: "本地壁纸",
-          pic: localImg
-        })
-      }
+      let localImgList = store.getStore(_this.data._localImgPicKey);
+      console.log("壁纸列表", data.length, localImgList, "空");
 
+      if (localImgList) {
+        console.log("壁纸列表2", res.length, localImgList, "空");
+        data = localImgList.concat(data)
+      }
+      _this.data._locImageList = data;
       _this.setData({
-        imageList: data ?? [],
+        imageList: _this.data._locImageList,
+        image4List: _this.data._locImageList.slice(0, 4),
         // topImg: data[0] ?? {}
       })
 
     })
-  }, updateTopImg(topUrl) {
+  },
+  async updateTopImg(topUrl) {
     let _this = this;
 
     // let hasImg = _this.data.imageList.find(function (vForItem) {
@@ -98,12 +109,29 @@ Page({
     let newImg = {
       "pic": topUrl, "id": "0"
     }
-    _this.data.imageList.push(newImg)
+    let imgList = _this.data._locImageList
+    console.log("updateTopImg1", imgList)
+    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 {
+      imgList.unshift(newImg)
+    }
+    console.log("updateTopImg2", imgList, findImg)
+
+    if (imgList.length > 10) {
+      imgList.pop()
+    }
+    _this.data._locImageList = imgList
     _this.setData({
-      imageList: _this.data.imageList,
+      imageList: _this.data._locImageList,
+      image4List: _this.data._locImageList.slice(0, 4),
       topImg: newImg
     })
-    store.setStore('_imgTopPic', topUrl)
+    store.setStore(_this.data._localImgPicKey, imgList)
     // }
   },
   hideCut(e) {
@@ -125,6 +153,9 @@ Page({
   onLoad(options) {
     let param = JSON.parse(options.param)
     console.log(param)
+
+    this.data._localImgPicKey = this.data._localImgPicKey + param.deviceId;
+
     this.wallpaperList();
 
 

pages/piano/wallpaper/wallpaper.json

@@ -1,5 +1,10 @@
 {
   "usingComponents": {
     "nav-bar": "./../../components/navbar/navbar"
-  }
+  },
+  "window": {
+    "navigationStyle": "default"
+  },
+  "navigationStyle": "default",
+  "navigationBarTitleText": "壁纸设置"
 }

pages/piano/wallpaper/wallpaper.wxml

@@ -1,15 +1,19 @@
 <!-- pages/piano/wallpaper/wallpaper.wxml -->
 <view class="container">
-    <nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{navbarData}}'></nav-bar>
+    <!-- <nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{navbarData}}'></nav-bar> -->
     <view wx:if="{{topImg.pic}}" class="img_section" bind:tap="imageTopTap">
         <image src="{{topImg.pic}}" class="select_img"></image>
-        <!-- <canvas wx:if="{{showCropImg}}" class="canvas_img" canvas-id="imageCanvas"></canvas> -->
         <image src="../../../images/common/icon_sel.png" class="select_icon"></image>
     </view>
-    <view class="grid-container">
-        <block wx:for="{{imageList}}" wx:key="index" wx:for-item="item" wx:for-index="index">
-            <image class="device_img" src="{{item.pic}}" mode="aspectFill" bind:tap="imageTap" data-image="{{item}}" />
-        </block>
+    <view class="grid_container_super">
+        <view class="grid-container">
+            <block wx:for="{{showAllImages ? imageList : image4List}}" wx:key="index" wx:for-item="item" wx:for-index="index">
+                <image class="device_img" src="{{item.pic}}" mode="aspectFill" bind:tap="imageTap" data-image="{{item}}" />
+            </block>
+        </view>
+        <view class="up_down_img" bindtap="toggleShowAll">
+            <image src="{{showAllImages ? '../../../img/j_top.png' : '../../../img/j_bottom.png'}}"></image>
+        </view>
     </view>
     <view class="footer" bind:tap="footerTap">
         <image src="../../../images/common/icon_add.png" mode="aspectFill" />

pages/piano/wallpaper/wallpaper.wxss

@@ -1,4 +1,12 @@
 /* pages/piano/wallpaper/wallpaper.wxss */
+/* .ex-nav-bgc-class {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+} */
+
 
 .img_section {
     margin-top: 32rpx;
@@ -34,13 +42,32 @@
     z-index: 1;
 }
 
+.grid_container_super {
+    overflow-y: auto;
+    margin-top: 40rpx;
+}
 
 .grid-container {
-    margin-top: 32rpx;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 32rpx;
     margin-inline: 32rpx;
+    /* height: calc(100vh - 200px); */
+}
+
+.up_down_img {
+    width: 100%;
+    height: 44rpx;
+    margin-top: 20rpx;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    margin-bottom: 200rpx;
+}
+
+.up_down_img>image {
+    width: 24rpx;
+    height: 16rpx;
 }
 
 .device_img {
@@ -79,4 +106,4 @@
     font-size: 32rpx;
     margin-top: -16rpx;
 
-}
+}

utils/store.js

@@ -5,10 +5,10 @@ module.exports = {
 }
 
 //同步储存缓存数据
-function setStore(key, value) {
+async function setStore(key, value) {
   try {
     wx.setStorageSync(key, value);
-  } catch (e) {}
+  } catch (e) { }
 };
 
 //同步取出缓存数据
@@ -16,10 +16,12 @@ function getStore(key) {
   try {
     const strings = require('../utils/strings');
     var list = wx.getStorageSync(key);
-    if (!strings.isEmpty(strings)) {
+    if (!strings.isEmpty(list)) {
       return list;
     }
-  } catch (e) {}
+  } catch (e) {
+    return [];
+  }
   return [];
 };
 
@@ -27,5 +29,5 @@ function getStore(key) {
 function remove(key) {
   try {
     wx.removeStorageSync(key)
-  } catch (e) {}
+  } catch (e) { }
 }