feat: ✨ 个人页 设置页 更新个人信息页

src/components/JbcGuess.vue

@@ -70,7 +70,7 @@ onBeforeMount(() => {
 // 暴露方法
 defineExpose({
   resetData,
-  getMore: getGuessList,
+  getMore: getGuessList, // 重命名
 })
 </script>
 
@@ -111,7 +111,7 @@ defineExpose({
   justify-content: space-between;
   padding: 0 20rpx;
   .guess-item {
-    width: calc(375rpx - 60rpx);
+    width: calc(375rpx - 20rpx - 10rpx);
     padding: 24rpx 20rpx 20rpx;
     margin-bottom: 20rpx;
     border-radius: 10rpx;

src/composables/index.ts

@@ -0,0 +1,14 @@
+import type { JbcGuessInstance } from '@/types/components'
+import { ref } from 'vue'
+
+/**
+ * 猜你喜欢滚动到底加载更多
+ * @returns
+ */
+export const useGuessList = () => {
+  const guessRef = ref<JbcGuessInstance>()
+  const onScrollToLower = () => {
+    guessRef.value?.getMore()
+  }
+  return { guessRef, onScrollToLower }
+}

src/pages.json

@@ -39,6 +39,7 @@
       "path": "pages/my/my",
       "style": {
         "navigationStyle": "custom",
+        "navigationBarTextStyle": "white",
         "navigationBarTitleText": "我的"
       }
     },
@@ -102,5 +103,36 @@
         "selectedIconPath": "static/tabs/user_selected.png"
       }
     ]
+  },
+
+  // 分包
+  "subPackages": [
+    {
+      "root": "pagesMember",
+      "pages": [
+        {
+          "path": "settings/settings",
+          "style": {
+            "navigationBarTitleText": "设置"
+          }
+        },
+        {
+          "path": "profile/profile",
+          "style": {
+            "navigationStyle": "custom", // 隐藏顶部默认导航
+            "navigationBarTextStyle": "white",
+            "navigationBarTitleText": "个人信息"
+          }
+        }
+      ]
+    }
+  ],
+
+  // 预下载
+  "preloadRule": {
+    "pages/my/my": {
+      "network": "all",
+      "packages": ["pagesMember"]
+    }
   }
 }

src/pages/index/index.vue

@@ -35,8 +35,8 @@ import { getCategoryAPI, getHomeBannerAPI, getHomeHotAPI } from '@/services/home
 import { onLoad } from '@dcloudio/uni-app'
 import CategoryPanel from './components/CategoryPanel.vue'
 import HotPanel from './components/HotPanel.vue'
-import type { JbcGuessInstance } from '@/types/components'
 import PageSkeleton from './components/PageSkeleton.vue'
+import { useGuessList } from '@/composables'
 
 // 数据加载状态
 const isLoading = ref(true)
@@ -63,12 +63,8 @@ const getHotList = async () => {
 }
 
 // 猜你喜欢滚动到底加载更多
-// 获取实例
+// 滚动到底部
-const guessRef = ref<JbcGuessInstance>()
+const { guessRef, onScrollToLower } = useGuessList()
-// 调用子组件的方法
-const onScrollToLower = () => {
-  guessRef.value?.getMore()
-}
 
 // 下拉刷新
 const isRefreshing = ref(false)

src/pages/my/my.vue

@@ -1,66 +1,232 @@
 <template>
-  <!-- #ifdef APP-PLUS -->
+  <scroll-view class="viewport" scroll-y enable-back-to-top @scrolltolower="onScrollToLower">
-  <view class="status_bar">
+    <!-- 个人资料 -->
-    <view class="top_view"></view>
+    <view class="profile" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
+      <!-- 情况1：已登录 -->
+      <view class="overview" v-if="profile">
+        <navigator url="/pagesMember/profile/profile" hover-class="none">
+          <image class="avatar" mode="aspectFill" :src="profile.avatar"></image>
+        </navigator>
+        <view class="meta">
+          <view class="nickname">
+            {{ profile.nickname?.replace('黑马', '') || profile.account }}
           </view>
-  <!-- #endif -->
+          <navigator class="extra" url="/pagesMember/profile/profile" hover-class="none">
-  <view class="content">
+            <text class="update">更新头像昵称</text>
-    <view class="info"> 会员信息: {{ memberStore.profile }} </view>
+          </navigator>
-    <button @tap="handleLogin">登录</button>
-    <button @tap="handleLogout">退出登录</button>
-    <button @tap="handleTestHttp">http测试</button>
         </view>
