2760

pages/mine/index.js

@@ -9,12 +9,12 @@ Page({
     data: {
         userInfo: {}, // 用户授权信息
         list: [
-            {title: '个人信息', type: 'userinfo', path: '/package_mine/pages/userInfo/index'},
-            {title: '护河身份', type: 'myid', path: '/package_mine/pages/myId/index'},
-            // {title: '我的兑换', type: 'exchange', path: '/package_mine/pages/exchange/index'},
-            {title: '河湖问题反馈', type: 'feedback', path: '/package_mine/pages/records/index'},
-            // {title: '我的美拍', type: 'beauty', path: '/package_mine/pages/beauties/index'},
-            {title: '消息通知', type: 'notice', path: '/package_mine/pages/notice/index',showNumbers: true},
+            {title: '个人信息', type: 'userinfo', path: '/package_mine/pages/userInfo/index', info: '修改个人信息'},
+            {title: '护河身份', type: 'myid', path: '/package_mine/pages/myId/index', info: '全民护河 全民参与'},
+        ],
+        otherList: [
+            {title: '河湖问题反馈', type: 'feedback', path: '/package_mine/pages/records/index', info: '问题反馈'},
+            {title: '消息通知', type: 'notice', path: '/package_mine/pages/notice/index',info: '', showNumbers: true},
         ],
         myId: '', // 身份
         integral: 0, // 积分

pages/mine/index.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {},
   "navigationBarTitleText": "我的",
-  "navigationBarBackgroundColor": "#2C83E4"
+  "navigationBarTextStyle": "white",
+  "navigationBarBackgroundColor": "#008CFF"
 }

pages/mine/index.wxml

@@ -3,29 +3,51 @@
     <view class="user_massage">
         <view class="message_box">
             <image class="user_avatar" src="{{userInfo.headimgurl}}"></image>
-            <view class="id_box">
-                <text class="user_name">{{userInfo.nickname}}</text>
+            <view class="approve_box">
+                <view class="id_box">
+                    <text class="user_name">{{userInfo.nickname}}</text>
+                    <view wx:if="{{userInfo.identityName}}" class="approve_btn">{{userInfo.identityName}}</view>
+                </view>
                 <view class="integral">
-                    <text style="color: #ffffff;font-size: 20rpx;">护河积分</text>
-                    <text style="font-size: 40rpx;color: #FFC65E;" bindtap="handlePointDetail">{{userInfo.mallPoints || 0}}</text>
+                    <image style="width: 26rpx;height: 26rpx;margin-right: 10rpx;" src="../../assets/img/gold.png"></image>
+                    <text style="font-size: 24rpx;color: #ffffff;margin-right: 20rpx;" bindtap="handlePointDetail">{{userInfo.mallPoints || 0}}</text>
+                    <text style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;">护河积分可兑换礼物！快来加入我们吧～</text>
                 </view>
             </view>
         </view>
-        <view class="approve_box">
-            <view wx:if="{{userInfo.identityName}}" class="approve_btn">{{userInfo.identityName}}</view>
-            <view wx:else class="approve_btn" bindtap="goApprove">申请护河身份</view>
-            <text style="color: #ffffff;font-size: 20rpx;">护河积分可兑换礼物！快来加入我们吧</text>
-        </view>
     </view>
     <view class="function_list">
+        <!-- 标题 -->
+        <view class="apply_head" wx:if="{{!userInfo.identityName}}">
+            <view class="item_title">
+                <image style="height: 33rpx;width: 42rpx;margin-right: 20rpx;" src="../../assets/img/apply.png"></image>
+                <view style="font-size: 28rpx;z-index:99;color: #FFFFFF;">申请成为护河身份</view>
+            </view>
+            <view class="apply_btn">立即申请</view>
+        </view>
         <view class="function_item" wx:for="{{list}}" wx:key="index" bindtap="goRecords" data-path="{{item.path}}">
             <view class="item_title">
-                <image style="height: 60rpx;width: 60rpx;margin-right: 20rpx;" src="{{'../../assets/img/'+ item.type +'.png'}}"></image>
-                <view style="font-size: 26rpx;z-index:99">{{item.title}}</view>
+                <image style="height: 40rpx;width: 40rpx;margin-right: 14rpx;" src="{{'../../assets/img/'+ item.type +'.png'}}"></image>
+                <view style="font-size: 30rpx;z-index:99">{{item.title}}</view>
+            </view>
+            <view class="enter_box">
+                <text style="font-size: 26rpx; color: #C6C6C6;margin-top: -2rpx;">{{item.info}}</text>
+                <image style="height: 30rpx;width: 30rpx;margin-left: 20rpx;" src="../../assets/img/more.png"></image>
+            </view>
+        </view>
+    </view>
+    <view class="tag"></view>
+    <view class="function_list">
+        <view class="function_item" wx:for="{{otherList}}" wx:key="index" bindtap="goRecords" data-path="{{item.path}}">
+            <view class="item_title">
+                <image style="height: 40rpx;width: 40rpx;margin-right: 14rpx;" src="{{'../../assets/img/'+ item.type +'.png'}}"></image>
+                <view style="font-size: 30rpx;z-index:99">{{item.title}}</view>
                 <text wx:if="{{item.showNumbers && numbers > 0}}" class="badge">{{numbers > 99 ? '99+' : numbers }}</text>
             </view>
-            <image style="height: 30rpx;width: 30rpx;" src="../../assets/img/more.png"></image>
+            <view class="enter_box">
+                <text style="font-size: 26rpx; color: #C6C6C6;margin-top: -2rpx;">{{item.info}}</text>
+                <image style="height: 30rpx;width: 30rpx;margin-left: 20rpx;" src="../../assets/img/more.png"></image>
+            </view>
         </view>
-
     </view>
 </view>

pages/mine/index.wxss

@@ -2,8 +2,8 @@
 .mine_container {
     width: 100%;
     height: 100vh;
-    padding: 0 30rpx;
-    background: linear-gradient(180deg, #2A82E4 0%, rgba(255,255,255,0) 100%);
+    background: linear-gradient(180deg, #008CFF 0%, #008CFF 21%, rgba(255,255,255,0) 35%);
+    /* background-color: #ffffff; */
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -11,9 +11,16 @@
 }
 .user_massage {
     width: 100%;
-    padding: 60rpx 40rpx;
+    padding: 60rpx 30rpx;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+.approve_box {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
     align-items: flex-start;
 }
 .message_box {
@@ -22,43 +29,40 @@
     align-items: flex-start;
 }
 .user_avatar {
-    width: 100rpx;
-    height: 100rpx;
-    border-radius: 16rpx;
-    margin-right: 30rpx;
+    width: 86rpx;
+    height: 86rpx;
+    border-radius: 50%;
 }
 .id_box {
     display: flex;
-    flex-direction: column;
     justify-content: flex-start;
-    align-items: flex-start;
+    align-items: center;
 }
 .user_name {
     width: 170rpx;
-    font-size: 30rpx;
+    font-size: 36rpx;
     color: #ffffff;
-    font-weight: bold;
+    font-weight: 400;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 .approve_box {
-    margin-left: 20rpx;
+    margin-left: 28rpx;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    align-items: center;
+    align-items: flex-start;
 }
 .approve_btn {
-    width: 250rpx;
-    height: 80rpx;
-    padding: 0 20rpx;
-    margin-bottom: 20rpx;
+    width: 173rpx;
+    height: 43rpx;
     text-align: center;
-    line-height: 80rpx;
+    line-height: 43rpx;
     font-size: 24rpx;
     color: #ffffff;
-    background-color: #2A82E4;
+    background-color: rgba(255,255,255,0.2);
+    border: 1rpx solid #ffffff;
     border-radius: 40rpx;
     overflow: hidden;
     white-space: nowrap;
@@ -67,28 +71,48 @@
 .integral {
     margin-top: 20rpx;
     display: flex;
-    flex-direction: column;
     justify-content: flex-start;
-    align-items: flex-start;
+    align-items: center;
 }
 
 .function_list {
     width: 100%;
-    flex: 1;
-    border-radius: 16rpx;
-    background-color: #ffffff;
+    padding: 0 30rpx;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
+    overflow: hidden;
+}
+.apply_head {
+    width: 100%;
+    padding: 23rpx 30rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #0761A8;
+    border-top-left-radius: 20rpx;
+    border-top-right-radius: 20rpx;
+}
+.apply_btn {
+    width: 130rpx;
+    height: 46rpx;
+    line-height: 46rpx;
+    text-align: center;
+    background-color: #FFFFFF;
+    color: #0081FF;
+    font-size: 24rpx;
+    border-radius: 23rpx;
 }
 .function_item {
     width: 100%;
-    padding: 40rpx 60rpx;
+    padding: 33rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 2rpx solid #eeeeee;
+    color: #626262;
+    background-color: #ffffff;
+
 }
 .item_title {
     display: flex;
@@ -96,6 +120,12 @@
     align-items: center;
 }
 
+.enter_box {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
 .badge{
     background: #E73F3F;
     border-radius: 10px;
@@ -105,4 +135,9 @@
     position: relative;
     top: -10rpx;
     right: 10rpx;
+}
+.tag {
+    width: 100%;
+    height: 10rpx;
+    background-color: #ededed;
 }