0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 个人中心

This commit is contained in:
easy 2023-03-09 17:28:35 +08:00
parent 80faeb5f0f
commit 37e381f961
7 changed files with 119 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/AIcon/index.tsx
View File

@ -77,6 +77,7 @@ const iconKeys = [
'CloudDownloadOutlined',
'PauseCircleOutlined',,
'FormOutlined',
'EyeInvisibleOutlined',
]
const Icon = (props: {type: string}) => {

27
src/views/account/Center/components/EditInfoDialog.vue
View File

@ -5,6 +5,7 @@
@ok="handleOk"
width="770px"
@cancel="emits('update:visible', false)"
:confirmLoading="loading"
>
<j-form :model="form" layout="vertical" ref="formRef">
<j-row :gutter="24">
@ -12,7 +13,10 @@
<j-form-item
label="姓名"
name="name"
:rules="[{ required: true, message: '姓名必填' }]"
:rules="[
{ required: true, message: '姓名必填' },
{ max: 64, message: '最多可输入64个字符' },
]"
>
<j-input
v-model:value="form.name"
@ -56,7 +60,16 @@
</j-row>
<j-row :gutter="24">
<j-col :span="12">
<j-form-item label="手机号">
<j-form-item
label="手机号"
name="telephone"
:rules="[
{
pattern: /^1[3456789]\d{9}$/,
message: '请输入正确手机号',
},
]"
>
<j-input
v-model:value="form.telephone"
placeholder="请输入手机号"
@ -64,7 +77,11 @@
</j-form-item>
</j-col>
<j-col :span="12">
<j-form-item label="邮箱">
<j-form-item
label="邮箱"
name="email"
:rules="[{ type: 'email',message:'邮箱不是一个有效的email' }]"
>
<j-input
v-model:value="form.email"
placeholder="请输入邮箱"
@ -87,17 +104,19 @@ const props = defineProps<{
visible: boolean;
data: userInfoType;
}>();
const loading = ref(false)
const form = ref(props.data);
const formRef = ref<FormInstance>();
const handleOk = () => {
formRef.value?.validate().then(() => {
loading.value = true
updateMeInfo_api(form.value).then((resp) => {
if (resp.status === 200) {
message.success('保存成功');
emits('ok');
emits('update:visible', false);
}
});
}).finally(()=>loading.value = false)
});
};
</script>

17
src/views/account/Center/components/EditPasswordDialog.vue
View File

