englishread-front/subPages/user/share.vue

<template>
  <view class="share-page">
    <!-- <uv-status-bar></uv-status-bar> -->
    
    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 中间图片 -->
      <view class="image-container">
        <image 
          class="share-image" 
          :src="Qrcode" 
          mode="aspectFit"
        ></image>
      </view>
    </view>
    
    <!-- 底部固定按钮 -->
    <view class="bottom-button-container">
      <uv-button :custom-style="{
        height: '82rpx',
        borderRadius: '198rpx',
        background: '#06DADC',
        border: '2rpx solid #06DADC',
        lineHeight: '82rpx',
        fontSize: '36rpx'
        }" type="primary" @click="save">保存到相册</uv-button>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      Qrcode: '',
    }
  },
  methods: {
    handleShare() {
      // 分享逻辑
      uni.showToast({
        title: '分享功能',
        icon: 'none'
      })
    },
    save() {
      uni.saveImageToPhotosAlbum({
        filePath: this.Qrcode,
        success: (res) => {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
        },
        fail: (err) => {
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          })
        }
      })
    },
    async getQrcode() {
      // const res = await this.$api.promotion.qrCode()
      // if (res.code === 200) {
        uni.getImageInfo({
          src: `${this.$config.baseURL}/promotion/qrCode?token=${uni.getStorageSync('token')}`,
          success: (image) => {
            console.log(image.width);
            console.log(image.path);
            this.Qrcode = image.path;
            console.log(image.height);
          }
        });
      // }
    }
  },
  onShow() {
    this.getQrcode()
  },
  
}
</script>

<style lang="scss" scoped>
.share-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.content {
  height: 100vh;
  flex: 1;
  padding-bottom: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .image-container {
    // background: red;
    display: flex;
    // height: 100%;
    justify-content: center;
    align-items: center;
    
    .share-image {
      height: 90vh;
      width: 670rpx;
      border-radius: 16rpx;
    }
  }
}

// 底部固定按钮
.bottom-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx 40rpx;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid #F1F1F1;
}
</style>