Skip to content

飞
飞鹤小程序
Commit 3fa8b878 authored by chenkai@duiba.com.cn's avatar chenkai@duiba.com.cn
Browse files
Options

222

parent 5b9c1786
Show whitespace changes
Inline Side-by-side
Showing with 3106 additions and 3079 deletions
components/pointRightsCom/monthGift.vue
View file @ 3fa8b878
......@@ -477,19 +477,36 @@
</template>
<script setup>
import { getCurrentInstance, reactive, computed, onMounted, watch, onUnmounted } from 'vue'
import { MONTH_GIFT_IMAGES } from './monthGiftImages.js'
import { monthlyGiftIndex, monthlyGiftDrawOne, monthlyGiftDrawAll } from '../../api/monthGift.js'
import { jump } from '../../utils/index.js'
import md from '../../md.js'
// import popupJingxuan from '../popup-jingxuan/popup-jingxuan.vue'
// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
// 接收用户等级参数
const props = defineProps({
import {
getCurrentInstance,
reactive,
computed,
onMounted,
watch,
onUnmounted
} from 'vue'
import {
MONTH_GIFT_IMAGES
} from './monthGiftImages.js'
import {
monthlyGiftIndex,
monthlyGiftDrawOne,
monthlyGiftDrawAll
} from '../../api/monthGift.js'
import {
jump
} from '../../utils/index.js'
import md from '../../md.js'
// import popupJingxuan from '../popup-jingxuan/popup-jingxuan.vue'
// 获取全局属性
const {
proxy
} = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
// 接收用户等级参数
const props = defineProps({
currentLevel: {
type: Number,
required: true,
......@@ -500,10 +517,10 @@ const props = defineProps({
required: true,
validator: (value) => [0, 1, 2, 3, 4].includes(value)
}
})
})
// 业务逻辑状态
const state = reactive({
// 业务逻辑状态
const state = reactive({
// 精选好券状态 - 根据 equityCouponList 动态生成
couponStatus: {
diamond: 'unlocked', // 'locked', 'unlocked', 'used'
......@@ -523,8 +540,7 @@ const state = reactive({
// 当前选中的时间段
selectedTimeSlot: 0, // 0: 10:00, 1: 12:00, 2: 14:00, 3: 16:00
// 时间段状态 - 根据 batchCoupon.stockBatchList 动态生成
timeSlots: [
{
timeSlots: [{
time: '10:00',
status: 'locked', // 'locked', 'unlocked', 'purchased'
stockBatchId: null,
......@@ -574,47 +590,47 @@ const state = reactive({
countdownTimer: null,
// 新增：弹窗控制状态
showJingxuanPopup: false
})
})
// 等级映射常量
const LEVEL_MAP = {
// 等级映射常量
const LEVEL_MAP = {
0: 'gold',
1: 'platinum',
2: 'diamond',
3: 'starlight',
4: 'starshine'
}
}
// 等级名称到弹窗类型的映射
const LEVEL_TO_POPUP_TYPE = {
// 等级名称到弹窗类型的映射
const LEVEL_TO_POPUP_TYPE = {
'gold': '1', // 1 黄金
'platinum': '2', // 2 铂金
'diamond': '3', // 3 钻石
'starlight': '4', // 4 星光
'starshine': '5' // 5 星耀
}
}
// 计算属性：当前展示等级
const currentLevelName = computed(() => LEVEL_MAP[props.currentLevel])
// 计算属性：当前展示等级
const currentLevelName = computed(() => LEVEL_MAP[props.currentLevel])
// 方法
// 显示精选好券领取成功弹窗
const showJingxuanPopup = () => {
// 方法
// 显示精选好券领取成功弹窗
const showJingxuanPopup = () => {
state.showJingxuanPopup = true
}
}
// 关闭精选好券领取成功弹窗
const closeJingxuanPopup = () => {
// 关闭精选好券领取成功弹窗
const closeJingxuanPopup = () => {
state.showJingxuanPopup = false
}
}
const handleCouponClick = async (level) => {
const handleCouponClick = async (level) => {
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "积分服务页",
componentName: "会员权益",
componentContent: "月月礼-"+getCouponButtonText(currentLevelName.value)
componentContent: "月月礼-" + getCouponButtonText(currentLevelName.value)
});
console.log("handleCouponClick level:", level, "state.couponStatus:", state.couponStatus)
......@@ -658,14 +674,14 @@ const handleCouponClick = async (level) => {
duration: 2000
})
}
}
}
const handleBuyClick = async (level) => {
const handleBuyClick = async (level) => {
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "积分服务页",
componentName: "会员权益",
componentContent: "月月礼-" +getBuyButtonText(currentLevelName.value)
componentContent: "月月礼-" + getBuyButtonText(currentLevelName.value)
});
console.log(`Clicked buy for ${level}`)
......@@ -729,7 +745,10 @@ const handleBuyClick = async (level) => {
const equityCouponInfoId = currentTimeSlot.equityCouponInfoId
const stockBatchId = currentTimeSlot.stockBatchId
console.log("equityCouponInfoId", equityCouponInfoId, stockBatchId)
const result = await monthlyGiftDrawOne({ equityCouponInfoId, stockBatchId })
const result = await monthlyGiftDrawOne({
equityCouponInfoId,
stockBatchId
})
console.warn("result", result)
if (result.code == '000000' && result.data.receiveResult === 1) {
......@@ -762,22 +781,23 @@ const handleBuyClick = async (level) => {
}
}
}
}
// 切换时间段
const switchTimeSlot = (index) => {
// 切换时间段
const switchTimeSlot = (index) => {
state.selectedTimeSlot = index
console.log(`切换到时间段: ${state.timeSlots[index].time}`)
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "积分服务页",
componentName: "会员权益",
componentContent: "月月礼-" + state.timeSlots[state.selectedTimeSlot].time+"-"+getBuyButtonText(currentLevelName.value)
componentContent: "月月礼-" + state.timeSlots[state.selectedTimeSlot].time + "-" + getBuyButtonText(
currentLevelName.value)
});
}
}
// 获取精选好券按钮文本
const getCouponButtonText = (level) => {
// 获取精选好券按钮文本
const getCouponButtonText = (level) => {
if (state.couponStatus[level] === 'used') {
return '去使用'
}
......@@ -788,10 +808,10 @@ const getCouponButtonText = (level) => {
return '待解锁'
}
return '立即领取'
}
}
// 获取精选好券按钮样式类
const getCouponButtonClass = (level) => {
// 获取精选好券按钮样式类
const getCouponButtonClass = (level) => {
console.warn("getCouponButtonClass level:", level, "state.couponStatus:", state.couponStatus)
// 检查用户等级是否符合领取条件
......@@ -812,10 +832,10 @@ const getCouponButtonClass = (level) => {
} else {
return 'coupon-btn-locked'
}
}
}
// 获取限时1分购按钮文本
const getBuyButtonText = (level) => {
// 获取限时1分购按钮文本
const getBuyButtonText = (level) => {
// 检查用户等级是否符合领取条件
const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
......@@ -850,10 +870,10 @@ const getBuyButtonText = (level) => {
}
return '待开启'
}
}
// 获取限时1分购按钮样式类
const getBuyButtonClass = (level) => {
// 获取限时1分购按钮样式类
const getBuyButtonClass = (level) => {
const levelName = currentLevelName.value
const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
......@@ -878,11 +898,11 @@ const getBuyButtonClass = (level) => {
} else {
return 'buy-btn-locked-' + levelName
}
}
}
// 获取时间段样式类
const getTimeSlotClass = (index) => {
// 获取时间段样式类
const getTimeSlotClass = (index) => {
const timeSlot = state.timeSlots[index]
if (index === state.selectedTimeSlot) {
......@@ -901,15 +921,17 @@ const getTimeSlotClass = (index) => {
default:
return 'time-slot-inactive'
}
}
}
// 获取月礼包数据
const fetchMonthlyGiftData = async () => {
// 获取月礼包数据
const fetchMonthlyGiftData = async () => {
console.log('Fetching monthly gift data for level:', currentLevelName.value)
try {
// 获取月礼包首页数据
const result = await monthlyGiftIndex({ level: currentLevelName.value })
const result = await monthlyGiftIndex({
level: currentLevelName.value
})
console.log('API response:', result)
if (result.success) {
......@@ -951,10 +973,10 @@ const fetchMonthlyGiftData = async () => {
} catch (error) {
console.error('获取月礼包数据失败:', error)
}
}
}
// 倒计时处理函数
const startCountdown = (milliseconds) => {
// 倒计时处理函数
const startCountdown = (milliseconds) => {
// 清除之前的定时器
if (state.countdownTimer) {
clearTimeout(state.countdownTimer)
......@@ -984,51 +1006,52 @@ const startCountdown = (milliseconds) => {
// 可选：立即刷新或忽略
// fetchMonthlyGiftData()
}
}
}
// 清理定时器
onUnmounted(() => {
// 清理定时器
onUnmounted(() => {
if (state.countdownTimer) {
clearTimeout(state.countdownTimer)
}
})
})
const initExposure = () => {
const initExposure = () => {
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "积分服务页",
componentName: "会员权益",
componentContent: "月月礼-" + state.timeSlots[state.selectedTimeSlot].time+"-"+getBuyButtonText(currentLevelName.value)
componentContent: "月月礼-" + state.timeSlots[state.selectedTimeSlot].time + "-" + getBuyButtonText(
currentLevelName.value)
});
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "积分服务页",
componentName: "会员权益",
componentContent: "月月礼-"+getCouponButtonText(currentLevelName.value)
componentContent: "月月礼-" + getCouponButtonText(currentLevelName.value)
});
}
}
// 初始化
onMounted(async () => {
// 初始化
onMounted(async () => {
console.log('MonthGift component mounted, current level:', props.currentLevel, props.userLevel)
await fetchMonthlyGiftData()
initExposure();
})
})
// 调试函数：打印当前状态
const debugState = () => {
// 调试函数：打印当前状态
const debugState = () => {
console.log('=== Debug State ===')
console.log('currentLevelName:', currentLevelName.value)
console.log('couponStatus:', state.couponStatus)
console.log('buyStatus:', state.buyStatus)
console.log('equityCouponList:', state.equityCouponList)
console.log('==================')
}
}
// 根据 equityCouponList 更新精选好券状态
const updateCouponStatus = (equityCouponList) => {
// 根据 equityCouponList 更新精选好券状态
const updateCouponStatus = (equityCouponList) => {
console.warn("updateCouponStatus", equityCouponList, state.couponStatus)
// 重置所有等级的状态为锁定
......@@ -1067,10 +1090,10 @@ const updateCouponStatus = (equityCouponList) => {
}
console.warn("Updated couponStatus:", state.couponStatus)
}
}
// 根据 batchCoupon 更新限时1分购状态和时间段状态
const updateBuyStatusAndTimeSlots = (batchCouponData) => {
// 根据 batchCoupon 更新限时1分购状态和时间段状态
const updateBuyStatusAndTimeSlots = (batchCouponData) => {
// 重置所有等级的购买状态
Object.keys(state.buyStatus).forEach(level => {
state.buyStatus[level] = 'locked'
......@@ -1169,12 +1192,12 @@ const updateBuyStatusAndTimeSlots = (batchCouponData) => {
}
console.log('Updated buyStatus:', state.buyStatus)
}
}
// 获取批次状态的辅助函数
const getBatchStatus = (status) => {
// 获取批次状态的辅助函数
const getBatchStatus = (status) => {
// 根据 stockBatchList 中的 status 字段映射到时间段状态
// status: 0-待开始, 1-抢券中, 2-已结束
console.log('getBatchStatus called with status:', status, 'type:', typeof status)
......@@ -1196,26 +1219,26 @@ const getBatchStatus = (status) => {
console.log('Status', numStatus, '-> locked (默认)')
return 'locked' // 默认锁定状态
}
}
}
// 获取默认时间段文本（当API没有返回足够时间段时使用）
const getDefaultTimeText = (index) => {
// 获取默认时间段文本（当API没有返回足够时间段时使用）
const getDefaultTimeText = (index) => {
const defaultTimes = ['10:00', '12:00', '14:00', '16:00']
return defaultTimes[index] || ''
}
}
// 检查用户等级是否足够
const isLevelSufficient = () => {
// 检查用户等级是否足够
const isLevelSufficient = () => {
const levelOrder = [2, 3, 4]; // gold, platinum, diamond, starlight, starshine
const userLevelIndex = levelOrder.indexOf(props.userLevel * 1);
return userLevelIndex >= 0;
}
}
// 监听 userLevel 变化
watch(() => props.userLevel, (newUserLevel, oldUserLevel) => {
// 监听 userLevel 变化
watch(() => props.userLevel, (newUserLevel, oldUserLevel) => {
console.log(`userLevel changed from ${oldUserLevel} to ${newUserLevel}`)
// 如果 userLevel 发生变化，重新获取数据
......@@ -1224,10 +1247,12 @@ watch(() => props.userLevel, (newUserLevel, oldUserLevel) => {
console.log('Refreshing data due to userLevel change')
fetchMonthlyGiftData()
}
}, { immediate: false })
}, {
immediate: false
})
// 获取时间段状态文本
const getTimeSlotStatusText = (index) => {
// 获取时间段状态文本
const getTimeSlotStatusText = (index) => {
const timeSlot = state.timeSlots[index]
console.log(`getTimeSlotStatusText called for index ${index}:`, timeSlot)
......@@ -1242,7 +1267,9 @@ const getTimeSlotStatusText = (index) => {
const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
const requiredLevelIndex = levelOrder.indexOf(props.currentLevel * 1)
console.log(`User level: ${props.userLevel} (${userLevelName.value}), Required level: ${props.currentLevel} (${currentLevelName.value})`)
console.log(
`User level: ${props.userLevel} (${userLevelName.value}), Required level: ${props.currentLevel} (${currentLevelName.value})`
)
console.log(`User level index: ${userLevelIndex}, Required level index: ${requiredLevelIndex}`)
// 如果用户等级不够，显示"待解锁"
......@@ -1266,11 +1293,11 @@ const getTimeSlotStatusText = (index) => {
default:
return '待开始'
}
}
}
</script>
<style lang="less" scoped>
.monthgift {
.monthgift {
width: 686rpx;
height: 1113rpx;
left: 0rpx;
......@@ -2706,10 +2733,10 @@ const getTimeSlotStatusText = (index) => {
font-size: 36rpx;
color: rgba(102, 102, 102, 1);
}
}
}
// 精选好券按钮样式
.coupon-button-container {
// 精选好券按钮样式
.coupon-button-container {
position: absolute;
left: 99rpx;
top: 453rpx;
......@@ -2759,10 +2786,10 @@ const getTimeSlotStatusText = (index) => {
cursor: not-allowed;
}
}
}
}
// 限时1分购按钮样式
.buy-button-container {
// 限时1分购按钮样式
.buy-button-container {
position: absolute;
left: 427rpx;
top: 80rpx;
......@@ -2925,13 +2952,13 @@ const getTimeSlotStatusText = (index) => {
color: #241b15;
}
}
}
}
// 时间段样式
.diamond1buycomtime1,
.diamond1buycomtime2,
.diamond1buycomtime3,
.diamond1buycomtime4 {
// 时间段样式
.diamond1buycomtime1,
.diamond1buycomtime2,
.diamond1buycomtime3,
.diamond1buycomtime4 {
transition: all 0.3s ease;
......@@ -2998,10 +3025,10 @@ const getTimeSlotStatusText = (index) => {
top: 30rpx;
position: absolute;
}
}
}
/* 精选好券按钮样式 */
.coupon-btn {
/* 精选好券按钮样式 */
.coupon-btn {
width: 160rpx;
height: 60rpx;
border-radius: 30rpx;
......@@ -3015,65 +3042,65 @@ const getTimeSlotStatusText = (index) => {
padding: 0;
margin: 0;
line-height: 1;
}
}
.coupon-btn-locked {
.coupon-btn-locked {
background: linear-gradient(to right, #b0b0b0, #d0d0d0);
color: #ffffff;
}
}
.coupon-btn-purchased {
.coupon-btn-purchased {
background: linear-gradient(to right, #b0b0b0, #d0d0d0);
color: #ffffff;
}
}
.coupon-btn-purchased-gold {
.coupon-btn-purchased-gold {
background: linear-gradient(to right, #906632, #ab7a44);
color: #ffffff;
}
}
.coupon-btn-purchased-platinum {
.coupon-btn-purchased-platinum {
background: linear-gradient(to right, #5189c0, #6fa2d5);
color: #ffffff;
}
}
.coupon-btn-purchased-diamond {
.coupon-btn-purchased-diamond {
background: linear-gradient(to right, #7253a5, #997acc);
color: #ffffff;
}
}
.coupon-btn-purchased-starlight {
.coupon-btn-purchased-starlight {
background: linear-gradient(to right, #cda36b, #e0b97d);
color: #ffffff;
}
}
.coupon-btn-purchased-starshine {
.coupon-btn-purchased-starshine {
background: linear-gradient(to right, #000000, #2c1600);
color: #ffffff;
}
}
.coupon-btn-unlocked-gold {
.coupon-btn-unlocked-gold {
background: linear-gradient(to right, #906632, #ab7a44);
color: #ffffff;
}
}
.coupon-btn-unlocked-platinum {
.coupon-btn-unlocked-platinum {
background: linear-gradient(to right, #5189c0, #6fa2d5);
color: #ffffff;
}
}
.coupon-btn-unlocked-diamond {
.coupon-btn-unlocked-diamond {
background: linear-gradient(to right, #7253a5, #997acc);
color: #ffffff;
}
}
.coupon-btn-unlocked-starlight {
.coupon-btn-unlocked-starlight {
background: linear-gradient(to right, #cda36b, #e0b97d);
color: #ffffff;
}
}
.coupon-btn-unlocked-starshine {
.coupon-btn-unlocked-starshine {
background: linear-gradient(to right, #000000, #2c1600);
color: #ffffff;
}
}
</style>
\ No newline at end of file
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