@ -4,6 +4,7 @@
title="重置密码"
@ok="handleOk"
width="520px"
:confirmLoading="loading"
@cancel="emits('update:visible', false)"
>
<j-form :model="form" layout="vertical" ref="formRef">
@ -11,7 +12,7 @@
label="旧密码"
name="oldPassword"
:rules="[
{ required: true },
{ required: true, message: '请输入密码' },
{ validator: checkMothods.old, trigger: 'blur' },
]"
>
@ -24,7 +25,7 @@
label="密码"
name="newPassword"
:rules="[
{ required: true },
{ required: true,message:'请输入密码' },
{ validator: checkMothods.new, trigger: 'blur' },
]"
>
@ -37,7 +38,7 @@
label="确认密码"
name="confirmPassword"
:rules="[
{ required: true },
{ required: true, message: '请输入确认密码' },
{ validator: checkMothods.confirm, trigger: 'blur' },
]"
>
@ -63,6 +64,7 @@ const emits = defineEmits(['ok', 'update:visible']);
const props = defineProps<{
visible: boolean;
}>();
const loading = ref(false)
const formRef = ref<FormInstance>();
const form = ref<formType>({
oldPassword: '',
@ -72,7 +74,7 @@ const form = ref<formType>({
const checkMothods = {
old: async (_rule: Rule, value: string) => {
if (!value) return Promise.reject('请输入密码');
if (!value) return Promise.reject();
try {
const resp: any = await checkOldPassword_api(value);
if (resp.status === 200 && !resp.result.passed)
@ -83,7 +85,7 @@ const checkMothods = {
}
},
new: async (_rule: Rule, value: string) => {
if (!value) return Promise.reject('请输入密码');
if (!value) return Promise.reject();
else if (
form.value.confirmPassword &&
value !== form.value.confirmPassword
@ -99,7 +101,7 @@ const checkMothods = {
}
},
confirm: async (_rule: Rule, value: string) => {
if (!value) return Promise.reject('请输入确认密码');
if (!value) return Promise.reject();
try {
const resp: any = await validateField_api('password', value);
@ -114,6 +116,7 @@ const checkMothods = {
const handleOk = () => {
formRef.value?.validate().then(() => {
loading.value = true
const params = {
oldPassword: form.value.oldPassword,
newPassword: form.value.newPassword,
@ -124,7 +127,7 @@ const handleOk = () => {
emits('ok');
emits('update:visible', false);
}
});
}).finally(()=>loading.value = false)
});
};
console.clear();

43
src/views/account/Center/index.vue
View File

@ -8,10 +8,15 @@
style="width: 350px; justify-content: center"
>
<img
v-if="userInfo.avatar"
:src="userInfo.avatar"
style="width: 140px; border-radius: 70px"
alt=""
/>
<div class="default-avatar" v-else>
<AIcon type="UserOutlined" />
</div>
<div
style="
width: 100%;
@ -29,6 +34,7 @@
}"
:action="`${BASE_API_PATH}/file/static`"
@change="upload.changeBackUpload"
:beforeUpload="upload.beforeUpload"
>
<j-button>
<AIcon type="UploadOutlined" />
@ -51,11 +57,17 @@
</div>
<div class="info-card">
<p>注册时间</p>
<p>{{ moment(userInfo.createTime).format('YYYY-MM-DD HH:mm:ss') }}</p>
<p>
{{
moment(userInfo.createTime).format(
'YYYY-MM-DD HH:mm:ss',
)
}}
</p>
</div>
<div class="info-card">
<p>电话</p>
<p>{{ userInfo.telephone }}</p>
<p>{{ userInfo.telephone || '-' }}</p>
</div>
<div class="info-card">
<p>姓名</p>
@ -117,7 +129,7 @@
type="link"
@click="editPasswordVisible = true"
>
<AIcon type="EditOutlined" style="color: #1d39c4;" />
<AIcon type="EditOutlined" style="color: #1d39c4" />
</PermissionButton>
</span>
</div>
@ -205,7 +217,7 @@
<EditInfoDialog
v-if="editInfoVisible"
v-model:visible="editInfoVisible"
:data="{...userInfo}"
:data="{ ...userInfo }"
@ok="getUserInfo"
/>
<EditPasswordDialog
@ -277,6 +289,15 @@ const upload = reactive({
message.error('logo上传失败，请稍后再试');
}
},
beforeUpload: ({ size, type }: File) => {
const imageTypes = ['jpg', 'png', 'jfif', 'pjp', 'pjpeg', 'jpeg'];
const typeBool =
imageTypes.filter((typeStr) => type.includes(typeStr)).length > 0;
const sizeBool = size < 4 * 1024 * 1024;
(typeBool && sizeBool) || message.error('请上传正确格式的图片');
return typeBool && sizeBool;
},
});
// 首页视图
const isApiUser = ref<boolean>();
@ -346,7 +367,7 @@ function getViews() {
background-color: #f0f2f5;
min-height: 100vh;
.card {
margin: 24px;
margin: 16px 0;
padding: 24px;
background-color: #fff;
position: relative;
@ -370,6 +391,18 @@ function getViews() {
flex-wrap: wrap;
.content-item {
margin-right: 24px;
.default-avatar {
background-color: #ccc;
color: #fff;
border-radius: 50%;
font-size: 70px;
width: 140px;
height: 140px;
display: flex;
justify-content: center;
align-items: center;
}
.info-card {
width: 25%;

11
src/views/account/NotificationSubscription/components/EditDialog.vue
View File

@ -3,6 +3,7 @@
visible
:title="props.data.id ? '编辑' : '新增'"
width="865px"
:confirmLoading="loading"
@ok="confirm"
@cancel="emits('update:visible', false)"
>
@ -92,6 +93,7 @@ const props = defineProps<{
data: rowType;
}>();
const loading = ref(false);
const initForm = {
subscribeName: '',
topicConfig: {},
@ -106,13 +108,16 @@ const form = ref({
const confirm = () => {
formRef.value &&
formRef.value.validate().then(() => {
save_api(form.value).then((resp) => {
loading.value = true;
save_api(form.value)
.then((resp) => {
if (resp.status === 200) {
message.success('操作成功');
emits('ok')
emits('ok');
emits('update:visible', false);
}
});
})
.finally(() => (loading.value = false));
});
};

29
src/views/home/index.vue
View File

@ -17,12 +17,22 @@
<div class="card">
<h3 style="margin: 0 0 24px 0">基本信息</h3>
<p>
<span style="font-weight: bold">clientId: </span>
<span>{{ clientId }}</span>
<span class="label">clientId: </span>
<span class="value">{{ clientId }}</span>
</p>
<p>
<span style="font-weight: bold">secureKey:</span>
<span>{{ secureKey }}</span>
<span class="label">secureKey:</span>
<span class="value">
{{ showKey ? secureKey : '****************' }}
</span>
<AIcon
:type="
showKey
? 'EyeOutlined'
: 'EyeInvisibleOutlined'
"
@click="showKey = !showKey"
/>
</p>
</div>
</template>
@ -47,7 +57,7 @@ const currentView = ref<string>('');
const loading = ref<boolean>(true);
const clientId = useUserInfo().$state.userInfos.id;
const secureKey = ref<string>('');
const showKey = ref(false);
// 获取选择的视图
const setCurrentView = () => {
getView_api().then((resp: any) => {
@ -91,6 +101,15 @@ if (isNoCommunity) {
p {
margin: 0;
font-size: 16px;
.label {
font-weight: bold;
margin-right: 3px;
}
.value {
margin-right: 10px;
font-size: 14px;
}
}
}
}

7
src/views/system/Platforms/Api/index.vue
View File

@ -3,7 +3,7 @@
<div class="top">
<slot name="top" />
</div>
<j-row :gutter="24">
<j-row :gutter="24" class="content">
<j-col
:span="24"
v-if="props.showTitle"
@ -151,11 +151,16 @@ function init() {
<style lang="less" scoped>
.api-page-container {
.content {
background-color: #fff;
padding: 24px;
margin: 0 !important;
.tree-content {
padding-bottom: 30px;
height: calc(100vh - 230px);
overflow-y: auto;
border-right: 1px solid #e9e9e9;
}
}
}
</style>