chelvc-custom/src/pages/client/tabBar/mine.vue

<template>
  <view class="container">
    <view class="head-wrap">
      <view class="content">
        <view class="avatar-wrap">
          <u-avatar :src="user_info.avatar" @click="onClickAvatar" size="80"></u-avatar>
        </view>
        <view class="user-nickname">
          <u--text
            size="18"
            bold
            :text="user_info.nickname ? user_info.nickname : 'fadsfdaf'"
          ></u--text>
          <u--text size="12" text="欢迎加入车旅程"></u--text>
        </view>
        <view>
          <!-- 已登录 -->
          <!-- <view class="user-base" v-if="user_info.nickname"> -->
          <view class="user-base">
            <view class="btn-wrap">
              <u-icon
                size="30"
                @tap="$Router.push('/pages/client/clientUser/setting')"
                name="setting"
              ></u-icon>
            </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 collectList"
            :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">
        <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-icon
                :customStyle="{ paddingTop: 20 + 'rpx' }"
                :name="listItem.name"
                :size="34"
              ></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" @click="handlerSkipMyProfit">
        <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/client/clientUser/appoint" />
      <u-cell icon="setting-fill" title="我要开店" isLink />
    </view>

    <view class="other-out-box">
      <view class="other-inner-box">
        <u-cell-group :border="false">
          <u-cell
            v-for="(item, index) in listData"
            :key="index"
            size="large"
            :border="false"
            :icon="item.icon"
            :title="item.title"
            isLink
            :url="item.url"
          ></u-cell>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
import { maintainUserInfo } from '@/api/client/mine.js';
export default {
  data() {
    return {
      collectList: [
        {
          name: 'photo',
          title: '收藏',
          url: '/pages/client/clientUser/collectList',
        },
        {
          name: 'lock',
          title: '积分',
          url: '/pages/client/clientUser/myScore',
        },
        {
          name: 'star',
          title: '询价记录',
          url: '/pages/client/clientUser/inquiryList',
        },
        {
          name: 'hourglass',
          title: '优惠券',
          url: '/pages/client/clientUser/coupon',
        },
      ],
      oderList: [
        {
          name: 'order',
          title: '全部订单',
          type: 0,
        },
        {
          name: 'bag-fill',
          title: '待付款',
          type: 1,
        },
        {
          name: 'car-fill',
          title: '已付款',
          type: 2,
        },
        {
          name: 'heart',
          title: '待评价',
          type: 3,
        },
      ],
      incomeList: [
        {
          num: '0.00',
          title: '总收益',
        },
        {
          num: '0.00',
          title: '本月收益',
        },
        {
          num: '0.00',
          title: '本周收益',
        },
        {
          num: '0.00',
          title: '可提现',
        },
      ],
      listData: [
        {
          id: '0',
          icon: 'setting-fill',
          title: '我的团队',
          url: '/pages/client/clientUser/myGroup',
        },
        {
          id: '1',
          icon: 'setting-fill',
          title: '我要推广',
          url: '/pages/client/clientUser/myGroup',
        },
        {
          id: '2',
          icon: 'setting-fill',
          title: '客服中心',
          url: '/pages/client/clientUser/serviceCenter',
        },
        {
          id: '3',
          icon: 'setting-fill',
          title: '商务合作',
          url: '/pages/client/clientUser/serviceCenter',
        },
        {
          id: '4',
          icon: 'setting-fill',
          title: '意见反馈',
          url: '/pages/client/clientUser/serviceCenter',
        },
      ],
      user_info: {}, // 个人信息
      avatar: '/pages/static', // 用于存储图片路径
    };
  },

  async mounted() {
    await this.handlerInitUserMessage();
  },
  methods: {
    // 获取当前用户信息
    handlerInitUserMessage() {
      maintainUserInfo().then(res => {
        this.user_info = res.data;
      });
    },

    // 点击头像
    async onClickAvatar() {
      try {
        const res = await uni.showActionSheet({
          itemList: ['拍照', '从相册选择'],
        });

        if (res.tapIndex === 0) {
          // 用户选择拍照
          this.takePhoto();
        } else if (res.tapIndex === 1) {
          // 用户选择从相册选择
          this.chooseImage();
        }
      } catch (error) {
        console.error(error);
      }
    },

    // 拍照
    takePhoto() {
      uni.chooseImage({
        sourceType: ['camera'],
        count: 1,
        success: res => {
          const tempFilePaths = res.tempFilePaths;
          // 调用上传图片的方法
          this.uploadAvatar(tempFilePaths[0]);
        },
        fail: error => {
          console.error(error);
        },
      });
    },
    //从相册中选择
    chooseImage() {
      uni.chooseImage({
        sourceType: ['album'],
        count: 1,
        success: res => {
          const tempFilePaths = res.tempFilePaths;
          // 调用上传图片的方法
          this.uploadAvatar(tempFilePaths[0]);
        },
        fail: error => {
          console.error(error);
        },
      });
    },

    // 上传头像
    uploadAvatar(filePath) {
      // 在这里实现上传头像的逻辑，将filePath作为参数传入
      const newImagePath = api.uploadImage(filePath);
      this.user_info.avatar = newImagePath;
      this.$forceUpdate(); // 手动触发组件的重新渲染
    },

    // 点击跳转到全部订单
    gotoOrder(item) {
      uni.navigateTo({
        url: `/pages/client/clientPackage/orderAll?type=${item.type}`,
      });
    },

    // 点击跳转到我的收益
    handlerSkipMyProfit() {
      uni.navigateTo({
        url: '/pages/client/clientUser/myProfit',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #efefef;
}

/* 顶部登录 */
.head-wrap {
  background-color: #c8c9cc;
  height: 390rpx;
  padding-top: 40rpx;

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

    .user-nickname {
      margin-left: -215rpx;
      margin-top: 50rpx;
    }

    .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;

      .btn-wrap {
        width: 160rpx;
        margin-top: 40rpx;
        margin-right: -25rpx;
      }
    }
  }

  .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>