Commit a594b3c2 authored by lg's avatar lg

chore: temp

parent eed47846
import requestModule from '@/api/request.js' import requestModule from '@/api/request.js'
const {api} = requestModule const {api} = requestModule
import {homeConfig} from "./home/config"; import {homeConfig} from "./mock-configs";
import {ActivityInfo, CodeResponse} from "@/activities/1015/types"; import {InvitationInfo, CodeResponse} from "@/activities/1015/types";
/** /**
* 获取页面配置 * 获取页面配置
...@@ -10,7 +10,7 @@ import {ActivityInfo, CodeResponse} from "@/activities/1015/types"; ...@@ -10,7 +10,7 @@ import {ActivityInfo, CodeResponse} from "@/activities/1015/types";
export function fetchPageConfig() { export function fetchPageConfig() {
//return api.get('/c/front/content', {type: 'act915',version: '1'}) //return api.get('/c/front/content', {type: 'act915',version: '1'})
return Promise.resolve({ return Promise.resolve({
data: homeConfig, data: homeConfig(),
}) })
} }
...@@ -23,11 +23,11 @@ export function fetchLotteryConfig (){ ...@@ -23,11 +23,11 @@ export function fetchLotteryConfig (){
} }
/** /**
* 获取915活动首页信息 * 获取邀请助力组件信息
* @returns * @returns
*/ */
export function fetchActivityInfo (){ export function fetchInvitationInfo (){
return api.post('/c/activity/use_invite_915/invitation/home') as Promise<CodeResponse<ActivityInfo>> return api.post('/c/activity/use_invite_101/invitation/home') as Promise<CodeResponse<InvitationInfo>>
} }
/** /**
...@@ -35,7 +35,7 @@ export function fetchActivityInfo (){ ...@@ -35,7 +35,7 @@ export function fetchActivityInfo (){
* @returns * @returns
*/ */
export function invitationAssist(inviterUserId, unionId) { 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) { ...@@ -43,7 +43,7 @@ export function invitationAssist(inviterUserId, unionId) {
* @returns * @returns
*/ */
export function fetchLotteryInfo (){ 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 (){ ...@@ -51,5 +51,5 @@ export function fetchLotteryInfo (){
* @returns * @returns
*/ */
export function lotteryDraw (){ export function lotteryDraw (){
return api.post('/c/activity/turntable_lottery_915/lottery/draw') return api.post('/c/activity/turntable_lottery_101/lottery/draw')
} }
<template> <template>
<view class="got-prize-modal" v-if="visible"> <view class="got-prize-modal" v-if="visible">
<!-- 蒙层 -->
<view class="got-prize-modal-mask" @click="handleCloseClick"></view>
<!-- 弹窗内容 --> <!-- 弹窗内容 -->
<view class="got-prize-modal-content"> <view class="content">
<span class="got-prize-modal-bg" <p class="title">
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span> {{showOptions?.awardImageUrl ? '恭喜您获得了' : '很遗憾未中奖'}}</p>
<image class="got-prize-modal-awardimg" :src="`${$baseUrl}${awardImageUrl}`" mode="aspectFit" <image v-if="showOptions?.awardImageUrl" class="prize-image"
v-if="awardImageUrl" @error="console.log('奖品图片加载失败')"></image> :src="showOptions?.awardImageUrl" mode="aspectFit"
<span class="got-prize-modal-awardname">{{ awardName }}</span> @error="console.log('奖品图片加载失败')"/>
<span class="got-prize-modal-happygetbtn" <span class="prize-name">
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.happyGetBtn)})` }" {{ showOptions?.awardImageUrl ? showOptions?.awardName : '别灰心,再试试吧~' }}
@click="handleHappyGetClick"></span> </span>
<span class="got-prize-modal-closebtn" <button class="confirm-btn" @click="onClickConfirm">
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.closeBtn)})` }" {{ showOptions?.awardImageUrl ? '开心收下' : '我知道了' }}
@click="handleCloseClick"></span> </button>
<p v-if="showOptions?.awardImageUrl" class="tips">奖品可在首页 我的奖品 中查看</p>
<span class="close-btn"
:style="{ backgroundImage: `url(${closeBtnUrl})` }"
@click="onClickClose"/>
</view> </view>
</view> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref} from 'vue' import {ref} from 'vue'
import {config, getImageUrl} from './GotPrizeModal/config.js' import closeBtnUrl from '@/assets/images/close-btn.png'
import './GotPrizeModal/index.less'
export interface ShowGotPrizeModalOptions { export interface ShowGotPrizeModalOptions {
awardName: string prizeName: string
awardImageUrl: string prizeImageUrl: string
} }
const visible = ref(false) const visible = ref(false)
const options = ref<ShowGotPrizeModalOptions>() const showOptions = ref<ShowGotPrizeModalOptions>()
// Emits // Emits
const emit = defineEmits<{ const emit = defineEmits<{
...@@ -40,7 +41,7 @@ const emit = defineEmits<{ ...@@ -40,7 +41,7 @@ const emit = defineEmits<{
}>() }>()
function show(options: ShowGotPrizeModalOptions) { function show(options: ShowGotPrizeModalOptions) {
options.value = options showOptions.value = options
visible.value = true visible.value = true
} }
...@@ -48,13 +49,23 @@ function hide() { ...@@ -48,13 +49,23 @@ function hide() {
visible.value = false visible.value = false
} }
function onClickConfirm() {
hide()
emit('confirm')
}
function onClickClose() {
hide()
emit('close')
}
defineExpose({ defineExpose({
show, show,
hide, hide,
}) })
</script> </script>
<style scoped> <style scoped lang="less">
.got-prize-modal { .got-prize-modal {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
...@@ -65,95 +76,81 @@ defineExpose({ ...@@ -65,95 +76,81 @@ defineExpose({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
// 蒙层
&-mask {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
// 弹窗内容 // 弹窗内容
.content {
&-content {
width: 550rpx;
height: 616rpx;
position: relative; position: relative;
z-index: 2; width: 550rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: 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 { .prize-image {
width: 550rpx; width: 187rpx;
height: 616rpx; height: 187rpx;
position: absolute; border-radius: 18px;
top: 0; object-fit: contain;
left: 0; z-index: 3;
background-size: cover; background-color: #fff9f1;
background-repeat: no-repeat; }
background-position: center;
}
&-awardimg { .prize-name {
width: 180rpx; width: 348rpx;
height: 180rpx; height: 30rpx;
position: absolute; font-size: 34rpx;
top: 150rpx; line-height: 30rpx;
left: 185rpx; color: rgba(0, 0, 0, 1);
object-fit: contain; text-align: center;
z-index: 3; overflow: hidden;
} text-overflow: ellipsis;
white-space: nowrap;
}
&-awardname { .confirm-btn {
width: 348rpx; width: 100%;
height: 30rpx; height: 97rpx;
position: absolute; color: white;
top: 365rpx; background: #d3a357;
left: 101rpx; border-radius: 100rpx;
font-size: 29rpx;
line-height: 30rpx;
color: rgba(0, 0, 0, 1);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-happygetbtn { &::after {
width: 465rpx; border: none;
height: 97rpx; }
position: absolute; }
top: 434rpx;
left: 42rpx; .tips{
background-size: cover; text-align: center;
background-repeat: no-repeat; position: absolute;
background-position: center; left: 0;
transition: opacity 0.3s ease; bottom: 24rpx;
width: 100%;
&:hover { font-size: 24rpx;
opacity: 0.8; color: #3b3b3b;
} }
}
&-closebtn { .close-btn {
width: 60rpx; width: 60rpx;
height: 59rpx; height: 59rpx;
position: absolute; position: absolute;
top: 660rpx; left: 50%;
left: 245rpx; bottom: -100rpx;
background-size: cover; transform: translateX(-50%);
background-repeat: no-repeat; background-size: cover;
background-position: center; background-repeat: no-repeat;
transition: opacity 0.3s ease; background-position: center;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
} }
} }
} }
......
<script setup lang="ts"> <script setup lang="ts">
import {ref, computed, watch, inject} from 'vue' import {ref, computed, inject, onMounted} from 'vue'
import ClickArea from "./ClickArea.vue"; import ClickArea from "./ClickArea.vue";
import {ActivityInfo} from "../types" import {InvitationInfo} from "../types"
import {invitationAssist} from "../api"; import {getCdnUrl} from "../utils"
import {fetchInvitationInfo, invitationAssist} from "../api";
import GotPrizeModal from "./GotPrizeModal.vue";
const isAssist = ref(false) const isAssist = ref(false)
const invitationInfo = ref<InvitationInfo>()
const gotPrizeModalRef = ref<InstanceType<typeof GotPrizeModal>>()
const isLogin = inject('isLogin') const updateShareData = inject('updateShareData')
const updateActivityInfo = inject('updateActivityInfo')
const onGetPhoneNumber = inject('onGetPhoneNumber') const onGetPhoneNumber = inject('onGetPhoneNumber')
const props = defineProps<{ const props = defineProps<{
...@@ -15,15 +18,11 @@ const props = defineProps<{ ...@@ -15,15 +18,11 @@ const props = defineProps<{
area?: { x: number, y: number, width: number, height: number } area?: { x: number, y: number, width: number, height: number }
mdConfig?: MdConfig mdConfig?: MdConfig
} }
activityData?: ActivityInfo
debugMode?: boolean debugMode?: boolean
}>() }>()
const inviteBtnProperties = computed(() => { const isLogin = computed(() => {
return { return !invitationInfo.value?.notLogin
area: {x: 220, y: 110, width: 165, height: 55},
mdConfig: props.properties.mdConfig,
}
}) })
const style = computed(() => { const style = computed(() => {
...@@ -36,71 +35,105 @@ const style = computed(() => { ...@@ -36,71 +35,105 @@ const style = computed(() => {
} }
}) })
watch(() => props.activityData, (activityData) => { const inviteBtnProperties = computed(() => {
if (activityData) { 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 pages = getCurrentPages();
const currentPage = pages[pages.length - 1]; const currentPage = pages[pages.length - 1];
const options = currentPage.options; const options = currentPage.options;
const invitationCode = options.invitationCode; const invitationCode = options.invitationCode;
if (invitationCode && !isAssist.value && isLogin.value) { if (invitationCode && !isAssist.value && isLogin.value) {
handleInvitationAssist(invitationCode); console.log('处理助力邀请码:', incomingCode)
}
} try {
}) const unionId = uni.getStorageSync('unionId');
// 处理邀请助力的通用函数 const res = await invitationAssist(incomingCode, unionId);
const handleInvitationAssist = async (incomingCode) => { if (res && res.success) {
try { uni.showToast({
console.log('处理助力邀请码:', incomingCode) title: '助力成功',
const unionId = uni.getStorageSync('unionId'); icon: 'none',
duration: 2000
const res = await invitationAssist(incomingCode, unionId); });
if (res && res.success) { isAssist.value = true;
uni.showToast({ // 助力成功后重新获取数据
title: '助力成功', await updateInvitationInfo();
icon: 'none', return Promise.resolve();
duration: 2000 } else {
}); uni.showToast({
isAssist.value = true; title: res.message,
// 助力成功后重新获取数据 icon: 'none',
await updateActivityInfo(); duration: 2000
return Promise.resolve(); });
} else { return Promise.reject();
uni.showToast({ }
title: res.message, } catch (error) {
icon: 'none', console.error('助力请求失败:', error)
duration: 2000 uni.showToast({
}); title: error.message,
return Promise.reject(); 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> </script>
<template> <template>
<view class="invite-task" :class="{'debug-mode': debugMode}" :style="style"> <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 <ClickArea
:properties="inviteBtnProperties" :properties="inviteBtnProperties"
:open-type="isLogin ? 'share' : 'getPhoneNumber'" :open-type="isLogin ? 'share' : 'getPhoneNumber'"
@click="clickInvite"
@getphonenumber="onGetPhoneNumber" @getphonenumber="onGetPhoneNumber"
debug-mode :debug-mode="debugMode"
/> />
</view> </view>
<GotPrizeModal ref="gotPrizeModalRef"/>
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
...@@ -110,5 +143,18 @@ function clickInvite() { ...@@ -110,5 +143,18 @@ function clickInvite() {
&.debug-mode { &.debug-mode {
background-color: rgba(255, 0, 0, 0.3); 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> </style>
\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view class="activity-page" v-if="!loading" :style="bgStyle"> <view class="activity-page" v-if="!loading" :style="bgStyle">
<!-- 返回按钮 --> <!-- 返回按钮 -->
<view class="nav-left"> <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"/> @click="handleBack"/>
</view> </view>
...@@ -10,52 +10,40 @@ ...@@ -10,52 +10,40 @@
<ImageSwiper <ImageSwiper
v-if="component.type === 'image-swiper'" v-if="component.type === 'image-swiper'"
v-bind="component" v-bind="component"
:activity-data="activityInfo"
/> />
<ClickArea <ClickArea
v-else-if="component.type === 'click-area'" v-else-if="component.type === 'click-area'"
v-bind="component" v-bind="component"
debug-mode debug-mode
:activity-data="activityInfo"
/> />
<InviteTask <InviteTask
v-else-if="component.type === 'invite-task'" v-else-if="component.type === 'invite-task'"
v-bind="component" v-bind="component"
:debug-mode="false" :debug-mode="true"
:activity-data="activityInfo"
/> />
</template> </template>
<GotPrizeModal :visible="showGotPrizeModal" :award-name="currentAwardName" :award-image-url="currentAwardImageUrl" <GotPrizeModal :visible="showGotPrizeModal" :award-name="currentAwardName" :award-image-url="currentAwardImageUrl"
@close="handleGotPrizeModalClose" @happy-get="handleHappyGet"/> @close="handleGotPrizeModalClose" @happy-get="handleHappyGet"/>
</view> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref, onMounted, computed, getCurrentInstance, provide} from 'vue' 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 {useHomeStore} from '@/stores/home'; // Assuming homeStore path
import {useUserStore} from '@/stores/user'; // Import userStore 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 GotPrizeModal from '../components/GotPrizeModal.vue'; // Import GotPrizeModal if needed import ClickArea from "./components/ClickArea.vue";
import md from '@/md.js'; import ImageSwiper from "./components/ImageSwiper.vue";
import ClickArea from "../components/ClickArea.vue"; import InviteTask from "./components/InviteTask.vue";
import ImageSwiper from "../components/ImageSwiper.vue";
import './index.less'
import InviteTask from "../components/InviteTask.vue";
import {ActivityInfo} from "../types";
// 响应式数据 // 响应式数据
const pageConfig = ref({}) // 配置对象 const pageConfig = ref({}) // 配置对象
const loading = ref(true) // 加载状态 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({ const shareData = ref({
title: '星妈会超级品牌周来啦!', title: '星妈会超级品牌周来啦!',
imageUrl: 'https://course.feihe.com/momclub-picture/Act915Page/v2/act915ShareImg.png', imageUrl: 'https://course.feihe.com/momclub-picture/Act915Page/v2/act915ShareImg.png',
...@@ -67,7 +55,7 @@ const homeStore = useHomeStore(); ...@@ -67,7 +55,7 @@ const homeStore = useHomeStore();
const userStore = useUserStore(); const userStore = useUserStore();
function updateShareData(data) { function updateShareData(data) {
shareData.value = data Object.assign(shareData.value, data)
} }
// 获取背景样式的辅助函数 // 获取背景样式的辅助函数
...@@ -95,18 +83,15 @@ const getShareData = (type) => { ...@@ -95,18 +83,15 @@ const getShareData = (type) => {
const {title, imageUrl, path} = shareData.value const {title, imageUrl, path} = shareData.value
const sharePath = type.from == 'button' ? `${path}?invitationCode=${invitationCode.value}` : path
console.log('分享参数:', { console.log('分享参数:', {
title, title,
path: sharePath, path,
imageUrl, imageUrl,
invitationCode: invitationCode.value,
}) })
return { return {
title, title,
path: sharePath, path,
imageUrl, imageUrl,
} }
} }
...@@ -152,57 +137,6 @@ const updatePageConfig = async () => { ...@@ -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 () => { const initPage = async () => {
console.log('开始初始化页面...') console.log('开始初始化页面...')
...@@ -211,13 +145,6 @@ const initPage = async () => { ...@@ -211,13 +145,6 @@ const initPage = async () => {
await updatePageConfig() await updatePageConfig()
console.log('配置数据:', pageConfig.value) console.log('配置数据:', pageConfig.value)
// 请求 getAct915Home 接口(包含助力逻辑处理)
await updateActivityInfo();
if (unclaimedPrizes.value?.length > 0) {
showPrizeModal()
}
} }
// 生命周期 // 生命周期
...@@ -261,7 +188,7 @@ const onGetPhoneNumber = async (e) => { ...@@ -261,7 +188,7 @@ const onGetPhoneNumber = async (e) => {
// 隐藏授权弹窗 // 隐藏授权弹窗
userStore.phoneCallback(e.detail, null, null, async () => { userStore.phoneCallback(e.detail, null, null, async () => {
// 重新获取用户信息(登录后) // 重新获取用户信息(登录后)
await updateActivityInfo(); // todo 更新组件状态
console.warn('授权后重新获取用户信息') console.warn('授权后重新获取用户信息')
}, { }, {
...@@ -278,31 +205,13 @@ const onGetPhoneNumber = async (e) => { ...@@ -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 使用 // 暴露给 Options API 使用
defineExpose({ defineExpose({
getShareData getShareData
}) })
provide('pageName', '1015专题活动首页') provide('pageName', '1015专题活动首页')
provide('isLogin', isLogin)
provide('updateShareData', updateShareData) provide('updateShareData', updateShareData)
provide('updateActivityInfo', updateActivityInfo)
provide('onGetPhoneNumber', onGetPhoneNumber) provide('onGetPhoneNumber', onGetPhoneNumber)
</script> </script>
...@@ -319,3 +228,29 @@ export default { ...@@ -319,3 +228,29 @@ export default {
}, },
} }
</script> </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>
This diff is collapsed.
.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;
}
}
}
# 抽奖页面弹窗组件
## 组件结构
```
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
}
```
## 样式说明
所有弹窗组件都使用绝对定位,覆盖在主页面之上。弹窗背景使用半透明遮罩,确保用户注意力集中在弹窗内容上。
每个弹窗组件都有独立的样式文件,可以根据设计需求进行调整。
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
}
<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>
@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;
}
}
}
const version = 'v1' 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 = { export const act1015RuleModalConfig = {
// 图片配置 // 图片配置
images: { images: {
background: `act1015Component/act1015RuleModal/${version}/act1015RuleModalBg.png`, background: `act1015Component/act1015RuleModal/${version}/act1015RuleModalBg.png`,
textImg: `act1015Component/act1015RuleModal/${version}/act1015RuleModalTextImg.png`, textImg: `act1015Component/act1015RuleModal/${version}/act1015RuleModalTextImg.png`,
closeBtn: `act1015Component/act1015RuleModal/${version}/act1015RuleModalCloseBtn.png` closeBtn: closeBtnUrl
}, },
// 文本配置 // 文本配置
......
...@@ -5,9 +5,8 @@ ...@@ -5,9 +5,8 @@
<!-- 弹窗内容 --> <!-- 弹窗内容 -->
<view class="rulemodal-content"> <view class="rulemodal-content">
<span class="rulemodalbg" <p class="rulemodal-title">活动规则</p>
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
<!-- 规则内容区域 - 支持滚动 --> <!-- 规则内容区域 - 支持滚动 -->
<view class="rulemodal-text-container"> <view class="rulemodal-text-container">
<image class="rulemodaltextimg" <image class="rulemodaltextimg"
...@@ -16,9 +15,9 @@ ...@@ -16,9 +15,9 @@
@load="console.log('规则图片加载成功')" @load="console.log('规则图片加载成功')"
@error="console.log('规则图片加载失败')"></image> @error="console.log('规则图片加载失败')"></image>
</view> </view>
<span class="rulemodalclosebtn" <span class="rulemodalclosebtn"
:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.closeBtn)})` }" :style="{ backgroundImage: `url(${getImageUrl(config.images.closeBtn)})` }"
@click="handleCloseClick"></span> @click="handleCloseClick"></span>
</view> </view>
</view> </view>
......
...@@ -31,24 +31,21 @@ ...@@ -31,24 +31,21 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: white;
border-radius: 48rpx;
} }
.rulemodalbg { .rulemodal-title{
width: 550rpx; color: #bc7900;
height: 667rpx; font-weight: bold;
position: absolute; font-size: 44rpx;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
} }
// 规则内容滚动容器 // 规则内容滚动容器
.rulemodal-text-container { .rulemodal-text-container {
width: 100%; width: 100%;
height: 471rpx; height: 471rpx;
position: absolute; //position: absolute;
// top: 154rpx; // top: 154rpx;
// left: 35rpx; // left: 35rpx;
overflow-y: auto; overflow-y: auto;
......
const version = 'v1' const version = 'v1'
const baseUrl = 'http://127.0.0.1:8080/activity/1015'
function getCdnUrl(path){
return `${baseUrl}/${version}/${path}`
}
// 抽奖页面配置 // 抽奖页面配置
export const lotteryConfig = { export const lotteryConfig = {
// 页面状态 // 页面状态
...@@ -10,22 +16,15 @@ export const lotteryConfig = { ...@@ -10,22 +16,15 @@ export const lotteryConfig = {
// 图片配置 // 图片配置
images: { images: {
background: `LotteryPage/${version}/LotteryPageBg.png`, background: getCdnUrl('turntable/bg.jpg'),
turnTableBg: `LotteryPage/${version}/LotteryPageTurnTableBg.png`, turnTableBg: getCdnUrl('turntable/panebg.png'),
turnTableLogo: `LotteryPage/${version}/LotteryPageTurnTableLogo.png`, turnTableLogo: getCdnUrl('turntable/center.png'),
awards6Bg: `LotteryPage/${version}/LotteryPageTurnTableAwards6Bg.png`, title: getCdnUrl('turntable/title.png'),
awards5Bg: `LotteryPage/${version}/LotteryPageTurnTableAwards5Bg.png`, ruleBtn: getCdnUrl('turntable/rule-btn.png'),
awards4Bg: `LotteryPage/${version}/LotteryPageTurnTableAwards4Bg.png`, awardBtn: getCdnUrl('turntable/award-btn.png'),
awards3Bg: `LotteryPage/${version}/LotteryPageTurnTableAwards3Bg.png`, noticeConBg: getCdnUrl('turntable/notice-bg.png'),
awards2Img: `LotteryPage/${version}/LotteryPageTurnTableAwards2Img.png`, drawBtn: getCdnUrl('turntable/draw-btn.png'),
awards1Img: `LotteryPage/${version}/LotteryPageTurnTableAwards1Img.png`, lotterypageturntableawardsSelBg: getCdnUrl('turntable/sel-bg.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`,
}, },
// 奖品配置 // 奖品配置
...@@ -89,11 +88,6 @@ export const lotteryConfig = { ...@@ -89,11 +88,6 @@ export const lotteryConfig = {
} }
} }
// 获取图片URL的工具函数
export const getImageUrl = (imagePath) => {
return imagePath
}
// 获取随机公告 // 获取随机公告
export const getRandomNotice = () => { export const getRandomNotice = () => {
const notices = [ const notices = [
......
...@@ -361,9 +361,9 @@ ...@@ -361,9 +361,9 @@
} }
.lotterypagetitle { .lotterypagetitle {
width: 531rpx; width: 503rpx;
height: 99rpx; height: 68rpx;
left: 111rpx; left: 121rpx;
top: 257rpx; top: 257rpx;
position: absolute; position: absolute;
background-size: cover; background-size: cover;
...@@ -424,7 +424,7 @@ ...@@ -424,7 +424,7 @@
} }
.lotterypagenoticecontext-wrapper { .lotterypagenoticecontext-wrapper {
width: 482rpx; width: 490rpx;
height: 40rpx; height: 40rpx;
left: 135rpx; left: 135rpx;
top: 5rpx; top: 5rpx;
...@@ -441,44 +441,34 @@ ...@@ -441,44 +441,34 @@
} }
.lotterypagenoticecontext { .lotterypagenoticecontext {
width: 502rpx; position: absolute;
height: 40rpx; height: 40rpx;
position: absolute;
top: 0;
left: 0;
font-size: 24rpx; font-size: 24rpx;
line-height: 40rpx;
color: rgba(255, 255, 255, 1);
display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
white-space: nowrap; display: flex;
text-align: left; align-items: center;
overflow: hidden;
text-overflow: ellipsis;
} }
.lotterypagenoticeconsoundicon { .lotterypagenoticetext{
width: 23rpx; width: 390rpx;
height: 22rpx; white-space: nowrap;
left: 98rpx; text-align: left;
top: 14rpx; overflow: hidden;
position: absolute; text-overflow: ellipsis;
background-size: cover; display: inline-block;
background-repeat: no-repeat; }
background-position: center;
.lotterypagenoticetime{
transition: opacity 0.3s ease; color: #797979;
margin-left: 10rpx;
&:hover { flex-shrink: 0;
opacity: 0.8; }
}
}
} }
.lotterypagedrawbtn { .lotterypagedrawbtn {
width: 481rpx; width: 466rpx;
height: 113rpx; height: 97rpx;
left: 135rpx; left: 135rpx;
top: 1256rpx; top: 1256rpx;
position: absolute; position: absolute;
...@@ -516,6 +506,6 @@ ...@@ -516,6 +506,6 @@
position: absolute; position: absolute;
font-size: 24rpx; font-size: 24rpx;
line-height: 23rpx; line-height: 23rpx;
color: rgba(255, 255, 255, 1); //color: rgba(255, 255, 255, 1);
} }
} }
This diff is collapsed.
This diff is collapsed.
...@@ -31,7 +31,7 @@ export interface Prize{ ...@@ -31,7 +31,7 @@ export interface Prize{
prizeImageUrl: string prizeImageUrl: string
} }
export interface ActivityInfo { export interface InvitationInfo {
invitationCode: string invitationCode: string
invitationText: string invitationText: string
invitationImageUrl: string invitationImageUrl: string
......
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;
}
...@@ -5,20 +5,20 @@ ...@@ -5,20 +5,20 @@
``` ```
activity0915/lottery/ activity0915/lottery/
├── lottery.vue # 主抽奖页面 ├── lottery.vue # 主抽奖页面
├── config.js # 主页面配置 ├── mock-configs.js # 主页面配置
├── lotterypage.less # 主页面样式 ├── lotterypage.less # 主页面样式
└── components/ # 弹窗组件目录 └── components/ # 弹窗组件目录
├── ruleModal/ # 规则弹窗 ├── ruleModal/ # 规则弹窗
│ ├── ruleModal.vue │ ├── ruleModal.vue
│ ├── config.js │ ├── mock-configs.js
│ └── rulemodal.less │ └── rulemodal.less
├── drawSucModal/ # 抽奖成功弹窗 ├── drawSucModal/ # 抽奖成功弹窗
│ ├── drawSucModal.vue │ ├── drawSucModal.vue
│ ├── config.js │ ├── mock-configs.js
│ └── drawsucmodal.less │ └── drawsucmodal.less
└── drawFailModal/ # 抽奖失败弹窗 └── drawFailModal/ # 抽奖失败弹窗
├── drawFailModal.vue ├── drawFailModal.vue
├── config.js ├── mock-configs.js
└── drawfailmodal.less └── drawfailmodal.less
``` ```
......
...@@ -343,7 +343,7 @@ components/xingmaLab/ ...@@ -343,7 +343,7 @@ components/xingmaLab/
├── Xingmalabconfirmpop.vue # 确认弹窗组件 ├── Xingmalabconfirmpop.vue # 确认弹窗组件
├── Xingmalabnotimepop.vue # 无时间弹窗组件 ├── Xingmalabnotimepop.vue # 无时间弹窗组件
├── xingmalabImages.js # 图片配置文件 ├── xingmalabImages.js # 图片配置文件
├── config.js # 旧版配置文件(已废弃) ├── mock-configs.js # 旧版配置文件(已废弃)
├── README.md # 使用说明 ├── README.md # 使用说明
└── IMAGES.md # 图片资源说明 └── IMAGES.md # 图片资源说明
``` ```
...@@ -352,7 +352,7 @@ components/xingmaLab/ ...@@ -352,7 +352,7 @@ components/xingmaLab/
从旧版配置系统迁移到新的图片配置系统: 从旧版配置系统迁移到新的图片配置系统:
1. **移除依赖**: 不再依赖 `config.js` 中的复杂配置 1. **移除依赖**: 不再依赖 `mock-configs.js` 中的复杂配置
2. **简化导入**: 直接导入 `XINGMALAB_IMAGES` 常量 2. **简化导入**: 直接导入 `XINGMALAB_IMAGES` 常量
3. **简化样式**: 移除计算属性,直接使用 CSS 样式 3. **简化样式**: 移除计算属性,直接使用 CSS 样式
4. **保持兼容**: 按钮位置和尺寸与 React 版本完全一致 4. **保持兼容**: 按钮位置和尺寸与 React 版本完全一致
...@@ -24,22 +24,28 @@ Vue.config.productionTip = false; ...@@ -24,22 +24,28 @@ Vue.config.productionTip = false;
App.mpType = "app"; App.mpType = "app";
const app = new Vue({ const app = new Vue({
...App, ...App,
}); });
app.$mount(); app.$mount();
// #endif // #endif
// #ifdef VUE3 // #ifdef VUE3
import { createSSRApp } from "vue"; import {createSSRApp} from "vue";
import {useGlobalStore} from "@/stores/global";
export function createApp() { export function createApp() {
const app = createSSRApp(App); const app = createSSRApp(App);
app.use(Pinia.createPinia()); app.use(Pinia.createPinia());
// app.config.globalProperties.$api = apiRequest.api; // app.config.globalProperties.$api = apiRequest.api;
app.config.globalProperties.$baseUrl = BASE_URL; app.config.globalProperties.$baseUrl = BASE_URL;
app.config.globalProperties.$sensors = md.sensors; app.config.globalProperties.$sensors = md.sensors;
return {
app, useGlobalStore().setBaseUrl(BASE_URL)
Pinia,
}; return {
app,
Pinia,
};
} }
// #endif // #endif
...@@ -279,7 +279,7 @@ ...@@ -279,7 +279,7 @@
"root": "activities/1015", "root": "activities/1015",
"pages": [ "pages": [
{ {
"path": "home/index", "path": "home",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"shareAppMessage": true, "shareAppMessage": true,
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
XingmaLabDetailPage/ XingmaLabDetailPage/
├── XingmaLabDetailPage.vue # 主组件文件 ├── XingmaLabDetailPage.vue # 主组件文件
├── XingmaLabDetailPage.less # 样式文件 ├── XingmaLabDetailPage.less # 样式文件
├── config.js # 配置文件 ├── mock-configs.js # 配置文件
└── README.md # 说明文档 └── README.md # 说明文档
``` ```
...@@ -57,7 +57,7 @@ import XingmaLabDetailPage from '@/pages/XingmaLabDetailPage/XingmaLabDetailPage ...@@ -57,7 +57,7 @@ import XingmaLabDetailPage from '@/pages/XingmaLabDetailPage/XingmaLabDetailPage
### 图片资源配置 ### 图片资源配置
`config.js` 中配置图片资源路径: `mock-configs.js` 中配置图片资源路径:
```javascript ```javascript
export const xingmaLabDetailConfig = { export const xingmaLabDetailConfig = {
......
...@@ -72,7 +72,7 @@ upload: { ...@@ -72,7 +72,7 @@ upload: {
pages/XingmaLabPublishPage/ pages/XingmaLabPublishPage/
├── XingmaLabPublishPage.vue # 主组件文件 ├── XingmaLabPublishPage.vue # 主组件文件
├── XingmaLabPublishPage.less # 样式文件 ├── XingmaLabPublishPage.less # 样式文件
├── config.js # 配置文件 ├── mock-configs.js # 配置文件
├── README.md # 功能说明文档 ├── README.md # 功能说明文档
└── CHANGELOG.md # 更新日志 └── CHANGELOG.md # 更新日志
``` ```
......
This diff is collapsed.
...@@ -14,10 +14,14 @@ export const useGlobalStore = defineStore('global', { ...@@ -14,10 +14,14 @@ export const useGlobalStore = defineStore('global', {
isWxFriendCircle:false, isWxFriendCircle:false,
isShowLoading: false, isShowLoading: false,
openId: openId, openId: openId,
unionId: unionId unionId: unionId,
baseUrl: '',
}; };
}, },
actions: { actions: {
setBaseUrl(url){
this.baseUrl = url
},
/** /**
* 设置用户cuk * 设置用户cuk
* @param {Object} cuk * @param {Object} cuk
......
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
npm update mp-html 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` 目录下,否则无法运行 如果在 **nvue** 中使用还要将 `dist/uni-app/static` 目录下的内容拷贝到项目的 `static` 目录下,否则无法运行
查看 [快速开始](https://jin-yufeng.github.io/mp-html/#/overview/quickstart) 了解更多 查看 [快速开始](https://jin-yufeng.github.io/mp-html/#/overview/quickstart) 了解更多
...@@ -158,7 +158,7 @@ ...@@ -158,7 +158,7 @@
```bash ```bash
npm install mp-html npm install mp-html
``` ```
2. 编辑 `tools/config.js` 中的 `plugins` 项,选择需要的插件 2. 编辑 `tools/mock-configs.js` 中的 `plugins` 项,选择需要的插件
3. 生成新的组件包 3. 生成新的组件包
`node_modules/mp-html` 目录下执行 `node_modules/mp-html` 目录下执行
```bash ```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