7.个人中心页面

个人中心页面

模仿微信
uview官网
https://xuqu.gitee.io/layout/intro.html
用此模板进行改进

下载插件后找到wxCenter
复制页面至mine

代码如下

<template>
  <view>
    <u-navbar :is-back="false" title=" " :border-bottom="false">
      <view class="u-flex u-row-right" style="width: 100%;">
        <view class="camera u-flex u-row-center">
          <!-- 黑色相机 -->
          <u-icon name="camera-fill" color="#000" size="48"></u-icon>
        </view>
      </view>
    </u-navbar>
    <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
      <view class="u-m-r-10">
        <u-avatar :src="pic" size="140"></u-avatar>
      </view>
      <view class="u-flex-1">
        <view class="u-font-18 u-p-b-20">uview ui</view>
        <view class="u-font-14 u-tips-color">微信号</view>
      </view>
      <view class="u-m-l-10 u-p-10">
        <u-icon name="scan" color="#969799" size="28"></u-icon>
      </view>
      <view class="u-m-l-10 u-p-10">
        <u-icon name="arrow-right" color="#969799" size="28"></u-icon>
      </view>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item icon="rmb-circle" title="支付"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item icon="star" title="收藏"></u-cell-item>
        <u-cell-item icon="photo" title="相册"></u-cell-item>
        <u-cell-item icon="star" title="收藏"></u-cell-item>
        <u-cell-item icon="star" title="收藏"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item icon="setting-fill" title="个人设置"></u-cell-item>
      </u-cell-group>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const pic = ref('https://uviewui.com/common/logo.png')
  const show = ref(true)
</script>

<style lang="scss">
  page {
    background-color: #ededed;
  }

  .camera {
    width: 54px;
    height: 44px;

    &:active {
      background-color: #ededed;
      //点击后灰色
    }
  }

  .user-box {
    background-color: #fff;
  }
</style>

效果图

手机：

微信开发者：

修改页面

修改图标
官网
https://xuqu.gitee.io/components/icon.html

修改如下

mine.vue

<template>
  <view>
    <!-- 黑色相机 -->
   <!-- <u-navbar :is-back="false" title=" " :border-bottom="false">
      <view class="u-flex u-row-right" style="width: 100%;">
        <view class="camera u-flex u-row-center">
          <u-icon name="camera-fill" color="#000" size="48"></u-icon>
        </view>
      </view>
    </u-navbar> -->
    <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-22 u-p-22" >
      <view class="u-m-r-10">
        <u-avatar :src="pic" size="160"></u-avatar>
      </view>
      <view class="u-flex-1">
        <view class="u-font-18 u-p-b-20 u-p-l-20">测试001</view>
        <view class="u-font-14 u-tips-color u-p-l-20">微信号:测试001</view>
      </view>
      <view class="u-m-l-10 u-p-10">
        <u-icon name="scan" color="#969799" size="28"></u-icon>
      </view>
      <view class="u-m-l-10 u-p-10">
        <u-icon name="arrow-right" color="#969799" size="28"></u-icon>
      </view>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item icon="rmb-circle" title="支付"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item icon="thumb-up" title="我的发布"></u-cell-item>
        <u-cell-item icon="shopping-cart" title="我的求购"></u-cell-item>
        <u-cell-item icon="star" title="我的收藏"></u-cell-item>
        <u-cell-item icon="order" title="购买订单"></u-cell-item>
        <u-cell-item icon="car" title="出售订单"></u-cell-item>
        <u-cell-item icon="lock-open" title="修改密码"></u-cell-item>
        
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item icon="setting" title="个人设置"></u-cell-item>
        <u-cell-item icon="close-circle" title="退出账号"></u-cell-item>
      </u-cell-group>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const pic = ref('/static/user.jpg')
  const show = ref(true)
</script>

<style lang="scss">
  page {
    background-color: #ededed;
  }

  .camera {
    width: 54px;
    height: 44px;

    &:active {
      background-color: #ededed;
      //点击后灰色
    }
  }

  .user-box {
    background-color: #fff;
  }
</style>

效果图