123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <template>
- <view>
- <u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm">
- <u-form-item label="旧密码" borderBottom prop="oldPassword">
- <u--input v-model="inputForm.oldPassword" placeholder="请输入原密码" password border="none"></u--input>
- </u-form-item>
- <u-form-item label="新密码" borderBottom prop="newPassword">
- <u--input v-model="inputForm.newPassword" placeholder="请输入新密码" password border="none"></u--input>
- </u-form-item>
- <u-form-item label="确认新密码" borderBottom prop="confirmNewPassword">
- <u--input v-model="inputForm.confirmNewPassword" placeholder="请确认新密码" password border="none"></u--input>
- </u-form-item>
- <view class="padding-xl">
- <u-button type="primary" @click="formSubmit" text="提交"></u-button>
- </view>
- </u--form>
- </view>
- </template>
- <script>
- import userService from "@/api/sys/userService"
- export default {
- data () {
- return {
- loading: false,
- inputForm: {
- oldPassword: '',
- newPassword: '',
- confirmNewPassword: ''
- },
- rules: {
- 'oldPassword': [
- {
- required: true,
- message: '旧密码不能为空',
- trigger: ['blur', 'change']
- }
- ],
- 'newPassword': [
- {
- required: true,
- message: '新密码不能为空',
- trigger: ['blur', 'change']
- }
- ],
- 'confirmNewPassword': [
- {
- required: true,
- message: '确认密码不能为空',
- trigger: ['blur', 'change']
- },
- {
- validator: (rule, value, callback) => {
- if(this.inputForm.newPassword === this.inputForm.confirmNewPassword){
- return true;
- }else{
- return false;
- }
- },
- message: '你两次输入的新密码不同!'
- },
- ]
- }
- }
- },
- methods:{
- formSubmit: function(e) {
- //定义表单规则
- this.$refs.inputForm.validate().then(res => {
- uni.showLoading()
- userService.savePwd(this.inputForm).then((data) => {
- uni.showToast({title:data, icon:"success"});
- uni.clearStorage();
- uni.reLaunch({
- url: '/pages/login/login'
- })
- }).catch((e)=>{
- console.log(e)
- })
- })
- }
- }
- }
- </script>
- <style>
- .btn-logout {
- margin-top: 100upx;
- width: 80%;
- border-radius: 50upx;
- font-size: 16px;
- color: #fff;
- background: linear-gradient(to right, #365fff, #36bbff);
- }
- .btn-logout-hover {
- background: linear-gradient(to right, #365fdd, #36bbfa);
- }
- .cu-form-group .title {
- min-width: calc(4em + 40px);
- }
- </style>
|