Skip to content

飞
飞鹤小程序
Commit bae2233b authored by 王炽's avatar 王炽
Browse files
Options

Merge branch 'master' into xingmaLab20250820

parents bcc3c9da 389f2f1d
Show whitespace changes
Inline Side-by-side
Showing with 10495 additions and 1404 deletions
.DS_Store
View file @ bae2233b
No preview for this file type
.hbuilderx/launch.json
View file @ bae2233b
......@@ -22,3 +22,12 @@
// }
// ]
// }
{
"version" : "1.0",
"configurations" : [
{
"openVueDevtools" : false,
"type" : "uni-app:miniProgram"
}
]
}
api/integral.js
View file @ bae2233b
......@@ -9,3 +9,21 @@ const {
*/
export const fetchIntegralJSON = () => api.get('/c/front/content',{type:'integral'});
/**
* 获取生日礼接口
* @returns
*/
export const fetchBirthdayGiftJSON = () => api.get('/c/equity/birthdayGift/index');
/**
* 领取生日礼
* @returns
*/
export const fetchBatchReceiveJSON = () => api.post('/c/equity/birthdayGift/batchReceive');
/**
* 获取活动状态--溯源游
* @returns
*/
export const fetchActivityStateJSON = () => api.get('/c/third/activity/state');
\ No newline at end of file
api/monthGift.js 0 → 100644
View file @ bae2233b
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,//领取时间
}
]，
next2810Countdown:0,//2810活动倒计时
}
*/
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 @ bae2233b
......@@ -15,8 +15,8 @@ const {
// request.js
// 通常可以吧 baseUrl 单独放在一个 js 文件了
// const baseUrl = "http://172.16.224.178:7777/pmall";
//const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境
// const baseUrl = "http://172.16.230.108: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://feihe.m.duibatest.com.cn/pmall"
......@@ -44,10 +44,10 @@ const request = (options = {}) => {
})
.then((data) => {
if (data.statusCode !== HTTP_STATUS.SUCCESS) {
uni.showToast({
title: data.errMsg,
icon: 'none'
});
// uni.showToast({
// title: data.errMsg,
// icon: 'none'
// });
// 返回完整的响应数据，包括状态码和错误信息
reject({
statusCode: data.statusCode,
......@@ -58,10 +58,10 @@ const request = (options = {}) => {
globalStore.setIsShowLoading(false);
}
else if (!data.data?.ok) {
uni.showToast({
title: data.data?.message,
icon: 'none'
});
// uni.showToast({
// title: data.data?.message,
// icon: 'none'
// });
// 返回业务逻辑错误的数据
reject({
...data.data,
......
components/pointRightsCom/README.md 0 → 100644
View file @ bae2233b
# MonthGift 月礼包权益组件
## 组件概述
`MonthGift` 是一个 Vue 3 组件，用于展示不同用户等级的月礼包权益，包括精选好券和限时1分购功能。组件根据传入的用户等级参数动态显示对应的权益页面。
## 功能特性
### 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 // 领取时间
}
]
}
}
```
### 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'
// 调用
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>
<MonthGift current-level="diamond" />
</template>
<script setup>
import MonthGift from '@/components/pointRightsCom/monthGift.vue'
</script>
```
### 动态切换等级
```vue
<template>
<MonthGift :current-level="currentUserLevel" />
</template>
<script setup>
import { ref } from 'vue'
import MonthGift from '@/components/pointRightsCom/monthGift.vue'
const currentUserLevel = ref('diamond')
const setUserLevel = (level) => {
currentUserLevel.value = level
}
</script>
```
### 接口引入
组件内部已经引入了所需的接口函数：
```javascript
import { monthlyGiftIndex, monthlyGiftDrawOne, monthlyGiftDrawAll } from '../../api/monthGift.js'
```
这些接口函数通过 `request.js` 模块进行 HTTP 请求，确保网络请求的一致性和可维护性。
## 组件状态
### 精选好券状态
- `locked`: 锁定状态（等级不够）
- `unlocked`: 可领取状态
- `used`: 已使用状态
### 限时1分购状态
- `locked`: 锁定状态
- `unlocked`: 可领取状态
- `purchased`: 已领取状态
### 时间段状态
- `locked`: 锁定状态
- `unlocked`: 解锁状态
- `active`: 进行中状态
## 样式类名
### 精选好券按钮
- `coupon-btn-unlocked`: 可领取状态
- `coupon-btn-used`: 已使用状态
- `coupon-btn-locked`: 锁定状态
### 限时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. **图片资源**: 组件依赖 `monthGiftImages.js` 文件中的图片路径配置
2. **API 接口**: 需要后端提供对应的接口支持
3. **用户数据**: 用户等级和权益状态需要从后端获取
4. **时间同步**: 活动时间判断基于客户端时间，建议与服务器时间同步
5. **状态持久化**: 组件状态在页面刷新后会重置，需要与后端数据同步
## 测试功能
在 `testPage` 中提供了完整的测试功能：
- 用户等级切换
- 测试时间设置
- 状态重置
- 实时预览组件效果
## 更新日志
### v1.0.0
- 实现基础组件结构
- 添加精选好券功能
- 添加限时1分购功能
- 实现时间段切换功能
- 集成 API 接口调用
- 添加完整的业务逻辑
- 实现响应式状态管理
components/pointRightsCom/babyClass.vue 0 → 100644
View file @ bae2233b
<template>
<view class="babyclass">
<!-- 根据展示等级动态显示对应等级页面 -->
<view v-if="currentLevelName === 'diamond'" class="diamond">
<image class="diamondbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.BG}`"></image>
<image class="diamondtitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.TITLE}`" mode="aspectFit"></image>
<view class="diamondips">
<image class="diamondips1" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.IPS1}`" mode="aspectFit">
</image>
<image class="diamondips2" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.IPS2}`" mode="aspectFit">
</image>
<image class="diamondips3" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.IPS3}`" mode="aspectFit">
</image>
<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"
@click="jump('diamond')"></image>
<!-- <image class="diamonddesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.DESC}`" mode="aspectFit"></image> -->
<view class="diamonddesc" :style="{ color: getColor() }">
7类课程：⼩⼉常⻅病-急救，产后恢复运动实操课，痱⼦，尿布疹，⼩⼉常⻅病-常⻅疾病护理，新⽣⼉⻩疸，⼉童安全⽤药操作课
</view>
</view>
<view v-if="currentLevelName === 'starshine'" class="starshine">
<image class="starshinebg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.BG}`"></image>
<image class="starshinetitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.TITLE}`" mode="aspectFit">
</image>
<view class="starshineips">
<image class="starshineips1" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.IPS1}`" mode="aspectFit">
</image>
<image class="starshineips2" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.IPS2}`" mode="aspectFit">
</image>
<image class="starshineips3" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.IPS3}`" mode="aspectFit">
</image>
<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"
@click="jump('starshine')"></image>
<!-- <image class="starshinedesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.DESC}`" mode="aspectFit">
</image> -->
<view class="starshinedesc" :style="{ color: getColor() }">
7类课程：⼩⼉常⻅病-急救，产后恢复运动实操课，痱⼦，尿布疹，⼩⼉常⻅病-常⻅疾病护理，新⽣⼉⻩疸，⼉童安全⽤药操作课
</view>
</view>
<view v-if="currentLevelName === 'starlight'" class="starlight">
<image class="starlightbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.BG}`"></image>
<image class="starlighttitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.TITLE}`" mode="aspectFit">
</image>
<view class="starlightips">
<image class="starlightips1" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.IPS1}`" mode="aspectFit">
</image>
<image class="starlightips2" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.IPS2}`" mode="aspectFit">
</image>
<image class="starlightips3" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.IPS3}`" mode="aspectFit">
</image>
<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"
@click="jump('starlight')"></image>
<!-- <image class="starlightdesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.DESC}`" mode="aspectFit">
</image> -->
<view class="starlightdesc" :style="{ color: getColor() }">
7类课程：⼩⼉常⻅病-急救，产后恢复运动实操课，痱⼦，尿布疹，⼩⼉常⻅病-常⻅疾病护理，新⽣⼉⻩疸，⼉童安全⽤药操作课
</view>
</view>
<view v-if="currentLevelName === 'gold'" class="gold">
<image class="goldipsbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.BG}`"></image>
<image class="goldipstitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.TITLE}`" mode="aspectFit"></image>
<view class="goldips">
<image class="goldips1" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.IPS1}`" mode="aspectFit"></image>
<image class="goldips2" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.IPS2}`" mode="aspectFit"></image>
<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"
@click="jump('gold')"></image>
<!-- <image class="golddesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.DESC}`" mode="aspectFit"></image> -->
<view class="golddesc" :style="{ color: getColor() }">
5类课程：产检，⼉童疫苗，婴幼⼉护理，⼩⼉发热，⼩⼉7种常⻅病的治疗⽅法和⽤药原则
</view>
</view>
<view v-if="currentLevelName === 'platinum'" class="platinum">
<image class="platinumbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.BG}`"></image>
<image class="platinumtitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.TITLE}`" mode="aspectFit">
</image>
<view class="platinumips">
<image class="platinumips1" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.IPS1}`" mode="aspectFit">
</image>
<image class="platinumips2" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.IPS2}`" mode="aspectFit">
</image>
<image class="platinumips3" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.IPS3}`" mode="aspectFit">
</image>
<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"
@click="jump('platinum')"></image>
<!-- <image class="platinumdesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.DESC}`" mode="aspectFit"></image> -->
<view class="platinumdesc" :style="{ color: getColor() }">
5类课程：产检，⼉童疫苗，婴幼⼉护理，⼩⼉发热，⼩⼉7种常⻅病的治疗⽅法和⽤药原则
</view>
</view>
</view>
</template>
<script setup>
import { getCurrentInstance } from 'vue'
import { BABY_CLASS_IMAGES } from './babyClassImages.js'
import { computed } from 'vue'
// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
// 接收用户等级参数
const props = defineProps({
currentLevel: {
type: Number,
required: true,
validator: (value) => [0, 1, 2, 3, 4].includes(value),
},
userLevel: {
type: Number,
required: true,
validator: (value) => [0, 1, 2, 3, 4].includes(value),
},
})
// 颜色配置
const getColor = () => {
const colors = [
"#503404",
"#284a6c",
"#322d6f",
"#6d5d4f",
"#fff0df"
]
return colors[props.currentLevel];
}
// 等级映射常量
const LEVEL_MAP = {
0: 'gold',
1: 'platinum',
2: 'diamond',
3: 'starlight',
4: 'starshine'
}
// 计算属性：当前展示等级
const currentLevelName = computed(() => LEVEL_MAP[props.currentLevel])
// 计算属性：用户等级名称
const userLevelName = computed(() => LEVEL_MAP[props.userLevel])
// 跳转方法
const jump = (level) => {
console.log(`跳转到 ${level} 等级页面`)
// 检查用户等级是否符合要求
// const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
// const userLevelIndex = levelOrder.indexOf(props.userLevel);
// const requiredLevelIndex = levelOrder.indexOf(props.currentLevel);
// if (userLevelIndex < requiredLevelIndex) {
// uni.showToast({
// title: '等级不够，无法访问',
// icon: 'none',
// duration: 2000
// })
// return;
// }
// 跳转到 H5 页面，地址暂时默认 https://www.baidu.com
// 可以根据不同等级跳转到不同的地址
const url = 'https://member.feihe.com/memberH5/#/courses'
// 使用 uni.navigateTo 跳转到 webview 页面
uni.navigateTo({
url: `/pages/webview/webview?url=${encodeURIComponent(url)}`
})
}
</script>
<style lang="less" scoped>
.babyclass {
width: 686rpx;
height: 773rpx;
left: 0rpx;
top: 0rpx;
right: 0rpx;
margin: auto;
position: relative;
.diamond {
width: 686rpx;
height: 753rpx;
left: 10rpx;
top: 10rpx;
position: absolute;
.diamondbg {
width: 686rpx;
height: 763rpx;
left: -10rpx;
top: -10rpx;
position: absolute;
opacity: 0.2;
border-radius: 45rpx;
}
.diamondtitle {
width: 126rpx;
height: 31rpx;
left: 23rpx;
top: 30rpx;
position: absolute;
}
.diamondips {
width: 610rpx;
height: 373rpx;
left: 28rpx;
top: 96rpx;
position: absolute;
.diamondips1 {
width: 292rpx;
height: 173rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.diamondips2 {
width: 291rpx;
height: 173rpx;
left: 319rpx;
top: 0rpx;
position: absolute;
}
.diamondips3 {
width: 292rpx;
height: 173rpx;
left: 0rpx;
top: 200rpx;
position: absolute;
}
.diamondips4 {
width: 291rpx;
height: 173rpx;
left: 319rpx;
top: 200rpx;
position: absolute;
}
}
.diamondbtn {
width: 442rpx;
height: 85rpx;
left: 112rpx;
top: 513rpx;
position: absolute;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.diamonddesc {
width: 635rpx;
height: 92rpx;
left: 15rpx;
top: 641rpx;
font-size: 22rpx;
line-height: 1.5;
letter-spacing: 0.5rpx;
text-align: left;
position: absolute;
}
}
.starshine {
width: 686rpx;
height: 753rpx;
left: 10rpx;
top: 10rpx;
position: absolute;
.starshinebg {
width: 686rpx;
height: 763rpx;
left: -10rpx;
top: -10rpx;
border-radius: 45rpx;
position: absolute;
opacity: 0.1;
}
.starshinetitle {
width: 126rpx;
height: 31rpx;
left: 23rpx;
top: 30rpx;
position: absolute;
}
.starshineips {
width: 610rpx;
height: 373rpx;
left: 28rpx;
top: 96rpx;
position: absolute;
.starshineips1 {
width: 292rpx;
height: 173rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starshineips2 {
width: 291rpx;
height: 173rpx;
left: 319rpx;
top: 0rpx;
position: absolute;
}
.starshineips3 {
width: 292rpx;
height: 173rpx;
left: 0rpx;
top: 200rpx;
position: absolute;
}
.starshineips4 {
width: 291rpx;
height: 173rpx;
left: 319rpx;
top: 200rpx;
position: absolute;
}
}
.starshinebtn {
width: 442rpx;
height: 85rpx;
left: 112rpx;
top: 513rpx;
position: absolute;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.starshinedesc {
width: 635rpx;
height: 92rpx;
left: 15rpx;
top: 641rpx;
font-size: 22rpx;
line-height: 1.5;
letter-spacing: 0.5rpx;
text-align: left;
position: absolute;
}
}
.starlight {
width: 686rpx;
height: 753rpx;
left: 10rpx;
top: 10rpx;
position: absolute;
.starlightbg {
width: 686rpx;
height: 763rpx;
left: -10rpx;
top: -10rpx;
border-radius: 45rpx;
position: absolute;
opacity: 0.2;
}
.starlighttitle {
width: 126rpx;
height: 31rpx;
left: 23rpx;
top: 30rpx;
position: absolute;
}
.starlightips {
width: 610rpx;
height: 373rpx;
left: 28rpx;
top: 96rpx;
position: absolute;
.starlightips1 {
width: 292rpx;
height: 173rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starlightips2 {
width: 291rpx;
height: 173rpx;
left: 319rpx;
top: 0rpx;
position: absolute;
}
.starlightips3 {
width: 292rpx;
height: 173rpx;
left: 0rpx;
top: 200rpx;
position: absolute;
}
.starlightips4 {
width: 291rpx;
height: 173rpx;
left: 319rpx;
top: 200rpx;
position: absolute;
}
}
.starlightbtn {
width: 442rpx;
height: 85rpx;
left: 112rpx;
top: 513rpx;
position: absolute;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.starlightdesc {
width: 635rpx;
height: 92rpx;
left: 15rpx;
top: 641rpx;
position: absolute;
font-size: 22rpx;
line-height: 1.5;
letter-spacing: 0.5rpx;
text-align: left;
}
}
.gold {
width: 686rpx;
height: 753rpx;
left: 10rpx;
top: 10rpx;
position: absolute;
.goldipsbg {
width: 686rpx;
height: 763rpx;
left: -10rpx;
top: -10rpx;
position: absolute;
border-radius: 45rpx;
opacity: 0.2;
}
.goldipstitle {
width: 126rpx;
height: 31rpx;
left: 23rpx;
top: 30rpx;
position: absolute;
}
.goldips {
width: 610rpx;
height: 373rpx;
left: 28rpx;
top: 96rpx;
position: absolute;
.goldips1 {
width: 292rpx;
height: 173rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.goldips2 {
width: 291rpx;
height: 173rpx;
left: 319rpx;
top: 0rpx;
position: absolute;
}
.goldips3 {
width: 292rpx;
height: 173rpx;
left: 0rpx;
top: 200rpx;
position: absolute;
}
.goldips4 {
width: 291rpx;
height: 173rpx;
left: 319rpx;
top: 200rpx;
position: absolute;
}
}
.goldbtn {
width: 442rpx;
height: 85rpx;
left: 112rpx;
top: 513rpx;
position: absolute;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.golddesc {
width: 634rpx;
height: 57rpx;
left: 15rpx;
top: 641rpx;
position: absolute;
font-size: 22rpx;
line-height: 1.5;
letter-spacing: 0.5rpx;
text-align: left;
}
}
.platinum {
width: 635rpx;
height: 753rpx;
left: 10rpx;
top: 10rpx;
position: absolute;
.platinumbg {
width: 686rpx;
height: 763rpx;
left: -10rpx;
top: -10rpx;
border-radius: 45rpx;
position: absolute;
opacity: 0.2;
}
.platinumtitle {
width: 126rpx;
height: 31rpx;
left: 23rpx;
top: 30rpx;
position: absolute;
}
.platinumips {
width: 610rpx;
height: 373rpx;
left: 28rpx;
top: 96rpx;
position: absolute;
.platinumips1 {
width: 292rpx;
height: 173rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.platinumips2 {
width: 291rpx;
height: 173rpx;
left: 319rpx;
top: 0rpx;
position: absolute;
}
.platinumips3 {
width: 292rpx;
height: 173rpx;
left: 0rpx;
top: 200rpx;
position: absolute;
}
.platinumips4 {
width: 291rpx;
height: 173rpx;
left: 319rpx;
top: 200rpx;
position: absolute;
}
}
.platinumbtn {
width: 442rpx;
height: 85rpx;
left: 112rpx;
top: 513rpx;
position: absolute;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.platinumdesc {
width: 635rpx;
height: 92rpx;
left: 15rpx;
top: 641rpx;
position: absolute;
font-size: 22rpx;
line-height: 1.5;
letter-spacing: 0.5rpx;
text-align: left;
}
}
.default-text {
width: 635rpx;
height: 753rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
color: #999;
}
}
</style>
components/pointRightsCom/babyClassImages.js 0 → 100644
View file @ bae2233b
const version = 'v1'
// babyClass 组件图片资源常量
export const BABY_CLASS_IMAGES = {
// Diamond 等级相关图片
DIAMOND: {
BG: `pointRights/babyClass/${version}/DiamondBg.png`,
TITLE: `pointRights/babyClass/${version}/DiamondTitle.png`,
IPS1: `pointRights/babyClass/${version}/DiamondIps1.png`,
IPS2: `pointRights/babyClass/${version}/DiamondIps2.png`,
IPS3: `pointRights/babyClass/${version}/DiamondIps3.png`,
IPS4: `pointRights/babyClass/${version}/DiamondIps4.png`,
BTN: `pointRights/babyClass/${version}/DiamondBtn.png`,
DESC: `pointRights/babyClass/${version}/DiamondDesc.png`
},
// Starshine 等级相关图片
STARSHINE: {
BG: `pointRights/babyClass/${version}/StarshineBg.png`,
TITLE: `pointRights/babyClass/${version}/StarshineTitle.png`,
IPS1: `pointRights/babyClass/${version}/StarshineIps1.png`,
IPS2: `pointRights/babyClass/${version}/StarshineIps2.png`,
IPS3: `pointRights/babyClass/${version}/StarshineIps3.png`,
IPS4: `pointRights/babyClass/${version}/StarshineIps4.png`,
BTN: `pointRights/babyClass/${version}/StarshineBtn3.png`,
DESC: `pointRights/babyClass/${version}/StarshineDesc.png`
},
// Starlight 等级相关图片
STARLIGHT: {
BG: `pointRights/babyClass/${version}/StarlightBg.png`,
TITLE: `pointRights/babyClass/${version}/StarlightTitle.png`,
IPS1: `pointRights/babyClass/${version}/StarlightIps1.png`,
IPS2: `pointRights/babyClass/${version}/StarlightIps2.png`,
IPS3: `pointRights/babyClass/${version}/StarlightIps3.png`,
IPS4: `pointRights/babyClass/${version}/StarlightIps4.png`,
BTN: `pointRights/babyClass/${version}/StarlightBtn.png`,
DESC: `pointRights/babyClass/${version}/StarlightDesc.png`
},
// Gold 等级相关图片
GOLD: {
BG: `pointRights/babyClass/${version}/GoldIpsBg.png`,
TITLE: `pointRights/babyClass/${version}/GoldIpsTitle.png`,
IPS1: `pointRights/babyClass/${version}/GoldIps1.png`,
IPS2: `pointRights/babyClass/${version}/GoldIps2.png`,
IPS3: `pointRights/babyClass/${version}/GoldIps3.png`,
IPS4: `pointRights/babyClass/${version}/GoldIps4.png`,
BTN: `pointRights/babyClass/${version}/GoldBtn.png`,
DESC: `pointRights/babyClass/${version}/GoldDesc.png`
},
// Platinum 等级相关图片
PLATINUM: {
BG: `pointRights/babyClass/${version}/PlatinumBg.png`,
TITLE: `pointRights/babyClass/${version}/PlatinumTitle.png`,
IPS1: `pointRights/babyClass/${version}/PlatinumIps1.png`,
IPS2: `pointRights/babyClass/${version}/PlatinumIps2.png`,
IPS3: `pointRights/babyClass/${version}/PlatinumIps3.png`,
IPS4: `pointRights/babyClass/${version}/PlatinumIps4.png`,
BTN: `pointRights/babyClass/${version}/PlatinumBtn.png`,
DESC: `pointRights/babyClass/${version}/PlatinumDesc2.png`
}
}
components/pointRightsCom/monthGift.vue 0 → 100644
View file @ bae2233b
This source diff could not be displayed because it is too large. You can view the blob instead.
components/pointRightsCom/monthGiftImages.js 0 → 100644
View file @ bae2233b
const version = 'v1'
// monthGift 组件图片资源常量
export const MONTH_GIFT_IMAGES = {
// Diamond 等级相关图片
DIAMOND: {
BG: `pointRights/MonthGift/${version}/diamondBg.png`,
GOOD_COUPONS: {
TITLE: `pointRights/MonthGift/${version}/diamondGoodCouponsTitle.png`,
BG: `pointRights/MonthGift/${version}/diamondGoodCouponsBg.png`,
COUPON1: `pointRights/MonthGift/${version}/diamondGoodCoupons1.png`,
COUPON2: `pointRights/MonthGift/${version}/diamondGoodCoupons2.png`,
COUPON3: `pointRights/MonthGift/${version}/diamondGoodCoupons3.png`,
COUPON4: `pointRights/MonthGift/${version}/diamondGoodCoupons4.png`,
COUPON5: `pointRights/MonthGift/${version}/diamondGoodCoupons5.png`,
NOW_BTN: `pointRights/MonthGift/${version}/diamondGoodCouponNowBtn.png`
},
BUY_COM: {
TITLE: `pointRights/MonthGift/${version}/diamond1BuyComTitle.png`,
T1: `pointRights/MonthGift/${version}/diamondT1.png`,
DESC: `pointRights/MonthGift/${version}/diamond1BuyComDesc.png`,
STATUS: `pointRights/MonthGift/${version}/diamond1BuyComStatus.png`,
SEL1: `pointRights/MonthGift/${version}/diamond1BuyComSel1.png`,
SEL2: `pointRights/MonthGift/${version}/diamond1BuyComSel2.png`,
SEL3: `pointRights/MonthGift/${version}/diamond1BuyComSel3.png`,
SEL4: `pointRights/MonthGift/${version}/diamond1BuyComSel4.png`,
TIME1: {
TEXT: `pointRights/MonthGift/${version}/diamond1BuyComTime1Text.png`,
STATUS: `pointRights/MonthGift/${version}/diamond1BuyComTime1Status.png`
},
TIME2: {
TEXT: `pointRights/MonthGift/${version}/diamond1BuyComTime2Text.png`,
STATUS: `pointRights/MonthGift/${version}/diamond1BuyComTime2Status.png`
},
TIME3: {
TEXT: `pointRights/MonthGift/${version}/diamond1BuyComTime3Text.png`,
STATUS: `pointRights/MonthGift/${version}/diamond1BuyComTime3Status.png`
},
TIME4: {
TEXT: `pointRights/MonthGift/${version}/diamond1BuyComTime4Text.png`,
STATUS: `pointRights/MonthGift/${version}/diamond1BuyComTime4Status.png`
},
GOODS: {
BG: `pointRights/MonthGift/${version}/diamond1BuyComGoodsBg.png`,
LOCK_BTN: `pointRights/MonthGift/${version}/diamond1BuyComGoodsLockBtn.png`,
NOW_BTN: `pointRights/MonthGift/${version}/diamond1BuyComGoodsNowBtn.png`
}
}
},
// Starshine 等级相关图片
STARSHINE: {
BG: `pointRights/MonthGift/${version}/starshineBg.png`,
GOOD_COUPONS: {
TITLE: `pointRights/MonthGift/${version}/starshineGoodCouponsTitle.png`,
BG: `pointRights/MonthGift/${version}/starshineGoodCouponsBg.png`,
COUPON1: `pointRights/MonthGift/${version}/starshineGoodCoupons1.png`,
COUPON2: `pointRights/MonthGift/${version}/starshineGoodCoupons2.png`,
COUPON3: `pointRights/MonthGift/${version}/starshineGoodCoupons3.png`,
COUPON4: `pointRights/MonthGift/${version}/starshineGoodCoupons4.png`,
COUPON5: `pointRights/MonthGift/${version}/starshineGoodCoupons5.png`,
NOW_BTN: `pointRights/MonthGift/${version}/starshineGoodCouponNowBtn.png`
},
BUY_COM: {
TITLE: `pointRights/MonthGift/${version}/starshine1BuyComTitle.png`,
T1: `pointRights/MonthGift/${version}/starshineT1.png`,
DESC: `pointRights/MonthGift/${version}/starshine1BuyComDesc.png`,
STATUS: `pointRights/MonthGift/${version}/starshine1BuyComStatus.png`,
SEL1: `pointRights/MonthGift/${version}/starshine1BuyComSel1.png`,
SEL2: `pointRights/MonthGift/${version}/starshine1BuyComSel22.png`,
SEL3: `pointRights/MonthGift/${version}/starshine1BuyComSel23.png`,
SEL4: `pointRights/MonthGift/${version}/starshine1BuyComSel24.png`,
TIME1: {
TEXT: `pointRights/MonthGift/${version}/starshine1BuyComTime1Text.png`,
STATUS: `pointRights/MonthGift/${version}/starshine1BuyComTime1Status.png`
},
TIME2: {
TEXT: `pointRights/MonthGift/${version}/starshine1BuyComTime2Text.png`,
STATUS: `pointRights/MonthGift/${version}/starshine1BuyComTime2Status.png`
},
TIME3: {
TEXT: `pointRights/MonthGift/${version}/starshine1BuyComTime3Text.png`,
STATUS: `pointRights/MonthGift/${version}/starshine1BuyComTime3Status.png`
},
TIME4: {
TEXT: `pointRights/MonthGift/${version}/starshine1BuyComTime4Text.png`,
STATUS: `pointRights/MonthGift/${version}/starshine1BuyComTime4Status.png`
},
GOODS: {
BG: `pointRights/MonthGift/${version}/starshine1BuyComGoodsBg.png`,
LOCK_BTN: `pointRights/MonthGift/${version}/starshine1BuyComGoodsLockBtn.png`,
NOW_BTN: `pointRights/MonthGift/${version}/starshine1BuyComGoodsNowBtn.png`
}
}
},
// Starlight 等级相关图片
STARLIGHT: {
BG: `pointRights/MonthGift/${version}/starlightBg.png`,
GOOD_COUPONS: {
TITLE: `pointRights/MonthGift/${version}/startlightGoodCouponsTitle.png`,
BG: `pointRights/MonthGift/${version}/startlightGoodCouponsBg.png`,
COUPON1: `pointRights/MonthGift/${version}/startlightGoodCoupons1.png`,
COUPON2: `pointRights/MonthGift/${version}/startlightGoodCoupons2.png`,
COUPON3: `pointRights/MonthGift/${version}/startlightGoodCoupons3.png`,
COUPON4: `pointRights/MonthGift/${version}/startlightGoodCoupons4.png`,
COUPON5: `pointRights/MonthGift/${version}/startlightGoodCoupons5.png`,
NOW_BTN: `pointRights/MonthGift/${version}/startlightGoodCouponNowBtn.png`
},
BUY_COM: {
TITLE: `pointRights/MonthGift/${version}/startlight1BuyComTitle.png`,
T1: `pointRights/MonthGift/${version}/starlightT1.png`,
DESC: `pointRights/MonthGift/${version}/startlight1BuyComDesc.png`,
STATUS: `pointRights/MonthGift/${version}/startlight1BuyComStatus.png`,
SEL1: `pointRights/MonthGift/${version}/startlight1BuyComSel1.png`,
SEL2: `pointRights/MonthGift/${version}/startlight1BuyComSel2.png`,
SEL3: `pointRights/MonthGift/${version}/startlight1BuyComSel3.png`,
SEL4: `pointRights/MonthGift/${version}/startlight1BuyComSel4.png`,
TIME1: {
TEXT: `pointRights/MonthGift/${version}/startlight1BuyComTime1Text.png`,
STATUS: `pointRights/MonthGift/${version}/startlight1BuyComTime1Status.png`
},
TIME2: {
TEXT: `pointRights/MonthGift/${version}/startlight1BuyComTime2Text.png`,
STATUS: `pointRights/MonthGift/${version}/startlight1BuyComTime2Status.png`
},
TIME3: {
TEXT: `pointRights/MonthGift/${version}/startlight1BuyComTime3Text.png`,
STATUS: `pointRights/MonthGift/${version}/startlight1BuyComTime3Status.png`
},
TIME4: {
TEXT: `pointRights/MonthGift/${version}/startlight1BuyComTime4Text.png`,
STATUS: `pointRights/MonthGift/${version}/startlight1BuyComTime4Status.png`
},
GOODS: {
BG: `pointRights/MonthGift/${version}/startlight1BuyComGoodsBg.png`,
LOCK_BTN: `pointRights/MonthGift/${version}/startlight1BuyComGoodsLockBtn.png`,
NOW_BTN: `pointRights/MonthGift/${version}/startlight1BuyComGoodsNowBtn.png`
}
}
},
// Gold 等级相关图片
GOLD: {
BG: `pointRights/MonthGift/${version}/goldBg.png`,
LOCKTIP: `pointRights/MonthGift/${version}/goldLockTip.png`,
GOOD_COUPONS: {
TITLE: `pointRights/MonthGift/${version}/goldGoodCouponsTitle.png`,
BG: `pointRights/MonthGift/${version}/goldGoodCouponsBg.png`,
COUPON1: `pointRights/MonthGift/${version}/goldGoodCoupons1.png`,
COUPON2: `pointRights/MonthGift/${version}/goldGoodCoupons2.png`,
COUPON3: `pointRights/MonthGift/${version}/goldGoodCoupons3.png`,
COUPON4: `pointRights/MonthGift/${version}/goldGoodCoupons4.png`,
COUPON5: `pointRights/MonthGift/${version}/goldGoodCoupons5.png`,
NOW_BTN: `pointRights/MonthGift/${version}/goldGoodCouponNowBtn.png`
},
BUY_COM: {
TITLE: `pointRights/MonthGift/${version}/gold1BuyComTitle.png`,
T1: `pointRights/MonthGift/${version}/goldT1.png`,
DESC: `pointRights/MonthGift/${version}/gold1BuyComDesc.png`,
STATUS: `pointRights/MonthGift/${version}/gold1BuyComStatus.png`,
SEL1: `pointRights/MonthGift/${version}/gold1BuyComSel1.png`,
SEL2: `pointRights/MonthGift/${version}/gold1BuyComSel2.png`,
SEL3: `pointRights/MonthGift/${version}/gold1BuyComSel3.png`,
SEL4: `pointRights/MonthGift/${version}/gold1BuyComSel4.png`,
TIME1: {
TEXT: `pointRights/MonthGift/${version}/gold1BuyComTime1Text.png`,
STATUS: `pointRights/MonthGift/${version}/gold1BuyComTime1Status.png`
},
TIME2: {
TEXT: `pointRights/MonthGift/${version}/gold1BuyComTime2Text.png`,
STATUS: `pointRights/MonthGift/${version}/gold1BuyComTime2Status.png`
},
TIME3: {
TEXT: `pointRights/MonthGift/${version}/gold1BuyComTime3Text.png`,
STATUS: `pointRights/MonthGift/${version}/gold1BuyComTime3Status.png`
},
TIME4: {
TEXT: `pointRights/MonthGift/${version}/gold1BuyComTime4Text.png`,
STATUS: `pointRights/MonthGift/${version}/gold1BuyComTime4Status.png`
},
GOODS: {
BG: `pointRights/MonthGift/${version}/gold1BuyComGoodsBg.png`,
LOCK_BTN: `pointRights/MonthGift/${version}/gold1BuyComGoodsLockBtn.png`,
NOW_BTN: `pointRights/MonthGift/${version}/gold1BuyComGoodsNowBtn.png`
}
}
},
// Platinum 等级相关图片
PLATINUM: {
BG: `pointRights/MonthGift/${version}/platinumBg.png`,
LOCKTIP: `pointRights/MonthGift/${version}/platinumLockTip.png`,
GOOD_COUPONS: {
TITLE: `pointRights/MonthGift/${version}/platinumGoodCouponTitle.png`,
BG: `pointRights/MonthGift/${version}/platinumGoodCouponBg.png`,
COUPON1: `pointRights/MonthGift/${version}/platinumGoodCoupons1.png`,
COUPON2: `pointRights/MonthGift/${version}/platinumGoodCoupons2.png`,
COUPON3: `pointRights/MonthGift/${version}/platinumGoodCoupons3.png`,
COUPON4: `pointRights/MonthGift/${version}/platinumGoodCoupons4.png`,
COUPON5: `pointRights/MonthGift/${version}/platinumGoodCoupons5.png`,
NOW_BTN: `pointRights/MonthGift/${version}/platinumGoodCouponNowBtn.png`
},
BUY_COM: {
TITLE: `pointRights/MonthGift/${version}/platinum1BuyComTitle.png`,
T1: `pointRights/MonthGift/${version}/platinumT1.png`,
DESC: `pointRights/MonthGift/${version}/platinum1BuyComDesc.png`,
STATUS: `pointRights/MonthGift/${version}/platinum1BuyComStatus.png`,
SEL1: `pointRights/MonthGift/${version}/platinum1BuyComSel1.png`,
SEL2: `pointRights/MonthGift/${version}/platinum1BuyComSel2.png`,
SEL3: `pointRights/MonthGift/${version}/platinum1BuyComSel3.png`,
SEL4: `pointRights/MonthGift/${version}/platinum1BuyComSel4.png`,
TIME1: {
TEXT: `pointRights/MonthGift/${version}/platinum1BuyComTime1Text.png`,
STATUS: `pointRights/MonthGift/${version}/platinum1BuyComTime1Status.png`
},
TIME2: {
TEXT: `pointRights/MonthGift/${version}/platinum1BuyComTime2Text.png`,
STATUS: `pointRights/MonthGift/${version}/platinum1BuyComTime2Status.png`
},
TIME3: {
TEXT: `pointRights/MonthGift/${version}/platinum1BuyComTime3Text.png`,
STATUS: `pointRights/MonthGift/${version}/platinum1BuyComTime3Status.png`
},
TIME4: {
TEXT: `pointRights/MonthGift/${version}/platinum1BuyComTime4Text.png`,
STATUS: `pointRights/MonthGift/${version}/platinum1BuyComTime4Status.png`
},
GOODS: {
BG: `pointRights/MonthGift/${version}/platinum1BuyComGoodsBg.png`,
LOCK_BTN: `pointRights/MonthGift/${version}/platinum1BuyComGoodsLockBtn.png`,
NOW_BTN: `pointRights/MonthGift/${version}/platinum1BuyComGoodsNowBtn.png`
}
}
}
}
\ No newline at end of file
components/pointRightsCom/yearGift.vue 0 → 100644
View file @ bae2233b
<template>
<view class="yeargift">
<!-- 根据展示等级动态显示对应等级页面 -->
<view v-if="currentLevelName === '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="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>
<view class="diamondthreebtn active" @click="handleButtonClick('diamond')">
<text>{{ buttonInfo.text }}</text>
</view>
</view>
</view>
<view v-if="currentLevelName === '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>
</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>
<view class="starshinethreebtn starshine" @click="handleButtonClick('starshine')">
<text>{{ buttonInfo.text }}</text>
</view>
</view>
</view>
<view v-if="currentLevelName === '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>
</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>
<view class="starlightthreebtn starlight" @click="handleButtonClick('starlight')">
<text>{{ buttonInfo.text }}</text>
</view>
</view>
</view>
<view v-if="currentLevelName === '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>
<view class="goldone">
<image class="goldonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.ONE.BG}`" mode="aspectFit"></image>
<image class="goldoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.ONE.AWARD}`" mode="aspectFit">
</image>
<image class="goldoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.ONE.ADD}`" mode="aspectFit"></image>
<image class="goldonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.ONE.DESC}`" mode="aspectFit">
</image>
</view>
<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>
<view class="goldthreebtn gold" @click="handleButtonClick('gold')">
<text>{{ buttonInfo.text }}</text>
</view>
</view>
<image class="goldlocktip" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.LOCKTIP}`" mode="aspectFit"></image>
</view>
<view v-if="currentLevelName === '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="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>
</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>
<view class="platinumthreebtn platinum" @click="handleButtonClick('platinum')">
<text>{{ buttonInfo.text }}</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { getCurrentInstance, computed } from 'vue'
import { YEAR_GIFT_IMAGES } from './yearGiftImages.js'
// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
// 接收用户等级参数
const props = defineProps({
currentLevel: {
type: Number,
required: true,
validator: (value) => [0, 1, 2, 3, 4].includes(value),
},
userLevel: {
type: Number,
required: true,
validator: (value) => [0, 1, 2, 3, 4].includes(value),
},
})
// 等级映射常量
const LEVEL_MAP = {
0: 'gold',
1: 'platinum',
2: 'diamond',
3: 'starlight',
4: 'starshine'
}
// 计算属性：当前展示等级
const currentLevelName = computed(() => LEVEL_MAP[props.currentLevel])
// 计算属性：用户等级名称
const userLevelName = computed(() => LEVEL_MAP[props.userLevel])
// 计算属性：按钮信息
const buttonInfo = computed(() => {
const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
const userLevelIndex = levelOrder.indexOf(props.userLevel * 1);
const diamondIndex = levelOrder.indexOf(2); // Diamond level
const platinumIndex = levelOrder.indexOf(1); // Platinum level
if (userLevelIndex <= platinumIndex) {
return {
text: '去升级',
action: 'upgrade'
};
} else if (userLevelIndex >= diamondIndex) {
return {
text: '去查看',
action: 'view'
};
}
})
// 按钮点击事件处理
const handleButtonClick = () => {
if (buttonInfo.value.action === 'upgrade') {
// 跳转到升级页面
uni.navigateTo({
url: '/pages/webview/webview?url=https://mom.feihe.com/member/mine/pointStrategy'
});
} else if (buttonInfo.value.action === 'view') {
// 跳转到查看页面
uni.navigateTo({
url: '/pages/webview/webview?url=https://member.feihe.com/memberH5/#/memberGrowthGift?activityCode=hyczl&sceneCode=WXG07'
});
}
}
</script>
<style lang="less" scoped>
.yeargift {
width: 686rpx;
height: 1158rpx;
left: 0rpx;
top: 0rpx;
right: 0rpx;
margin: auto;
position: relative;
// 默认文本样式
.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;
// top: 79rpx;
position: absolute;
.diamondbg3 {
width: 686rpx;
height: 1139rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.2;
}
.diamondbg2 {
width: 640rpx;
height: 479rpx;
left: 23rpx;
top: 50rpx;
position: absolute;
opacity: 0.2;
}
.diamondbg1 {
width: 640rpx;
height: 437rpx;
left: 23rpx;
top: 543rpx;
position: absolute;
opacity: 0.2;
}
.diamondone {
width: 567rpx;
height: 423rpx;
left: 59rpx;
top: 71rpx;
position: absolute;
.diamondonebg {
width: 566rpx;
height: 423rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.diamondoneaward {
width: 304rpx;
height: 212rpx;
left: 3rpx;
top: 91rpx;
position: absolute;
}
.diamondoneadd {
width: 29rpx;
height: 30rpx;
left: 319rpx;
top: 180rpx;
position: absolute;
}
.diamondonedesc {
width: 207rpx;
height: 159rpx;
left: 360rpx;
top: 116rpx;
position: absolute;
}
}
.diamondthree {
width: 543rpx;
height: 521rpx;
left: 59rpx;
top: 572rpx;
position: absolute;
.diamondthreebg {
width: 543rpx;
height: 368rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.diamondthreeaward {
width: 225rpx;
height: 238rpx;
left: 169rpx;
top: 72rpx;
position: absolute;
}
.diamondthreebtn {
width: 443rpx;
height: 85rpx;
left: 61rpx;
top: 436rpx;
position: absolute;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
}
}
.starshine {
width: 686rpx;
height: 1139rpx;
// left: 32rpx;
// top: 79rpx;
position: absolute;
.starshinebg3 {
width: 686rpx;
height: 1139rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.1;
}
.starshinebg2 {
width: 640rpx;
height: 479rpx;
left: 23rpx;
top: 50rpx;
position: absolute;
opacity: 0.1;
}
.starshinebg1 {
width: 640rpx;
height: 437rpx;
left: 23rpx;
top: 543rpx;
position: absolute;
opacity: 0.1;
}
.starshineone {
width: 567rpx;
height: 423rpx;
left: 59rpx;
top: 71rpx;
position: absolute;
.starshineonebg {
width: 566rpx;
height: 423rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starshineoneaward {
width: 304rpx;
height: 212rpx;
left: 3rpx;
top: 90rpx;
position: absolute;
}
.starshineoneadd {
width: 29rpx;
height: 30rpx;
left: 319rpx;
top: 180rpx;
position: absolute;
}
.starshineonedesc {
width: 207rpx;
height: 159rpx;
left: 360rpx;
top: 116rpx;
position: absolute;
}
}
.starshinethree {
width: 543rpx;
height: 521rpx;
left: 59rpx;
top: 572rpx;
position: absolute;
.starshinethreebg {
width: 543rpx;
height: 368rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starshinethreeaward {
width: 225rpx;
height: 238rpx;
left: 169rpx;
top: 72rpx;
position: absolute;
}
.starshinethreebtn {
width: 443rpx;
height: 85rpx;
left: 61rpx;
top: 436rpx;
position: absolute;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
}
}
.starlight {
width: 686rpx;
height: 1139rpx;
// left: 32rpx;
// top: 79rpx;
position: absolute;
.starlightbg3 {
width: 686rpx;
height: 1139rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.2;
}
.starlightbg2 {
width: 640rpx;
height: 479rpx;
left: 23rpx;
top: 50rpx;
position: absolute;
opacity: 0.2;
}
.starlightbg1 {
width: 640rpx;
height: 437rpx;
left: 23rpx;
top: 543rpx;
position: absolute;
opacity: 0.2;
}
.starlightone {
width: 567rpx;
height: 423rpx;
left: 59rpx;
top: 71rpx;
position: absolute;
.starlightonebg {
width: 566rpx;
height: 423rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starlightoneaward {
width: 304rpx;
height: 212rpx;
left: 3rpx;
top: 90rpx;
position: absolute;
}
.starlightoneadd {
width: 29rpx;
height: 30rpx;
left: 319rpx;
top: 180rpx;
position: absolute;
}
.starlightonedesc {
width: 207rpx;
height: 159rpx;
left: 360rpx;
top: 116rpx;
position: absolute;
}
}
.starlightthree {
width: 543rpx;
height: 521rpx;
left: 59rpx;
top: 572rpx;
position: absolute;
.starlightthreebg {
width: 543rpx;
height: 368rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starlightthreeaward {
width: 225rpx;
height: 238rpx;
left: 169rpx;
top: 72rpx;
position: absolute;
}
.starlightthreebtn {
width: 443rpx;
height: 85rpx;
left: 61rpx;
top: 436rpx;
position: absolute;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
}
}
.gold {
width: 686rpx;
height: 1139rpx;
// left: 32rpx;
// top: 79rpx;
position: absolute;
.goldbg3 {
width: 686rpx;
height: 1139rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.2;
}
.goldbg2 {
width: 640rpx;
height: 479rpx;
left: 23rpx;
top: 50rpx;
position: absolute;
opacity: 0.2;
}
.goldbg1 {
width: 640rpx;
height: 437rpx;
left: 23rpx;
top: 543rpx;
position: absolute;
opacity: 0.2;
}
.goldone {
width: 567rpx;
height: 423rpx;
left: 59rpx;
top: 71rpx;
position: absolute;
.goldonebg {
width: 566rpx;
height: 423rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.goldoneaward {
width: 304rpx;
height: 212rpx;
left: 3rpx;
top: 90rpx;
position: absolute;
}
.goldoneadd {
width: 29rpx;
height: 30rpx;
left: 319rpx;
top: 180rpx;
position: absolute;
}
.goldonedesc {
width: 207rpx;
height: 159rpx;
left: 360rpx;
top: 116rpx;
position: absolute;
}
}
.goldthree {
width: 543rpx;
height: 521rpx;
left: 59rpx;
top: 572rpx;
position: absolute;
.goldthreebg {
width: 543rpx;
height: 368rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.goldthreeaward {
width: 225rpx;
height: 238rpx;
left: 169rpx;
top: 72rpx;
position: absolute;
}
.goldthreebtn {
width: 443rpx;
height: 85rpx;
left: 61rpx;
top: 436rpx;
position: absolute;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
}
.goldlocktip {
width: 257rpx;
height: 41rpx;
left: 429rpx;
top: 0rpx;
position: absolute;
}
}
.platinum {
width: 686rpx;
height: 1139rpx;
// left: 32rpx;
// top: 79rpx;
position: absolute;
.platinumbg3 {
width: 686rpx;
height: 1139rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.2;
}
.platinumbg2 {
width: 640rpx;
height: 479rpx;
left: 23rpx;
top: 49rpx;
position: absolute;
opacity: 0.2;
}
.platinumbg1 {
width: 640rpx;
height: 437rpx;
left: 23rpx;
top: 543rpx;
position: absolute;
opacity: 0.2;
}
.platinumlocktip {
width: 257rpx;
height: 41rpx;
left: 429rpx;
top: 0rpx;
position: absolute;
}
.platinumone {
width: 567rpx;
height: 423rpx;
left: 59rpx;
top: 71rpx;
position: absolute;
.platinumonebg {
width: 566rpx;
height: 423rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.platinumoneaward {
width: 304rpx;
height: 212rpx;
left: 3rpx;
top: 90rpx;
position: absolute;
}
.platinumoneadd {
width: 29rpx;
height: 30rpx;
left: 319rpx;
top: 180rpx;
position: absolute;
}
.platinumonedesc {
width: 207rpx;
height: 159rpx;
left: 360rpx;
top: 116rpx;
position: absolute;
}
}
.platinumthree {
width: 543rpx;
height: 521rpx;
left: 59rpx;
top: 572rpx;
position: absolute;
.platinumthreeaward {
width: 225rpx;
height: 238rpx;
left: 169rpx;
top: 72rpx;
position: absolute;
}
.platinumthreebg {
width: 543rpx;
height: 368rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.platinumthreebtn {
width: 443rpx;
height: 85rpx;
left: 61rpx;
top: 436rpx;
position: absolute;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
}
}
}
/* 按钮样式 */
.diamondthreebtn,
.starshinethreebtn,
.starlightthreebtn,
.goldthreebtn,
.platinumthreebtn {
display: flex;
align-items: center;
justify-content: center;
border-radius: 42.5rpx;
font-size: 26rpx;
font-weight: bold;
transition: transform 0.2s ease;
&.active {
background: linear-gradient(to right, #7253a5, #9879cc);
/* 钻石 */
color: #fff;
box-shadow: 0 4rpx 12rpx rgba(114, 83, 165, 0.3);
&:active {
transform: scale(0.95);
box-shadow: 0 2rpx 8rpx rgba(114, 83, 165, 0.4);
}
}
&.starshine {
background: linear-gradient(to right, #000000, #2c1600);
/* 星耀 */
color: #fff;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
&:active {
transform: scale(0.95);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4);
}
}
&.starlight {
background: linear-gradient(to right, #cda36b, #e0b97d);
/* 星光 */
color: #fff;
box-shadow: 0 4rpx 12rpx rgba(205, 163, 107, 0.3);
&:active {
transform: scale(0.95);
box-shadow: 0 2rpx 8rpx rgba(205, 163, 107, 0.4);
}
}
&.gold {
background: linear-gradient(to right, #906632, #ab7a44);
/* 黄金 */
color: #fff;
box-shadow: 0 4rpx 12rpx rgba(144, 102, 50, 0.3);
&:active {
transform: scale(0.95);
box-shadow: 0 2rpx 8rpx rgba(144, 102, 50, 0.4);
}
}
&.platinum {
background: linear-gradient(to right, #5189c0, #6fa2d5);
/* 白金 */
color: #fff;
box-shadow: 0 4rpx 12rpx rgba(81, 137, 192, 0.3);
&:active {
transform: scale(0.95);
box-shadow: 0 2rpx 8rpx rgba(81, 137, 192, 0.4);
}
}
}
</style>
components/pointRightsCom/yearGiftImages.js 0 → 100644
View file @ bae2233b
const version = 'v1'
// yearGift 组件图片资源常量
export const YEAR_GIFT_IMAGES = {
// Diamond 等级相关图片
DIAMOND: {
BG3: `pointRights/YearGift/${version}/diamondBg3.png`,
BG2: `pointRights/YearGift/${version}/diamondBg2.png`,
BG1: `pointRights/YearGift/${version}/diamondBg1.png`,
ONE: {
BG: `pointRights/YearGift/${version}/diamondOneBg.png`,
AWARD: `pointRights/YearGift/${version}/diamondOneAward.png`,
ADD: `pointRights/YearGift/${version}/diamondOneAdd.png`,
DESC: `pointRights/YearGift/${version}/diamondOneDesc.png`
},
THREE: {
BG: `pointRights/YearGift/${version}/diamondThreeBg.png`,
AWARD: `pointRights/YearGift/${version}/diamondThreeAward2.png`,
BTN: `pointRights/YearGift/${version}/diamondThreeBtn.png`
}
},
// Starshine 等级相关图片
STARSHINE: {
BG3: `pointRights/YearGift/${version}/starshineBg3.png`,
BG2: `pointRights/YearGift/${version}/starshineBg2.png`,
BG1: `pointRights/YearGift/${version}/starshineBg1.png`,
ONE: {
BG: `pointRights/YearGift/${version}/starshineOneBg.png`,
AWARD: `pointRights/YearGift/${version}/starshineOneAward.png`,
ADD: `pointRights/YearGift/${version}/starshineOneAdd.png`,
DESC: `pointRights/YearGift/${version}/starshineOneDesc.png`
},
THREE: {
BG: `pointRights/YearGift/${version}/starshineThreeBg.png`,
AWARD: `pointRights/YearGift/${version}/starshineThreeAward2.png`,
BTN: `pointRights/YearGift/${version}/starshineThreeBtn.png`
}
},
// Starlight 等级相关图片
STARLIGHT: {
BG3: `pointRights/YearGift/${version}/starlightBg3.png`,
BG2: `pointRights/YearGift/${version}/starlightBg2.png`,
BG1: `pointRights/YearGift/${version}/starlightBg1.png`,
ONE: {
BG: `pointRights/YearGift/${version}/starlightOneBg.png`,
AWARD: `pointRights/YearGift/${version}/starlightOneAward.png`,
ADD: `pointRights/YearGift/${version}/starlightOneAdd.png`,
DESC: `pointRights/YearGift/${version}/starlightOneDesc.png`
},
THREE: {
BG: `pointRights/YearGift/${version}/starlightThreeBg.png`,
AWARD: `pointRights/YearGift/${version}/starlightThreeAward2.png`,
BTN: `pointRights/YearGift/${version}/starlightThreeBtn.png`
}
},
// Gold 等级相关图片
GOLD: {
BG3: `pointRights/YearGift/${version}/goldBg3.png`,
BG2: `pointRights/YearGift/${version}/goldBg2.png`,
BG1: `pointRights/YearGift/${version}/goldBg1.png`,
ONE: {
BG: `pointRights/YearGift/${version}/goldOneBg.png`,
AWARD: `pointRights/YearGift/${version}/goldOneAward.png`,
ADD: `pointRights/YearGift/${version}/goldOneAdd.png`,
DESC: `pointRights/YearGift/${version}/goldOneDesc.png`
},
THREE: {
BG: `pointRights/YearGift/${version}/goldThreeBg.png`,
AWARD: `pointRights/YearGift/${version}/goldThreeAward3.png`,
BTN: `pointRights/YearGift/${version}/goldThreeBtn.png`
},
LOCKTIP: `pointRights/YearGift/${version}/goldLockTip.png`
},
// Platinum 等级相关图片
PLATINUM: {
BG3: `pointRights/YearGift/${version}/platinumBg3.png`,
BG2: `pointRights/YearGift/${version}/platinumBg2.png`,
BG1: `pointRights/YearGift/${version}/platinumBg1.png`,
LOCKTIP: `pointRights/YearGift/${version}/platinumLockTip.png`,
ONE: {
BG: `pointRights/YearGift/${version}/platinumOneBg.png`,
AWARD: `pointRights/YearGift/${version}/platinumOneAward.png`,
ADD: `pointRights/YearGift/${version}/platinumOneAdd.png`,
DESC: `pointRights/YearGift/${version}/platinumOneDesc.png`
},
THREE: {
BG: `pointRights/YearGift/${version}/platinumThreeBg.png`,
AWARD: `pointRights/YearGift/${version}/platinumThreeAward2.png`,
BTN: `pointRights/YearGift/${version}/platinumThreeBtn.png`
}
}
}
components/popup-jingxuan/popup-jingxuan.vue 0 → 100644
View file @ bae2233b
<template>
<view class="popup-tip">
<view class="popup-tip-content">
<view class="content-title">
精选好券领取成功
</view>
<!-- <view :class="`content-box sty-${type}`"> -->
<view class="content-box" :style="{ backgroundImage: `url('${bgImageUrl}')` }">
<view v-if="isUnlock" class="box-1">
<!-- :src="$baseUrl + `integral/${tupianBanben}/shengriPopup/${type}-1.png`" -->
<!-- :src="`/static/jingxuan/${type}-1.png`" -->
<image :src="$baseUrl + `integral/${tupianBanben}/jingxuan/${type}-1.png`" ></image>
</view>
<view class="box-2">
<image :src="$baseUrl + `integral/${tupianBanben}/jingxuan/${type}-2.png`" ></image>
</view>
<view class="box-3" @click="goUse">
<image :src="$baseUrl + `integral/${tupianBanben}/jingxuan/${type}-3.png`" ></image>
</view>
</view>
<view class="content-2" @click="closeBtn" :style="{backgroundImage: `url(${$baseUrl + `integral/${tupianBanben}/shengriPopup/close.png`})`}">
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
onMounted,
computed,
defineEmits,
onUnmounted,
getCurrentInstance
} from 'vue'
import { useUserStore } from "@/stores/user";
import { jump, JumpType } from '@/utils/index.js'
import md from '../../md';
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
// 接受父组件参数
const props = defineProps({
type: {
type: String,
default: '5', // 1 黄金、2 铂金、3 钻石、4 星光、5 星耀
},
isUnlock: {
type: Boolean,
default: true, // 是否解锁 商品兑换券
}
})
const tupianBanben = ref('1016')
const bgImageUrl = computed(() => {
// 添加$baseUrl存在性检查
const base = $baseUrl || '';
return `${base}integral/${tupianBanben.value}/jingxuan/bg-${props.type}-${props.type}.png`
})
// 用户信息
const userStore = useUserStore();
// 回调函数
const emit = defineEmits(['statusChange', 'close'])
// 跳转小程序配置
const configuration ={
// url: "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
url: "subPackages/shopMainProcess/coupons/couponList",
type: 2,
extra: {
appId: "wx4205ec55b793245e",
envVersion: "release"
}
}
// 前往使用按钮
const goUse = () => {
console.log("🚀 ~ goUse:")
// md.sensorLogTake({
// xcxClick: "积分服务页-首屏页面点击",
// pageName: "积分服务页-首屏",
// buttonName: `${item.name}`,
// });
const {url, type, extra} = configuration
jump({
type: type,
url: url,
extra:extra
})
emit('close')
}
// 关闭按钮
const closeBtn = () => {
emit('close')
}
onMounted(() => {
console.log('onMounted')
wx.setPageStyle({
style: {
overflow: 'hidden'
}
})
})
onUnmounted(() => {
// 弹窗关闭时恢复背景滚动
wx.setPageStyle({
style: {
overflow: 'auto'
}
})
})
</script>
<style lang="scss" scoped>
.popup-tip {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
&-content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
overflow: hidden;
.content-title{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 50rpx;
font-weight: 700;
color: #fff8e8;
}
.content-box {
margin-top: 20rpx;
width: 640rpx;
padding: 55rpx 22rpx 40rpx 25rpx;
overflow: hidden;
background-size: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 24rpx;
overflow: hidden;
.box-1{
width: 592rpx;
height: 206rpx;
margin-bottom: 30rpx;
image{
width: 100%;
height: 100%;
}
}
.box-2{
width: 591rpx;
height: 332rpx;
image{
width: 100%;
height: 100%;
}
}
.box-3{
margin-top: 50rpx;
width: 442rpx;
height: 85rpx;
image{
width: 100%;
height: 100%;
}
}
}
// // 黄金
// .sty-1 {
// background-image: url('@/static/jingxuan/bg-1.png');
// }
// // 铂金
// .sty-2 {
// background-image: url('@/static/jingxuan/bg-2.png');
// }
// // 钻石
// .sty-3 {
// background-image: url('@/static/jingxuan/bg-3.png');
// }
// // 星光
// .sty-4 {
// background-image: url('@/static/jingxuan/bg-4.png');
// }
// // 星耀
// .sty-5 {
// background-image: url('@/static/jingxuan/bg-5.png');
// }
.content-2 {
margin-top: 65rpx;
width: 50rpx;
height: 50rpx;
// background-image: url('@/static/shengriPopup/close.png');
background-size: 100%;
}
}
}
</style>
\ No newline at end of file
components/popup-shengri/popup-shengri.vue 0 → 100644
View file @ bae2233b
<template>
<view class="popup-tip">
<view class="popup-tip-content">
<view class="content-title">
基础生日礼领取成功
</view>
<view class="content-box" :style="{ backgroundImage: `url('${bgImageUrl}')` }">
<view class="box-2">
<image :src="$baseUrl + `integral/${tupianBanben}/shengriPopup/${type}-1.png`" ></image>
<image :src="$baseUrl + `integral/${tupianBanben}/shengriPopup/${type}-2.png`" ></image>
</view>
<view class="box-3" @click="goUse">
<image :src="$baseUrl + `integral/${tupianBanben}/jingxuan/${type}-3.png`" ></image>
</view>
</view>
<view class="content-2" @click="closeBtn" :style="{backgroundImage: `url(${$baseUrl + `integral/${tupianBanben}/shengriPopup/close.png`})`}">
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
onMounted,
computed,
defineEmits,
onUnmounted,
getCurrentInstance
} from 'vue'
import { useUserStore } from "@/stores/user";
import { jump, JumpType } from '@/utils/index.js'
import md from '../../md';
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
// 接受父组件参数
const props = defineProps({
type: {
type: String,
default: '3', // 3 钻石、4 星光、5 星耀
}
})
// 用户信息
const userStore = useUserStore();
const tupianBanben = ref('1016')
// 回调函数
const emit = defineEmits(['statusChange', 'close'])
const bgImageUrl = computed(() => {
// 添加$baseUrl存在性检查
const base = $baseUrl || '';
return `${base}integral/${tupianBanben.value}/jingxuan/bg-${props.type}.png`
})
// 跳转小程序配置
const configuration ={
// subPackages/shopMainProcess/coupons/couponList
// url: "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
url: "subPackages/shopMainProcess/coupons/couponList",
type: 2,
extra: {
appId: "wx4205ec55b793245e",
envVersion: "release"
}
}
// 前往使用按钮
const goUse = () => {
console.log("🚀 ~ goUse:")
// md.sensorLogTake({
// xcxClick: "积分服务页-首屏页面点击",
// pageName: "积分服务页-首屏",
// buttonName: `${item.name}`,
// });
const {url, type, extra} = configuration
jump({
type: type,
url: url,
extra:extra
})
emit('close')
}
// 关闭按钮
const closeBtn = () => {
emit('close')
console.log('closeBtn')
}
onMounted(() => {
console.log('onMounted')
wx.setPageStyle({
style: {
overflow: 'hidden'
}
})
})
onUnmounted(() => {
// 弹窗关闭时恢复背景滚动
wx.setPageStyle({
style: {
overflow: 'auto'
}
})
})
</script>
<style lang="scss" scoped>
.popup-tip {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
&-content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
overflow: hidden;
.content-title{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 50rpx;
font-weight: 700;
color: #fff8e8;
}
.content-box {
margin-top: 20rpx;
width: 640rpx;
padding: 55rpx 22rpx 40rpx 25rpx;
overflow: hidden;
background-size: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 24rpx;
overflow: hidden;
.box-2{
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
image{
width: 270rpx;
height: 160rpx;
}
}
.box-3{
margin-top: 50rpx;
width: 442rpx;
height: 85rpx;
image{
width: 100%;
height: 100%;
}
}
}
// 钻石
// .sty-3 {
// background-image: url('@/static/jingxuan/bg-3.png');
// }
// // 星光
// .sty-4 {
// background-image: url('@/static/jingxuan/bg-4.png');
// }
// // 星耀
// .sty-5 {
// background-image: url('@/static/jingxuan/bg-5.png');
// }
.content-2 {
margin-top: 65rpx;
width: 50rpx;
height: 50rpx;
// background-image: url('@/static/shengriPopup/close.png');
background-size: 100%;
}
}
}
</style>
\ No newline at end of file
components/popup-tip/popup-tip.vue
View file @ bae2233b
......@@ -56,7 +56,6 @@ import {
defineEmits
} from 'vue'
import { useUserStore } from "@/stores/user";
import { console } from 'inspector';
// 接受父组件参数
const props = defineProps({
type: {
......
components/popup-xinren/popup-xinren.vue 0 → 100644
View file @ bae2233b
<template>
<view class="popup-tip">
<view class="popup-tip-content">
<view class="content-title">
新人礼券领取成功
</view>
<!-- <view :class="`content-box sty-${type}`"> -->
<view class="content-box" :style="{ backgroundImage: `url('${bgImageUrl}')` }">
<view class="box-2">
<!-- <image :src="`/static/xinren/${type}-2.png`" ></image> -->
<image :src="$baseUrl + `integral/${tupianBanben}/xinren/${type}-2.png`" ></image>
</view>
<view class="box-3" @click="goUse">
<!-- <image :src="`/static/jingxuan/${type}-3.png`" ></image> -->
<image :src="$baseUrl + `integral/${tupianBanben}/jingxuan/${type}-3.png`" ></image>
</view>
</view>
<view class="content-2" @click="closeBtn" :style="{backgroundImage: `url(${$baseUrl + `integral/${tupianBanben}/shengriPopup/close.png`})`}">
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
onMounted,
computed,
defineEmits,
onUnmounted,
getCurrentInstance
} from 'vue'
import { useUserStore } from "@/stores/user";
import { jump, JumpType } from '@/utils/index.js'
import md from '../../md';
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
// 接受父组件参数
const props = defineProps({
type: {
type: String,
default: '1', // 1 黄金、2 铂金、3 钻石、4 星光、5 星耀
}
})
// 用户信息
const userStore = useUserStore();
const tupianBanben = ref('1016')
const bgImageUrl = computed(() => {
// 添加$baseUrl存在性检查
const base = $baseUrl || '';
return `${base}integral/${tupianBanben.value}/jingxuan/bg-${props.type}.png`
})
// 回调函数
const emit = defineEmits(['statusChange', 'close'])
// 跳转小程序配置
const configuration ={
// url: "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
url: "subPackages/shopMainProcess/coupons/couponList",
type: 2,
extra: {
appId: "wx4205ec55b793245e",
envVersion: "release"
}
}
// 前往使用按钮
const goUse = () => {
console.log("🚀 ~ goUse:")
// md.sensorLogTake({
// xcxClick: "积分服务页-首屏页面点击",
// pageName: "积分服务页-首屏",
// buttonName: `${item.name}`,
// });
const {url, type, extra} = configuration
jump({
type: type,
url: url,
extra:extra
})
emit('close')
}
// 关闭按钮
const closeBtn = () => {
emit('close')
}
onMounted(() => {
console.log('onMounted')
wx.setPageStyle({
style: {
overflow: 'hidden'
}
})
})
onUnmounted(() => {
// 弹窗关闭时恢复背景滚动
wx.setPageStyle({
style: {
overflow: 'auto'
}
})
})
</script>
<style lang="scss" scoped>
.popup-tip {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
&-content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
overflow: hidden;
.content-title{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 50rpx;
font-weight: 700;
color: #fff8e8;
}
.content-box {
margin-top: 20rpx;
width: 640rpx;
padding: 55rpx 22rpx 40rpx 25rpx;
overflow: hidden;
background-size: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 24rpx;
overflow: hidden;
.box-2{
width: 591rpx;
height: 332rpx;
image{
width: 100%;
height: 100%;
}
}
.box-3{
margin-top: 50rpx;
width: 442rpx;
height: 85rpx;
image{
width: 100%;
height: 100%;
}
}
}
// 黄金
// .sty-1 {
// background-image: url('@/static/jingxuan/bg-1.png');
// }
// // 铂金
// .sty-2 {
// background-image: url('@/static/jingxuan/bg-2.png');
// }
// // 钻石
// .sty-3 {
// background-image: url('@/static/jingxuan/bg-3.png');
// }
// // 星光
// .sty-4 {
// background-image: url('@/static/jingxuan/bg-4.png');
// }
// // 星耀
// .sty-5 {
// background-image: url('@/static/jingxuan/bg-5.png');
// }
.content-2 {
margin-top: 65rpx;
width: 50rpx;
height: 50rpx;
// background-image: url('@/static/shengriPopup/close.png');
background-size: 100%;
}
}
}
</style>
\ No newline at end of file
components/quanyi/aibenxinrenli.vue 0 → 100644
View file @ bae2233b
<template>
<view class="aiben-component" :style="{
background: `url(${$baseUrl}integral/1021/aibenxinrenliBg${getBgName()}.png) no-repeat center/contain`,
height: `${getHeight()}`
}">
<view class="tipLock-section" v-if="props.index == 0">
<image class="tipLock" :src="$baseUrl + `integral/1021/tipsLock1.png`" mode="aspectFit" />
</view>
<!-- 标题区域 -->
<view class="title-section">
<text class="main-title" :style="{ color: getColor()[props.index].titleColor }">爱本新人礼</text>
</view>
<text class="points-text" :style="{ marginTop: props.isshowLock ? '153rpx' : '153rpx' }">200积分</text>
<!-- 底部按钮 -->
<!-- <image
v-if="props.isshowLock && props.index == 0"
class="bottom-button"
:src="$baseUrl + `integral/1021/aibenxinrenliQushengjiBtn${props.index}.png`"
mode="aspectFit"
@click="handleUpgrade"
/> -->
<view
class="bottom-button"
v-if="props.isshowLock"
:style="{
background: `url(${$baseUrl}integral/1021/aibenxinrenliBtnBg${props.index}.png) no-repeat center/contain`
}"
mode="aspectFit"
@click="handleUpgrade"
>
<text class="bottom-button-text" :style="{ color: props.index == 4 ? '#ffffff' : '#ffe3c3' }">去升级</text>
</view>
<!-- 说明文字 -->
<view class="description" :style="{ marginTop: getTop() }">
<text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
有过婴配粉扫码积分记录的会员，⾸次完成爱本成⼈奶粉的扫码积分时
</text>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits, onMounted } from 'vue'
// 定义组件名称
defineOptions({
name: 'aiben-xinrenli'
})
// 定义组件属性
const props = defineProps({
index: {
type: Number,
default: 0
},
isshowLock:{
type: Boolean,
default: false
}
})
const getBgName = () => {
if(props.isshowLock){
return props.index + ""
}else{
return props.index + "0"
}
}
const getTop = () => {
if(!props.isshowLock){
return "80rpx"
}else{
return "35rpx"
}
return "80rpx"
}
const getHeight = () => {
if(props.isshowLock){
return "569rpx"
}else{
return "495rpx"
}
}
const isShowBtn = () => {
let show = false;
if(!props.isshowLock && Number(props.index) == 0){
show = false;
}else{
show = true;
}
console.log('show===', show)
return show;
}
onMounted(() => {
console.log('props.isshowLocksdfsdfsdfsdsf===', props.isshowLock)
})
// 定义组件事件
const emit = defineEmits(['upgrade'])
// 去升级按钮点击
const handleUpgrade = () => {
emit('upgrade', {
index: props.index
})
}
// 颜色配置
const getColor = () => {
const colors = [
{
"titleColor": "#503404",
"privilegeColor": "#9a8b74",
"pointsColor": "#503404",
"titleDetail":"#503404"
},
{
"titleColor": "#284a6c",
"privilegeColor": "#7b8b9a",
"pointsColor": "#284a6c",
"titleDetail":"#284a6c"
},
{
"titleColor": "#322d6f",
"privilegeColor": "#9c8aba",
"pointsColor": "#322d6f",
"titleDetail":"#322d6f"
},
{
"titleColor": "#503404",
"privilegeColor": "#9d8d6c",
"pointsColor": "#503404",
"titleDetail":"#6d5d4f"
},
{
"titleColor": "#fff0df",
"privilegeColor": "#c2a98d",
"pointsColor": "#fff0df",
"titleDetail":"#fff0df"
}
]
return colors;
}
</script>
<style lang="less" scoped>
.aiben-component {
position: relative;
width: 686rpx;
height: 569rpx;
display: flex;
flex-direction: column;
// align-items: center;
.tipLock-section{
position: relative;
width: 100%;
.tipLock{
position: absolute;
right: 0;
top: 0;
width: 320rpx;
height: 41rpx;
}
}
.title-section {
// text-align: center;
margin-top: 50rpx;
margin-left: 30rpx;
.main-title {
display: block;
font-size: 32rpx;
font-weight: bold;
letter-spacing: 2rpx;
}
}
.points-text {
font-size: 22rpx;
text-align: center;
font-weight: bold;
color: #211d1a;
// margin-top: 145rpx;
}
.bottom-button {
width: 442rpx;
height: 86rpx;
margin: 0 auto;
margin-top: 50rpx;
display: flex;
justify-content: center;
align-items: center;
.bottom-button-text {
font-size: 26rpx;
font-weight: bold;
}
}
.description {
margin-top: 35rpx;
margin-left: 35rpx;
margin-right: 30rpx;
.desc-text {
font-size: 22rpx;
line-height: 1.5;
letter-spacing: 0.5rpx;
text-align: center;
}
}
}
</style>
components/quanyi/jinjili.vue 0 → 100644
View file @ bae2233b
<template>
<view class="jinjili-component" :style="{
background: `url(${$baseUrl}integral/1021/jinjiliBg${getBgName()}.png) no-repeat center/contain`,
height: `${getHeight()}`
}">
<view class="tipLock-section" v-if="props.index < 2">
<image class="tipLock" :src="$baseUrl + `integral/1021/tipsLock2${Number(props.index)}.png`" mode="aspectFit" />
</view>
<!-- 标题区域 -->
<view class="title-section">
<text class="main-title" :style="{ color: getColor()[props.index].titleColor }">晋级礼</text>
</view>
<text class="points-text" :style="{ marginTop: Number(props.index) === 0 || Number(props.index) === 1 ? '153rpx' : '153rpx' }">200积分</text>
<!-- 底部按钮 -->
<!-- <image
v-if="props.isshowLock"
class="bottom-button"
:src="$baseUrl + `integral/1021/jinjiQushengjiBtn${props.index}.png`"
mode="aspectFit"
@click="handleUpgrade"
/> -->
<view
class="bottom-button"
v-if="props.isshowLock"
:style="{
background: `url(${$baseUrl}integral/1021/shengriliBtnBg${props.index}.png) no-repeat center/contain`
}"
mode="aspectFit"
@click="handleUpgrade"
>
<text class="bottom-button-text" :style="{ color: props.index == 4 ? '#ffffff' : '#ffe3c3' }">去升级</text>
</view>
<!-- 说明文字 -->
<view class="description" :style="{ marginTop: getTop() }">
<text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
⾸次晋级⾄钻⽯，星光，星耀等级
</text>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
// 定义组件名称
defineOptions({
name: 'jinjili'
})
const getBgName = () => {
if(props.isshowLock){
return props.index + ""
}else{
return props.index + "0"
}
}
const getTop = () => {
if(!props.isshowLock){
return "80rpx"
}else{
return "35rpx"
}
return "80rpx"
}
const getHeight = () => {
if(props.isshowLock){
return "569rpx"
}else{
return "495rpx"
}
}
// 定义组件属性
const props = defineProps({
index: {
type: Number,
default: 0
},
isshowLock:{
type: Boolean,
default: false
}
})
// 定义组件事件
const emit = defineEmits(['upgrade'])
// 去升级按钮点击
const handleUpgrade = () => {
emit('upgrade', {
index: props.index
})
}
// 颜色配置
const getColor = () => {
const colors = [
{
"titleColor": "#503404",
"privilegeColor": "#9a8b74",
"pointsColor": "#503404",
"titleDetail":"#503404"
},
{
"titleColor": "#284a6c",
"privilegeColor": "#7b8b9a",
"pointsColor": "#284a6c",
"titleDetail":"#284a6c"
},
{
"titleColor": "#322d6f",
"privilegeColor": "#9c8aba",
"pointsColor": "#322d6f",
"titleDetail":"#322d6f"
},
{
"titleColor": "#503404",
"privilegeColor": "#9d8d6c",
"pointsColor": "#503404",
"titleDetail":"#6d5d4f"
},
{
"titleColor": "#fff0df",
"privilegeColor": "#c2a98d",
"pointsColor": "#fff0df",
"titleDetail":"#fff0df"
}
]
return colors;
}
</script>
<style lang="less" scoped>
.jinjili-component {
position: relative;
width: 686rpx;
height: 569rpx;
display: flex;
flex-direction: column;
// align-items: center;
.tipLock-section{
position: relative;
width: 100%;
.tipLock{
position: absolute;
right: 0;
top: 0;
width: 257rpx;
height: 41rpx;
}
}
.title-section {
// text-align: center;
margin-top: 50rpx;
margin-left: 30rpx;
.main-title {
display: block;
font-size: 32rpx;
font-weight: bold;
letter-spacing: 2rpx;
}
}
.points-text {
font-size: 22rpx;
text-align: center;
font-weight: bold;
color: #211d1a;
// margin-top: 145rpx;
}
.bottom-button {
width: 442rpx;
height: 86rpx;
margin: 0 auto;
margin-top: 50rpx;
display: flex;
justify-content: center;
align-items: center;
.bottom-button-text {
font-size: 26rpx;
font-weight: bold;
}
}
.description {
margin-top: 35rpx;
margin-left: 35rpx;
margin-right: 30rpx;
.desc-text {
font-size: 22rpx;
line-height: 1.5;
letter-spacing: 0.5rpx;
text-align: center;
}
}
}
</style>
components/quanyi/mianfeiwenzhen.vue 0 → 100644
View file @ bae2233b
<template>
<view class="mianfei-component" :style="{
background: `url(${$baseUrl}integral/1021/mianfeiwenzhenBg${props.index}.png) no-repeat center/contain`,
}">
<!-- 标题区域 -->
<view class="title-section">
<text class="main-title" :style="{ color: getColor()[props.index].titleColor }">免费问诊</text>
</view>
<!-- 底部按钮 -->
<image
class="bottom-button"
:src="$baseUrl + `integral/1021/mianfeiwenzhenQushiyongBtn${props.index}.png`"
mode="aspectFit"
@click="handleUseNow"
/>
<!-- 说明文字 -->
<view class="description">
<text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
{{Number(props.index) == 0 ? '三甲医⽣免费在线问诊服务（5次/年）' : '三甲医生免费在线问诊服务 (不限次数)'}}
</text>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
// 定义组件名称
defineOptions({
name: 'mianfei-wenzhen'
})
// 定义组件属性
const props = defineProps({
index: {
type: Number,
default: 0
}
})
// 定义组件事件
const emit = defineEmits(['doctor-click', 'use-now'])
// 医生网格点击事件
const handleDoctorGridClick = () => {
emit('doctor-click', {
index: props.index
})
}
// 立即使用按钮点击
const handleUseNow = () => {
emit('use-now', {
index: props.index
})
}
// 颜色配置
const getColor = () => {
const colors = [
{
"titleColor": "#503404",
"titleDetail":"#503404"
},
{
"titleColor": "#284a6c",
"titleDetail":"#284a6c"
},
{
"titleColor": "#322d6f",
"titleDetail":"#322d6f"
},
{
"titleColor": "#503404",
"titleDetail":"#6d5d4f"
},
{
"titleColor": "#fff0df",
"titleDetail":"#fff0df"
}
]
return colors;
}
</script>
<style lang="less" scoped>
.mianfei-component {
position: relative;
width: 686rpx;
height: 834rpx;
display: flex;
flex-direction: column;
// align-items: center;
.title-section {
// text-align: center;
margin-bottom: 40rpx;
margin-top: 40rpx;
margin-left: 28rpx;
.main-title {
display: block;
font-size: 36rpx;
font-weight: bold;
color: #1d1e25;
margin-bottom: 8rpx;
letter-spacing: 2rpx;
}
}
.bottom-button {
width: 442rpx;
height: 86rpx;
margin: 0 auto;
margin-top: 470rpx;
}
.description {
margin-top: 50rpx;
.desc-text {
position: absolute;
width: 636rpx;
left:50%;
transform: translateX(-50%);
font-size: 24rpx;
line-height: 1.5;
letter-spacing: 0.5rpx;
text-align: center;
}
}
}
</style>
components/quanyi/shengrili.vue 0 → 100644
View file @ bae2233b
<template>
<view class="shengri-component" :style="{
background: `url(${$baseUrl}integral/1021/shengriliBg${props.index}.png) no-repeat center/contain`,
}">
<view class="tipLock-section" v-if="props.index < 2">
<image class="tipLock" :src="$baseUrl + `integral/1021/tipsLock2${Number(props.index)}.png`" mode="aspectFit" />
</view>
<!-- 标题区域 -->
<view class="title-section">
<text class="main-title" :style="{ color: getColor()[props.index].titleColor }">基础生日礼</text>
</view>
<!-- 奖励卡片区域 -->
<view class="rewards-section">
<!-- 积分奖励卡片 -->
<view class="reward-card" :style="{ background: `url(${$baseUrl}integral/1021/shengriliJifenIcon${props.index}.png) no-repeat center/contain` }" @click="handlePointsClick">
<!-- <image
class="reward-icon"
:src="`${$baseUrl}integral/1021/shengriliJifenIcon${props.index}.png`"
mode="aspectFit"
/> -->
<text class="reward-text">888积分</text>
</view>
<!-- 优惠券奖励卡片 -->
<view class="reward-card1" @click="handleCouponClick">
<image
class="reward-icon1"
:src="`${$baseUrl}integral/1021/shengriliQuanIcon${props.index}.png`"
mode="aspectFit"
/>
</view>
</view>
<!-- 底部按钮 -->
<view
class="bottom-button"
v-if="(!hasBaby && islogin) ? true : !(status1 === 4000 && !props.isshowLock)"
:style="{
background: `url(${$baseUrl}integral/1021/shengriliBtnBg${props.index}.png) no-repeat center/contain`
}"
mode="aspectFit"
@click="handleUpgrade"
>
<text class="bottom-button-text" :style="{ color: props.index == 4 ? '#ffffff' : '#ffe3c3' }">{{ getBtnName() }}</text>
</view>
<image
class="bottom-button"
v-if="(!hasBaby && islogin) ? false : status1 === 4000 && !props.isshowLock"
:src="`${$baseUrl}integral/1021/daikaiqiDisBtn${props.index}.png`"
mode="aspectFit"
@click="handleUpgrade_daikaiqi"
/>
</view>
</template>
<script setup>
import { defineProps, defineEmits, onMounted, ref } from 'vue'
import { showLoading, hideLoading } from '../../utils'
import { fetchBirthdayGiftJSON } from '../../api/integral'
import { useUserStore } from "../../stores/user";
const isShowShengjiBtn = () => {
let show = false;
if(props.isshowLock){
show = true;
}else{
if(status1.value == 4000 && Number(props.index) < 2){
show = true;
}else{
show = false;
}
}
return show;
}
// 定义组件名称
defineOptions({
name: 'shengri-li'
})
// 定义组件属性
const props = defineProps({
index: {
type: Number,
default: 0,
isshowLock:{
type: Boolean,
default: false
}
}
})
// 定义组件事件
const emit = defineEmits(['points-click', 'coupon-click', 'upgrade'])
const getBtnName = () => {
if(!hasBaby.value){
if(props.index < 2){
return '去升级';
}else{
return '去添加';
}
}
const btnName = '';
switch(status1.value){
case 4000:
return '去升级';
case 3000:
return '一键领取';
case 2000:
return '去升级';
case 1000:
return '去使用';
default:
return '去升级';
}
}
// 积分卡片点击事件
const handlePointsClick = () => {
emit('points-click', {
index: props.index
})
}
// 优惠券卡片点击事件
const handleCouponClick = () => {
emit('coupon-click', {
index: props.index
})
}
// 去升级按钮点击
const handleUpgrade = async () => {
emit('upgrade', {
index: status1.value,
userStore:useUserStore()
})
}
// 待开启按钮点击
const handleUpgrade_daikaiqi = () => {
uni.showToast({
title: '奖励还未开启哦',
icon: 'none'
});
}
// 颜色配置
const getColor = () => {
const colors = [
{
"titleColor": "#503404"
},
{
"titleColor": "#284a6c"
},
{
"titleColor": "#322d6f"
},
{
"titleColor": "#503404"
},
{
"titleColor": "#fff0df"
}
]
return colors;
}
const status1 = ref(0);
const hasBaby = ref(false);
const islogin = ref(true);
onMounted(async () => {
const userStore = useUserStore();
const memberInfo = userStore.memberInfo;
if(memberInfo.memberId == "not_login"){
islogin.value = false;
}else{
islogin.value = true
}
if(userStore.babyInfo?.allBabyBaseInfo && userStore.babyInfo?.allBabyBaseInfo.length > 0){
if (userStore.babyInfo?.allBabyBaseInfo?.some(baby => baby.babyStage == 2)) {
hasBaby.value = true;
}else{
hasBaby.value = false;
return;
}
}else{
hasBaby.value = false;
return;
}
// hasBaby.value = false;
// return;
showLoading();
const data = await fetchBirthdayGiftJSON();
if(data.success){
status1.value = data.data.status;
// status1.value = 3000;
}
console.log('data', data);
hideLoading();
})
</script>
<style lang="less" scoped>
.shengri-component {
position: relative;
width: 686rpx;
height: 460rpx;
display: flex;
flex-direction: column;
.tipLock-section{
position: relative;
width: 100%;
.tipLock{
position: absolute;
right: 0;
top: 0;
width: 257rpx;
height: 41rpx;
}
}
.title-section {
margin-top: 50rpx;
margin-left: 30rpx;
.main-title {
display: block;
font-size: 32rpx;
font-weight: bold;
color: #1d1e25;
letter-spacing: 2rpx;
}
}
.rewards-section {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50rpx;
gap: 20rpx;
.reward-card {
display: flex;
flex-direction: column;
align-items: center;
width: 272rpx;
height: 161rpx;
// .reward-icon {
// width: 272rpx;
// height: 161rpx;
// margin-bottom: 20rpx;
// }
.reward-text {
font-size: 28rpx;
font-weight: bold;
color: #211d1a;
margin-top: 110rpx;
}
}
.reward-card1 {
display: flex;
flex-direction: column;
align-items: center;
.reward-icon1 {
width: 272rpx;
height: 159rpx;
}
}
}
.bottom-button {
width: 442rpx;
height: 86rpx;
margin: 0 auto;
margin-top: 32rpx;
display: flex;
justify-content: center;
align-items: center;
.bottom-button-text {
font-size: 26rpx;
font-weight: bold;
}
}
}
</style>
components/quanyi/shengriliTipPanel.vue 0 → 100644
View file @ bae2233b
<template>
<view class="popup-tip" >
<view class="tip-panel-modal"
:style="{
background: `url(${$baseUrl}integral/1022/addTipsPanalBg${bgIndex}.png) no-repeat center/contain`
}"
@click.stop>
<!-- 弹窗背景 -->
<!-- <image
class="modal-bg"
:src="`${$baseUrl}integral/1022/addTipsPanalBg${bgIndex}.png`"
mode="aspectFit"
/> -->
<!-- 弹窗内容 -->
<view class="modal-content">
<!-- 添加按钮 -->
<view
class="add-button"
:style="{
background: `url(${$baseUrl}integral/1022/shengriliBtnBg${bgIndex}.png) no-repeat center/contain`
}"
@click="handleAddClick"
>
<text class="button-text">去添加</text>
</view>
</view>
<image
class="close-button"
:src="`${$baseUrl}integral/1022/closeBtn.png`"
mode="aspectFit"
@click="handleOverlayClick"
/>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
// 定义组件名称
defineOptions({
name: 'shengrili-tip-panel'
})
// 定义组件属性
const props = defineProps({
visible: {
type: Boolean,
default: false
},
bgIndex: {
type: Number,
default: 2,
validator: (value) => [2, 3, 4].includes(value)
}
})
// 定义组件事件
const emit = defineEmits(['close', 'add'])
// 处理遮罩层点击
const handleOverlayClick = () => {
console.log('handleOverlayClick')
emit('close')
}
// 处理添加按钮点击
const handleAddClick = () => {
emit('add')
emit('close')
}
</script>
<style lang="scss" scoped>
.popup-tip {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
.tip-panel-modal {
position: relative;
width: 640rpx;
height: 368rpx;
display: flex;
justify-content: center;
align-items: center;
// background-color: #ebe7f1;
// border-radius: 25rpx;
// .modal-bg {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// z-index: 1;
// }
.modal-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
.add-button {
width: 442rpx;
height: 85rpx;
display: flex;
justify-content: center;
align-items: center;
margin-top: 200rpx;
.button-text {
font-size: 28rpx;
color: #ffffff;
font-weight: bold;
text-align: center;
}
}
}
.close-button {
z-index: 3;
position: absolute;
width: 50rpx;
height: 50rpx;
margin-top: 480rpx;
}
}
}
</style>
\ No newline at end of file
components/quanyi/suyuanyou.vue 0 → 100644
View file @ bae2233b
<template>
<view class="suyuanyou-component" :style="{
background: `url(${$baseUrl}integral/1021/suyuanliBg${props.index}.png) no-repeat center/contain`,
}">
<view class="tipLock-section" v-if="props.index < 3">
<image class="tipLock" :src="$baseUrl + `integral/1021/tipsLock3${Number(props.index)}.png`" mode="aspectFit" />
</view>
<!-- 标题区域 -->
<view class="title-section">
<text class="main-title" :style="{ color: getColor()[props.index].titleColor }">溯源游</text>
</view>
<!-- 去升级按钮 -->
<view
class="bottom-button"
v-if="getshowShengji()"
:style="{
background: `url(${$baseUrl}integral/1021/shengriliBtnBg${props.index}.png) no-repeat center/contain`
}"
mode="aspectFit"
@click="handleUpgrade"
>
<text class="bottom-button-text">{{ props.isshowLock ? '去升级' : '立即报名' }}</text>
</view>
<!-- 待开启按钮 -->
<image v-else
class="bottom-button"
:src="`${$baseUrl}integral/1021/daikaiqiDisBtn${props.index}.png`"
mode="aspectFit"
@click="handleUpgrade_daikaiqi"
/>
<!-- 底部说明文字 -->
<view class="description">
<text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
报名填写信息抽取溯源游资格，中签者可享受飞鹤牧场溯源游2日游(含跟团游玩+住宿，路费报销1000元)
</text>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits, ref, onMounted } from 'vue'
import { showLoading, hideLoading } from '../../utils';
import { fetchActivityStateJSON } from '../../api/integral';
const handleUpgrade_daikaiqi = () => {
uni.showToast({
title: '活动暂未开启',
icon: 'none'
})
}
// 定义组件名称
defineOptions({
name: 'suyuanyou'
})
const getshowShengji = () => {
if(isStart.value){
return true;
}else{
if(props.isshowLock){
return true;
}else{
return false;
}
}
}
// 定义组件属性
const props = defineProps({
index: {
type: Number,
default: 0
},
// startDate: {
// type: String,
// default: ''
// },
isshowLock:{
type: Boolean,
default: false
}
})
// const isStart = () => {
// const startDate = new Date(props.startDate);
// const now = new Date();
// console.log(startDate <= now);
// return startDate <= now;
// }
// 定义组件事件
const emit = defineEmits(['upgrade'])
// 去升级按钮点击
const handleUpgrade = () => {
emit('upgrade', {
index: props.index
})
}
// 颜色配置
const getColor = () => {
const colors = [
{
"titleColor": "#503404",
"privilegeColor": "#9a8b74",
"qualificationColor": "#503404",
"titleDetail": "#503404"
},
{
"titleColor": "#284a6c",
"privilegeColor": "#7b8b9a",
"qualificationColor": "#284a6c",
"titleDetail": "#284a6c"
},
{
"titleColor": "#322d6f",
"privilegeColor": "#9c8aba",
"qualificationColor": "#322d6f",
"titleDetail": "#322d6f"
},
{
"titleColor": "#503404",
"privilegeColor": "#9d8d6c",
"qualificationColor": "#503404",
"titleDetail": "#6d5d4f"
},
{
"titleColor": "#fff0df",
"privilegeColor": "#c2a98d",
"qualificationColor": "#fff0df",
"titleDetail": "#fff0df"
}
]
return colors;
}
const isStart = ref(false);
onMounted(async () => {
showLoading();
const res = await fetchActivityStateJSON();
if(res?.success){
isStart.value = res?.data;
}
hideLoading();
})
</script>
<style lang="less" scoped>
.suyuanyou-component {
position: relative;
width: 686rpx;
height: 569rpx;
display: flex;
flex-direction: column;
.tipLock-section{
position: relative;
width: 100%;
.tipLock{
position: absolute;
right: 0;
top: 0;
width: 208rpx;
height: 41rpx;
}
}
.title-section {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 50rpx;
margin-left: 30rpx;
margin-right: 30rpx;
.main-title {
display: block;
font-size: 32rpx;
font-weight: bold;
letter-spacing: 2rpx;
}
}
.bottom-button {
width: 442rpx;
height: 86rpx;
margin: 0 auto;
margin-top: 233rpx;
display: flex;
justify-content: center;
align-items: center;
.bottom-button-text {
font-size: 26rpx;
color: #ffe3c3;
font-weight: bold;
}
}
.description {
margin-top: 35rpx;
margin-left: 35rpx;
margin-right: 30rpx;
.desc-text {
font-size: 22rpx;
line-height: 1;
letter-spacing: 0.5rpx;
text-align: left;
}
}
}
</style>
components/quanyi/xinrenli.vue 0 → 100644
View file @ bae2233b
<template>
<view class="xinrenli-component" :style="{
background: `url(${$baseUrl}integral/1021/xinrenliBg${props.index}.png) no-repeat center/contain`,
}">
<!-- 标题区域 -->
<view class="title-section">
<text class="main-title" :style="{ color: getColor()[props.index].titleColor }">新人礼</text>
<text class="sub-title" :style="{ color: getColor()[props.index].titleDes }">200元优惠券包</text>
</view>
<!-- 优惠券网格 -->
<view class="coupon-grid"
>
<!-- 第一行优惠券 -->
<view class="coupon-row">
<view class="coupon-item" @click="handleCouponClick(0)">
<image
class="coupon-img"
:src="$baseUrl + `integral/1021/xirenliQuan${props.index}0.png`"
mode="aspectFit"
/>
</view>
<view class="coupon-item" @click="handleCouponClick(1)">
<image
class="coupon-img"
:src="$baseUrl + `integral/1021/xirenliQuan${props.index}1.png`"
mode="aspectFit"
/>
</view>
<view class="coupon-item" @click="handleCouponClick(2)">
<image
class="coupon-img"
:src="$baseUrl + `integral/1021/xirenliQuan${props.index}2.png`"
mode="aspectFit"
/>
</view>
</view>
<!-- 第二行优惠券 -->
<view class="coupon-row">
<view class="coupon-item" @click="handleCouponClick(3)">
<image
class="coupon-img"
:src="$baseUrl + `integral/1021/xirenliQuan${props.index}3.png`"
mode="aspectFit"
/>
</view>
<view class="coupon-item" @click="handleCouponClick(4)">
<image
class="coupon-img"
:src="$baseUrl + `integral/1021/xirenliQuan${props.index}4.png`"
mode="aspectFit"
/>
</view>
</view>
</view>
<!-- 底部按钮 -->
<image
class="bottom-button"
:src="$baseUrl + `integral/1021/xinrenliQuxingmaBtn${props.index}.png`"
mode="aspectFit"
@click="handleGoToShop"
/>
<!-- 说明文字 -->
<view class="description">
<text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
首次访问星妈优选的用户可以领取200元优惠券包，包含(满49-20coupon新客周卡，优选自营49-20，北纬99-40，六水香99-40，功能营养188-80)
</text>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
// 定义组件名称
defineOptions({
name: 'xinrenli-popup'
})
const getColor = () => {
const colors = [
{
"titleColor": "#503404",
"titleDes":"#9a8b74",
"titleDetail":"#503404"
},
{
"titleColor": "#284a6c",
"titleDes":"#6585a0",
"titleDetail":"#284a6c"
},
{
"titleColor": "#322d6f",
"titleDes":"#9c8bb9",
"titleDetail":"#322d6f"
},
{
"titleColor": "#503404",
"titleDes":"#9d8d6c",
"titleDetail":"#6d5d4f"
},
{
"titleColor": "#fff0df",
"titleDes":"#fff0df",
"titleDetail":"#fff0df"
},
]
return colors;
}
// 定义组件属性
const props = defineProps({
index: {
type: Number,
default: 0
}
})
// 定义组件事件
const emit = defineEmits(['coupon-click', 'go-to-shop'])
// 优惠券点击事件
const handleCouponClick = (couponIndex) => {
emit('coupon-click', {
index: props.index,
couponIndex: couponIndex
})
}
// 去星妈优选按钮点击
const handleGoToShop = () => {
emit('go-to-shop', {
index: props.index
})
}
</script>
<style lang="less" scoped>
.xinrenli-component {
position: relative;
width: 686rpx;
height: 807rpx;
display: flex;
flex-direction: column;
// align-items: center;
.title-section {
// text-align: center;
margin-bottom: 40rpx;
margin-top: 40rpx;
margin-left: 28rpx;
.main-title {
display: block;
font-size: 36rpx;
font-weight: bold;
color: #1d1e25;
margin-bottom: 8rpx;
letter-spacing: 2rpx;
}
.sub-title {
display: block;
font-size: 28rpx;
color: #1d1e25;
letter-spacing: 1rpx;
}
}
.coupon-grid {
margin-bottom: 30rpx;
.coupon-row {
display: flex;
align-items: center;
margin-bottom: 20rpx;
justify-content: center;
gap: 20rpx;
// &:first-child {
// justify-content: space-between;
// }
// &:last-child {
// margin-bottom: 0;
// justify-content: center;
// gap: 20rpx;
// }
.coupon-item {
width: 190rpx;
height: 159rpx;
border-radius: 16rpx;
overflow: hidden;
position: relative;
.coupon-img {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
}
}
}
.bottom-button {
position: relative;
width: 442rpx;
height: 86rpx;
margin: 0 auto;
margin-bottom: 30rpx;
}
.description {
.desc-text {
position: absolute;
width: 636rpx;
left:50%;
transform: translateX(-50%);
font-size: 24rpx;
line-height: 1.5;
letter-spacing: 0.5rpx;
}
}
}
</style>
components/quanyi/zhuanduanli.vue 0 → 100644
View file @ bae2233b
<template>
<view class="zhuanduanli-component" :style="{
background: `url(${$baseUrl}integral/1021/zhuanduanliBg${getBgName()}.png) no-repeat center/contain`,
height: `${getHeight()}`
}">
<view class="tipLock-section" v-if="props.index == 0">
<image class="tipLock" :src="$baseUrl + `integral/1021/tipsLock1.png`" mode="aspectFit" />
</view>
<!-- 标题区域 -->
<view class="title-section">
<text class="main-title" :style="{ color: getColor()[props.index].titleColor }">转段礼</text>
</view>
<text class="points-text" :style="{ marginTop: Number(props.index) === 0 ? '153rpx' : '153rpx' }">200积分</text>
<!-- 底部按钮 -->
<!-- <image
v-if="props.isshowLock && props.index == 0"
class="bottom-button"
:src="$baseUrl + `integral/1021/zhuanduanliQushengjiBtn${props.index}.png`"
mode="aspectFit"
@click="handleUpgrade"
/> -->
<view
class="bottom-button"
v-if="props.isshowLock"
:style="{
background: `url(${$baseUrl}integral/1021/zhuanduanliBtnBg${props.index}.png) no-repeat center/contain`
}"
mode="aspectFit"
@click="handleUpgrade"
>
<text class="bottom-button-text" :style="{ color: props.index == 4 ? '#ffffff' : '#ffe3c3' }">去升级</text>
</view>
<!-- 说明文字 -->
<view class="description" :style="{ marginTop: getTop() }">
<text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
有过N段扫码积分记录，⾸次对N+1段扫码积分，包含0-1，1-2，2-3，3-4
</text>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
// 定义组件名称
defineOptions({
name: 'zhuanduanli'
})
// 定义组件属性
const props = defineProps({
index: {
type: Number,
default: 0
},
isshowLock:{
type: Boolean,
default: false
}
})
const getBgName = () => {
if(props.isshowLock){
return props.index + ""
}else{
return props.index + "0"
}
}
const getTop = () => {
if(!props.isshowLock){
return "80rpx"
}else{
return "35rpx"
}
return "80rpx"
}
const getHeight = () => {
if(props.isshowLock){
return "569rpx"
}else{
return "495rpx"
}
}
// 定义组件事件
const emit = defineEmits(['upgrade'])
// 去升级按钮点击
const handleUpgrade = () => {
emit('upgrade', {
index: props.index
})
}
// 颜色配置
const getColor = () => {
const colors = [
{
"titleColor": "#503404",
"privilegeColor": "#9a8b74",
"pointsColor": "#503404",
"titleDetail":"#503404"
},
{
"titleColor": "#284a6c",
"privilegeColor": "#7b8b9a",
"pointsColor": "#284a6c",
"titleDetail":"#284a6c"
},
{
"titleColor": "#322d6f",
"privilegeColor": "#9c8aba",
"pointsColor": "#322d6f",
"titleDetail":"#322d6f"
},
{
"titleColor": "#503404",
"privilegeColor": "#9d8d6c",
"pointsColor": "#503404",
"titleDetail":"#6d5d4f"
},
{
"titleColor": "#fff0df",
"privilegeColor": "#c2a98d",
"pointsColor": "#fff0df",
"titleDetail":"#fff0df"
}
]
return colors;
}
</script>
<style lang="less" scoped>
.zhuanduanli-component {
position: relative;
width: 686rpx;
display: flex;
flex-direction: column;
// align-items: center;
.tipLock-section{
position: relative;
width: 100%;
.tipLock{
position: absolute;
right: 0;
top: 0;
width: 320rpx;
height: 41rpx;
}
}
.title-section {
// text-align: center;
margin-top: 50rpx;
margin-left: 30rpx;
.main-title {
display: block;
font-size: 32rpx;
font-weight: bold;
letter-spacing: 2rpx;
}
}
.points-text {
font-size: 22rpx;
text-align: center;
font-weight: bold;
color: #211d1a;
// margin-top: 145rpx;
}
.bottom-button {
width: 442rpx;
height: 86rpx;
margin: 0 auto;
margin-top: 50rpx;
display: flex;
justify-content: center;
align-items: center;
.bottom-button-text {
font-size: 26rpx;
font-weight: bold;
}
}
.description {
margin-top: 35rpx;
margin-left: 35rpx;
margin-right: 30rpx;
.desc-text {
font-size: 22rpx;
line-height: 1.5;
letter-spacing: 0.5rpx;
text-align: center;
}
}
}
</style>
components/shengriliTipPanel.vue 0 → 100644
View file @ bae2233b
<template>
<view class="tip-panel-overlay" v-if="visible" @click="handleOverlayClick">
<view class="tip-panel-modal" @click.stop>
<!-- 弹窗背景 -->
<image
class="modal-bg"
:src="`${$baseUrl}integral/1021/addTipsPanalBg${bgIndex}.png`"
mode="aspectFit"
/>
<!-- 弹窗内容 -->
<view class="modal-content">
<!-- 提示文字 -->
<text class="tip-text">当前没有宝宝信息，无法领取生日礼哦</text>
<!-- 添加按钮 -->
<view
class="add-button"
:style="{
background: `url(${$baseUrl}integral/1021/shengriliBtnBg${bgIndex}.png) no-repeat center/contain`
}"
@click="handleAddClick"
>
<text class="button-text">去添加</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
// 定义组件名称
defineOptions({
name: 'shengrili-tip-panel'
})
// 定义组件属性
const props = defineProps({
visible: {
type: Boolean,
default: false
},
bgIndex: {
type: Number,
default: 2,
validator: (value) => [2, 3, 4].includes(value)
}
})
// 定义组件事件
const emit = defineEmits(['close', 'add'])
// 处理遮罩层点击
const handleOverlayClick = () => {
emit('close')
}
// 处理添加按钮点击
const handleAddClick = () => {
emit('add')
}
</script>
<style lang="less" scoped>
.tip-panel-overlay {
position: fixed;
width: 100%;
height: 100%;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.tip-panel-modal {
position: relative;
width: 600rpx;
height: 400rpx;
display: flex;
justify-content: center;
align-items: center;
}
.modal-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.modal-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 60rpx 40rpx;
box-sizing: border-box;
}
.tip-text {
font-size: 32rpx;
color: #503404;
text-align: center;
line-height: 1.5;
margin-bottom: 60rpx;
font-weight: 500;
}
.add-button {
width: 300rpx;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 40rpx;
cursor: pointer;
transition: transform 0.2s ease;
}
.add-button:active {
transform: scale(0.95);
}
.button-text {
font-size: 28rpx;
color: #ffffff;
font-weight: bold;
text-align: center;
}
</style>
integral/.DS_Store
View file @ bae2233b
No preview for this file type
mock/home.json
View file @ bae2233b
......@@ -95,7 +95,7 @@
],
"popupImageObj": {
"jumpType": 1,
"imageUrl": "homepage/popImg/popBgImg1.jpg",
"imageUrl": "homepage/popImg/popBgImg2.jpg",
"jumpExtra": {},
"jumpUrl": "/pages/syWebview/syWebview?p=xmh11"
},
......
mock/my.json
View file @ bae2233b
......@@ -313,16 +313,6 @@
],
"tool": [
[
{
"link": {
"extra": {},
"type": 1,
"url": "/pages/naming/naming"
},
"title": "星妈起名",
"desc": "星妈起名",
"bgUrl": "my/naming_new.png"
},
{
"link": {
"extra": {},
......@@ -436,10 +426,22 @@
],
"activeInfo": [
{
"img": "https://course.feihe.com/momclub-picture/my/activeImg2.jpg",
"extra": {},
"type": 1,
"url": "/pages/syWebview/syWebview?p=xmh12"
"img": "https://course.feihe.com/momclub-picture/my/activeImg0.png",
"extra": {
"envVersion": "release",
"appId": "wx4205ec55b793245e"
},
"type": 2,
"url": "subPackages/shopMainList/topicNew/index?id=1000911"
},
{
"img": "https://course.feihe.com/momclub-picture/my/activeImg1.png",
"extra": {
"envVersion": "release",
"appId": "wx4205ec55b793245e"
},
"type": 2,
"url": "subPackages/shopMainList/topicNew/index?id=1000912"
}
],
"channelOptions": [
......@@ -447,4 +449,4 @@
"母婴店"
]
}
}
\ No newline at end of file
}
\ No newline at end of file
pages.json
View file @ bae2233b
......@@ -163,9 +163,17 @@
}
},
{
"path": "pages/thirdJumpMiddlePage/thirdJumpMiddlePage",
"style": {
"navigationBarTitleText": ""
"path" : "pages/testPage/testPage",
"style" :
{
"navigationBarTitleText" : ""
}
},
{
"path" : "pages/thirdJumpMiddlePage/thirdJumpMiddlePage",
"style" :
{
"navigationBarTitleText" : ""
}
},
{
......
pages/person/person.vue
View file @ bae2233b
......@@ -775,6 +775,7 @@ onMounted(() => {
onLoad((options) => {
console.log("🚀 ~ options-新增和修改:", options)
// debugger;
pageType.value = options.type || "add";
babyId.value = options.id || "";
if (pageType.value === "edit") {
......
pages/testPage/testPage.vue 0 → 100644
View file @ bae2233b
<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
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>当前展示：{{ 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';
// 用户等级选项
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>
.test-page {
width: 100%;
min-height: 100vh;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
// padding: 20rpx;
box-sizing: border-box;
.page-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
margin-bottom: 30rpx;
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: 1384rpx;
position: relative;
margin-bottom: 30rpx;
// background-color: #fff;
border-radius: 20rpx;
// 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 {
width: 100%;
max-width: 700rpx;
background-color: #fff;
padding: 30rpx;
border-radius: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
.info-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
text-align: center;
margin-bottom: 20rpx;
}
p {
font-size: 28rpx;
color: #666;
line-height: 1.6;
margin: 10rpx 0;
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;
margin-top: 20rpx;
padding: 20rpx;
background-color: #fff5f5;
border-radius: 10rpx;
border-left: 4rpx solid #ff6b6b;
}
}
}
</style>
views/Home.vue
View file @ bae2233b
......@@ -270,7 +270,7 @@
</view>
</view>
<view>
<!-- 普通弹窗 -->
<!-- 普通弹窗 企微等二维码-->
<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff"
border-radius="48rpx">
<view v-if="qrObj !== null" class="popup-content">
......
views/Integral.vue
View file @ bae2233b
<template>
<view class="integral-container">
<view class="integral-container"
:style="{background: getColor('bgColor')[itemIndex]}"
>
<!-- 轮播区域 -->
<swiper
class="banner-swiper"
......@@ -10,6 +12,7 @@
indicator-color="#dfddd9"
indicator-active-color="#b27c1e"
:indicator-top="596"
v-if="swiperData?.length > 0"
>
<swiper-item v-for="(item, index) in swiperData" :key="index">
<image
......@@ -21,6 +24,8 @@
</swiper-item>
</swiper>
<view class="banner-swiper-space" v-else></view>
<!-- 会员等级区域 -->
<swiper
class="vip-swiper"
......@@ -28,28 +33,119 @@
:indicator-dots="false"
@change="handleScroll"
:current="vipLevel"
>
<swiper-item
class="vip-area"
v-for="(item, index) in vipLvDatas"
v-for="(item, index) in integralData?.vipLvInfo"
:key="index"
>
<view class="vip-area-container"
@click="handleVipClick"
:style="{
background: `url(${$baseUrl}integral/${tupianBanben}/${item?.vipIconBg}) no-repeat center/contain`
}"
>
<image class="vip-bg"
:src="$baseUrl + `integral/${tupianBanben}/${item?.vipLvBg}`"
mode="aspectFit"
/>
<image
class="vip-icon"
:src="$baseUrl + `integral/${tupianBanben}/${item?.vipIcon}`"
:src="$baseUrl + `integral/${tupianBanben}/${item?.vipLvIcon}`"
mode="aspectFit"
/>
<image class="current-tag" v-if="islogin && memberInfo?.grade === gradeList[index]?.grade"
:src="$baseUrl + `integral/${tupianBanben}/${item?.currentLvTip}`"
mode="aspectFit"
/>
<view class="jifen-progressbar"
v-if="getHuangjinMaxVal()[index] != -1 && !(memberInfo.grade == 0 && !memberInfo.orderUpgrade && points == 1)"
>
<!-- 积分标题和数值 -->
<view class="jifen-header">
<text class="jifen-label"
:style="{ color: getColor('jifen')[index]?.currentPoints }">累计积分</text>
<text class="jifen-value">
<text class="current-points"
:style="{ color: getColor('jifen')[index]?.currentPoints }">{{ islogin ? points : 0 }}</text>
<text class="separator"
:style="{ color: getColor('jifen')[index]?.totalPoints }">/</text>
<text class="total-points"
:style="{ color: getColor('jifen')[index]?.totalPoints }">{{ getHuangjinMaxVal()[index] }}</text>
</text>
</view>
<!-- 进度条 -->
<view class="progress-bar-container">
<!-- 进度条背景图片 -->
<image
:src="$baseUrl + `integral/${tupianBanben}/barBgVip${index}.png`"
class="progress-bar-bg"
mode="aspectFit"
@error="onProgressBarError"
/>
<!-- 进度条填充图片 -->
<view class="progress-bar-mask">
<image
:src="$baseUrl + `integral/${tupianBanben}/barVip${index}.png`"
class="progress-bar-fill"
mode="aspectFit"
:style="{ transform: `translateX(${getProgress(index) - 100}%)` }"
@error="onProgressBarError"
/>
</view>
</view>
</view>
<text class="current-xingyaodengji-tips"
v-if="getHuangjinMaxVal()[index] == -1 && !(memberInfo.grade == 0 && !memberInfo.orderUpgrade && points == 1)"
:style="{ color: getColor('jifen')[index]?.currentPoints }"
> {{ itemIndex == 4 ? '您已经升至最高等级' : '您已超越该等级' }}</text>
<view class="saoma-tips" v-if="memberInfo.grade == 0 && !memberInfo.orderUpgrade && points == 1">
<text class="saoma-tips-text"
:style="{ color: getColor('saomaTips')[index]?.textColor }"
>扫罐内码或下单有机会升级至<text class="saoma-tips-text-lv"
:style="{ color: getColor('saomaTips')[index]?.jifenColor }"
>{{ gradeList[index]?.gradeName }}</text>
</text>
<text class="saoma-tips-text-tips"
:style="{ color: getColor('saomaTips')[index]?.jifenColor }"
>积分
<text class="saoma-tips-text-tips-num"
:style="{ color: getColor('saomaTips')[index]?.jifenColor }"
>{{ points }}</text>
<text class="saoma-tips-text-tips-maxnum"
:style="{ color: getColor('saomaTips')[index]?.textColor }"
>/{{ getHuangjinMaxVal()[index] }}</text>
</text>
</view>
<button
v-if="!islogin"
type="primary"
class="phone-button"
open-type="getPhoneNumber"
@getphonenumber="getRealtimePhoneNumber"
/>
<view class="vip-info">
</view>
<text
class="chakanshengjigonglueTxt"
:style="{ color: getColor('chakangonglue')[index] }"
@click="gonglueHandler"
>
查看升级攻略
</text>
<!-- <view class="vip-info">
<text class="vip-name"
:style="{
color: islogin ? `${item?.nickNameColor}` : '#6f6d67',
}"
>{{`${nickName}`}}</text>
<view class="title-container">
<text v-if="!islogin" class="vip-title1">{{`${item?.vipName}`}}</text>
<image
......@@ -58,40 +154,25 @@
:src="$baseUrl + `integral/${tupianBanben}/${item?.vipNameImg}`"
mode="aspectFit"
/>
<button
v-if="!islogin"
type="primary"
class="phone-button"
open-type="getPhoneNumber"
@getphonenumber="getRealtimePhoneNumber"
/>
<image
v-if="!islogin"
class="rule-icon"
:src="$baseUrl + `integral/${tupianBanben}/integralArrow.png`"
mode="aspectFit"
/>
<view
class="current-tag"
v-if="islogin && index == vipLevel"
:style="{
background: `url(${$baseUrl}integral/${tupianBanben}/tabNowBg.png) no-repeat center/contain`
}"
>
<text class="tag-text"
:style="{
color: `${item?.dangqianColor}`,
}">当前</text>
</view>
</view>
</view>
</view> -->
</swiper-item>
</swiper>
<image class="vipCardArrowRight" v-if="itemIndex != 4" :src="$baseUrl + `integral/${tupianBanben}/vipCardArrowRight.png`" mode="aspectFit"></image>
<image class="vipCardArrowLeft" v-if="itemIndex != 0" :src="$baseUrl + `integral/${tupianBanben}/vipCardArrowLeft.png`" mode="aspectFit"></image>
<!-- 新增积分详情容器 -->
<view
class="integral-detail"
v-if="islogin"
v-if="false"
>
<image
class="excharge-btn"
......@@ -174,9 +255,17 @@
<view class="privilege-container">
<!-- 第一行 -->
<view class="privilege-header">
<text class="title-text" v-if="islogin">可享 <text class="highlight">{{vipQuanyiData[Math.abs(itemIndex)].qunyiList.length}}</text> 项权益会员</text>
<text class="title-text" v-if="!islogin">最高可享 <text class="highlight">10</text> 项权益会员</text>
<view class="rule-container">
<text class="quanyi-title"
:style="{ color: getColor('quanyiTitle')[itemIndex].titleColor }">LV{{ (Number(itemIndex) + 1) }}专享权益</text>
<text class="title-text"
:style="{ color: getColor('quanyiTitle')[itemIndex].quanyiNumColor }">当前可享<text class="highlight"
:style="{ color: getColor('quanyiTitle')[itemIndex].quanyiNumColor }">{{quanyiBgs[itemIndex].quanyiNum}}</text>项权益，升级解锁更多权益～</text>
<!-- <text class="title-text" v-if="!islogin"
:style="{ color: getColor('quanyiTitle')[itemIndex].quanyiNumColor }">最高可享 <text class="highlight"
:style="{ color: getColor('quanyiTitle')[itemIndex].quanyiNumColor }">10</text> 项权益会员</text> -->
<!-- <view class="rule-container">
<text
class="rule-text"
@click="vipRuleHandler"
......@@ -188,28 +277,42 @@
:src="$baseUrl + `integral/${tupianBanben}/integralArrow.png`"
mode="aspectFit"
/>
</view> -->
</view>
</view>
<!-- vipQuanyiData[Math.abs(itemIndex)].qunyiList" -->
<!-- 第二行 -->
<view class="privilege-grid">
<view
class="privilege-item"
v-for="(item, index) in vipQuanyiData[Math.abs(itemIndex)].qunyiList"
v-for="(item, index) in imgInfos"
:key="index"
:style="{ width: privilegeSizes[item].width, height: privilegeSizes[item].height }"
>
<image
class="privilege-icon"
:src="$baseUrl + `integral/${tupianBanben}/${quanyiListIcon[item]}`"
class="itemBg"
:src="$baseUrl + `integral/${tupianBanben}/${index === selectIdx ? quanyiBgs[itemIndex]['selectImg'] : (index < quanyiBgs[itemIndex].quanyiNum ? quanyiBgs[itemIndex]['unlockImg'] : quanyiBgs[itemIndex]['lockImg'])}`"
:style="{ width: item.width, height: item.height }"
mode="aspectFit"
@click="handlePrivilegeClick(privilegeSizes[item])"
/>
<image
class="privilege-icon"
:src="$baseUrl + `integral/${tupianBanben}/${item?.img}`"
:style="{ width: item.width, height: item.height }"
mode="aspectFit"
@click="handlePrivilegeClick(item, index)"
/>
<!-- <image
v-if="vipQuanyiData[Math.abs(itemIndex)].isNewArr.includes(item) && itemIndex >= vipLevel"
class="new-tip"
:src="$baseUrl + `integral/${tupianBanben}/newTip.png`"
mode="aspectFit"
/> -->
<text class="quanyi-text" :style="{ color: getColor('quanyiNameColor')[itemIndex] }">{{ item.name }}</text>
<image
class="quanyi-text-img"
v-if="index >= quanyiBgs[itemIndex].quanyiNum && index < 9"
:src="$baseUrl + `integral/${tupianBanben}/quanyiLockIcon${itemIndex}.png`"
mode="aspectFit"
/>
<button
......@@ -217,23 +320,111 @@
type="primary"
class="phone-button-qyIcon"
open-type="getPhoneNumber"
:style="{
width: privilegeSizes[item].width,
height: privilegeSizes[item].height,
}"
:style="{ width: item.width, height: item.height }"
@getphonenumber="getRealtimePhoneNumber"
/>
</view>
</view>
</view>
<view class="quanyi-detail-area" v-if="isshowQuanyiDetail">
<!-- MonthGift 组件 -->
<MonthGift
v-if="Number(selectIdx) === 0"
:current-level="itemIndex"
:userLevel="memberInfo?.grade"
ref="monthGiftRef"
/>
<!-- YearGift 组件 -->
<YearGift
v-if="Number(selectIdx) === 5"
:current-level="itemIndex"
:userLevel="memberInfo?.grade"
ref="yearGiftRef"
/>
<!-- BabyClass 组件 -->
<BabyClass
v-if="Number(selectIdx) === 1"
:current-level="itemIndex"
:userLevel="memberInfo?.grade"
ref="babyClassRef"
/>
<!-- <xinrenli
:index="itemIndex"
@go-to-shop="handleGoToShop"
v-if="Number(selectIdx) === 2"
/> -->
<mianfeiwenzhen
:index="itemIndex"
v-if="Number(selectIdx) === 2"
@use-now="handleGoToShop_mainfeiwenzhen"
/>
<aibenxinrenli
:index="itemIndex"
:isshowLock="memberInfo?.grade < 1"
v-if="Number(selectIdx) === 3"
@upgrade="handleGoToShop_aibenxinrenli"
/>
<zhuanduanli
:index="itemIndex"
:isshowLock="memberInfo?.grade < 1"
v-if="Number(selectIdx) === 4"
@upgrade="handleGoToShop_zhuanduanli"
/>
<jinjili
:index="itemIndex"
:isshowLock="memberInfo?.grade < 2"
v-if="Number(selectIdx) === 7"
@upgrade="handleGoToShop_jinjili"
/>
<shengrili
:index="itemIndex"
:isshowLock="memberInfo?.grade < 2"
v-if="Number(selectIdx) === 6"
@upgrade="handleGoToShop_shengrili"
/>
<suyuanyou
:index="itemIndex"
:isshowLock="memberInfo?.grade < 3"
v-if="Number(selectIdx) === 8"
@upgrade="handleGoToShop_suyuanyou"
/>
<!-- <xinrenliPopup
:index="itemIndex"
@coupon-click="handleCouponClick"
@go-to-shop="handleGoToShop"
/> -->
</view>
<view class="zhankai-quanyi" @click="handleZhankaiClick" v-if="selectIdx != -1">
<image
v-if="isshowShouqi"
class="shouqi-quanyi-img"
:src="$baseUrl + `integral/${tupianBanben}/shouqiBtn${itemIndex}.png`"
mode="aspectFit"
/>
<image
v-if="!isshowShouqi"
class="zhankai-quanyi-img"
:src="$baseUrl + `integral/${tupianBanben}/zhankaiBtn${itemIndex}.png`"
mode="aspectFit"
/>
</view>
<!-- 会员活动 -->
<view class="vip-active-area">
<text class="vip-title">会员活动</text>
<text class="vip-title" :style="{ color: itemIndex === 4 ? '#fff0df' : '#1d1e25' }">会员活动</text>
<swiper
class="vip-active-swiper"
:indicator-dots="true"
:indicator-dots="vipActive.length > 1"
:autoplay="true"
:circular="true"
indicator-color="#dfddd9"
......@@ -259,14 +450,15 @@
v-for="(tab, index) in tabInfo?.tabTexts"
:key="index"
class="tab-item"
:class="{ active: activeIndex === index }"
@click="tabItemClick(index)"
:style="{
background: activeIndex === index && `url(${$baseUrl}integral/${tupianBanben}/${tabInfo?.tabBg}) no-repeat center/contain`
:class="{
active: activeIndex === index && itemIndex !== 4,
active1: activeIndex === index && itemIndex === 4
}"
@click="tabItemClick(index)"
>
<text class="tab-line1">{{ tab?.line1 }}</text>
<text class="tab-line2">{{ tab?.line2 }}</text>
<!-- <text class="tab-line2">{{ tab?.line2 }}</text> -->
<view class="select-line" v-if="activeIndex === index"></view>
</view>
</view>
......@@ -283,7 +475,7 @@
:key="i"
:style="{
background:`url(${$baseUrl}${listCommon?.listItemImgBg}) no-repeat center/contain`
background:`url(${$baseUrl}integral/1022/listItemImgBg${itemIndex}.png) no-repeat center/contain`
}"
>
<!-- <image
......@@ -316,7 +508,7 @@
v-for="i in goodsData[1]?.titles?.length"
:key="i"
:style="{
background:`url(${$baseUrl}${listCommon?.listItemImgBg}) no-repeat center/contain`
background:`url(${$baseUrl}integral/1022/listItemImgBg${itemIndex}.png) no-repeat center/contain`
}"
>
<view class="goods-item-container" @click="handleGoodsItemClick('lingyuan',i)">
......@@ -344,7 +536,7 @@
v-for="i in goodsData[2]?.titles?.length"
:key="i"
:style="{
background:`url(${$baseUrl}${listCommon?.listItemImgBg}) no-repeat center/contain`
background:`url(${$baseUrl}integral/1022/listItemImgBg${itemIndex}.png) no-repeat center/contain`
}"
>
<view class="goods-item-container" @click="handleGoodsItemClick('beiwei',i)">
......@@ -396,10 +588,22 @@
@confirm="handleRegisterConfirm"
@cancel="handleRegisterCancel"
/>
<popupShengri
:type="Number(itemIndex) + 1"
v-if="showPopupShengri"
@close="showPopupShengri = false"
/>
<ShengriliTipPanel
:bgIndex="itemIndex"
v-if="showShengriliTipPanel"
@close="showShengriliTipPanel = false"
@add="gotoAddBaby"
/>
</view>
</template>
<!-- showShengriliTipPanel -->
<script setup>
// 轮播图数据可在此定义（当前使用静态路径）
......@@ -407,23 +611,95 @@
import { ref, onMounted, onBeforeMount, computed, watch } from 'vue';
import { jump, JumpType } from '@/utils/index.js'
import { useUserStore } from "@/stores/user";
import { fetchIntegralJSON } from '../api/integral';
import { fetchIntegralJSON,fetchBatchReceiveJSON } from '../api/integral';
import RegisterLayer from "../components/RegisterLayer.vue";
import md from '../md';
import { showLoading, hideLoading } from '../utils'
import xinrenli from '../components/quanyi/xinrenli.vue'
import md from '../md';
import mianfeiwenzhen from '../components/quanyi/mianfeiwenzhen.vue';
import aibenxinrenli from '../components/quanyi/aibenxinrenli.vue';
import zhuanduanli from '../components/quanyi/zhuanduanli.vue';
import BabyClass from '../components/pointRightsCom/babyClass.vue';
import monthGift from '../components/pointRightsCom/monthGift.vue';
import yearGift from '../components/pointRightsCom/yearGift.vue';
import jinjili from '../components/quanyi/jinjili.vue';
import shengrili from '../components/quanyi/shengrili.vue';
import suyuanyou from '../components/quanyi/suyuanyou.vue';
import popupShengri from '../components/popup-shengri/popup-shengri.vue';
import { getHealthField } from "@/api/common";
import MonthGift from '../components/pointRightsCom/monthGift.vue';
import YearGift from '../components/pointRightsCom/yearGift.vue';
import ShengriliTipPanel from '../components/quanyi/shengriliTipPanel.vue';
// 进度条图片加载错误处理
const onProgressBarError = (e) => {
console.error('进度条图片加载失败:', e)
// 可以设置默认样式或显示错误提示
}
const orderUpgrade = ref(false);
// const maxVal = ref([]);
const integralData = ref({
"tupianBanben": "1013",
"tupianBanben": "1022",
"swiper": [
{
"bannerImg": "integralBannerBg1.png",
"url": "",
],
"quanyitiaozhuanInfo":{
"suyuanyou":{
"qubaoming": {
"url": "https://member.feihe.com/memberH5/#/SyySignupInfo?activityCode=syy20250806&sceneCode=WXG01",
"type": 3
}
},
"shengrili":{
"qushiyong": {
"url": "subPackages/shopMainProcess/coupons/couponList",
"type": 2,
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
}
}
},
"vipLvInfo":[
{
"currentLvTip":"currentLvTip0.png",
"barVip":"barVip0.png",
"barBgVip":"barBgVip0.png",
"vipLvBg":"vipLvBg0.png",
"vipLvIcon":"vipLvIcon0.png",
},
{
"currentLvTip":"currentLvTip1.png",
"barVip":"barVip1.png",
"barBgVip":"barBgVip1.png",
"vipLvBg":"vipLvBg1.png",
"vipLvIcon":"vipLvIcon1.png",
},
{
"currentLvTip":"currentLvTip2.png",
"barVip":"barVip2.png",
"barBgVip":"barBgVip2.png",
"vipLvBg":"vipLvBg2.png",
"vipLvIcon":"vipLvIcon2.png",
},
{
"currentLvTip":"currentLvTip3.png",
"barVip":"barVip3.png",
"barBgVip":"barBgVip3.png",
"vipLvBg":"vipLvBg3.png",
"vipLvIcon":"vipLvIcon3.png",
},
{
"currentLvTip":"currentLvTip4.png",
"barVip":"barVip4.png",
"barBgVip":"barBgVip4.png",
"vipLvBg":"vipLvBg4.png",
"vipLvIcon":"vipLvIcon4.png",
}
],
"viplv": {
"imgs": [
......@@ -497,66 +773,93 @@
"url": "https://mom.feihe.com/member/mine/pointStrategy",
"type": 3
},
"imgInfos": [
"quanyiBgs":[
{
"img": "yueyueliBtn.png",
"width": "68rpx",
"height": "87rpx",
"name": "月月礼"
"lockImg": "quanyiLockBg0.png",
"unlockImg": "quanyiunLockBg0.png",
"selectImg": "quanyiSelectBg0.png",
"quanyiNum": 3
},
{
"img": "shengriBtn.png",
"width": "70rpx",
"height": "91rpx",
"name": "生日礼"
"lockImg": "quanyiLockBg1.png",
"unlockImg": "quanyiunLockBg1.png",
"selectImg": "quanyiSelectBg1.png",
"quanyiNum": 5
},
{
"lockImg": "quanyiLockBg2.png",
"unlockImg": "quanyiunLockBg2.png",
"selectImg": "quanyiSelectBg2.png",
"quanyiNum": 8
},
{
"lockImg": "quanyiLockBg3.png",
"unlockImg": "quanyiunLockBg3.png",
"selectImg": "quanyiSelectBg3.png",
"quanyiNum": 9
},
{
"lockImg": "quanyiLockBg4.png",
"unlockImg": "quanyiunLockBg4.png",
"selectImg": "quanyiSelectBg4.png",
"quanyiNum": 9
},
],
"imgInfos": [
{
"img": "yueyueliIcon0.png",
"width": "99rpx",
"height": "99rpx",
"name": "月月礼"
},
{
"img": "yuerBtn.png",
"width": "94rpx",
"height": "87rpx",
"name": "育儿礼"
"img": "yuerIcon0.png",
"width": "99rpx",
"height": "99rpx",
"name": "育儿课程"
},
{
"img": "heliBtn.png",
"width": "48rpx",
"height": "87rpx",
"name": "贺礼"
"img": "mainfeiIcon0.png",
"width": "99rpx",
"height": "99rpx",
"name": "免费问诊"
},
{
"img": "xinrenliBtn.png",
"width": "71rpx",
"height": "88rpx",
"name": "新人礼"
"img": "aibenxinrenliIcon0.png",
"width": "99rpx",
"height": "99rpx",
"name": "爱本新人礼"
},
{
"img": "mianfeiBtn.png",
"width": "95rpx",
"height": "87rpx",
"name": "免费礼"
"img": "zhuanduanliIcon0.png",
"width": "99rpx",
"height": "99rpx",
"name": "转段礼"
},
{
"img": "zhuanduanli.png",
"width": "70rpx",
"height": "86rpx",
"name": "专端礼"
"img": "zhousuiliIcon0.png",
"width": "99rpx",
"height": "99rpx",
"name": "周岁礼"
},
{
"img": "changxianBtn.png",
"width": "94rpx",
"height": "87rpx",
"name": "尝鲜礼"
"img": "shengriliIcon0.png",
"width": "99rpx",
"height": "99rpx",
"name": "生日礼"
},
{
"img": "jinjiBtn.png",
"width": "70rpx",
"height": "89rpx",
"name": "进阶礼"
"img": "jinjiliIcon0.png",
"width": "99rpx",
"height": "99rpx",
"name": "晋级礼"
},
{
"img": "suyuanBtn.png",
"width": "71rpx",
"height": "90rpx",
"name": "溯源礼"
"img": "suyuanyouIcon0.png",
"width": "99rpx",
"height": "99rpx",
"name": "溯源游"
}
],
"rule": {
......@@ -607,7 +910,7 @@
],
"goodsListData": {
"listCommon": {
"listItemImgBg": "integral/1008/listItemImgBg.png"
"listItemImgBg": "integral/1022/listItemImgBg.png"
},
"tabInfo": {
"tabBg": "tapSelectBg.png",
......@@ -748,16 +1051,6 @@
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "593557253255397681",
"skuId": "675866042011105275",
"type": 2,
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "670068445908034706",
......@@ -777,16 +1070,6 @@
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "486040248826077773",
"skuId": "486040248826077774",
"type": 2,
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
}
],
"lingyuan": [
......@@ -830,16 +1113,6 @@
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "637115498514653835",
"skuId": "637115498514653836",
"type": 2,
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "637462885116453461",
......@@ -850,16 +1123,6 @@
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "637125264624522797",
"skuId": "637125264624522798",
"type": 2,
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "664995106239801237",
......@@ -870,16 +1133,6 @@
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "566750277742626607",
"skuId": "566750277742626608",
"type": 2,
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "664992929630904330",
......@@ -890,16 +1143,6 @@
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "479814938702811385",
"skuId": "479814938702811386",
"type": 2,
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "477231839213998660",
......@@ -929,26 +1172,6 @@
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "446767559140140163",
"skuId": "446767559140140164",
"type": 2,
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
},
{
"url": "subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_star",
"productId": "575869473685026384",
"skuId": "575869473689219730",
"type": 2,
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
}
],
"beiwei": [
......@@ -1049,28 +1272,24 @@
"金装1962-高钙高蛋白...",
"德佑纯水湿巾80抽/包",
"婴儿专护除菌除螨洗衣...",
"多肉鳕鱼空气脆饼干宝...",
"DHA深海鳕鱼肠80g*4袋",
"云朵软软绵柔巾洗脸巾...",
"凡士林100ml倍护精华..."
"云朵软软绵柔巾洗脸巾..."
],
"prices": [
"低至730积分+￥115",
"低至865积分+￥195",
"低至1000积分+￥228",
"低至715积分+￥125",
"低至560积分+￥102",
"低至323积分+￥37.5",
"低至210积分+￥68",
"低至560积分+￥102",
"低至480积分+￥114",
"低至210积分+￥68",
"低至3160积分+￥126.4",
"低至1400积分+￥55.8",
"低至1780积分+￥71.2",
"低至3160积分+￥126.4",
"低至3960积分+￥158.4",
"低至1780积分+￥71.2",
"低至65积分+￥36.5",
"低至90积分+￥12.9",
"低至2300积分+￥2",
"低至65积分+￥19.5",
"低至80积分+￥14.9",
"低至86积分+￥21.3"
"低至440积分+￥17.5",
"低至520积分+￥20.8",
"低至460积分+￥18.3"
],
"goodsImgs": [
"listItemImgJx0.png",
......@@ -1085,10 +1304,9 @@
"listItemImgJx9.png",
"listItemImgJx10.png",
"listItemImgJx11.png",
"listItemImgJx12.png",
"listItemImgJx13.png",
"listItemImgJx14.png",
"listItemImgJx15.png"
"listItemImgJx14.png"
]
},
{
......@@ -1097,54 +1315,36 @@
"飞鹤茁然儿童配方奶升...",
"茁然 茁护儿童配方奶...",
"宝宝钙维生素D软胶囊...",
"婴儿专护除菌除螨洗衣...",
"公牛 新国标插座/插线...",
"宝宝植萃深度洁净洗衣...",
"九阳煮蛋器多功能智能...",
"云朵软软绵柔巾洗脸巾...",
"荣事达电煮锅家用多功...",
"德佑小白羊绵柔巾珍珠...",
"babygo进口户外防水...",
"苏泊尔（SUPOR）真...",
"超级飞侠儿童绘画笔套...",
"可爱多湿巾纸无染清洁...",
"亲肤纯水湿巾加厚加大..."
"超级飞侠儿童绘画笔套..."
],
"prices": [
11500,
8900,
12000,
5450,
2190,
5980,
2490,
4900,
2290,
4900,
2490,
5900,
5900,
3800,
9900,
7900,
990,
1990
7900
],
"goodsImgs": [
"listItemImgXL0.png",
"listItemImgXL1.png",
"listItemImgXL2.png",
"listItemImgXL3.png",
"listItemImgXL4.png",
"listItemImgXL5.png",
"listItemImgXL6.png",
"listItemImgXL7.png",
"listItemImgXL8.png",
"listItemImgXL9.png",
"listItemImgXL10.png",
"listItemImgXL11.png",
"listItemImgXL12.png",
"listItemImgXL13.png",
"listItemImgXL14.png",
"listItemImgXL15.png"
"listItemImgXL13.png"
]
},
{
......@@ -1181,65 +1381,40 @@
}
]
}
});
});
// const integralData = ref({});
const swiperData = ref(integralData.value.swiper);//banner图片地方
const vipLvIcons = ref(integralData.value.viplv.imgs);//会员等级图标
const vipLvNameImgs = ref(integralData.value.viplv.vipNameImgs);//会员等级名称图片
const vipLvIconBgs = ref(integralData.value.viplv.imgBgs);//会员等级图标背景
const nickNameColors = ref(integralData.value.viplv.nickNameColors);//会员等级昵称颜色
const dangqianColors = ref(integralData.value.viplv.dangqianColors);//当前等级颜色
const upLvTxts = ref(integralData.value.viplv.upLvTxts);//会员等级提升文字
const vipIntegral = ref(integralData.value.vipIntegral);//积分明细\
const clickMore = ref(integralData.value.clickMore);//点击更多
const vipActive = ref(integralData.value.vipActive);//会员活动
const tabInfo = ref(integralData.value.goodsListData.tabInfo);//tabbar信息
const listCommon = ref(integralData.value.goodsListData.listCommon);//商品列表通用信息
const goodsData = ref(integralData.value.goodsListData.goodsData);//商品数据
const productIdUrl = ref(integralData.value.goodsListData.productIdUrl);//商品跳转链接
const imgInfos = ref(integralData.value.qunyiInfo.imgInfos);//权益信息
const vipRule = ref(integralData.value.qunyiInfo.vipRule);//会员规则跳转
const showShengriliTipPanel = ref(false);
const quanyitiaozhuanInfo = ref({});
const selectIdx = ref(-1);//权益选中id
const isshowShouqi = ref(false);//是否收起权益
const isshowQuanyiDetail = ref(false);//是否显示权益详情
const swiperData = ref(integralData.value?.swiper);//banner图片地方
const vipLvIcons = ref(integralData.value?.viplv?.imgs);//会员等级图标
const vipLvNameImgs = ref(integralData.value?.viplv?.vipNameImgs);//会员等级名称图片
const vipLvIconBgs = ref(integralData.value?.viplv?.imgBgs);//会员等级图标背景
const nickNameColors = ref(integralData.value?.viplv?.nickNameColors);//会员等级昵称颜色
const dangqianColors = ref(integralData.value?.viplv?.dangqianColors);//当前等级颜色
const upLvTxts = ref(integralData.value?.viplv?.upLvTxts);//会员等级提升文字
const vipIntegral = ref(integralData.value?.vipIntegral);//积分明细\
const clickMore = ref(integralData.value?.clickMore);//点击更多
const vipActive = ref(integralData.value?.vipActive);//会员活动
const tabInfo = ref(integralData.value?.goodsListData?.tabInfo);//tabbar信息
const listCommon = ref(integralData.value?.goodsListData?.listCommon);//商品列表通用信息
const goodsData = ref(integralData.value?.goodsListData?.goodsData);//商品数据
const productIdUrl = ref(integralData.value?.goodsListData?.productIdUrl);//商品跳转链接
const imgInfos = ref(integralData.value?.qunyiInfo?.imgInfos);//权益信息
const vipRule = ref(integralData.value?.qunyiInfo?.vipRule);//会员规则跳转
const vipLvsQuanyi = ref([]);//会员不同等级权益
const points = ref(0);//积分
const vipQuanyiUrl = ref(integralData.value.qunyiInfo.vipQuanyiUrl);//会员权益图标点击跳转
const gradeList = ref([]);
const vipQuanyiUrl = ref(integralData.value?.qunyiInfo?.vipQuanyiUrl);//会员权益图标点击跳转
const activeIndex = ref(0);//tabbar选中项
const showRegisterLayer = ref(false);
const tupianBanben = ref(integralData.value.tupianBanben);//图片版本号
// const tabs = ref([
// { line1: '精选榜单', line2: '积分超值兑' },
// { line1: '品质专区', line2: '北纬47°' },
// { line1: '限量推荐', line2: '积分加价购' }
// ]);
// const goodsData = ref([
// {
// titles: ['六水香清禾香大米2.5kg','EDI纯水手口湿巾迷你...','全麦手撕面包麦香浓郁...','艾草植萃除菌除螨洗衣...','内衣专护洗衣液','婴儿专护除菌除螨洗衣...','宝宝钙维生素D软胶囊...','北纬47度鲜甜低GI水果...','牙博士青柠亮白牙膏','六水香泰来大米2.5kg','钙铁锌牛乳软饼干6g*...','飞鹤茁然儿童配方奶2...','酵素洗衣皂抑菌柔护尿...','云柔保湿纸巾乳霜纸...','超级飞侠儿童绘画笔套...','婴蓓INBER 儿童糖果...'],
// prices: [
// 3200,990,1990,1990,
// 1590,2190,2680,990,
// 1580,4000,2490,5200,
// 1990,3900,7900,1990],
// goodsImgs:['listItemImgJx0.png','listItemImgJx1.png','listItemImgJx2.png','listItemImgJx3.png','listItemImgJx4.png','listItemImgJx5.png','listItemImgJx6.png','listItemImgJx7.png','listItemImgJx8.png','listItemImgJx9.png','listItemImgJx10.png','listItemImgJx11.png','listItemImgJx12.png','listItemImgJx13.png','listItemImgJx14.png','listItemImgJx15.png']
// },
// {
// titles:['北纬47度水果玉米','北纬47度黄糯鲜玉米','北纬47度白甜糯玉米','北纬47度东北烧烤...','北纬47度花甜糯玉米','北纬47度黑珍珠玉米','N47°植物酵素乳245...','N47°水果玉米汁245...'],
// prices:[4200,3840,3840,5990,4200,4200,5500,4990],
// goodsImgs:['listItemImgPzh0.png','listItemImgPzh1.png','listItemImgPzh2.png','listItemImgPzh3.png','listItemImgPzh4.png','listItemImgPzh5.png','listItemImgPzh6.png','listItemImgPzh7.png']
// },
// {
// titles:['星飞帆4段儿童成长...','星飞帆卓睿4段儿童...','金装1962-高锌多维学...','香葱流心可颂面包500g','茁然 茁护儿童配方奶...','六水香清禾香大米5kg','星蕴孕产妇奶粉听装700g','美维仕宝宝钙维生素...','金装1962-中老年高钙...','金装1962-高钙高蛋白...','茁然纯牛奶(A2 B酪蛋...','北纬47度黄糯鲜玉米','钙铁锌牛乳软饼干6g*...','迪奥口红 烈焰蓝金唇...','浅香(ASAKA)百合氨基...','心相印茶语精选320抽...'],
// prices:[188,368,89,19.9,268,69,158,78,89,89,65,66,39.9,158.51,31,29],
// goodsImgs:['listItemImgXL0.png','listItemImgXL1.png','listItemImgXL2.png','listItemImgXL3.png','listItemImgXL4.png','listItemImgXL5.png','listItemImgXL6.png','listItemImgXL7.png','listItemImgXL8.png','listItemImgXL9.png','listItemImgXL10.png','listItemImgXL11.png','listItemImgXL12.png','listItemImgXL13.png','listItemImgXL14.png','listItemImgXL15.png']
// }
// // 其他分类数据...
// ]);
const tupianBanben = ref(integralData.value?.tupianBanben);//图片版本号
const vipLevel = ref(0);
// const vipNameArr = ref(['V1 黄金会员', 'V2 铂金会员', 'V3 钻石会员', 'V4 星光会员', 'V5 星耀会员']);
......@@ -1250,7 +1425,8 @@
const lastScrollLeft = ref(0);
const vipQuanyiData = ref(integralData.value.qunyiInfo.vipLvsQuanyi);
const vipQuanyiData = ref(integralData.value?.qunyiInfo?.vipLvsQuanyi);
const quanyiBgs = ref(integralData.value?.qunyiInfo?.quanyiBgs);
const recentAnnualPointsTotal = ref(0);
const nextGradeScoreRuleMin = ref(0);
......@@ -1294,6 +1470,7 @@
const mdMap = ref([]);
const showPopupShengri = ref(false);
// Props 定义
const props = defineProps({
......@@ -1303,36 +1480,183 @@
}
})
// 监听 scrollTop 变化
watch(() => props.scrollTop, (newVal) => {
// console.log('scrollTop 变化:', newVal)
// 执行相关逻辑，如曝光检测
if(newVal > 650){
if(mdMap.value.indexOf('积分服务页-二屏') == -1){
md.sensorLogTake({
xcxPage: "积分服务页-二屏页面浏览",
pageName: "积分服务页-二屏",
});
//babyStage 宝宝阶段 0备用 1孕中 2出生 ,null无数据
const gotoAddBaby = () => {
if (userStore.babyInfo?.allBabyBaseInfo?.some(baby => baby.babyStage == 2)) {
mdMap.value.push('积分服务页-二屏');
}else{
if(userStore.babyInfo?.allBabyBaseInfo?.length == 3){
if (userStore.babyInfo?.allBabyBaseInfo?.some(baby => baby.babyStage == 1)) {
// const baby = userStore.babyInfo?.allBabyBaseInfo?.find(baby => baby.babyStage == 1);
const baby = userStore.babyInfo?.allBabyBaseInfo.find(
(item) => item.selected
);
// debugger;
if (baby) {
navigateTo(`/pages/person/person?type=edit&id=${baby.id}`);
}
}else{
if(userStore.babyInfo?.allBabyBaseInfo?.some(baby => baby.babyStage == 0)){
//跳转2状态的编辑页
// const baby = userStore.babyInfo?.allBabyBaseInfo?.find(baby => baby.babyStage == 0);
const baby = userStore.babyInfo?.allBabyBaseInfo.find(
(item) => item.selected
);
// debugger;
if (baby) {
navigateTo(`/pages/person/person?type=edit&id=${baby.id}`);
}
}
}
}else{
navigateTo("/pages/person/person?type=add");
}
}
if(newVal > 1328){
if(mdMap.value.indexOf('积分服务页-三屏') == -1){
}
md.sensorLogTake({
xcxPage: "积分服务页-三屏页面浏览",
pageName: "积分服务页-三屏",
});
//isshowShouqi 为true 时，展示收起按详情，为false 时，展示查看详情
const handleZhankaiClick = () => {
mdMap.value.push('积分服务页-三屏');
isshowShouqi.value = !isshowShouqi.value;
isshowQuanyiDetail.value = !isshowQuanyiDetail.value;
// if(!isshowShouqi.value){
// selectIdx.value = -1;
// }
}
//原始数值：(points.value/maxVal.value[memberInfo.value.grade])*100;
const getProgress = (index) => {
let progress = 0;
const val = getHuangjinMaxVal()[index];
progress = (points.value/val)*100;
if(progress > 100){
progress = 100;
}
if(newVal > 2058){
if(progress < 0){
progress = 0;
}
return progress;
}
const getColor = (type) => {
let colors = '';
switch(type){
case 'chakangonglue':
colors = ['#794c1f', '#5588ba', '#443799', '#4d2f11', '#f6cc9d'];
break;
case 'jifen':
colors = [{
"currentPoints":"#5f3c27",
"totalPoints":"#d7aa72"
},
{
"currentPoints":"#385e85",
"totalPoints":"#6c9bc9"
},
{
"currentPoints":"#403294",
"totalPoints":"#756ae0"
},
{
"currentPoints":"#5f3c27",
"totalPoints":"#d4a468"
},
{
"currentPoints":"#f6c79c",
"totalPoints":"#d4a468"
}];
break;
case 'saomaTips':
colors = [
{
"textColor":"#d4a468",
"jifenColor":"#5f3c27",
},
{
"textColor":"#5588ba",
"jifenColor":"#385e85",
},
{
"textColor":"#756ae0",
"jifenColor":"#403294",
},
{
"textColor":"#d4a468",
"jifenColor":"#5f3c27",
},
{
"textColor":"#f6c79c",
"jifenColor":"#ffedc1",
}
]
break;
case 'quanyiNameColor':
colors = ['#503404','#284a6c','#322d6f','#503404','#fff0df'];
break;
case 'bgColor':
colors = ['#e9e2cc','#cee3f5','#eae5f0','#eee3b9','#352f2a'];
break;
case 'quanyiTitle':
colors = [
{
"titleColor":"#503404",
"quanyiNumColor":"#9a8c74"
},
{
"titleColor":"#284a6c",
"quanyiNumColor":"#7b8b9a"
},
{
"titleColor":"#322d6f",
"quanyiNumColor":"#9c8aba"
},
{
"titleColor":"#503404",
"quanyiNumColor":"#9d8d6c"
},
{
"titleColor":"#fff0df",
"quanyiNumColor":"#c2a98d"
}
];
break;
}
return colors;
}
// 监听 scrollTop 变化
watch(() => props.scrollTop, (newVal) => {
// console.log('scrollTop 变化:', newVal)
// 执行相关逻辑，如曝光检测
if(newVal > 650){
if(mdMap.value.indexOf('积分服务页-二屏') == -1){
md.sensorLogTake({
xcxPage: "积分服务页-二屏页面浏览",
pageName: "积分服务页-二屏",
});
mdMap.value.push('积分服务页-二屏');
}
}
if(newVal > 1328){
if(mdMap.value.indexOf('积分服务页-三屏') == -1){
md.sensorLogTake({
xcxPage: "积分服务页-三屏页面浏览",
pageName: "积分服务页-三屏",
});
mdMap.value.push('积分服务页-三屏');
}
}
if(newVal > 2058){
if(mdMap.value.indexOf('积分服务页-四屏') == -1){
md.sensorLogTake({
......@@ -1346,14 +1670,44 @@
})
const getHuangjinMaxVal = () => {
let maxVal = [];
if(!islogin.value){
return [1,1,1000,5000,10000];
}
switch(Number(memberInfo.value.grade)){
case 0:
maxVal = [gradeList?.value[0]?.gradeScoreRuleMax,gradeList?.value[1]?.gradeScoreRuleMin,gradeList?.value[2]?.gradeScoreRuleMin,gradeList?.value[3]?.gradeScoreRuleMin,gradeList?.value[4]?.gradeScoreRuleMin];
break;
case 1:
maxVal = [-1,gradeList?.value[1]?.gradeScoreRuleMax,gradeList?.value[2]?.gradeScoreRuleMin,gradeList?.value[3]?.gradeScoreRuleMin,gradeList?.value[4]?.gradeScoreRuleMin];
break;
case 2:
maxVal = [-1,-1,gradeList?.value[2]?.gradeScoreRuleMax,gradeList?.value[3]?.gradeScoreRuleMin,gradeList?.value[4]?.gradeScoreRuleMin];
break;
case 3:
maxVal = [-1,-1,-1,gradeList?.value[3]?.gradeScoreRuleMax,gradeList?.value[4]?.gradeScoreRuleMin];
break;
case 4:
maxVal = [-1,-1,-1,-1,-1];
break;
}
return maxVal;
}
onBeforeMount(async() => {
console.log('onBeforeMount');
})
onMounted(async() => {
showLoading();
// maxVal.value = getHuangjinMaxVal();
mdMap.value = [];
......@@ -1372,23 +1726,25 @@
const {data} = await fetchIntegralJSON();
integralData.value = {...data};
swiperData.value = integralData.value.swiper;
vipLvIcons.value = integralData.value.viplv.imgs;
vipLvIconBgs.value = integralData.value.viplv.imgBgs;
vipLvNameImgs.value = integralData.value.viplv.vipNameImgs;
vipIntegral.value = integralData.value.vipIntegral;
clickMore.value = integralData.value.clickMore;
vipActive.value = integralData.value.vipActive;
tabInfo.value = integralData.value.goodsListData.tabInfo;
listCommon.value = integralData.value.goodsListData.listCommon;
goodsData.value = integralData.value.goodsListData.goodsData;
productIdUrl.value = integralData.value.goodsListData.productIdUrl;
vipRule.value = integralData.value.qunyiInfo.vipRule;
imgInfos.value = integralData.value.qunyiInfo.imgInfos;
vipQuanyiUrl.value = integralData.value.qunyiInfo.vipQuanyiUrl;
swiperData.value = integralData.value?.swiper;
vipLvIcons.value = integralData.value?.viplv?.imgs;
vipLvIconBgs.value = integralData.value?.viplv?.imgBgs;
vipLvNameImgs.value = integralData.value?.viplv?.vipNameImgs;
vipIntegral.value = integralData.value?.vipIntegral;
clickMore.value = integralData.value?.clickMore;
vipActive.value = integralData.value?.vipActive;
tabInfo.value = integralData.value?.goodsListData?.tabInfo;
listCommon.value = integralData.value?.goodsListData?.listCommon;
goodsData.value = integralData.value?.goodsListData?.goodsData;
productIdUrl.value = integralData.value?.goodsListData?.productIdUrl;
vipRule.value = integralData.value?.qunyiInfo?.vipRule;
imgInfos.value = integralData.value?.qunyiInfo?.imgInfos;
vipQuanyiUrl.value = integralData.value?.qunyiInfo?.vipQuanyiUrl;
// vipQuanyiData.value = [];////??????
vipQuanyiData.value = integralData.value.qunyiInfo.vipLvsQuanyi;
tupianBanben.value = integralData.value.tupianBanben;
vipQuanyiData.value = integralData.value?.qunyiInfo?.vipLvsQuanyi;
tupianBanben.value = integralData.value?.tupianBanben;
quanyiBgs.value = integralData.value?.qunyiInfo?.quanyiBgs;
quanyitiaozhuanInfo.value = integralData.value?.quanyitiaozhuanInfo;
quanyiListIcon.value = [];
imgInfos.value.forEach((element,index) => {
......@@ -1401,19 +1757,72 @@
initNetData();
if(islogin.value){
itemIndex.value = vipLevel.value;
}else{
itemIndex.value = 0;
}
hideLoading();
});
const initNetData = () => {
console.log('initNetData');
memberInfo.value = userStore.memberInfo;
// memberInfo.value = {"grade": null, "gradeList": null, "gradeName": null, "maxGrade": false, "memberId": "not_login", "memberName": null, "mobile": null, "nextGradeScoreRuleMin": null, "orderUpgrade": null, "points": null, "recentAnnualPointsTotal": null, "willExpiredPoints": null} ;
// memberInfo.value = {
// "grade": "4",
// "gradeList": [
// {
// "grade": "0",
// "gradeName": "V1黄金会员",
// "gradeScoreRuleMax": 1,
// "gradeScoreRuleMin": -2147483648
// },
// {
// "grade": "1",
// "gradeName": "V2铂金会员",
// "gradeScoreRuleMax": 1000,
// "gradeScoreRuleMin": 1
// },
// {
// "grade": "2",
// "gradeName": "V3钻石会员",
// "gradeScoreRuleMax": 5000,
// "gradeScoreRuleMin": 1000
// },
// {
// "grade": "3",
// "gradeName": "V4星光会员",
// "gradeScoreRuleMax": 10000,
// "gradeScoreRuleMin": 5000
// },
// {
// "grade": "4",
// "gradeName": "V5星耀会员",
// "gradeScoreRuleMax": 2147483647,
// "gradeScoreRuleMin": 10000
// }
// ],
// "gradeName": "V4星光会员",
// "maxGrade": false,
// "memberId": "CRM000000000948094264",
// "memberName": "文慧17637145052",
// "mobile": "17637145052",
// "nextGradeScoreRuleMin": 10000,
// "orderUpgrade": true,
// "points": 999,
// "recentAnnualPointsTotal": 5500,
// "willExpiredPoints": 100000
// };
recentAnnualPointsTotal.value = memberInfo.value.recentAnnualPointsTotal;
willExpiredPoints.value = memberInfo.value.willExpiredPoints;
nextGradeScoreRuleMin.value = memberInfo.value.nextGradeScoreRuleMin;
vipLevel.value = memberInfo.value.grade;
points.value = memberInfo.value.points;
gradeList.value = memberInfo.value.gradeList;
if(memberInfo.value.memberId == "not_login"){
islogin.value = false;
......@@ -1423,21 +1832,21 @@
if(islogin.value){
nickName.value = memberInfo.value.memberName;
// 清空之前的数据
vipLvDatas.value = [];//??????????
// vipLvDatas.value = [];//??????????
// vipLvDatas.value = integralData.value.vipLvInfo;
memberInfo.value?.gradeList.forEach((element, index) => {
vipLvDatas.value.push({
"vipName" : element.gradeName,
});
// memberInfo.value?.gradeList.forEach((element, index) => {
// vipLvDatas.value.push({
// "vipName" : element.gradeName,
// });
vipLvDatas.value[index].vipIcon = vipLvIcons.value[index];
vipLvDatas.value[index].vipIconBg = vipLvIconBgs.value[index];
vipLvDatas.value[index].vipNameImg = vipLvNameImgs.value[index];
vipLvDatas.value[index].nickNameColor = nickNameColors.value[index];
vipLvDatas.value[index].dangqianColor = dangqianColors.value[index];
});
// vipLvDatas.value[index].vipIcon = vipLvIcons.value[index];
// vipLvDatas.value[index].vipIconBg = vipLvIconBgs.value[index];
// vipLvDatas.value[index].vipNameImg = vipLvNameImgs.value[index];
// vipLvDatas.value[index].nickNameColor = nickNameColors.value[index];
// vipLvDatas.value[index].dangqianColor = dangqianColors.value[index];
// });
}else{
nickName.value = '未登录';
......@@ -1496,13 +1905,24 @@
buttonName: "攻略",
});
gotoGonglue();
// const url = vipIntegral.value.gonglue.url;
// const type = vipIntegral.value.gonglue.type;
// jump({
// type: type,
// url: url
// })
console.log('gonglueHandler')
}
const gotoGonglue = async () => {
console.log('gotoGonglue1111111111');
const url = vipIntegral.value.gonglue.url;
const type = vipIntegral.value.gonglue.type;
jump({
type: type,
url: url
})
console.log('gonglueHandler')
}
//积分详情点击事件---积分进度条容器
......@@ -1706,7 +2126,16 @@
}
//会员权益点击跳转
const handlePrivilegeClick = (item) => {
const handlePrivilegeClick = (item, index) => {
selectIdx.value = index;
if(!isshowShouqi.value){
isshowShouqi.value = true;
}
if(!isshowQuanyiDetail.value){
isshowQuanyiDetail.value = true;
}
md.sensorLogTake({
xcxClick: "积分服务页-首屏页面点击",
......@@ -1714,15 +2143,17 @@
buttonName: `${item.name}`,
});
const url = vipQuanyiUrl.value.url;
const type = vipQuanyiUrl.value.type;
const extra = vipQuanyiUrl.value.extra;
console.log('selectIdx.value=', selectIdx.value);
jump({
type: type,
url: url,
extra:extra
})
// const url = vipQuanyiUrl.value.url;
// const type = vipQuanyiUrl.value.type;
// const extra = vipQuanyiUrl.value.extra;
// jump({
// type: type,
// url: url,
// extra:extra
// })
}
......@@ -1776,6 +2207,151 @@
console.log("注册取消");
};
// 优惠券点击事件处理
const handleCouponClick = (data) => {
console.log('优惠券点击:', data.index, data.couponIndex);
// 这里可以添加优惠券点击的具体逻辑
// 比如跳转到对应的商品页面或显示优惠券详情
};
// 去星妈优选按钮点击事件处理
const handleGoToShop = (data) => {
console.log('去星妈优选:', data.index);
// 这里可以添加跳转到星妈优选的逻辑
// 比如跳转到商城页面或相关活动页面
};
const handleGoToShop_mainfeiwenzhen = async (data) => {
console.log('免费问诊:', data.index);
const res = await getHealthField();
if (!res.success) {
uni.showToast({
title: "获取健康字段失败",
icon: "none",
});
return;
}
const { sign, timestamp, appId, partnerUserId, env } = res.data;
jump({
type: JumpType.MINI,
url: "/pages/partner/redirect",
extra: {
appId: "wx81ecfb5aa3fb512f",
envVersion: env,
extraData: {
sign, // 参考 4.请求参数
timestamp, // 参考 4.请求参数
appId, // 参考 4.请求参数
partnerUserId, // 参考 4.请求参数
targetApp:
"/h5/partner/shining-like-a-start/landing-free-consult?sysType=CRF",
},
},
});
};
const handleGoToShop_aibenxinrenli = (data) => {
if(Number(data.index) === 0){
gotoGonglue();
}
};
const handleGoToShop_zhuanduanli = (data) => {
console.log('转段礼', data.index);
if(Number(data.index) === 0){
gotoGonglue();
}
};
const handleGoToShop_jinjili = (data) => {
console.log('晋级礼', data.index);
if(Number(data.index) === 0 || Number(data.index) === 1){
gotoGonglue();
}
};
// 页面跳转-添加宝宝
const navigateTo = (url) => {
uni.navigateTo({
url,
animationDuration: 0,
fail: (err) => {
console.error("页面跳转失败:", err);
uni.showToast({
title: "页面跳转失败",
icon: "none",
});
},
});
};
const handleGoToShop_shengrili = async (data) => {
console.log('生日礼', data.index);
// debugger;
const userStore = data.userStore;
if(!(userStore.babyInfo?.allBabyBaseInfo && userStore.babyInfo?.allBabyBaseInfo.length > 0) && islogin.value){
//没有宝宝，跳转到添加宝宝页面
if(itemIndex.value < 2){
gotoGonglue();
}else{
showShengriliTipPanel.value = true;
}
return;
}else{
if(userStore.babyInfo?.allBabyBaseInfo?.some(baby => baby.babyStage == 2)){
}else{
if(itemIndex.value < 2){
gotoGonglue();
}else{
showShengriliTipPanel.value = true;
}
return;
}
}
switch(data.index){
case 4000:
if(memberInfo.value?.grade < 2){
gotoGonglue();
}
break;
case 3000:
//去领取
const data = await fetchBatchReceiveJSON();
console.log('data22222==', data);
// const data = {"code":"000000","data":{"babyInfo":[{"babyBirthday":"2025-08-01","babyName":"男宝","babyNum":1}],"clientOpenId":"string","equityCode":"string","grade":"2","memberId":"CRM000000000948094264","status":3000,"statusName":"string","subStatus":0,"subStatusName":"string","traceId":"string"},"message":"success","ok":true,"success":true}
if(data.success){
showPopupShengri.value = true;
}
break;
case 2000:
//去升级
gotoGonglue();
break;
case 1000:
jump(quanyitiaozhuanInfo?.value?.shengrili?.qushiyong);
//去使用
break;
default:
//去领取
break;
}
};
const handleGoToShop_suyuanyou = (data) => {
if(data.index < 3){
gotoGonglue();
}else{
jump(quanyitiaozhuanInfo?.value?.suyuanyou?.qubaoming);
}
};
const handleVipClick = () => {
......@@ -1863,94 +2439,247 @@
// }
}
.banner-swiper-space{
width: 100%;
height: 160rpx;
flex-shrink: 0;
}
.vip-swiper {
width: 686rpx;
height: 154rpx;
width: 687rpx;
height: 280rpx;
// margin-top: 15rpx;
margin-left:auto;
margin-right: auto;
.vip-area {
width: 686rpx;
height: 154rpx;
// margin-left: 32rpx;
// margin-right: 32rpx;
// background: url('@{baseUrl}integral/1008/vipDetailBg.png') no-repeat center/cover;
flex-direction: row;
position: relative;
display: flex;
top: 0rpx;
width: 692rpx;
height: 280rpx;
position: absolute;
.vip-area-container{
width: 692rpx;
height: 280rpx;
position: absolute;
.vip-bg{
top: 24rpx;
width: 692rpx;
height: 256rpx;
position: absolute;
left:50%;
transform: translateX(-50%);
}
.vip-icon {
width: 97rpx;
height: 92rpx;
margin-left: 30rpx;
margin-top: 32rpx;
width: 254rpx;
height: 268rpx;
position: absolute;
right: 20rpx;
}
.current-tag {
top: 30rpx;
left: 0rpx;
width: 121rpx;
height: 40rpx;
position: absolute;
}
.vip-info {
// 积分进度条样式
.jifen-progressbar {
position: absolute;
top: 207rpx;
width: 320rpx;
left: 40rpx;
.jifen-header {
display: flex;
flex-direction: column;
position: relative;
height: 100%;
justify-content: center;
margin-left: 15rpx;
align-items: center;
.vip-name {
font-size: 25rpx;
margin-bottom: 8rpx;
.jifen-label {
font-size: 21rpx;
color: #1d1e25;
font-weight: 500;
margin-right: 10rpx;
}
.title-container{
width: 100%;
.jifen-value {
font-size: 21rpx;
font-weight: 500;
display: flex;
.vip-title1 {
// margin-right: -15rpx;
font-size: 31rpx;
font-weight: bold;
align-items: center;
.current-points {
color: #1d1e25;
}
.vip-title{
margin-top: 6rpx;
width: 174rpx;
height: 31rpx;
.separator {
color: #b27c1e;
margin: 0 5rpx;
}
.phone-button{
top:82rpx;
.total-points {
color: #b27c1e;
opacity: 0.7;
}
}
}
.progress-bar-container {
position: relative;
width: 100%;
height: 8rpx;
overflow: hidden;
margin-top: 10rpx;
.progress-bar-bg {
position: absolute;
width:285rpx;
height: 36rpx;
opacity: 0;
top: 0;
left: 0;
width: 315rpx;
height: 8rpx;
z-index: 1;
}
.rule-icon{
margin-top: 14rpx;
margin-left: 10rpx;
width: 11rpx;
height: 19rpx;
.progress-bar-mask {
position: absolute;
top: 0;
left: 0;
width: 315rpx;
height: 8rpx;
overflow: hidden;
border-radius: 4rpx;
z-index: 2;
}
.current-tag {
width: 60rpx;
height: 37rpx;
margin-left: 10rpx;
margin-top: 5rpx;
// background: url('@{baseUrl}integral/1008/tabNowBg.png') no-repeat center/contain;
.progress-bar-fill {
position: absolute;
top: 0;
left: 0;
width: 315rpx;
height: 8rpx;
// transition: transform 0.3s ease;
}
}
}
.current-xingyaodengji-tips{
position: absolute;
top:209rpx;
left: 40rpx;
font-size: 18rpx;
}
.saoma-tips{
position: absolute;
top:209rpx;
left: 40rpx;
font-size: 18rpx;
display: flex;
align-items: center;
justify-content: center;
.tag-text {
font-size: 22rpx;
line-height: 37px;
color: #b27c1e;
flex-direction: column;
.saoma-tips-text{
font-size: 18rpx;
.saoma-tips-text-lv{
font-size: 18rpx;
}
}
.saoma-tips-text-tips{
font-size: 18rpx;
.saoma-tips-text-tips-num{
font-size: 18rpx;
}
.saoma-tips-text-tips-maxnum{
font-size: 18rpx;
}
}
}
.phone-button{
width: 692rpx;
height:256rpx;
top: 0rpx;
opacity: 0;
background: #6f6d67;
}
}
.chakanshengjigonglueTxt {
font-size: 24rpx;
position: absolute;
left: 40rpx;
top: 161rpx;
}
// .vip-info {
// display: flex;
// flex-direction: column;
// position: relative;
// height: 100%;
// justify-content: center;
// margin-left: 15rpx;
// .vip-name {
// font-size: 25rpx;
// margin-bottom: 8rpx;
// }
// .title-container{
// width: 100%;
// display: flex;
// .vip-title1 {
// // margin-right: -15rpx;
// font-size: 31rpx;
// font-weight: bold;
// color: #1d1e25;
// }
// .vip-title{
// margin-top: 6rpx;
// width: 174rpx;
// height: 31rpx;
// }
// .phone-button{
// top:82rpx;
// position: absolute;
// width:285rpx;
// height: 36rpx;
// opacity: 0;
// }
// .rule-icon{
// margin-top: 14rpx;
// margin-left: 10rpx;
// width: 11rpx;
// height: 19rpx;
// }
// }
// }
}
}
.vipCardArrowRight{
width: 15rpx;
height: 18rpx;
position: absolute;
margin-top: 310rpx;
right: 12rpx;
}
.vipCardArrowLeft{
width: 15rpx;
height: 18rpx;
position: absolute;
margin-top: 310rpx;
left: 13rpx;
}
.integral-detail {
height: 144rpx;
width: 100%;
......@@ -2101,40 +2830,44 @@
.privilege-container {
// padding: 48rpx 0rpx;
width: 686rpx;
margin-bottom: 20rpx;
.privilege-header {
display: flex;
justify-content: space-between;
align-items: center;
// justify-content: space-between;
align-items: left;
flex-direction: column;
// margin-bottom: 40rpx;
padding: 48rpx 16rpx;
padding: 30rpx 16rpx;
.title-text {
.quanyi-title{
font-size: 32rpx;
color: #1d1e25;
font-weight: bold;
}
.title-text {
font-size: 24rpx;
.highlight {
color: #d3a358;
}
}
.rule-container {
display: flex;
align-items: center;
// .rule-container {
// display: flex;
// align-items: center;
.rule-text {
font-size: 24rpx;
color: #1d1e25;
margin-right: 8rpx;
}
// .rule-text {
// font-size: 24rpx;
// color: #1d1e25;
// margin-right: 8rpx;
// }
.rule-icon {
margin-right: 10rpx;
width: 11rpx;
height: 19rpx;
}
}
// .rule-icon {
// margin-right: 10rpx;
// width: 11rpx;
// height: 19rpx;
// }
// }
}
.privilege-grid {
......@@ -2144,7 +2877,8 @@
padding-left: 16rpx;
.privilege-item {
position: relative;
width: 102rpx;
height: 140rpx;
// &:nth-child(1) { width: 68rpx; height: 87rpx; } // 月月礼
// &:nth-child(2) { width: 70rpx; height: 91rpx; } // 生日礼
// &:nth-child(3) { width: 94rpx; height: 87rpx; } // 育儿礼
......@@ -2155,31 +2889,84 @@
// &:nth-child(8) { width: 94rpx; height: 87rpx; } // 尝鲜礼
// &:nth-child(9) { width: 70rpx; height: 89rpx; } // 进阶礼
// &:nth-child(10) { width: 71rpx; height: 90rpx; } // 溯源礼
.itemBg{
position: absolute;
top: 0rpx;
left: 0rpx;
}
.privilege-icon {
width: 100%;
height: 100%;
position: absolute;
top: 0rpx;
left: 0rpx;
}
.new-tip {
// .new-tip {
// position: absolute;
// top: -20rpx;
// right: -5rpx;
// width: 40rpx;
// height: 40rpx;
// pointer-events: none;
// }
.quanyi-text{
position: absolute;
top: -20rpx;
right: -5rpx;
width: 40rpx;
height: 40rpx;
pointer-events: none;
font-size: 24rpx;
width: 125rpx;
text-align: center;
left: 50%;
transform: translateX(-50%);
top: 107rpx;
}
.quanyi-text-img{
position: absolute;
width: 35rpx;
height: 35rpx;
bottom: 43rpx;
right: 7rpx;
}
.phone-button-qyIcon{
top:0rpx;
position: absolute;
opacity: 0;
background: #6f6d67;
}
}
}
}
.quanyi-detail-area{
margin-top: 40rpx;
width: 686rpx;
}
.zhankai-quanyi{
width: 686rpx;
height: 60rpx;
margin-top: 20rpx;
// background-color: #6f6d67;
.shouqi-quanyi-img{
position: absolute;
width: 173rpx;
height: 23rpx;
margin-top: 20rpx;
left: 50%;
transform: translateX(-50%);
}
.zhankai-quanyi-img{
position: absolute;
margin-top: 20rpx;
width: 172rpx;
height: 23rpx;
left: 50%;
transform: translateX(-50%);
}
}
.vip-active-area {
width: 686rpx;
height: auto;
......@@ -2187,7 +2974,6 @@
.vip-title{
font-size: 32rpx;
color: #1d1e25;
font-weight: bold;
margin-left: 16rpx;
}
......@@ -2226,27 +3012,46 @@
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// justify-content: center;
&.active {
//https://duiba.oss-cn-hangzhou.aliyuncs.com/fh/integral/1008/tapSelectBg.png
// background-image: url('@{baseUrl}integral/1008/tapSelectBg.png');
background-size: 100% 100%;
// background-size: 100% 100%;
.tab-line1 { color: #1d1e25; }
.tab-line2 { color: #b27c1e; }
// .tab-line2 { color: #b27c1e; }
.select-line{
width: 32rpx;
height: 8rpx;
background-color: #1d1e25;
border-radius: 4rpx;
margin-top: 10rpx;
}
}
&.active1 {
.tab-line1 { color: #fff0df; }
.select-line{
width: 32rpx;
height: 8rpx;
background-color: #fff0df;
border-radius: 4rpx;
margin-top: 10rpx;
}
}
.tab-line1 {
font-size: 28rpx;
font-weight: bold;
color: #6f6d67;
line-height: 40rpx;
margin-top: 35rpx;
}
.tab-line2 {
font-size: 24rpx;
color: #b2b2b0;
line-height: 34rpx;
}
// .tab-line2 {
// font-size: 24rpx;
// color: #b2b2b0;
// line-height: 34rpx;
// margin-top: 25rpx;
// }
}
}
......@@ -2361,6 +3166,8 @@
height: 180rpx;
}
// 测试注册层按钮样式
// .test-register-btn {
// width: 300rpx;
......
views/My.vue
View file @ bae2233b
......@@ -145,6 +145,17 @@
</view>
<RegisterLayer v-model="showRegisterLayer" @confirm="onRegisterConfirm" />
</view>
<!-- 生日弹窗 type 3 钻石、4 星光、5 星耀 -->
<!-- <popup-shengri v-if="isTip" type="3" @close="isTip = false"></popup-shengri> -->
<!-- 精选好卷弹窗 isUnlock // 是否解锁 商品兑换券 type 1 黄金、2 铂金、3 钻石、4 星光、5 星耀 -->
<!-- <popup-jingxuan v-if="isTip" type="1" isUnlock="true" @close="isTip = false"></popup-jingxuan> -->
<!-- 新人礼券弹窗 type 1 黄金、2 铂金、3 钻石、4 星光、5 星耀-->
<!-- <popup-xinren v-if="isTip" type="1" @close="isTip = false"></popup-xinren> -->
</template>
<script setup>
......
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