Commit bf98153f authored by 王炽's avatar 王炽

代码合并

parent f0900457
......@@ -23,7 +23,6 @@
.card_content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
......@@ -51,12 +50,17 @@
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(160, 123, 77, 0.3);
transition: transform 0.2s ease;
.invite_button_text {
font-size: 28rpx;
// font-weight: bold;
color: #FFFFFF;
}
&:active {
transform: scale(0.95);
}
}
}
......@@ -66,12 +70,12 @@
height: 62rpx;
top: 16rpx;
right: 20rpx;
z-index: 3;
background: rgba(255, 255, 255, 0.8);
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
.record_text {
font-size: 24rpx;
......@@ -84,15 +88,18 @@
color: #999999;
font-weight: bold;
}
&:active {
transform: scale(0.95);
}
}
.star_character {
position: absolute;
right: -20rpx;
right: 44rpx;
bottom: -20rpx;
z-index: 1;
width: 120rpx;
height: 120rpx;
width: 216rpx;
height: 211rpx;
.star_img {
width: 100%;
......
......@@ -18,7 +18,14 @@
<text class="invite_button_text">去邀请</text>
</view>
</view>
<!-- 3D星星角色 -->
<view class="star_character">
<image
class="star_img"
:src="$baseUrl + 'integral/1023/invate_star_character1023.png'"
mode="aspectFit"
/>
</view>
<!-- 邀请记录按钮 -->
<view class="record_button" @click="handleRecordClick">
<text class="record_text">邀请记录</text>
......
.invite_prize_panel_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
.invite_prize_panel_container {
position: relative;
width: 600rpx;
background: linear-gradient(to bottom, #FFE9C5, #FFFFFF);
border-radius: 30rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
padding: 50rpx 40rpx 40rpx 40rpx;
box-sizing: border-box;
.panel_content {
display: flex;
flex-direction: column;
align-items: center;
.panel_title {
font-size: 36rpx;
font-weight: bold;
color: #D3A458;
text-align: center;
margin-bottom: 40rpx;
line-height: 1.4;
}
.prize_image_area {
width: 200rpx;
height: 200rpx;
background: #FFFFFF;
border-radius: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30rpx;
.prize_image {
width: 180rpx;
height: 180rpx;
border-radius: 16rpx;
}
}
.prize_name {
font-size: 28rpx;
color: #333333;
text-align: center;
margin-bottom: 40rpx;
line-height: 1.4;
}
.button_area {
width: 100%;
display: flex;
justify-content: space-between;
gap: 20rpx;
.record_button {
flex: 1;
height: 78rpx;
width: 220rpx;
background: transparent;
border: 2rpx solid #D3A458;
border-radius: 60rpx;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
.record_button_text {
font-size: 32rpx;
color: #D3A458;
font-weight: 500;
}
&:active {
transform: scale(0.95);
}
}
.prize_button {
flex: 1;
height: 78rpx;
width: 220rpx;
background: #D3A458;
border-radius: 60rpx;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
.prize_button_text {
font-size: 32rpx;
color: #FFFFFF;
// font-weight: 500;
}
&:active {
transform: scale(0.95);
}
}
}
}
.close_button {
position: absolute;
bottom: -80rpx;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
.close_icon {
font-size: 36rpx;
color: #ffffff;
font-weight: bold;
line-height: 1;
}
&:active {
transform: translateX(-50%) scale(0.95);
}
}
}
}
<template>
<view class="invite_prize_panel_overlay" v-if="visible" @click="handleClose">
<view class="invite_prize_panel_container" @click.stop>
<!-- 弹窗内容 -->
<view class="panel_content">
<!-- 主标题 -->
<text class="panel_title">恭喜您成功邀请{{ inviteCount }}位好友注册</text>
<!-- 奖品图片区域 -->
<view class="prize_image_area">
<image
class="prize_image"
:src="prizeImage || $baseUrl + 'integral/1023/prize_placeholder.png'"
mode="aspectFit"
/>
</view>
<!-- 奖品名称 -->
<text class="prize_name">{{ prizeName || '奖品名称奖品名称' }}</text>
<!-- 按钮区域 -->
<view class="button_area">
<!-- 查看邀请记录按钮 -->
<view class="record_button" @click="handleRecordClick">
<text class="record_button_text">查看邀请记录</text>
</view>
<!-- 查看奖品按钮 -->
<view class="prize_button" @click="handlePrizeClick">
<text class="prize_button_text">查看奖品</text>
</view>
</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 } from '../../utils';
// Props 定义
const props = defineProps({
visible: {
type: Boolean,
default: false
},
inviteCount: {
type: Number,
default: 1
},
prizeName: {
type: String,
default: '奖品名称奖品名称'
},
prizeImage: {
type: String,
default: ''
}
});
// Emits 定义
const emit = defineEmits(['close', 'record', 'prize']);
// 关闭弹窗
const handleClose = () => {
emit('close');
};
// 查看邀请记录按钮点击事件
const handleRecordClick = () => {
jump({
type: 1,
url: '/pages/invate/sharepage'
});
console.log('查看邀请记录按钮点击');
emit('record');
};
// 查看奖品按钮点击事件
const handlePrizeClick = () => {
console.log('查看奖品按钮点击');
emit('prize');
};
</script>
<style lang="less" scoped>
@import '@/components/integralArea/InvitePrizePanel.less';
</style>
......@@ -131,6 +131,13 @@
"enablePullDownRefresh": false
}
},
{
"path": "pages/invate/sharepage",
"style": {
"navigationBarTitleText": "新人福利",
"navigationStyle": "custom"
}
},
{
"path": "pages/myReportCard/myReportCard",
"style": {
......
......@@ -6,6 +6,17 @@
<My v-if="globalStore.curTabIndex == 3 && !globalStore.isWxFriendCircle" />
<TabBar v-if="!globalStore.isWxFriendCircle" :curTabIndex="globalStore.curTabIndex" @tabClick="handleTabClick" />
<WxFriendCircleSimplePage v-if="globalStore.isWxFriendCircle" />
<!-- 邀请奖品弹窗 -->
<InvitePrizePanel
:visible="globalStore.isShowInvitePrizePanel"
:inviteCount="1"
:prizeName="'奖品名称奖品名称'"
:prizeImage="''"
@close="handleCloseInvitePrizePanel"
@record="handleInvitePrizePanelRecord"
@prize="handleInvitePrizePanelPrize"
/>
<button v-if="isBackApp" class="back-app" open-type="launchApp" app-parameter="wechat" @binderror="handleLaunchAppError"
:style="{
......@@ -26,6 +37,7 @@ import Brand from "@/views/Brand.vue";
import Integral from "@/views/Integral.vue";
import My from "@/views/My.vue";
import WxFriendCircleSimplePage from "@/components/WxFriendCircleSimplePage.vue";
import InvitePrizePanel from "@/components/integralArea/InvitePrizePanel.vue";
import { useGlobalStore } from "@/stores/global.js";
const globalStore = useGlobalStore();
......@@ -117,6 +129,28 @@ onShareTimeline(() => {
onPageScroll((e) => {
scrollTop.value = e.scrollTop;
});
// 邀请奖品弹窗相关方法
const handleInviteClick = () => {
console.log('邀请按钮点击,显示奖品弹窗');
globalStore.isShowInvitePrizePanel = true;
};
const handleCloseInvitePrizePanel = () => {
globalStore.isShowInvitePrizePanel = false;
};
const handleInvitePrizePanelRecord = () => {
console.log('查看邀请记录');
globalStore.isShowInvitePrizePanel = false;
// 这里可以添加跳转到邀请记录页面的逻辑
};
const handleInvitePrizePanelPrize = () => {
console.log('查看奖品');
globalStore.isShowInvitePrizePanel = false;
// 这里可以添加跳转到奖品页面的逻辑
};
</script>
<style lang="scss" scoped>
......
.sharepage_container {
position: relative;
width: 100%;
min-height: 100vh;
background: #F5F0E8;
.background_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.page_content {
position: relative;
z-index: 2;
padding: 40rpx 30rpx;
// 头部横幅区域
.header_banner {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 60rpx;
.banner_content {
flex: 1;
.main_title {
font-size: 48rpx;
font-weight: bold;
color: #1d1e25;
line-height: 1.3;
margin-bottom: 20rpx;
display: block;
}
.sub_title {
font-size: 28rpx;
color: #666666;
line-height: 1.4;
display: block;
}
}
.gift_box {
width: 120rpx;
height: 120rpx;
.gift_icon {
width: 100%;
height: 100%;
}
}
}
// 通用区域标题
.section_title {
font-size: 40rpx;
font-weight: bold;
color: #1d1e25;
margin-bottom: 30rpx;
display: block;
}
// 育儿课程区域
.courses_section {
margin-bottom: 60rpx;
.courses_scroll {
width: 100%;
white-space: nowrap;
.courses_container {
display: flex;
gap: 20rpx;
padding-bottom: 20rpx;
.course_card {
flex-shrink: 0;
width: 300rpx;
background: #ffffff;
border-radius: 20rpx;
padding: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
.course_header {
display: flex;
align-items: center;
margin-bottom: 20rpx;
.logo_icon {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
.tag_icon {
width: 20rpx;
height: 20rpx;
}
}
.doctor_image {
width: 100%;
height: 200rpx;
margin-bottom: 20rpx;
border-radius: 10rpx;
}
.course_title {
font-size: 28rpx;
font-weight: bold;
color: #1d1e25;
line-height: 1.3;
margin-bottom: 10rpx;
display: block;
}
.course_subtitle {
font-size: 24rpx;
color: #666666;
margin-bottom: 20rpx;
display: block;
}
.doctor_info {
.doctor_name {
font-size: 22rpx;
color: #D3A458;
margin-bottom: 5rpx;
display: block;
}
.doctor_title {
font-size: 20rpx;
color: #999999;
display: block;
}
}
}
}
}
.courses_description {
font-size: 24rpx;
color: #666666;
line-height: 1.5;
margin-top: 20rpx;
display: block;
}
}
// 免费问诊区域
.consultation_section {
margin-bottom: 60rpx;
.doctors_scroll {
width: 100%;
white-space: nowrap;
.doctors_container {
display: flex;
gap: 20rpx;
padding-bottom: 20rpx;
.doctor_card {
flex-shrink: 0;
width: 200rpx;
background: #ffffff;
border-radius: 20rpx;
padding: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
text-align: center;
.doctor_avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin: 0 auto 20rpx;
display: block;
}
.doctor_name {
font-size: 28rpx;
font-weight: bold;
color: #1d1e25;
margin-bottom: 10rpx;
display: block;
}
.doctor_position {
font-size: 22rpx;
color: #666666;
line-height: 1.3;
margin-bottom: 8rpx;
display: block;
}
.doctor_affiliation {
font-size: 20rpx;
color: #999999;
line-height: 1.3;
display: block;
}
}
}
}
.consultation_description {
font-size: 24rpx;
color: #666666;
line-height: 1.5;
margin-top: 20rpx;
display: block;
}
}
// 限时1分购区域
.limited_purchase_section {
margin-bottom: 60rpx;
.schedule_info {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
.schedule_text {
font-size: 24rpx;
color: #666666;
}
.vip_info {
display: flex;
align-items: center;
.lock_icon {
width: 24rpx;
height: 24rpx;
margin-right: 8rpx;
}
.vip_text {
font-size: 22rpx;
color: #D3A458;
}
}
}
.time_slots {
display: flex;
gap: 20rpx;
margin-bottom: 30rpx;
.time_slot {
flex: 1;
background: #F5F0E8;
border-radius: 12rpx;
padding: 20rpx;
text-align: center;
.time_text {
font-size: 28rpx;
font-weight: bold;
color: #1d1e25;
margin-bottom: 8rpx;
display: block;
}
.status_text {
font-size: 22rpx;
color: #999999;
display: block;
}
}
}
.exchange_coupon {
background: #ffffff;
border-radius: 20rpx;
padding: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
border-right: 2rpx dashed #D3A458;
.product_image {
width: 120rpx;
height: 120rpx;
margin-right: 30rpx;
}
.coupon_info {
flex: 1;
.coupon_title {
font-size: 32rpx;
font-weight: bold;
color: #1d1e25;
margin-bottom: 10rpx;
display: block;
}
.coupon_description {
font-size: 24rpx;
color: #666666;
display: block;
}
}
.unlock_button {
background: #D3A458;
border-radius: 30rpx;
padding: 20rpx 30rpx;
.unlock_text {
font-size: 24rpx;
color: #ffffff;
font-weight: 500;
}
}
}
}
// 精选好券区域
.coupons_section {
margin-bottom: 80rpx;
.coupons_scroll {
width: 100%;
white-space: nowrap;
.coupons_container {
display: flex;
gap: 20rpx;
padding-bottom: 20rpx;
.coupon_card {
flex-shrink: 0;
width: 200rpx;
background: #F5F0E8;
border-radius: 20rpx;
padding: 30rpx;
text-align: center;
position: relative;
.coupon_label {
position: absolute;
top: -10rpx;
left: 50%;
transform: translateX(-50%);
background: #D3A458;
color: #ffffff;
font-size: 20rpx;
padding: 4rpx 12rpx;
border-radius: 10rpx;
}
.coupon_amount {
font-size: 48rpx;
font-weight: bold;
color: #D3A458;
margin-bottom: 10rpx;
display: block;
}
.coupon_description {
font-size: 22rpx;
color: #666666;
line-height: 1.3;
display: block;
}
}
}
}
}
// 一键领取按钮
.claim_button {
width: 100%;
height: 100rpx;
background: linear-gradient(90deg, #D3A458 0%, #B8941F 100%);
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 20rpx rgba(211, 164, 88, 0.3);
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
.claim_text {
font-size: 36rpx;
color: #ffffff;
font-weight: bold;
}
}
}
}
<template>
<view class="sharepage_container">
<!-- 背景图片 -->
<image class="background_image" :src="$baseUrl + 'shareImg.jpg'" mode="aspectFill" />
<!-- 页面内容 -->
<view class="page_content">
<!-- 头部横幅区域 -->
<view class="header_banner">
<view class="banner_content">
<text class="main_title">星妈会送你一份新人福利</text>
<text class="sub_title">活动副标题活动副标题活动</text>
</view>
<view class="gift_box">
<image class="gift_icon" :src="$baseUrl + 'integral/1023/gift_box.png'" mode="aspectFit" />
</view>
</view>
<!-- 育儿课程区域 -->
<view class="courses_section">
<text class="section_title">育儿课程</text>
<scroll-view class="courses_scroll" scroll-x="true" show-scrollbar="false">
<view class="courses_container">
<view class="course_card" v-for="(course, index) in courses" :key="index">
<view class="course_header">
<image class="logo_icon" :src="course.logo" mode="aspectFit" />
<image class="tag_icon" :src="course.tag" mode="aspectFit" />
</view>
<image class="doctor_image" :src="course.doctorImage" mode="aspectFit" />
<text class="course_title">{{ course.title }}</text>
<text class="course_subtitle">{{ course.subtitle }}</text>
<view class="doctor_info">
<text class="doctor_name">{{ course.doctorName }}</text>
<text class="doctor_title">{{ course.doctorTitle }}</text>
</view>
</view>
</view>
</scroll-view>
<text class="courses_description">5类课程:产检,儿童疫苗,婴幼儿护理,小儿发热,小儿7种常见病的治疗方法和用药原则</text>
</view>
<!-- 免费问诊区域 -->
<view class="consultation_section">
<text class="section_title">免费问诊</text>
<scroll-view class="doctors_scroll" scroll-x="true" show-scrollbar="false">
<view class="doctors_container">
<view class="doctor_card" v-for="(doctor, index) in doctors" :key="index">
<image class="doctor_avatar" :src="doctor.avatar" mode="aspectFill" />
<text class="doctor_name">{{ doctor.name }}</text>
<text class="doctor_position">{{ doctor.position }}</text>
<text class="doctor_affiliation">{{ doctor.affiliation }}</text>
</view>
</view>
</scroll-view>
<text class="consultation_description">三甲医生免费在线问诊服务(5次/年)</text>
</view>
<!-- 限时1分购区域 -->
<view class="limited_purchase_section">
<text class="section_title">限时1分购</text>
<view class="schedule_info">
<text class="schedule_text">每月28号10、12、14、16点限量发放</text>
<view class="vip_info">
<image class="lock_icon" :src="$baseUrl + 'integral/1023/lock_icon.png'" mode="aspectFit" />
<text class="vip_text">钻石、星光、星耀尊享</text>
</view>
</view>
<view class="time_slots">
<view class="time_slot" v-for="(slot, index) in timeSlots" :key="index">
<text class="time_text">{{ slot.time }}</text>
<text class="status_text">{{ slot.status }}</text>
</view>
</view>
<view class="exchange_coupon">
<image class="product_image" :src="$baseUrl + 'integral/1023/products.png'" mode="aspectFit" />
<view class="coupon_info">
<text class="coupon_title">商品兑换券</text>
<text class="coupon_description">星妈优选多款商品任选</text>
</view>
<view class="unlock_button">
<text class="unlock_text">待解锁</text>
</view>
</view>
</view>
<!-- 精选好券区域 -->
<view class="coupons_section">
<text class="section_title">精选好券</text>
<scroll-view class="coupons_scroll" scroll-x="true" show-scrollbar="false">
<view class="coupons_container">
<view class="coupon_card" v-for="(coupon, index) in coupons" :key="index">
<text class="coupon_label" v-if="coupon.label">{{ coupon.label }}</text>
<text class="coupon_amount">{{ coupon.amount }}</text>
<text class="coupon_description">{{ coupon.description }}</text>
</view>
</view>
</scroll-view>
</view>
<!-- 一键领取按钮 -->
<view class="claim_button" @click="handleClaim">
<text class="claim_text">一键领取</text>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
// 育儿课程数据
const courses = ref([
{
logo: '/static/images/feihe_logo.png',
tag: '/static/images/orange_tag.png',
doctorImage: '/static/images/doctor_xu.png',
title: '2步拯救窒息宝宝(异物窒息)',
subtitle: '家长必学的救命之法',
doctorName: '徐. 营养',
doctorTitle: '北京妇产医院营养中心'
}
]);
// 医生数据
const doctors = ref([
{
avatar: '/static/images/doctor_li.png',
name: '李志忠',
position: '甘肃省营养学会食品营养分会副主任',
affiliation: '兰州理工大学生物化学教授'
}
]);
// 时间槽数据
const timeSlots = ref([
{ time: '10:00', status: '待解锁' },
{ time: '12:00', status: '待解锁' },
{ time: '14:00', status: '待解锁' },
{ time: '16:00', status: '待解锁' }
]);
// 优惠券数据
const coupons = ref([
{ amount: '10元', description: '定制产品立减券' },
{ label: '星妈优选', amount: '20元', description: '满99元使用' },
{ amount: '10元', description: '定制产品立减券' },
{ amount: '8折', description: '顺丰代金券' },
{ amount: '40元', description: '功能营养无门槛券' }
]);
// 一键领取按钮点击事件
const handleClaim = () => {
console.log('一键领取按钮点击');
// 这里可以添加领取逻辑
uni.showToast({
title: '领取成功',
icon: 'success'
});
};
</script>
<style lang="less" scoped>
@import './sharepage.less';
</style>
......@@ -16,6 +16,7 @@ export const useGlobalStore = defineStore('global', {
openId: openId,
unionId: unionId,
baseUrl: '',
isShowInvitePrizePanel: false, // 是否显示邀请奖品弹窗
};
},
actions: {
......
......@@ -985,12 +985,17 @@
border-radius: 30rpx;
text-align: center;
line-height: 62rpx;
transition: transform 0.2s ease;
.exchange_text {
font-size: 24rpx;
color: #FFFFFF;
font-weight: 500;
}
&:active {
transform: scale(0.95);
}
}
}
}
......@@ -1047,12 +1052,17 @@
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
.exchange_text {
font-size: 24rpx;
color: #FFFFFF;
font-weight: 500;
}
&:active {
transform: scale(0.95);
}
}
}
}
......
......@@ -359,10 +359,10 @@
<!-- 权益列表 -->
<scroll-view class="benefits_list" scroll-x="true" show-scrollbar="false">
<view class="benefits_container" :class="{ 'few-items': benefitList.length <= 2, 'single-item': benefitList.length === 1 }">
<view
<view
class="benefit_item"
v-for="(benefit, index) in benefitList"
:key="index"
:key="index"
>
<!-- 权益图片 -->
<view class="benefit_image">
......@@ -472,8 +472,8 @@
}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="goods-list" v-if="activeIndex === 1">
<view class="goods-item" v-for="i in goodsData[1]?.titles?.length" :key="i" :style="{
......@@ -601,6 +601,7 @@ import bannerDataIntegral from '../mock/bannerDataIntegral.json';
import jifenGoodsData from '../mock/jifenGoodsData.json';
import { onShow } from "@dcloudio/uni-app";
import { useIntegralStore } from '../stores/integral';
import { useGlobalStore } from '../stores/global';
const isdebug = ref(false);
......@@ -1507,6 +1508,7 @@ const upLevelExp = ref([1000, 2000, 3000, 4000, 5000]);
const userStore = useUserStore();
const integralStore = useIntegralStore();
const globalStore = useGlobalStore();
const memberInfo = ref({
......@@ -2936,11 +2938,8 @@ const handleInviteClick = () => {
buttonName: "去邀请",
});
// 这里可以添加邀请逻辑
uni.showToast({
title: '跳转到邀请页面',
icon: 'none'
});
// 使用 globalStore 控制弹窗显示
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