Skip to content

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

pointsRight

parent cf35a39f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1711 additions and 208 deletions
api/monthGift.js 0 → 100644
View file @ b1ca9ad9
import requestModule from './request.js';
const {
api
} = requestModule;
/**
* 获取月礼包首页数据
* @param {Object} params
* @param {string} params.level - 用户等级 (diamond, starshine, starlight, gold, platinum)
* @returns {Promise<Object>}
data:{
batchCoupon:[
{
equityCouponInfoId:1,//权益优惠券信息ID
couponId:1,//优惠券ID
couponName:1,//优惠券名称
equityIcon:1,//权益图片
gradeAllow:true,//等级是否允许 true允许
startTime:1,//起始时间 2024-10-23 00:00:00
endTime:1,//结束时间 2024-10-23 00:00:00
stockUsage:1,//已使用库存数量
stockLimit:1,//可使用库存总数量
received:true,//是否已领取
stockBatchList:[
{
stockBatchId:1,//批次ID
startTime:1,//生效时间 例如：2024-10-28 23:00:00
status:1,//状态 0-待开始 1-抢券中 2-已结束
}
]
}
],
equityCouponList:[
{
equityCouponInfoId:1,//权益优惠券信息ID
couponId:1,//优惠券ID
couponName:1,//优惠券名称
couponSystem:1,//优惠券系统 : BMP: 业务中台系统, SF : 顺丰 , CRM : CRM系统
equityIcon:1,//权益图片
receiveStatus:1,//优惠券状态 0-未领取 1-已领取
receiveTime:1,//领取时间
}
]
}
*/
export const monthlyGiftIndex = () => api.get('/c/equity/monthlyGift/index')
/**
* 月月礼-领取精选好券
* @param {Object} data
* @param {string} data.stockBatchId - 批次ID
* @param {string} data.equityCouponInfoId - 权益优惠券信息ID
* @returns {Promise<Object>}
* {
* "success": true,
* "message": "领取成功",
* "data": {
* "couponId": "123",
* "couponName": "精选好券",
* "resourceId": "resource_123"
* “receiveResult”：0，//领取结果 0-失败 1-成功 F
* }
* }
*/
export const monthlyGiftDrawOne = (data) => api.post('/c/equity/monthlyGift/drawOne', {
stockBatchId: data.stockBatchId,
equityCouponInfoId: data.equityCouponInfoId
})
/**
* 月月礼-领取限时1分购
* @returns {Promise<Object>}
* {
* "success": true,
* "message": "领取成功",
* "data": {
* "status": 1,
* "receivedNormalCouponList": [
* {
* "couponId": "123",
* "equityCouponInfoId": "456",
* "couponName": "限时1分购券",
* "equityIcon": "icon_url",
* "resourceId": "resource_789"
* }
* ]
* }
* }
*/
export const monthlyGiftDrawAll = (data) => api.post('/c/equity/monthlyGift/drawAll', {
})
api/request.js
View file @ b1ca9ad9
......@@ -16,9 +16,9 @@ const {
// request.js
// 通常可以吧 baseUrl 单独放在一个 js 文件了
// const baseUrl = "http://172.16.224.178:7777/pmall";
// const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境
let baseUrl = "https://momclub.feihe.com/pmall";//生产环境
// const baseUrl = "https://docs.dui88.com/mock/1956/api";//mock
const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境
// let baseUrl = "https://momclub.feihe.com/pmall";//生产环境
// const baseUrl = "https://docs.dui88.com/mock/1956";//mock
// const baseUrl = "https://feihe.m.duibatest.com.cn/pmall"
const request = (options = {}) => {
......
components/pointRightsCom/README.md
View file @ b1ca9ad9
This diff is collapsed.
components/pointRightsCom/babyClass.vue
View file @ b1ca9ad9
<template>
<view class="babyclass ">
<view class="diamond">
<view class="babyclass">
<!-- 根据用户等级动态显示对应等级页面 -->
<view v-if="currentLevel === 'diamond'" class="diamond">
<image class="diamondbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.BG}`" mode="aspectFit"></image>
<image class="diamondtitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.TITLE}`" mode="aspectFit"></image>
<view class="diamondips">
......@@ -13,11 +14,11 @@
<image class="diamondips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.IPS4}`" mode="aspectFit">
</image>
</view>
<image class="diamondbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.BTN}`" mode="aspectFit"></image>
<image class="diamondbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.BTN}`" mode="aspectFit" @click="jump('diamond')"></image>
<image class="diamonddesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.DESC}`" mode="aspectFit"></image>
</view>
<view class="starshine">
<view v-if="currentLevel === 'starshine'" class="starshine">
<image class="starshinebg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.BG}`" mode="aspectFit"></image>
<image class="starshinetitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.TITLE}`" mode="aspectFit">
</image>
......@@ -31,12 +32,12 @@
<image class="starshineips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.IPS4}`" mode="aspectFit">
</image>
</view>
<image class="starshinebtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.BTN}`" mode="aspectFit"></image>
<image class="starshinebtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.BTN}`" mode="aspectFit" @click="jump('starshine')"></image>
<image class="starshinedesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.DESC}`" mode="aspectFit">
</image>
</view>
<view class="starlight">
<view v-if="currentLevel === 'starlight'" class="starlight">
<image class="starlightbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.BG}`" mode="aspectFit"></image>
<image class="starlighttitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.TITLE}`" mode="aspectFit">
</image>
......@@ -50,12 +51,12 @@
<image class="starlightips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.IPS4}`" mode="aspectFit">
</image>
</view>
<image class="starlightbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.BTN}`" mode="aspectFit"></image>
<image class="starlightbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.BTN}`" mode="aspectFit" @click="jump('starlight')"></image>
<image class="starlightdesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.DESC}`" mode="aspectFit">
</image>
</view>
<view class="gold">
<view v-if="currentLevel === 'gold'" class="gold">
<image class="goldipsbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.BG}`" mode="aspectFit"></image>
<image class="goldipstitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.TITLE}`" mode="aspectFit"></image>
<view class="goldips">
......@@ -64,11 +65,11 @@
<image class="goldips3" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.IPS3}`" mode="aspectFit"></image>
<image class="goldips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.IPS4}`" mode="aspectFit"></image>
</view>
<image class="goldbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.BTN}`" mode="aspectFit"></image>
<image class="goldbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.BTN}`" mode="aspectFit" @click="jump('gold')"></image>
<image class="golddesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.DESC}`" mode="aspectFit"></image>
</view>
<view class="platinum">
<view v-if="currentLevel === 'platinum'" class="platinum">
<image class="platinumbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.BG}`" mode="aspectFit"></image>
<image class="platinumtitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.TITLE}`" mode="aspectFit">
</image>
......@@ -82,9 +83,10 @@
<image class="platinumips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.IPS4}`" mode="aspectFit">
</image>
</view>
<image class="platinumbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.BTN}`" mode="aspectFit"></image>
<image class="platinumbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.BTN}`" mode="aspectFit" @click="jump('platinum')"></image>
<image class="platinumdesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.DESC}`" mode="aspectFit"></image>
</view>
</view>
</template>
......@@ -95,6 +97,29 @@ import { BABY_CLASS_IMAGES } from './babyClassImages.js'
// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
// 接收用户等级参数
const props = defineProps({
currentLevel: {
type: String,
required: true,
validator: (value) => ['gold', 'platinum', 'diamond', 'starlight', 'starshine'].includes(value),
},
})
// 跳转方法
const jump = (level) => {
console.log(`跳转到 ${level} 等级页面`)
// 跳转到 H5 页面，地址暂时默认 https://www.baidu.com
// 可以根据不同等级跳转到不同的地址
const url = 'https://www.baidu.com'
// 使用 uni.navigateTo 跳转到 webview 页面
uni.navigateTo({
url: `/pages/webview/webview?url=${encodeURIComponent(url)}&title=${level}等级页面`
})
}
</script>
<style lang="less" scoped>
......@@ -177,6 +202,12 @@ const $baseUrl = proxy.$baseUrl
left: 97rpx;
top: 493rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.diamonddesc {
......@@ -258,6 +289,12 @@ const $baseUrl = proxy.$baseUrl
left: 97rpx;
top: 493rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.starshinedesc {
......@@ -339,6 +376,12 @@ const $baseUrl = proxy.$baseUrl
left: 97rpx;
top: 493rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.starlightdesc {
......@@ -420,6 +463,12 @@ const $baseUrl = proxy.$baseUrl
left: 97rpx;
top: 493rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.golddesc {
......@@ -501,6 +550,12 @@ const $baseUrl = proxy.$baseUrl
left: 97rpx;
top: 493rpx;
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.platinumdesc {
......@@ -511,5 +566,18 @@ const $baseUrl = proxy.$baseUrl
position: absolute;
}
}
.default-text {
width: 635rpx;
height: 713rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
color: #999;
}
}
</style>
components/pointRightsCom/monthGift.vue
View file @ b1ca9ad9
This diff is collapsed.
components/pointRightsCom/yearGift.vue
View file @ b1ca9ad9
This diff is collapsed.
pages/testPage/testPage.vue
View file @ b1ca9ad9
<template>
<view class="test-page">
<view class="page-title">测试页面 - MonthGift 组件</view>
<!-- 测试控制面板 -->
<view class="test-controls">
<view class="control-section">
<text class="control-title">组件切换</text>
<view class="component-buttons">
<button
v-for="component in components"
:key="component.value"
class="component-btn"
:class="{ active: currentComponent === component.value }"
@click="switchComponent(component.value)"
>
{{ component.label }}
</button>
</view>
</view>
<view class="control-section">
<text class="control-title">用户等级设置</text>
<view class="level-buttons">
<button
v-for="level in userLevels"
:key="level.value"
class="level-btn"
:class="{ active: currentUserLevel === level.value }"
@click="setUserLevel(level.value)"
>
{{ level.label }}
</button>
</view>
</view>
</view>
<view class="component-container">
<MonthGift />
<!-- MonthGift 组件 -->
<MonthGift
v-if="currentComponent === 'monthGift'"
:current-level="currentUserLevel"
ref="monthGiftRef"
/>
<!-- YearGift 组件 -->
<YearGift
v-if="currentComponent === 'yearGift'"
:current-level="currentUserLevel"
ref="yearGiftRef"
/>
<!-- BabyClass 组件 -->
<BabyClass
v-if="currentComponent === 'babyClass'"
:current-level="currentUserLevel"
ref="babyClassRef"
/>
</view>
<view class="page-info">
<p class="info-title">组件信息</p>
<p>当前展示：月礼包权益组件 (MonthGift)</p>
<p>包含五个等级：Diamond、Starshine、Starlight、Gold、Platinum</p>
<p>每个等级包含：好券区域、购买区域、时间状态等</p>
<p>当前展示：{{ getCurrentComponentInfo().title }}</p>
<p>{{ getCurrentComponentInfo().description }}</p>
<p>包含五个等级：黄金、铂金、钻石、星光、星耀（从低到高）</p>
<p class="usage-info">使用方法：通过控制面板切换组件和用户等级，组件会根据等级动态显示对应页面</p>
<p class="note">注意：由于图片资源未配置，部分图片可能无法显示</p>
</view>
</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import BabyClass from '../../components/pointRightsCom/babyClass.vue';
import YearGift from '../../components/pointRightsCom/yearGift.vue';
import MonthGift from '../../components/pointRightsCom/monthGift.vue';
// import xinrenliPopup from '../../components/quanyi/xinrenliPopup.vue'
// 用户等级选项
const userLevels = [
{ label: '黄金', value: 'gold' },
{ label: '铂金', value: 'platinum' },
{ label: '钻石', value: 'diamond' },
{ label: '星光', value: 'starlight' },
{ label: '星耀', value: 'starshine' }
]
const currentUserLevel = ref('diamond')
const monthGiftRef = ref(null)
// 组件切换选项
const components = [
{ label: '月礼包', value: 'monthGift' },
{ label: '年礼包', value: 'yearGift' },
{ label: '宝宝权益', value: 'babyClass' }
]
const currentComponent = ref('monthGift')
// 切换组件
const switchComponent = (componentValue) => {
currentComponent.value = componentValue
console.log('切换组件到:', componentValue)
}
// 设置用户等级
const setUserLevel = (level) => {
currentUserLevel.value = level
console.log('用户等级设置为:', level)
// 这里应该通过props或事件传递给MonthGift组件
// 暂时通过console输出，实际项目中需要通过组件通信
}
// 获取当前组件的标题和描述
const getCurrentComponentInfo = () => {
switch (currentComponent.value) {
case 'monthGift':
return {
title: '月礼包权益组件',
description: '包含好券区域、购买区域、时间状态等'
}
case 'yearGift':
return {
title: '年礼包权益组件',
description: '包含好券区域、购买区域、时间状态等'
}
case 'babyClass':
return {
title: '宝宝权益组件',
description: '包含好券区域、购买区域、时间状态等'
}
default:
return {
title: '未知组件',
description: '请切换到具体组件查看'
}
}
}
</script>
<style lang="less" scoped>
......@@ -29,7 +150,7 @@ import MonthGift from '../../components/pointRightsCom/monthGift.vue';
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
// padding: 20rpx;
box-sizing: border-box;
.page-title {
......@@ -40,15 +161,109 @@ import MonthGift from '../../components/pointRightsCom/monthGift.vue';
text-align: center;
}
.test-controls {
width: 100%;
max-width: 700rpx;
background-color: #fff;
padding: 30rpx;
border-radius: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
margin-bottom: 30rpx;
.control-section {
margin-bottom: 30rpx;
&:last-child {
margin-bottom: 0;
}
.control-title {
display: block;
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.component-buttons, .level-buttons, .time-buttons {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
.component-btn, .level-btn, .time-btn {
padding: 20rpx 30rpx;
border: 2rpx solid #e0e0e0;
border-radius: 25rpx;
background-color: #fff;
color: #666;
font-size: 26rpx;
transition: all 0.3s ease;
&.active {
border-color: #FF6B6B;
background-color: #FF6B6B;
color: #fff;
}
&:active {
transform: scale(0.95);
}
}
.component-btn {
&.active {
border-color: #4ECDC4;
background-color: #4ECDC4;
color: #fff;
}
}
}
.reset-btn {
width: 100%;
padding: 25rpx;
border: 2rpx solid #FF6B6B;
border-radius: 25rpx;
background-color: #fff;
color: #FF6B6B;
font-size: 28rpx;
font-weight: bold;
transition: all 0.3s ease;
&:active {
background-color: #FF6B6B;
color: #fff;
transform: scale(0.98);
}
}
}
}
.component-container {
width: 750rpx;
height: 1624rpx;
height: 1384rpx;
position: relative;
margin-bottom: 30rpx;
background-color: #fff;
// background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
// overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
// 添加组件切换动画
.component-fade-in {
animation: fadeIn 0.3s ease-in-out;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.page-info {
......@@ -75,6 +290,16 @@ import MonthGift from '../../components/pointRightsCom/monthGift.vue';
text-align: center;
}
.usage-info {
color: #555;
font-style: italic;
margin-top: 10rpx;
padding: 10rpx;
background-color: #f0f0f0;
border-radius: 8rpx;
border-left: 4rpx solid #666;
}
.note {
color: #ff6b6b;
font-weight: 500;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment