editPassword.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <route lang="json5" type="page">
  2. {
  3. style: {
  4. navigationBarTitleText: '修改密码',
  5. // navigationBarBackgroundColor: '#f6d7a7',
  6. },
  7. }
  8. </route>
  9. <template>
  10. <view class="text-center container">
  11. <view class="pt-10 pb-20 top-box px-5">
  12. <image src="../../static/logo.png" mode="scaleToFill" class="logo" />
  13. <!-- <view class="con-top">
  14. <view class="h1 mb-6 mt-2">科湃腾肉牛系统</view>
  15. <view class="h3 mb-10 pt-4">简化牧场管理,从这里开始!</view>
  16. </view> -->
  17. <wd-form ref="form" :model="model">
  18. <wd-cell-group border>
  19. <!-- <wd-input
  20. label-width="160rpx"
  21. prop="value1"
  22. clearable
  23. prefix-icon="user"
  24. size="large"
  25. v-model="model.value1"
  26. placeholder="请输入用户名"
  27. /> -->
  28. <wd-input
  29. label-width="160rpx"
  30. prop="oldpassword"
  31. size="large"
  32. show-password
  33. prefix-icon="lock-on"
  34. clearable
  35. v-model="model.oldpassword"
  36. placeholder="请输入原密码"
  37. :rules="[{ required: false, validator: validatorPassword, message: '请输入密码' }]"
  38. />
  39. <wd-input
  40. label-width="160rpx"
  41. prop="password"
  42. size="large"
  43. show-password
  44. prefix-icon="lock-on"
  45. clearable
  46. v-model="model.password"
  47. placeholder="请输入新密码"
  48. :rules="[{ required: false, validator: validatorPassword, message: '请输入新密码' }]"
  49. />
  50. <wd-input
  51. label-width="160rpx"
  52. prop="password1"
  53. size="large"
  54. show-password
  55. prefix-icon="lock-off"
  56. clearable
  57. v-model="model.password1"
  58. placeholder="再次确认新密码"
  59. :rules="[{ required: false, validator: validatorPassword, message: '请确认新密码' }]"
  60. />
  61. </wd-cell-group>
  62. <view class="flex justify-between mt-4 bot px-4">
  63. <!-- <text @click="handleRegist">注册</text> -->
  64. <text @click="handleLogin">去登录</text>
  65. </view>
  66. <view class="footer mt-8">
  67. <wd-button type="primary" size="large" @click="handleSubmit" block>确认修改</wd-button>
  68. </view>
  69. </wd-form>
  70. </view>
  71. </view>
  72. </template>
  73. <script lang="ts" setup>
  74. import { ref } from 'vue'
  75. import { useMessage } from 'wot-design-uni'
  76. defineOptions({
  77. name: 'Login',
  78. })
  79. // 用密码校验
  80. const validatorPassword = (val) => {
  81. if (String(val).length < 6) {
  82. return Promise.reject('密码不能少于6个字符')
  83. } else {
  84. return Promise.resolve()
  85. }
  86. }
  87. const model = reactive<{
  88. password1: string
  89. password: string
  90. oldpassword: string
  91. }>({
  92. oldpassword: '',
  93. password: '',
  94. password1: '',
  95. })
  96. const form = ref()
  97. const message = useMessage()
  98. function handleSubmit() {
  99. form.value
  100. .validate()
  101. .then(({ valid, errors }) => {
  102. if (valid) {
  103. message.show('校验通过')
  104. }
  105. })
  106. .catch((error) => {
  107. console.log(error, 'error')
  108. })
  109. }
  110. function handleRegist() {
  111. uni.navigateTo({ url: '/pages/regist/regist' })
  112. }
  113. function handleLogin() {
  114. // uni.navigateTo({ url: '/pages/login/login' })
  115. uni.switchTab({ url: '/pages/my/my' })
  116. }
  117. </script>
  118. <style lang="scss" scoped>
  119. .bot {
  120. font-size: 28rpx;
  121. color: #bfbfbf;
  122. }
  123. .logo {
  124. width: 140rpx;
  125. height: 140rpx;
  126. border-radius: 50%;
  127. }
  128. //
  129. .con-top {
  130. font-family: 'Times New Roman', Times, serif;
  131. font-size: 56rpx;
  132. font-weight: 600;
  133. color: #f99304;
  134. }
  135. .h3 {
  136. padding-left: 10rpx;
  137. // font-family: 'Times New Roman', Times, serif;
  138. font-size: 36rpx;
  139. // font-style: oblique 4deg;
  140. font-weight: 300;
  141. }
  142. .btn {
  143. height: 80rpx;
  144. margin: 30rpx auto;
  145. font-family: PingFang SC;
  146. font-size: 16px;
  147. line-height: 80rpx;
  148. color: #fff;
  149. border-radius: 60rpx;
  150. }
  151. .user {
  152. margin-bottom: 50rpx;
  153. background-color: #eea441;
  154. }
  155. .tel {
  156. background-color: #2a9d8f;
  157. }
  158. .container {
  159. height: 100vh;
  160. background-color: #fff;
  161. }
  162. .top-box {
  163. // background-color: #fff;
  164. // background: linear-gradient(to bottom, #f6d7a7, #fff);
  165. }
  166. ::v-deep .wd-radio-group.data-v-a6e3f5b0,
  167. .wd-radio-group {
  168. background-color: transparent;
  169. }
  170. ::v-deep .title > .wd-radio__label {
  171. font-size: 20rpx !important;
  172. }
  173. ::v-deep .wd-button.is-success.data-v-aa3a6253 {
  174. background-color: #2a9d8f !important;
  175. }
  176. ::v-deep .wd-icon-user:before,
  177. .wd-icon-user[data-v-7f3ba649]:before {
  178. padding: 0 20rpx;
  179. font-size: 46rpx;
  180. color: #f99304;
  181. }
  182. ::v-deep .wd-icon-lock-on:before,
  183. .wd-icon-lock-on[data-v-7f3ba649]:before {
  184. padding: 0 20rpx;
  185. font-size: 46rpx;
  186. color: #f99304;
  187. }
  188. ::v-deep .wd-icon-lock-off:before,
  189. .wd-icon-lock-on[data-v-7f3ba649]:before {
  190. padding: 0 20rpx;
  191. font-size: 46rpx;
  192. color: #f99304;
  193. }
  194. </style>