zcb_APP/pages/my/index.vue

<template>
  <view class="content pdx-32">
    <view class="top_bg">
      <view class="head" @click="$navTo('/pages/personalProfile/index')">
        <view class="flex fd_c">
          <view class="text-36 text-070202 text-500">用户名称用户名称</view>
          <view class="vip_year_bg"> lv.1年 </view>
          <!-- <view class="vip_bg">普通会员</view> -->
        </view>
        <!-- 
          未登录时头像
          /static/image/my/no_login_avatar.png 
        -->
        <image
          class="image"
          src="/static/image/my/my_default_avatar.png"
        ></image>
      </view>

      <view class="info">
        <view class="info_item" @click="$navTo('/pages/myTakeOrder/index')">
          <view class="text-40 text-400 text-070202">
            {{ tagList.takeOrders || 0 }}
          </view>
          <view class="text-24 text-500 text-C8C9C6 mgt-8">我的接单</view>
        </view>
        <view class="line"></view>
        <view class="info_item" @click="$navTo('/pages/myBounty/index')">
          <view class="text-40 text-400 text-070202">
            {{ tagList.myBounty || 0 }}
          </view>
          <view class="text-24 text-500 text-C8C9C6 mgt-8">我的悬赏</view>
        </view>
        <view class="line"></view>
        <view class="info_item" @click="$navTo('/pages/activateVIP/index')">
          <view class="text-40 text-400 text-070202">
            {{ tagList.myVip || 0 }}
          </view>
          <view class="text-24 text-500 text-C8C9C6 mgt-8">开通会员</view>
        </view>
        <view class="line"></view>
        <view class="info_item" @click="$navTo('/pages/inviteFriends/index')">
          <view class="text-40 text-400 text-070202">
            {{ tagList.invite || 0 }}
          </view>
          <view class="text-24 text-500 text-C8C9C6 mgt-8">邀请好友</view>
        </view>
      </view>
    </view>

    <view class="earn">
      <view class="earn_item flex">
        <view>
          <view class="text-24 text-500 text-7E7E7E">累计收益</view>
          <view class="text-44 text-400 text-070202 mgt-18">999.99</view>
        </view>
        <view class="btn">去提现</view>
      </view>
      <view class="earn_item mgl-24">
        <view class="text-24 text-500 text-7E7E7E">悬赏余额</view>
        <view class="text-44 text-400 text-070202 mgt-18">999.99</view>
      </view>
    </view>

    <view class="new_hand">
      <view class="top">
        <view class="flex ai_center">
          <view class="lv">V1</view>
          <view class="mgl-12 text-white text-24 text-400">新手上路</view>
        </view>
        <view class="btn"> 查看攻略 </view>
      </view>
      <view class="bottom">
        <view class="progress_bg flex1">
          <view
            class="progress_bar"
            :style="{
              width: `${progressBar * 100}%`,
              borderRadius: progressBar === 1 ? '64rpx' : '64rpx 0 0 64rpx',
            }"
          ></view>
        </view>
        <view class="mgl-16 text-18 text-400 text-white"
          >等级越高赚钱越多
        </view>
      </view>
    </view>

    <image
      class="radio-16 h-144 w mgt-24"
      src="/static/image/my/post_reward.png"
    ></image>

    <view class="w mgt-24 pdb-30">
      <view
        class="w h-96 flex jc_between ai_center mgt-8 border-bottom-F2F2F7"
        v-for="item in menuList"
        :key="item.name"
        @click="$navTo(item.pagePath)"
      >
        <view class="flex ai_center p-rel">
          <image class="w-48 h-48" :src="item.icon" mode="scaleToFill" />
          <view class="mgl-20 text-28 text-400 text-303030">
            {{ item.name }}
          </view>
          <view v-if="item.badge" class="badge">{{
            badgeNum(item.badge)
          }}</view>
        </view>
        <image
          class="w-48 h-48"
          src="/static/image/common/right_arrow_icon.png"
          mode="scaleToFill"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "我的",
      progressBar: 0.2, //新手上路 进度条%
      tagList: {
        takeOrders: 1322, //我的接单
        myBounty: 322, //我的悬赏
        myVip: 32, //开通会员
        invite: 22, //邀请好友
      },

      menuList: [
        {
          icon: "/static/image/my/tools_icon.png",
          name: "我的工具包",
          pagePath: "/pages/myTools/index",
        },
        {
          icon: "/static/image/my/message_icon.png",
          name: "我的消息",
          pagePath: "/pages/myMessage/index",
          badge: 100,
        },
        {
          icon: "/static/image/my/safeguard_rights_icon.png",
          name: "维权",
          pagePath: "/pages/safeguardRights/index",
        },
        {
          icon: "/static/image/my/earnings_icon.png",
          name: "收益统计",
          pagePath: "/pages/statisticsEarnings/index",
        },
        {
          icon: "/static/image/my/shop_icon.png",
          name: "我的店铺",
          pagePath: "/pages/myShop/index",
          badge: 10,
        },
        {
          icon: "/static/image/my/setting_icon.png",
          name: "系统设置",
          pagePath: "/pages/setting/index",
        },
      ],
    };
  },
  computed: {},
  onLoad() {},
  methods: {
    badgeNum(num) {
      return num > 99 ? "99+" : num;
    },
  },
};
</script>

