Skip to content

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

pointsRight

parent cf35a39f
Show whitespace changes
Inline Side-by-side
Showing with 1711 additions and 208 deletions
api/monthGift.js 0 → 100644
View file @ b1ca9ad9
import requestModule from './request.js';
const {
api
} = requestModule;
/**
* 获取月礼包首页数据
* @param {Object} params
* @param {string} params.level - 用户等级 (diamond, starshine, starlight, gold, platinum)
* @returns {Promise<Object>}
data:{
batchCoupon:[
{
equityCouponInfoId:1,//权益优惠券信息ID
couponId:1,//优惠券ID
couponName:1,//优惠券名称
equityIcon:1,//权益图片
gradeAllow:true,//等级是否允许 true允许
startTime:1,//起始时间 2024-10-23 00:00:00
endTime:1,//结束时间 2024-10-23 00:00:00
stockUsage:1,//已使用库存数量
stockLimit:1,//可使用库存总数量
received:true,//是否已领取
stockBatchList:[
{
stockBatchId:1,//批次ID
startTime:1,//生效时间 例如：2024-10-28 23:00:00
status:1,//状态 0-待开始 1-抢券中 2-已结束
}
]
}
],
equityCouponList:[
{
equityCouponInfoId:1,//权益优惠券信息ID
couponId:1,//优惠券ID
couponName:1,//优惠券名称
couponSystem:1,//优惠券系统 : BMP: 业务中台系统, SF : 顺丰 , CRM : CRM系统
equityIcon:1,//权益图片
receiveStatus:1,//优惠券状态 0-未领取 1-已领取
receiveTime:1,//领取时间
}
]
}
*/
export const monthlyGiftIndex = () => api.get('/c/equity/monthlyGift/index')
/**
* 月月礼-领取精选好券
* @param {Object} data
* @param {string} data.stockBatchId - 批次ID
* @param {string} data.equityCouponInfoId - 权益优惠券信息ID
* @returns {Promise<Object>}
* {
* "success": true,
* "message": "领取成功",
* "data": {
* "couponId": "123",
* "couponName": "精选好券",
* "resourceId": "resource_123"
* “receiveResult”：0，//领取结果 0-失败 1-成功 F
* }
* }
*/
export const monthlyGiftDrawOne = (data) => api.post('/c/equity/monthlyGift/drawOne', {
stockBatchId: data.stockBatchId,
equityCouponInfoId: data.equityCouponInfoId
})
/**
* 月月礼-领取限时1分购
* @returns {Promise<Object>}
* {
* "success": true,
* "message": "领取成功",
* "data": {
* "status": 1,
* "receivedNormalCouponList": [
* {
* "couponId": "123",
* "equityCouponInfoId": "456",
* "couponName": "限时1分购券",
* "equityIcon": "icon_url",
* "resourceId": "resource_789"
* }
* ]
* }
* }
*/
export const monthlyGiftDrawAll = (data) => api.post('/c/equity/monthlyGift/drawAll', {
})
api/request.js
View file @ b1ca9ad9
......@@ -16,9 +16,9 @@ const {
// request.js
// 通常可以吧 baseUrl 单独放在一个 js 文件了
// const baseUrl = "http://172.16.224.178:7777/pmall";
// const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境
let baseUrl = "https://momclub.feihe.com/pmall";//生产环境
// const baseUrl = "https://docs.dui88.com/mock/1956/api";//mock
const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境
// let baseUrl = "https://momclub.feihe.com/pmall";//生产环境
// const baseUrl = "https://docs.dui88.com/mock/1956";//mock
// const baseUrl = "https://feihe.m.duibatest.com.cn/pmall"
const request = (options = {}) => {
......
components/pointRightsCom/README.md
View file @ b1ca9ad9
# BabyClass 组件
# MonthGift 月礼包权益组件
## 概述
## 组件概述
BabyClass 是一个 Vue 3 组件，用于显示不同等级的权益信息。该组件遵循 Vue 3 Composition API 规范，使用 `<script setup>` 语法糖。
`MonthGift` 是一个 Vue 3 组件，用于展示不同用户等级的月礼包权益，包括精选好券和限时1分购功能。组件根据传入的用户等级参数动态显示对应的权益页面。
## 特性
## 功能特性
- 🎨 支持5个等级：Diamond、Starshine、Starlight、Gold、Platinum
- 🖼️ 使用 `image` 标签显示图片，支持 `mode="aspectFit"`
- 📱 响应式设计，使用 rpx 单位适配不同屏幕
- 🎯 图片资源统一管理，便于维护
- 🔧 遵循项目开发规范
### 1. 精选好券 (Selected Good Coupons)
- **领取条件**: 每月可领取1次，黄金及以上等级都可领取
- **更新时间**: 每月28日10点更新
- **按钮状态**:
- 初始状态: "立即领取"
- 领取成功后: "去使用" (跳转到星妈优选优惠券页面)
- 下月更新后: 重新变为 "立即领取"
- **等级切换**: 若用户在高等级已领取权益，切换其他等级时均变为 "去使用"
## 文件结构
### 2. 限时1分购 (Limited-time 1-cent Purchase)
- **活动时间**: 每月28号限量发放
- **等级要求**: 需钻石以上等级
- **时间规则**:
- 28号10点之前: 按钮显示 "待开启"，点击提示 "活动暂未开启"
- 28号10点-24点:
- 钻石以下等级: 锁住状态，按钮显示 "去升级"，点击跳转升级攻略页面
- 钻石以上等级: 按钮显示 "立即领取"，一键完成领取
- **会员中心对接**: 和会员中心对接券发放相关
### 3. 时间段切换功能 ⭐
- **4个时间段**: 10:00、12:00、14:00、16:00
- **动态背景**: 切换时间段时，对应的背景图片 (SEL1-SEL4) 会同步切换
- **状态显示**: 每个时间段显示对应的状态文本和状态图片
- **交互反馈**: 点击时间段可切换，选中的时间段会高亮显示
- **全等级支持**: 所有等级（diamond、starshine、starlight、gold、platinum）都支持时间段切换
- **背景同步**: 只有当前选中的时间段背景图片会显示，其他时间段背景图片会隐藏
- **数据统一**: 时间段状态与 `stockBatchList` 参数完全统一，包含：
- `stockBatchId`: 库存批次ID
- `startTime`: 开始时间
- `endTime`: 结束时间
- `stockUsage`: 已使用库存
- `stockLimit`: 库存限制
- `received`: 是否已领取
- `status`: 状态（locked/unlocked/partial/purchased）
## API 接口
组件使用 `monthGift.js` 中定义的接口函数，通过 `request.js` 模块进行 HTTP 请求。
### 1. monthlyGiftIndex - 获取月礼包首页数据
```javascript
// 引入
import { monthlyGiftIndex } from '../../api/monthGift.js'
// 调用
const result = await monthlyGiftIndex({ level: 'diamond' })
// 响应
{
"success": true,
"data": {
"batchCoupon": [
{
"equityCouponInfoId": 1, // 权益优惠券信息ID
"couponId": 1, // 优惠券ID
"couponName": "限时1分购券", // 优惠券名称
"equityIcon": "icon_url", // 权益图片
"gradeAllow": true, // 等级是否允许 true允许
"startTime": "2024-10-23 00:00:00", // 起始时间
"endTime": "2024-10-23 23:59:59", // 结束时间
"stockUsage": 50, // 已使用库存数量
"stockLimit": 100, // 可使用库存总数量
"received": false, // 是否已领取
"stockBatchList": [
{
"stockBatchId": 1, // 批次ID
"startTime": "2024-10-28 10:00:00", // 生效时间
"status": 1 // 状态 0-待开始 1-抢券中 2-已结束
}
]
}
],
"equityCouponList": [
{
"equityCouponInfoId": 1, // 权益优惠券信息ID
"couponId": 1, // 优惠券ID
"couponName": "精选好券", // 优惠券名称
"couponSystem": "BMP", // 优惠券系统
"equityIcon": "icon_url", // 权益图片
"receiveStatus": 0, // 优惠券状态 0-未领取 1-已领取
"receiveTime": null // 领取时间
}
]
}
}
```
components/pointRightsCom/
├── babyClass.vue # 主组件文件
├── babyClassImages.js # 图片资源常量文件
└── README.md # 说明文档
### 2. monthlyGiftDrawOne - 领取精选好券
```javascript
// 引入
import { monthlyGiftDrawOne } from '../../api/monthGift.js'
// 调用
const result = await monthlyGiftDrawOne({
stockBatchId: 'batch_123',
equityCouponInfoId: 'coupon_123'
})
// 响应
{
"success": true,
"message": "领取成功",
"data": {
"couponId": "123",
"couponName": "精选好券",
"resourceId": "resource_123",
"receiveResult": 1 // 领取结果 0-失败 1-成功
}
}
```
## 使用方法
### 3. monthlyGiftDrawAll - 领取限时1分购
```javascript
// 引入
import { monthlyGiftDrawAll } from '../../api/monthGift.js'
### 1. 导入组件
// 调用
const result = await monthlyGiftDrawAll()
// 响应
{
"success": true,
"message": "领取成功",
"data": {
"status": 1,
"receivedNormalCouponList": [
{
"couponId": "123",
"equityCouponInfoId": "456",
"couponName": "限时1分购券",
"equityIcon": "icon_url",
"resourceId": "resource_789"
}
]
}
}
```
### 4. 数据结构说明
时间段状态与 `stockBatchList` 完全统一，根据新的接口返回结构：
```javascript
// 组件状态结构
state: {
// 精选好券状态 - 根据 equityCouponList 动态生成
couponStatus: {
diamond: 'unlocked', // 'locked', 'unlocked', 'used'
starshine: 'unlocked',
starlight: 'unlocked',
gold: 'unlocked',
platinum: 'unlocked'
},
// 限时1分购状态 - 根据 batchCoupon 动态生成
buyStatus: {
diamond: 'locked', // 'locked', 'unlocked', 'purchased'
starshine: 'locked',
starlight: 'locked',
gold: 'locked',
platinum: 'locked'
},
// 时间段状态 - 根据 batchCoupon.stockBatchList 动态生成
timeSlots: [
{
time: '10:00', // 时间段显示
status: 'unlocked', // 状态：locked/unlocked/ended/purchased
stockBatchId: 'batch_1', // 库存批次ID
startTime: '2024-10-28 10:00:00', // 生效时间
endTime: '2024-10-28 11:59:59', // 结束时间
stockUsage: 50, // 已使用库存
stockLimit: 100, // 库存限制
received: false // 是否已领取
}
// ... 其他3个时间段
],
// 原始数据
batchCoupon: null, // batchCoupon 数据
equityCouponList: [] // equityCouponList 数据
}
// 状态映射关系
// stockBatchList.status -> 时间段status
// 0 (待开始) -> 'locked' // 锁定状态
// 1 (抢券中) -> 'unlocked' // 可领取
// 2 (已结束) -> 'ended' // 结束状态
```
## 使用方法
### 基础使用
```vue
<template>
<BabyClass />
<MonthGift current-level="diamond" />
</template>
<script setup>
import BabyClass from '@/components/pointRightsCom/babyClass.vue'
import MonthGift from '@/components/pointRightsCom/monthGift.vue'
</script>
```
### 2. 全局注册（可选）
### 动态切换等级
```vue
<template>
<MonthGift :current-level="currentUserLevel" />
</template>
在 `main.js` 中全局注册：
<script setup>
import { ref } from 'vue'
import MonthGift from '@/components/pointRightsCom/monthGift.vue'
```javascript
import BabyClass from '@/components/pointRightsCom/babyClass.vue'
const currentUserLevel = ref('diamond')
const setUserLevel = (level) => {
currentUserLevel.value = level
}
</script>
```
// Vue 2
Vue.component('BabyClass', BabyClass)
### 接口引入
组件内部已经引入了所需的接口函数：
// Vue 3
app.component('BabyClass', BabyClass)
```javascript
import { monthlyGiftIndex, monthlyGiftDrawOne, monthlyGiftDrawAll } from '../../api/monthGift.js'
```
## 图片资源
这些接口函数通过 `request.js` 模块进行 HTTP 请求，确保网络请求的一致性和可维护性。
所有图片资源都通过 `babyClassImages.js` 文件统一管理，使用 `$baseUrl` 全局变量构建完整路径。
## 组件状态
### 支持的图片类型
### 精选好券状态
- `locked`: 锁定状态（等级不够）
- `unlocked`: 可领取状态
- `used`: 已使用状态
- **背景图片**: 各等级的背景图片
- **标题图片**: 各等级的标题图片
- **权益图片**: 各等级的权益说明图片（4张）
- **按钮图片**: 各等级的操作按钮
- **描述图片**: 各等级的详细描述
### 限时1分购状态
- `locked`: 锁定状态
- `unlocked`: 可领取状态
- `purchased`: 已领取状态
## 样式说明
### 时间段状态
- `locked`: 锁定状态
- `unlocked`: 解锁状态
- `active`: 进行中状态
- 使用 Less 预处理器
- 支持 scoped 样式隔离
- 导入项目公共样式 `res.less`
- 使用 rpx 单位确保跨平台兼容性
## 样式类名
## 技术栈
### 精选好券按钮
- `coupon-btn-unlocked`: 可领取状态
- `coupon-btn-used`: 已使用状态
- `coupon-btn-locked`: 锁定状态
- Vue 3 Composition API
- `<script setup>` 语法糖
- uni-app 框架
- Less 样式预处理器
### 限时1分购按钮
- `buy-btn-unlocked`: 可领取状态
- `buy-btn-purchased`: 已领取状态
- `buy-btn-disabled`: 禁用状态
- `buy-btn-upgrade`: 升级状态
### 时间段
- `time-slot-active`: 当前选中时间段
- `time-slot-inactive`: 未选中时间段
## 业务逻辑
### 时间判断逻辑
```javascript
// 每月28号10点-24点
const isActivityTime = computed(() => {
const now = new Date()
const currentDate = now.getDate()
const currentHour = now.getHours()
return currentDate === 28 && currentHour >= 10 && currentHour < 24
})
// 每月28号10点之前
const isBeforeActivityTime = computed(() => {
const now = new Date()
const currentDate = now.getDate()
const currentHour = now.getHours()
return currentDate === 28 && currentHour < 10
})
```
### 等级权限判断
```javascript
// 钻石以上等级可以访问限时1分购
const canAccessBuy = computed(() => {
const levelOrder = ['platinum', 'gold', 'starlight', 'starshine', 'diamond']
const userLevelIndex = levelOrder.indexOf(props.currentLevel)
const diamondIndex = levelOrder.indexOf('diamond')
return userLevelIndex <= diamondIndex
})
```
## 注意事项
1. 确保 `$baseUrl` 全局变量已正确配置
2. 图片资源路径需要与后端资源保持一致
3. 组件使用绝对定位布局，父容器需要设置相对定位
4. 支持 `modal_center` 类名用于居中显示
1. **图片资源**: 组件依赖 `monthGiftImages.js` 文件中的图片路径配置
2. **API 接口**: 需要后端提供对应的接口支持
3. **用户数据**: 用户等级和权益状态需要从后端获取
4. **时间同步**: 活动时间判断基于客户端时间，建议与服务器时间同步
5. **状态持久化**: 组件状态在页面刷新后会重置，需要与后端数据同步
## 测试功能
在 `testPage` 中提供了完整的测试功能：
- 用户等级切换
- 测试时间设置
- 状态重置
- 实时预览组件效果
## 更新日志
### v1.0.0
- 初始版本
- 支持5个等级权益展示
- 图片资源统一管理
- Vue 3 Composition API 实现
- 实现基础组件结构
- 添加精选好券功能
- 添加限时1分购功能
- 实现时间段切换功能
- 集成 API 接口调用
- 添加完整的业务逻辑
- 实现响应式状态管理
components/pointRightsCom/babyClass.vue
View file @ b1ca9ad9
<template>
<view class="babyclass ">
<view class="diamond">
<view class="babyclass">
<!-- 根据用户等级动态显示对应等级页面 -->
<view v-if="currentLevel === 'diamond'" class="diamond">
<image class="diamondbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.BG}`" mode="aspectFit"></image>
<image class="diamondtitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.TITLE}`" mode="aspectFit"></image>
<view class="diamondips">
......@@ -13,11 +14,11 @@
<image class="diamondips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.IPS4}`" mode="aspectFit">
</image>
</view>
<image class="diamondbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.BTN}`" mode="aspectFit"></image>
<image class="diamondbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.BTN}`" mode="aspectFit" @click="jump('diamond')"></image>
<image class="diamonddesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.DESC}`" mode="aspectFit"></image>
</view>
<view class="starshine">
<view v-if="currentLevel === 'starshine'" class="starshine">
<image class="starshinebg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.BG}`" mode="aspectFit"></image>
<image class="starshinetitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.TITLE}`" mode="aspectFit">
</image>
......@@ -31,12 +32,12 @@
<image class="starshineips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.IPS4}`" mode="aspectFit">
</image>
</view>
<image class="starshinebtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.BTN}`" mode="aspectFit"></image>
<image class="starshinebtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.BTN}`" mode="aspectFit" @click="jump('starshine')"></image>
<image class="starshinedesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.DESC}`" mode="aspectFit">
</image>
</view>
<view class="starlight">
<view v-if="currentLevel === 'starlight'" class="starlight">
<image class="starlightbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.BG}`" mode="aspectFit"></image>
<image class="starlighttitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.TITLE}`" mode="aspectFit">
</image>
......@@ -50,12 +51,12 @@
<image class="starlightips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.IPS4}`" mode="aspectFit">
</image>
</view>
<image class="starlightbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.BTN}`" mode="aspectFit"></image>
<image class="starlightbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.BTN}`" mode="aspectFit" @click="jump('starlight')"></image>
<image class="starlightdesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.DESC}`" mode="aspectFit">
</image>
</view>
<view class="gold">
<view v-if="currentLevel === 'gold'" class="gold">
<image class="goldipsbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.BG}`" mode="aspectFit"></image>
<image class="goldipstitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.TITLE}`" mode="aspectFit"></image>
<view class="goldips">
......@@ -64,11 +65,11 @@
<image class="goldips3" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.IPS3}`" mode="aspectFit"></image>
<image class="goldips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.IPS4}`" mode="aspectFit"></image>
</view>
<image class="goldbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.BTN}`" mode="aspectFit"></image>
<image class="goldbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.BTN}`" mode="aspectFit" @click="jump('gold')"></image>
<image class="golddesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.DESC}`" mode="aspectFit"></image>
</view>
<view class="platinum">
<view v-if="currentLevel === 'platinum'" class="platinum">
<image class="platinumbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.BG}`" mode="aspectFit"></image>
<image class="platinumtitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.TITLE}`" mode="aspectFit">
</image>
......@@ -82,9 +83,10 @@
<image class="platinumips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.IPS4}`" mode="aspectFit">
</image>
</view>
<image class="platinumbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.BTN}`" mode="aspectFit"></image>
<image class="platinumbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.BTN}`" mode="aspectFit" @click="jump('platinum')"></image>
<image class="platinumdesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.DESC}`" mode="aspectFit"></image>
</view>
</view>
</template>
......@@ -95,6 +97,29 @@ import { BABY_CLASS_IMAGES } from './babyClassImages.js'
// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
// 接收用户等级参数
const props = defineProps({
currentLevel: {
type: String,
required: true,
validator: (value) => ['gold', 'platinum', 'diamond', 'starlight', 'starshine'].includes(value),
},
})
// 跳转方法
const jump = (level) => {
console.log(`跳转到 ${level} 等级页面`)
// 跳转到 H5 页面，地址暂时默认 https://www.baidu.com
// 可以根据不同等级跳转到不同的地址
const url = 'https://www.baidu.com'
// 使用 uni.navigateTo 跳转到 webview 页面
uni.navigateTo({
url: `/pages/webview/webview?url=${encodeURIComponent(url)}&title=${level}等级页面`
})
}
</script>
<style lang="less" scoped>
......@@ -177,6 +202,12 @@ const $baseUrl = proxy.$baseUrl
left: 97rpx;
top: 493rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.diamonddesc {
......@@ -258,6 +289,12 @@ const $baseUrl = proxy.$baseUrl
left: 97rpx;
top: 493rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.starshinedesc {
......@@ -339,6 +376,12 @@ const $baseUrl = proxy.$baseUrl
left: 97rpx;
top: 493rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.starlightdesc {
......@@ -420,6 +463,12 @@ const $baseUrl = proxy.$baseUrl
left: 97rpx;
top: 493rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.golddesc {
......@@ -501,6 +550,12 @@ const $baseUrl = proxy.$baseUrl
left: 97rpx;
top: 493rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.platinumdesc {
......@@ -511,5 +566,18 @@ const $baseUrl = proxy.$baseUrl
position: absolute;
}
}
.default-text {
width: 635rpx;
height: 713rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
color: #999;
}
}
</style>
components/pointRightsCom/monthGift.vue
View file @ b1ca9ad9
<template>
<view class="monthgift ">
<view class="diamond">
<view class="monthgift">
<!-- 根据用户等级动态显示对应等级页面 -->
<view v-if="currentLevel === 'diamond'" class="diamond">
<image class="diamondbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BG}`" mode="aspectFit"></image>
<view class="diamondgoodcoupon">
<view class="diamondgoodcoupons">
......@@ -19,42 +20,52 @@
<image class="diamondgoodcoupons5"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON5}`" mode="aspectFit"></image>
</view>
<image class="diamondgoodcouponnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.NOW_BTN}`" mode="aspectFit"></image>
<!-- 精选好券按钮 -->
<view class="coupon-button-container">
<button class="coupon-btn" :class="getCouponButtonClass('diamond')"
@click="handleCouponClick('diamond')">
{{ getCouponButtonText('diamond') }}
</button>
</view>
</view>
<view class="diamond1buycom">
<image class="diamond1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL4}`"
<!-- 时间段背景图片 - 根据选中状态动态显示 -->
<image v-if="state.selectedTimeSlot === 3" class="diamond1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL4}`"
mode="aspectFit"></image>
<image class="diamond1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL3}`"
<image v-if="state.selectedTimeSlot === 2" class="diamond1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL3}`"
mode="aspectFit"></image>
<image class="diamond1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL2}`"
<image v-if="state.selectedTimeSlot === 1" class="diamond1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL2}`"
mode="aspectFit"></image>
<image class="diamond1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL1}`"
<image v-if="state.selectedTimeSlot === 0" class="diamond1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL1}`"
mode="aspectFit"></image>
<view class="diamond1buycomtime1">
<!-- 时间段选择 -->
<view class="diamond1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
<text class="diamond1buycomtime1text">10:00</text>
<text class="diamond1buycomtime1status">待解锁</text>
<text class="diamond1buycomtime1status">{{ getTimeSlotStatusText(0) }}</text>
</view>
<view class="diamond1buycomtime2">
<view class="diamond1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
<text class="diamond1buycomtime2text">12:00</text>
<text class="diamond1buycomtime2status">待解锁</text>
<text class="diamond1buycomtime2status">{{ getTimeSlotStatusText(1) }}</text>
</view>
<view class="diamond1buycomtime3">
<view class="diamond1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
<text class="diamond1buycomtime3text">14:00</text>
<text class="diamond1buycomtime3status">待解锁</text>
<text class="diamond1buycomtime3status">{{ getTimeSlotStatusText(2) }}</text>
</view>
<view class="diamond1buycomtime4">
<view class="diamond1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
<text class="diamond1buycomtime4text">16:00</text>
<text class="diamond1buycomtime4status">待解锁</text>
<text class="diamond1buycomtime4status">{{ getTimeSlotStatusText(3) }}</text>
</view>
<view class="diamond1buycomgoods">
<image class="diamond1buycomgoodsbg"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
<image class="diamond1buycomgoodslockbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.GOODS.LOCK_BTN}`" mode="aspectFit">
</image>
<image class="diamond1buycomgoodsnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.GOODS.NOW_BTN}`" mode="aspectFit"></image>
<!-- 限时1分购按钮 -->
<view class="buy-button-container">
<button class="buy-btn" :class="getBuyButtonClass('diamond')"
@click="handleBuyClick('diamond')">
{{ getBuyButtonText('diamond') }}
</button>
</view>
</view>
<image class="diamond1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TITLE}`"
mode="aspectFit"></image>
......@@ -65,7 +76,7 @@
</view>
</view>
<view class="starshine">
<view v-if="currentLevel === 'starshine'" class="starshine">
<image class="starshinebg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BG}`" mode="aspectFit"></image>
<view class="starshinegoodcoupon">
<view class="starshinegoodcoupons">
......@@ -89,40 +100,48 @@
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON5}`" mode="aspectFit">
</image>
</view>
<image class="starshinegoodcouponnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.NOW_BTN}`" mode="aspectFit"></image>
<!-- 精选好券按钮 -->
<view class="coupon-button-container">
<button class="coupon-btn" :class="getCouponButtonClass('starshine')"
@click="handleCouponClick('starshine')">
{{ getCouponButtonText('starshine') }}
</button>
</view>
</view>
<view class="starshine1buycom">
<image class="starshine1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL4}`"
<!-- 时间段背景图片 - 根据选中状态动态显示 -->
<image v-if="state.selectedTimeSlot === 3" class="starshine1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL4}`"
mode="aspectFit"></image>
<image class="starshine1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL3}`"
<image v-if="state.selectedTimeSlot === 2" class="starshine1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL3}`"
mode="aspectFit"></image>
<image class="starshine1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL2}`"
<image v-if="state.selectedTimeSlot === 1" class="starshine1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL2}`"
mode="aspectFit"></image>
<image class="starshine1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL1}`"
<image v-if="state.selectedTimeSlot === 0" class="starshine1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL1}`"
mode="aspectFit"></image>
<view class="starshine1buycomtime1">
<!-- 时间段选择 -->
<view class="starshine1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
<image class="starshine1buycomtime1text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
<image class="starshine1buycomtime1status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME1.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="starshine1buycomtime2">
<view class="starshine1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
<image class="starshine1buycomtime2text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
<image class="starshine1buycomtime2status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME2.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="starshine1buycomtime3">
<view class="starshine1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
<image class="starshine1buycomtime3text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
<image class="starshine1buycomtime3status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME3.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="starshine1buycomtime4">
<view class="starshine1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
<image class="starshine1buycomtime4text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
<image class="starshine1buycomtime4status"
......@@ -132,12 +151,13 @@
<view class="starshine1buycomgoods">
<image class="starshine1buycomgoodsbg"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
<image class="starshine1buycomgoodslockbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.GOODS.LOCK_BTN}`" mode="aspectFit">
</image>
<image class="starshine1buycomgoodsnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.GOODS.NOW_BTN}`" mode="aspectFit">
</image>
<!-- 限时1分购按钮 -->
<view class="buy-button-container">
<button class="buy-btn" :class="getBuyButtonClass('starshine')"
@click="handleBuyClick('starshine')">
{{ getBuyButtonText('starshine') }}
</button>
</view>
</view>
<image class="starshine1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.STATUS}`"
mode="aspectFit"></image>
......@@ -148,7 +168,7 @@
</view>
</view>
<view class="starlight">
<view v-if="currentLevel === 'starlight'" class="starlight">
<image class="starlightbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BG}`" mode="aspectFit"></image>
<view class="startlightgoodcoupon">
<view class="startlightgoodcoupons">
......@@ -172,40 +192,48 @@
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON5}`" mode="aspectFit">
</image>
</view>
<image class="startlightgoodcouponnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.NOW_BTN}`" mode="aspectFit"></image>
<!-- 精选好券按钮 -->
<view class="coupon-button-container">
<button class="coupon-btn" :class="getCouponButtonClass('starlight')"
@click="handleCouponClick('starlight')">
{{ getCouponButtonText('starlight') }}
</button>
</view>
</view>
<view class="startlight1buycom">
<image class="startlight1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL4}`"
<!-- 时间段背景图片 - 根据选中状态动态显示 -->
<image v-if="state.selectedTimeSlot === 3" class="startlight1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL4}`"
mode="aspectFit"></image>
<image class="startlight1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL3}`"
<image v-if="state.selectedTimeSlot === 2" class="startlight1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL3}`"
mode="aspectFit"></image>
<image class="startlight1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL2}`"
<image v-if="state.selectedTimeSlot === 1" class="startlight1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL2}`"
mode="aspectFit"></image>
<image class="startlight1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL1}`"
<image v-if="state.selectedTimeSlot === 0" class="startlight1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL1}`"
mode="aspectFit"></image>
<view class="startlight1buycomtime1">
<!-- 时间段选择 -->
<view class="startlight1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
<image class="startlight1buycomtime1text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
<image class="startlight1buycomtime1status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME1.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="startlight1buycomtime2">
<view class="startlight1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
<image class="startlight1buycomtime2text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
<image class="startlight1buycomtime2status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME2.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="startlight1buycomtime3">
<view class="startlight1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
<image class="startlight1buycomtime3text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
<image class="startlight1buycomtime3status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME3.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="startlight1buycomtime4">
<view class="startlight1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
<image class="startlight1buycomtime4text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
<image class="startlight1buycomtime4status"
......@@ -215,12 +243,13 @@
<view class="startlight1buycomgoods">
<image class="startlight1buycomgoodsbg"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
<image class="startlight1buycomgoodslockbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.GOODS.LOCK_BTN}`" mode="aspectFit">
</image>
<image class="startlight1buycomgoodsnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.GOODS.NOW_BTN}`" mode="aspectFit">
</image>
<!-- 限时1分购按钮 -->
<view class="buy-button-container">
<button class="buy-btn" :class="getBuyButtonClass('starlight')"
@click="handleBuyClick('starlight')">
{{ getBuyButtonText('starlight') }}
</button>
</view>
</view>
<image class="startlight1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TITLE}`"
mode="aspectFit"></image>
......@@ -231,7 +260,7 @@
</view>
</view>
<view class="gold">
<view v-if="currentLevel === 'gold'" class="gold">
<image class="goldbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BG}`" mode="aspectFit"></image>
<view class="goldgoodcoupon">
<view class="goldgoodcoupons">
......@@ -250,8 +279,12 @@
<image class="goldgoodcoupons5" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON5}`"
mode="aspectFit"></image>
</view>
<image class="goldgoodcouponnowbtn" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.NOW_BTN}`"
mode="aspectFit"></image>
<!-- 精选好券按钮 -->
<view class="coupon-button-container">
<button class="coupon-btn" :class="getCouponButtonClass('gold')" @click="handleCouponClick('gold')">
{{ getCouponButtonText('gold') }}
</button>
</view>
</view>
<view class="gold1buycom">
<image class="gold1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TITLE}`"
......@@ -260,33 +293,36 @@
mode="aspectFit"></image>
<image class="gold1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.STATUS}`"
mode="aspectFit"></image>
<image class="gold1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL4}`"
<!-- 时间段背景图片 - 根据选中状态动态显示 -->
<image v-if="state.selectedTimeSlot === 3" class="gold1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL4}`"
mode="aspectFit"></image>
<image class="gold1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL3}`"
<image v-if="state.selectedTimeSlot === 2" class="gold1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL3}`"
mode="aspectFit"></image>
<image class="gold1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL2}`"
<image v-if="state.selectedTimeSlot === 1" class="gold1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL2}`"
mode="aspectFit"></image>
<image class="gold1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL1}`"
<image v-if="state.selectedTimeSlot === 0" class="gold1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL1}`"
mode="aspectFit"></image>
<view class="gold1buycomtime1">
<!-- 时间段选择 -->
<view class="gold1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
<image class="gold1buycomtime1text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME1.TEXT}`"
mode="aspectFit"></image>
<image class="gold1buycomtime1status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME1.STATUS}`" mode="aspectFit"></image>
</view>
<view class="gold1buycomtime2">
<view class="gold1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
<image class="gold1buycomtime2text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME2.TEXT}`"
mode="aspectFit"></image>
<image class="gold1buycomtime2status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME2.STATUS}`" mode="aspectFit"></image>
</view>
<view class="gold1buycomtime3">
<view class="gold1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
<image class="gold1buycomtime3text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME3.TEXT}`"
mode="aspectFit"></image>
<image class="gold1buycomtime3status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME3.STATUS}`" mode="aspectFit"></image>
</view>
<view class="gold1buycomtime4">
<view class="gold1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
<image class="gold1buycomtime4text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME4.TEXT}`"
mode="aspectFit"></image>
<image class="gold1buycomtime4status"
......@@ -295,16 +331,18 @@
<view class="gold1buycomgoods">
<image class="gold1buycomgoodsbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.GOODS.BG}`"
mode="aspectFit"></image>
<image class="gold1buycomgoodslockbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.GOODS.LOCK_BTN}`" mode="aspectFit"></image>
<image class="gold1buycomgoodsnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.GOODS.NOW_BTN}`" mode="aspectFit"></image>
<!-- 限时1分购按钮 -->
<view class="buy-button-container">
<button class="buy-btn" :class="getBuyButtonClass('gold')" @click="handleBuyClick('gold')">
{{ getBuyButtonText('gold') }}
</button>
</view>
</view>
</view>
<image class="goldlocktip" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.LOCKTIP}`" mode="aspectFit"></image>
</view>
<view class="platinum">
<view v-if="currentLevel === 'platinum'" class="platinum">
<image class="platinumbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BG}`" mode="aspectFit"></image>
<view class="platinumgoodcoupon">
<view class="platinumgoodcoupons">
......@@ -323,8 +361,13 @@
<image class="platinumgoodcoupons5"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON5}`" mode="aspectFit"></image>
</view>
<image class="platinumgoodcouponnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.NOW_BTN}`" mode="aspectFit"></image>
<!-- 精选好券按钮 -->
<view class="coupon-button-container">
<button class="coupon-btn" :class="getCouponButtonClass('platinum')"
@click="handleCouponClick('platinum')">
{{ getCouponButtonText('platinum') }}
</button>
</view>
</view>
<view class="platinum1buycom">
<image class="platinum1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TITLE}`"
......@@ -333,33 +376,35 @@
mode="aspectFit"></image>
<image class="platinum1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.STATUS}`"
mode="aspectFit"></image>
<image class="platinum1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL4}`"
<!-- 时间段背景图片 - 根据选中状态动态显示 -->
<image v-if="state.selectedTimeSlot === 3" class="platinum1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL4}`"
mode="aspectFit"></image>
<image class="platinum1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL3}`"
<image v-if="state.selectedTimeSlot === 2" class="platinum1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL3}`"
mode="aspectFit"></image>
<image class="platinum1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL2}`"
<image v-if="state.selectedTimeSlot === 1" class="platinum1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL2}`"
mode="aspectFit"></image>
<image class="platinum1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL1}`"
<image v-if="state.selectedTimeSlot === 0" class="platinum1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL1}`"
mode="aspectFit"></image>
<view class="platinum1buycomtime1">
<!-- 时间段选择 -->
<view class="platinum1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
<image class="platinum1buycomtime1text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
<image class="platinum1buycomtime1status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME1.STATUS}`" mode="aspectFit"></image>
</view>
<view class="platinum1buycomtime2">
<view class="platinum1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
<image class="platinum1buycomtime2text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
<image class="platinum1buycomtime2status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME2.STATUS}`" mode="aspectFit"></image>
</view>
<view class="platinum1buycomtime3">
<view class="platinum1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
<image class="platinum1buycomtime3text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
<image class="platinum1buycomtime3status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME3.STATUS}`" mode="aspectFit"></image>
</view>
<view class="platinum1buycomtime4">
<view class="platinum1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
<image class="platinum1buycomtime4text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
<image class="platinum1buycomtime4status"
......@@ -368,27 +413,566 @@
<view class="platinum1buycomgoods">
<image class="platinum1buycomgoodsbg"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
<image class="platinum1buycomgoodslockbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.GOODS.LOCK_BTN}`" mode="aspectFit">
</image>
<image class="platinum1buycomgoodsnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.GOODS.NOW_BTN}`" mode="aspectFit">
</image>
<!-- 限时1分购按钮 -->
<view class="buy-button-container">
<button class="buy-btn" :class="getBuyButtonClass('platinum')"
@click="handleBuyClick('platinum')">
{{ getBuyButtonText('platinum') }}
</button>
</view>
</view>
</view>
<image class="platinumlocktip" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.LOCKTIP}`" mode="aspectFit">
</image>
</view>
</view>
</template>
<script setup>
import { getCurrentInstance } from 'vue'
import { getCurrentInstance, reactive, computed, onMounted } from 'vue'
import { MONTH_GIFT_IMAGES } from './monthGiftImages.js'
import { monthlyGiftIndex, monthlyGiftDrawOne, monthlyGiftDrawAll } from '../../api/monthGift.js'
// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
// 接收用户等级参数
const props = defineProps({
currentLevel: {
type: String,
required: true,
validator: (value) => ['gold', 'platinum', 'diamond', 'starlight', 'starshine'].includes(value)
}
})
// 业务逻辑状态
const state = reactive({
// 精选好券状态 - 根据 equityCouponList 动态生成
couponStatus: {
diamond: 'unlocked', // 'locked', 'unlocked', 'used'
starshine: 'unlocked',
starlight: 'unlocked',
gold: 'unlocked',
platinum: 'unlocked'
},
// 限时1分购状态 - 根据 batchCoupon 动态生成
buyStatus: {
diamond: 'locked', // 'locked', 'unlocked', 'purchased'
starshine: 'locked',
starlight: 'locked',
gold: 'locked',
platinum: 'locked'
},
// 当前选中的时间段
selectedTimeSlot: 0, // 0: 10:00, 1: 12:00, 2: 14:00, 3: 16:00
// 时间段状态 - 根据 batchCoupon.stockBatchList 动态生成
timeSlots: [
{
time: '10:00',
status: 'locked', // 'locked', 'unlocked', 'purchased'
stockBatchId: null,
startTime: '',
endTime: '',
stockUsage: 0,
stockLimit: 0,
received: false
},
{
time: '12:00',
status: 'locked',
stockBatchId: null,
startTime: '',
endTime: '',
stockUsage: 0,
stockLimit: 0,
received: false
},
{
time: '14:00',
status: 'locked',
stockBatchId: null,
startTime: '',
endTime: '',
stockUsage: 0,
stockLimit: 0,
received: false
},
{
time: '16:00',
status: 'locked',
stockBatchId: null,
startTime: '',
endTime: '',
stockUsage: 0,
stockLimit: 0,
received: false
}
],
// 新增：batchCoupon 数据
batchCoupon: null,
// 新增：equityCouponList 数据
equityCouponList: []
})
// 计算属性
const isActivityTime = computed(() => {
const now = new Date()
const currentDate = now.getDate()
const currentHour = now.getHours()
// 每月28号10点-24点
return currentDate === 28 && currentHour >= 10 && currentHour < 24
})
const isBeforeActivityTime = computed(() => {
const now = new Date()
const currentDate = now.getDate()
const currentHour = now.getHours()
// 每月28号10点之前
return currentDate === 28 && currentHour < 10
})
const canAccessBuy = computed(() => {
// 钻石以上等级可以访问限时1分购
const levelOrder = ['gold', 'platinum', 'diamond', 'starlight', 'starshine']
const userLevelIndex = levelOrder.indexOf(props.currentLevel)
const diamondIndex = levelOrder.indexOf('diamond')
return userLevelIndex <= diamondIndex
})
// 方法
const handleCouponClick = async (level) => {
console.log(`Clicked coupon for ${level}`)
if (state.couponStatus[level] === 'unlocked') {
try {
// 从 equityCouponList 中找到对应等级的优惠券
const coupon = state.equityCouponList.find(c => {
// 这里需要根据实际业务逻辑来判断优惠券属于哪个等级
// 可能需要根据 couponName、equityIcon 或其他字段来判断
return getLevelFromCoupon(c) === level
})
if (!coupon) {
uni.showToast({
title: '未找到对应优惠券',
icon: 'none',
duration: 2000
})
return
}
// 从 batchCoupon.stockBatchList 中获取 stockBatchId
let stockBatchId = 'default'
if (state.batchCoupon && state.batchCoupon.stockBatchList && state.batchCoupon.stockBatchList.length > 0) {
// 使用第一个批次的 stockBatchId，或者根据实际业务逻辑选择
stockBatchId = state.batchCoupon.stockBatchList[0].stockBatchId
}
// 调用API领取优惠券，使用 stockBatchId 和 equityCouponInfoId
const result = await monthlyGiftDrawOne({
stockBatchId: stockBatchId,
equityCouponInfoId: coupon.equityCouponInfoId
})
if (result.success) {
// 领取成功
uni.showToast({
title: '领取成功！',
icon: 'success',
duration: 2000
})
// 更新状态
state.couponStatus[level] = 'used'
// 更新 equityCouponList 中的状态
coupon.receiveStatus = 1
coupon.receiveTime = new Date().toISOString()
} else {
uni.showToast({
title: result.message || '领取失败',
icon: 'none',
duration: 2000
})
}
} catch (error) {
console.error('领取优惠券失败:', error)
uni.showToast({
title: '网络错误，请重试',
icon: 'none',
duration: 2000
})
}
} else if (state.couponStatus[level] === 'used') {
// 跳转到优惠券使用页面
uni.navigateTo({
url: '/pages/coupon/couponList'
})
}
}
const handleBuyClick = async (level) => {
console.log(`Clicked buy for ${level}`)
if (isBeforeActivityTime.value) {
// 活动暂未开启
uni.showToast({
title: '活动暂未开启',
icon: 'none',
duration: 2000
})
return
}
if (!isActivityTime.value) {
// 不在活动时间内
uni.showToast({
title: '活动已结束',
icon: 'none',
duration: 2000
})
return
}
if (!canAccessBuy.value) {
// 等级不够，跳转升级攻略
uni.navigateTo({
url: '/pages/upgrade/upgradeGuide'
})
return
}
// 可以购买，执行购买逻辑
if (state.buyStatus[level] === 'locked') {
try {
// 调用API领取限时1分购，不需要传递参数
const result = await monthlyGiftDrawAll()
if (result.success) {
// 购买成功，更新时间段状态
const currentTimeSlot = state.timeSlots[state.selectedTimeSlot]
currentTimeSlot.status = 'purchased'
currentTimeSlot.received = true
state.buyStatus[level] = 'purchased'
uni.showToast({
title: '领取成功！',
icon: 'success',
duration: 2000
})
} else {
uni.showToast({
title: result.message || '领取失败',
icon: 'none',
duration: 2000
})
}
} catch (error) {
console.error('领取限时1分购失败:', error)
uni.showToast({
title: '网络错误，请重试',
icon: 'none',
duration: 2000
})
}
}
}
// 切换时间段
const switchTimeSlot = (index) => {
state.selectedTimeSlot = index
console.log(`切换到时间段: ${state.timeSlots[index].time}`)
}
// 获取精选好券按钮文本
const getCouponButtonText = (level) => {
if (state.couponStatus[level] === 'unlocked') {
return '立即领取'
} else if (state.couponStatus[level] === 'used') {
return '去使用'
}
return '立即领取'
}
// 获取精选好券按钮样式类
const getCouponButtonClass = (level) => {
if (state.couponStatus[level] === 'unlocked') {
return 'coupon-btn-unlocked'
} else if (state.couponStatus[level] === 'used') {
return 'coupon-btn-used'
}
return 'coupon-btn-locked'
}
// 获取限时1分购按钮文本
const getBuyButtonText = (level) => {
if (isBeforeActivityTime.value) {
return '待开启'
}
if (!isActivityTime.value) {
return '活动结束'
}
if (!canAccessBuy.value) {
return '去升级'
}
if (state.buyStatus[level] === 'locked') {
return '立即领取'
} else if (state.buyStatus[level] === 'purchased') {
return '已领取'
}
return '立即领取'
}
// 获取限时1分购按钮样式类
const getBuyButtonClass = (level) => {
if (isBeforeActivityTime.value) {
return 'buy-btn-disabled'
}
if (!isActivityTime.value) {
return 'buy-btn-disabled'
}
if (!canAccessBuy.value) {
return 'buy-btn-upgrade'
}
if (state.buyStatus[level] === 'locked') {
return 'buy-btn-unlocked'
} else if (state.buyStatus[level] === 'purchased') {
return 'buy-btn-purchased'
}
return 'buy-btn-locked'
}
// 获取时间段状态文本
const getTimeSlotStatusText = (index) => {
const timeSlot = state.timeSlots[index]
if (isBeforeActivityTime.value) {
return '待开启'
}
if (!isActivityTime.value) {
return '已结束'
}
// 根据时间段状态显示不同文本
switch (timeSlot.status) {
case 'unlocked':
return '抢券中'
case 'ended':
return '已结束'
case 'purchased':
return '已领取'
case 'locked':
default:
return '待开始'
}
}
// 获取时间段样式类
const getTimeSlotClass = (index) => {
const timeSlot = state.timeSlots[index]
if (index === state.selectedTimeSlot) {
return 'time-slot-active'
}
// 根据时间段状态应用不同样式
switch (timeSlot.status) {
case 'unlocked':
return 'time-slot-unlocked'
case 'ended':
return 'time-slot-ended'
case 'purchased':
return 'time-slot-purchased'
case 'locked':
default:
return 'time-slot-inactive'
}
}
// 初始化
onMounted(async () => {
console.log('MonthGift component mounted, current level:', props.currentLevel)
try {
// 获取月礼包首页数据
const result = await monthlyGiftIndex({ level: props.currentLevel })
if (result.success) {
const data = result.data
// 保存 equityCouponList 数据
if (data.equityCouponList) {
state.equityCouponList = data.equityCouponList
// 根据 equityCouponList 更新精选好券状态
updateCouponStatus(data.equityCouponList)
}
// 保存 batchCoupon 数据
if (data.batchCoupon) {
state.batchCoupon = data.batchCoupon
// 根据 batchCoupon 更新限时1分购状态和时间段状态
updateBuyStatusAndTimeSlots(data.batchCoupon)
}
// 设置当前选中的时间段
if (data.currentTimeSlot !== undefined) {
state.selectedTimeSlot = data.currentTimeSlot
}
}
} catch (error) {
console.error('获取月礼包数据失败:', error)
}
})
// 根据 equityCouponList 更新精选好券状态
const updateCouponStatus = (equityCouponList) => {
equityCouponList.forEach(coupon => {
// 根据 couponSystem 或其他字段判断等级
// 这里需要根据实际业务逻辑来确定等级映射
const level = getLevelFromCoupon(coupon)
if (level && state.couponStatus.hasOwnProperty(level)) {
state.couponStatus[level] = coupon.receiveStatus === 1 ? 'used' : 'unlocked'
}
})
}
// 根据 batchCoupon 更新限时1分购状态和时间段状态
const updateBuyStatusAndTimeSlots = (batchCoupon) => {
// 更新限时1分购状态
if (batchCoupon.gradeAllow !== undefined) {
// 根据 gradeAllow 判断是否可以购买
const level = props.currentLevel
if (state.buyStatus.hasOwnProperty(level)) {
state.buyStatus[level] = batchCoupon.gradeAllow ? 'unlocked' : 'locked'
}
}
// 更新限时1分购状态（如果已领取）
if (batchCoupon.received !== undefined) {
const level = props.currentLevel
if (state.buyStatus.hasOwnProperty(level) && batchCoupon.received) {
state.buyStatus[level] = 'purchased'
}
}
// 处理 stockBatchList 数据，更新时间段状态
if (batchCoupon.stockBatchList && batchCoupon.stockBatchList.length > 0) {
batchCoupon.stockBatchList.forEach((batch, index) => {
if (index < state.timeSlots.length) {
state.timeSlots[index] = {
...state.timeSlots[index],
stockBatchId: batch.stockBatchId,
startTime: batch.startTime,
endTime: batch.endTime || '',
stockUsage: batch.stockUsage || 0,
stockLimit: batch.stockLimit || 0,
received: batch.received || false,
status: getBatchStatus(batch.status)
}
}
})
}
}
// 根据优惠券信息判断等级（需要根据实际业务逻辑实现）
const getLevelFromCoupon = (coupon) => {
// 这里需要根据实际的业务逻辑来判断优惠券属于哪个等级
// 可能需要根据 couponName、equityIcon 或其他字段来判断
// 暂时返回 null，需要根据实际业务逻辑完善
// 示例：如果 couponName 包含 '钻石'，则返回 'diamond'
if (coupon.couponName && coupon.couponName.includes('钻石')) {
return 'diamond'
}
if (coupon.couponName && coupon.couponName.includes('星耀')) {
return 'starshine'
}
if (coupon.couponName && coupon.couponName.includes('星光')) {
return 'starlight'
}
if (coupon.couponName && coupon.couponName.includes('黄金')) {
return 'gold'
}
if (coupon.couponName && coupon.couponName.includes('铂金')) {
return 'platinum'
}
return props.currentLevel // 默认返回当前等级，或者根据实际情况处理
}
// 获取批次状态的辅助函数
const getBatchStatus = (status) => {
// 根据 stockBatchList 中的 status 字段映射到时间段状态
// status 可能的值：0-待开始, 1-抢券中, 2-已结束
switch (status) {
case 1:
return 'unlocked' // 抢券中 - 可领取
case 0:
return 'locked' // 待开始 - 锁定状态
case 2:
return 'ended' // 已结束 - 结束状态
default:
return 'locked' // 默认锁定状态
}
}
// 获取时间段背景图片
const getTimeSlotBgImage = (level, timeIndex) => {
const levelImages = MONTH_GIFT_IMAGES[level.toUpperCase()]
if (!levelImages || !levelImages.BUY_COM) return ''
const timeSlotMap = {
0: levelImages.BUY_COM.SEL1,
1: levelImages.BUY_COM.SEL2,
2: levelImages.BUY_COM.SEL3,
3: levelImages.BUY_COM.SEL4
}
return timeSlotMap[timeIndex] || levelImages.BUY_COM.SEL1
}
// 获取时间段状态图片
const getTimeSlotStatusImage = (level, timeIndex) => {
const levelImages = MONTH_GIFT_IMAGES[level.toUpperCase()]
if (!levelImages || !levelImages.BUY_COM) return ''
const timeSlotMap = {
0: levelImages.BUY_COM.TIME1?.STATUS,
1: levelImages.BUY_COM.TIME2?.STATUS,
2: levelImages.BUY_COM.TIME3?.STATUS,
3: levelImages.BUY_COM.TIME4?.STATUS
}
return timeSlotMap[timeIndex] || levelImages.BUY_COM.TIME1?.STATUS
}
// 获取时间段文本图片
const getTimeSlotTextImage = (level, timeIndex) => {
const levelImages = MONTH_GIFT_IMAGES[level.toUpperCase()]
if (!levelImages || !levelImages.BUY_COM) return ''
const timeSlotMap = {
0: levelImages.BUY_COM.TIME1?.TEXT,
1: levelImages.BUY_COM.TIME2?.TEXT,
2: levelImages.BUY_COM.TIME3?.TEXT,
3: levelImages.BUY_COM.TIME4?.TEXT
}
return timeSlotMap[timeIndex] || levelImages.BUY_COM.TIME1?.TEXT
}
</script>
<style lang="less" scoped>
......@@ -417,7 +1001,7 @@ const $baseUrl = proxy.$baseUrl
.diamondgoodcoupon {
width: 640rpx;
height: 561rpx;
left: 0rpx;
left: 12rpx;
top: 523rpx;
position: absolute;
......@@ -498,7 +1082,7 @@ const $baseUrl = proxy.$baseUrl
.diamond1buycom {
width: 640rpx;
height: 426rpx;
left: 0rpx;
left: 12rpx;
top: 47rpx;
position: absolute;
......@@ -731,7 +1315,7 @@ const $baseUrl = proxy.$baseUrl
.starshinegoodcoupon {
width: 640rpx;
height: 561rpx;
left: 0rpx;
left: 12rpx;
top: 523rpx;
position: absolute;
......@@ -812,7 +1396,7 @@ const $baseUrl = proxy.$baseUrl
.starshine1buycom {
width: 640rpx;
height: 426rpx;
left: 0rpx;
left: 12rpx;
top: 47rpx;
position: absolute;
......@@ -1021,7 +1605,7 @@ const $baseUrl = proxy.$baseUrl
.startlightgoodcoupon {
width: 640rpx;
height: 561rpx;
left: 0rpx;
left: 12rpx;
top: 523rpx;
position: absolute;
......@@ -1102,7 +1686,7 @@ const $baseUrl = proxy.$baseUrl
.startlight1buycom {
width: 640rpx;
height: 426rpx;
left: 0rpx;
left: 12rpx;
top: 47rpx;
position: absolute;
......@@ -1311,7 +1895,7 @@ const $baseUrl = proxy.$baseUrl
.goldgoodcoupon {
width: 640rpx;
height: 561rpx;
left: 0rpx;
left: 12rpx;
top: 523rpx;
position: absolute;
......@@ -1392,7 +1976,7 @@ const $baseUrl = proxy.$baseUrl
.gold1buycom {
width: 640rpx;
height: 426rpx;
left: 0rpx;
left: 12rpx;
top: 47rpx;
position: absolute;
......@@ -1609,7 +2193,7 @@ const $baseUrl = proxy.$baseUrl
.platinumgoodcoupon {
width: 640rpx;
height: 561rpx;
left: 0rpx;
left: 12rpx;
top: 523rpx;
position: absolute;
......@@ -1690,7 +2274,7 @@ const $baseUrl = proxy.$baseUrl
.platinum1buycom {
width: 640rpx;
height: 426rpx;
left: 0rpx;
left: 12rpx;
top: 47rpx;
position: absolute;
......@@ -1887,5 +2471,164 @@ const $baseUrl = proxy.$baseUrl
position: absolute;
}
}
.default-text {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
color: rgba(102, 102, 102, 1);
}
}
// 精选好券按钮样式
.coupon-button-container {
position: absolute;
left: 99rpx;
top: 453rpx;
width: 442rpx;
height: 85rpx;
display: flex;
align-items: center;
justify-content: center;
.coupon-btn {
width: 100%;
height: 100%;
border: none;
border-radius: 42.5rpx;
font-size: 32rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
&.coupon-btn-unlocked {
background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
color: #fff;
box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
&:active {
transform: scale(0.95);
box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.4);
}
}
&.coupon-btn-used {
background: linear-gradient(135deg, #4ECDC4, #44A08D);
color: #fff;
box-shadow: 0 4rpx 12rpx rgba(78, 205, 196, 0.3);
&:active {
transform: scale(0.95);
box-shadow: 0 2rpx 8rpx rgba(78, 205, 196, 0.4);
}
}
&.coupon-btn-locked {
background: #E0E0E0;
color: #999;
cursor: not-allowed;
}
}
}
// 限时1分购按钮样式
.buy-button-container {
position: absolute;
left: 427rpx;
top: 80rpx;
width: 145rpx;
height: 52rpx;
display: flex;
align-items: center;
justify-content: center;
.buy-btn {
width: 100%;
height: 100%;
border: none;
border-radius: 26rpx;
font-size: 24rpx;
font-weight: bold;
display: flex;
white-space: nowrap;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
&.buy-btn-unlocked {
background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
color: #fff;
box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
&:active {
transform: scale(0.95);
box-shadow: 0 1rpx 6rpx rgba(255, 107, 107, 0.4);
}
}
&.buy-btn-purchased {
background: linear-gradient(135deg, #4ECDC4, #44A08D);
color: #fff;
box-shadow: 0 2rpx 8rpx rgba(78, 205, 196, 0.3);
}
&.buy-btn-disabled {
background: #E0E0E0;
color: #999;
cursor: not-allowed;
}
&.buy-btn-upgrade {
background: linear-gradient(135deg, #FFA726, #FFB74D);
color: #fff;
box-shadow: 0 2rpx 8rpx rgba(255, 167, 38, 0.3);
&:active {
transform: scale(0.95);
box-shadow: 0 1rpx 6rpx rgba(255, 167, 38, 0.4);
}
}
}
}
// 时间段样式
.diamond1buycomtime1,
.diamond1buycomtime2,
.diamond1buycomtime3,
.diamond1buycomtime4 {
cursor: pointer;
transition: all 0.3s ease;
&.time-slot-active {
.diamond1buycomtime1text,
.diamond1buycomtime2text,
.diamond1buycomtime3text,
.diamond1buycomtime4text {
color: #FF6B6B !important;
font-weight: bold;
}
.diamond1buycomtime1status,
.diamond1buycomtime2status,
.diamond1buycomtime3status,
.diamond1buycomtime4status {
color: #FF6B6B !important;
font-weight: bold;
}
}
&.time-slot-inactive {
opacity: 0.7;
&:hover {
opacity: 1;
}
}
}
</style>
components/pointRightsCom/yearGift.vue
View file @ b1ca9ad9
<template>
<view class="yeargift ">
<view class="diamond">
<view class="yeargift">
<!-- 根据用户等级动态显示对应等级页面 -->
<view v-if="currentLevel === 'diamond'" class="diamond">
<image class="diamondbg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.BG3}`" mode="aspectFit"></image>
<image class="diamondbg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.BG2}`" mode="aspectFit"></image>
<image class="diamondbg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.BG1}`" mode="aspectFit"></image>
<view class="diamondone">
<image class="diamondonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.BG}`" mode="aspectFit"></image>
<image class="diamondoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.AWARD}`" mode="aspectFit"></image>
<image class="diamondoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.AWARD}`" mode="aspectFit">
</image>
<image class="diamondoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.ADD}`" mode="aspectFit"></image>
<image class="diamondonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.DESC}`" mode="aspectFit"></image>
</view>
<view class="diamondthree">
<image class="diamondthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.THREE.BG}`" mode="aspectFit"></image>
<image class="diamondthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.THREE.AWARD}`" mode="aspectFit"></image>
<image class="diamondthreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.THREE.BTN}`" mode="aspectFit"></image>
<image class="diamondthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.THREE.AWARD}`" mode="aspectFit">
</image>
<image class="diamondthreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.THREE.BTN}`" mode="aspectFit" @click="handleButtonClick('diamond')">
</image>
</view>
</view>
<view class="starshine">
<view v-if="currentLevel === 'starshine'" class="starshine">
<image class="starshinebg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.BG3}`" mode="aspectFit"></image>
<image class="starshinebg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.BG2}`" mode="aspectFit"></image>
<image class="starshinebg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.BG1}`" mode="aspectFit"></image>
<view class="starshineone">
<image class="starshineonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.BG}`" mode="aspectFit"></image>
<image class="starshineoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.AWARD}`" mode="aspectFit"></image>
<image class="starshineoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.ADD}`" mode="aspectFit"></image>
<image class="starshineonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.DESC}`" mode="aspectFit"></image>
<image class="starshineoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.AWARD}`" mode="aspectFit">
</image>
<image class="starshineoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.ADD}`" mode="aspectFit">
</image>
<image class="starshineonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.DESC}`" mode="aspectFit">
</image>
</view>
<view class="starshinethree">
<image class="starshinethreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.THREE.BG}`" mode="aspectFit"></image>
<image class="starshinethreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.THREE.AWARD}`" mode="aspectFit"></image>
<image class="starshinethreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.THREE.BTN}`" mode="aspectFit"></image>
<image class="starshinethreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.THREE.BG}`" mode="aspectFit">
</image>
<image class="starshinethreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.THREE.AWARD}`"
mode="aspectFit"></image>
<image class="starshinethreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.THREE.BTN}`" mode="aspectFit" @click="handleButtonClick('starshine')">
</image>
</view>
</view>
<view class="starlight">
<view v-if="currentLevel === 'starlight'" class="starlight">
<image class="starlightbg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.BG3}`" mode="aspectFit"></image>
<image class="starlightbg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.BG2}`" mode="aspectFit"></image>
<image class="starlightbg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.BG1}`" mode="aspectFit"></image>
<view class="starlightone">
<image class="starlightonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.BG}`" mode="aspectFit"></image>
<image class="starlightoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.AWARD}`" mode="aspectFit"></image>
<image class="starlightoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.ADD}`" mode="aspectFit"></image>
<image class="starlightonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.DESC}`" mode="aspectFit"></image>
<image class="starlightoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.AWARD}`" mode="aspectFit">
</image>
<image class="starlightoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.ADD}`" mode="aspectFit">
</image>
<image class="starlightonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.DESC}`" mode="aspectFit">
</image>
</view>
<view class="starlightthree">
<image class="starlightthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.THREE.BG}`" mode="aspectFit"></image>
<image class="starlightthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.THREE.AWARD}`" mode="aspectFit"></image>
<image class="starlightthreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.THREE.BTN}`" mode="aspectFit"></image>
<image class="starlightthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.THREE.BG}`" mode="aspectFit">
</image>
<image class="starlightthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.THREE.AWARD}`"
mode="aspectFit"></image>
<image class="starlightthreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.THREE.BTN}`" mode="aspectFit" @click="handleButtonClick('starlight')">
</image>
</view>
</view>
<view class="gold">
<view v-if="currentLevel === 'gold'" class="gold">
<image class="goldbg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.BG3}`" mode="aspectFit"></image>
<image class="goldbg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.BG2}`" mode="aspectFit"></image>
<image class="goldbg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.BG1}`" mode="aspectFit"></image>
......@@ -64,52 +83,124 @@
<view class="goldthree">
<image class="goldthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.THREE.BG}`" mode="aspectFit"></image>
<image class="goldthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.THREE.AWARD}`" mode="aspectFit"></image>
<image class="goldthreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.THREE.BTN}`" mode="aspectFit"></image>
<image class="goldthreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.THREE.BTN}`" mode="aspectFit" @click="handleButtonClick('gold')"></image>
</view>
<image class="goldlocktip" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.LOCKTIP}`" mode="aspectFit"></image>
</view>
<view class="platinum">
<view v-if="currentLevel === 'platinum'" class="platinum">
<image class="platinumbg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.BG3}`" mode="aspectFit"></image>
<image class="platinumbg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.BG2}`" mode="aspectFit"></image>
<image class="platinumbg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.BG1}`" mode="aspectFit"></image>
<image class="platinumlocktip" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.LOCKTIP}`" mode="aspectFit"></image>
<view class="platinumone">
<image class="platinumonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.BG}`" mode="aspectFit"></image>
<image class="platinumoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.AWARD}`" mode="aspectFit"></image>
<image class="platinumoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.AWARD}`" mode="aspectFit">
</image>
<image class="platinumoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.ADD}`" mode="aspectFit"></image>
<image class="platinumonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.DESC}`" mode="aspectFit"></image>
<image class="platinumonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.DESC}`" mode="aspectFit">
</image>
</view>
<view class="platinumthree">
<image class="platinumthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.THREE.AWARD}`" mode="aspectFit"></image>
<image class="platinumthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.THREE.BG}`" mode="aspectFit"></image>
<image class="platinumthreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.THREE.BTN}`" mode="aspectFit"></image>
<image class="platinumthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.THREE.AWARD}`" mode="aspectFit">
</image>
<image class="platinumthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.THREE.BG}`" mode="aspectFit">
</image>
<image class="platinumthreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.THREE.BTN}`" mode="aspectFit" @click="handleButtonClick('platinum')">
</image>
</view>
</view>
</view>
</template>
<script setup>
import { getCurrentInstance } from 'vue'
import { getCurrentInstance, computed } from 'vue'
import { YEAR_GIFT_IMAGES } from './yearGiftImages.js'
// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
// 接收用户等级参数
const props = defineProps({
currentLevel: {
type: String,
required: true,
validator: (value) => ['gold', 'platinum', 'diamond', 'starlight', 'starshine'].includes(value),
},
})
// 计算属性：根据用户等级判断按钮文本和跳转行为
const buttonInfo = computed(() => {
const levelOrder = ['gold', 'platinum', 'diamond', 'starlight', 'starshine']
const userLevelIndex = levelOrder.indexOf(props.currentLevel)
const diamondIndex = levelOrder.indexOf('diamond')
if (userLevelIndex <= diamondIndex) {
// 钻石及以上等级
return {
text: '去查看',
action: 'memberGrowthGift',
description: '前往会员成长礼h5页面'
}
} else {
// 铂金及以下等级
return {
text: '去升级',
action: 'upgradeGuide',
description: '跳转升级攻略页面'
}
}
})
// 按钮点击处理函数
const handleButtonClick = (level) => {
console.log(`点击了 ${level} 等级的按钮`)
console.log(`当前用户等级: ${props.currentLevel}`)
console.log(`按钮信息: ${buttonInfo.value.text} - ${buttonInfo.value.description}`)
// 根据计算属性决定跳转行为
if (buttonInfo.value.action === 'memberGrowthGift') {
// 钻石及以上等级：前往会员成长礼h5页面
uni.navigateTo({
url: '/pages/webview/webview?url=' + encodeURIComponent('https://www.example.com/member-growth-gift') + '&title=会员成长礼'
})
} else {
// 铂金及以下等级：跳转升级攻略页面
uni.navigateTo({
url: '/pages/upgrade/upgradeGuide'
})
}
}
</script>
<style lang="less" scoped>
.yeargift {
width: 750rpx;
height: 1624rpx;
width: 686rpx;
height: 1139rpx;
left: 0rpx;
top: 0rpx;
right: 0rpx;
margin: auto;
position: absolute;
// 默认文本样式
.default-text {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
color: rgba(102, 102, 102, 1);
}
.diamond {
width: 686rpx;
height: 1139rpx;
left: 32rpx;
// left: 32rpx;
top: 79rpx;
position: absolute;
......@@ -209,14 +300,22 @@ const $baseUrl = proxy.$baseUrl
left: 61rpx;
top: 436rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
}
}
.starshine {
width: 686rpx;
height: 1139rpx;
left: 32rpx;
// left: 32rpx;
top: 79rpx;
position: absolute;
......@@ -316,14 +415,22 @@ const $baseUrl = proxy.$baseUrl
left: 61rpx;
top: 436rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
}
}
.starlight {
width: 686rpx;
height: 1139rpx;
left: 32rpx;
// left: 32rpx;
top: 79rpx;
position: absolute;
......@@ -423,14 +530,22 @@ const $baseUrl = proxy.$baseUrl
left: 61rpx;
top: 436rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
}
}
.gold {
width: 686rpx;
height: 1139rpx;
left: 32rpx;
// left: 32rpx;
top: 79rpx;
position: absolute;
......@@ -530,7 +645,14 @@ const $baseUrl = proxy.$baseUrl
left: 61rpx;
top: 436rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
}
.goldlocktip {
......@@ -545,7 +667,7 @@ const $baseUrl = proxy.$baseUrl
.platinum {
width: 686rpx;
height: 1139rpx;
left: 32rpx;
// left: 32rpx;
top: 79rpx;
position: absolute;
......@@ -653,8 +775,16 @@ const $baseUrl = proxy.$baseUrl
left: 61rpx;
top: 436rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
}
}
}
</style>
pages/testPage/testPage.vue
View file @ b1ca9ad9
<template>
<view class="test-page">
<view class="page-title">测试页面 - MonthGift 组件</view>
<!-- 测试控制面板 -->
<view class="test-controls">
<view class="control-section">
<text class="control-title">组件切换</text>
<view class="component-buttons">
<button
v-for="component in components"
:key="component.value"
class="component-btn"
:class="{ active: currentComponent === component.value }"
@click="switchComponent(component.value)"
>
{{ component.label }}
</button>
</view>
</view>
<view class="control-section">
<text class="control-title">用户等级设置</text>
<view class="level-buttons">
<button
v-for="level in userLevels"
:key="level.value"
class="level-btn"
:class="{ active: currentUserLevel === level.value }"
@click="setUserLevel(level.value)"
>
{{ level.label }}
</button>
</view>
</view>
</view>
<view class="component-container">
<MonthGift />
<!-- MonthGift 组件 -->
<MonthGift
v-if="currentComponent === 'monthGift'"
:current-level="currentUserLevel"
ref="monthGiftRef"
/>
<!-- YearGift 组件 -->
<YearGift
v-if="currentComponent === 'yearGift'"
:current-level="currentUserLevel"
ref="yearGiftRef"
/>
<!-- BabyClass 组件 -->
<BabyClass
v-if="currentComponent === 'babyClass'"
:current-level="currentUserLevel"
ref="babyClassRef"
/>
</view>
<view class="page-info">
<p class="info-title">组件信息</p>
<p>当前展示：月礼包权益组件 (MonthGift)</p>
<p>包含五个等级：Diamond、Starshine、Starlight、Gold、Platinum</p>
<p>每个等级包含：好券区域、购买区域、时间状态等</p>
<p>当前展示：{{ getCurrentComponentInfo().title }}</p>
<p>{{ getCurrentComponentInfo().description }}</p>
<p>包含五个等级：黄金、铂金、钻石、星光、星耀（从低到高）</p>
<p class="usage-info">使用方法：通过控制面板切换组件和用户等级，组件会根据等级动态显示对应页面</p>
<p class="note">注意：由于图片资源未配置，部分图片可能无法显示</p>
</view>
</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import BabyClass from '../../components/pointRightsCom/babyClass.vue';
import YearGift from '../../components/pointRightsCom/yearGift.vue';
import MonthGift from '../../components/pointRightsCom/monthGift.vue';
// import xinrenliPopup from '../../components/quanyi/xinrenliPopup.vue'
// 用户等级选项
const userLevels = [
{ label: '黄金', value: 'gold' },
{ label: '铂金', value: 'platinum' },
{ label: '钻石', value: 'diamond' },
{ label: '星光', value: 'starlight' },
{ label: '星耀', value: 'starshine' }
]
const currentUserLevel = ref('diamond')
const monthGiftRef = ref(null)
// 组件切换选项
const components = [
{ label: '月礼包', value: 'monthGift' },
{ label: '年礼包', value: 'yearGift' },
{ label: '宝宝权益', value: 'babyClass' }
]
const currentComponent = ref('monthGift')
// 切换组件
const switchComponent = (componentValue) => {
currentComponent.value = componentValue
console.log('切换组件到:', componentValue)
}
// 设置用户等级
const setUserLevel = (level) => {
currentUserLevel.value = level
console.log('用户等级设置为:', level)
// 这里应该通过props或事件传递给MonthGift组件
// 暂时通过console输出，实际项目中需要通过组件通信
}
// 获取当前组件的标题和描述
const getCurrentComponentInfo = () => {
switch (currentComponent.value) {
case 'monthGift':
return {
title: '月礼包权益组件',
description: '包含好券区域、购买区域、时间状态等'
}
case 'yearGift':
return {
title: '年礼包权益组件',
description: '包含好券区域、购买区域、时间状态等'
}
case 'babyClass':
return {
title: '宝宝权益组件',
description: '包含好券区域、购买区域、时间状态等'
}
default:
return {
title: '未知组件',
description: '请切换到具体组件查看'
}
}
}
</script>
<style lang="less" scoped>
......@@ -29,7 +150,7 @@ import MonthGift from '../../components/pointRightsCom/monthGift.vue';
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
// padding: 20rpx;
box-sizing: border-box;
.page-title {
......@@ -40,15 +161,109 @@ import MonthGift from '../../components/pointRightsCom/monthGift.vue';
text-align: center;
}
.test-controls {
width: 100%;
max-width: 700rpx;
background-color: #fff;
padding: 30rpx;
border-radius: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
margin-bottom: 30rpx;
.control-section {
margin-bottom: 30rpx;
&:last-child {
margin-bottom: 0;
}
.control-title {
display: block;
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.component-buttons, .level-buttons, .time-buttons {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
.component-btn, .level-btn, .time-btn {
padding: 20rpx 30rpx;
border: 2rpx solid #e0e0e0;
border-radius: 25rpx;
background-color: #fff;
color: #666;
font-size: 26rpx;
transition: all 0.3s ease;
&.active {
border-color: #FF6B6B;
background-color: #FF6B6B;
color: #fff;
}
&:active {
transform: scale(0.95);
}
}
.component-btn {
&.active {
border-color: #4ECDC4;
background-color: #4ECDC4;
color: #fff;
}
}
}
.reset-btn {
width: 100%;
padding: 25rpx;
border: 2rpx solid #FF6B6B;
border-radius: 25rpx;
background-color: #fff;
color: #FF6B6B;
font-size: 28rpx;
font-weight: bold;
transition: all 0.3s ease;
&:active {
background-color: #FF6B6B;
color: #fff;
transform: scale(0.98);
}
}
}
}
.component-container {
width: 750rpx;
height: 1624rpx;
height: 1384rpx;
position: relative;
margin-bottom: 30rpx;
background-color: #fff;
// background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
// overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
// 添加组件切换动画
.component-fade-in {
animation: fadeIn 0.3s ease-in-out;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.page-info {
......@@ -75,6 +290,16 @@ import MonthGift from '../../components/pointRightsCom/monthGift.vue';
text-align: center;
}
.usage-info {
color: #555;
font-style: italic;
margin-top: 10rpx;
padding: 10rpx;
background-color: #f0f0f0;
border-radius: 8rpx;
border-left: 4rpx solid #666;
}
.note {
color: #ff6b6b;
font-weight: 500;
......
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