feat: 完成个人资料基础布局

src/components/cell.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+interface IProps {
+  label?: string
+  isSelect?: boolean
+  value?: string | number
+  valuePosition?: 'left' | 'right'
+}
+const props = withDefaults(defineProps<IProps>(), {
+  label: '',
+  value: '',
+  isSelect: false,
+  valuePosition: 'left',
+})
+const postionStyle = computed(() => {
+  const { valuePosition } = props
+  return {
+    'justify-content': valuePosition === 'left' ? 'space-between' : 'flex-end',
+  }
+})
+</script>
+
+<template>
+  <view class="cell flex items-center">
+    <view class="cell-left">{{ label }}</view>
+    <view class="cell-right flex-1">
+      <view class="cell-right-content flex" :style="postionStyle">
+        <view class="cell-value">{{ value }}</view>
+        <slot name="right">
+          <template v-if="isSelect">
+            <uv-icon name="arrow-right"></uv-icon>
+          </template>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.cell {
+  padding: 20rpx;
+  border-bottom: 2rpx solid #333;
+}
+</style>

src/components/profile-card.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+interface IProps {
+  bgColor: string
+  link?: string
+}
+
+withDefaults(defineProps<IProps>(), {
+  bgColor: '#fff',
+})
+
+function toPage(link: any) {
+  uni.navigateTo({
+    url: link,
+  })
+}
+</script>
+
+<template>
+  <view
+    class="profile-card flex justify-between items-center h-360rpx"
+    :style="{ backgroundColor: bgColor }"
+    @click="toPage(link)"
+  >
+    <view class="card-info flex-1 flex justify-center items-center">
+      <view class="avatar">
+        <image class="avatar-img" src="https://img.yzcdn.cn/vant/cat.jpeg" mode="" />
+      </view>
+      <view class="name">张三</view>
+      <view class="info-id">id：00315</view>
+    </view>
+    <view class="card-right">点击编辑</view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.profile-card {
+  position: relative;
+  padding: 0 24rpx;
+  margin-bottom: 30rpx;
+}
+.card-info {
+  flex-direction: column;
+  .avatar {
+    display: flex;
+    align-items: center;
+    width: 140rpx;
+    height: 140rpx;
+    overflow: hidden;
+    border-radius: 50%;
+    .avatar-img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .name {
+    margin-top: 20rpx;
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+  }
+  .info-id {
+    margin-top: 10rpx;
+    font-size: 26rpx;
+    color: #999;
+  }
+}
+
+.card-right {
+  position: absolute;
+  top: 50%;
+  right: 24rpx;
+  color: #169bd5;
+  transform: translateY(-50%);
+}
+</style>

src/pages/profile/index.vue

@@ -8,9 +8,61 @@
 }
 </route>
 <template>
-  <view>我的</view>
+  <view class="profile">
+    <profile-card link="/pages/profile/personal-profile/index" />
+    <!--  -->
+    <wd-card title="服务中心">
+      <CardMenuList :list="list" />
+    </wd-card>
+  </view>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+//
+const list = ref([
+  {
+    icon: 'address-list',
+    text: '团队通讯录',
+    link: '',
+  },
+  {
+    icon: 'group',
+    text: '团队分组',
+    link: '',
+  },
+  {
+    icon: 'team-info',
+    text: '团队信息',
+    link: '',
+  },
+  {
+    icon: 'scheduling',
+    text: '团队排班',
+    link: '',
+  },
+  {
+    icon: 'statistics',
+    text: '团队统计',
+    link: '',
+  },
+  {
+    icon: 'tags',
+    text: '团队标签',
+    link: '',
+  },
+])
+</script>
 
-<style></style>
+<style lang="scss" scoped>
+.profile {
+  box-sizing: border-box;
+  height: 100vh;
+  padding-bottom: 20rpx;
+  background-color: #f5f5f5;
+}
+/* #ifdef H5 */
+.profile {
+  height: calc(100vh - 50px);
+}
+/* #endif */
+</style>

src/pages/profile/personal-profile/index.vue

@@ -0,0 +1,48 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '个人资料',
+  },
+}
+</route>
+
+<template>
+  <view class="personal-profile">
+    <view class="personal-main">
+      <cell label="用户头像：">
+        <template #right>
+          <view class="avatar-cell-right flex items-center">
+            <uv-avatar
+              src="https://via.placeholder.com/200x200.png/2878ff"
+              class="mr-2"
+            ></uv-avatar>
+            <uv-icon name="arrow-right"></uv-icon>
+          </view>
+        </template>
+      </cell>
+      <cell label="用户id：" value="1234"></cell>
+      <cell label="用户账号：" value="123456"></cell>
+      <cell label="用户性别：" value="男" isSelect></cell>
+      <cell label="出生年月：" value="2023-10-28" isSelect></cell>
+      <cell label="实名认证：" value="已实名">
+        <template #right>
+          <view class="cell-right color-[#169bd5]">查看记录</view>
+        </template>
+      </cell>
+      <cell label="地区：" value="贵州省/贵阳市/花溪区" isSelect></cell>
+      <cell label="修改密码：" isSelect></cell>
+    </view>
+    <view class="personal-footer mt-80rpx flex justify-center">
+      <uv-button type="error" plain text="退出登录"></uv-button>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+//
+</script>
+
+<style lang="scss" scoped>
+//
+</style>