<style lang="scss" scope>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top_bg {
  width: 100vw;
  height: 568rpx;
  flex-shrink: 0;
  //   background: linear-gradient(to bottom, #ffd8bf, #ffffff);
  background: linear-gradient(180deg, #ffd8bf 10%, #fff 65%);

  .head {
    margin-top: 134rpx;
    padding: 0 32rpx;
    height: 144rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .vip_icon {
      margin-top: 16rpx;
      width: 112rpx;
      height: 44rpx;
    }
    .image {
      width: 144rpx;
      height: 144rpx;
      border-radius: 50%;
    }
  }

  .info {
    margin-top: 40rpx;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .info_item {
      height: 128rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .line {
      height: 40rpx;
      width: 2rpx;
      background: #efedec;
    }
  }
}

.earn {
  margin-top: -122rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .earn_item {
    padding: 16rpx 16rpx 20rpx 24rpx;
    flex: 1;
    height: 148rpx;
    flex-shrink: 0;
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0 0 56rpx 0 #0000001a;
  }

  .btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120rpx;
    height: 48rpx;
    flex-shrink: 0;
    border-radius: 24rpx;
    background: #fe6505;
    box-shadow: 0 8rpx 16rpx 0 #fe650533;
    color: #ffffff;
    text-align: center;
    font-family: "Source Han Sans CN";
    font-size: 24rpx;
    font-weight: 400;
  }
}

.badge {
  display: inline-flex;
  height: 40rpx;
  padding: 4rpx 12rpx;
  justify-content: center;
  align-items: center;
  border-radius: 64rpx;
  background: #e02e24;
  color: #ffffff;
  text-align: center;
  font-family: "Source Han Sans CN";
  font-size: 20rpx;
  font-weight: 500;

  position: absolute;
  left: 188rpx;
  top: -20rpx;
}

.vip_year_bg {
  margin-top: 16rpx;
  width: 112rpx;
  height: 44rpx;
  background: url("/static//image/my/vip_year_bg.png");
  background-size: cover;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-family: "MiSans VF";
  font-size: 22rpx;
  font-weight: 500;
  letter-spacing: 0.66rpx;
  padding-left: 42rpx;
}

.vip_bg {
  margin-top: 16rpx;
  width: 144rpx;
  height: 48rpx;
  line-height: 40rpx;
  background: url("/static//image/my/vip_bg.png");
  background-size: cover;
  padding-left: 42rpx;
  color: #ffffff;
  font-family: "MiSans VF";
  font-size: 22rpx;
  font-weight: 500;
  letter-spacing: -0.66rpx;
}

.new_hand {
  margin-top: 24rpx;
  width: 100%;
  height: 128rpx;
  background: url("/static//image/my/new_hand_bg.png");
  background-size: cover;
  padding-top: 24rpx;
  padding-left: 22rpx;

  .top {
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .lv {
      width: 68rpx;
      height: 38rpx;
      background: url("/static//image/my/grade_bg.png");
      background-size: cover;
      display: flex;
      align-items: center;
      font-size: 14rpx;
      color: #fff;
      padding-left: 24rpx;
    }

    .btn {
      width: 132rpx;
      height: 48rpx;
      line-height: 48rpx;
      flex-shrink: 0;
      border-radius: 24rpx 0 0 24rpx;
      background: linear-gradient(90deg, #ffffffcc 0%, #ffffff66 100%);
      box-shadow: 0 8rpx 24rpx 0 #d07b1780;

      color: #cc730d;
      text-align: center;
      font-family: "Source Han Sans CN";
      font-size: 24rpx;
      font-weight: 400;
    }
  }

  .bottom {
    display: flex;
    align-items: center;
    margin-top: 14rpx;

    .progress_bg {
      height: 12rpx;
      flex-shrink: 0;
      border-radius: 64rpx;
      background: #ffcc91;
    }

    .progress_bar {
      // width: 62rpx;
      width: 0;
      height: 12rpx;
      // flex-shrink: 0;
      border-radius: 64rpx 0 0 64rpx;
      background: #cc730d;
    }

    .full_bar {
      border-radius: 64rpx;
    }
  }
}
</style>