From fc4b4c1af6cf1dd54907228e3554262e781842f2 Mon Sep 17 00:00:00 2001
From: tangzy <tangzy123456>
Date: Thu, 10 Feb 2022 08:24:10 +0800
Subject: [PATCH] 能量树
---
pages/shengzs/index.vue | 177 +++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 129 insertions(+), 48 deletions(-)
diff --git a/pages/shengzs/index.vue b/pages/shengzs/index.vue
index ec94c77..6857573 100644
--- a/pages/shengzs/index.vue
+++ b/pages/shengzs/index.vue
@@ -10,8 +10,12 @@
<!-- 树、水滴值 -->
<view class="tree">
- <view v-for="(o, i) in rainArr" :key="i" :class="['rain rain-'+ stages]" @click="rainFun(i, o)">{{o}}<text>g</text></view>
- <image :src="'../../static/shenzs/img/tree-'+ stages +'.png'" :class="['tree-'+ stages, treemove ? 'move-'+ stages : '']" hover-class="none" @click="tree"></image>
+ <view v-for="(o, i) in rainArr" :key="i" :class="['rain rain-'+ 1]" @click="rainFun(o.id, o.num)">
+ {{o.num}}<text>g</text>
+ </view>
+ <image :src="'../../static/shenzs/img/tree-'+ stages +'.png'"
+ :class="['tree-'+ stages, treemove ? 'move-'+ stages : '']" hover-class="none" @click="tree">
+ </image>
</view>
<!-- 水壶、浇水动画 -->
@@ -45,25 +49,17 @@
<!-- 树成长进度 -->
<view class="speed">
<view class="progress">
- <image class="speed-1" :src="'../../static/shenzs/img/speed-1'+ [1 == stages ? '-h' : ''] +'.png'"></image>
- <image class="speed-2" :src="'../../static/shenzs/img/speed-2'+ [2 == stages ? '-h' : ''] +'.png'"></image>
- <image class="speed-3" :src="'../../static/shenzs/img/speed-3'+ [3 == stages ? '-h' : ''] +'.png'"></image>
+ <image class="speed-1"
+ :src="'../../static/shenzs/img/speed-1'+ [1 == stages ? '-h' : ''] +'.png'"></image>
+ <image class="speed-2"
+ :src="'../../static/shenzs/img/speed-2'+ [2 == stages ? '-h' : ''] +'.png'"></image>
+ <image class="speed-3"
+ :src="'../../static/shenzs/img/speed-3'+ [3 == stages ? '-h' : ''] +'.png'"></image>
</view>
</view>
</view>
</view>
-
- <view class="explain">
- <!-- <view>功能概述：</view>
- <view class="text">该插件样式主要是模仿蚂蚁森林，其中的数据都是可配的（完全可以自义定 或 从后端API获取），根据不同的数据(如用户信息、水滴值等)显示对应的动效。</view> -->
- <view>操作说明：</view>
- <view class="text">1、用水壶每浇水1次，水滴值向上+1。</view>
- <view class="text">2、点击树上面的雨滴，水滴值 + 收取到的雨滴值。</view>
- <view>成长说明：</view>
- <view class="text">1、树的成长过程分为小树、中树、大树3个阶段。</view>
- <view class="text">2、现默认值: 小树(水滴值在100以下)， 中树(水滴值在100 到 1000)， 大树(水滴值在1000以上)。</view>
- <view class="text">3、树苗会在水滴值变化时会展示对应的动效 和 树的动效、大小等。</view>
- </view>
+
</view>
</template>
@@ -73,30 +69,37 @@
data() {
return {
info: {
- name: '沐枫', // 用户姓名
- sex: 2, // 用户姓别 1男， 2女
- votes: 8, // 水滴值 默认为8
- avatar: '../../static/shenzs/img/detail-bg.jpg' //用户头像
+ name: '沐枫', // 用户姓名
+ sex: 2, // 用户姓别 1男， 2女
+ votes: 9, // 水滴值 默认为8
+ avatar: '../../static/shenzs/img/detail-bg.jpg' //用户头像
},
- rainArr: [28, 63, 5, 902], // 雨滴值 点击收取
+ rainArr: [28, 63, 5, 902], // 雨滴值 点击收取
+ numberone: 1,
+ stages: 1, // 成长阶段 1(小树[默认])，中2(中树) ，大3(大树)
+ during: 1, // 阶段阈值 1、小树[100以下](during > votes ) ，2、中树[100及以上 并且小于1000](during <= votes && oldest > votes)
+ fristD: 100, //中树阶层
+ secondD: 1500, //大树阶层
+ //oldest: 1000, // 阶段阈值 3、大树[1000及以上](oldest <= votes )
+ plussNum: 1, // 加值数量（默认1）
- stages: 1, // 成长阶段 1(小树[默认])，中2(中树) ，大3(大树)
- during: 100, // 阶段阈值 1、小树[100以下](during > votes ) ，2、中树[100及以上 并且小于1000](during <= votes && oldest > votes)
- oldest: 1000, // 阶段阈值 3、大树[1000及以上](oldest <= votes )
- plussNum: 1, // 加值数量（默认1）
-
- pluss: false, // 水滴值+1动画开关
- movetree: true, // 树动画开关
- treemove: false, // 树大小动画类型开关
- wateroff: true, // 浇水动画开关
- watercss: false, // 水壶动画开关
- waterdom: false // 水滴动画开关
+ pluss: false, // 水滴值+1动画开关
+ movetree: true, // 树动画开关
+ treemove: false, // 树大小动画类型开关
+ wateroff: true, // 浇水动画开关
+ watercss: false, // 水壶动画开关
+ waterdom: false // 水滴动画开关
};
+ },
+ onLoad() {
+ this.getNowRain();
+ this.getNowAnergy();
+ this.getUser();
},
methods: {
// 设置树的大小，恢复动画
- setTree(time = 4000) {
+ setTree(time = 1000) {
setTimeout(() => {
this.plussNum = 1;
this.pluss = false;
@@ -104,17 +107,17 @@
this.watercss = false;
this.treemove = false;
// 小树阶段
- if (this.during > this.info.vote) {
+ if (this.during > this.fristD) {
this.stages = 1;
- };
+ }
// 中树阶段
- if (this.during <= this.info.votes && this.oldest > this.info.votes) {
+ if (this.during < this.secondD && this.during >= this.fristD) {
this.stages = 2;
- };
+ }
// 大树阶段
- if (this.oldest <= this.info.votes) {
+ if (this.during >= this.secondD) {
this.stages = 3;
- };
+ }
}, time);
},
@@ -127,13 +130,32 @@
// 收取雨滴的动画
rainFun(i, o) {
- this.plussNum = o;
- this.info.votes = Number(this.info.votes) + (o - 0);
- this.pluss = true;
- this.treemove = true;
- setTimeout(() => {
- this.rainArr.splice(i, 1);
- }, 1000);
+ //值
+ // this.plussNum = o;
+ // this.info.votes = Number(this.info.votes) + (o - 0);
+ // this.pluss = true;
+ // this.treemove = true;
+ var that = this;
+ console.log(that.number)
+ uni.request({
+ url: that.$store.state.piAPI + 'energy/updateEnergyIds',
+ method: 'POST',
+ data: {
+ id: i, // id
+ identification: that.$store.state.UserData.user_id, //用户
+ num: o, // 值
+ },
+ success: (res) => {
+ this.info.votes = Number(this.info.votes) + (o);
+ this.pluss = true;
+ this.treemove = true;
+ setTimeout(() => {
+ //this.rainArr.splice(i, 1);
+ this.getNowRain();
+ this.getNowAnergy();
+ }, 1000);
+ }
+ });
this.setTree(2000);
},
@@ -160,7 +182,8 @@
}, 1500);
setTimeout(() => {
- this.info.votes++;
+ //this.info.votes++;
+ this.getTre();
this.pluss = true;
this.treemove = true;
this.movetree = false;
@@ -173,6 +196,64 @@
this.setTree();
};
+ },
+ //获取当前漂浮雨量
+ getNowRain() {
+ this.rainArr = [];
+ var that = this;
+ uni.request({
+ url: that.$store.state.piAPI + 'energy/list',
+ method: 'GET',
+ data: {
+ type: 1,
+ identification: that.$store.state.UserData.user_id
+ },
+ success: (res) => {
+ const data = res.data.data.records;
+ for (let k in data) {
+ this.rainArr.push({
+ id: +data[k].id,
+ identification: +data[k].identification,
+ num: +data[k].num,
+ });
+ }
+ }
+ });
+ },
+ //获取当前树能量
+ getNowAnergy() {
+ var that = this;
+ uni.request({
+ url: that.$store.state.piAPI + 'energyTree/selectNum',
+ method: 'GET',
+ data: {
+ identification: that.$store.state.UserData.user_id
+ },
+ success: (res) => {
+ that.during = res.data.data;
+ that.info.votes = res.data.data;
+ }
+ });
+ this.setTree();
+ },
+ //浇水
+ getTre() {
+ var that = this;
+ uni.request({
+ url: that.$store.state.piAPI + 'energy/updateTre',
+ method: 'POST',
+ data: {
+ identification: that.$store.state.UserData.user_id
+ },
+ success: (res) => {
+ that.during = res.data.data;
+ that.info.votes = res.data.data;
+ }
+ });
+ },
+ getUser() {
+ var that = this
+ this.info.name = that.$store.state.UserData.user_name
}
}
};
--
Gitblit v1.9.3