+      </view>
+      <!-- 情况2：未登录 -->
+      <view class="overview" v-else>
+        <navigator url="/pages/login/login" hover-class="none">
+          <image
+            class="avatar gray"
+            mode="aspectFill"
+            src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png"
+          ></image>
+        </navigator>
+        <navigator class="meta" url="/pages/login/login" hover-class="none">
+          <view class="nickname"> 未登录 </view>
+          <view class="extra">
+            <text class="tips">点击登录账号</text>
+          </view>
+        </navigator>
+      </view>
+      <navigator class="settings" url="/pagesMember/settings/settings" hover-class="none">
+        设置
+      </navigator>
+    </view>
+    <!-- 我的订单 -->
+    <view class="orders">
+      <view class="title">
+        我的订单
+        <navigator class="navigator" url="/pagesOrder/list/list?type=0" hover-class="none">
+          查看全部订单<text class="icon-right"></text>
+        </navigator>
+      </view>
+      <view class="section">
+        <!-- 订单 -->
+        <navigator
+          v-for="item in orderTypes"
+          :key="item.type"
+          :class="item.icon"
+          :url="`/pagesOrder/list/list?type=${item.type}`"
+          class="navigator"
+          hover-class="none"
+        >
+          {{ item.text }}
+        </navigator>
+        <!-- 客服 -->
+        <button class="contact icon-handset" open-type="contact">售后</button>
+      </view>
+    </view>
+    <!-- 猜你喜欢 -->
+    <view class="guess">
+      <JbcGuess ref="guessRef" />
+    </view>
+  </scroll-view>
 </template>
 
 <script setup lang="ts">
 import { useMemberStore } from '@/stores/modules/member'
-import { http } from '@/utils/http'
+import { computed } from 'vue'
+import JbcGuess from '@/components/JbcGuess.vue'
+import { useGuessList } from '@/composables'
+
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
 
 const memberStore = useMemberStore()
 
-const handleLogin = () => {
+const profile = computed(() => memberStore.profile)
-  memberStore.setProfile({
-    id: 1,
-    avatar: 'https://www.baidu.com',
-    nickname: '张三',
-    account: '11111111111',
-    mobile: '11111111111',
-    token: '11111111111',
-  })
-}
 
-const handleLogout = () => {
+// 订单选项
-  memberStore.clearProfile()
+const orderTypes = [
-}
+  { type: 1, text: '待付款', icon: 'icon-currency' },
+  { type: 2, text: '待发货', icon: 'icon-gift' },
+  { type: 3, text: '待收货', icon: 'icon-check' },
+  { type: 4, text: '待评价', icon: 'icon-comment' },
+]
 
-interface BannerItem {
+// 滚动到底部
-  id: string
+const { guessRef, onScrollToLower } = useGuessList()
-  imgUrl: string
-  title: string
-  hrefUrl: string
-}
-
-const handleTestHttp = async () => {
-  const res = await http<BannerItem[]>({
-    url: '/member/profile',
-    method: 'GET',
-  })
-  console.log(res)
-}
 </script>
 
 <style lang="scss">
-.status_bar {
+page {
-  height: var(--status-bar-height);
+  height: 100%;
-  width: 100%;
+  overflow: hidden;
-  background-color: #f8f8f8;
+  background-color: #f7f7f8;
 }
-.top_view {
+
-  height: var(--status-bar-height);
+.viewport {
+  height: 100%;
+  background-repeat: no-repeat;
+  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/center_bg.png);
+  background-size: 100% auto;
+}
+
+/* 用户信息 */
+.profile {
+  margin-top: 20rpx;
+  position: relative;
+
+  .overview {
+    display: flex;
+    height: 120rpx;
+    padding: 0 36rpx;
+    color: #fff;
+  }
+
+  .avatar {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 50%;
+    background-color: #eee;
+  }
+
+  .gray {
+    filter: grayscale(100%);
+  }
+
+  .meta {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    line-height: 30rpx;
+    padding: 16rpx 0;
+    margin-left: 20rpx;
+  }
+
+  .nickname {
+    max-width: 350rpx;
+    margin-bottom: 16rpx;
+    font-size: 30rpx;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .extra {
+    display: flex;
+    font-size: 20rpx;
+  }
+
+  .tips {
+    font-size: 22rpx;
+  }
+
+  .update {
+    padding: 3rpx 10rpx 1rpx;
+    color: rgba(255, 255, 255, 0.8);
+    border: 1rpx solid rgba(255, 255, 255, 0.8);
+    margin-right: 10rpx;
+    border-radius: 30rpx;
+  }
+
+  .settings {
+    position: absolute;
+    bottom: 0;
+    right: 40rpx;
+    font-size: 30rpx;
+    color: #fff;
+  }
+}
+
+/* 我的订单 */
+.orders {
+  position: relative;
+  z-index: 99;
+  padding: 30rpx;
+  margin: 50rpx 20rpx 0;
+  background-color: #fff;
+  border-radius: 10rpx;
+  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
+
+  .title {
+    height: 40rpx;
+    line-height: 40rpx;
+    font-size: 28rpx;
+    color: #1e1e1e;
+
+    .navigator {
+      font-size: 24rpx;
+      color: #939393;
+      float: right;
+    }
+  }
+
+  .section {
     width: 100%;
-  position: fixed;
+    display: flex;
-  background-color: #f8f8f8;
+    justify-content: space-between;
-  top: 0;
+    padding: 40rpx 20rpx 10rpx;
-  z-index: 999;
+    .navigator,
+    .contact {
+      text-align: center;
+      font-size: 24rpx;
+      color: #333;
+      &::before {
+        display: block;
+        font-size: 60rpx;
+        color: #ff9545;
+      }
+    }
+    .contact {
+      padding: 0;
+      margin: 0;
+      border: 0;
+      background-color: transparent;
+      line-height: inherit;
+    }
+  }
+}
+
+/* 猜你喜欢 */
+.guess {
+  background-color: #f7f7f8;
+  margin-top: 20rpx;
 }
 </style>

src/pagesMember/address/address.vue

@@ -0,0 +1,7 @@
+<template>
+  <view class="address">address</view>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss"></style>

src/pagesMember/profile/profile.vue

@@ -0,0 +1,318 @@
+<template>
+  <view class="viewport">
+    <!-- 导航栏 -->
+    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
+      <navigator open-type="navigateBack" class="back icon-left" hover-class="none"></navigator>
+      <view class="title">个人信息</view>
+    </view>
+    <!-- 头像 -->
+    <view class="avatar">
+      <view class="avatar-content" @tap="handleChangeAvatar">
+        <image class="image" :src="profile?.avatar" mode="aspectFill" />
+        <text class="text">点击修改头像</text>
+      </view>
+    </view>
+    <!-- 表单 -->
+    <view class="form">
+      <!-- 表单内容 -->
+      <view class="form-content">
+        <view class="form-item">
+          <text class="label">账号</text>
+          <text class="account">{{ profile?.account }}</text>
+        </view>
+        <view class="form-item">
+          <text class="label">昵称</text>
+          <input class="input" type="text" placeholder="请填写昵称" v-model="profile.nickname" />
+        </view>
+        <view class="form-item">
+          <text class="label">性别</text>
+          <radio-group @change="onRadioChange">
+            <label class="radio">
+              <radio value="男" color="#27ba9b" :checked="profile?.gender === '男'" />
+              男
+            </label>
+            <label class="radio">
+              <radio value="女" color="#27ba9b" :checked="profile?.gender === '女'" />
+              女
+            </label>
+          </radio-group>
+        </view>
+        <view class="form-item">
+          <text class="label">生日</text>
+          <picker
+            class="picker"
+            mode="date"
+            start="1900-01-01"
+            :end="new Date()"
+            :value="profile?.birthday"
+            @change="onDatePickerChange"
+          >
+            <view v-if="true">{{ profile?.birthday }}</view>
+            <view class="placeholder" v-else>请选择日期</view>
+          </picker>
+        </view>
+        <view class="form-item">
+          <text class="label">城市</text>
+          <picker
+            class="picker"
+            mode="region"
+            :value="profile?.fullLocation?.split(' ')"
+            @change="onRegionPickerChange"
+          >
+            <view v-if="true">{{ profile?.fullLocation }}</view>
+            <view class="placeholder" v-else>请选择城市</view>
+          </picker>
+        </view>
+        <view class="form-item">
+          <text class="label">职业</text>
+          <input class="input" type="text" placeholder="请填写职业" v-model="profile!.profession" />
+        </view>
+      </view>
+      <!-- 提交按钮 -->
+      <button class="form-button" @tap="handleSave">保 存</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useMemberStore } from '@/stores/modules/member'
+import { getProfileAPI, putProfileAPI } from '@/services/profile'
+import { onLoad } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+import type { Gender, ProfileDetail } from '@/types/member'
+
+const memberStore = useMemberStore()
+
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+
+// 个人信息
+const profile = ref({} as ProfileDetail)
+
+// 获取个人信息
+const getProfile = async () => {
+  const res = await getProfileAPI()
+  console.log(res)
+  profile.value = res.result
+}
+
+onLoad(() => {
+  getProfile()
+})
+
+// 修改头像, 和其他更新是分开接口
+const handleChangeAvatar = () => {
+  uni.chooseMedia({
+    count: 1,
+    mediaType: ['image'],
+    success: (res) => {
+      const tempFilePath = res.tempFiles[0].tempFilePath
+      console.log(tempFilePath)
+      uni.uploadFile({
+        url: '/member/profile/avatar',
+        filePath: tempFilePath,
+        name: 'file',
+        success: (res) => {
+          console.log(res)
+          if (res.statusCode === 200) {
+            const avatar = JSON.parse(res.data).result.avatar
+            profile.value!.avatar = avatar
+            memberStore.updateAvatar(avatar)
+            uni.showToast({
+              title: '修改头像成功',
+              icon: 'success',
+            })
+          } else {
+            const errorMsg = JSON.parse(res.data).message
+            uni.showToast({
+              title: errorMsg,
+              icon: 'error',
+            })
+          }
+        },
+      })
+    },
+  })
+}
+
+// 性别选择
+const onRadioChange: UniHelper.RadioGroupOnChange = (e) => {
+  profile.value.gender = e.detail.value as Gender
+}
+
+// 日期选择
+const onDatePickerChange: UniHelper.DatePickerOnChange = (e) => {
+  profile.value.birthday = e.detail.value
+}
+
+// 地区选择
+const onRegionPickerChange: UniHelper.RegionPickerOnChange = (e) => {
+  profile.value.fullLocation = e.detail.value.join(' ')
+}
+
+// 保存
+const handleSave = async () => {
+  const { nickname, gender, birthday, fullLocation, profession } = profile.value
+  const [provinceCode, cityCode, countyCode] = fullLocation!.split(' ')
+  const res = await putProfileAPI({
+    nickname,
+    gender,
+    birthday,
+    profession,
+    provinceCode,
+    cityCode,
+    countyCode,
+  })
+  if (res.code === '1') {
+    uni.showToast({
+      title: '修改个人信息成功',
+      icon: 'success',
+    })
+    memberStore.updateProfile({
+      nickname,
+      gender,
+      birthday,
+      profession,
+    })
+    console.log('更新store')
+    uni.navigateBack()
+  } else {
+    const errorMsg = res.msg
+    uni.showToast({
+      title: errorMsg,
+      icon: 'error',
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+page {
+  background-color: #f4f4f4;
+}
+
+.viewport {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
+  background-size: auto 420rpx;
+  background-repeat: no-repeat;
+}
+
+// 导航栏
+.navbar {
+  position: relative;
+
+  .title {
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+  }
+
+  .back {
+    position: absolute;
+    height: 40px;
+    width: 40px;
+    left: 0;
+    font-size: 20px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+// 头像
+.avatar {
+  text-align: center;
+  width: 100%;
+  height: 260rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .image {
+    width: 160rpx;
+    height: 160rpx;
+    border-radius: 50%;
+    background-color: #eee;
+  }
+
+  .text {
+    display: block;
+    padding-top: 20rpx;
+    line-height: 1;
+    font-size: 26rpx;
+    color: #fff;
+  }
+}
+
+// 表单
+.form {
+  background-color: #f4f4f4;
+
+  &-content {
+    margin: 20rpx 20rpx 0;
+    padding: 0 20rpx;
+    border-radius: 10rpx;
+    background-color: #fff;
+  }
+
+  &-item {
+    display: flex;
+    height: 96rpx;
+    line-height: 46rpx;
+    padding: 25rpx 10rpx;
+    background-color: #fff;
+    font-size: 28rpx;
+    border-bottom: 1rpx solid #ddd;
+
+    &:last-child {
+      border: none;
+    }
+
+    .label {
+      width: 180rpx;
+      color: #333;
+    }
+
+    .account {
+      color: #666;
+    }
+
+    .input {
+      flex: 1;
+      display: block;
+      height: 46rpx;
+    }
+
+    .radio {
+      margin-right: 20rpx;
+    }
+
+    .picker {
+      flex: 1;
+    }
+    .placeholder {
+      color: #808080;
+    }
+  }
+
+  &-button {
+    height: 80rpx;
+    text-align: center;
+    line-height: 80rpx;
+    margin: 30rpx 20rpx;
+    color: #fff;
+    border-radius: 80rpx;
+    font-size: 30rpx;
+    background-color: #27ba9b;
+  }
+}
+</style>

src/pagesMember/settings/settings.vue

@@ -0,0 +1,107 @@
+<template>
+  <view class="viewport">
+    <!-- 列表1 -->
+    <view class="list" v-if="memberStore.profile">
+      <navigator url="/pagesMember/address/address" hover-class="none" class="item arrow">
+        我的收货地址
+      </navigator>
+    </view>
+    <!-- 列表2 -->
+    <view class="list">
+      <button hover-class="none" class="item arrow" open-type="openSetting">授权管理</button>
+      <button hover-class="none" class="item arrow" open-type="feedback">问题反馈</button>
+      <button hover-class="none" class="item arrow" open-type="contact">联系我们</button>
+    </view>
+    <!-- 列表3 -->
+    <view class="list">
+      <navigator hover-class="none" class="item arrow" url="">关于金佰川</navigator>
+    </view>
+    <!-- 操作按钮 -->
+    <view class="action" v-if="memberStore.profile">
+      <view class="button" @tap="handleLogout">退出登录</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useMemberStore } from '@/stores/modules/member'
+
+const memberStore = useMemberStore()
+
+// 退出登录
+const handleLogout = () => {
+  uni.showModal({
+    content: '退出登录',
+    success: (res) => {
+      if (res.confirm) {
+        memberStore.clearProfile()
+        uni.navigateBack()
+      }
+    },
+  })
+}
+</script>
+
+<style lang="scss">
+page {
+  background-color: #f4f4f4;
+}
+
+.viewport {
+  padding: 20rpx;
+}
+
+/* 列表 */
+.list {
+  padding: 0 20rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+  border-radius: 10rpx;
+  .item {
+    line-height: 90rpx;
+    padding-left: 10rpx;
+    font-size: 30rpx;
+    color: #333;
+    border-top: 1rpx solid #ddd;
+    position: relative;
+    text-align: left;
+    border-radius: 0;
+    background-color: #fff;
+    &::after {
+      width: auto;
+      height: auto;
+      left: auto;
+      border: none;
+    }
+    &:first-child {
+      border: none;
+    }
+    &::after {
+      right: 5rpx;
+    }
+  }
+  .arrow::after {
+    content: '\e6c2';
+    position: absolute;
+    top: 50%;
+    color: #ccc;
+    font-family: 'erabbit' !important;
+    font-size: 32rpx;
+    transform: translateY(-50%);
+  }
+}
+
+/* 操作按钮 */
+.action {
+  text-align: center;
+  line-height: 90rpx;
+  margin-top: 40rpx;
+  font-size: 32rpx;
+  color: #333;
+  .button {
+    background-color: #fff;
+    margin-bottom: 20rpx;
+    border-radius: 10rpx;
+  }
+}
+</style>

src/services/profile.ts

@@ -0,0 +1,19 @@
+import { http } from '@/utils/http'
+import type { ProfileDetail, ProfileParams } from '@/types/member'
+
+// 获取个人信息详情
+export const getProfileAPI = () => {
+  return http<ProfileDetail>({
+    url: '/member/profile',
+    method: 'GET',
+  })
+}
+
+// 修改个人信息
+export const putProfileAPI = (data: ProfileParams) => {
+  return http<ProfileParams>({
+    url: '/member/profile',
+    method: 'PUT',
+    data,
+  })
+}

src/stores/modules/member.ts

@@ -1,4 +1,4 @@
-import type { LoginResult } from '@/types/member'
+import type { LoginResult, ProfileDetail, ProfileParams } from '@/types/member'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
@@ -19,11 +19,30 @@ export const useMemberStore = defineStore(
       profile.value = undefined
     }
 
+    // 更新头像
+    const updateAvatar = (avatar: string) => {
+      if (profile.value) {
+        profile.value.avatar = avatar
+      }
+    }
+
+    // 更新个人信息
+    const updateProfile = (
+      val: Pick<ProfileDetail, 'nickname' | 'gender' | 'birthday' | 'profession'>,
+    ) => {
+      console.log('调用action updateProfile', val)
+      if (profile.value) {
+        Object.assign(profile.value, val)
+      }
+    }
+
     // 记得 return
     return {
       profile,
       setProfile,
       clearProfile,
+      updateAvatar,
+      updateProfile,
     }
   },
   {

src/styles/base.scss

@@ -18,7 +18,7 @@ scroll-view {
 
 image {
   width: 100%;
-  height: 100%;
+  // height: 100%;
   vertical-align: middle;
 }
 

src/utils/http.ts

@@ -52,7 +52,7 @@ uni.addInterceptor('uploadFile', interceptorOptions)
  *    3.3 网络错误 -> 提示用户换网络
  */
 type Data<T> = {
-  code: number
+  code: string
   msg: string
   result: T
 }