<template>
  <view class="shopQRcode-container">
    <view class="img-contetn">
      <u--image
        class="qr-code-img"
        :showLoading="true"
        :src="dashboardInfo.store_info.wx_qrcode"
        width="250px"
        height="250px"
      ></u--image>
    </view>
    <view class="btn" @click="save">保存到相册</view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {};
  },
  onShow() {},
  computed: {
    ...mapState("user", ["dashboardInfo"]),
  },
  methods: {
    save() {
      uni.showLoading({
        title: "保存中",
      });
      //下载图片
      uni.downloadFile({
        url: this.dashboardInfo.store_info.wx_qrcode,
        success: (res) => {
          if (res.statusCode === 200) {
            //鉴权
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: "保存成功",
                });
              },
              fail: (err) => {
                //取消不为错，h5端可能有这个问题
                if (err.errMsg.includes("fail cancel")) {
                  uni.hideLoading();
                  return;
                }
                uni.showToast({
                  title: "保存失败",
                  icon: "error",
                });
              },
            });
          }
        },
        fail: (err) => {
          // 地址有误处理
          uni.showToast({
            title: "图片解析失败",
            icon: "error",
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/variables.scss";
.shopQRcode-container {
  .img-contetn {
    display: flex;
    justify-items: center;
    margin: 20%;
  }

  .btn {
    position: fixed;
    bottom: 10%;
    width: 54%;
    margin: 20%;
    padding: 32rpx;
    text-align: center;
    border-radius: 12rpx;
    background: $base-color;
    color: #fff;
  }
}
</style>
