|
|
@@ -1,42 +1,10 @@
|
|
|
<template>
|
|
|
<view class="base-container">
|
|
|
- <view class="tree-head">
|
|
|
- <view class="user-info">
|
|
|
- <up-image class="avatar" :fade="false"
|
|
|
- src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" width="96rpx"
|
|
|
- height="96rpx" shape="circle"></up-image>
|
|
|
- <view class="level-wrap">
|
|
|
- <text class="name">V1 青铜守护</text>
|
|
|
- <view class="progress-wrap">
|
|
|
- <view class="progress-value">
|
|
|
- <view class="total"></view>
|
|
|
- </view>
|
|
|
- <view class="progress-score">
|
|
|
- <text class="cur-val">80</text>/100分
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="level-desc">
|
|
|
- 再累计能量<text class="level-text"> 20分 </text>即可升级到 青铜等级
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="toogle" @click="handleShow">切换 {{name}}<up-icon class="icon" name="arrow-down" color="#fff" size="12"></up-icon></view>
|
|
|
- </view>
|
|
|
+ <member-level>
|
|
|
+ <view class="toogle" @click="handleShow">切换 {{name}}<up-icon class="icon" name="arrow-down" color="#fff"
|
|
|
+ size="12"></up-icon></view>
|
|
|
+ </member-level>
|
|
|
<view class="tree-cont">
|
|
|
- <view class="tree-info">
|
|
|
- <view class="info-text">
|
|
|
- <view>汕尾妙荔</view>
|
|
|
- <text>现代农业产业园</text>
|
|
|
- </view>
|
|
|
- <view class="info-text">
|
|
|
- <view>16年老树</view>
|
|
|
- <text class="text">妃子笑荔枝</text>
|
|
|
- </view>
|
|
|
- <view class="info-text">
|
|
|
- <view>成熟期</view>
|
|
|
- <text class="text">温度适宜-梢期杀虫</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
<image class="drone-icon" :src="`${config.BASIC_IMG}img/treePage/drone-icon.png`"></image>
|
|
|
<view class="tool-wrap">
|
|
|
<view class="tool-left">
|
|
|
@@ -46,7 +14,8 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="tool-right">
|
|
|
- <view :class="['tool-item',item.className]" v-for="(item,index) in toolRightList" :key="index" @click="handleToolItem(item)">
|
|
|
+ <view :class="['tool-item',item.className]" v-for="(item,index) in toolRightList" :key="index"
|
|
|
+ @click="handleToolItem(item)">
|
|
|
<image class="icon" :src="`${config.BASIC_IMG}img/treePage/r-tree-icon-${index+1}.png`"></image>
|
|
|
<view class="name">{{item.name}}</view>
|
|
|
</view>
|
|
|
@@ -59,35 +28,37 @@
|
|
|
<view class="name">{{item}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <!-- 切换 -->
|
|
|
- <up-picker :show="showPicker" :columns="columns" :defaultIndex="[0]" @cancel="handleCancel" @confirm="handleConfirm"></up-picker>
|
|
|
- <!-- 编辑树名称 -->
|
|
|
- <editNamePopup></editNamePopup>
|
|
|
+ </view>
|
|
|
+ <!-- 切换 -->
|
|
|
+ <up-picker :show="showPicker" :columns="columns" :defaultIndex="[0]" @cancel="handleCancel"
|
|
|
+ @confirm="handleConfirm"></up-picker>
|
|
|
+ <!-- 编辑树名称 -->
|
|
|
+ <editNamePopup></editNamePopup>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import config from "@/api/config.js"
|
|
|
+ import memberLevel from "./components/memberLevel.vue"
|
|
|
import {
|
|
|
- ref,
|
|
|
+ ref,
|
|
|
reactive,
|
|
|
onMounted
|
|
|
} from 'vue';
|
|
|
-
|
|
|
- const name = ref('荔枝')
|
|
|
- const showPicker = ref(false)
|
|
|
- const columns = reactive([
|
|
|
- ['荔枝', '香蕉', '苹果']
|
|
|
- ]);
|
|
|
- const handleShow = () =>{
|
|
|
- showPicker.value = true
|
|
|
- }
|
|
|
- const handleCancel= () =>{
|
|
|
- showPicker.value = false
|
|
|
- }
|
|
|
- const handleConfirm = (e) =>{
|
|
|
- name.value = e.value[0]
|
|
|
- handleCancel()
|
|
|
+
|
|
|
+ const name = ref('荔枝')
|
|
|
+ const showPicker = ref(false)
|
|
|
+ const columns = reactive([
|
|
|
+ ['荔枝', '香蕉', '苹果']
|
|
|
+ ]);
|
|
|
+ const handleShow = () => {
|
|
|
+ showPicker.value = true
|
|
|
+ }
|
|
|
+ const handleCancel = () => {
|
|
|
+ showPicker.value = false
|
|
|
+ }
|
|
|
+ const handleConfirm = (e) => {
|
|
|
+ name.value = e.value[0]
|
|
|
+ handleCancel()
|
|
|
}
|
|
|
|
|
|
const toolLeftList = [{
|
|
|
@@ -107,8 +78,8 @@
|
|
|
]
|
|
|
const toolRightList = [{
|
|
|
name: "好友",
|
|
|
- className: 'friend',
|
|
|
- path:'rank'
|
|
|
+ className: 'friend',
|
|
|
+ path: 'rank'
|
|
|
},
|
|
|
{
|
|
|
name: "认养",
|
|
|
@@ -118,15 +89,17 @@
|
|
|
},
|
|
|
{
|
|
|
name: "动态",
|
|
|
- className: 'dynamic',
|
|
|
- path:'dynamic'
|
|
|
+ className: 'dynamic',
|
|
|
+ path: 'dynamic'
|
|
|
}
|
|
|
- ]
|
|
|
-
|
|
|
- const handleToolItem = ({path})=>{
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/tabBar/tree/subPages/${path}`
|
|
|
- });
|
|
|
+ ]
|
|
|
+
|
|
|
+ const handleToolItem = ({
|
|
|
+ path
|
|
|
+ }) => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/tabBar/tree/subPages/${path}`
|
|
|
+ });
|
|
|
}
|
|
|
const footerList = ["每日阳光", "送ta祝福", "分享转发", "水果订购"]
|
|
|
</script>
|
|
|
@@ -139,81 +112,19 @@
|
|
|
// background-position: top left;
|
|
|
padding: 22rpx 0;
|
|
|
|
|
|
- .tree-head {
|
|
|
+ .toogle {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: calc(50% - 32rpx);
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50rpx 0 0 50rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+ padding: 12rpx 20rpx;
|
|
|
display: flex;
|
|
|
- border-radius: 70rpx 0 0 70rpx;
|
|
|
- padding: 16rpx 20rpx;
|
|
|
- margin-left: 24rpx;
|
|
|
- position: relative;
|
|
|
- width: calc(100% - 24rpx);
|
|
|
- box-sizing: border-box;
|
|
|
- background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent);
|
|
|
-
|
|
|
- .user-info {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .avatar {
|
|
|
- border: 2rpx solid #fff;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
|
|
|
- .level-wrap {
|
|
|
- line-height: 32rpx;
|
|
|
- width: 54%;
|
|
|
- .name {
|
|
|
- // color: #fff;
|
|
|
- font-family: 'PangMenZhengDao';
|
|
|
- }
|
|
|
- .progress-wrap{
|
|
|
- font-size: 20rpx;
|
|
|
- color: rgba(0, 0, 0, 0.8);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .progress-value{
|
|
|
- width: calc(100% - 120rpx);
|
|
|
- height: 16rpx;
|
|
|
- background: #E7E7E7;
|
|
|
- border-radius: 40rpx;
|
|
|
- border: 2rpx solid #fff;
|
|
|
- .total{
|
|
|
- width: 80%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 20rpx;
|
|
|
- background-image: linear-gradient(120deg,#FDE492,#FB9C03);
|
|
|
- }
|
|
|
- }
|
|
|
- .cur-val{
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .level-desc{
|
|
|
- font-size: 20rpx;
|
|
|
- color: rgba(0, 0, 0, 0.84);
|
|
|
- .level-text{
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .toogle {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: calc(50% - 36rpx);
|
|
|
- font-size: 24rpx;
|
|
|
- color: #fff;
|
|
|
- border-radius: 50rpx 0 0 50rpx;
|
|
|
- background: rgba(0, 0, 0, 0.2);
|
|
|
- padding: 12rpx 20rpx;
|
|
|
- display: flex;
|
|
|
- .icon{
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -221,42 +132,6 @@
|
|
|
width: 100%;
|
|
|
margin-top: 10rpx;
|
|
|
|
|
|
- .tree-info {
|
|
|
- width: 95%;
|
|
|
- height: 160rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 50rpx 20rpx;
|
|
|
- @include ossBg("treePage/tree-info-bg.png");
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- margin: auto;
|
|
|
-
|
|
|
- .info-text {
|
|
|
- text-align: center;
|
|
|
- line-height: 32rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .info-text+.info-text {
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: -26rpx;
|
|
|
- top: 14rpx;
|
|
|
- width: 1rpx;
|
|
|
- height: 38rpx;
|
|
|
- background: rgba(0, 0, 0, 0.26);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
.drone-icon {
|
|
|
width: 376rpx;
|
|
|
height: 384rpx;
|
wangsisi