<template>
  <view class="qrcode-content">
    <view class="desc">{{ desc }}</view>
    <view class="qrcode">
      <image class="qrcode-img" :src="qrcodeUrl" />
    </view>
    <view class="qrcode-desc">{{ qrcodeDesc }}</view>
    <view class="qrcode-save">
      <button class="save-btn" @click="saveImage">{{ btnDesc }}</button>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      desc: "添加您的专属顾问，享无限次免息",
      btnDesc: "保存二维码，去激活",
      qrcodeDesc: "点击保存二维码，添加企业微信",
      qrcodeUrl: ""
    };
  },
  onLoad(option) {
    let url = "";
    try {
      url = decodeURIComponent(option.url);
    } catch (e) {
      url = "";
    }
    this.qrcodeUrl = url;
  },
  methods: {
    saveImage() {
      uni.downloadFile({
        url: this.qrcodeUrl,
        success: function(res) {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function() {
                uni.showToast({
                  title: "保存成功",
                  icon: "none"
                });
              },
              fail: function() {
                uni.showToast({
                  title: "保存失败",
                  icon: "none"
                });
              }
            });
          }
        },
        fail: function(error) {
          console.log(error);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/var.scss";
.qrcode-content {
  width: 100%;
  height: 100%;
  background: $white;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: $padding-unit * 30;
  .desc {
    font-size: 34rpx;
    color: #333;
    font-weight: $font-weight-bold;
  }
  .qrcode {
    margin-top: $padding-unit * 10;
    width: 304rpx;
    height: 304rpx;
    &-img {
      width: 100%;
      height: 100%;
    }
  }
  .qrcode-desc {
    margin-top: 18rpx;
    font-size: 24rpx;
    color: #646464;
    text-align: center;
  }
  .qrcode-save {
    margin-top: $padding-unit * 15;
    .save-btn {
      font-weight: $font-weight-bold;
      width: 500rpx;
      background: linear-gradient(90deg, #f63038 4%, #ff8f70 100%);
      border-radius: 40rpx;
      font-size: 34rpx;
      color: $white;
    }
  }
}
</style>
