120 lines
2.5 KiB
Vue
120 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<view class="baseinfo">
|
||
|
|
<view class="box">
|
||
|
|
<u-form
|
||
|
|
labelPosition="left"
|
||
|
|
:model="model1"
|
||
|
|
:rules="rules"
|
||
|
|
ref="loginForm"
|
||
|
|
:labelWidth="0"
|
||
|
|
>
|
||
|
|
<u-form-item
|
||
|
|
v-for="(item, index) in formAttrList"
|
||
|
|
:key="index"
|
||
|
|
:prop="`userInfo.${item.modelName}`"
|
||
|
|
>
|
||
|
|
<u-input
|
||
|
|
:border="index === 2 ? 'none' : 'bottom'"
|
||
|
|
v-model="model1.userInfo[`${item.modelName}`]"
|
||
|
|
:placeholder="item.placeholder"
|
||
|
|
:clearable="true"
|
||
|
|
:type="'password'"
|
||
|
|
></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
</u-form>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="save-btn">
|
||
|
|
<u-button
|
||
|
|
@click="submit"
|
||
|
|
type="primary"
|
||
|
|
:customStyle="{
|
||
|
|
'border-radius': '43rpx',
|
||
|
|
}"
|
||
|
|
>保存</u-button
|
||
|
|
>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
// 表单属性清单
|
||
|
|
const formAttrList = ref([
|
||
|
|
{
|
||
|
|
modelName: "password",
|
||
|
|
type: "password",
|
||
|
|
placeholder: "请输入当前密码",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
modelName: "passwordNew",
|
||
|
|
type: "password",
|
||
|
|
placeholder: "请输入新密码",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
modelName: "passwordConfirm",
|
||
|
|
type: "password",
|
||
|
|
placeholder: "请确认新密码",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
const model1 = <any>reactive({
|
||
|
|
userInfo: {
|
||
|
|
userName: "",
|
||
|
|
password: "",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const rules = ref({
|
||
|
|
"userInfo.password": {
|
||
|
|
type: "string",
|
||
|
|
required: true,
|
||
|
|
message: "请输入当前密码",
|
||
|
|
trigger: ["blur", "change"],
|
||
|
|
},
|
||
|
|
"userInfo.passwordNew": {
|
||
|
|
type: "string",
|
||
|
|
required: true,
|
||
|
|
message: "请输入新密码",
|
||
|
|
trigger: ["blur", "change"],
|
||
|
|
},
|
||
|
|
"userInfo.passwordConfirm": {
|
||
|
|
type: "string",
|
||
|
|
required: true,
|
||
|
|
message: "请输入确认密码",
|
||
|
|
trigger: ["blur", "change"],
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const submit = () => {};
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.baseinfo {
|
||
|
|
background: #f8f8f8;
|
||
|
|
height: 100vh;
|
||
|
|
padding: 26.28rpx 25.64rpx;
|
||
|
|
.box {
|
||
|
|
padding: 18.59rpx;
|
||
|
|
background: #ffffff;
|
||
|
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
|
||
|
|
border-radius: 13rpx;
|
||
|
|
font-size: 27rpx;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #000000;
|
||
|
|
::v-deep .u-border-bottom {
|
||
|
|
border-color: rgb(233 233 233 / 0.76) !important;
|
||
|
|
}
|
||
|
|
::v-deep .u-form-item__body__right__message {
|
||
|
|
height: 0px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
::v-deep .u-form-item {
|
||
|
|
height: 45px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.save-btn {
|
||
|
|
margin-top: 150px;
|
||
|
|
button {
|
||
|
|
width: 80%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|