|
@@ -1,275 +1,263 @@
|
|
|
<template>
|
|
|
- <view class="sub-base-container">
|
|
|
- <view class="gift-title">
|
|
|
- <view class="name">
|
|
|
- <view class="txt">守护等级规则</view>
|
|
|
- <text>积累能量升等级 获大礼</text>
|
|
|
- </view>
|
|
|
- <image class="icon" :src="`${config.BASIC_IMG}img/subTreePage/energy-icon.png`"></image>
|
|
|
- </view>
|
|
|
- <view class="gift-card energy-card">
|
|
|
- <view class="gift-name">已打卡 <text>2</text>/7 天</view>
|
|
|
- <view class="tips">
|
|
|
- <text>再连续签到5天,获得</text>
|
|
|
- <image class="icon" :src="`${config.BASIC_IMG}img/subTreePage/leaf-icon.png`" alt=""></image>
|
|
|
- <view class="score"><up-icon name="plus" size="10" color="#D9AB14"></up-icon>30</view>
|
|
|
- </view>
|
|
|
- <view class="check-wrap">
|
|
|
- <view :class="['check-day',{active:item.check}]" v-for="(item, index) in checkDay" :key="index">
|
|
|
- <view class="leaf">
|
|
|
- <image class="icon"
|
|
|
- :src="`${config.BASIC_IMG}img/subTreePage/${item.check?'gray-leaf':'leaf-icon'}.png`" alt="">
|
|
|
- </image>
|
|
|
- <text>x{{item.energy}}</text>
|
|
|
- </view>
|
|
|
- <view v-if="item.check">已领取</view>
|
|
|
- <view v-else>第{{item.days}}天</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="gift-card">
|
|
|
- <view class="card-title">守护等级划分</view>
|
|
|
- <view class="card-desc">守护等级共有5个等级,您的守护等级会根据您累计的能量值决定的,当您的能量值达到相应的要求即可升级并获得相对应礼物,不同等级的用户获得礼物不同。</view>
|
|
|
- <view class="card-table">
|
|
|
- <view class="table-item" v-for="(item,index) in tableList" :key="index">
|
|
|
- <view class="levle">{{item.level}}等级</view>
|
|
|
- <view>{{item.text}}</view>
|
|
|
- <view class="gift">{{item.gift}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="gift-card">
|
|
|
- <view class="card-title">积累能量规则</view>
|
|
|
- <view class="card-desc">每日登录会积累相应的能量,连续登录天数越高能量值越高,每天可以通过做任务增加能量值,每日阳光可以获得 10 能量,分享转发可以获得 10 能量,送ta祝福可以获得 10
|
|
|
- 能量,水果订购一次,可以获得 100 能量,但是需要扫描箱内溯源卡的二维码领取。</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="sub-base-container">
|
|
|
+ <view class="gift-title">
|
|
|
+ <view class="name">
|
|
|
+ <view class="txt">守护等级规则</view>
|
|
|
+ <text>积累能量升等级 获大礼</text>
|
|
|
+ </view>
|
|
|
+ <image class="icon" :src="`${config.BASIC_IMG}img/subTreePage/energy-icon.png`"></image>
|
|
|
+ </view>
|
|
|
+ <view class="gift-card energy-card">
|
|
|
+ <view class="gift-name">已打卡 <text>{{ runningDays }}</text>/7 天</view>
|
|
|
+ <view class="tips">
|
|
|
+ <text>再连续签到{{ 7 - runningDays }}天,额外获得</text>
|
|
|
+ <image class="icon" :src="`${config.BASIC_IMG}img/subTreePage/leaf-icon.png`" alt=""></image>
|
|
|
+ <view class="score"><up-icon name="plus" size="10" color="#D9AB14"></up-icon>30</view>
|
|
|
+ </view>
|
|
|
+ <view class="check-wrap">
|
|
|
+ <view :class="['check-day', { active: item.check }]" v-for="(item, index) in checkDay" :key="index">
|
|
|
+ <view class="leaf">
|
|
|
+ <image
|
|
|
+ class="icon"
|
|
|
+ :src="`${config.BASIC_IMG}img/subTreePage/${item.check ? 'gray-leaf' : 'leaf-icon'}.png`"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </image>
|
|
|
+ <text>x{{ item.energy }}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="item.check">已领取</view>
|
|
|
+ <view v-else>第{{ item.days }}天</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="gift-card">
|
|
|
+ <view class="card-title">守护等级划分</view>
|
|
|
+ <view class="card-desc"
|
|
|
+ >守护等级共有5个等级,您的守护等级会根据您累计的能量值决定的,当您的能量值达到相应的要求即可升级并获得相对应礼物,不同等级的用户获得礼物不同。</view
|
|
|
+ >
|
|
|
+ <view class="card-table">
|
|
|
+ <view class="table-item" v-for="(item, index) in tableList" :key="index">
|
|
|
+ <view class="levle">{{ item.level }}等级</view>
|
|
|
+ <view>{{ item.text }}</view>
|
|
|
+ <view class="gift">{{ item.gift }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="gift-card">
|
|
|
+ <view class="card-title">积累能量规则</view>
|
|
|
+ <view class="card-desc"
|
|
|
+ >每日登录会积累相应的能量,连续登录天数越高能量值越高,每天可以通过做任务增加能量值,每日阳光可以获得 10
|
|
|
+ 能量,分享转发可以获得 10 能量,送ta祝福可以获得 10 能量,水果订购一次,可以获得 100
|
|
|
+ 能量,但是需要扫描箱内溯源卡的二维码领取。</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import config from "@/api/config.js"
|
|
|
- import TREE from '@/api/tree.js'
|
|
|
- import {
|
|
|
- ref
|
|
|
- } from 'vue';
|
|
|
- import {
|
|
|
- onLoad
|
|
|
- } from '@dcloudio/uni-app'
|
|
|
-
|
|
|
- const getRules = () => {
|
|
|
- TREE.ruleList().then((res) => {
|
|
|
- checkDay.value = res.data
|
|
|
- // firstRowItems.value = res.data.slice(0, 3);
|
|
|
- // secondRowItems.value = res.data.slice(3);
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- onLoad(()=>{
|
|
|
- getRules()
|
|
|
- })
|
|
|
-
|
|
|
- const checkDay = ref([{
|
|
|
- day: 1,
|
|
|
- check: true
|
|
|
- },
|
|
|
- {
|
|
|
- day: 2,
|
|
|
- check: true
|
|
|
- },
|
|
|
- {
|
|
|
- day: 3,
|
|
|
- check: false
|
|
|
- },
|
|
|
- {
|
|
|
- day: 4,
|
|
|
- check: false
|
|
|
- },
|
|
|
- {
|
|
|
- day: 5,
|
|
|
- check: false
|
|
|
- },
|
|
|
- {
|
|
|
- day: 6,
|
|
|
- check: false
|
|
|
- },
|
|
|
- {
|
|
|
- day: 7,
|
|
|
- check: false
|
|
|
- }
|
|
|
- ])
|
|
|
-
|
|
|
- const tableList = [{
|
|
|
- level: '平民',
|
|
|
- text: '无要求',
|
|
|
- gift: '无礼品'
|
|
|
- },
|
|
|
- {
|
|
|
- level: '青铜',
|
|
|
- text: '达到200能量',
|
|
|
- gift: '一份曲奇'
|
|
|
- },
|
|
|
- {
|
|
|
- level: '白银',
|
|
|
- text: '达到1200能量',
|
|
|
- gift: '一份精美水果'
|
|
|
- },
|
|
|
- {
|
|
|
- level: '赤金',
|
|
|
- text: '达到5500能量',
|
|
|
- gift: '一份荔枝'
|
|
|
- },
|
|
|
- {
|
|
|
- level: '星勋',
|
|
|
- text: '达到9800能量',
|
|
|
- gift: '一份荔枝'
|
|
|
- }
|
|
|
- ]
|
|
|
+import config from "@/api/config.js";
|
|
|
+import TREE from "@/api/tree.js";
|
|
|
+import { ref } from "vue";
|
|
|
+import { onLoad } from "@dcloudio/uni-app";
|
|
|
+
|
|
|
+const getRules = () => {
|
|
|
+ TREE.ruleList().then((res) => {
|
|
|
+ checkDay.value = res.data.map((item,index) =>{
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ check:runningDays.value>=(index + 1)?true:false
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const runningDays = ref(0)
|
|
|
+const getSignInfo = () => {
|
|
|
+ TREE.getSignInfo().then((res) => {
|
|
|
+ runningDays.value = res.data.runningDays;
|
|
|
+ getRules();
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+onLoad(() => {
|
|
|
+ getSignInfo()
|
|
|
+});
|
|
|
+
|
|
|
+const checkDay = ref([]);
|
|
|
+
|
|
|
+const tableList = [
|
|
|
+ {
|
|
|
+ level: "平民",
|
|
|
+ text: "无要求",
|
|
|
+ gift: "无礼品",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ level: "青铜",
|
|
|
+ text: "达到200能量",
|
|
|
+ gift: "一份曲奇",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ level: "白银",
|
|
|
+ text: "达到1200能量",
|
|
|
+ gift: "一份精美水果",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ level: "赤金",
|
|
|
+ text: "达到5500能量",
|
|
|
+ gift: "一份荔枝",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ level: "星勋",
|
|
|
+ text: "达到9800能量",
|
|
|
+ gift: "一份荔枝",
|
|
|
+ },
|
|
|
+];
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- @import "@/static/style/mixin.scss";
|
|
|
-
|
|
|
- .sub-base-container {
|
|
|
- @include ossBg("subTreePage/gift-bg.png");
|
|
|
- padding: 12rpx 20rpx 20rpx;
|
|
|
-
|
|
|
- .gift-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 14rpx;
|
|
|
-
|
|
|
- .name {
|
|
|
- color: rgba(0, 0, 0, 0.5);
|
|
|
- font-size: 28rpx;
|
|
|
-
|
|
|
- .txt {
|
|
|
- font-size: 60rpx;
|
|
|
- font-family: 'PangMenZhengDao';
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- }
|
|
|
+@import "@/static/style/mixin.scss";
|
|
|
|
|
|
- .icon {
|
|
|
- width: 212rpx;
|
|
|
- height: 222rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+.sub-base-container {
|
|
|
+ @include ossBg("subTreePage/gift-bg.png");
|
|
|
+ padding: 12rpx 20rpx 20rpx;
|
|
|
|
|
|
- .energy-card {
|
|
|
- margin-top: -10rpx;
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
+ .gift-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 14rpx;
|
|
|
|
|
|
- .gift-name {
|
|
|
- font-weight: 500;
|
|
|
+ .name {
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
|
- text {
|
|
|
- color: #F3B242;
|
|
|
- }
|
|
|
- }
|
|
|
+ .txt {
|
|
|
+ font-size: 60rpx;
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .tips {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 24rpx;
|
|
|
- color: rgba(0, 0, 0, 0.4);
|
|
|
- .icon{
|
|
|
- width: 24rpx;
|
|
|
- height: 22rpx;
|
|
|
- margin: 0 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .score {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: #D9AB14;
|
|
|
- }
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ width: 212rpx;
|
|
|
+ height: 222rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .check-wrap {
|
|
|
- margin: 28rpx 0 20rpx 0;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .check-day {
|
|
|
- flex: 1;
|
|
|
- padding: 20rpx 0;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #F3B242;
|
|
|
- background: rgba(185, 185, 185, 0.1);
|
|
|
- border-radius: 10rpx;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- &.active {
|
|
|
- color: #BCBCBA;
|
|
|
- }
|
|
|
-
|
|
|
- .leaf {
|
|
|
- font-size: 20rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .icon{
|
|
|
- width: 28rpx;
|
|
|
- height: 28rpx;
|
|
|
- margin-right: 4rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .check-day+.check-day {
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .energy-card {
|
|
|
+ margin-top: -10rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
|
|
|
- .gift-card {
|
|
|
- border-radius: 16rpx;
|
|
|
- background: #fff;
|
|
|
- padding: 20rpx;
|
|
|
+ .gift-name {
|
|
|
+ font-weight: 500;
|
|
|
|
|
|
- .card-title {
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
+ text {
|
|
|
+ color: #f3b242;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .card-desc {
|
|
|
- margin-top: 10rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
+ .tips {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: rgba(0, 0, 0, 0.4);
|
|
|
+ .icon {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 22rpx;
|
|
|
+ margin: 0 8rpx;
|
|
|
+ }
|
|
|
|
|
|
- .card-table {
|
|
|
- margin-top: 20rpx;
|
|
|
+ .score {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #d9ab14;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .table-item {
|
|
|
- display: flex;
|
|
|
- background: rgba(243, 193, 29, 0.07);
|
|
|
+ .check-wrap {
|
|
|
+ margin: 28rpx 0 20rpx 0;
|
|
|
+ display: flex;
|
|
|
|
|
|
- .levle {
|
|
|
- background: rgba(243, 193, 29, 0.12);
|
|
|
- }
|
|
|
+ .check-day {
|
|
|
+ flex: 1;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #f3b242;
|
|
|
+ background: rgba(185, 185, 185, 0.1);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- .gift {
|
|
|
- color: #CC9D00;
|
|
|
- }
|
|
|
+ &.active {
|
|
|
+ color: #bcbcba;
|
|
|
+ }
|
|
|
|
|
|
- view {
|
|
|
- flex: 1;
|
|
|
- padding: 30rpx 0;
|
|
|
- text-align: center;
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .leaf {
|
|
|
+ font-size: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .icon {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .table-item+.table-item {
|
|
|
- border-top: 2rpx solid rgba(0, 0, 0, 0.06);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .check-day + .check-day {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .gift-card {
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #fff;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-desc {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-table {
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .table-item {
|
|
|
+ display: flex;
|
|
|
+ background: rgba(243, 193, 29, 0.07);
|
|
|
+
|
|
|
+ .levle {
|
|
|
+ background: rgba(243, 193, 29, 0.12);
|
|
|
+ }
|
|
|
+
|
|
|
+ .gift {
|
|
|
+ color: #cc9d00;
|
|
|
+ }
|
|
|
+
|
|
|
+ view {
|
|
|
+ flex: 1;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-item + .table-item {
|
|
|
+ border-top: 2rpx solid rgba(0, 0, 0, 0.06);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .gift-card+.gift-card {
|
|
|
- margin-top: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+ .gift-card + .gift-card {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|