Skip to content

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

积分页修改

parent 91b4b94e
Hide whitespace changes
Inline Side-by-side
Showing with 870 additions and 3 deletions
components/pointRightsCom/babyClass.vue
View file @ aae0bb15
......@@ -105,7 +105,7 @@ const $baseUrl = proxy.$baseUrl
top: 0rpx;
right: 0rpx;
margin: auto;
position: absolute;
position: relative;
.diamond {
width: 635rpx;
......
components/quanyi/aibenxinrenli.vue 0 → 100644
View file @ aae0bb15
<template>
<view class="aiben-component" :style="{
background: `url(/static/integral/1013/aibenxinrenliBg${props.index}.png) no-repeat center/contain`,
}">
<!-- 标题区域 -->
<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' : '187rpx' }">200积分</text>
<!-- 底部按钮 -->
<image
:v-if="Number(props.index) === 0"
class="bottom-button"
:src="`/static/integral/1013/aibenxinrenliQushengjiBtn${props.index}.png`"
mode="aspectFit"
@click="handleUpgrade"
/>
<!-- 说明文字 -->
<view class="description" :style="{ marginTop: Number(props.index) === 0 ? '35rpx' : '-65rpx' }">
<text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
有过婴配粉扫码积分记录的会员，⾸次完成爱本成⼈奶粉的扫码积分时
</text>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
// 定义组件名称
defineOptions({
name: 'aiben-xinrenli'
})
// 定义组件属性
const props = defineProps({
index: {
type: Number,
default: 0
}
})
// 定义组件事件
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;
.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;
}
.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 @ aae0bb15
<template>
<view class="jinjili-component" :style="{
background: `url(/static/integral/1013/jinjiliBg${props.index}.png) no-repeat center/contain`,
}">
<!-- 标题区域 -->
<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' : '187rpx' }">200积分</text>
<!-- 底部按钮 -->
<image
:v-if="Number(props.index) === 0 || Number(props.index) === 1"
class="bottom-button"
:src="`/static/integral/1013/jinjiQushengjiBtn${props.index}.png`"
mode="aspectFit"
@click="handleUpgrade"
/>
<!-- 说明文字 -->
<view class="description" :style="{ marginTop: Number(props.index) === 0 || Number(props.index) === 1 ? '35rpx' : '-65rpx' }">
<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: 'jinjili'
})
// 定义组件属性
const props = defineProps({
index: {
type: Number,
default: 0
}
})
// 定义组件事件
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;
.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;
}
.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 @ aae0bb15
<template>
<view class="mianfei-component" :style="{
background: `url(/static/integral/1013/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="`/static/integral/1013/mianfeiwenzhenQushiyongBtn${props.index}.png`"
mode="aspectFit"
@click="handleUseNow"
/>
<!-- 说明文字 -->
<view class="description">
<text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
{{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/xinrenliPopup.vue → components/quanyi/xinrenliPopup.vue
View file @ aae0bb15
<template>
<view class="xinrenli-component">
<view class="xinrenli-component" :style="{
background: `url(/static/integral/1013/xinrenliBg${props.index}.png) no-repeat center/contain`,
}">
<!-- 标题区域 -->
<view class="title-section">
<text class="main-title">新人礼</text>
<text class="sub-title">200元优惠券包</text>
<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-grid"
>
<!-- 第一行优惠券 -->
<view class="coupon-row">
<view class="coupon-item" @click="handleCouponClick(0)">
<view class="coupon-header">coupon新客周卡</view>
<view class="coupon-amount">20元</view>
<view class="coupon-condition">满49元使用</view>
<image
class="coupon-img"
src="/static/integral/1013/xirenliQuan00.png"
mode="aspectFit"
/>
</view>
<view class="coupon-item" @click="handleCouponClick(1)">
<view class="coupon-header">优选自营</view>
<view class="coupon-amount">20元</view>
<view class="coupon-condition">满49元使用</view>
<image
class="coupon-img"
src="/static/integral/1013/xirenliQuan01.png"
mode="aspectFit"
/>
</view>
<view class="coupon-item" @click="handleCouponClick(2)">
<view class="coupon-header">北纬</view>
<view class="coupon-amount">40元</view>
<view class="coupon-condition">满99元使用</view>
<image
class="coupon-img"
src="/static/integral/1013/xirenliQuan02.png"
mode="aspectFit"
/>
</view>
</view>
<!-- 第二行优惠券 -->
<view class="coupon-row">
<view class="coupon-item" @click="handleCouponClick(3)">
<view class="coupon-header">六水香</view>
<view class="coupon-amount">40元</view>
<view class="coupon-condition">满99元使用</view>
<image
class="coupon-img"
src="/static/integral/1013/xirenliQuan03.png"
mode="aspectFit"
/>
</view>
<view class="coupon-item" @click="handleCouponClick(4)">
<view class="coupon-header">功能营养</view>
<view class="coupon-amount">80元</view>
<view class="coupon-condition">满188元使用</view>
<image
class="coupon-img"
src="/static/integral/1013/xirenliQuan04.png"
mode="aspectFit"
/>
</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="bottom-button" @click="handleGoToShop">
<text class="button-text">去星妈优选</text>
</view>
<image
class="bottom-button"
:src="`/static/integral/1013/xinrenliQuxingmaBtn${props.index}.png`"
mode="aspectFit"
@click="handleGoToShop"
/>
<!-- 说明文字 -->
<view class="description">
<text class="desc-text">
<text class="desc-text" :style="{ color: getColor()[props.index].titleDetail }">
首次访问星妈优选的用户可以领取200元优惠券包，包含(满49-20coupon新客周卡，优选自营49-20，北纬99-40，六水香99-40，功能营养188-80)
</text>
</view>
......@@ -62,6 +78,47 @@
<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: {
......@@ -91,13 +148,18 @@ const handleGoToShop = () => {
<style lang="less" scoped>
.xinrenli-component {
width: 100%;
padding: 32rpx;
box-sizing: border-box;
position: relative;
width: 686rpx;
height: 807rpx;
display: flex;
flex-direction: column;
// align-items: center;
.title-section {
text-align: center;
// text-align: center;
margin-bottom: 40rpx;
margin-top: 40rpx;
margin-left: 28rpx;
.main-title {
display: block;
......@@ -105,110 +167,71 @@ const handleGoToShop = () => {
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: 40rpx;
margin-bottom: 30rpx;
.coupon-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
justify-content: center;
gap: 20rpx;
// &:first-child {
// justify-content: space-between;
// }
// &:last-child {
// margin-bottom: 0;
// justify-content: center;
// gap: 20rpx;
// }
.coupon-item {
width: 160rpx;
height: 120rpx;
background: #e8d4b8;
border: 2rpx solid #d4c4a8;
width: 190rpx;
height: 159rpx;
border-radius: 16rpx;
padding: 16rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
// 添加虚线效果
&::after {
content: '';
position: absolute;
top: 50%;
right: -10rpx;
width: 20rpx;
height: 2rpx;
background: repeating-linear-gradient(
to right,
#d4c4a8 0,
#d4c4a8 4rpx,
transparent 4rpx,
transparent 8rpx
);
}
&:last-child::after {
display: none;
}
.coupon-header {
font-size: 20rpx;
color: #1d1e25;
margin-bottom: 8rpx;
text-align: center;
line-height: 1.2;
}
.coupon-amount {
font-size: 32rpx;
font-weight: bold;
color: #1d1e25;
margin-bottom: 8rpx;
}
.coupon-condition {
font-size: 18rpx;
color: #1d1e25;
text-align: center;
line-height: 1.2;
.coupon-img {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
}
}
}
.bottom-button {
width: 100%;
height: 80rpx;
background: #8b6b4a;
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24rpx;
.button-text {
font-size: 28rpx;
color: #ffffff;
font-weight: 500;
}
position: relative;
width: 442rpx;
height: 86rpx;
margin: 0 auto;
margin-bottom: 30rpx;
}
.description {
.desc-text {
font-size: 20rpx;
color: #1d1e25;
position: absolute;
width: 636rpx;
left:50%;
transform: translateX(-50%);
font-size: 24rpx;
line-height: 1.5;
text-align: center;
letter-spacing: 0.5rpx;
}
}
}
......
components/quanyi/zhuanduanli.vue 0 → 100644
View file @ aae0bb15
<template>
<view class="zhuanduanli-component" :style="{
background: `url(/static/integral/1013/zhuanduanliBg${props.index}.png) no-repeat center/contain`,
}">
<!-- 标题区域 -->
<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' : '187rpx' }">200积分</text>
<!-- 底部按钮 -->
<image
:v-if="Number(props.index) === 0"
class="bottom-button"
:src="`/static/integral/1013/zhuanduanliQushengjiBtn${props.index}.png`"
mode="aspectFit"
@click="handleUpgrade"
/>
<!-- 说明文字 -->
<view class="description" :style="{ marginTop: Number(props.index) === 0 ? '35rpx' : '-65rpx' }">
<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
}
})
// 定义组件事件
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;
height: 569rpx;
display: flex;
flex-direction: column;
// align-items: center;
.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;
}
.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>
pages/testPage/testPage.vue
View file @ aae0bb15
<template>
<view>
<BabyClass />
<!-- <xinrenliPopup /> -->
</view>
</template>
<script setup>
import BabyClass from '../../components/pointRightsCom/babyClass.vue';
// import xinrenliPopup from '../../components/quanyi/xinrenliPopup.vue'
</script>
<style></style>
views/Integral.vue
View file @ aae0bb15
......@@ -320,6 +320,39 @@
</view>
</view>
<view class="quanyi-detail-area" v-if="isshowQuanyiDetail">
<BabyClass
v-if="Number(selectIdx) === 1"
/>
<xinrenliPopup
:index="itemIndex"
@go-to-shop="handleGoToShop"
v-if="Number(selectIdx) === 2"
/>
<mianfeiwenzhen
:index="itemIndex"
v-if="Number(selectIdx) === 3"
@use-now="handleGoToShop_mainfeiwenzhen"
/>
<aibenxinrenli
:index="itemIndex"
v-if="Number(selectIdx) === 4"
@upgrade="handleGoToShop_aibenxinrenli"
/>
<zhuanduanli
:index="itemIndex"
v-if="Number(selectIdx) === 5"
@upgrade="handleGoToShop_zhuanduanli"
/>
<jinjili
:index="itemIndex"
v-if="Number(selectIdx) === 8"
@upgrade="handleGoToShop_jinjili"
/>
<!-- <xinrenliPopup
:index="itemIndex"
@coupon-click="handleCouponClick"
......@@ -523,7 +556,13 @@
import { fetchIntegralJSON } from '../api/integral';
import RegisterLayer from "../components/RegisterLayer.vue";
// import xinrenliPopup from "../components/xinrenliPopup.vue";
import xinrenliPopup from '../components/quanyi/xinrenliPopup.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 jinjili from '../components/quanyi/jinjili.vue';
// 进度条图片加载错误处理
const onProgressBarError = (e) => {
......@@ -1458,7 +1497,6 @@
const mdMap = ref([]);
// Props 定义
const props = defineProps({
scrollTop: {
......@@ -1957,6 +1995,8 @@
pageName: "积分服务页-首屏",
buttonName: `${item.name}`,
});
console.log('selectIdx.value=', selectIdx.value);
// const url = vipQuanyiUrl.value.url;
// const type = vipQuanyiUrl.value.type;
......@@ -2034,6 +2074,21 @@
// 比如跳转到商城页面或相关活动页面
};
const handleGoToShop_mainfeiwenzhen = (data) => {
console.log('免费问诊:', data.index);
};
const handleGoToShop_aibenxinrenli = (data) => {
console.log('爱本新人礼', data.index);
};
const handleGoToShop_zhuanduanli = (data) => {
console.log('转段礼', data.index);
};
const handleGoToShop_jinjili = (data) => {
console.log('晋级礼', data.index);
};
const handleVipClick = () => {
......@@ -2489,6 +2544,7 @@
.privilege-container {
// padding: 48rpx 0rpx;
width: 686rpx;
margin-bottom: 20rpx;
.privilege-header {
display: flex;
......@@ -2588,12 +2644,13 @@
}
}
.quanyi-detail-area{
margin-top: 40rpx;
width: 686rpx;
}
.zhankai-quanyi{
width: 686rpx;
height: auto;
margin-top: 0rpx;
margin-top: 40rpx;
.shouqi-quanyi-img{
position: absolute;
......
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