Skip to content

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

生日礼溯源游

parent e8e1990e
Hide whitespace changes
Inline Side-by-side
Showing with 350 additions and 0 deletions
.DS_Store
View file @ e7735626
No preview for this file type
components/quanyi/shengrili.vue 0 → 100644
View file @ e7735626
<template>
<view class="shengri-component" :style="{
background: `url(${$baseUrl}integral/1314/shengriliBg${props.index}.png) no-repeat center/contain`,
}">
<!-- 标题区域 -->
<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/1314/shengriliJifenIcon${props.index}.png) no-repeat center/contain` }" @click="handlePointsClick">
<!-- <image
class="reward-icon"
:src="`${$baseUrl}integral/1314/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/1314/shengriliQuanIcon${props.index}.png`"
mode="aspectFit"
/>
</view>
</view>
<!-- 底部按钮 -->
<image
class="bottom-button"
:src="`${$baseUrl}integral/1314/shengriliQushengjiBtn${props.index}.png`"
mode="aspectFit"
@click="handleUpgrade"
/>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
// 定义组件名称
defineOptions({
name: 'shengri-li'
})
// 定义组件属性
const props = defineProps({
index: {
type: Number,
default: 0
}
})
// 定义组件事件
const emit = defineEmits(['points-click', 'coupon-click', 'upgrade'])
// 积分卡片点击事件
const handlePointsClick = () => {
emit('points-click', {
index: props.index
})
}
// 优惠券卡片点击事件
const handleCouponClick = () => {
emit('coupon-click', {
index: props.index
})
}
// 去升级按钮点击
const handleUpgrade = () => {
emit('upgrade', {
index: props.index
})
}
// 颜色配置
const getColor = () => {
const colors = [
{
"titleColor": "#503404"
},
{
"titleColor": "#284a6c"
},
{
"titleColor": "#322d6f"
},
{
"titleColor": "#503404"
},
{
"titleColor": "#fff0df"
}
]
return colors;
}
</script>
<style lang="less" scoped>
.shengri-component {
position: relative;
width: 686rpx;
height: 460rpx;
display: flex;
flex-direction: column;
.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;
}
}
</style>
components/quanyi/suyuanyou.vue 0 → 100644
View file @ e7735626
<template>
<view class="suyuanyou-component" :style="{
background: `url(${$baseUrl}integral/1314/suyuanliBg${props.index}.png) no-repeat center/contain`,
}">
<!-- 标题区域 -->
<view class="title-section">
<text class="main-title" :style="{ color: getColor()[props.index].titleColor }">溯源游</text>
</view>
<!-- 去升级按钮 -->
<image v-if="isStart()"
class="bottom-button"
:src="`${$baseUrl}integral/1314/qushengjiBtn${props.index}.png`"
mode="aspectFit"
@click="handleUpgrade"
/>
<!-- 待开启按钮 -->
<image v-else
class="bottom-button"
:src="`${$baseUrl}integral/1314/daikaiqiDisBtn${props.index}.png`"
mode="aspectFit"
/>
<!-- 底部说明文字 -->
<view class="description">
<text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
报名填写信息抽取溯源游资格，中签者可享受飞鹤牧场溯源游2日游(含跟团游玩+住宿，路费报销1000元)
</text>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
// 定义组件名称
defineOptions({
name: 'suyuanyou'
})
// 定义组件属性
const props = defineProps({
index: {
type: Number,
default: 0
},
startDate: {
type: String,
default: ''
}
})
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;
}
</script>
<style lang="less" scoped>
.suyuanyou-component {
position: relative;
width: 686rpx;
height: 569rpx;
display: flex;
flex-direction: column;
.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: 240rpx;
}
.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>
views/Integral.vue
View file @ e7735626
......@@ -352,6 +352,17 @@
v-if="Number(selectIdx) === 8"
@upgrade="handleGoToShop_jinjili"
/>
<shengrili
:index="itemIndex"
v-if="Number(selectIdx) === 7"
@upgrade="handleGoToShop_shengrili"
/>
<suyuanyou
:index="itemIndex"
startDate="2025-08-17"
v-if="Number(selectIdx) === 9"
@upgrade="handleGoToShop_suyuanyou"
/>
<!-- <xinrenliPopup
:index="itemIndex"
......@@ -563,6 +574,8 @@
import zhuanduanli from '../components/quanyi/zhuanduanli.vue';
import BabyClass from '../components/pointRightsCom/babyClass.vue';
import jinjili from '../components/quanyi/jinjili.vue';
import shengrili from '../components/quanyi/shengrili.vue';
import suyuanyou from '../components/quanyi/suyuanyou.vue';
// 进度条图片加载错误处理
const onProgressBarError = (e) => {
......@@ -2090,6 +2103,14 @@
console.log('晋级礼', data.index);
};
const handleGoToShop_shengrili = (data) => {
console.log('生日礼', data.index);
};
const handleGoToShop_suyuanyou = (data) => {
console.log('溯源游', data.index);
};
const handleVipClick = () => {
if(!islogin.value){
......
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