Skip to content

飞
飞鹤小程序
Commit 4f7e7e1a authored by spc's avatar spc
Browse files
Options

lottery

parent 67ae9b57
Hide whitespace changes
Inline Side-by-side
Showing with 177 additions and 77 deletions
activity0915/act0915/act0915.vue
View file @ 4f7e7e1a
......@@ -151,22 +151,36 @@ const shareConfig = computed(() => ({
imageUrl: invitationImageUrl.value || '' // 使用接口返回的分享图片
}));
// 分享配置 - uni-app方式
const onShareAppMessage = () => {
// 定义分享函数
const getShareData = () => {
const shareTitle = invitationText.value || '飞鹤915活动'
const shareImage = invitationImageUrl.value || ''
const sharePath = `/activity0915/act0915/act0915?invitationCode=${invitationCode.value}`
console.log('分享参数:', {
title: shareTitle,
imageUrl: shareImage,
path: sharePath,
invitationCode: invitationCode.value
})
return {
title: shareConfig.value.title,
path: shareConfig.value.path,
imageUrl: shareConfig.value.imageUrl
title: shareTitle,
path: sharePath,
imageUrl: shareImage
}
}
// 分享配置 - uni-app方式
const onShareAppMessage = () => {
console.log('onShareAppMessage 被调用')
return getShareData()
}
// 分享到朋友圈
const onShareTimeline = () => {
return {
title: shareConfig.value.title,
path: shareConfig.value.path,
imageUrl: shareConfig.value.imageUrl
}
console.log('onShareTimeline 被调用')
return getShareData()
}
// 响应式数据
......@@ -614,8 +628,49 @@ const handleHappyGet = () => {
icon: 'success'
});
};
// 暴露给 Options API 使用
defineExpose({
getShareData
})
</script>
<style lang="less" scoped>
@import './act915page.less';
</style>
<script>
// 微信小程序分享配置 - 使用 Options API
export default {
// 自定义分享内容
onShareAppMessage() {
console.log('onShareAppMessage 被调用')
// 获取当前页面的数据
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const options = currentPage.options || {}
const invitationCode = options.invitationCode || ''
// 获取页面实例
const pageInstance = currentPage.$vm
if (pageInstance && pageInstance.getShareData) {
return pageInstance.getShareData()
}
// 如果无法获取页面实例，返回默认分享内容
return {
title: '飞鹤915活动',
path: `/activity0915/act0915/act0915?invitationCode=${invitationCode}`,
imageUrl: ''
}
},
// 朋友圈分享已禁用
// onShareTimeline() {
// console.log('onShareTimeline 被调用')
// // 朋友圈分享功能已禁用
// return null
// }
}
</script>
activity0915/lottery/components/drawSucModal/drawSucModal.vue
View file @ 4f7e7e1a
......@@ -2,11 +2,13 @@
<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)})` }"
......@@ -19,6 +21,7 @@
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
import { drawSucModalConfig, getImageUrl } from './config.js'
// 组件名称
......@@ -35,6 +38,10 @@ defineProps({
awardName: {
type: String,
default: ''
},
awardImageUrl: {
type: String,
default: ''
}
})
......@@ -44,6 +51,10 @@ const emit = defineEmits(['close', 'happy-get'])
// 配置对象
const config = drawSucModalConfig
// 获取$baseUrl
const instance = getCurrentInstance()
const $baseUrl = instance.proxy.$baseUrl
// 开心领取按钮点击处理
const handleHappyGetClick = () => {
console.log('点击开心领取按钮')
......
activity0915/lottery/components/drawSucModal/drawsucmodal.less
View file @ 4f7e7e1a
......@@ -43,6 +43,16 @@
background-position: center;
}
.drawsucmodalawardimg {
width: 180rpx;
height: 180rpx;
position: absolute;
top: 150rpx;
left: 185rpx;
object-fit: contain;
z-index: 3;
}
.drawsucmodalawardname {
width: 248rpx;
height: 28rpx;
......
activity0915/lottery/lottery.vue
View file @ 4f7e7e1a
......@@ -2,7 +2,7 @@
<view class="lotterypage">
<span class="lotterypagebg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
<div class="lotterypageturntable">
<span class="lotterypageturntablebg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.turnTableBg)})` }"></span>
......@@ -13,48 +13,60 @@
<div class="lotterypageturntableawards6" v-if="turntablePrizes.length > 5">
<span class="lotterypageturntableawards6selbg" v-if="isPrizeSelected(5) || isPrizeHighlighted(5)"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.lotterypageturntableawardsSelBg)})` }"></span>
<span class="lotterypageturntableawards6bg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awards6Bg)})` }"></span>
<image class="lotterypageturntableawards6img"
:src="`${$baseUrl}${turntablePrizes[5].prizeImageUrl}`"
mode="aspectFit"
@error="console.log('奖品6图片加载失败')"></image>
<span class="lotterypageturntableawards6name">{{ turntablePrizes[5].prizeName }}</span>
</div>
<div class="lotterypageturntableawards5" v-if="turntablePrizes.length > 4">
<span class="lotterypageturntableawards5selbg" v-if="isPrizeSelected(4) || isPrizeHighlighted(4)"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.lotterypageturntableawardsSelBg)})` }"></span>
<span class="lotterypageturntableawards5bg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awards5Bg)})` }"></span>
<image class="lotterypageturntableawards5img"
:src="`${$baseUrl}${turntablePrizes[4].prizeImageUrl}`"
mode="aspectFit"
@error="console.log('奖品5图片加载失败')"></image>
<span class="lotterypageturntableawards5name">{{ turntablePrizes[4].prizeName }}</span>
</div>
<div class="lotterypageturntableawards4" v-if="turntablePrizes.length > 3">
<span class="lotterypageturntableawards4selbg" v-if="isPrizeSelected(3) || isPrizeHighlighted(3)"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.lotterypageturntableawardsSelBg)})` }"></span>
<span class="lotterypageturntableawards4bg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awards4Bg)})` }"></span>
<image class="lotterypageturntableawards4img"
:src="`${$baseUrl}${turntablePrizes[3].prizeImageUrl}`"
mode="aspectFit"
@error="console.log('奖品4图片加载失败')"></image>
<span class="lotterypageturntableawards4name">{{ turntablePrizes[3].prizeName }}</span>
</div>
<div class="lotterypageturntableawards3" v-if="turntablePrizes.length > 2">
<span class="lotterypageturntableawards3selbg" v-if="isPrizeSelected(2) || isPrizeHighlighted(2)"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.lotterypageturntableawardsSelBg)})` }"></span>
<span class="lotterypageturntableawards3bg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awards3Bg)})` }"></span>
<image class="lotterypageturntableawards3img"
:src="`${$baseUrl}${turntablePrizes[2].prizeImageUrl}`"
mode="aspectFit"
@error="console.log('奖品3图片加载失败')"></image>
<span class="lotterypageturntableawards3name">{{ turntablePrizes[2].prizeName }}</span>
</div>
<div class="lotterypageturntableawards2" v-if="turntablePrizes.length > 1">
<span class="lotterypageturntableawards2selbg" v-if="isPrizeSelected(1) || isPrizeHighlighted(1)"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.lotterypageturntableawardsSelBg)})` }"></span>
<span class="lotterypageturntableawards2img"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awards2Img)})` }"></span>
<image class="lotterypageturntableawards2img"
:src="`${$baseUrl}${turntablePrizes[1].prizeImageUrl}`"
mode="aspectFit"
@error="console.log('奖品2图片加载失败')"></image>
<span class="lotterypageturntableawards2name">{{ turntablePrizes[1].prizeName }}</span>
</div>
<div class="lotterypageturntableawards1" v-if="turntablePrizes.length > 0">
<span class="lotterypageturntableawards1selbg" v-if="isPrizeSelected(0) || isPrizeHighlighted(0)"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.lotterypageturntableawardsSelBg)})` }"></span>
<span class="lotterypageturntableawards1img"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awards1Img)})` }"></span>
<image class="lotterypageturntableawards1img"
:src="`${$baseUrl}${turntablePrizes[0].prizeImageUrl}`"
mode="aspectFit"
@error="console.log('奖品1图片加载失败')"></image>
<span class="lotterypageturntableawards1name">{{ turntablePrizes[0].prizeName }}</span>
</div>
</div>
</div>
<span class="lotterypagetitle"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.title)})` }"></span>
<span class="lotterypagerulebtn"
......@@ -78,7 +90,7 @@
<span class="lotterypagenoticeconsoundicon"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.noticeConSoundIcon)})` }"></span>
</div>
<span class="lotterypagedrawbtn"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.drawBtn)})` }"
@click="handleDrawClick" :class="{ 'disabled-draw-btn': !canDraw }"></span>
......@@ -88,7 +100,7 @@
<RuleModal :visible="showRuleModal" :rules="activityRules" :config="ruleModalConfig" @close="handleRuleModalClose" />
<!-- 抽奖成功弹窗 -->
<DrawSucModal :visible="showDrawSucModal" :award-name="currentAwardName" @close="handleDrawSucModalClose"
<DrawSucModal :visible="showDrawSucModal" :award-name="currentAwardName" :award-image-url="currentAwardImageUrl" @close="handleDrawSucModalClose"
@happy-get="handleHappyGet" />
<!-- 抽奖失败弹窗 -->
......@@ -130,6 +142,7 @@ const showRuleModal = ref(false) // 规则弹窗
const showDrawSucModal = ref(false) // 抽奖成功弹窗
const showDrawFailModal = ref(false) // 抽奖失败弹窗
const currentAwardName = ref('') // 当前中奖奖品名称
const currentAwardImageUrl = ref('') // 当前中奖奖品图片URL
// 配置对象
const config = lotteryConfig
......@@ -392,15 +405,15 @@ const handleDrawClick = async () => {
isDrawing.value = false
showDrawFailModal.value = true
}
} else {
} else {
uni.hideLoading()
isDrawing.value = false
uni.showToast({
title: response.msg || '抽奖失败',
icon: 'none'
})
}
} catch (error) {
}
} catch (error) {
console.error('getAct915LotteryDraw 接口请求失败:', error)
uni.hideLoading()
isDrawing.value = false
......@@ -445,8 +458,9 @@ const startHighlightAnimation = (targetIndex, isWin) => {
if (isWin) {
currentAwardName.value = turntablePrizes.value[targetIndex].prizeName
currentAwardImageUrl.value = turntablePrizes.value[targetIndex].prizeImageUrl
showDrawSucModal.value = true
} else {
} else {
showDrawFailModal.value = true
}
......
activity0915/lottery/lotterypage.less
View file @ 4f7e7e1a
......@@ -73,15 +73,13 @@
transform-origin: center;
}
.lotterypageturntableawards6bg {
width: 39rpx;
height: 106rpx;
left: 26rpx;
top: 0rpx;
.lotterypageturntableawards6img {
width: 100rpx;
height: 100rpx;
left: 10rpx;
top: 10rpx;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
object-fit: contain;
}
.lotterypageturntableawards6name {
......@@ -91,6 +89,9 @@
top: 125rpx;
position: absolute;
font-size: 18rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(0, 0, 0, 1);
text-align: center;
}
......@@ -116,25 +117,26 @@
transform-origin: center;
}
.lotterypageturntableawards5bg {
width: 78rpx;
height: 64rpx;
.lotterypageturntableawards5img {
width: 100rpx;
height: 100rpx;
left: 0rpx;
top: 0rpx;
top: -35rpx;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
object-fit: contain;
}
.lotterypageturntableawards5name {
width: 81rpx;
height: 18rpx;
left: 6rpx;
left: 16rpx;
top: 82rpx;
position: absolute;
font-size: 18rpx;
line-height: 18rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(0, 0, 0, 1);
text-align: center;
}
......@@ -160,15 +162,13 @@
transform-origin: center;
}
.lotterypageturntableawards4bg {
width: 39rpx;
height: 106rpx;
left: 26rpx;
.lotterypageturntableawards4img {
width: 100rpx;
height: 100rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
object-fit: contain;
}
.lotterypageturntableawards4name {
......@@ -178,6 +178,9 @@
top: 125rpx;
position: absolute;
font-size: 18rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(0, 0, 0, 1);
text-align: center;
}
......@@ -203,15 +206,13 @@
transform-origin: center;
}
.lotterypageturntableawards3bg {
width: 39rpx;
height: 106rpx;
left: 26rpx;
.lotterypageturntableawards3img {
width: 100rpx;
height: 100rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
object-fit: contain;
}
.lotterypageturntableawards3name {
......@@ -221,6 +222,9 @@
top: 125rpx;
position: absolute;
font-size: 18rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(0, 0, 0, 1);
text-align: center;
}
......@@ -247,14 +251,12 @@
}
.lotterypageturntableawards2img {
width: 39rpx;
height: 106rpx;
left: 27rpx;
top: 0rpx;
width: 100rpx;
height: 100rpx;
left: 0rpx;
top: 5rpx;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
object-fit: contain;
}
.lotterypageturntableawards2name {
......@@ -264,7 +266,10 @@
top: 125rpx;
position: absolute;
font-size: 18rpx;
color: rgba(0, 0, 0, 1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(0, 0, 0, 1);
text-align: center;
}
}
......@@ -290,14 +295,12 @@
}
.lotterypageturntableawards1img {
width: 39rpx;
height: 106rpx;
left: 27rpx;
top: 0rpx;
width: 100rpx;
height: 100rpx;
left: 0rpx;
top: 5rpx;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
object-fit: contain;
}
.lotterypageturntableawards1name {
......@@ -307,6 +310,9 @@
top: 125rpx;
position: absolute;
font-size: 18rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(0, 0, 0, 1);
text-align: center;
}
......@@ -454,8 +460,12 @@
.lotterypagelefttimes {
width: 136rpx;
height: 23rpx;
left: 312rpx;
left: 0rpx;
right: 0rpx;
margin: auto;
top: 1374rpx;
text-align: center;
white-space: nowrap;
position: absolute;
font-size: 24rpx;
line-height: 23rpx;
......
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