150 lines
3.7 KiB
Vue
150 lines
3.7 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: 0px;
|
|
height: calc(85vh - 65px);
|
|
width: 80%;
|
|
margin: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
.cnent {
|
|
height: 80%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.round-avatar {
|
|
border-radius: 50%;
|
|
object-fit: cover; /* 确保图片填充整个圆形区域 */
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
.bottomc {
|
|
width: 80%;
|
|
height: 15vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
.qian {
|
|
width: 80%;
|
|
|
|
margin-top: 50px;
|
|
}
|
|
.btn {
|
|
width: 75%;
|
|
background: #fe3c3c;
|
|
margin-top: 56px;
|
|
}
|
|
.tuijianm {
|
|
width: 65%;
|
|
height: 5.3vh;
|
|
font-size: 20px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10px;
|
|
margin-top: 24vh;
|
|
text-align: center;
|
|
}
|
|
</style>
|