<template>
  <div class="sigin">
    <div class="tui">
      <div class="cnent">
        <!-- <div><img :src="ImageUrl" alt="" width="60" class="round-avatar"></div> -->
        <div class="tuijianm">
          <div :style="{ fontsize: '24px' }">您的专属推荐码</div>
          <div :style="{ marginTop: '10px' }">{{ resfn }}</div>
        </div>
        <div class="qian">
          <h3>奖励说明:</h3>
          <div>将邀请码分享给他人绑定成功且参与开店获得更多奖励</div>
        </div>
        <button class="btn" @click="share">分享</button>
      </div>
    </div>
    <div class="bottomc">
      <!-- <button class="btn">立即推荐</button>
      <button class="btn">保存海报</button> -->
    </div>
  </div>
</template>

<script>
import { mymon } from "@/api/point.js";
// import { saveImageToPhotosAlbum } from "@/utils/request.js"; // 假设该方法在 request.js 中
import config from "@/config/config.js"; // 假设 config.js 中定义了 API 接口地址
export default {
  data() {
    return {
      resfn: "",
      ImageUrl: "",
    };
  },
  mounted() {
    this.getmy();
  },
  methods: {
    getmy() {
      mymon().then((res) => {
        this.resfn = res.data.result.code;
        // this.ImageUrl= res.data.result.face;
      });
    },
    share() {
      console.log(config.downloadLink);

      // 这里添加第三方分享逻辑
      uni.showActionSheet({
        itemList: ["分享到微信好友", "分享到朋友圈", "分享到QQ", "分享到消息"],
        success: (res) => {
          const providerMap = ["weixin", "weixin", "qq", "im"];
          const sceneMap = ["WXSceneSession", "WXSceneTimeline", "", ""];
          // 分享到微信好友、朋友圈或QQ ------------暂定

          if (providerMap[res.tapIndex] === "im") {
            uni.setClipboardData({
              data: `邀请码:${this.resfn}`,
              success: () => {
                uni.showToast({
                  title: "复制成功",
                  icon: "none",
                });
                uni.switchTab({
                  url: "/pages/tabbar/im/index",
                });
              },
              fail: () => {
                uni.showToast({
                  title: "复制失败",
                  icon: "none",
                });
              },
            });
          } else {
            uni.share({
              provider: providerMap[res.tapIndex],
              scene: sceneMap[res.tapIndex],
              title: "无终街邀请专属码",
              summary: "输入达人邀请码，获得更多曝光量",
              imageUrl: "/static/imlogo.png",
              href: config.downloadLink,
              success: () => uni.showToast({ title: "分享成功" }),
            });
          }
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.sigin {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url("@/static/abcx.png") no-repeat;
  background-size: 100% 100%;
}
.tui {
  padding: 0rpx;
  height: calc(85vh - 65rpx);
  width: 80%;
  margin: 10rpx;
  border-radius: 10rpx;
}
.cnent {
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.round-avatar {
  border-radius: 50%;
  object-fit: cover; /* 确保图片填充整个圆形区域 */
  width: 60rpx;
  height: 60rpx;
}
.bottomc {
  width: 80%;
  height: 15vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.qian {
  width: 80%;
  height: 15%;
  /* margin-top: 15%; */
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.btn {
  width: 75%;
  background: #fe3c3c;
  margin-top: 15%;
}
.tuijianm {
  width: 65%;
  height: 20%;
  font-size: 40rpx;
  justify-content: center;
  align-items: center;
  padding: 10rpx;
  margin-top:60%;
  text-align: center;
}
@media (min-height: 100px) and (max-height: 700px) {
  .qian {
  width: 80%;
  height: 25%;
  /* margin-top: 15%; */
  display: flex;
  flex-direction: column;
  justify-content: end;
}
  .tui {
    height: calc(70vh - 65rpx);
  }
  .tuijianm {
    margin-top: 40%;
  }
}
</style>
