<!-- template 里寫圖片列表 -->
<view class="img-list">
  <image 
    v-for="(item, index) in imgList" 
    :key="index"
    :src="item" 
    class="img-item"
    @click="previewImg(index)"
  ></image>
</view>

export default {
  data() {
    return {
      // 圖片列表，換成你的圖片地址
      imgList: [
        "https://xxx.com/img1.jpg",
        "https://xxx.com/img2.jpg",
        "https://xxx.com/img3.jpg"
      ]
    };
  },
  methods: {
    // 預(yù)覽圖片
    previewImg(current) {
      uni.previewImage({
        current: current, // 當(dāng)前點(diǎn)擊的圖片索引
        urls: this.imgList, // 所有要預(yù)覽的圖片列表
        longPressActions: {
          // 長(zhǎng)按顯示的操作菜單
          itemList: ["保存圖片", "分享圖片"],
          success: (res) => {
            if (res.tapIndex === 0) {
              // 點(diǎn)擊保存圖片
              this.saveImg(this.imgList[current]);
            }
          }
        }
      });
    },
    // 保存圖片到相冊(cè)
    saveImg(imgUrl) {
      uni.saveImageToPhotosAlbum({
        filePath: imgUrl,
        success: () => {
          uni.showToast({
            title: "保存成功",
            icon: "success"
          });
        },
        fail: (err) => {
          // 用戶拒絕授權(quán)時(shí)提示
          if (err.errMsg.includes("auth deny")) {
            uni.showToast({
              title: "請(qǐng)開啟保存圖片權(quán)限",
              icon: "none"
            });
          }
        }
      });
    }
  }
};

.img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  padding: 20rpx;
}
.img-item {
  width: 30%;
  height: 200rpx;
  border-radius: 8rpx;
}