beefCattle-uni/src/pages/editPassword/editPassword.vue

<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>