<route lang="json5" type="page"> { style: { navigationBarTitleText: '修改密码', // navigationBarBackgroundColor: '#f6d7a7', }, } </route> <template> <view class="text-center container"> <view class="pt-10 pb-20 top-box px-5"> <image src="../../static/logo.png" mode="scaleToFill" class="logo" /> <!-- <view class="con-top"> <view class="h1 mb-6 mt-2">科湃腾肉牛系统</view> <view class="h3 mb-10 pt-4">简化牧场管理,从这里开始!</view> </view> --> <wd-form ref="form" :model="model"> <wd-cell-group border> <!-- <wd-input label-width="160rpx" prop="value1" clearable prefix-icon="user" size="large" v-model="model.value1" placeholder="请输入用户名" /> --> <wd-input label-width="160rpx" prop="oldpassword" size="large" show-password prefix-icon="lock-on" clearable v-model="model.oldpassword" placeholder="请输入原密码" :rules="[{ required: false, validator: validatorPassword, message: '请输入密码' }]" /> <wd-input label-width="160rpx" prop="password" size="large" show-password prefix-icon="lock-on" clearable v-model="model.password" placeholder="请输入新密码" :rules="[{ required: false, validator: validatorPassword, message: '请输入新密码' }]" /> <wd-input label-width="160rpx" prop="password1" size="large" show-password prefix-icon="lock-off" clearable v-model="model.password1" placeholder="再次确认新密码" :rules="[{ required: false, validator: validatorPassword, message: '请确认新密码' }]" /> </wd-cell-group> <view class="flex justify-between mt-4 bot px-4"> <!-- <text @click="handleRegist">注册</text> --> <text @click="handleLogin">去登录</text> </view> <view class="footer mt-8"> <wd-button type="primary" size="large" @click="handleSubmit" block>确认修改</wd-button> </view> </wd-form> </view> </view> </template> <script lang="ts" setup> import { ref } from 'vue' import { useMessage } from 'wot-design-uni' defineOptions({ name: 'Login', }) // 用密码校验 const validatorPassword = (val) => { if (String(val).length < 6) { return Promise.reject('密码不能少于6个字符') } else { return Promise.resolve() } } const model = reactive<{ password1: string password: string oldpassword: string }>({ oldpassword: '', password: '', password1: '', }) const form = ref() const message = useMessage() function handleSubmit() { form.value .validate() .then(({ valid, errors }) => { if (valid) { message.show('校验通过') } }) .catch((error) => { console.log(error, 'error') }) } function handleRegist() { uni.navigateTo({ url: '/pages/regist/regist' }) } function handleLogin() { // uni.navigateTo({ url: '/pages/login/login' }) uni.switchTab({ url: '/pages/my/my' }) } </script> <style lang="scss" scoped> .bot { font-size: 28rpx; color: #bfbfbf; } .logo { width: 140rpx; height: 140rpx; border-radius: 50%; } // .con-top { font-family: 'Times New Roman', Times, serif; font-size: 56rpx; font-weight: 600; color: #f99304; } .h3 { padding-left: 10rpx; // font-family: 'Times New Roman', Times, serif; font-size: 36rpx; // font-style: oblique 4deg; font-weight: 300; } .btn { height: 80rpx; margin: 30rpx auto; font-family: PingFang SC; font-size: 16px; line-height: 80rpx; color: #fff; border-radius: 60rpx; } .user { margin-bottom: 50rpx; background-color: #eea441; } .tel { background-color: #2a9d8f; } .container { height: 100vh; background-color: #fff; } .top-box { // background-color: #fff; // background: linear-gradient(to bottom, #f6d7a7, #fff); } ::v-deep .wd-radio-group.data-v-a6e3f5b0, .wd-radio-group { background-color: transparent; } ::v-deep .title > .wd-radio__label { font-size: 20rpx !important; } ::v-deep .wd-button.is-success.data-v-aa3a6253 { background-color: #2a9d8f !important; } ::v-deep .wd-icon-user:before, .wd-icon-user[data-v-7f3ba649]:before { padding: 0 20rpx; font-size: 46rpx; color: #f99304; } ::v-deep .wd-icon-lock-on:before, .wd-icon-lock-on[data-v-7f3ba649]:before { padding: 0 20rpx; font-size: 46rpx; color: #f99304; } ::v-deep .wd-icon-lock-off:before, .wd-icon-lock-on[data-v-7f3ba649]:before { padding: 0 20rpx; font-size: 46rpx; color: #f99304; } </style>