Skip to content

杨炀 / ztx_wx_gzt

Go to a project
Toggle navigation
Toggle navigation pinning
28052d8d by 张猛
Options

账号信息

1 parent 56a2bb4d
Inline Side-by-side
Showing 2 changed files with 334 additions and 282 deletions
myCenter/index.vue
......@@ -2,36 +2,43 @@
<view class="page">
<view class="bgbg">
<view class="flex">
<view class="imgbox">
<image v-if="state.user.avatar" :src="state.user.avatar"/>
<image v-else :src="config.baseUrl_api + '/fs/static/nodata.png'"/>
</view>
<text class="name">{{ state.user.userName }}</text>
<view class="imgbox">
<image v-if="state.user.avatar" :src="state.user.avatar"/>
<image v-else :src="config.baseUrl_api + '/fs/static/nodata.png'"/>
</view>
<view class="name">
<view>{{ state.user?.dept?.deptName }}</view>
<view>{{ state.user?.userName }}</view>
</view>
</view>
</view>
<view class="rMainBox">
<uni-list :border="false" class="myList">
<uni-list-item thumb="/static/user_icon01.png" title="单位信息" showArrow clickable @click="goPath('/myCenter/teamInfo')">
</uni-list-item>
<uni-list-item thumb="/static/user_icon02.png" title="会员认证" showArrow clickable @click="goPath('/myCenter/auth')">
</uni-list-item>
<!-- <uni-list-item thumb="/static/user_icon03.png" v-show="userType==2" title="账户信息" showArrow clickable>
</uni-list-item> -->
<uni-list-item thumb="/static/user_icon03.png" title="账号安全" showArrow clickable @click="goPath('/myCenter/safe')">
</uni-list-item>
<uni-list-item thumb="/static/user_icon04.png" v-if="userType==2 || userType==6" title="我的订单" showArrow clickable @click="goPath('/myCenter/order')">
</uni-list-item>
</uni-list>
</view>
<view class="fixedBottom" style="background: transparent;box-shadow: none;">
<button @click="loginOut" class="btn btn-red" style="border-radius: 50px;">退出登录</button>
</view>
<view class="rMainBox">
<uni-list :border="false" class="myList">
<uni-list-item clickable showArrow thumb="/static/user_icon01.png" title="单位信息"
@click="goPath('/myCenter/teamInfo')">
</uni-list-item>
<uni-list-item clickable showArrow thumb="/static/user_icon02.png" title="会员认证"
@click="goPath('/myCenter/auth')">
</uni-list-item>
<!-- <uni-list-item thumb="/static/user_icon03.png" v-show="userType==2" title="账户信息" showArrow clickable>
</uni-list-item> -->
<uni-list-item clickable showArrow thumb="/static/user_icon03.png" title="账号安全"
@click="goPath('/myCenter/safe')">
</uni-list-item>
<uni-list-item v-if="userType==2 || userType==6" clickable showArrow thumb="/static/user_icon04.png"
title="我的订单" @click="goPath('/myCenter/order')">
</uni-list-item>
</uni-list>
</view>
<view class="fixedBottom" style="background: transparent;box-shadow: none;">
<button class="btn btn-red" style="border-radius: 50px;" @click="loginOut">退出登录</button>
</view>
</view>
</template>
......@@ -46,7 +53,7 @@ import {
onPullDownRefresh
} from '@dcloudio/uni-app';
import {
ref,reactive,
ref, reactive,
getCurrentInstance
} from 'vue';
......@@ -83,7 +90,7 @@ onLoad(option => {
} else {
proId = option.proId;
}
if(uni.showShareMenu){
if (uni.showShareMenu) {
uni.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
......@@ -94,7 +101,7 @@ onLoad(option => {
function loginOut() {
uni.showModal({
content: `确认退出吗？`,
success: function(res) {
success: function (res) {
if (res.confirm) {
loginServer.logout().finally(() => {
let path = '/login/login';
......@@ -106,17 +113,19 @@ function loginOut() {
}
})
}
function getUser() {
api.getUserProfile().then((response) => {
state.user = response.data.user
if(state.user.avatar&&state.user.avatar.indexOf('http')==-1){
state.user.avatar = config.baseUrl_api+state.user.avatar
}
if (state.user.avatar && state.user.avatar.indexOf('http') == -1) {
state.user.avatar = config.baseUrl_api + state.user.avatar
}
state.roleGroup = response.data.roleGroup
state.postGroup = response.data.postGroup
uni.hideLoading();
uni.hideLoading();
})
}
function init() {
uni.showLoading({
title: '加载中'
......@@ -125,108 +134,134 @@ function init() {
loginServer.getMyOwnMemberInfo().then(res => {
userType.value = app.globalData.userType
memberInfo.value = app.globalData.memberInfo
deptInfo.value = app.globalData.dept || {}
uni.hideLoading();
deptInfo.value = app.globalData.dept || {}
uni.hideLoading();
})
}
function goPath(url){
uni.navigateTo({
url:url
})
function goPath(url) {
uni.navigateTo({
url: url
})
}
</script>
<style scope lang="scss">
.uni-list:after{display: none;}
.page {
width: 100vw;
overflow: hidden;
}
.bgbg{
.flex{align-items: center;}
height: 280rpx;padding:30rpx;
.name{margin-left: 20rpx;
font-size: 36rpx;}
.imgbox{width: 120rpx;
height: 120rpx;overflow: hidden;
// background: #C7C7CD;
// border: 4rpx solid #FFFFFF;
border-radius: 50%;
image{height: 120rpx;width: 120rpx;object-fit: cover;}
}
}
.loginOutIcon {
position: relative;
left: 60rpx;
// top: 180rpx;
image {
width: 50rpx;
height: 50rpx;
}
}
.flexbox {
display: flex;
justify-content: space-around;
text-align: center;
image {
width: 90rpx;
height: 90rpx;
display: block;
margin: auto;
}
}
.image {
width: 25px;
height: 25px;
}
:deep(.uni-section) {
background-color: transparent;
}
:deep(.uni-section .uni-section-header__content) {
font-size: 44rpx;
font-weight: bold;
color: #29343C;
}
:deep(.uni-section .uni-section-header) {
padding: 0 30rpx;
}
.potag {
position: absolute;
right: 60rpx;
top: 0;
}
.girdFather {
background: #fff;
position: relative;
top: -15rpx;
padding: 1rpx 0 0;
border-radius: 20rpx 20rpx 0rpx 0rpx;
box-sizing: border-box;
.girdBox {
top: 0;
padding: 0 0 15rpx;
border-bottom: 20rpx solid #ecf0f6
}
.ttt {
margin: 30rpx 0 20rpx;
padding: 0 20rpx 0;
}
}
.rMainBox {position: relative;top:-120rpx;
box-sizing: border-box;padding: 20rpx 20rpx;
background-color: #fff;
border-radius: 15rpx;
margin: 25rpx;overflow: hidden;
}
</style>
\ No newline at end of file
<style lang="scss" scope>
.uni-list:after {
display: none;
}
.page {
width: 100vw;
overflow: hidden;
}
.bgbg {
.flex {
align-items: center;
}
height: 280rpx;
padding: 30rpx;
.name {
margin-left: 20rpx;
font-size: 36rpx;
}
.imgbox {
width: 120rpx;
height: 120rpx;
overflow: hidden;
// background: #C7C7CD;
// border: 4rpx solid #FFFFFF;
border-radius: 50%;
image {
height: 120rpx;
width: 120rpx;
object-fit: cover;
}
}
}
.loginOutIcon {
position: relative;
left: 60rpx;
// top: 180rpx;
image {
width: 50rpx;
height: 50rpx;
}
}
.flexbox {
display: flex;
justify-content: space-around;
text-align: center;
image {
width: 90rpx;
height: 90rpx;
display: block;
margin: auto;
}
}
.image {
width: 25px;
height: 25px;
}
:deep(.uni-section) {
background-color: transparent;
}
:deep(.uni-section .uni-section-header__content) {
font-size: 44rpx;
font-weight: bold;
color: #29343C;
}
:deep(.uni-section .uni-section-header) {
padding: 0 30rpx;
}
.potag {
position: absolute;
right: 60rpx;
top: 0;
}
.girdFather {
background: #fff;
position: relative;
top: -15rpx;
padding: 1rpx 0 0;
border-radius: 20rpx 20rpx 0rpx 0rpx;
box-sizing: border-box;
.girdBox {
top: 0;
padding: 0 0 15rpx;
border-bottom: 20rpx solid #ecf0f6
}
.ttt {
margin: 30rpx 0 20rpx;
padding: 0 20rpx 0;
}
}
.rMainBox {
position: relative;
top: -120rpx;
box-sizing: border-box;
padding: 20rpx 20rpx;
background-color: #fff;
border-radius: 15rpx;
margin: 25rpx;
overflow: hidden;
}
</style>
......
myCenter/safe.vue
<template>
<view>
<uni-segmented-control :current="current" @clickItem="changeNav" activeColor="#AD181F" styleType="text" :values="items"></uni-segmented-control>
<view v-if="current==0" class="mainbox">
<uni-forms label-width="80">
<uni-forms-item label="用户昵称" required>
<uni-easyinput v-model="user.nickName" :disabled="!edit" />
</uni-forms-item>
<uni-forms-item label="手机号码" required>
<uni-easyinput v-model="user.phonenumber" :disabled="!edit" />
</uni-forms-item>
<uni-forms-item label="邮箱" required>
<uni-easyinput v-model="user.email" :disabled="!edit" />
</uni-forms-item>
<uni-forms-item label="性别" required>
<uni-data-checkbox :disabled="!edit" v-model="user.sex" @change="changeSex" :localdata="sexs" />
</uni-forms-item>
</uni-forms>
<view class="fixedBottom" v-if="edit">
<button class="btn-red-kx" @click="cancel">取消</button>
<button class="btn-red" style="width: 50%;" @click="submit">保存</button>
</view>
<view class="fixedBottom" v-else>
<button class="btn-red" @click="editForm">编辑</button>
</view>
</view>
<view v-if="current==1" class="mainbox">
<uni-forms label-width="80">
<uni-forms-item label="旧密码" name="oldPassword" required>
<uni-easyinput type="password" v-model="form.oldPassword" placeholder="请输入旧密码" />
</uni-forms-item>
<uni-forms-item label="新密码" name="newPassword" required>
<uni-easyinput type="password" v-model="form.newPassword" placeholder="请输入新密码" />
<view class="text-danger" v-show="form.newPassword?.length<8">不足8位</view>
<text class="text-warning">*注： 8~18位大小写字母加数字加特殊符号组合(!@#$%^&*()_+)</text>
</uni-forms-item>
<uni-forms-item label="确认密码" name="confirmPassword" required>
<uni-easyinput type="password" v-model="form.confirmPassword" placeholder="请确认新密码" />
<text class="text-danger" v-show="form.newPassword!==form.confirmPassword">与新密码不一致</text>
</uni-forms-item>
</uni-forms>
<view class="fixedBottom">
<button class="btn-red" @click="handleClick">修改密码</button>
</view>
</view>
</view>
<view>
<uni-segmented-control
:current="current"
:values="items"
activeColor="#AD181F"
styleType="text"
@clickItem="changeNav"/>
<view v-if="current==0" class="mainbox">
<uni-forms label-width="80">
<uni-forms-item label="昵称" required>
<uni-easyinput v-model="user.nickName" :disabled="!edit"/>
</uni-forms-item>
<uni-forms-item label="手机号码" required>
<uni-easyinput v-model="user.phonenumber" :disabled="!edit"/>
</uni-forms-item>
<uni-forms-item label="邮箱" required>
<uni-easyinput v-model="user.email" :disabled="!edit"/>
</uni-forms-item>
<uni-forms-item label="性别" required>
<uni-data-checkbox v-model="user.sex" :disabled="!edit" :localdata="sexs" @change="changeSex"/>
</uni-forms-item>
</uni-forms>
<view v-if="edit" class="fixedBottom">
<button class="btn-red-kx" @click="cancel">取消</button>
<button class="btn-red" style="width: 50%;" @click="submit">保存</button>
</view>
<view v-else class="fixedBottom">
<button class="btn-red" @click="editForm">编辑</button>
</view>
</view>
<view v-if="current==1" class="mainbox">
<uni-forms label-width="80">
<uni-forms-item label="旧密码" name="oldPassword" required>
<uni-easyinput v-model="form.oldPassword" placeholder="请输入旧密码" type="password"/>
</uni-forms-item>
<uni-forms-item label="新密码" name="newPassword" required>
<uni-easyinput v-model="form.newPassword" placeholder="请输入新密码" type="password"/>
<view v-show="form.newPassword?.length<8" class="text-danger">不足8位</view>
<text class="text-warning">*注： 8~18位大小写字母加数字加特殊符号组合(!@#$%^&*()_+)</text>
</uni-forms-item>
<uni-forms-item label="确认密码" name="confirmPassword" required>
<uni-easyinput v-model="form.confirmPassword" placeholder="请确认新密码" type="password"/>
<text v-show="form.newPassword!==form.confirmPassword" class="text-danger">与新密码不一致</text>
</uni-forms-item>
</uni-forms>
<view class="fixedBottom">
<button class="btn-red" @click="handleClick">修改密码</button>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import * as api from '@/common/api.js';
const items = ref(['基本资料','修改密码'])
const items = ref(['账号信息', '修改密码'])
const user = ref({
sex:'0'
sex: '0'
})
const current = ref(0)
const form = ref({})
const edit = ref(false)
const sexs = ref([
{text:'男',value: '0'},{text:'女',value: '1'}
{text: '男', value: '0'}, {text: '女', value: '1'}
])
onLoad((option)=>{
if(option.current){
current.value = 1
}
getUser()
onLoad((option) => {
if (option.current) {
current.value = 1
}
getUser()
})
function changeNav(e){
if (current.value != e.currentIndex) {
current.value = e.currentIndex
}
function changeNav(e) {
if (current.value != e.currentIndex) {
current.value = e.currentIndex
}
}
function getUser() {
api.getUserProfile().then((response) => {
user.value = response.data.user
if(!user.value.sex){
user.value.sex = '0'
}
if (!user.value.sex) {
user.value.sex = '0'
}
})
}
function editForm(){
edit.value = true
function editForm() {
edit.value = true
}
function submit(){
if(!user.value.email){
uni.showToast({
icon:'none',
title:`请输入邮箱`
})
return
}
if(!user.value.nickName){
uni.showToast({
icon:'none',title:`请输入昵称`
})
return
}
if(!user.value.phonenumber){
uni.showToast({
icon:'none',title:`请输入手机号码`
})
return
}
if(!user.value.sex){
uni.showToast({
icon:'none',title:`请选择性别`
})
return
}
api.updateUserProfile(user.value).then(res=>{
uni.showToast({
icon:'none',title:`修改成功`
})
edit.value = false
})
function submit() {
if (!user.value.email) {
uni.showToast({
icon: 'none',
title: `请输入邮箱`
})
return
}
if (!user.value.nickName) {
uni.showToast({
icon: 'none', title: `请输入昵称`
})
return
}
if (!user.value.phonenumber) {
uni.showToast({
icon: 'none', title: `请输入手机号码`
})
return
}
if (!user.value.sex) {
uni.showToast({
icon: 'none', title: `请选择性别`
})
return
}
api.updateUserProfile(user.value).then(res => {
uni.showToast({
icon: 'none', title: `修改成功`
})
edit.value = false
})
}
function changeSex(e){
console.log(e)
function changeSex(e) {
console.log(e)
}
function cancel(){
edit.value = false
getUser()
function cancel() {
edit.value = false
getUser()
}
function validPassword(pwd) {
if (!pwd || pwd.length < 8 || pwd.length > 18) {
return false
......@@ -140,48 +153,52 @@ function validPassword(pwd) {
}
function handleClick() {
if(!form.value.oldPassword){
uni.showToast({
icon:'none',title:`请输入旧密码`
})
return
}
if(!form.value.newPassword){
uni.showToast({
icon:'none',title:`请输入新密码`
})
return
}
if(form.value.newPassword!==form.value.confirmPassword){
uni.showToast({
icon:'none',title:`新密码需与确认密码一致`
})
return
}
if (!validPassword(form.value.newPassword)) {
uni.showModal({
content:`密码需满足8~18位大小写字母加数字加特殊符号组合(!@#$%^&*()_+)`,
success:function(res){
}
})
return
}
api.updateUserPwd({oldPassword:form.value.oldPassword, newPassword:form.value.newPassword}).then(res=>{
uni.showModal({
title:"提示",
content:`修改成功，重新登录生效`,
success: function(res) {
if (res.confirm) {
//确定
}
}
})
})
if (!form.value.oldPassword) {
uni.showToast({
icon: 'none', title: `请输入旧密码`
})
return
}
if (!form.value.newPassword) {
uni.showToast({
icon: 'none', title: `请输入新密码`
})
return
}
if (form.value.newPassword !== form.value.confirmPassword) {
uni.showToast({
icon: 'none', title: `新密码需与确认密码一致`
})
return
}
if (!validPassword(form.value.newPassword)) {
uni.showModal({
content: `密码需满足8~18位大小写字母加数字加特殊符号组合(!@#$%^&*()_+)`,
success: function (res) {
}
})
return
}
api.updateUserPwd({oldPassword: form.value.oldPassword, newPassword: form.value.newPassword}).then(res => {
uni.showModal({
title: "提示",
content: `修改成功，重新登录生效`,
success: function (res) {
if (res.confirm) {
//确定
}
}
})
})
}
</script>
<style scoped lang="scss">
.mainbox{background: #fff;padding: 30rpx;margin: 30rpx;}
<style lang="scss" scoped>
.mainbox {
background: #fff;
padding: 30rpx;
margin: 30rpx;
}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!