【小程序】个人设置-增加退出按钮，样式调整

app/src/pages/user_data/user_data.vue

@@ -17,7 +17,7 @@
     >
         <view class="label">账号</view>
         <view class="content">{{ userInfo?.username }}</view>
-        <u-icon name="arrow-right" size="22"></u-icon>
+        <u-icon name="arrow-right" size="22" color="#666"></u-icon>
     </view>
 
     <!-- 昵称 -->
@@ -27,14 +27,14 @@
     >
         <view class="label">昵称</view>
         <view class="content">{{ userInfo?.nickname }}</view>
-        <u-icon name="arrow-right" size="22"></u-icon>
+        <u-icon name="arrow-right" size="22" color="#666"></u-icon>
     </view>
 
     <!-- 性别 -->
     <view class="item text-nr flex justify-between" @click="changeSex">
         <view class="label">性别</view>
         <view class="content">{{ userInfo?.sex }}</view>
-        <u-icon name="arrow-right" size="22"></u-icon>
+        <u-icon name="arrow-right" size="22" color="#666"></u-icon>
     </view>
 
     <!-- 手机号 -->

app/src/pages/user_set/user_set.vue

@@ -2,8 +2,8 @@
     <view class="user-set">
         <navigator :url="`/pages/user_data/user_data`">
             <view class="item flex bg-white mt-[20rpx]">
-                <u-avatar :src="userInfo.avatar" shape="square"></u-avatar>
+                <u-avatar :src="userInfo.avatar" shape="square" :size="100"></u-avatar>
-                <view class="ml-[20rpx] flex flex-1 justify-between">
+                <view class="ml-[20rpx] flex flex-1 justify-between items-center">
                     <view>
                         <view class="mb-[15rpx] text-xl font-medium">{{ userInfo.nickname }}</view>
                         <view class="text-content text-xs">账号：{{ userInfo.username }}</view>
@@ -19,7 +19,7 @@
             <view class="">登录密码</view>
             <u-icon name="arrow-right" color="#666"></u-icon>
         </view>
-        <view class="item bg-white btn-border flex flex-1 justify-between">
+        <view class="item bg-white flex flex-1 justify-between">
             <view class="">绑定微信</view>
             <view class="flex justify-between">
                 <view class="text-muted mr-[20rpx]">
@@ -41,16 +41,26 @@
                 <u-icon name="arrow-right" color="#666"></u-icon>
             </view>
         </navigator>
-        <view class="item bg-white btn-border flex flex-1 justify-between">
+		<navigator url="/pages/as_us/as_us">
-            <view class="">关于我们</view>
+			<view class="item bg-white flex flex-1 justify-between">
-            <view class="flex justify-between">
+				<view class="">关于我们</view>
-                <view class="text-muted mr-[20rpx]">
+				<view class="flex justify-between">
-                    {{ appStore.config.version }}
+					<view class="text-muted mr-[20rpx]">
-                </view>
+						{{ appStore.config.version }}
-                <u-icon name="arrow-right" color="#666"></u-icon>
+					</view>
-            </view>
+					<u-icon name="arrow-right" color="#666"></u-icon>
-        </view>
+				</view>
-        <u-action-sheet :list="list" v-model="show" @click="handleClick"></u-action-sheet>
+			</view>
+		</navigator>
+		
+		<view class="mt-[60rpx] mx-[26rpx]">
+			<u-button type="primary" shape="circle" @click="logoutHandle">
+			    退出登录
+			</u-button>
+		</view>
+		
+		
+        <u-action-sheet :list="list" v-model="show" @click="handleClick" :safe-area-inset-bottom="true"></u-action-sheet>
     </view>
 </template>
 
@@ -59,9 +69,11 @@ import { getUserInfo } from '@/api/user'
 import { onShow } from '@dcloudio/uni-app'
 import { reactive, ref } from 'vue'
 import { useAppStore } from '@/stores/app'
+import { useUserStore } from '@/stores/user'
 import { AgreementEnum } from '@/enums/agreementEnums'
 
 const appStore = useAppStore()
+const userStore = useUserStore()
 const userInfo = ref({})
 const list = ref([
     {
@@ -72,13 +84,14 @@ const list = ref([
     }
 ])
 const show = ref(false)
+
+// 获取用户信息
 const getUser = async () => {
     const res = await getUserInfo()
-    console.log(res, 'res')
-
     userInfo.value = res
 }
 
+// 修改/忘记密码
 const handleClick = (index: number) => {
     switch (index) {
         case 0:
@@ -90,6 +103,21 @@ const handleClick = (index: number) => {
     }
 }
 
+// 退出登录
+const logoutHandle = () => {
+	uni.showModal({
+		content: '是否退出登录？',
+		confirmColor: '#4173FF',
+		success: ({
+			cancel
+		}) => {
+			if (cancel) return
+			userStore.login()
+			uni.redirectTo({ url: '/pages/login/login' })
+		}
+	})
+}
+
 onShow(() => {
     getUser()
 })
@@ -98,11 +126,11 @@ onShow(() => {
 <style lang="scss" scoped>
 .user-set {
     .item {
-        padding: 30rpx;
+		padding: 30rpx;
     }
 
     .btn-border {
-        border-bottom: 1rpx solid $u-form-item-border-color;
+        border-bottom: 2rpx solid #F8F8F8;
     }
 }
 </style>