feat(mineNavBar): 我的-1

pages/mine/index.vue

@@ -2,43 +2,43 @@
 
   <view class="mine-container">
     <mine-navbar title="DHEC QMS" />
-    <scroll-view class="scroll-y" scroll-y style="margin: 30rpx 0 0 0;">
-      <view style="height: 16rpx;background: #F0F0F0;" />
-      <!--顶部个人信息栏-->
-      <view class="header-section">
-        <view class="flex justify-between">
-          <view class="flex align-center">
-
-            <!--						<image v-if="!form.ownersCover" :src="baseUrl+'/tmt-pic/pet-pc/925f9b6a6fbe446d88cfd70711622ce3-20230823-131457.jpg'" class="cu-avatar xl round"-->
-            <!--							mode="widthFix">-->
-            <!--						</image>-->
-            <image :src="baseUrl+ownersCover" class="avatarSize" />
+    <scroll-view class="scroll-y" scroll-y style="margin: 542rpx 0 0 0;">
+      <view style="height: 40rpx;background: #F9F9F9;" />
+      <view class="header-section" @click="goMyAccount">
+        <view class="section-detail">
+          <view class="detail-left">
+            <image :src="userInfo" class="icon-left" />
             <view class="user-info">
-              <view class="line1">
-                <!--  <view style="margin-right: 20rpx"> -->
-                <text class="u_title">
-                  {{ form.nickname }}
+                <text>
+                  个人信息
                 </text>
-                <!--     </view> -->
-                <view class="head-image" @click="handleToInfo">
-                  <image class="head-image" :src="baseUrl+'/tmt-pic/pet-app/wode_icon_bianji@2x.png'" />
             </view>
           </view>
-
-              <view class="c_title">{{ form.phonenumber }}</view>
-              <br>
-              <view class="c_title" style="margin-top: 10rpx">ID: {{ form.ownersId }}</view>
+          <view>
+            <text />
+            <u-icon name="arrow-right" color="#CCCCCC" size="19"></u-icon>
           </view>
-
         </view>
 
-          <view v-show="user.ownersId!==null" class="flex align-center" @click="viewCode">
-            <text />
-            <image :src="baseUrl+'/tmt-pic/pet-app/wode_icon_erweima@2x.png'" class="twoImage" />
       </view>
+      <view style="height: 24rpx;background: #F9F9F9;" />
+      <view class="header-section" @click="handleLogout">
+        <view class="section-detail">
+          <view class="detail-left">
+            <image :src="logout" class="icon-left" />
+            <view class="user-info">
+                <text>
+                  退出登录
+                </text>
             </view>
           </view>
           <view>
+            <text />
+          </view>
+        </view>
+
+      </view>
+<!--      <view>
         <view style="height: 16rpx;background: #F0F0F0;" />
       </view>
       <view class="second-section">
@@ -54,7 +54,7 @@
 
             </view>
             <view class="rect" @touchmove.stop>
-              <!--                    会员卡集合模块-->
+              &lt;!&ndash;                    会员卡集合模块&ndash;&gt;
               <z-swiper v-if="cardListLength>0" v-model="cardList" :custom-style="{height:'300rpx'}" :options="options">
                 <z-swiper-item v-for="(item,index) in cardList" :key="index" :custom-style="slideCustomStyle">
                   <view class="rectangle" :style="{backgroundImage: `url(${baseUrl}${cardImage})`}">
@@ -86,14 +86,14 @@
                   </view>
                 </z-swiper-item>
               </z-swiper>
-              <!--                    没有会员卡添加会员卡-->
+              &lt;!&ndash;                    没有会员卡添加会员卡&ndash;&gt;
               <view v-else class="rectangleTwo">
                 <view style=" text-align: center;" @click="goAddCount">
                   <image
                     :src="baseUrl+'/tmt-pic/pet-app/wode_icon_tianjia@2x.png'"
                     style="width: 112rpx;height: 112rpx;"
                   />
-                  <!-- <text class="plus">+</text> -->
+                  &lt;!&ndash; <text class="plus">+</text> &ndash;&gt;
                   <view class="text-container">
                     <text class="additional-text">添加我的账户</text>
                   </view>
