style(client):优化客户端我的样式（不要改）

src/pages/client/tabBar/mine/TapList.vue

@@ -3,139 +3,116 @@
     <!-- 预约列表 -->
     <view class="appointList">
       <template>
-        <u-cell
-          v-for="item in isLinkList1"
-          :key="item.id"
-          :border="false"
-          :icon="item.icon"
-          :title="item.title"
-          isLink
-          :url="item.url"
-        />
+        <u-cell v-for="item in isLinkList1" :key="item.id" :border="false" :icon="item.icon" :title="item.title" isLink
+          :url="item.url" />
       </template>
     </view>
 
     <view class="other-out-box">
-      <u-cell
-        v-for="item in isLinkList2"
-        :key="item.id"
-        :border="false"
-        :icon="item.icon"
-        :title="item.title"
-        :isLink="item.isLink"
-        :url="item.url"
-        @click="handleCellClick(item)"
-      />
+      <u-cell v-for="item in isLinkList2" :key="item.id" :border="false" :icon="item.icon" :title="item.title"
+        :isLink="item.isLink" :url="item.url" @click="handleCellClick(item)" />
     </view>
 
-    <u-modal
-      :show="showSwitchDialog"
-      :showCancelButton="true"
-      :title="title"
-      :content="content"
-      @confirm="confirmSwitch"
-      @cancel="showSwitchDialog = false"
-    ></u-modal>
+    <u-modal :show="showSwitchDialog" :showCancelButton="true" :title="title" :content="content"
+      @confirm="confirmSwitch" @cancel="showSwitchDialog = false"></u-modal>
   </view>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      isLinkList1: [
-        {
-          id: '0',
-          icon: 'list-dot',
-          title: '预约列表',
-          url: '/pages/client/clientUser/mine/appoint/appoint',
-        },
-        {
-          id: '1',
-          icon: 'list',
-          title: '询价列表',
-          url: '/pages/client/clientUser/inquiryList',
-        },
-      ],
-      isLinkList2: [
-        {
-          id: '0',
-          icon: 'home-fill',
-          title: '我的店铺',
-          url: '',
-          isLink: false,
-        },
-        {
-          id: '1',
-          icon: 'plus-people-fill',
-          title: '我的团队',
-          url: '/pages/client/clientUser/myGroup',
-          isLink: true,
-        },
-        {
-          id: '2',
-          icon: 'server-man',
-          title: '客服中心',
-          url: '/pages/client/clientUser/serviceCenter',
-          isLink: true,
-        },
-        {
-          id: '3',
-          icon: 'share-square',
-          title: '意见反馈',
-          url: '/pages/client/clientUser/mine/setting/feedback',
-          isLink: true,
-        },
-        {
-          id: '4',
-          icon: 'thumb-up',
-          title: '关于我们',
-          url: '/pages/client/clientUser/mine/setting/aboutMine',
-          isLink: true,
-        },
-      ],
+  export default {
+    data() {
+      return {
+        isLinkList1: [{
+            id: '0',
+            icon: 'list-dot',
+            title: '预约列表',
+            url: '/pages/client/clientUser/mine/appoint/appoint',
+          },
+          {
+            id: '1',
+            icon: 'list',
+            title: '询价列表',
+            url: '/pages/client/clientUser/inquiryList',
+          },
+        ],
+        isLinkList2: [{
+            id: '0',
+            icon: 'home-fill',
+            title: '我的店铺',
+            url: '',
+            isLink: false,
+          },
+          {
+            id: '1',
+            icon: 'plus-people-fill',
+            title: '我的团队',
+            url: '/pages/client/clientUser/myGroup',
+            isLink: true,
+          },
+          {
+            id: '2',
+            icon: 'server-man',
+            title: '客服中心',
+            url: '/pages/client/clientUser/serviceCenter',
+            isLink: true,
+          },
+          {
+            id: '3',
+            icon: 'share-square',
+            title: '意见反馈',
+            url: '/pages/client/clientUser/mine/setting/feedback',
+            isLink: true,
+          },
+          {
+            id: '4',
+            icon: 'thumb-up',
+            title: '关于我们',
+            url: '/pages/client/clientUser/mine/setting/aboutMine',
+            isLink: true,
+          },
+        ],
 
-      showSwitchDialog: false,
-      title: '提醒',
-      content: '您确定要从用户端切换到商家端吗?',
-    };
-  },
-
-  methods: {
-    handleCellClick(item) {
-      console.log('item', item);
-      if (item.id == 0) {
-        this.showSwitchDialog = true;
-      } else {
-        console.log('点击了非链接项');
-      }
+        showSwitchDialog: false,
+        title: '提醒',
+        content: '您确定要从用户端切换到商家端吗?',
+      };
     },
 
-    confirmSwitch() {
-      this.showSwitchDialog = false;
-      uni.setStorageSync('tabbar_type', false);
-      uni.navigateTo({
-        url: '/pages/merchant/mine/index',
-      });
+    methods: {
+      handleCellClick(item) {
+        console.log('item', item);
+        if (item.id == 0) {
+          this.showSwitchDialog = true;
+        } else {
+          console.log('点击了非链接项');
+        }
+      },
+
+      confirmSwitch() {
+        this.showSwitchDialog = false;
+        uni.setStorageSync('tabbar_type', false);
+        uni.navigateTo({
+          url: '/pages/merchant/mine/index',
+        });
+      },
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.appointList {
-  margin: 20rpx;
-  padding: 20rpx 10rpx;
-  border-radius: 10rpx;
-  background-color: #fff;
-}
+  .appointList {
+    margin: 20rpx;
+    padding: 20rpx 10rpx;
+    border-radius: 10rpx;
+    background-color: #fff;
+  }
 
-.other-out-box {
-  margin: 20rpx;
-  padding: 20rpx 10rpx;
-  border-radius: 10rpx;
-  margin-top: 0;
-  box-sizing: border-box;
-  background-color: $uni-bg-color;
-}
+  .other-out-box {
+    margin: 20rpx;
+    padding: 20rpx 10rpx;
+    border-radius: 10rpx;
+    margin-top: 0;
+    box-sizing: border-box;
+    background-color: $uni-bg-color;
+  }
 </style>

src/pages/client/tabBar/mine/index.scss

@@ -2,23 +2,29 @@
   min-height: 100vh;
   background-color: #efefef;
   box-sizing: border-box;
+
   .flex {
     display: flex;
   }
+
   .head-info {
     background-color: #337bad;
     height: 360rpx;
     padding: 20rpx;
     position: relative;
+
     .head-flex {
       display: flex;
       align-items: center;
+      justify-content: space-between;
 
       .nickname {
-        font-size: 40rpx;
+        font-size: 36rpx;
         color: #ffffff;
-        margin-bottom: 20rpx;
+        margin-bottom: 8rpx;
+        margin-top: 20rpx;
       }
+
       .setAuth {
         width: 90rpx;
         height: 40rpx;
@@ -34,8 +40,6 @@
     }
 
     .Collect {
-      margin-top: 10rpx;
-
       .grid-text {
         font-size: 30rpx;
         color: #fff;
@@ -46,19 +50,22 @@
       width: 94%;
       position: absolute;
       bottom: -80rpx;
+
       .order-inner-box {
-        padding: 30rpx;
+        padding: 20rpx;
         font-size: 30rpx;
         border-radius: 10rpx;
         background-color: $uni-bg-color;
       }
     }
   }
+
   .income {
     padding: 20rpx;
     border-radius: 10rpx;
-    margin: 90rpx 20rpx 20rpx 20rpx;
+    margin: 100rpx 20rpx 20rpx 20rpx;
     background-color: $uni-bg-color;
+
     .income-head {
       display: flex;
       justify-content: space-between;
@@ -72,6 +79,7 @@
 
     .income-content {
       margin: 15rpx 0;
+
       .num-box {
         padding: 20rpx 0;
         font-size: 36rpx;

src/pages/client/tabBar/mine/index.vue

@@ -3,38 +3,31 @@
     <view :style="{ height: systemBar + 'px', backgroundColor: '#337bad' }" />
     <view>
       <view class="head-info">
-        <view class="head-flex">
-          <view style="margin-right: 20rpx">
-            <u-avatar
-              :src="user_info.avatar"
-              size="80"
-              @tap="$Router.push('/pages/client/clientUser/personal')"
-            />
-          </view>
-          <view>
-            <view class="nickname">{{ user_info.nickname }}</view>
-            <view class="flex">
-              <text class="setAuth" @tap="$Router.push('/pages/client/clientUser/mine/setting')">
-                设置
-              </text>
-              <!-- <text class="setAuth">认证</text> -->
+        <!-- 头部 -->
+        <view class="head-flex" style="margin-top: 35rpx">
+          <view style="margin-right: 20rpx; display: flex">
+            <u-avatar :src="user_info.avatar" size="68" @tap="$Router.push('/pages/client/clientUser/personal')" />
+            <view style="margin-left: 20rpx">
+              <view class="nickname">{{ user_info.nickname || '微信用户' }}</view>
+              <view style="display: flex; color: #fff; align-items: center; font-size: 28rpx">
+                <view>您还未登录</view>
+                <view style="display: flex; align-items: center" @tap="$Router.push('/pages/login/index')">
+                  <view style="color: #ffcc3f; margin-left: 6rpx">去登录</view>
+                  <u-icon name="arrow-right" color="#ffcc3f" size="16"></u-icon>
+                </view>
+              </view>
             </view>
           </view>
+          <view @tap="$Router.push('/pages/client/clientUser/mine/setting')">
+            <u-icon name="setting" color="#ffffff" size="26"></u-icon>
+          </view>
         </view>
         <!-- 列表 -->
         <view class="Collect">
           <u-grid :border="false" col="4">
-            <u-grid-item
-              v-for="(listItem, listIndex) in collectList"
-              :key="listIndex"
-              @tap="$Router.push(listItem.url)"
-            >
-              <u-icon
-                :customStyle="{ paddingTop: 20 + 'rpx' }"
-                :name="listItem.name"
-                :size="28"
-                color="#fff"
-              />
+            <u-grid-item v-for="(listItem, listIndex) in collectList" :key="listIndex"
+              @tap="$Router.push(listItem.url)">
+              <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="28" color="#fff" />
               <text class="grid-text">{{ listItem.title }}</text>
             </u-grid-item>
           </u-grid>
@@ -43,11 +36,7 @@
         <view class="order-out-box">
           <view class="order-inner-box">
             <u-grid :border="false" col="4" style="background-color: #fff">
-              <u-grid-item
-                v-for="(listItem, listIndex) in oderList"
-                :key="listIndex"
-                @tap="gotoOrder(listItem)"
-              >
+              <u-grid-item v-for="(listItem, listIndex) in oderList" :key="listIndex" @tap="gotoOrder(listItem)">
                 <u-icon :name="listItem.name" :size="34" />
                 <text class="grid-text">{{ listItem.title }}</text>
               </u-grid-item>
@@ -79,67 +68,74 @@
 </template>
 
 <script>
-import { maintainUserInfo } from '@/api/client/mine.js';
-import { collectList, oderList, incomeList, listData } from './mine';
-import TapList from './TapList.vue';
-export default {
-  components: {
-    TapList,
-  },
-  data() {
-    return {
-      system: {},
-      systemBar: 0,
-      user_info: [],
-      collectList,
-      oderList,
-      incomeList,
-      listData,
-    };
-  },
-
-  onShow(){
-    this.handlerInitUserMessage();
-  },
-  methods: {
-    getHeight() {
-      wx.getSystemInfo({
-        success: res => {
-          this.system = res;
-        },
-      });
-      this.systemBar = this.system.statusBarHeight;
-      console.log(this.systemBar);
+  import {
+    maintainUserInfo
+  } from '@/api/client/mine.js';
+  import {
+    collectList,
+    oderList,
+    incomeList,
+    listData
+  } from './mine';
+  import TapList from './TapList.vue';
+  export default {
+    components: {
+      TapList,
     },
-    // 获取当前用户信息
-    handlerInitUserMessage() {
-      maintainUserInfo().then(res => {
-        this.user_info = res.data;
-      });
+    data() {
+      return {
+        system: {},
+        systemBar: 0,
+        user_info: [],
+        collectList,
+        oderList,
+        incomeList,
+        listData,
+      };
     },
 
-    // 点击跳转到全部订单
-    gotoOrder(item) {
-      this.$store.commit('order/GET_ORDER_TYPE',item)
-      uni.navigateTo({
-        url: `/pages/client/clientPackage/orderAll`,
-      });
+    onShow() {
+      this.handlerInitUserMessage();
     },
+    methods: {
+      getHeight() {
+        wx.getSystemInfo({
+          success: res => {
+            this.system = res;
+          },
+        });
+        this.systemBar = this.system.statusBarHeight;
+        console.log(this.systemBar);
+      },
+      // 获取当前用户信息
+      handlerInitUserMessage() {
+        maintainUserInfo().then(res => {
+          this.user_info = res.data;
+        });
+      },
 
-    // 点击跳转到我的收益
-    handlerSkipMyProfit() {
-      uni.navigateTo({
-        url: '/pages/client/clientUser/myProfit',
-      });
+      // 点击跳转到全部订单
+      gotoOrder(item) {
+        this.$store.commit('order/GET_ORDER_TYPE', item);
+        uni.navigateTo({
+          url: `/pages/client/clientPackage/orderAll`,
+        });
+      },
+
+      // 点击跳转到我的收益
+      handlerSkipMyProfit() {
+        uni.navigateTo({
+          url: '/pages/client/clientUser/myProfit',
+        });
+      },
     },
-  },
 
-  onLoad() {
-    this.getHeight();
-  },
-};
+    onLoad() {
+      this.getHeight();
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+  @import './index.scss';
 </style>