chelvc-custom/src/pages/tabbar/mine/index.vue

<template>
  <view class="container">
    <view class="head-wrap">
      <view class="content">
        <view class="avatar-wrap" @tap="$Router.push('/pages/user/info/index')">
          <u-avatar :src="user_info.avatar" size="80"></u-avatar>
        </view>
        <view>
          <!-- 已登录 -->
          <view class="user-base" v-if="user_info.nickname">
            <view class="user-nickname">{{ user_info.nickname }}</view>
            <view class="btn-wrap">
              <view class="btn-content" @tap="$Router.push('/pages/user/settings/index')">设置</view>
              <view class="btn-content">认证</view>
            </view>
          </view>

          <!-- 未登录 -->
          <view class="clickLogin" v-else @tap="$Router.push('/pages/login/index')">点击登录/注册
          </view>
        </view>
      </view>

      <!-- 收藏 -->
      <view class="Collect">
        <u-grid :border="false" col="4">
          <u-grid-item v-for="(listItem, listIndex) in list1" :key="listIndex" @tap="$Router.push(listItem.url)">
            <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="24" color="#fff" />
            <text class="grid-text">{{ listItem.title }}</text>
          </u-grid-item>
        </u-grid>
      </view>

      <!-- 我的订单 -->
      <!-- <view
        class="order-out-box"
        @tap="$Router.push('/pages/user/myOrder/index')"
      > -->
      <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 list2" :key="listIndex">
              <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="34"
                @tap="gotoOrder(listItem)"></u-icon>
              <text class="grid-text">{{ listItem.title }}</text>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </view>

    <!-- 我的收益 -->
    <view class="income-out-box">
      <view class="income-inner-box">
        <view class="income-head">
          <text class="my-income">我的收益</text>
          <u-icon name="arrow-right" />
        </view>
        <view class="income-content">
          <u-grid :border="false" col="4" bgColor="#fff">
            <u-grid-item v-for="(listItem, listIndex) in incomeList" :key="listIndex">
              <view class="num-box">{{ listItem.num }}元</view>
              <view class="num-title">{{ listItem.title }}</view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </view>

    <!-- 预约列表 -->
    <view class="appointList">
      <u-cell icon="setting-fill" title="预约列表" isLink url="/pages/user/appoint/index" />
    </view>

    <view class="other-out-box">
      <view class="other-inner-box">
        <u-cell-group :border="false">
          <u-cell size="large" :border="false" icon="setting-fill" title="我的团队" isLink url="" @tap="$Router.push('/pages/user/mygroup/index')"></u-cell>
          <u-cell size="large" :border="false" icon="setting-fill" title="关于我们" isLink url="" @tap="$Router.push('/pages/user/aboutmy/index')"></u-cell>
          <!-- <u-cell size="large" :border="false" icon="setting-fill" title="隐私条款" isLink url="" @tap="$Router.push('/pages/user/privacypolicy/index')"></u-cell> -->
          <u-cell size="large" :border="false" icon="setting-fill" title="客服中心" isLink url="" @tap="$Router.push('/pages/user/servicecenter/index')"></u-cell>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>
<script>
  // import { mapGetters } from 'vuex';
  import { maintainUserInfo } from "@/api/mine.js"
  export default {
    data() {
      return {
        list1: [{
            name: 'photo',
            title: '收藏',
            url: '/pages/user/collect/list',
          },
          {
            name: 'lock',
            title: '积分',
            url: '/pages/user/score/index',
          },
          {
            name: 'star',
            title: '询价记录',
            url: '/pages/user/inquiry/index',
          },
          {
            name: 'hourglass',
            title: '优惠券',
            url: '/pages/user/coupon/index',
          },
        ],
        list2: [{
            name: 'photo',
            title: '我的订单',
          },
          {
            name: 'lock',
            title: '待付款',
            order: true,
          },
          {
            name: 'star',
            title: '已完成',
          },
          {
            name: 'hourglass',
            title: '待评价',
          },
        ],
        incomeList: [{
            num: '0.00',
            title: '总收益',
          },
          {
            num: '0.00',
            title: '本月收益',
          },
          {
            num: '0.00',
            title: '本周收益',
          },
          {
            num: '0.00',
            title: '可提现',
          },
        ],
        user_info:[] // 个人信息
      };
    },
    computed: {
      // ...mapGetters(['user_info']),
    },
    mounted() {
      this.handlerInitUserMessage()
    },
    methods: {
      // 获取当前用户信息
      handlerInitUserMessage(){
        maintainUserInfo().then(res=>{
          this.user_info = res.data
          // this.$store.dispatch("SET_MERCGANT_ID",res.data.id)
        })
      },
      gotoOrder(item) {
        if (item.order) {
          this.$Router.push('/pages/order/order');
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .container {
    padding-top: 5px;
    min-height: 100vh;
    background-color: #efefef;
  }

  /* 顶部登录 */
  .head-wrap {
    padding-top: 5px;
    margin-top: 5px;
    background-color: #347caf;
    height: 390rpx;

    .content {
      display: flex;
      padding: 38rpx 0 0 36rpx;
      box-sizing: border-box;

      .clickLogin {
        font-size: 48rpx;
        color: #ffffff;
        margin-top: 40rpx;
        margin-left: 20rpx;
      }

      .avatar-wrap {
        display: inline-block;
      }

      .user-base {
        margin-left: 10rpx;
        vertical-align: middle;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .user-nickname {
          margin-top: 20rpx;
          font-size: 40rpx;
          color: #ffffff;
        }

        .btn-wrap {
          width: 160rpx;
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;

          .btn-content {
            font-size: 24rpx;
            padding: 0 16rpx;
            border-radius: 16rpx;
            background-color: #ffffff;
          }
        }
      }
    }

    .Collect {
      margin-top: 10rpx;

      // 宫格颜色
      .grid-text {
        font-size: 30rpx;
        color: #fff;
        margin-top: 5rpx;
        box-sizing: border-box;
      }
    }

    .order-out-box {
      margin-top: 30rpx;
      padding: 10rpx 16rpx;
      box-sizing: border-box;

      .order-inner-box {
        font-size: 30rpx;
        padding-bottom: 30rpx;
        background-color: $uni-bg-color;
        border-radius: 10rpx;
      }
    }
  }

  .income-out-box {
    margin-top: 110rpx;
    padding: 10rpx 16rpx;
    box-sizing: border-box;

    .income-inner-box {
      padding: 20rpx;
      background-color: $uni-bg-color;

      .income-head {
        display: flex;
        justify-content: space-between;

        .my-income {
          color: $uni-color-primary;
          font-size: 32rpx;
          font-weight: 600;
        }
      }

      .income-content {
        .num-box {
          padding: 20rpx 0;
          font-size: 36rpx;
          font-weight: 600;
          color: $uni-text-color;
        }

        .num-title {
          font-size: 28rpx;
          color: $uni-text-color-grey;
        }
      }
    }
  }

  .other-out-box {
    margin-top: 10rpx;
    padding: 20rpx 16rpx;
    box-sizing: border-box;

    .other-inner-box {
      background-color: $uni-bg-color;
    }
  }

  .appointList {
    background-color: #fff;
    margin: 10rpx 16rpx 0 16rpx;
  }
</style>