Skip to content

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

chore: temp

parent eed47846
Hide whitespace changes
Inline Side-by-side
Showing with 1249 additions and 1569 deletions
activities/1015/api.ts
View file @ a594b3c2
import requestModule from '@/api/request.js'
const {api} = requestModule
import {homeConfig} from "./home/config";
import {ActivityInfo, CodeResponse} from "@/activities/1015/types";
import {homeConfig} from "./mock-configs";
import {InvitationInfo, CodeResponse} from "@/activities/1015/types";
/**
* 获取页面配置
......@@ -10,7 +10,7 @@ import {ActivityInfo, CodeResponse} from "@/activities/1015/types";
export function fetchPageConfig() {
//return api.get('/c/front/content', {type: 'act915',version: '1'})
return Promise.resolve({
data: homeConfig,
data: homeConfig(),
})
}
......@@ -23,11 +23,11 @@ export function fetchLotteryConfig (){
}
/**
* 获取915活动首页信息
* 获取邀请助力组件信息
* @returns
*/
export function fetchActivityInfo (){
return api.post('/c/activity/use_invite_915/invitation/home') as Promise<CodeResponse<ActivityInfo>>
export function fetchInvitationInfo (){
return api.post('/c/activity/use_invite_101/invitation/home') as Promise<CodeResponse<InvitationInfo>>
}
/**
......@@ -35,7 +35,7 @@ export function fetchActivityInfo (){
* @returns
*/
export function invitationAssist(inviterUserId, unionId) {
return api.post('/c/activity/use_invite_915/invitation/assist', {invitationCode: inviterUserId, wxUnionId: unionId})
return api.post('/c/activity/use_invite_101/invitation/assist', {invitationCode: inviterUserId, wxUnionId: unionId})
}
/**
......@@ -43,7 +43,7 @@ export function invitationAssist(inviterUserId, unionId) {
* @returns
*/
export function fetchLotteryInfo (){
return api.get('/c/activity/turntable_lottery_915/home')
return api.get('/c/activity/turntable_lottery_101/home')
}
/**
......@@ -51,5 +51,5 @@ export function fetchLotteryInfo (){
* @returns
*/
export function lotteryDraw (){
return api.post('/c/activity/turntable_lottery_915/lottery/draw')
return api.post('/c/activity/turntable_lottery_101/lottery/draw')
}
activities/1015/components/GotPrizeModal.vue
View file @ a594b3c2
<template>
<view class="got-prize-modal" v-if="visible">
<!-- 蒙层 -->
<view class="got-prize-modal-mask" @click="handleCloseClick"></view>
<!-- 弹窗内容 -->
<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 class="content">
<p class="title">
{{showOptions?.awardImageUrl ? '恭喜您获得了' : '很遗憾未中奖'}}</p>
<image v-if="showOptions?.awardImageUrl" class="prize-image"
:src="showOptions?.awardImageUrl" mode="aspectFit"
@error="console.log('奖品图片加载失败')"/>
<span class="prize-name">
{{ showOptions?.awardImageUrl ? showOptions?.awardName : '别灰心，再试试吧～' }}
</span>
<button class="confirm-btn" @click="onClickConfirm">
{{ showOptions?.awardImageUrl ? '开心收下' : '我知道了' }}
</button>
<p v-if="showOptions?.awardImageUrl" class="tips">奖品可在首页 我的奖品 中查看</p>
<span class="close-btn"
:style="{ backgroundImage: `url(${closeBtnUrl})` }"
@click="onClickClose"/>
</view>
</view>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {config, getImageUrl} from './GotPrizeModal/config.js'
import './GotPrizeModal/index.less'
import closeBtnUrl from '@/assets/images/close-btn.png'
export interface ShowGotPrizeModalOptions {
awardName: string
awardImageUrl: string
prizeName: string
prizeImageUrl: string
}
const visible = ref(false)
const options = ref<ShowGotPrizeModalOptions>()
const showOptions = ref<ShowGotPrizeModalOptions>()
// Emits
const emit = defineEmits<{
......@@ -40,7 +41,7 @@ const emit = defineEmits<{
}>()
function show(options: ShowGotPrizeModalOptions) {
options.value = options
showOptions.value = options
visible.value = true
}
......@@ -48,13 +49,23 @@ function hide() {
visible.value = false
}
function onClickConfirm() {
hide()
emit('confirm')
}
function onClickClose() {
hide()
emit('close')
}
defineExpose({
show,
hide,
})
</script>
<style scoped>
<style scoped lang="less">
.got-prize-modal {
width: 100vw;
height: 100vh;
......@@ -65,95 +76,81 @@ defineExpose({
display: flex;
align-items: center;
justify-content: center;
// 蒙层
&-mask {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
background-color: rgba(0, 0, 0, 0.5);
// 弹窗内容
&-content {
width: 550rpx;
height: 616rpx;
.content {
position: relative;
z-index: 2;
width: 550rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
background-color: white;
gap: 48rpx;
border-radius: 48rpx;
padding: 56rpx 48rpx 64rpx;
.title {
color: #bc7900;
font-weight: bold;
font-size: 44rpx;
}
&-bg {
width: 550rpx;
height: 616rpx;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.prize-image {
width: 187rpx;
height: 187rpx;
border-radius: 18px;
object-fit: contain;
z-index: 3;
background-color: #fff9f1;
}
&-awardimg {
width: 180rpx;
height: 180rpx;
position: absolute;
top: 150rpx;
left: 185rpx;
object-fit: contain;
z-index: 3;
}
.prize-name {
width: 348rpx;
height: 30rpx;
font-size: 34rpx;
line-height: 30rpx;
color: rgba(0, 0, 0, 1);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-awardname {
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;
}
.confirm-btn {
width: 100%;
height: 97rpx;
color: white;
background: #d3a357;
border-radius: 100rpx;
&-happygetbtn {
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;
&::after {
border: none;
}
}
.tips{
text-align: center;
position: absolute;
left: 0;
bottom: 24rpx;
width: 100%;
font-size: 24rpx;
color: #3b3b3b;
}
}
&-closebtn {
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;
.close-btn {
width: 60rpx;
height: 59rpx;
position: absolute;
left: 50%;
bottom: -100rpx;
transform: translateX(-50%);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: opacity 0.3s ease;
}
}
}
......
activities/1015/components/InviteTask.vue
View file @ a594b3c2
<script setup lang="ts">
import {ref, computed, watch, inject} from 'vue'
import {ref, computed, inject, onMounted} from 'vue'
import ClickArea from "./ClickArea.vue";
import {ActivityInfo} from "../types"
import {invitationAssist} from "../api";
import {InvitationInfo} from "../types"
import {getCdnUrl} from "../utils"
import {fetchInvitationInfo, invitationAssist} from "../api";
import GotPrizeModal from "./GotPrizeModal.vue";
const isAssist = ref(false)
const invitationInfo = ref<InvitationInfo>()
const gotPrizeModalRef = ref<InstanceType<typeof GotPrizeModal>>()
const isLogin = inject('isLogin')
const updateActivityInfo = inject('updateActivityInfo')
const updateShareData = inject('updateShareData')
const onGetPhoneNumber = inject('onGetPhoneNumber')
const props = defineProps<{
......@@ -15,15 +18,11 @@ const props = defineProps<{
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 isLogin = computed(() => {
return !invitationInfo.value?.notLogin
})
const style = computed(() => {
......@@ -36,71 +35,105 @@ const style = computed(() => {
}
})
watch(() => props.activityData, (activityData) => {
if (activityData) {
const inviteBtnProperties = computed(() => {
return {
area: {x: 220, y: 110, width: 165, height: 55},
mdConfig: props.properties.mdConfig,
}
})
async function updateInvitationInfo() {
const resp = await fetchInvitationInfo()
return invitationInfo.value = resp.data
}
async function tryAssist() {
if (invitationInfo) {
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);
}
}
})
console.log('处理助力邀请码:', incomingCode)
try {
const unionId = uni.getStorageSync('unionId');
// 处理邀请助力的通用函数
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();
const res = await invitationAssist(incomingCode, unionId);
if (res && res.success) {
uni.showToast({
title: '助力成功',
icon: 'none',
duration: 2000
});
isAssist.value = true;
// 助力成功后重新获取数据
await updateInvitationInfo();
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();
}
}
} catch (error) {
console.error('助力请求失败:', error)
uni.showToast({
title: error.message,
icon: 'none',
duration: 2000
});
return Promise.reject();
}
}
function clickInvite() {
onMounted(async () => {
await updateInvitationInfo()
}
updateShareData({
path: '/activities/1015/home/index?invitationCode=' + invitationInfo.value.invitationCode,
})
const {unclaimedPrizes} = invitationInfo.value
if (unclaimedPrizes.value?.length > 0) {
const totalQuantity = unclaimedPrizes.value.reduce((sum, prize) => sum + (prize.quantity || 1), 0)
const firstPrize = unclaimedPrizes.value[0]
gotPrizeModalRef.value.show({
prizeName: `${firstPrize.prizeName} × ${totalQuantity}`,
prizeImageUrl: firstPrize.prizeImageUrl,
})
}
await tryAssist()
})
</script>
<template>
<view class="invite-task" :class="{'debug-mode': debugMode}" :style="style">
<view class="avatars">
<template
v-for="i in 2">
<image
v-if="i-1 < 2 - invitationInfo.nextRewardNeedCount"
class="avatar"
:src="getCdnUrl('home/icon-fill.png')"
/>
</template>
</view>
<ClickArea
:properties="inviteBtnProperties"
:open-type="isLogin ? 'share' : 'getPhoneNumber'"
@click="clickInvite"
@getphonenumber="onGetPhoneNumber"
debug-mode
:debug-mode="debugMode"
/>
</view>
<GotPrizeModal ref="gotPrizeModalRef"/>
</template>
<style scoped lang="less">
......@@ -110,5 +143,18 @@ function clickInvite() {
&.debug-mode {
background-color: rgba(255, 0, 0, 0.3);
}
.avatars{
position: absolute;
left: 24rpx;
top: 108rpx;
display: flex;
gap: 25rpx;
.avatar{
width: 63rpx;
height: 63rpx;
}
}
}
</style>
\ No newline at end of file
activities/1015/home/index.vue → activities/1015/home.vue
View file @ a594b3c2
......@@ -2,7 +2,7 @@
<view class="activity-page" v-if="!loading" :style="bgStyle">
<!-- 返回按钮 -->
<view class="nav-left">
<image class="back-btn" src="@/assets/images/backBtn.png" mode="aspectFit"
<image class="back-btn" src="@/assets/images/back-btn.png" mode="aspectFit"
@click="handleBack"/>
</view>
......@@ -10,52 +10,40 @@
<ImageSwiper
v-if="component.type === 'image-swiper'"
v-bind="component"
:activity-data="activityInfo"
/>
<ClickArea
v-else-if="component.type === 'click-area'"
v-bind="component"
debug-mode
:activity-data="activityInfo"
/>
<InviteTask
v-else-if="component.type === 'invite-task'"
v-bind="component"
:debug-mode="false"
:activity-data="activityInfo"
:debug-mode="true"
/>
</template>
<GotPrizeModal :visible="showGotPrizeModal" :award-name="currentAwardName" :award-image-url="currentAwardImageUrl"
@close="handleGotPrizeModalClose" @happy-get="handleHappyGet"/>
@close="handleGotPrizeModalClose" @happy-get="handleHappyGet"/>
</view>
</template>
<script setup lang="ts">
import {ref, onMounted, computed, getCurrentInstance, provide} from 'vue'
import {fetchPageConfig, fetchActivityInfo, invitationAssist} from '../api.ts'
import {fetchPageConfig} from './api.ts'
import {useHomeStore} from '@/stores/home'; // Assuming homeStore path
import {useUserStore} from '@/stores/user'; // Import userStore
import {jump, JumpType} from '@/utils/index.js'; // Import jump function
import GotPrizeModal from '../components/GotPrizeModal.vue'; // Import GotPrizeModal if needed
import md from '@/md.js';
import ClickArea from "../components/ClickArea.vue";
import ImageSwiper from "../components/ImageSwiper.vue";
import './index.less'
import InviteTask from "../components/InviteTask.vue";
import {ActivityInfo} from "../types";
import GotPrizeModal from './components/GotPrizeModal.vue'; // Import GotPrizeModal if needed
import ClickArea from "./components/ClickArea.vue";
import ImageSwiper from "./components/ImageSwiper.vue";
import InviteTask from "./components/InviteTask.vue";
// 响应式数据
const pageConfig = ref({}) // 配置对象
const loading = ref(true) // 加载状态
// 邀请相关数据
const showGotPrizeModal = ref(true);
const currentAwardName = ref('');
const currentAwardImageUrl = ref('');
const isLogin = ref(false);
const activityInfo = ref<ActivityInfo>(undefined)
const shareData = ref({
title: '星妈会超级品牌周来啦！',
imageUrl: 'https://course.feihe.com/momclub-picture/Act915Page/v2/act915ShareImg.png',
......@@ -67,7 +55,7 @@ const homeStore = useHomeStore();
const userStore = useUserStore();
function updateShareData(data) {
shareData.value = data
Object.assign(shareData.value, data)
}
// 获取背景样式的辅助函数
......@@ -95,18 +83,15 @@ const getShareData = (type) => {
const {title, imageUrl, path} = shareData.value
const sharePath = type.from == 'button' ? `${path}?invitationCode=${invitationCode.value}` : path
console.log('分享参数:', {
title,
path: sharePath,
path,
imageUrl,
invitationCode: invitationCode.value,
})
return {
title,
path: sharePath,
path,
imageUrl,
}
}
......@@ -152,57 +137,6 @@ const updatePageConfig = async () => {
}
}
const updateActivityInfo = async () => {
try {
console.log('开始请求 fetchActivityInfo 接口...')
const response = await fetchActivityInfo()
console.log('fetchActivityInfo 接口返回结果:', response)
if (response && response.ok && response.data) {
const data = response.data
activityInfo.value = data
isLogin.value = !data.notLogin
invitationCode.value = data.invitationCode
}
return response
} catch (error) {
console.error('getAct915Home 接口请求失败:', error)
return null
}
}
// 显示奖品弹窗
const showPrizeModal = () => {
if (unclaimedPrizes.value.length > 0) {
// 计算总奖品数量
const totalQuantity = unclaimedPrizes.value.reduce((sum, prize) => sum + (prize.quantity || 1), 0)
const firstPrize = unclaimedPrizes.value[0]
currentAwardName.value = `${firstPrize.prizeName} × ${totalQuantity}`
currentAwardImageUrl.value = firstPrize.prizeImageUrl
showGotPrizeModal.value = true
}
}
const handleLotteryClick = () => {
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "1015专题活动首页",
componentName: "中部抽奖banner",
componentContent: "中部抽奖banner"
});
// 从配置中获取抽奖banner链接
const lotteryLink = pageConfig.value?.lottery?.link
if (lotteryLink) {
jump(lotteryLink)
} else {
uni.navigateTo({
url: '/activity01015/lottery/lottery'
})
}
}
// 页面初始化逻辑
const initPage = async () => {
console.log('开始初始化页面...')
......@@ -211,13 +145,6 @@ const initPage = async () => {
await updatePageConfig()
console.log('配置数据:', pageConfig.value)
// 请求 getAct915Home 接口（包含助力逻辑处理）
await updateActivityInfo();
if (unclaimedPrizes.value?.length > 0) {
showPrizeModal()
}
}
// 生命周期
......@@ -261,7 +188,7 @@ const onGetPhoneNumber = async (e) => {
// 隐藏授权弹窗
userStore.phoneCallback(e.detail, null, null, async () => {
// 重新获取用户信息（登录后）
await updateActivityInfo();
// todo 更新组件状态
console.warn('授权后重新获取用户信息')
}, {
......@@ -278,31 +205,13 @@ const onGetPhoneNumber = async (e) => {
}
};
// 抽奖成功弹窗关闭处理
const handleGotPrizeModalClose = () => {
console.log('关闭抽奖成功弹窗');
showGotPrizeModal.value = false;
};
// 开心领取处理
const handleHappyGet = () => {
console.log('点击开心领取');
showGotPrizeModal.value = false;
// uni.showToast({
// title: '奖品领取成功',
// icon: 'success'
// });
};
// 暴露给 Options API 使用
defineExpose({
getShareData
})
provide('pageName', '1015专题活动首页')
provide('isLogin', isLogin)
provide('updateShareData', updateShareData)
provide('updateActivityInfo', updateActivityInfo)
provide('onGetPhoneNumber', onGetPhoneNumber)
</script>
......@@ -319,3 +228,29 @@ export default {
},
}
</script>
<style scoped lang="less">
.activity-page {
width: 750rpx;
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 {
position: fixed;
top: 100rpx;
left: 30rpx;
z-index: 999;
.back-btn {
width: 60rpx;
height: 60rpx;
}
}
}
</style>
activities/1015/home/config.js deleted 100644 → 0
View file @ eed47846
import bgUrl from '../images/bg.png'
import banner0Url from '../images/banner-0.png'
import banner1Url from '../images/banner-1.png'
const pageName = '1015专题活动页面'
// 页面配置
export const homeConfig = {
"background": {
image: bgUrl,
style: {
backgroundPosition: {y: "calc(4937rpx + 845rpx)"}
}
},
shareConfig: {
title: '星妈会超级品牌周来啦！',
path: '/activities/1015/home/index',
imageUrl: 'https://course.feihe.com/momclub-picture/Act915Page/v2/act915ShareImg.png',
},
components: [
{
type: "image-swiper",
properties: {
autoplay: true,
interval: 3000,
duration: 500,
circular: true,
indicatorDots: true,
items: [{
image: banner0Url,
mdConfig: {
pageName,
componentName: "banner头图",
componentContent: "北纬47 °",
logExposure: true,
},
}, {
image: banner1Url,
mdConfig: {
pageName,
componentName: "banner头图",
componentContent: "国际大米节金奖",
logExposure: true,
},
link: {
type: 2,
url: "subPackages/shopMainProcess/product/index?productId=643246351932056828&skuId=643246351932056829&entrySource=xmh_wechatmp_activity_1015ppz",
extra: {envVersion: "release", appId: "wx4205ec55b793245e"},
}
}]
},
style: {
height: "845rpx",
}
},
{
type: "click-area",
properties: {
area: {x: 35, y: 915, width: 685, height: 245},
mdConfig: {
pageName,
componentName: "商品banner",
componentContent: "商品banner",
logExposure: true,
logClick: true,
},
link: {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=720448018529899563&skuId=720448018529899564&entrySource=xmh_wechatmp_activity_1015ppz"
},
},
},
{
type: "click-area",
properties: {
area: {x: 50, y: 2095, width: 320, height: 390},
mdConfig: {
pageName,
componentName: "品牌宣传1",
componentContent: "商品名称1",
logExposure: true,
logClick: true,
},
link: {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=643246351932056828&skuId=643246351932056829&entrySource=xmh_wechatmp_activity_1015ppz"
},
}
},
{
type: "click-area",
properties: {
area: {x: 380, y: 2095, width: 320, height: 390},
mdConfig: {
pageName,
componentName: "品牌宣传1",
componentContent: "商品名称2",
logExposure: true,
logClick: true,
},
link: {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=643245114369684591&skuId=643245114369684592&entrySource=xmh_wechatmp_activity_1015ppz"
},
}
},
{
type: "click-area",
properties: {
area: {x: 50, y: 3405, width: 320, height: 390},
mdConfig: {
pageName,
componentName: "品牌宣传2",
componentContent: "商品名称1",
logExposure: true,
logClick: true,
},
link: {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=368848644886521333&skuId=368848644886521334&entrySource=xmh_wechatmp_activity_1015ppz"
},
}
},
{
type: "click-area",
properties: {
area: {x: 380, y: 3405, width: 320, height: 390},
mdConfig: {
pageName,
componentName: "品牌宣传2",
componentContent: "商品名称2",
logExposure: true,
logClick: true,
},
link: {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=367056951412568222&skuId=367056951412568223&entrySource=xmh_wechatmp_activity_1015ppz"
},
}
},
{
type: "invite-task",
properties: {
area: {x: 35, y: 3865, width: 685, height: 195},
mdConfig: {
pageName,
componentName: "邀请得好礼",
componentContent: "立即邀请",
logExposure: true,
logClick: true,
},
},
},
{
type: "click-area",
properties: {
area: {x: 35, y: 4080, width: 685, height: 245},
mdConfig: {
pageName,
componentName: "中部抽奖banner",
componentContent: "中部抽奖banner",
logExposure: true,
logClick: true,
},
link: {
"type": 1,
"url": "/activities/1015/lottery/index"
},
},
},
{
"type": "click-area",
"properties": {
"area": {"x": 50, "y": 4405, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品1",
componentContent: "商品1",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=643243579803297229&skuId=643243579803297230&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 270, "y": 4405, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品1",
componentContent: "商品2",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=367070126091559975&skuId=367070126091559976&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 490, "y": 4405, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品1",
componentContent: "商品3",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=367072891644670759&skuId=367072891644670760&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 50, "y": 4705, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品1",
componentContent: "商品4",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=649435440113431085&skuId=649435440113431086&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 270, "y": 4705, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品1",
componentContent: "商品5",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=662389781175669644&skuId=662389781175669645&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 490, "y": 4705, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品1",
componentContent: "商品6",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=759248536249386165&skuId=759248536249386166&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 50, "y": 5110, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品2",
componentContent: "商品1",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=399302177175705120&skuId=399302177175705121&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 270, "y": 5110, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品2",
componentContent: "商品2",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=650599779914081413&skuId=650599779914081414&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 490, "y": 5110, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品2",
componentContent: "商品3",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=667527760599458548&skuId=667527760599458549&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 50, "y": 5410, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品2",
componentContent: "商品4",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=548984197069284758&skuId=548984197069284759&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 270, "y": 5410, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品2",
componentContent: "商品5",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=792232869316748776&skuId=792232869316748777&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 490, "y": 5410, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品2",
componentContent: "商品6",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=704050114989893289&skuId=704050114989893290&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
],
"lottery": {
"image": "act1015Page/v3/act1015PageLotteryBanner.png",
"link": {"type": 1, "url": "/activity0915/lottery/lottery"}
},
"invite": {
"image": "act1015Page/v3/act1015PageInviteConBg.png",
"link": {"type": 1, "url": "/pages/invite/invite"},
"inviteConStatusNo1Img": "act1015Page/v3/act1015PageInviteConStatusNo.png",
"inviteConStatusYes2Img": "act1015Page/v3/act1015PageInviteConStatusYes.png",
"inviteConStatusYes1Img": "act1015Page/v3/act1015PageInviteConStatusYes.png",
"inviteConStatusNo2Img": "act1015Page/v3/act1015PageInviteConStatusNo.png"
}
}
//console.log('page-config:', JSON.stringify(act1015Config, null, 2))
// 获取图片URL的工具函数
export const getImageUrl = (imagePath) => {
return imagePath
}
activities/1015/home/index.less deleted 100644 → 0
View file @ eed47846
.activity-page {
width: 750rpx;
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 {
position: fixed;
top: 100rpx;
left: 30rpx;
z-index: 999;
.back-btn {
width: 60rpx;
height: 60rpx;
}
}
}
activities/1015/lottery/README.md deleted 100644 → 0
View file @ eed47846
# 抽奖页面弹窗组件
## 组件结构
```
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 deleted 100644 → 0
View file @ eed47846
const version = 'v1'
// 抽奖失败弹窗配置
export const drawFailModalConfig = {
// 图片配置
images: {
background: `act1015Component/DrawFailModal/${version}/DrawFailModalBg.png`,
iKnowBtn: `act1015Component/DrawFailModal/${version}/DrawFailModalBgIKnowBtn.png`,
closeBtn: `act1015Component/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 deleted 100644 → 0
View file @ eed47846
<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 deleted 100644 → 0
View file @ eed47846
@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/ruleModal/config.js
View file @ a594b3c2
const version = 'v1'
const baseUrl = 'http://127.0.0.1:8080/activity/1015'
export const getCdnUrl = (path) => `${baseUrl}/${version}/${path}`
import closeBtnUrl from '@/assets/images/close-btn.png'
// 活动规则弹窗配置
export const act1015RuleModalConfig = {
// 图片配置
images: {
background: `act1015Component/act1015RuleModal/${version}/act1015RuleModalBg.png`,
textImg: `act1015Component/act1015RuleModal/${version}/act1015RuleModalTextImg.png`,
closeBtn: `act1015Component/act1015RuleModal/${version}/act1015RuleModalCloseBtn.png`
closeBtn: closeBtnUrl
},
// 文本配置
......
activities/1015/lottery/components/ruleModal/ruleModal.vue
View file @ a594b3c2
......@@ -5,9 +5,8 @@
<!-- 弹窗内容 -->
<view class="rulemodal-content">
<span class="rulemodalbg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
<p class="rulemodal-title">活动规则</p>
<!-- 规则内容区域 - 支持滚动 -->
<view class="rulemodal-text-container">
<image class="rulemodaltextimg"
......@@ -16,9 +15,9 @@
@load="console.log('规则图片加载成功')"
@error="console.log('规则图片加载失败')"></image>
</view>
<span class="rulemodalclosebtn"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.closeBtn)})` }"
:style="{ backgroundImage: `url(${getImageUrl(config.images.closeBtn)})` }"
@click="handleCloseClick"></span>
</view>
</view>
......
activities/1015/lottery/components/ruleModal/rulemodal.less
View file @ a594b3c2
......@@ -31,24 +31,21 @@
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
border-radius: 48rpx;
}
.rulemodalbg {
width: 550rpx;
height: 667rpx;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
.rulemodal-title{
color: #bc7900;
font-weight: bold;
font-size: 44rpx;
}
// 规则内容滚动容器
.rulemodal-text-container {
width: 100%;
height: 471rpx;
position: absolute;
//position: absolute;
// top: 154rpx;
// left: 35rpx;
overflow-y: auto;
......
activities/1015/lottery/config.js
View file @ a594b3c2
const version = 'v1'
const baseUrl = 'http://127.0.0.1:8080/activity/1015'
function getCdnUrl(path){
return `${baseUrl}/${version}/${path}`
}
// 抽奖页面配置
export const lotteryConfig = {
// 页面状态
......@@ -10,22 +16,15 @@ export const lotteryConfig = {
// 图片配置
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`,
background: getCdnUrl('turntable/bg.jpg'),
turnTableBg: getCdnUrl('turntable/panebg.png'),
turnTableLogo: getCdnUrl('turntable/center.png'),
title: getCdnUrl('turntable/title.png'),
ruleBtn: getCdnUrl('turntable/rule-btn.png'),
awardBtn: getCdnUrl('turntable/award-btn.png'),
noticeConBg: getCdnUrl('turntable/notice-bg.png'),
drawBtn: getCdnUrl('turntable/draw-btn.png'),
lotterypageturntableawardsSelBg: getCdnUrl('turntable/sel-bg.png'),
},
// 奖品配置
......@@ -89,11 +88,6 @@ export const lotteryConfig = {
}
}
// 获取图片URL的工具函数
export const getImageUrl = (imagePath) => {
return imagePath
}
// 获取随机公告
export const getRandomNotice = () => {
const notices = [
......
activities/1015/lottery/index.less
View file @ a594b3c2
......@@ -361,9 +361,9 @@
}
.lotterypagetitle {
width: 531rpx;
height: 99rpx;
left: 111rpx;
width: 503rpx;
height: 68rpx;
left: 121rpx;
top: 257rpx;
position: absolute;
background-size: cover;
......@@ -424,7 +424,7 @@
}
.lotterypagenoticecontext-wrapper {
width: 482rpx;
width: 490rpx;
height: 40rpx;
left: 135rpx;
top: 5rpx;
......@@ -441,44 +441,34 @@
}
.lotterypagenoticecontext {
width: 502rpx;
position: absolute;
height: 40rpx;
position: absolute;
top: 0;
left: 0;
font-size: 24rpx;
line-height: 40rpx;
color: rgba(255, 255, 255, 1);
display: block;
margin: 0;
padding: 0;
white-space: nowrap;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
}
.lotterypagenoticeconsoundicon {
width: 23rpx;
height: 22rpx;
left: 98rpx;
top: 14rpx;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
}
.lotterypagenoticetext{
width: 390rpx;
white-space: nowrap;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.lotterypagenoticetime{
color: #797979;
margin-left: 10rpx;
flex-shrink: 0;
}
}
.lotterypagedrawbtn {
width: 481rpx;
height: 113rpx;
width: 466rpx;
height: 97rpx;
left: 135rpx;
top: 1256rpx;
position: absolute;
......@@ -516,6 +506,6 @@
position: absolute;
font-size: 24rpx;
line-height: 23rpx;
color: rgba(255, 255, 255, 1);
//color: rgba(255, 255, 255, 1);
}
}
activities/1015/lottery/index.vue
View file @ a594b3c2
<template>
<view class="lotterypage">
<!-- 返回按钮 -->
<view class="nav-left">
<image class="back-btn" :src="$baseUrl + 'xingmaLab/1001/backBtn.png'" mode="aspectFit"
@click="handleBack" />
</view>
<view class="lotterypageCon">
<view class="lotterypage">
<!-- 返回按钮 -->
<view class="nav-left">
<image class="back-btn" src="@/assets/images/back-btn.png" mode="aspectFit"
@click="handleBack"/>
</view>
<view class="lotterypageCon">
<span class="lotterypagebg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
:style="{ backgroundImage: `url(${config.images.background})` }"></span>
<div class="lotterypageturntable">
<div class="lotterypageturntable">
<span class="lotterypageturntablebg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.turnTableBg)})` }"></span>
<span class="lotterypageturntablelogo"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.turnTableLogo)})` }"></span>
:style="{ backgroundImage: `url(${config.images.turnTableBg})` }"></span>
<span class="lotterypageturntablelogo"
:style="{ backgroundImage: `url(${config.images.turnTableLogo})` }"></span>
<div class="lotterypageturntableawards" :style="turntableRotationStyle">
<div class="lotterypageturntableawards6" v-if="turntablePrizes.length > 5">
<div class="lotterypageturntableawards" :style="turntableRotationStyle">
<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>
<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">
v-if="isPrizeSelected(5) || isPrizeHighlighted(5)"
:style="{ backgroundImage: `url(${config.images.lotterypageturntableawardsSelBg})` }"></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>
<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">
v-if="isPrizeSelected(4) || isPrizeHighlighted(4)"
:style="{ backgroundImage: `url(${config.images.lotterypageturntableawardsSelBg})` }"></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>
<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">
v-if="isPrizeSelected(3) || isPrizeHighlighted(3)"
:style="{ backgroundImage: `url(${config.images.lotterypageturntableawardsSelBg})` }"></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>
<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">
v-if="isPrizeSelected(2) || isPrizeHighlighted(2)"
:style="{ backgroundImage: `url(${config.images.lotterypageturntableawardsSelBg})` }"></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>
<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">
v-if="isPrizeSelected(1) || isPrizeHighlighted(1)"
:style="{ backgroundImage: `url(${config.images.lotterypageturntableawardsSelBg})` }"></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>
<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"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.ruleBtn)})` }"
@click="handleRuleClick"></span>
<span class="lotterypageawardbtn"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.awardBtn)})` }"
@click="handleAwardClick"></span>
<div class="lotterypagenoticecon">
v-if="isPrizeSelected(0) || isPrizeHighlighted(0)"
:style="{ backgroundImage: `url(${config.images.lotterypageturntableawardsSelBg})` }"></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(${config.images.title})` }"></span>
<span class="lotterypagerulebtn"
:style="{ backgroundImage: `url(${config.images.ruleBtn})` }"
@click="handleRuleClick"></span>
<span class="lotterypageawardbtn"
:style="{ backgroundImage: `url(${config.images.awardBtn})` }"
@click="handleAwardClick"></span>
<div class="lotterypagenoticecon">
<span class="lotterypagenoticeconbg"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.noticeConBg)})` }"></span>
<div class="lotterypagenoticecontext-wrapper">
<div class="lotterypagenoticecontext-container" :class="{ 'no-transition': isResetting }"
:style="{ transform: `translateY(-${currentNoticeIndex * 40}rpx)` }">
<span class="lotterypagenoticecontext" v-for="(notice, index) in displayNotices"
:key="`${notice.userNickname}-${index}`" :style="{ top: `${index * 40}rpx` }">{{
formatNotice(notice.userNickname, notice.prizeName)
}}</span>
</div>
</div>
<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>
<span class="lotterypagelefttimes">剩余次数：{{ remainingTimes }}</span>
<!-- 规则弹窗 -->
<RuleModal :visible="showRuleModal" :rules="activityRules" :config="ruleModalConfig"
@close="handleRuleModalClose" />
<!-- 抽奖成功弹窗 -->
<GotPrizeModal :visible="showGotPrizeModal" :award-name="currentAwardName"
:award-image-url="currentAwardImageUrl" @close="handleGotPrizeModalClose" @happy-get="handleHappyGet" />
<!-- 抽奖失败弹窗 -->
<DrawFailModal :visible="showDrawFailModal" @close="handleDrawFailModalClose" @i-know="handleIKnow" />
</view>
</view>
:style="{ backgroundImage: `url(${config.images.noticeConBg})` }"></span>
<div class="lotterypagenoticecontext-wrapper">
<div class="lotterypagenoticecontext-container" :class="{ 'no-transition': isResetting }"
:style="{ transform: `translateY(-${currentNoticeIndex * 40}rpx)` }">
<p class="lotterypagenoticecontext" v-for="(notice, index) in displayNotices"
:key="`${notice.userNickname}-${index}`" :style="{ top: `${index * 40}rpx` }">
<span class="lotterypagenoticetext">{{ formatNotice(notice.userNickname, notice.prizeName) }}</span>
<span class="lotterypagenoticetime">
{{getDetailedHumanizedTimeDiff(notice.winningTime)}}
</span>
</p>
</div>
</div>
</div>
<span class="lotterypagedrawbtn"
:style="{ backgroundImage: `url(${config.images.drawBtn})` }"
@click="handleDrawClick" :class="{ 'disabled-draw-btn': !canDraw }"></span>
<span class="lotterypagelefttimes">剩余次数：{{ remainingTimes }}</span>
<!-- 规则弹窗 -->
<RuleModal :visible="showRuleModal" :rules="activityRules" :config="ruleModalConfig"
@close="handleRuleModalClose"/>
<GotPrizeModal ref="gotPrizeModalRef"/>
</view>
</view>
</template>
<script setup>
import { ref, onMounted, computed, getCurrentInstance, onUnmounted } from 'vue'
import { lotteryConfig, getImageUrl } from './config.js'
import {ref, onMounted, computed, getCurrentInstance, onUnmounted} from 'vue'
import {lotteryConfig} from './config.js'
import RuleModal from './components/ruleModal/ruleModal.vue'
import GotPrizeModal from '../components/GotPrizeModal.vue'
import DrawFailModal from './components/drawFailModal/drawFailModal.vue'
import { lotteryDraw, fetchLotteryInfo, fetchLotteryConfig } from '../api.ts'
import {lotteryDraw, fetchLotteryInfo, fetchLotteryConfig} from '../api.ts'
import md from '@/md.js'
import { jump, JumpType } from '@/utils/index.js'
import {jump, JumpType} from '@/utils/index.js'
import GotPrizeModal from "../components/GotPrizeModal.vue";
import {getDetailedHumanizedTimeDiff} from "../utils";
// 组件名称
defineOptions({
name: 'LotteryPage'
name: 'LotteryPage'
})
// 响应式数据
......@@ -151,10 +147,7 @@ const isResetting = ref(false) // 是否正在重置轮播位置
// 弹窗状态
const showRuleModal = ref(false) // 规则弹窗
const showGotPrizeModal = ref(false) // 抽奖成功弹窗
const showDrawFailModal = ref(false) // 抽奖失败弹窗
const currentAwardName = ref('') // 当前中奖奖品名称
const currentAwardImageUrl = ref('') // 当前中奖奖品图片URL
const gotPrizeModalRef = ref()
// 配置对象
const config = lotteryConfig
......@@ -165,433 +158,404 @@ const $baseUrl = instance.proxy.$baseUrl
// 计算属性 - 是否可以抽奖
const canDraw = computed(() => {
return remainingTimes.value > 0 && currentState.value === 'normal' && !isDrawing.value
return remainingTimes.value > 0 && currentState.value === 'normal' && !isDrawing.value
})
// 转盘不需要旋转，保持静态
const turntableRotationStyle = computed(() => {
return {
transform: 'rotate(0deg)',
transition: 'none'
}
return {
transform: 'rotate(0deg)',
transition: 'none'
}
})
// 检查奖品是否被选中（用于最终结果）
const isPrizeSelected = (index) => {
return selectedPrizeIndex.value === index
return selectedPrizeIndex.value === index
}
// 检查奖品是否正在高亮（用于轮流亮起效果）
const isPrizeHighlighted = (index) => {
return currentHighlightIndex.value === index
return currentHighlightIndex.value === index
}
// 获取最近的20条公告
const recentNotices = computed(() => {
let notices = [];
if (winningCarousel.value.length > 0) {
notices = winningCarousel.value.slice(0, 20);
} else {
// 提供默认数据确保轮播能正常工作
notices = [
{ userNickname: '用户1', prizeName: '奖品A' },
{ userNickname: '用户2', prizeName: '奖品B' },
{ userNickname: '用户3', prizeName: '奖品C' }
];
}
// 如果只有1条数据，复制成3条以确保轮播效果
if (notices.length === 1) {
const singleNotice = notices[0];
notices = [singleNotice, singleNotice, singleNotice];
console.log('轮播数据只有1条，已复制成3条:', notices);
}
return notices;
let notices = [];
if (winningCarousel.value.length > 0) {
notices = winningCarousel.value.slice(0, 20);
} else {
// 提供默认数据确保轮播能正常工作
notices = [
{userNickname: '用户1', prizeName: '奖品A'},
{userNickname: '用户2', prizeName: '奖品B'},
{userNickname: '用户3', prizeName: '奖品C'}
];
}
// 如果只有1条数据，复制成3条以确保轮播效果
if (notices.length === 1) {
const singleNotice = notices[0];
notices = [singleNotice, singleNotice, singleNotice];
console.log('轮播数据只有1条，已复制成3条:', notices);
}
return notices;
});
// 用于轮播显示的公告列表（重复数据以实现无缝循环）
const displayNotices = computed(() => {
const notices = recentNotices.value;
if (notices.length === 0) return [];
const notices = recentNotices.value;
if (notices.length === 0) return [];
// 重复数据以实现无缝循环
return [...notices, ...notices];
// 重复数据以实现无缝循环
return [...notices, ...notices];
});
// 格式化公告内容，限制为20个字符
const formatNotice = (nickname, prize) => {
const fullText = `${nickname} 获得了 ${prize}`;
return fullText;
return `${nickname} 获得了 ${prize}`
};
// 返回按钮处理
const handleBack = () => {
console.log('点击返回按钮')
// md.sensorComponentLogTake({
// xcxComponentClick: "true",
// pageName: "915专题活动抽奖页",
// componentName: "返回按钮",
// componentContent: "返回"
// });
try {
uni.navigateBack({
delta: 1,
success: () => {
console.log('返回成功')
},
fail: () => {
// 如果返回失败，跳转到首页
uni.redirectTo({
url: '/activity0915/act0915/act0915'
})
}
})
} catch (error) {
console.log('返回失败:', error)
uni.redirectTo({
url: '/activity0915/act0915/act0915'
})
}
console.log('点击返回按钮')
// md.sensorComponentLogTake({
// xcxComponentClick: "true",
// pageName: "915专题活动抽奖页",
// componentName: "返回按钮",
// componentContent: "返回"
// });
try {
uni.navigateBack({
delta: 1,
success: () => {
console.log('返回成功')
},
fail: () => {
// 如果返回失败，跳转到首页
uni.redirectTo({
url: '/activities/1015/home'
})
}
})
} catch (error) {
console.log('返回失败:', error)
uni.redirectTo({
url: '/activities/1015/home'
})
}
}
// 规则按钮点击处理
const handleRuleClick = () => {
console.log('点击规则按钮')
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "915专题活动抽奖页",
componentName: "抽奖板块",
componentContent: "规则"
});
showRuleModal.value = true
console.log('点击规则按钮')
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "915专题活动抽奖页",
componentName: "抽奖板块",
componentContent: "规则"
});
showRuleModal.value = true
}
// 规则弹窗关闭处理
const handleRuleModalClose = () => {
showRuleModal.value = false
showRuleModal.value = false
}
// 奖品按钮点击处理
const handleAwardClick = () => {
console.log('点击奖品按钮')
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "915专题活动抽奖页",
componentName: "抽奖板块",
componentContent: "奖品"
});
// // 根据环境获取对应的appId
// const getAppId = () => {
// // 可以根据实际环境判断
// // uat2: wxabebc35e71e66795
// // test2: wx18428fc8a569a3c7
// // 生产: wx4205ec55b793245e
// // 这里可以根据实际需求调整环境判断逻辑
// // 例如：根据域名、配置等判断当前环境
// const currentEnv = 'prod' // 可以动态获取
// const appIdMap = {
// 'uat2': 'wxabebc35e71e66795',
// 'test2': 'wx18428fc8a569a3c7',
// 'prod': 'wx4205ec55b793245e'
// }
// return appIdMap[currentEnv] || appIdMap['uat2'] // 默认uat2环境
// }
jump({
type: JumpType.MINI,
url: '/subPackages/xmhMainProcess/mine/index',
extra: {
appId: 'wx4205ec55b793245e',
envVersion: 'release'
}
})
// const appId = getAppId()
// const path = '/subPackages/xmhMainProcess/mine/index'
// uni.navigateToMiniProgram({
// appId: appId,
// path: path,
// extraData: {},
// envVersion: 'release', // 可以根据环境调整：develop, trial, release
// success: (res) => {
// console.log('跳转小程序成功:', res)
// },
// fail: (err) => {
// console.error('跳转小程序失败:', err)
// // uni.showToast({
// // title: '跳转失败',
// // icon: 'none'
// // })
// }
// })
console.log('点击奖品按钮')
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "915专题活动抽奖页",
componentName: "抽奖板块",
componentContent: "奖品"
});
// // 根据环境获取对应的appId
// const getAppId = () => {
// // 可以根据实际环境判断
// // uat2: wxabebc35e71e66795
// // test2: wx18428fc8a569a3c7
// // 生产: wx4205ec55b793245e
// // 这里可以根据实际需求调整环境判断逻辑
// // 例如：根据域名、配置等判断当前环境
// const currentEnv = 'prod' // 可以动态获取
// const appIdMap = {
// 'uat2': 'wxabebc35e71e66795',
// 'test2': 'wx18428fc8a569a3c7',
// 'prod': 'wx4205ec55b793245e'
// }
// return appIdMap[currentEnv] || appIdMap['uat2'] // 默认uat2环境
// }
jump({
type: JumpType.MINI,
url: '/subPackages/xmhMainProcess/mine/index',
extra: {
appId: 'wx4205ec55b793245e',
envVersion: 'release'
}
})
// const appId = getAppId()
// const path = '/subPackages/xmhMainProcess/mine/index'
// uni.navigateToMiniProgram({
// appId: appId,
// path: path,
// extraData: {},
// envVersion: 'release', // 可以根据环境调整：develop, trial, release
// success: (res) => {
// console.log('跳转小程序成功:', res)
// },
// fail: (err) => {
// console.error('跳转小程序失败:', err)
// // uni.showToast({
// // title: '跳转失败',
// // icon: 'none'
// // })
// }
// })
}
// 加载规则弹窗配置
const loadRuleModalConfig = async () => {
try {
console.log('开始请求 fetchAct915LotteryJSON 接口...')
const response = await fetchLotteryConfig()
console.log('fetchAct915LotteryJSON 接口返回结果:', response)
if (response && response.ok && response.data) {
ruleModalConfig.value = response.data
console.log('规则弹窗配置加载成功:', ruleModalConfig.value)
} else {
console.warn('规则弹窗配置接口返回异常:', response)
}
} catch (error) {
console.error('fetchAct915LotteryJSON 接口请求失败:', error)
}
try {
console.log('开始请求 fetchAct915LotteryJSON 接口...')
const response = await fetchLotteryConfig()
console.log('fetchAct915LotteryJSON 接口返回结果:', response)
if (response && response.ok && response.data) {
ruleModalConfig.value = response.data
console.log('规则弹窗配置加载成功:', ruleModalConfig.value)
} else {
console.warn('规则弹窗配置接口返回异常:', response)
}
} catch (error) {
console.error('fetchAct915LotteryJSON 接口请求失败:', error)
}
}
// 加载抽奖信息
const loadLotteryInfo = async () => {
try {
console.log('开始请求 getAct915LotteryInfo 接口...')
const response = await fetchLotteryInfo()
console.log('getAct915LotteryInfo 接口返回结果:', response)
if (response && response.ok) {
remainingTimes.value = response.data.remainingChances
turntablePrizes.value = response.data.turntablePrizes
winningCarousel.value = response.data.winningCarousel
userWinningPrizes.value = response.data.userWinningPrizes
activityRules.value = response.data.activityRules || ''
// 启动公告轮播（无论是否有API数据）
startNoticeCarousel()
} else {
// uni.showToast({
// title: response.msg || '获取抽奖信息失败',
// icon: 'none'
// })
// 即使API失败也启动轮播
startNoticeCarousel()
}
} catch (error) {
console.error('getAct915LotteryInfo 接口请求失败:', error)
uni.showToast({
title: '网络错误，请稍后重试',
icon: 'none'
})
// 即使网络错误也启动轮播
startNoticeCarousel()
}
try {
console.log('开始请求 getAct915LotteryInfo 接口...')
const response = await fetchLotteryInfo()
console.log('getAct915LotteryInfo 接口返回结果:', response)
if (response && response.ok) {
remainingTimes.value = response.data.remainingChances
turntablePrizes.value = response.data.turntablePrizes
winningCarousel.value = response.data.winningCarousel
userWinningPrizes.value = response.data.userWinningPrizes
activityRules.value = response.data.activityRules || ''
// 启动公告轮播（无论是否有API数据）
startNoticeCarousel()
} else {
// uni.showToast({
// title: response.msg || '获取抽奖信息失败',
// icon: 'none'
// })
// 即使API失败也启动轮播
startNoticeCarousel()
}
} catch (error) {
console.error('getAct915LotteryInfo 接口请求失败:', error)
uni.showToast({
title: '网络错误，请稍后重试',
icon: 'none'
})
// 即使网络错误也启动轮播
startNoticeCarousel()
}
}
// 公告轮播
const startNoticeCarousel = () => {
// 确保有数据可以轮播
if (recentNotices.value.length > 0) {
carouselTimer.value = setInterval(() => {
currentNoticeIndex.value = currentNoticeIndex.value + 1
console.log('当前公告索引:', currentNoticeIndex.value)
// 当滚动到重复数据的开始位置时，立即重置到原始位置（无动效）
if (currentNoticeIndex.value >= recentNotices.value.length) {
// 禁用过渡动效
isResetting.value = true
// 立即重置到原始位置
currentNoticeIndex.value = 0
// 下一帧恢复过渡动效
setTimeout(() => {
isResetting.value = false
}, 100) // 确保重置完成
}
}, 3000) // 每3秒切换一次
}
//return
// 确保有数据可以轮播
if (recentNotices.value.length > 0) {
carouselTimer.value = setInterval(() => {
currentNoticeIndex.value = currentNoticeIndex.value + 1
//console.log('当前公告索引:', currentNoticeIndex.value)
// 当滚动到重复数据的开始位置时，立即重置到原始位置（无动效）
if (currentNoticeIndex.value >= recentNotices.value.length) {
// 禁用过渡动效
isResetting.value = true
// 立即重置到原始位置
currentNoticeIndex.value = 0
// 下一帧恢复过渡动效
setTimeout(() => {
isResetting.value = false
}, 100) // 确保重置完成
}
}, 3000) // 每3秒切换一次
}
}
// 停止轮播
const stopNoticeCarousel = () => {
if (carouselTimer.value) {
clearInterval(carouselTimer.value)
carouselTimer.value = null
}
if (carouselTimer.value) {
clearInterval(carouselTimer.value)
carouselTimer.value = null
}
}
// 抽奖按钮点击处理
const handleDrawClick = async () => {
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "915专题活动抽奖页",
componentName: "抽奖板块",
componentContent: "立即抽奖"
});
if (!canDraw.value) {
uni.showToast({
title: '抽奖次数已用完',
icon: 'none'
})
return
}
console.log('开始抽奖')
isDrawing.value = true
selectedPrizeIndex.value = -1 // 重置选中状态
currentHighlightIndex.value = -1 // 重置高亮状态
// uni.showLoading({
// title: '抽奖中...',
// mask: true
// })
try {
const response = await lotteryDraw()
console.log('getAct915LotteryDraw 接口返回结果:', response)
if (response && response.ok) {
remainingTimes.value = response.data.remainingChances
// 根据接口返回的prizeId找到对应的奖品索引
const prizeIndex = turntablePrizes.value.findIndex(prize => prize.prizeId === response.data.prizeId)
console.warn("prizeIndex", prizeIndex)
if (prizeIndex !== -1) {
// 开始轮流亮起效果
startHighlightAnimation(prizeIndex, response.data.isWin)
} else {
// 如果找不到对应奖品，显示失败
// uni.hideLoading()
isDrawing.value = false
showDrawFailModal.value = true
}
} else {
// uni.hideLoading()
isDrawing.value = false
uni.showToast({
title: response.msg || '抽奖失败',
icon: 'none'
})
}
} catch (error) {
console.error('getAct915LotteryDraw 接口请求失败:', error)
uni.hideLoading()
isDrawing.value = false
uni.showToast({
title: '网络错误，请稍后重试',
icon: 'none'
})
}
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "915专题活动抽奖页",
componentName: "抽奖板块",
componentContent: "立即抽奖"
});
if (!canDraw.value) {
uni.showToast({
title: '抽奖次数已用完',
icon: 'none'
})
return
}
console.log('开始抽奖')
isDrawing.value = true
selectedPrizeIndex.value = -1 // 重置选中状态
currentHighlightIndex.value = -1 // 重置高亮状态
// uni.showLoading({
// title: '抽奖中...',
// mask: true
// })
try {
const response = await lotteryDraw()
console.log('getAct915LotteryDraw 接口返回结果:', response)
if (response && response.ok) {
remainingTimes.value = response.data.remainingChances
// 根据接口返回的prizeId找到对应的奖品索引
const prizeIndex = turntablePrizes.value.findIndex(prize => prize.prizeId === response.data.prizeId)
console.warn("prizeIndex", prizeIndex)
if (prizeIndex !== -1) {
// 开始轮流亮起效果
startHighlightAnimation(prizeIndex, response.data.isWin)
} else {
// 如果找不到对应奖品，显示失败
// uni.hideLoading()
isDrawing.value = false
gotPrizeModalRef.show()
}
} else {
// uni.hideLoading()
isDrawing.value = false
uni.showToast({
title: response.msg || '抽奖失败',
icon: 'none'
})
}
} catch (error) {
console.error('getAct915LotteryDraw 接口请求失败:', error)
uni.hideLoading()
isDrawing.value = false
uni.showToast({
title: '网络错误，请稍后重试',
icon: 'none'
})
}
}
// 轮流亮起动画
const startHighlightAnimation = (targetIndex, isWin) => {
console.log(`开始轮流亮起动画，目标奖品索引: ${targetIndex}, 是否中奖: ${isWin}`)
// 按照指定顺序：1 -> 5 -> 3 -> 2 -> 4 -> 6
// 对应索引：0 -> 4 -> 2 -> 1 -> 3 -> 5
const turntableOrder = [0, 4, 2, 1, 3, 5] // 按照指定顺序
const totalPrizes = turntableOrder.length
let currentOrderIndex = 0
let roundCount = 0
const maxRounds = 2 // 最多转2圈
const highlightSpeed = 200 // 每个奖品高亮200ms
const highlightTimer = setInterval(() => {
// 获取当前转盘顺序中的奖品索引
const currentPrizeIndex = turntableOrder[currentOrderIndex]
currentHighlightIndex.value = currentPrizeIndex
// 检查是否到达目标位置
if (roundCount >= maxRounds && currentPrizeIndex === targetIndex) {
clearInterval(highlightTimer)
// 停止高亮，显示最终选中状态
setTimeout(() => {
currentHighlightIndex.value = -1
selectedPrizeIndex.value = targetIndex
uni.hideLoading()
// 显示结果弹窗
setTimeout(() => {
isDrawing.value = false
if (isWin) {
currentAwardName.value = turntablePrizes.value[targetIndex].prizeName
currentAwardImageUrl.value = turntablePrizes.value[targetIndex].prizeImageUrl
showGotPrizeModal.value = true
} else {
showDrawFailModal.value = true
}
// 延迟重置选中状态
setTimeout(() => {
selectedPrizeIndex.value = -1
}, 2000)
}, 1000)
}, highlightSpeed)
} else {
// 移动到下一个奖品（按转盘顺序）
currentOrderIndex = (currentOrderIndex + 1) % totalPrizes
// 如果回到起点，增加圈数
if (currentOrderIndex === 0) {
roundCount++
}
}
}, highlightSpeed)
}
// 抽奖成功弹窗关闭处理
const handleGotPrizeModalClose = () => {
showGotPrizeModal.value = false
}
// 开心领取处理
const handleHappyGet = () => {
console.log('点击开心领取')
showGotPrizeModal.value = false
// uni.showToast({
// title: '奖品领取成功',
// icon: 'success'
// })
}
// 抽奖失败弹窗关闭处理
const handleDrawFailModalClose = () => {
showDrawFailModal.value = false
}
// 我知道了处理
const handleIKnow = () => {
console.log('点击我知道了')
showDrawFailModal.value = false
// uni.showToast({
// title: '下次再来试试吧',
// icon: 'none'
// })
console.log(`开始轮流亮起动画，目标奖品索引: ${targetIndex}, 是否中奖: ${isWin}`)
// 按照指定顺序：1 -> 5 -> 3 -> 2 -> 4 -> 6
// 对应索引：0 -> 4 -> 2 -> 1 -> 3 -> 5
const turntableOrder = [0, 4, 2, 1, 3, 5] // 按照指定顺序
const totalPrizes = turntableOrder.length
let currentOrderIndex = 0
let roundCount = 0
const maxRounds = 2 // 最多转2圈
const highlightSpeed = 200 // 每个奖品高亮200ms
const highlightTimer = setInterval(() => {
// 获取当前转盘顺序中的奖品索引
const currentPrizeIndex = turntableOrder[currentOrderIndex]
currentHighlightIndex.value = currentPrizeIndex
// 检查是否到达目标位置
if (roundCount >= maxRounds && currentPrizeIndex === targetIndex) {
clearInterval(highlightTimer)
// 停止高亮，显示最终选中状态
setTimeout(() => {
currentHighlightIndex.value = -1
selectedPrizeIndex.value = targetIndex
uni.hideLoading()
// 显示结果弹窗
setTimeout(() => {
isDrawing.value = false
if (isWin) {
const {prizeName, prizeImageUrl} = turntablePrizes.value[targetIndex]
gotPrizeModalRef.value.show({
prizeName,
prizeImageUrl,
})
} else {
gotPrizeModalRef.value.show({})
}
// 延迟重置选中状态
setTimeout(() => {
selectedPrizeIndex.value = -1
}, 2000)
}, 1000)
}, highlightSpeed)
} else {
// 移动到下一个奖品（按转盘顺序）
currentOrderIndex = (currentOrderIndex + 1) % totalPrizes
// 如果回到起点，增加圈数
if (currentOrderIndex === 0) {
roundCount++
}
}
}, highlightSpeed)
}
// 生命周期
onMounted(() => {
console.log('抽奖页面已加载')
loadRuleModalConfig() // 先加载规则弹窗配置
loadLotteryInfo()
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "915专题活动抽奖页",
componentName: "抽奖板块",
componentContent: "规则、奖品、立即抽奖"
});
console.log('抽奖页面已加载')
loadRuleModalConfig() // 先加载规则弹窗配置
loadLotteryInfo()
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "915专题活动抽奖页",
componentName: "抽奖板块",
componentContent: "规则、奖品、立即抽奖"
});
})
onUnmounted(() => {
stopNoticeCarousel()
stopNoticeCarousel()
})
</script>
......
activities/1015/mock-configs.js 0 → 100644
View file @ a594b3c2
import {getCdnUrl} from "./utils";
const pageName = '1015专题活动页面'
// 页面配置
export function homeConfig(){
return {
"background": {
image: getCdnUrl('home/bg.png'),
style: {
backgroundPosition: {y: "calc(4937rpx + 845rpx)"}
}
},
shareConfig: {
title: '星妈会超级品牌周来啦！',
path: '/activities/1015/home/index',
imageUrl: 'https://course.feihe.com/momclub-picture/Act915Page/v2/act915ShareImg.png',
},
components: [
{
type: "image-swiper",
properties: {
autoplay: true,
interval: 3000,
duration: 500,
circular: true,
indicatorDots: true,
items: [{
image: getCdnUrl('home/banner-0.png'),
mdConfig: {
pageName,
componentName: "banner头图",
componentContent: "北纬47 °",
logExposure: true,
},
}, {
image: getCdnUrl('home/banner-1.png'),
mdConfig: {
pageName,
componentName: "banner头图",
componentContent: "国际大米节金奖",
logExposure: true,
},
link: {
type: 2,
url: "subPackages/shopMainProcess/product/index?productId=643246351932056828&skuId=643246351932056829&entrySource=xmh_wechatmp_activity_1015ppz",
extra: {envVersion: "release", appId: "wx4205ec55b793245e"},
}
}]
},
style: {
height: "845rpx",
}
},
{
type: "click-area",
properties: {
area: {x: 35, y: 915, width: 685, height: 245},
mdConfig: {
pageName,
componentName: "商品banner",
componentContent: "商品banner",
logExposure: true,
logClick: true,
},
link: {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=720448018529899563&skuId=720448018529899564&entrySource=xmh_wechatmp_activity_1015ppz"
},
},
},
{
type: "click-area",
properties: {
area: {x: 50, y: 2095, width: 320, height: 390},
mdConfig: {
pageName,
componentName: "品牌宣传1",
componentContent: "商品名称1",
logExposure: true,
logClick: true,
},
link: {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=643246351932056828&skuId=643246351932056829&entrySource=xmh_wechatmp_activity_1015ppz"
},
}
},
{
type: "click-area",
properties: {
area: {x: 380, y: 2095, width: 320, height: 390},
mdConfig: {
pageName,
componentName: "品牌宣传1",
componentContent: "商品名称2",
logExposure: true,
logClick: true,
},
link: {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=643245114369684591&skuId=643245114369684592&entrySource=xmh_wechatmp_activity_1015ppz"
},
}
},
{
type: "click-area",
properties: {
area: {x: 50, y: 3405, width: 320, height: 390},
mdConfig: {
pageName,
componentName: "品牌宣传2",
componentContent: "商品名称1",
logExposure: true,
logClick: true,
},
link: {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=368848644886521333&skuId=368848644886521334&entrySource=xmh_wechatmp_activity_1015ppz"
},
}
},
{
type: "click-area",
properties: {
area: {x: 380, y: 3405, width: 320, height: 390},
mdConfig: {
pageName,
componentName: "品牌宣传2",
componentContent: "商品名称2",
logExposure: true,
logClick: true,
},
link: {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=367056951412568222&skuId=367056951412568223&entrySource=xmh_wechatmp_activity_1015ppz"
},
}
},
{
type: "invite-task",
properties: {
area: {x: 35, y: 3865, width: 685, height: 195},
mdConfig: {
pageName,
componentName: "邀请得好礼",
componentContent: "立即邀请",
logExposure: true,
logClick: true,
},
},
},
{
type: "click-area",
properties: {
area: {x: 35, y: 4080, width: 685, height: 245},
mdConfig: {
pageName,
componentName: "中部抽奖banner",
componentContent: "中部抽奖banner",
logExposure: true,
logClick: true,
},
link: {
"type": 1,
"url": "/activities/1015/lottery/index"
},
},
},
{
"type": "click-area",
"properties": {
"area": {"x": 50, "y": 4405, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品1",
componentContent: "商品1",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=643243579803297229&skuId=643243579803297230&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 270, "y": 4405, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品1",
componentContent: "商品2",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=367070126091559975&skuId=367070126091559976&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 490, "y": 4405, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品1",
componentContent: "商品3",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=367072891644670759&skuId=367072891644670760&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 50, "y": 4705, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品1",
componentContent: "商品4",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=649435440113431085&skuId=649435440113431086&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 270, "y": 4705, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品1",
componentContent: "商品5",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=662389781175669644&skuId=662389781175669645&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 490, "y": 4705, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品1",
componentContent: "商品6",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=759248536249386165&skuId=759248536249386166&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 50, "y": 5110, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品2",
componentContent: "商品1",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=399302177175705120&skuId=399302177175705121&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 270, "y": 5110, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品2",
componentContent: "商品2",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=650599779914081413&skuId=650599779914081414&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 490, "y": 5110, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品2",
componentContent: "商品3",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=667527760599458548&skuId=667527760599458549&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 50, "y": 5410, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品2",
componentContent: "商品4",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=548984197069284758&skuId=548984197069284759&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 270, "y": 5410, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品2",
componentContent: "商品5",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=792232869316748776&skuId=792232869316748777&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
{
"type": "click-area",
"properties": {
"area": {"x": 490, "y": 5410, "width": 200, "height": 285},
"mdConfig": {
pageName,
componentName: "6组商品2",
componentContent: "商品6",
logExposure: true,
logClick: true,
},
"link": {
"extra": {"envVersion": "release", "appId": "wx4205ec55b793245e"},
"type": 2,
"url": "subPackages/shopMainProcess/product/index?productId=704050114989893289&skuId=704050114989893290&entrySource=xmh_wechatmp_activity_1015ppz"
}
}
},
],
"lottery": {
"image": "act1015Page/v3/act1015PageLotteryBanner.png",
"link": {"type": 1, "url": "/activity0915/lottery/lottery"}
},
"invite": {
"image": "act1015Page/v3/act1015PageInviteConBg.png",
"link": {"type": 1, "url": "/pages/invite/invite"},
"inviteConStatusNo1Img": "act1015Page/v3/act1015PageInviteConStatusNo.png",
"inviteConStatusYes2Img": "act1015Page/v3/act1015PageInviteConStatusYes.png",
"inviteConStatusYes1Img": "act1015Page/v3/act1015PageInviteConStatusYes.png",
"inviteConStatusNo2Img": "act1015Page/v3/act1015PageInviteConStatusNo.png"
}
}
}
//console.log('page-config:', JSON.stringify(act1015Config, null, 2))
// 获取图片URL的工具函数
export const getImageUrl = (imagePath) => {
return imagePath
}
activities/1015/types.ts
View file @ a594b3c2
......@@ -31,7 +31,7 @@ export interface Prize{
prizeImageUrl: string
}
export interface ActivityInfo {
export interface InvitationInfo {
invitationCode: string
invitationText: string
invitationImageUrl: string
......
activities/1015/utils.ts 0 → 100644
View file @ a594b3c2
import {useGlobalStore} from "@/stores/global";
const version = 'v1'
export function getCdnUrl(path){
const {baseUrl} = useGlobalStore()
return `${baseUrl}activity/1015/${version}/${path}`
}
function normalizeDateInput(dateInput: any): Date {
if (dateInput instanceof Date) {
return dateInput;
}
if (typeof dateInput === 'string') {
// 处理 "yyyy-MM-dd HH:mm:ss" 格式
if (dateInput.includes(' ') && dateInput.includes('-')) {
return new Date(dateInput.replace(' ', 'T'));
}
// 其他情况直接尝试创建Date对象
return new Date(dateInput);
}
return new Date(dateInput);
}
export function getDetailedHumanizedTimeDiff(targetTime: any) {
const nowTimestamp = Date.now();
const targetDate = normalizeDateInput(targetTime ?? nowTimestamp);
if (isNaN(targetDate.getTime())) {
debugger
console.warn('Invalid date input:', targetTime);
return '无效时间';
}
const targetTimestamp = targetDate.getTime();
const diff = nowTimestamp - targetTimestamp;
const isPast = diff > 0;
const absDiff = Math.abs(diff);
let result = '';
if (absDiff < 60 * 1000) {
// 小于1分钟
result = '刚刚';
} else if (absDiff < 60 * 60 * 1000) {
// 小于1小时
const minutes = Math.floor(absDiff / (60 * 1000));
result = isPast ? `${minutes}分钟前` : `${minutes}分钟后`;
} else if (absDiff < 24 * 60 * 60 * 1000) {
// 小于1天
const hours = Math.floor(absDiff / (60 * 60 * 1000));
result = isPast ? `${hours}小时前` : `${hours}小时后`;
} else if (absDiff < 30 * 24 * 60 * 60 * 1000) {
// 小于30天
const days = Math.floor(absDiff / (24 * 60 * 60 * 1000));
result = isPast ? `${days}天前` : `${days}天后`;
} else if (absDiff < 12 * 30 * 24 * 60 * 60 * 1000) {
// 小于12个月
const months = Math.floor(absDiff / (30 * 24 * 60 * 60 * 1000));
result = isPast ? `${months}个月前` : `${months}个月后`;
} else {
// 超过12个月
const years = Math.floor(absDiff / (12 * 30 * 24 * 60 * 60 * 1000));
result = isPast ? `${years}年前` : `${years}年后`;
}
return result;
}
activity0915/lottery/README.md
View file @ a594b3c2
......@@ -5,20 +5,20 @@
```
activity0915/lottery/
├── lottery.vue # 主抽奖页面
├── config.js # 主页面配置
├── mock-configs.js # 主页面配置
├── lotterypage.less # 主页面样式
└── components/ # 弹窗组件目录
├── ruleModal/ # 规则弹窗
│ ├── ruleModal.vue
│ ├── config.js
│ ├── mock-configs.js
│ └── rulemodal.less
├── drawSucModal/ # 抽奖成功弹窗
│ ├── drawSucModal.vue
│ ├── config.js
│ ├── mock-configs.js
│ └── drawsucmodal.less
└── drawFailModal/ # 抽奖失败弹窗
├── drawFailModal.vue
├── config.js
├── mock-configs.js
└── drawfailmodal.less
```
......
components/xingmaLab/README.md
View file @ a594b3c2
......@@ -343,7 +343,7 @@ components/xingmaLab/
├── Xingmalabconfirmpop.vue # 确认弹窗组件
├── Xingmalabnotimepop.vue # 无时间弹窗组件
├── xingmalabImages.js # 图片配置文件
├── config.js # 旧版配置文件（已废弃）
├── mock-configs.js # 旧版配置文件（已废弃）
├── README.md # 使用说明
└── IMAGES.md # 图片资源说明
```
......@@ -352,7 +352,7 @@ components/xingmaLab/
从旧版配置系统迁移到新的图片配置系统：
1. **移除依赖**: 不再依赖 `config.js` 中的复杂配置
1. **移除依赖**: 不再依赖 `mock-configs.js` 中的复杂配置
2. **简化导入**: 直接导入 `XINGMALAB_IMAGES` 常量
3. **简化样式**: 移除计算属性，直接使用 CSS 样式
4. **保持兼容**: 按钮位置和尺寸与 React 版本完全一致
main.js
View file @ a594b3c2
......@@ -24,22 +24,28 @@ Vue.config.productionTip = false;
App.mpType = "app";
const app = new Vue({
...App,
...App,
});
app.$mount();
// #endif
// #ifdef VUE3
import { createSSRApp } from "vue";
import {createSSRApp} from "vue";
import {useGlobalStore} from "@/stores/global";
export function createApp() {
const app = createSSRApp(App);
app.use(Pinia.createPinia());
// app.config.globalProperties.$api = apiRequest.api;
app.config.globalProperties.$baseUrl = BASE_URL;
app.config.globalProperties.$sensors = md.sensors;
return {
app,
Pinia,
};
const app = createSSRApp(App);
app.use(Pinia.createPinia());
// app.config.globalProperties.$api = apiRequest.api;
app.config.globalProperties.$baseUrl = BASE_URL;
app.config.globalProperties.$sensors = md.sensors;
useGlobalStore().setBaseUrl(BASE_URL)
return {
app,
Pinia,
};
}
// #endif
pages.json
View file @ a594b3c2
......@@ -279,7 +279,7 @@
"root": "activities/1015",
"pages": [
{
"path": "home/index",
"path": "home",
"style": {
"navigationBarTitleText": "",
"shareAppMessage": true,
......
pages/XingmaLabDetailPage/README.md
View file @ a594b3c2
......@@ -19,7 +19,7 @@
XingmaLabDetailPage/
├── XingmaLabDetailPage.vue # 主组件文件
├── XingmaLabDetailPage.less # 样式文件
├── config.js # 配置文件
├── mock-configs.js # 配置文件
└── README.md # 说明文档
```
......@@ -57,7 +57,7 @@ import XingmaLabDetailPage from '@/pages/XingmaLabDetailPage/XingmaLabDetailPage
### 图片资源配置
在 `config.js` 中配置图片资源路径：
在 `mock-configs.js` 中配置图片资源路径：
```javascript
export const xingmaLabDetailConfig = {
......
pages/XingmaLabPublishPage/CHANGELOG.md
View file @ a594b3c2
......@@ -72,7 +72,7 @@ upload: {
pages/XingmaLabPublishPage/
├── XingmaLabPublishPage.vue # 主组件文件
├── XingmaLabPublishPage.less # 样式文件
├── config.js # 配置文件
├── mock-configs.js # 配置文件
├── README.md # 功能说明文档
└── CHANGELOG.md # 更新日志
```
......
stores/global.js
View file @ a594b3c2
......@@ -14,10 +14,14 @@ export const useGlobalStore = defineStore('global', {
isWxFriendCircle:false,
isShowLoading: false,
openId: openId,
unionId: unionId
unionId: unionId,
baseUrl: '',
};
},
actions: {
setBaseUrl(url){
this.baseUrl = url
},
/**
* 设置用户cuk
* @param {Object} cuk
......
uni_modules/mp-html/README.md
View file @ a594b3c2
......@@ -81,7 +81,7 @@
npm update mp-html
```
使用 *cli* 方式运行的项目，通过 *npm* 方式引入时，需要在 *vue.config.js* 中配置 *transpileDependencies*，详情可见 [#330](https://github.com/jin-yufeng/mp-html/issues/330#issuecomment-913617687)
使用 *cli* 方式运行的项目，通过 *npm* 方式引入时，需要在 *vue.mock-configs.js* 中配置 *transpileDependencies*，详情可见 [#330](https://github.com/jin-yufeng/mp-html/issues/330#issuecomment-913617687)
如果在 **nvue** 中使用还要将 `dist/uni-app/static` 目录下的内容拷贝到项目的 `static` 目录下，否则无法运行
查看 [快速开始](https://jin-yufeng.github.io/mp-html/#/overview/quickstart) 了解更多
......@@ -158,7 +158,7 @@
```bash
npm install mp-html
```
2. 编辑 `tools/config.js` 中的 `plugins` 项，选择需要的插件
2. 编辑 `tools/mock-configs.js` 中的 `plugins` 项，选择需要的插件
3. 生成新的组件包
在 `node_modules/mp-html` 目录下执行
```bash
......
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