@@ -167,7 +167,7 @@
             <span>我的宠物</span>
           </view>
           <view style=" text-align: right;width: 100%;">
-            <!-- <view class="iconfont icon-right" ></view> -->
+            &lt;!&ndash; <view class="iconfont icon-right" ></view> &ndash;&gt;
             <image
               :src="baseUrl+'/tmt-pic/pet-app/wode_icon_rjiantou2@2x.png'"
               style="width:48rpx ;height: 48rpx;"
@@ -214,7 +214,7 @@
           </view>
 
         </view>
-      </view>
+      </view>-->
 
       <!-- 二维码弹出层-->
       <view>
@@ -274,6 +274,8 @@ export default {
   components: { mineNavbar },
   data() {
     return {
+      userInfo: require('../../static/images/userInfo.png'),
+      logout: require('../../static/images/logout.png'),
       show: false,
       hosConfig: {
         phone: ''
@@ -331,6 +333,14 @@ export default {
     this.getConfig()
   },
   methods: {
+    handleLogout() {
+      this.$modal.confirmLogout('是否立即退出登录').then(() => {
+        this.$store.commit('SET_LOGOUT_BTN', true)
+        this.$store.dispatch('LogOut').then(() => {
+          this.$tab.reLaunch('/pages/index')
+        })
+      })
+    },
     // 确认呼叫
     confirmCall() {
       wx.makePhoneCall({
@@ -481,13 +491,6 @@ export default {
     handleToAvatar() {
       this.$tab.navigateTo('/pages/mine/avatar/index')
     },
-    handleLogout() {
-      this.$modal.confirm('确定注销并退出系统吗？').then(() => {
-        this.$store.dispatch('LogOut').then(() => {
-          this.$tab.reLaunch('/pages/index')
-        })
-      })
-    },
     handleHelp() {
       this.$tab.navigateTo('/pages/mine/help/index')
     },
@@ -630,8 +633,8 @@ export default {
 }
 
 .scroll-y {
-  height: calc(100vh - 88px);
-  background-color: #FFFFFF;
+  //height: calc(100vh - 220px);
+  background: #F9F9F9;
 }
 
 page {
@@ -685,9 +688,49 @@ page {
   }
 
   .header-section {
-    padding: 32rpx 32rpx;
-    background-color: #FFFFFF;
     color: black;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    flex-direction: row;
+    justify-content: center;
+    .section-detail{
+      width: 700rpx;
+      height: 116rpx;
+      background: #FFFFFF;
+      border-radius: 20rpx;
+      display: flex;
+      align-items: center;
+      align-content: center;
+      flex-direction: row;
+      justify-content: space-between;
+      padding: 0 38rpx 0 32rpx;
+
+      .detail-left{
+        display: flex;
+        align-items: center;
+        align-content: center;
+        flex-direction: row;
+        justify-content: center;
+        .icon-left{
+          width: 40rpx;
+          height: 40rpx;
+          margin-right: 30rpx;
+        }
+        .user-info{
+          text{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 28rpx;
+            color: #333333;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+        }
+
+      }
+    }
 
     .login-tip {
       font-size: 18px;
@@ -701,20 +744,6 @@ page {
         font-size: 40px;
       }
     }
-
-    .user-info {
-      margin-left: 15px;
-      max-height: 120rpx;
-      .u_title {
-        white-space: nowrap;
-        font-size: 34rpx;
-        font-weight: 600;
-        color: #343744;
-        line-height: 34rpx;
-        -webkit-background-clip: text;
-        margin-right: 32rpx;
-      }
-    }
   }
 
   .align-center {

plugins/modal.js

@@ -58,8 +58,8 @@ export default {
         content: content,
         cancelText: '取消',
         confirmText: '确定',
-        confirmColor: '#5BB647',
-        cancelColor: '#666666',
+        confirmColor: '#333399',
+        cancelColor: '#000000',
         success: function(res) {
           if (res.confirm) {
             resolve(res.confirm)