Commit eed47846 authored by lg's avatar lg

chore: temp

parent 58a3fa49
import requestModule from '@/api/request.js'
const {api} = requestModule
import {homeConfig} from "./home/config";
import {ActivityInfo, CodeResponse} from "@/activities/1015/types";
/**
* 获取页面配置
* @returns
*/
export function fetchPageConfig() {
//return api.get('/c/front/content', {type: 'act915',version: '1'})
return Promise.resolve({
data: homeConfig,
})
}
/**
* 获取抽奖配置
* @returns
*/
export function fetchLotteryConfig (){
return api.get('/c/front/content', {type: 'act915Lottery',version: '1'})
}
/**
* 获取915活动首页信息
* @returns
*/
export function fetchActivityInfo (){
return api.post('/c/activity/use_invite_915/invitation/home') as Promise<CodeResponse<ActivityInfo>>
}
/**
* 邀请助力
* @returns
*/
export function invitationAssist(inviterUserId, unionId) {
return api.post('/c/activity/use_invite_915/invitation/assist', {invitationCode: inviterUserId, wxUnionId: unionId})
}
/**
* 获取抽奖信息
* @returns
*/
export function fetchLotteryInfo (){
return api.get('/c/activity/turntable_lottery_915/home')
}
/**
* 抽奖
* @returns
*/
export function lotteryDraw (){
return api.post('/c/activity/turntable_lottery_915/lottery/draw')
}
<script setup lang="ts">
import {computed, inject} from 'vue'
import {jump} from '@/utils'
import {MdConfig} from "../types";
import {useMD} from "../use-md";
const props = defineProps<{
properties?: {
area?: { x: number, y: number, width: number, height: number }
link?: { type: number, url: string, extra: any }
mdConfig?: MdConfig
}
openType?: string
debugMode?: boolean
}>()
const pageName = inject('pageName', '')
const style = computed(() => {
const area = props.properties.area
return {
left: area.x + 'rpx',
top: area.y + 'rpx',
width: area.width + 'rpx',
height: area.height + 'rpx',
}
})
const {logClick} = useMD(props.properties.mdConfig || {})
const emit = defineEmits<{
(e: 'click', e: any): void
(e: 'getphonenumber', e: any): void
}>()
function onClick(e) {
emit('click', e)
if (props.properties.link) {
jump(props.properties.link)
}
logClick()
}
</script>
<template>
<button class="click-area" :class="{'debug-mode': debugMode}" :style="style"
:open-type="openType"
@click="onClick"
@getphonenumber="(e) => emit('getphonenumber', e)"
/>
</template>
<style scoped lang="less">
.click-area {
position: absolute;
border: none;
border-radius: 0;
&.debug-mode {
background-color: rgba(255, 0, 0, 0.3);
}
&::after {
border: none;
}
}
</style>
\ No newline at end of file
@import "@/common.less";
<template>
<view class="got-prize-modal" v-if="visible">
<!-- 蒙层 -->
<view class="got-prize-modal-mask" @click="handleCloseClick"></view>
.drawsucmodal {
<!-- 弹窗内容 -->
<view class="got-prize-modal-content">
<span class="got-prize-modal-bg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
<image class="got-prize-modal-awardimg" :src="`${$baseUrl}${awardImageUrl}`" mode="aspectFit"
v-if="awardImageUrl" @error="console.log('奖品图片加载失败')"></image>
<span class="got-prize-modal-awardname">{{ awardName }}</span>
<span class="got-prize-modal-happygetbtn"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.happyGetBtn)})` }"
@click="handleHappyGetClick"></span>
<span class="got-prize-modal-closebtn"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.closeBtn)})` }"
@click="handleCloseClick"></span>
</view>
</view>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {config, getImageUrl} from './GotPrizeModal/config.js'
import './GotPrizeModal/index.less'
export interface ShowGotPrizeModalOptions {
awardName: string
awardImageUrl: string
}
const visible = ref(false)
const options = ref<ShowGotPrizeModalOptions>()
// Emits
const emit = defineEmits<{
(e: 'close'): void
(e: 'confirm'): void
}>()
function show(options: ShowGotPrizeModalOptions) {
options.value = options
visible.value = true
}
function hide() {
visible.value = false
}
defineExpose({
show,
hide,
})
</script>
<style scoped>
.got-prize-modal {
width: 100vw;
height: 100vh;
left: 0rpx;
......@@ -12,7 +67,8 @@
justify-content: center;
// 蒙层
.drawsucmodal-mask {
&-mask {
width: 100%;
height: 100%;
position: absolute;
......@@ -21,7 +77,8 @@
}
// 弹窗内容
.drawsucmodal-content {
&-content {
width: 550rpx;
height: 616rpx;
position: relative;
......@@ -32,7 +89,7 @@
justify-content: center;
}
.drawsucmodalbg {
&-bg {
width: 550rpx;
height: 616rpx;
position: absolute;
......@@ -43,7 +100,7 @@
background-position: center;
}
.drawsucmodalawardimg {
&-awardimg {
width: 180rpx;
height: 180rpx;
position: absolute;
......@@ -53,7 +110,7 @@
z-index: 3;
}
.drawsucmodalawardname {
&-awardname {
width: 348rpx;
height: 30rpx;
position: absolute;
......@@ -68,7 +125,7 @@
white-space: nowrap;
}
.drawsucmodalhappygetbtn {
&-happygetbtn {
width: 465rpx;
height: 97rpx;
position: absolute;
......@@ -84,7 +141,7 @@
}
}
.drawsucmodalclosebtn {
&-closebtn {
width: 60rpx;
height: 59rpx;
position: absolute;
......@@ -100,3 +157,5 @@
}
}
}
</style>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {LinkType, MdConfig} from "../types"
import {useMD} from "../use-md"
import {jump} from '@/utils'
export interface ImageSwiperItem {
image: string
link?: LinkType
}
const props = defineProps<{
properties?: {
autoplay?: boolean
interval?: number
duration?: number
circular?: boolean
indicatorDots?: boolean
items: ImageSwiperItem[]
}
style?: Record<string, any>
}>()
const mds = ref([])
onMounted(() => {
mds.value = props.properties.items.map(item => {
const md = useMD(item.mdConfig || {}, false)
md.logExposure()
return md
})
})
function onClickItem(item: ImageSwiperItem, index: number) {
if (item.link) {
jump(item.link)
}
mds.value[index].logClick()
}
</script>
<template>
<swiper class="comp-swiper"
:style="style"
:indicator-dots="properties.indicatorDots"
:autoplay="properties.autoplay"
:circular="properties.circular"
:interval="properties.interval"
:duration="500">
<swiper-item v-for="(item, index) in properties.items" :key="index" @click="onClickItem(item, index)">
<image class="comp-swiper-item" :src="item.image" mode="aspectFill"></image>
</swiper-item>
</swiper>
</template>
<style scoped lang="less">
.comp-swiper {
&-item {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file
<script setup lang="ts">
import {ref, computed, watch, inject} from 'vue'
import ClickArea from "./ClickArea.vue";
import {ActivityInfo} from "../types"
import {invitationAssist} from "../api";
const isAssist = ref(false)
const isLogin = inject('isLogin')
const updateActivityInfo = inject('updateActivityInfo')
const onGetPhoneNumber = inject('onGetPhoneNumber')
const props = defineProps<{
properties?: {
area?: { x: number, y: number, width: number, height: number }
mdConfig?: MdConfig
}
activityData?: ActivityInfo
debugMode?: boolean
}>()
const inviteBtnProperties = computed(() => {
return {
area: {x: 220, y: 110, width: 165, height: 55},
mdConfig: props.properties.mdConfig,
}
})
const style = computed(() => {
const area = props.properties.area
return {
left: area.x + 'rpx',
top: area.y + 'rpx',
width: area.width + 'rpx',
height: area.height + 'rpx',
}
})
watch(() => props.activityData, (activityData) => {
if (activityData) {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const options = currentPage.options;
const invitationCode = options.invitationCode;
if (invitationCode && !isAssist.value && isLogin.value) {
handleInvitationAssist(invitationCode);
}
}
})
// 处理邀请助力的通用函数
const handleInvitationAssist = async (incomingCode) => {
try {
console.log('处理助力邀请码:', incomingCode)
const unionId = uni.getStorageSync('unionId');
const res = await invitationAssist(incomingCode, unionId);
if (res && res.success) {
uni.showToast({
title: '助力成功',
icon: 'none',
duration: 2000
});
isAssist.value = true;
// 助力成功后重新获取数据
await updateActivityInfo();
return Promise.resolve();
} else {
uni.showToast({
title: res.message,
icon: 'none',
duration: 2000
});
return Promise.reject();
}
} catch (error) {
console.error('助力请求失败:', error)
uni.showToast({
title: error.message,
icon: 'none',
duration: 2000
});
return Promise.reject();
}
}
function clickInvite() {
}
</script>
<template>
<view class="invite-task" :class="{'debug-mode': debugMode}" :style="style">
<ClickArea
:properties="inviteBtnProperties"
:open-type="isLogin ? 'share' : 'getPhoneNumber'"
@click="clickInvite"
@getphonenumber="onGetPhoneNumber"
debug-mode
/>
</view>
</template>
<style scoped lang="less">
.invite-task {
position: absolute;
&.debug-mode {
background-color: rgba(255, 0, 0, 0.3);
}
}
</style>
\ No newline at end of file
This diff is collapsed.
// 加载状态样式
.loading-container {
.activity-page {
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;
height: calc(4937rpx + 845rpx);
position: relative;
max-width: 100vw; // 确保不超过视口宽度
overflow-x: hidden; // 防止水平滚动
background-size: contain;
background-repeat: no-repeat;
background-position: left 845rpx;
// 返回按钮样式
.nav-left {
......@@ -35,420 +20,4 @@
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;
}
}
}
This diff is collapsed.
......@@ -51,7 +51,9 @@ activity0915/lottery/
## 使用方法
### 在主页面中引入组件
```vue
<template>
<view class="lotterypage">
<!-- 主页面内容 -->
......@@ -80,38 +82,38 @@ activity0915/lottery/
</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 = () => {
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 = () => {
const handleDrawSucModalClose = () => {
showDrawSucModal.value = false
}
}
const handleHappyGet = () => {
const handleHappyGet = () => {
showDrawSucModal.value = false
// 处理奖品领取逻辑
}
}
const handleDrawFailModalClose = () => {
const handleDrawFailModalClose = () => {
showDrawFailModal.value = false
}
}
const handleIKnow = () => {
const handleIKnow = () => {
showDrawFailModal.value = false
// 处理失败确认逻辑
}
}
</script>
```
......
......@@ -3,9 +3,9 @@ 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`
background: `act1015Component/DrawFailModal/${version}/DrawFailModalBg.png`,
iKnowBtn: `act1015Component/DrawFailModal/${version}/DrawFailModalBgIKnowBtn.png`,
closeBtn: `act1015Component/DrawFailModal/${version}/DrawFailModalBgCloseBtn.png`
},
// 文本配置
......
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
}
<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>
const version = 'v1'
// 活动规则弹窗配置
export const act915RuleModalConfig = {
export const act1015RuleModalConfig = {
// 图片配置
images: {
background: `Act915Component/Act915RuleModal/${version}/Act915RuleModalBg.png`,
textImg: `Act915Component/Act915RuleModal/${version}/Act915RuleModalTextImg.png`,
closeBtn: `Act915Component/Act915RuleModal/${version}/Act915RuleModalCloseBtn.png`
background: `act1015Component/act1015RuleModal/${version}/act1015RuleModalBg.png`,
textImg: `act1015Component/act1015RuleModal/${version}/act1015RuleModalTextImg.png`,
closeBtn: `act1015Component/act1015RuleModal/${version}/act1015RuleModalCloseBtn.png`
},
// 文本配置
......
......@@ -25,7 +25,7 @@
</template>
<script setup>
import { act915RuleModalConfig, getImageUrl } from './config.js'
import { act1015RuleModalConfig, getImageUrl } from './config.js'
import { getCurrentInstance } from 'vue'
// 组件名称
......@@ -57,7 +57,7 @@ const props = defineProps({
const emit = defineEmits(['close'])
// 配置对象
const config = act915RuleModalConfig
const config = act1015RuleModalConfig
// 获取规则图片URL
const getRuleImgUrl = () => {
......
......@@ -109,8 +109,8 @@
@close="handleRuleModalClose" />
<!-- 抽奖成功弹窗 -->
<DrawSucModal :visible="showDrawSucModal" :award-name="currentAwardName"
:award-image-url="currentAwardImageUrl" @close="handleDrawSucModalClose" @happy-get="handleHappyGet" />
<GotPrizeModal :visible="showGotPrizeModal" :award-name="currentAwardName"
:award-image-url="currentAwardImageUrl" @close="handleGotPrizeModalClose" @happy-get="handleHappyGet" />
<!-- 抽奖失败弹窗 -->
<DrawFailModal :visible="showDrawFailModal" @close="handleDrawFailModalClose" @i-know="handleIKnow" />
......@@ -122,9 +122,9 @@
import { ref, onMounted, computed, getCurrentInstance, onUnmounted } from 'vue'
import { lotteryConfig, getImageUrl } from './config.js'
import RuleModal from './components/ruleModal/ruleModal.vue'
import DrawSucModal from './components/drawSucModal/drawSucModal.vue'
import GotPrizeModal from '../components/GotPrizeModal.vue'
import DrawFailModal from './components/drawFailModal/drawFailModal.vue'
import { getAct915LotteryDraw, getAct915LotteryInfo, fetchAct915LotteryJSON } from '@/api/activity0915/index.js'
import { lotteryDraw, fetchLotteryInfo, fetchLotteryConfig } from '../api.ts'
import md from '@/md.js'
import { jump, JumpType } from '@/utils/index.js'
......@@ -151,7 +151,7 @@ const isResetting = ref(false) // 是否正在重置轮播位置
// 弹窗状态
const showRuleModal = ref(false) // 规则弹窗
const showDrawSucModal = ref(false) // 抽奖成功弹窗
const showGotPrizeModal = ref(false) // 抽奖成功弹窗
const showDrawFailModal = ref(false) // 抽奖失败弹窗
const currentAwardName = ref('') // 当前中奖奖品名称
const currentAwardImageUrl = ref('') // 当前中奖奖品图片URL
......@@ -340,7 +340,7 @@ const handleAwardClick = () => {
const loadRuleModalConfig = async () => {
try {
console.log('开始请求 fetchAct915LotteryJSON 接口...')
const response = await fetchAct915LotteryJSON()
const response = await fetchLotteryConfig()
console.log('fetchAct915LotteryJSON 接口返回结果:', response)
if (response && response.ok && response.data) {
......@@ -358,7 +358,7 @@ const loadRuleModalConfig = async () => {
const loadLotteryInfo = async () => {
try {
console.log('开始请求 getAct915LotteryInfo 接口...')
const response = await getAct915LotteryInfo()
const response = await fetchLotteryInfo()
console.log('getAct915LotteryInfo 接口返回结果:', response)
if (response && response.ok) {
......@@ -450,7 +450,7 @@ const handleDrawClick = async () => {
// })
try {
const response = await getAct915LotteryDraw()
const response = await lotteryDraw()
console.log('getAct915LotteryDraw 接口返回结果:', response)
if (response && response.ok) {
......@@ -523,7 +523,7 @@ const startHighlightAnimation = (targetIndex, isWin) => {
if (isWin) {
currentAwardName.value = turntablePrizes.value[targetIndex].prizeName
currentAwardImageUrl.value = turntablePrizes.value[targetIndex].prizeImageUrl
showDrawSucModal.value = true
showGotPrizeModal.value = true
} else {
showDrawFailModal.value = true
}
......@@ -547,14 +547,14 @@ const startHighlightAnimation = (targetIndex, isWin) => {
}
// 抽奖成功弹窗关闭处理
const handleDrawSucModalClose = () => {
showDrawSucModal.value = false
const handleGotPrizeModalClose = () => {
showGotPrizeModal.value = false
}
// 开心领取处理
const handleHappyGet = () => {
console.log('点击开心领取')
showDrawSucModal.value = false
showGotPrizeModal.value = false
// uni.showToast({
// title: '奖品领取成功',
// icon: 'success'
......
export enum JumpType {
INNER = 1, // 内部小程序页面跳转
MINI = 2, // 其他小程序页面跳转
H5 = 3, // https 网络连接跳转
}
export interface LinkType {
type: JumpType
url: string
extra?: Record<string, any>
}
export interface MdConfig {
pageName: string
componentName: string
componentContent: string
logExposure?: boolean
logClick?: boolean
}
export interface CodeResponse<T> {
code: number
message: string
data: T
success: boolean
ok: boolean
}
export interface Prize{
prizeName: string
prizeImageUrl: string
}
export interface ActivityInfo {
invitationCode: string
invitationText: string
invitationImageUrl: string
invitedCount: number
nextRewardNeedCount: number
unclaimedPrizes: Prize[]
receivedPrizes: Prize[]
}
import {onMounted} from 'vue'
import md from '@/md.js'
import {MdConfig} from "./types";
export function useMD(mdConfig: MdConfig, autoLogExposure = true) {
function logExposure() {
const {pageName, componentName, componentContent} = mdConfig || {}
if (!pageName || !componentName || !componentContent) {
return
}
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName,
componentName,
componentContent,
})
}
function logClick() {
const {pageName, componentName, componentContent} = mdConfig || {}
if (!pageName || !componentName || !componentContent) {
return
}
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName,
componentName,
componentContent,
})
}
if (autoLogExposure) {
onMounted(() => {
if (mdConfig?.logExposure) {
logExposure()
}
})
}
return {
logClick,
logExposure,
}
}
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"allowJs": true,
"skipLibCheck": true,
"baseUrl": ".",
"paths": {
"@/*": ["../*"]
},
"lib": ["DOM", "ESNext"]
}
}
......@@ -105,13 +105,13 @@ const sensorComponentLog = (evt) => {
trackObj[key] = logObj[key];
}
if (xcxComponentExposure && xcxComponentExposure.length > 0) {
console.warn("-----exposure-----", trackObj);
console.warn("💡 %s / %s / %s", trackObj.pageName, trackObj.componentName, trackObj.componentContent);
sensors.track("xcxComponentExposure", {
...trackObj,
});
}
if (xcxComponentClick && xcxComponentClick.length > 0) {
console.warn("-----click-----", trackObj);
console.warn("🖱 %s / %s / %s", trackObj.pageName, trackObj.componentName, trackObj.componentContent);
sensors.track("xcxComponentClick", {
...trackObj,
});
......
This diff is collapsed.
......@@ -284,7 +284,8 @@
"navigationBarTitleText": "",
"shareAppMessage": true,
"shareTimeline": false,
"navigationStyle": "custom"
"navigationStyle": "custom",
"backgroundColor": "#FBE8C2"
}
},
{
......
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