Skip to content

飞
飞鹤小程序
Commit 4812b0cc authored by 王炽's avatar 王炽
Browse files
Options

邀请弹窗相关

parent 5c7ba98a
Hide whitespace changes
Inline Side-by-side
Showing with 408 additions and 23 deletions
components/integralArea/InviteGift.vue
View file @ 4812b0cc
......@@ -14,9 +14,9 @@
<text class="card_description">成功邀请一位好友注册即可获得XXX</text>
<!-- 去邀请按钮 -->
<Button class="invite_button" @click="handleInviteClick" type="share">
<view class="invite_button" @tap="handleInviteClick" open-type="share">
<text class="invite_button_text">去邀请</text>
</Button>
</view>
</view>
<!-- 3D星星角色 -->
<view class="star_character">
......@@ -33,13 +33,13 @@
</view>
<!-- 3D星星角色 -->
<view class="star_character">
<!-- <view class="star_character">
<image
class="star_img"
:src="$baseUrl + 'integral/1023/star_character.png'"
mode="aspectFit"
/>
</view>
</view> -->
</view>
</view>
</template>
......@@ -47,17 +47,33 @@
<script setup>
import { defineEmits } from 'vue';
import { onShareAppMessage } from '@dcloudio/uni-app';
import { jump, JumpType } from '../../utils';
// Emits 定义
const emit = defineEmits(['invite', 'record']);
// 去邀请按钮点击事件
const handleInviteClick = () => {
console.log('去邀请按钮点击');
jump({
url: '/pages/invate/sharepage',
type: JumpType.INNER
});
emit('invite');
};
// 分享配置
onShareAppMessage(() => {
return {
title: '积分分享',
path: '/pages/invate/sharepage',
imageUrl: ''
};
});
// 邀请记录按钮点击事件
const handleRecordClick = () => {
console.log('邀请记录按钮点击');
......
components/integralArea/InvitePrizePanel.vue
View file @ 4812b0cc
......@@ -10,7 +10,7 @@
<view class="prize_image_area">
<image
class="prize_image"
:src="prizeImage || $baseUrl + 'integral/1023/prize_placeholder.png'"
:src="prizeImage || $baseUrl + 'integral/1023/invate_star_character1023.png'"
mode="aspectFit"
/>
</view>
......
components/integralArea/sharenpopnologin.less 0 → 100644
View file @ 4812b0cc
.sharenpopnologin_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
.sharenpopnologin_container {
width: 546rpx;
height: 536rpx;
background: linear-gradient(to top, #ffffff 0%, #ffffff 50%, #FFE9C5 100%); // 金色渐变，上面渐变更慢
border-radius: 30rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
position: relative;
padding: 92rpx 30rpx 0rpx 30rpx;
.popup_content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
.popup_title {
font-size: 36rpx;
font-weight: bold;
color: #D3A458;
margin-bottom: 60rpx;
line-height: 1.4;
}
.star_character {
margin-bottom: 60rpx;
.star_img {
width: 200rpx;
height: 200rpx;
}
}
.view_button {
width: 400rpx;
height: 80rpx;
background: #D3A458; // 金色渐变
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 16rpx rgba(212, 164, 104, 0.3);
.view_button_text {
font-size: 32rpx;
font-weight: bold;
color: #ffffff;
}
}
}
.close_button {
position: absolute;
bottom: -120rpx;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
z-index: 2;
.close_icon {
font-size: 36rpx;
color: #fff;
font-weight: bold;
line-height: 1;
}
}
}
}
components/integralArea/sharenpopnologin.vue 0 → 100644
View file @ 4812b0cc
<template>
<view class="sharenpopnologin_overlay" v-if="visible">
<view class="sharenpopnologin_container" @click.stop>
<!-- 弹窗内容 -->
<view class="popup_content">
<!-- 标题文字 -->
<text class="popup_title">快去查看你的权益吧</text>
<!-- 3D星星角色 -->
<view class="star_character">
<image
class="star_img"
:src="$baseUrl + 'integral/1023/invate_star_character1023.png'"
mode="aspectFit"
/>
</view>
<!-- 立即查看按钮 -->
<view class="view_button" @click="handleViewBenefits">
<text class="view_button_text">立即查看</text>
</view>
</view>
<!-- 关闭按钮 -->
<view class="close_button" @click="handleClose">
<text class="close_icon">×</text>
</view>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
import { jump, JumpType } from '../../utils';
// Props 定义
const props = defineProps({
visible: {
type: Boolean,
default: false
}
});
// Emits 定义
const emit = defineEmits(['close', 'viewBenefits']);
// 关闭弹窗
const handleClose = () => {
emit('close');
gotoIntegral();
};
// 查看权益按钮点击
const handleViewBenefits = () => {
emit('viewBenefits');
emit('close');
gotoIntegral();
};
const gotoIntegral = () => {
jump({
url: '/pages/index/index?pageType=integral',
type: JumpType.INNER
});
};
</script>
<style lang="less" scoped>
@import '@/components/integralArea/sharenpopnologin.less';
</style>
components/integralArea/sharepoplogin.less 0 → 100644
View file @ 4812b0cc
.sharepoplogin_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
.sharepoplogin_container {
// box-sizing: border-box;
width: 546rpx;
height: 536rpx;
background: linear-gradient(to top, #ffffff 0%, #ffffff 50%, #FFE9C5 100%); // 金色渐变，上面渐变更慢
border-radius: 30rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
position: relative;
padding: 72rpx 30rpx 0rpx 30rpx;
.popup_content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
.popup_title {
font-size: 36rpx;
font-weight: bold;
color: #D3A458;
margin-bottom: 16rpx;
line-height: 1.4;
}
.popup_subtitle {
font-size: 28rpx;
color: #54390D;
margin-bottom: 40rpx;
line-height: 1.4;
}
.star_character {
margin-bottom: 40rpx;
.star_img {
width: 200rpx;
height: 200rpx;
}
}
.benefits_button {
width: 400rpx;
height: 80rpx;
background: #D3A458;
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 16rpx rgba(212, 164, 104, 0.3);
.benefits_button_text {
font-size: 32rpx;
font-weight: bold;
color: #ffffff;
}
}
}
.close_button {
position: absolute;
bottom: -120rpx;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
z-index: 2;
.close_icon {
font-size: 36rpx;
color: #fff;
font-weight: bold;
line-height: 1;
}
}
}
}
components/integralArea/sharepoplogin.vue 0 → 100644
View file @ 4812b0cc
<template>
<view class="sharepoplogin_overlay" v-if="visible">
<view class="sharepoplogin_container" @click.stop>
<!-- 弹窗内容 -->
<view class="popup_content">
<!-- 标题文字 -->
<text class="popup_title">你已注册过飞鹤星妈会会员</text>
<text class="popup_subtitle">直接领取你的权益吧</text>
<!-- 3D星星角色 -->
<view class="star_character">
<image
class="star_img"
:src="$baseUrl + 'integral/1023/invate_star_character1023.png'"
mode="aspectFit"
/>
</view>
<!-- 查看权益按钮 -->
<view class="benefits_button" @click="handleViewBenefits">
<text class="benefits_button_text">查看我的权益</text>
</view>
</view>
<!-- 关闭按钮 -->
<view class="close_button" @click="handleClose">
<text class="close_icon">×</text>
</view>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
import { jump, JumpType } from '../../utils';
// Props 定义
const props = defineProps({
visible: {
type: Boolean,
default: false
}
});
// Emits 定义
const emit = defineEmits(['close', 'viewBenefits']);
// 关闭弹窗
const handleClose = () => {
emit('close');
gotoIntegral();
};
// 查看权益按钮点击
const handleViewBenefits = () => {
emit('viewBenefits');
emit('close');
gotoIntegral();
};
const gotoIntegral = () => {
jump({
url: '/pages/index/index?pageType=integral',
type: JumpType.INNER
});
};
</script>
<style lang="less" scoped>
@import '@/components/integralArea/sharepoplogin.less';
</style>
pages/invate/sharepage.vue
View file @ 4812b0cc
......@@ -9,11 +9,59 @@
<text class="claim_text">一键领取</text>
</view>
</view>
<!-- 分享登录弹窗 -->
<sharepoplogin
:visible="showSharePopLogin"
@close="handleCloseSharePopLogin"
@viewBenefits="handleViewBenefits"
/>
<!-- 分享未登录弹窗 -->
<sharenpopnologin
:visible="showShareNPopNoLogin"
@close="handleCloseShareNPopNoLogin"
@viewBenefits="handleViewBenefits"
/>
</view>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { onShareAppMessage } from '@dcloudio/uni-app';
import sharepoplogin from '@/components/integralArea/sharepoplogin.vue';
import sharenpopnologin from '@/components/integralArea/sharenpopnologin.vue';
// 分享登录弹窗状态
const showSharePopLogin = ref(false);
// 分享未登录弹窗状态
const showShareNPopNoLogin = ref(true);
onMounted(() => {
// 页面加载时显示分享未登录弹窗
showShareNPopNoLogin.value = true;
});
// 关闭分享登录弹窗
const handleCloseSharePopLogin = () => {
showSharePopLogin.value = false;
};
// 关闭分享未登录弹窗
const handleCloseShareNPopNoLogin = () => {
showShareNPopNoLogin.value = false;
};
// 查看权益按钮点击
const handleViewBenefits = () => {
console.log('查看我的权益');
// 这里可以添加跳转到权益页面的逻辑
uni.showToast({
title: '跳转到权益页面',
icon: 'none'
});
};
// 一键领取按钮点击事件
const handleClaim = () => {
......
views/Integral.vue
View file @ 4812b0cc
......@@ -2826,23 +2826,23 @@ const handleInviteClick = () => {
console.log('准备调起分享面板');
// 方法1：使用 showShareMenu
uni.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline'],
success: (res) => {
console.log('showShareMenu 成功:', res);
},
fail: (err) => {
console.error('showShareMenu 失败:', err);
// 备用方案：显示提示用户手动分享
uni.showModal({
title: '分享提示',
content: '请点击右上角菜单选择分享给好友或朋友圈',
showCancel: false,
confirmText: '知道了'
});
}
});
// uni.showShareMenu({
// withShareTicket: true,
// menus: ['shareAppMessage', 'shareTimeline'],
// success: (res) => {
// console.log('showShareMenu 成功:', res);
// },
// fail: (err) => {
// console.error('showShareMenu 失败:', err);
// // 备用方案：显示提示用户手动分享
// uni.showModal({
// title: '分享提示',
// content: '请点击右上角菜单选择分享给好友或朋友圈',
// showCancel: false,
// confirmText: '知道了'
// });
// }
// });
// 展示邀请得礼弹窗
// globalStore.isShowInvitePrizePanel = true;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment