Pārlūkot izejas kodu

增加useUser hook

ming 3 gadi atpakaļ
vecāks
revīzija
9a8b1299fc
5 mainītis faili ar 35 papildinājumiem un 32 dzēšanām
  1. 9 0
      hooks/useUser/index.js
  2. 20 19
      pages/my/my.vue
  3. 5 12
      pages/my/userInfo.vue
  4. BIN
      static/images/user-avatar.png
  5. 1 1
      store/index.js

+ 9 - 0
hooks/useUser/index.js

@@ -0,0 +1,9 @@
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+export default () => {
+	const store = useStore()
+	const userInfo = computed(() => store.state.userInfo)
+	
+	return userInfo.value
+}

+ 20 - 19
pages/my/my.vue

@@ -4,27 +4,28 @@
 		<view class="my-box">
 			<view class="layout-box radius-lg top-box">
 				<view class="user-info" v-if="userInfo.name">
-					<fs-avatar size="140rpx" border :src="userInfo.photo" v-if="userInfo.photo"></fs-avatar>
-					<fs-wx-avatar v-else></fs-wx-avatar>
+					<fs-avatar size="140rpx" :src="userInfo.photo || userAvatar"></fs-avatar>
+					<!-- <fs-wx-avatar v-else></fs-wx-avatar> -->
 					
 					<view class="top-box-content">
-						<text class="vm title" style="margin-right: 10rpx;">{{userInfo.name}}</text>
-						<fs-icon type="icon-sex-male" color="#2285FF" v-if="userInfo.sex === '1'"></fs-icon>
-						<fs-icon type="icon-sex-female" colorType="error" v-if="userInfo.sex === '2'"></fs-icon>
+						<text class="vm title">{{userInfo.name}}</text>
+						<fs-icon type="icon-sex-male" color="#2285FF" style="margin-left: 10rpx;" v-if="userInfo.sex === '1'"></fs-icon>
+						<fs-icon type="icon-sex-female" colorType="error" style="margin-left: 10rpx;" v-if="userInfo.sex === '2'"></fs-icon>
 					</view>
-					
-					<fs-icon
-						class="top-box-edit"
-						type="icon-edit"
-						size="40rpx"
-						link="./userInfo">
-					</fs-icon>
 				</view>
 				<view v-else class="user-info">
 					<fs-avatar size="140rpx" link="/modules/common/login/login" border>去登录</fs-avatar>
 				</view>
 				
-				<view :style="{'margin-top': userInfo.name ? '80rpx' : '20rpx'}">
+				<fs-icon
+					v-if="userInfo.name"
+					class="top-box-edit"
+					type="icon-edit"
+					size="40rpx"
+					link="./userInfo">
+				</fs-icon>
+				
+				<view :style="{'margin-top': userInfo.name ? '70rpx' : '20rpx'}">
 					<fs-divide-list :list="shortcutList">
 						<template #default="{item}">
 							<view class="top-box-hd">{{item.num || 0}}</view>
@@ -93,11 +94,11 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { useStore } from 'vuex'
-
-const store = useStore()
-const userInfo = computed(() => store.state.userInfo)
+import useUser from '@/hooks/useUser'
+import userAvatar from '/static/images/user-avatar.png'
 
+const userInfo = useUser()
+console.log(userInfo);
 const shortcutList = ref([
 	{
 		title: '我的访客',
@@ -128,8 +129,8 @@ const handleLogout = () => {
 	
 	&-edit{
 		position: absolute;
-		top: 64rpx;
-		right: 0rpx;
+		top: 10rpx;
+		right: 20rpx;
 	}
 	
 	&-hd{

+ 5 - 12
pages/my/userInfo.vue

@@ -1,5 +1,5 @@
 <template>
-	<fs-form ref="formRef">
+	<fs-form ref="formRef" :model="userInfo">
 		<fs-cell title="头像" justify="right" border tighten>
 			<template #value>
 				<fs-avatar bgColor="#EBEFF5" :src="userInfo.photo" @click="handleUpload">
@@ -14,7 +14,7 @@
 			<fs-field placeholder="请输入手机号" v-model="userInfo.mobile"></fs-field>
 		</fs-form-item>
 		<fs-form-item label="性别">
-			<fs-radio-group inline  v-model="userInfo.sex">
+			<fs-radio-group inline v-model="userInfo.sex">
 				<fs-radio value="1">男</fs-radio>
 				<fs-radio value="2">女</fs-radio>
 			</fs-radio-group>
@@ -26,21 +26,13 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import { useStore } from 'vuex'
 import useForm from '@/hooks/useForm'
 import useValidator from '@/hooks/useValidator'
+import useUser from '@/hooks/useUser'
 import utils from '@/utils/utils'
 
-const store = useStore()
 const validator = useValidator()
-
-// 测试数据,实际使用过程务必删掉
-const testData = {
-	name: 'ming',
-	mobile: '18734826752',
-	sex: '1'
-}
-const userInfo = computed(() => ({...store.state.userInfo, ...testData}))
+const userInfo = { ...useUser() }
 
 const rules = {
 	name: {
@@ -66,6 +58,7 @@ const handleUpload = () => {
 const handleSave = () => {
 	form.validate().then(() => {
 		console.log('success')
+		uni.navigateBack()
 	})
 }
 </script>

BIN
static/images/user-avatar.png


+ 1 - 1
store/index.js

@@ -3,7 +3,7 @@ import { login, wxLogin, logout } from '../services/common'
 
 const store = createStore({
   state: {
-    userInfo: uni.getStorageSync('userInfo') || {},
+    userInfo: uni.getStorageSync('userInfo') || {name: 'ming'},
 		token: uni.getStorageSync('token') || ''
   },
   mutations: {