169 lines
4.1 KiB
Vue
169 lines
4.1 KiB
Vue
<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>
|