Skip to content

飞
飞鹤小程序
Commit 58a3fa49 authored by lg's avatar lg
Browse files
Options

chore: init

parent e0d7053e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3301 additions and 0 deletions
activities/1015/home/config.js 0 → 100644
View file @ 58a3fa49
const version = 'v1'
// 915活动页面配置
export const act915Config = {
// 页面状态
states: {
NORMAL: 'normal',
INVITED: 'invited',
COMPLETED: 'completed'
},
// 图片配置
images: {
background: `Act915Page/${version}/Act915PageBg.png`,
goods1: `Act915Page/${version}/Act915PageGoods1.png`,
goods3: `Act915Page/${version}/Act915PageGoods3.png`,
goodslist2: `Act915Page/${version}/Act915PageGoodsList2.png`,
goodslist1: `Act915Page/${version}/Act915PageGoodsList1.png`,
inviteConBg: `Act915Page/${version}/Act915PageInviteConBg.png`,
inviteConBtn: `Act915Page/${version}/Act915PageInviteConBtn.png`,
inviteConStatusNo2: `Act915Page/${version}/Act915PageInviteConStatusNo2.png`,
inviteConStatusNo1: `Act915Page/${version}/Act915PageInviteConStatusNo1.png`,
inviteConStatusYes2: `Act915Page/${version}/Act915PageInviteConStatusYes2.png`,
inviteConStatusYes1: `Act915Page/${version}/Act915PageInviteConStatusYes1.png`,
inviteConImg: `Act915Page/${version}/Act915PageInviteConImg.png`,
lotteryBanner: `Act915Page/${version}/Act915PageLotteryBanner.png`,
banner: `Act915Page/${version}/Act915PageBanner.png`,
banner2: `Act915Page/${version}/Act915PageBanner.png`,
banner3: `Act915Page/${version}/Act915PageBanner.png`
},
// 文本配置
texts: {
inviteTitle: '邀请好友助力得XXXXX',
inviteBtnText: '立即邀请',
lotteryTitle: '抽奖活动',
goodsTitle: '商品展示'
},
// 活动配置
activity: {
maxInvites: 2, // 最大邀请人数
reward: 'XXXXX', // 奖励内容
startTime: '2024-09-15 00:00:00',
endTime: '2024-09-30 23:59:59'
}
}
// 获取图片URL的工具函数
export const getImageUrl = (imagePath) => {
return imagePath
}
activities/1015/home/index.less 0 → 100644
View file @ 58a3fa49
// 加载状态样式
.loading-container {
width: 750rpx;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
text {
font-size: 32rpx;
color: #666;
}
}
// 915活动页面样式
.act915page {
width: 750rpx;
height: 1624rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
max-width: 100vw; // 确保不超过视口宽度
overflow-x: hidden; // 防止水平滚动
// 返回按钮样式
.nav-left {
position: fixed;
top: 100rpx;
left: 30rpx;
z-index: 999;
.back-btn {
width: 60rpx;
height: 60rpx;
}
}
.act915pagebg {
width: 750rpx;
height: 4238rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.act915pagegoods1 {
width: 685rpx;
height: 244rpx;
left: 32rpx;
top: 1370rpx;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.act915pagegoods3-container {
width: 701rpx;
height: 370rpx;
left: 24rpx;
top: 1648rpx;
position: absolute;
.act915pagegoods3bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.act915pagegoods3products {
position: absolute;
top: 13rpx;
left: 10rpx;
width: 203rpx;
height: 286rpx;
display: flex;
gap: 14rpx; // 商品之间的间距
padding: 25rpx; // 容器内边距
pointer-events: none; // 让子元素可以点击
.act915pagegoods3product {
flex: 1;
height: 286rpx; // 固定高度，确保商品项有足够空间
position: relative;
pointer-events: auto; // 恢复点击事件
transition: all 0.3s ease;
min-width: 200rpx; // 最小宽度确保可点击性
&:hover {
opacity: 0.8;
transform: scale(1.02);
}
// 为不同位置的商品设置不同的点击区域
&.product-left {
// 左侧商品点击区域
}
&.product-center {
// 中间商品点击区域
}
&.product-right {
// 右侧商品点击区域
}
}
}
}
.act915pagegoodslist2 {
width: 701rpx;
height: 791rpx;
left: 24rpx;
top: 3369rpx;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.act915pagegoodslist2-container {
width: 701rpx;
height: 791rpx;
left: 24rpx;
top: 3369rpx;
position: absolute;
.act915pagegoodslist2bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.act915pagegoodslist2products {
position: absolute;
top: 110rpx;
left: 10rpx;
width: 654rpx;
height: 316 * 2rpx;
display: grid;
grid-template-columns: 1fr 1fr 1fr; // 3列等宽
grid-template-rows: 1fr 1fr; // 2行等高
gap: 0rpx; // 网格间距
padding: 20rpx; // 容器内边距
pointer-events: none; // 让子元素可以点击
.act915pagegoodslist2product {
position: relative;
pointer-events: auto; // 恢复点击事件
transition: all 0.3s ease;
width: 204rpx;
height: 295rpx;
&:hover {
opacity: 0.8;
transform: scale(1.02);
}
// 为不同位置的商品设置不同的点击区域
&.product-1 {
// 第一行左侧商品
}
&.product-2 {
// 第一行中间商品
}
&.product-3 {
// 第一行右侧商品
}
&.product-4 {
// 第二行左侧商品
}
&.product-5 {
// 第二行中间商品
}
&.product-6 {
// 第二行右侧商品
}
}
}
}
.act915pagegoodslist1-container {
width: 701rpx;
height: 795rpx;
left: 24rpx;
top: 2546rpx;
position: absolute;
.act915pagegoodslist1bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.act915pagegoodslist1products {
position: absolute;
top: 113rpx;
left: 10rpx;
width: 654rpx;
height: 316 * 2rpx;
display: grid;
grid-template-columns: 1fr 1fr 1fr; // 3列等宽
grid-template-rows: 1fr 1fr; // 2行等高
gap: 0rpx; // 网格间距
padding: 20rpx; // 容器内边距
pointer-events: none; // 让子元素可以点击
.act915pagegoodslist1product {
position: relative;
pointer-events: auto; // 恢复点击事件
transition: all 0.3s ease;
width: 204rpx;
height: 295rpx;
&:hover {
opacity: 0.8;
transform: scale(1.02);
}
// 为不同位置的商品设置不同的点击区域
&.product-1 {
// 第一行左侧商品
}
&.product-2 {
// 第一行中间商品
}
&.product-3 {
// 第一行右侧商品
}
&.product-4 {
// 第二行左侧商品
}
&.product-5 {
// 第二行中间商品
}
&.product-6 {
// 第二行右侧商品
}
}
}
}
.act915pageinvitecon {
width: 686rpx;
height: 210rpx;
left: 31rpx;
top: 2045rpx;
position: absolute;
.act915pageinviteconbg {
width: 686rpx;
height: 210rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
// 重置button默认样式
border: none;
outline: none;
padding: 0;
margin: 0;
background-color: transparent;
// 移除button的默认样式
&::after {
border: none;
}
// 移除button的默认边框
&::before {
border: none;
}
}
.act915pageinviteconbtn {
width: 164rpx;
height: 63rpx;
left: 205rpx;
top: 107rpx;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
}
.act915pageinviteconstatus {
width: 148rpx;
height: 67rpx;
left: 28rpx;
top: 104rpx;
pointer-events: none;
position: absolute;
.act915pageinviteconstatusno2 {
width: 65rpx;
height: 66rpx;
left: 83rpx;
top: 0rpx;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.act915pageinviteconstatusno1 {
width: 65rpx;
height: 66rpx;
left: 0rpx;
top: 1rpx;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.act915pageinviteconstatusyes2 {
width: 64rpx;
height: 65rpx;
left: 84rpx;
top: 0rpx;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.act915pageinviteconstatusyes1 {
width: 64rpx;
height: 65rpx;
left: 2rpx;
top: 1rpx;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
.act915pageinvitecontitle {
width: 347rpx;
height: 31rpx;
left: 30rpx;
top: 36rpx;
position: absolute;
font-size: 32rpx;
line-height: 31rpx;
color: rgba(255, 255, 255, 1);
}
.act915pageinviteconimg {
width: 155rpx;
height: 155rpx;
left: 497rpx;
top: 28rpx;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
.act915pagelotterybanner {
width: 685rpx;
height: 210rpx;
left: 32rpx;
top: 2294rpx;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.mask-background {
width: 750rpx;
height: 459rpx;
left: 0rpx;
top: 2045rpx;
position: absolute;
.auth-button {
width: 750rpx;
height: 459rpx;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: none !important;
outline: none !important;
padding: 0;
margin: 0;
background-color: transparent !important;
}
.auth-button::after {
border: none !important;
outline: none !important;
border-radius: 0 !important;
}
}
.act915pagebanner {
width: 750rpx;
height: 1332rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.act915pagebanneritem {
width: 100%;
height: 100%;
display: block;
}
}
}
activities/1015/home/index.vue 0 → 100644
View file @ 58a3fa49
This diff is collapsed.
activities/1015/lottery/README.md 0 → 100644
View file @ 58a3fa49
# 抽奖页面弹窗组件
## 组件结构
```
activity0915/lottery/
├── lottery.vue # 主抽奖页面
├── config.js # 主页面配置
├── lotterypage.less # 主页面样式
└── components/ # 弹窗组件目录
├── ruleModal/ # 规则弹窗
│ ├── ruleModal.vue
│ ├── config.js
│ └── rulemodal.less
├── drawSucModal/ # 抽奖成功弹窗
│ ├── drawSucModal.vue
│ ├── config.js
│ └── drawsucmodal.less
└── drawFailModal/ # 抽奖失败弹窗
├── drawFailModal.vue
├── config.js
└── drawfailmodal.less
```
## 组件说明
### 1. RuleModal (规则弹窗)
- **功能**: 显示活动规则说明
- **Props**:
- `visible`: Boolean - 控制弹窗显示/隐藏
- **Events**:
- `close`: 关闭弹窗事件
### 2. DrawSucModal (抽奖成功弹窗)
- **功能**: 显示抽奖成功和奖品信息
- **Props**:
- `visible`: Boolean - 控制弹窗显示/隐藏
- `awardName`: String - 中奖奖品名称
- **Events**:
- `close`: 关闭弹窗事件
- `happy-get`: 点击"开心领取"按钮事件
### 3. DrawFailModal (抽奖失败弹窗)
- **功能**: 显示抽奖失败提示
- **Props**:
- `visible`: Boolean - 控制弹窗显示/隐藏
- **Events**:
- `close`: 关闭弹窗事件
- `i-know`: 点击"我知道了"按钮事件
## 使用方法
### 在主页面中引入组件
```vue
<template>
<view class="lotterypage">
<!-- 主页面内容 -->
<!-- 规则弹窗 -->
<RuleModal
:visible="showRuleModal"
@close="handleRuleModalClose"
/>
<!-- 抽奖成功弹窗 -->
<DrawSucModal
:visible="showDrawSucModal"
:award-name="currentAwardName"
@close="handleDrawSucModalClose"
@happy-get="handleHappyGet"
/>
<!-- 抽奖失败弹窗 -->
<DrawFailModal
:visible="showDrawFailModal"
@close="handleDrawFailModalClose"
@i-know="handleIKnow"
/>
</view>
</template>
<script setup>
import RuleModal from './components/ruleModal/ruleModal.vue'
import DrawSucModal from './components/drawSucModal/drawSucModal.vue'
import DrawFailModal from './components/drawFailModal/drawFailModal.vue'
// 弹窗状态
const showRuleModal = ref(false)
const showDrawSucModal = ref(false)
const showDrawFailModal = ref(false)
const currentAwardName = ref('')
// 事件处理
const handleRuleModalClose = () => {
showRuleModal.value = false
}
const handleDrawSucModalClose = () => {
showDrawSucModal.value = false
}
const handleHappyGet = () => {
showDrawSucModal.value = false
// 处理奖品领取逻辑
}
const handleDrawFailModalClose = () => {
showDrawFailModal.value = false
}
const handleIKnow = () => {
showDrawFailModal.value = false
// 处理失败确认逻辑
}
</script>
```
## 抽奖逻辑
抽奖页面会根据奖品配置中的概率进行随机抽奖：
```javascript
// 根据奖品概率判断是否中奖
const isWin = Math.random() < award.probability
if (isWin) {
// 中奖 - 显示成功弹窗
currentAwardName.value = award.name
showDrawSucModal.value = true
} else {
// 未中奖 - 显示失败弹窗
showDrawFailModal.value = true
}
```
## 样式说明
所有弹窗组件都使用绝对定位，覆盖在主页面之上。弹窗背景使用半透明遮罩，确保用户注意力集中在弹窗内容上。
每个弹窗组件都有独立的样式文件，可以根据设计需求进行调整。
activities/1015/lottery/components/drawFailModal/config.js 0 → 100644
View file @ 58a3fa49
const version = 'v1'
// 抽奖失败弹窗配置
export const drawFailModalConfig = {
// 图片配置
images: {
background: `Act915Component/DrawFailModal/${version}/DrawFailModalBg.png`,
iKnowBtn: `Act915Component/DrawFailModal/${version}/DrawFailModalBgIKnowBtn.png`,
closeBtn: `Act915Component/DrawFailModal/${version}/DrawFailModalBgCloseBtn.png`
},
// 文本配置
texts: {
iKnowButton: '我知道了',
closeButton: '关闭'
},
// 弹窗配置
modal: {
width: 550,
height: 396,
animationDuration: 300
}
}
// 获取图片URL的工具函数
export const getImageUrl = (imagePath) => {
return imagePath
}
activities/1015/lottery/components/drawFailModal/drawFailModal.vue 0 → 100644
View file @ 58a3fa49
<template>
<view class="drawfailmodal" v-if="visible">
<!-- 蒙层 -->
<view class="drawfailmodal-mask" @click="handleCloseClick"></view>
<!-- 弹窗内容 -->
<view class="drawfailmodal-content">
<span class="drawfailmodalbg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
<span class="drawfailmodalbgiknowbtn"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.iKnowBtn)})` }"
@click="handleIKnowClick"></span>
<span class="drawfailmodalbgclosebtn"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.closeBtn)})` }"
@click="handleCloseClick"></span>
</view>
</view>
</template>
<script setup>
import { drawFailModalConfig, getImageUrl } from './config.js'
// 组件名称
defineOptions({
name: 'DrawFailModal'
})
// Props
defineProps({
visible: {
type: Boolean,
default: false
}
})
// Emits
const emit = defineEmits(['close', 'i-know'])
// 配置对象
const config = drawFailModalConfig
// 我知道了按钮点击处理
const handleIKnowClick = () => {
console.log('点击我知道了按钮')
emit('i-know')
}
// 关闭按钮点击处理
const handleCloseClick = () => {
console.log('关闭抽奖失败弹窗')
emit('close')
}
</script>
<style lang="less" scoped>
@import './drawfailmodal.less';
</style>
activities/1015/lottery/components/drawFailModal/drawfailmodal.less 0 → 100644
View file @ 58a3fa49
@import "@/common.less";
.drawfailmodal {
width: 100vw;
height: 100vh;
left: 0rpx;
top: 0rpx;
position: fixed;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
// 蒙层
.drawfailmodal-mask {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
// 弹窗内容
.drawfailmodal-content {
width: 550rpx;
height: 396rpx;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.drawfailmodalbg {
width: 550rpx;
height: 396rpx;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.drawfailmodalbgiknowbtn {
width: 465rpx;
height: 97rpx;
position: absolute;
top: 243rpx;
left: 42rpx;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
}
.drawfailmodalbgclosebtn {
width: 59rpx;
height: 59rpx;
position: absolute;
top: 437rpx;
left: 245rpx;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
}
}
activities/1015/lottery/components/drawSucModal/config.js 0 → 100644
View file @ 58a3fa49
const version = 'v1'
// 抽奖成功弹窗配置
export const drawSucModalConfig = {
// 图片配置
images: {
background: `Act915Component/DrawSucModal/${version}/DrawSucModalBg.png`,
happyGetBtn: `Act915Component/DrawSucModal/${version}/DrawSucModalHappyGetBtn.png`,
closeBtn: `Act915Component/DrawSucModal/${version}/DrawSucModalCloseBtn.png`
},
// 文本配置
texts: {
defaultAwardName: '奖品名称奖品名称',
happyGetButton: '开心领取',
closeButton: '关闭'
},
// 弹窗配置
modal: {
width: 550,
height: 616,
animationDuration: 300
}
}
// 获取图片URL的工具函数
export const getImageUrl = (imagePath) => {
return imagePath
}
activities/1015/lottery/components/drawSucModal/drawSucModal.vue 0 → 100644
View file @ 58a3fa49
<template>
<view class="drawsucmodal" v-if="visible">
<!-- 蒙层 -->
<view class="drawsucmodal-mask" @click="handleCloseClick"></view>
<!-- 弹窗内容 -->
<view class="drawsucmodal-content">
<span class="drawsucmodalbg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
<image class="drawsucmodalawardimg" :src="`${$baseUrl}${awardImageUrl}`" mode="aspectFit"
v-if="awardImageUrl" @error="console.log('奖品图片加载失败')"></image>
<span class="drawsucmodalawardname">{{ awardName }}</span>
<span class="drawsucmodalhappygetbtn"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.happyGetBtn)})` }"
@click="handleHappyGetClick"></span>
<span class="drawsucmodalclosebtn"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.closeBtn)})` }"
@click="handleCloseClick"></span>
</view>
</view>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
import { drawSucModalConfig, getImageUrl } from './config.js'
// 组件名称
defineOptions({
name: 'DrawSucModal'
})
// Props
defineProps({
visible: {
type: Boolean,
default: false
},
awardName: {
type: String,
default: ''
},
awardImageUrl: {
type: String,
default: ''
}
})
// Emits
const emit = defineEmits(['close', 'happy-get'])
// 配置对象
const config = drawSucModalConfig
// 获取$baseUrl
const instance = getCurrentInstance()
const $baseUrl = instance.proxy.$baseUrl
// 开心领取按钮点击处理
const handleHappyGetClick = () => {
console.log('点击开心领取按钮')
emit('happy-get')
}
// 关闭按钮点击处理
const handleCloseClick = () => {
console.log('关闭抽奖成功弹窗')
emit('close')
}
</script>
<style lang="less" scoped>
@import './drawsucmodal.less';
</style>
activities/1015/lottery/components/drawSucModal/drawsucmodal.less 0 → 100644
View file @ 58a3fa49
@import "@/common.less";
.drawsucmodal {
width: 100vw;
height: 100vh;
left: 0rpx;
top: 0rpx;
position: fixed;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
// 蒙层
.drawsucmodal-mask {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
// 弹窗内容
.drawsucmodal-content {
width: 550rpx;
height: 616rpx;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.drawsucmodalbg {
width: 550rpx;
height: 616rpx;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.drawsucmodalawardimg {
width: 180rpx;
height: 180rpx;
position: absolute;
top: 150rpx;
left: 185rpx;
object-fit: contain;
z-index: 3;
}
.drawsucmodalawardname {
width: 348rpx;
height: 30rpx;
position: absolute;
top: 365rpx;
left: 101rpx;
font-size: 29rpx;
line-height: 30rpx;
color: rgba(0, 0, 0, 1);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.drawsucmodalhappygetbtn {
width: 465rpx;
height: 97rpx;
position: absolute;
top: 434rpx;
left: 42rpx;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
}
.drawsucmodalclosebtn {
width: 60rpx;
height: 59rpx;
position: absolute;
top: 660rpx;
left: 245rpx;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
}
}
activities/1015/lottery/components/ruleModal/config.js 0 → 100644
View file @ 58a3fa49
const version = 'v1'
// 活动规则弹窗配置
export const act915RuleModalConfig = {
// 图片配置
images: {
background: `Act915Component/Act915RuleModal/${version}/Act915RuleModalBg.png`,
textImg: `Act915Component/Act915RuleModal/${version}/Act915RuleModalTextImg.png`,
closeBtn: `Act915Component/Act915RuleModal/${version}/Act915RuleModalCloseBtn.png`
},
// 文本配置
texts: {
closeButton: '关闭',
ruleTitle: '活动规则'
},
// 弹窗配置
modal: {
width: 550,
height: 667,
animationDuration: 300
}
}
// 获取图片URL的工具函数
export const getImageUrl = (imagePath) => {
return imagePath
}
activities/1015/lottery/components/ruleModal/ruleModal.vue 0 → 100644
View file @ 58a3fa49
<template>
<view class="rulemodal" v-if="visible">
<!-- 蒙层 -->
<view class="rulemodal-mask" @click="handleCloseClick"></view>
<!-- 弹窗内容 -->
<view class="rulemodal-content">
<span class="rulemodalbg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
<!-- 规则内容区域 - 支持滚动 -->
<view class="rulemodal-text-container">
<image class="rulemodaltextimg"
:src="`${$baseUrl}${getRuleImgUrl()}`"
mode="widthFix"
@load="console.log('规则图片加载成功')"
@error="console.log('规则图片加载失败')"></image>
</view>
<span class="rulemodalclosebtn"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.closeBtn)})` }"
@click="handleCloseClick"></span>
</view>
</view>
</template>
<script setup>
import { act915RuleModalConfig, getImageUrl } from './config.js'
import { getCurrentInstance } from 'vue'
// 组件名称
defineOptions({
name: 'RuleModal'
})
// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
// Props
const props = defineProps({
visible: {
type: Boolean,
default: false
},
rules: {
type: String,
default: ''
},
config: {
type: Object,
default: () => ({})
}
})
// Emits
const emit = defineEmits(['close'])
// 配置对象
const config = act915RuleModalConfig
// 获取规则图片URL
const getRuleImgUrl = () => {
// 优先使用接口返回的 ruleImg
if (props.config && props.config.ruleImg) {
console.log('使用接口返回的 ruleImg:', props.config.ruleImg)
return props.config.ruleImg
}
// 回退到默认配置
console.log('使用默认配置的 textImg:', config.images.textImg)
const defaultUrl = getImageUrl(config.images.textImg)
console.log('默认图片URL:', defaultUrl)
return defaultUrl
}
// 关闭按钮点击处理
const handleCloseClick = () => {
console.log('关闭规则弹窗')
emit('close')
}
</script>
<style lang="less" scoped>
@import './rulemodal.less';
</style>
activities/1015/lottery/components/ruleModal/rulemodal.less 0 → 100644
View file @ 58a3fa49
@import "@/common.less";
.rulemodal {
width: 100vw;
height: 100vh;
left: 0rpx;
top: 0rpx;
position: fixed;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; // 禁用弹窗内的滚动
// 蒙层
.rulemodal-mask {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
// 弹窗内容
.rulemodal-content {
width: 550rpx;
height: 667rpx;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.rulemodalbg {
width: 550rpx;
height: 667rpx;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
// 规则内容滚动容器
.rulemodal-text-container {
width: 100%;
height: 471rpx;
position: absolute;
// top: 154rpx;
// left: 35rpx;
overflow-y: auto;
overflow-x: hidden;
z-index: 3;
// 自定义滚动条样式
&::-webkit-scrollbar {
width: 8rpx;
}
&::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 4rpx;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.3);
border-radius: 4rpx;
&:hover {
background: rgba(0, 0, 0, 0.5);
}
}
// 规则图片样式
.rulemodaltextimg {
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
}
.rulemodalclosebtn {
width: 60rpx;
height: 59rpx;
position: absolute;
top: 728rpx;
left: 245rpx;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
}
}
activities/1015/lottery/config.js 0 → 100644
View file @ 58a3fa49
const version = 'v1'
// 抽奖页面配置
export const lotteryConfig = {
// 页面状态
states: {
NORMAL: 'normal',
DRAWING: 'drawing',
COMPLETED: 'completed'
},
// 图片配置
images: {
background: `LotteryPage/${version}/LotteryPageBg.png`,
turnTableBg: `LotteryPage/${version}/LotteryPageTurnTableBg.png`,
turnTableLogo: `LotteryPage/${version}/LotteryPageTurnTableLogo.png`,
awards6Bg: `LotteryPage/${version}/LotteryPageTurnTableAwards6Bg.png`,
awards5Bg: `LotteryPage/${version}/LotteryPageTurnTableAwards5Bg.png`,
awards4Bg: `LotteryPage/${version}/LotteryPageTurnTableAwards4Bg.png`,
awards3Bg: `LotteryPage/${version}/LotteryPageTurnTableAwards3Bg.png`,
awards2Img: `LotteryPage/${version}/LotteryPageTurnTableAwards2Img.png`,
awards1Img: `LotteryPage/${version}/LotteryPageTurnTableAwards1Img.png`,
title: `LotteryPage/${version}/LotteryPageTitle.png`,
ruleBtn: `LotteryPage/${version}/LotteryPageRuleBtn.png`,
awardBtn: `LotteryPage/${version}/LotteryPageAwardBtn.png`,
noticeConBg: `LotteryPage/${version}/LotteryPageNoticeConBg.png`,
noticeConSoundIcon: `LotteryPage/${version}/LotteryPageNoticeConSoundIcon.png`,
drawBtn: `LotteryPage/${version}/LotteryPageDrawBtn.png`,
lotterypageturntableawardsSelBg: `LotteryPage/${version}/lotterypageturntableawardsSelBg.png`,
},
// 奖品配置
awards: [
{
id: 1,
name: 'N47度 水果玉米汁',
type: 'product',
probability: 0.1
},
{
id: 2,
name: 'N47度 水果玉米汁',
type: 'product',
probability: 0.15
},
{
id: 3,
name: 'N47度 水果玉米汁',
type: 'product',
probability: 0.2
},
{
id: 4,
name: 'N47度 水果玉米汁',
type: 'product',
probability: 0.25
},
{
id: 5,
name: '感谢参与',
type: 'thanks',
probability: 0.2
},
{
id: 6,
name: 'N47度 水果玉米汁',
type: 'product',
probability: 0.1
}
],
// 文本配置
texts: {
title: '幸运大转盘',
ruleTitle: '活动规则',
awardTitle: '奖品列表',
drawButton: '立即抽奖',
remainingTimes: '剩余次数：',
noTimesLeft: '抽奖次数已用完',
drawingText: '抽奖中...',
congratulations: '恭喜中奖',
youGot: '您获得了：'
},
// 抽奖配置
lottery: {
maxTimes: 1, // 最大抽奖次数
animationDuration: 2000, // 抽奖动画时长
rotationSpeed: 5 // 转盘旋转速度
}
}
// 获取图片URL的工具函数
export const getImageUrl = (imagePath) => {
return imagePath
}
// 获取随机公告
export const getRandomNotice = () => {
const notices = [
'用户152****8839 获得了 XXXXXX',
'用户138****5678 获得了 YYYYYY',
'用户159****1234 获得了 ZZZZZZ',
'恭喜用户获得大奖！',
'又有用户中奖了！'
]
return notices[Math.floor(Math.random() * notices.length)]
}
// 根据概率获取奖品
export const getRandomAward = (awards) => {
const random = Math.random()
let cumulativeProbability = 0
for (const award of awards) {
cumulativeProbability += award.probability
if (random <= cumulativeProbability) {
return award
}
}
// 默认返回最后一个奖品
return awards[awards.length - 1]
}
activities/1015/lottery/index.less 0 → 100644
View file @ 58a3fa49
This diff is collapsed.
activities/1015/lottery/index.vue 0 → 100644
View file @ 58a3fa49
This diff is collapsed.
pages.json
View file @ 58a3fa49
......@@ -274,6 +274,27 @@
}
}
]
},
{
"root": "activities/1015",
"pages": [
{
"path": "home/index",
"style": {
"navigationBarTitleText": "",
"shareAppMessage": true,
"shareTimeline": false,
"navigationStyle": "custom"
}
},
{
"path": "lottery/index",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
}
]
}
],
"globalStyle": {
......
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