uniapp微信小程序-项目实战实现修改密码功能

gitbbs

1. <template>
   
2. <view>
   
3. <!-- 密码三个 -->
   
4. <view class="password" v-for="(item,index) in userList">
   
5. <view class="contentuser">
   
6. <view class="user">
   
7. {{item.user}}
   
8. </view>
   
9. <view class="contentuserText">
   
10. <!-- 两个框和两个眼睛 -->
    
11. <input v-model="passwords[index]" maxlength=20 type="password" v-show="eyeVisible[index]" @blur="validatePassword" class="input" placeholder="请输入密码"/>
    
12. <input v-model="passwords[index]" maxlength=20 type="text" v-show="!eyeVisible[index]" @blur="validatePassword" class="input" placeholder="请输入密码"/>
    
13. <u-icon name="eye-fill" v-if="!eyeVisible[index]" size="28"
    
14. @click="togglePasswordVisibility(index)"></u-icon>
    
15. <u-icon name="eye-off" size="28" v-if="eyeVisible[index]"
    
16. @click="togglePasswordVisibility(index)"></u-icon>
    
17. </view>
    
18. </view>
    
19. <view class="border"></view>
    
20. </view>
    
21. <view class="signPut" @click="signPut">
    
22. 更改密码
    
23. </view>
    
24. </view>
    
25. </template>
    
26. <script>
    
27. import {
    
28. mapState
    
29. } from 'vuex';
    
30. import {putPassword}from "@/pages/utils/api.js"
    
31. export default {
    
32. data() {
    
33. return {
    
34. password:false,
    
35. eyeVisible: [true, true, true], // 控制眼睛图标显示状态的数组
    
36. eyefill: true,
    
37. eyeoff: false,
    
38. yuanmima: "12345",
    
39. passwords: ["", '', ''], // 三个 input 的值分别保存在数组中,
    
40. userList: [{
    
41. user: "原密码",
    
42. }, {
    
43. user: "新密码",
    
44. }, {
    
45. user: "确认新密码",
    
46. }]
    
47. };
    
48. },
    
49. mounted() {
    
50. 
    
51. },
    
52. computed: {
    
53. ...mapState(['userExt','userPwd']),
    
54. },
    
55. methods: {
    
56. // 密码长度要求示例：6-20位
    
57. validatePassword(event) {
    
58. const password = event.detail.value;
    
59. if (password.length < 6 || password.length > 20) {
    
60. this.password = false
    
61. uni.showToast({
    
62. title: '密码长度应为6-20位',
    
63. icon: 'none',
    
64. duration: 2000
    
65. });
    
66. return;
    
67. }
    
68. this.password = true
    
69. },
    
70. togglePasswordVisibility(index) {
    
71. // 使用 $set手动更新
    
72. this.$set(this.eyeVisible, index, !this.eyeVisible[index]);
    
73. },
    
74. async signPut() {
    
75. // 检查新密码和确认新密码是否匹配
    
76. if (this.passwords[1] !== this.passwords[2]) {
    
77. uni.showToast({
    
78. title: "新密码和确认新密码不匹配",
    
79. icon: "none",
    
80. duration: 2000,
    
81. });
    
82. return;
    
83. }
    
84. else if(this.userPwd==this.passwords[1]){
    
85. uni.showToast({
    
86. title: '原密码和新密码相同无需修改',
    
87. icon: 'none',
    
88. duration: 2000
    
89. });
    
90. return
    
91. }
    
92. else if(this.passwords[1] == this.passwords[2]&&this.password){
    
93. try{
    
94. // 修改密码接口
    
95. const passwordRes=await putPassword({
    
96. action:"SetUpPassword",
    
97. userId:this.userExt.code,
    
98. OldPassword:this.passwords[0],
    
99. newPassword:this.passwords[1]
    
100. });
     
101. if(passwordRes.Status==true){
     
102. uni.showToast({
     
103. title: passwordRes.Message,
     
104. icon: "success",
     
105. duration: 2000,
     
106. });
     
107. uni.reLaunch({
     
108. url:"/pages/login/login"
     
109. })
     
110. }
     
111. else{
     
112. uni.showToast({
     
113. title: passwordRes.Message,
     
114. icon: "success",
     
115. duration: 2000,
     
116. });
     
117. }
     
118. }
     
119. catch(err){
     
120. console.log(err);
     
121. }
     
122. }
     
123. else{
     
124. uni.showToast({
     
125. title: '密码长度应为6-20位',
     
126. icon: 'none',
     
127. duration: 2000
     
128. });
     
129. }
     
130. 
     
131. },
     
132. }
     
133. 
     
134. }
     
135. </script>
     
136. 
     
137. <style lang="less">
     
138. .input{
     
139. // background-color: red;
     
140. height: 100rpx;
     
141. }
     
142. .user {
     
143. font-size: 32rpx;
     
144. font-family: Inter, Inter;
     
145. font-weight: 400;
     
146. color: #333333;
     
147. padding-left: 10rpx;
     
148. }
     
149. 
     
150. .contentuser {
     
151. display: flex;
     
152. // padding-right: 30rpx;
     
153. box-sizing: border-box;
     
154. justify-content: space-between;
     
155. align-items: center;
     
156. height: 116rpx;
     
157. }
     
158. 
     
159. .contentuserText {
     
160. display: flex;
     
161. width: 400rpx;
     
162. // background-color: aqua;
     
163. font-size: 28rpx;
     
164. font-family: Inter, Inter;
     
165. padding-right: 15rpx;
     
166. font-weight: 400;
     
167. color: #666666;
     
168. }
     
169. 
     
170. .border {
     
171. width: 656rpx;
     
172. height: 1rpx;
     
173. opacity: 1;
     
174. border-bottom: 0.5rpx solid #D2D2D2;
     
175. 
     
176. }
     
177. 
     
178. .password {
     
179. box-sizing: border-box;
     
180. padding-left: 40rpx;
     
181. }
     
182. 
     
183. .signPut {
     
184. width: 90%;
     
185. font-size: 32rpx;
     
186. height: 80rpx;
     
187. color: #FFFFFF;
     
188. border-radius: 68rpx;
     
189. margin-top: 82rpx;
     
190. text-align: center;
     
191. line-height: 80rpx;
     
192. background-color: #F65A02;
     
193. margin-left: auto;
     
194. margin-right: auto;
     
195. }
     
196. </style>
     

复制代码