mirage
/
edu
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
洪树泽 2022-09-13 10:54:36 +08:00
parent 77b2b5ccb9
commit 5ecd0ef668
2 changed files with 48 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/pages/user_data/user_data.vue
View File

@ -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>
<!-- 手机号 -->

62
app/src/pages/user_set/user_set.vue
View File

@ -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>
<view class="ml-[20rpx] flex flex-1 justify-between">
<u-avatar :src="userInfo.avatar" shape="square" :size="100"></u-avatar>
<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">
<view class="">关于我们</view>
<view class="flex justify-between">
<view class="text-muted mr-[20rpx]">
{{ appStore.config.version }}
</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>
<navigator url="/pages/as_us/as_us">
<view class="item bg-white flex flex-1 justify-between">
<view class="">关于我们</view>
<view class="flex justify-between">
<view class="text-muted mr-[20rpx]">
{{ appStore.config.version }}
</view>
<u-icon name="arrow-right" color="#666"></u-icon>
</view>
</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>