first commit
This commit is contained in:
皮
24
pages/personalcenter/account.vue
Normal file
24
pages/personalcenter/account.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<view class="padding page">
|
||||
<view class="padding bg-white">
|
||||
<view class="flex justify-between padding-bottom solid-bottom">
|
||||
<view>修改登录密码</view>
|
||||
<view class="lg text-gray cuIcon-right"></view>
|
||||
</view>
|
||||
<view class="flex justify-between padding-top padding-bottom solid-bottom">
|
||||
<view>注销账户</view>
|
||||
<view class="lg text-gray cuIcon-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #EBF2FC;
|
||||
}
|
||||
</style>
|
||||
200
pages/personalcenter/edit.vue
Normal file
200
pages/personalcenter/edit.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="padding bg-white">
|
||||
<!-- 头像 -->
|
||||
<view class="flex justify-between align-center padding-tb solid-bottom" @click="chooseAvatar">
|
||||
<view class="text-black">头像</view>
|
||||
<view class="flex align-center">
|
||||
<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
|
||||
<view class="lg text-gray cuIcon-right margin-left-xs"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 昵称 -->
|
||||
<view class="flex justify-between align-center padding-tb solid-bottom">
|
||||
<view class="text-black label-text">昵称</view>
|
||||
<view class="flex align-center flex-sub justify-end">
|
||||
<input class="input-right" v-model="userInfo.nickname" placeholder="请输入昵称" />
|
||||
<view class="lg text-gray cuIcon-right margin-left-xs"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户名 -->
|
||||
<view class="flex justify-between align-center padding-tb solid-bottom">
|
||||
<view class="text-black label-text">用户名</view>
|
||||
<view class="flex align-center">
|
||||
<text class="text-black">{{ userInfo.username }}</text>
|
||||
<view class="lg text-gray cuIcon-right margin-left-xs"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 个性签名 -->
|
||||
<view class="flex justify-between align-center padding-tb solid-bottom">
|
||||
<view class="text-black label-text">个性签名</view>
|
||||
<view class="flex align-center flex-sub justify-end">
|
||||
<input class="input-right" v-model="userInfo.signature" placeholder="请输入个性签名" />
|
||||
<view class="lg text-gray cuIcon-right margin-left-xs"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 性别 -->
|
||||
<view class="flex justify-between align-center padding-tb solid-bottom">
|
||||
<view class="text-black">性别</view>
|
||||
<view class="flex align-center">
|
||||
<view class="gender-switch">
|
||||
<view
|
||||
class="gender-item"
|
||||
:class="{ 'gender-active': userInfo.gender === 1, 'gender-male': userInfo.gender === 1 }"
|
||||
@click="userInfo.gender = 1"
|
||||
>
|
||||
<text class="cuIcon-male"></text>
|
||||
</view>
|
||||
<view
|
||||
class="gender-item"
|
||||
:class="{ 'gender-active': userInfo.gender === 2, 'gender-female': userInfo.gender === 2 }"
|
||||
@click="userInfo.gender = 2"
|
||||
>
|
||||
<text class="cuIcon-female"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期选择 -->
|
||||
<view class="flex justify-between align-center padding-tb solid-bottom" @click="showDatePicker = true">
|
||||
<view class="text-black">日期选择</view>
|
||||
<view class="flex align-center">
|
||||
<text class="text-black">{{ userInfo.birthday || '请选择日期' }}</text>
|
||||
<view class="lg text-gray cuIcon-right margin-left-xs"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<up-calendar
|
||||
:show="showDatePicker"
|
||||
mode="single"
|
||||
@confirm="confirmDate"
|
||||
@close="showDatePicker = false"
|
||||
></up-calendar>
|
||||
|
||||
<button class="bg-blue round margin-top-xl" @click="handleSave">保存</button>
|
||||
<button class="round line-blue margin-top" @click="handleLogout">退出登录</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
const showDatePicker = ref(false);
|
||||
|
||||
const userInfo = reactive({
|
||||
avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
|
||||
nickname: '希缝弗斯',
|
||||
username: '17374339800',
|
||||
signature: '',
|
||||
gender: 1, // 1-男 2-女
|
||||
birthday: '2025-10-09'
|
||||
});
|
||||
|
||||
// 选择头像
|
||||
const chooseAvatar = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
userInfo.avatar = res.tempFilePaths[0];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 日期选择确认
|
||||
const confirmDate = (e) => {
|
||||
userInfo.birthday = e[0];
|
||||
showDatePicker.value = false;
|
||||
};
|
||||
|
||||
// 保存
|
||||
const handleSave = () => {
|
||||
uni.showToast({ title: '保存成功', icon: 'success' });
|
||||
};
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.reLaunch({ url: '/pages/login/login' });
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.input-right {
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.padding-tb {
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.gender-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f0f0f0;
|
||||
border-radius: 40rpx;
|
||||
padding: 4rpx;
|
||||
}
|
||||
|
||||
.gender-item {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.gender-active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.gender-male {
|
||||
background: #2667E9;
|
||||
}
|
||||
|
||||
.gender-female {
|
||||
background: #ff6b81;
|
||||
}
|
||||
|
||||
.line-blue {
|
||||
border: 1rpx solid #2667E9;
|
||||
color: #2667E9;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
18
pages/personalcenter/helpcenter.vue
Normal file
18
pages/personalcenter/helpcenter.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="justify-around flex margin-top-xl">
|
||||
<view><image src="/static/my/Customer service.png" style="width: 100rpx;height: 100rpx;"></image></view>
|
||||
<view><image src="/static/my/Phone.png" style="width: 100rpx;height: 100rpx;"></image></view>
|
||||
</view>
|
||||
<view class="margin-top-xl flex text-gray text-center justify-center">
|
||||
<view>工作时间：</view>
|
||||
<view>09:00-22:00</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
113
pages/personalcenter/my.vue
Normal file
113
pages/personalcenter/my.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<view class="title">
|
||||
<view class="padding">
|
||||
<view class="text-center">我的</view>
|
||||
<view class="flex justify-around" style="padding-top:60rpx;" >
|
||||
<view class="flex">
|
||||
<view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
|
||||
<view>
|
||||
<view>测试</view>
|
||||
<view>17374339800</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="bg-blue round cu-btn">编辑资料</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="padding page">
|
||||
<view class="padding bg-white radius">
|
||||
<view class="flex justify-between padding-bottom solid-bottom">
|
||||
<view class="flex " @click="Helpcenter()">
|
||||
<image src="/static/my/Helpcenter.png" style="width:40rpx;height: 40rpx;"></image>
|
||||
<view class="margin-left">帮助中心</view>
|
||||
</view>
|
||||
<view class="lg text-gray cuIcon-right"></view>
|
||||
</view>
|
||||
<view class="flex justify-between padding-bottom padding-top solid-bottom">
|
||||
<view class="flex">
|
||||
<image src="/static/my/CustomerService.png" style="width:40rpx;height: 40rpx;"></image>
|
||||
<view class="margin-left">智能客服</view>
|
||||
</view>
|
||||
<view class="lg text-gray cuIcon-right"></view>
|
||||
</view>
|
||||
<view class="flex justify-between padding-bottom padding-top solid-bottom">
|
||||
<view class="flex" @click="Account()">
|
||||
<image src="/static/my/Account.png" style="width:40rpx;height: 40rpx;"></image>
|
||||
<view class="margin-left">账号安全</view>
|
||||
</view>
|
||||
<view class="lg text-gray cuIcon-right"></view>
|
||||
</view>
|
||||
<view class="flex justify-between padding-bottom padding-top solid-bottom">
|
||||
<view class="flex" @click="notification()">
|
||||
<image src="/static/my/Notification.png" style="width:40rpx;height: 40rpx;"></image>
|
||||
<view class="margin-left">新消息通知</view>
|
||||
</view>
|
||||
<view class="lg text-gray cuIcon-right"></view>
|
||||
</view>
|
||||
<view class="flex justify-between padding-bottom padding-top solid-bottom">
|
||||
<view class="flex">
|
||||
<image src="/static/my/Delete.png" style="width:40rpx;height: 40rpx;"></image>
|
||||
<view class="margin-left">清除缓存</view>
|
||||
</view>
|
||||
<view class="lg text-gray cuIcon-right"></view>
|
||||
</view>
|
||||
<view class="flex justify-between padding-bottom padding-top solid-bottom">
|
||||
<view class="flex" @click="Settings()">
|
||||
<image src="/static/my/Settings.png" style="width:40rpx;height: 40rpx;"></image>
|
||||
<view class="margin-left">通用设置</view>
|
||||
</view>
|
||||
<view class="lg text-gray cuIcon-right"></view>
|
||||
</view>
|
||||
<view class="flex justify-between padding-bottom padding-top solid-bottom">
|
||||
<view class="flex">
|
||||
<image src="/static/my/Helpcenter.png" style="width:40rpx;height: 40rpx;"></image>
|
||||
<view class="margin-left">关于</view>
|
||||
</view>
|
||||
<view class="lg text-gray cuIcon-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
<button class=" bg-blue round margin-top-xl ">退出登录</button>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
//帮助中心
|
||||
const Helpcenter = () => {
|
||||
uni.navigateTo({
|
||||
url:'/pages/personalcenter/helpcenter'
|
||||
})
|
||||
}
|
||||
//新消息通知
|
||||
const notification = () => {
|
||||
uni.navigateTo({
|
||||
url:'/pages/personalcenter/notification'
|
||||
})
|
||||
}
|
||||
//通用设置
|
||||
const Settings = () => {
|
||||
uni.navigateTo({
|
||||
url:'/pages/personalcenter/settings'
|
||||
})
|
||||
}
|
||||
//账号安全
|
||||
const Account = () => {
|
||||
uni.navigateTo({
|
||||
url:'/pages/personalcenter/account'
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
// min-height: 100vh;
|
||||
background: #EBF2FC;
|
||||
}
|
||||
.title {
|
||||
height: 516rpx;
|
||||
background: radial-gradient( 0% 0% at 78% 8%, #2667E9 0%, #FDFDFD 100%, #719BF0 100%);
|
||||
}
|
||||
</style>
|
||||
35
pages/personalcenter/notification.vue
Normal file
35
pages/personalcenter/notification.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<view class="page padding">
|
||||
<view class="padding bg-white radius">
|
||||
<view class="flex justify-between padding-bottom solid-bottom">
|
||||
<view>横幅消息通知</view>
|
||||
<up-switch v-model="value" activeColor="#07C160" @change="change" ></up-switch>
|
||||
</view>
|
||||
<view class="flex justify-between padding-bottom padding-top solid-bottom">
|
||||
<view>系统声音</view>
|
||||
<up-switch v-model="value" activeColor="#07C160" @change="change"></up-switch>
|
||||
</view>
|
||||
<view class="flex justify-between padding-bottom padding-top solid-bottom">
|
||||
<view>系统震动</view>
|
||||
<up-switch v-model="value" activeColor="#07C160" @change="change"></up-switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref(false)
|
||||
|
||||
const change = (e) => {
|
||||
console.log('change', e);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #EBF2FC;
|
||||
}
|
||||
</style>
|
||||
35
pages/personalcenter/settings.vue
Normal file
35
pages/personalcenter/settings.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<view class="page padding">
|
||||
<view class="padding bg-white radius">
|
||||
<view class="flex justify-between padding-bottom solid-bottom">
|
||||
<view>截屏后提示</view>
|
||||
<up-switch v-model="value" activeColor="#07C160" @change="change" ></up-switch>
|
||||
</view>
|
||||
<view class="flex justify-between padding-bottom padding-top solid-bottom">
|
||||
<view>开启屏幕旋转</view>
|
||||
<up-switch v-model="value" activeColor="#07C160" @change="change"></up-switch>
|
||||
</view>
|
||||
<view class="flex justify-between padding-bottom padding-top solid-bottom">
|
||||
<view>获取地理位置</view>
|
||||
<up-switch v-model="value" activeColor="#07C160" @change="change"></up-switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref(false)
|
||||
|
||||
const change = (e) => {
|
||||
console.log('change', e);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #EBF2FC;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user