forget-password.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. <template>
  2. <view class="content">
  3. <view class="status_bar"></view>
  4. <view class="logo">
  5. <image src="~@/static/logo.png" mode="aspectFit"></image>
  6. </view>
  7. <view class="title">
  8. <text v-if="mine_code == 'ningdongyunying'">E信管理</text>
  9. <text v-if="mine_code == 'zaoquan'">枣泉煤矿</text>
  10. <text v-if="mine_code == 'qingshuiying'">清水营煤矿</text>
  11. <text v-if="mine_code == 'wuyegongsi'">智慧物业</text>
  12. <text v-if="mine_code == 'jinjiaqu'">金家渠煤矿</text>
  13. <text v-if="mine_code == 'yangchangwan'">羊场湾煤矿</text>
  14. </view>
  15. <view class="change_box">
  16. <view class="item">
  17. <view class="name">手机号</view>
  18. <view class="input">
  19. <input type="text" value="" v-model="mobile"/>
  20. </view>
  21. </view>
  22. <view class="send_box">
  23. <view class="send_code">
  24. <view class="name">验证码</view>
  25. <view class="input">
  26. <input type="text" value="" v-model="vcode"/>
  27. </view>
  28. </view>
  29. <view class="send_btn" @click="send_vcode()">
  30. <text>{{send_text}}</text>
  31. </view>
  32. </view>
  33. <view class="item">
  34. <view class="name">修改密码</view>
  35. <view class="input">
  36. <input type="password" value="" v-model="password"/>
  37. </view>
  38. </view>
  39. <view class="item">
  40. <view class="name">确认密码</view>
  41. <view class="input">
  42. <input type="password" value="" v-model="copypassword"/>
  43. </view>
  44. </view>
  45. </view>
  46. <view class="tips">
  47. <text @click="back()">记起来了?请点击这里登陆</text>
  48. </view>
  49. <view class="change_btn" @click="changeBtn()">
  50. <text>确认修改</text>
  51. </view>
  52. </view>
  53. </template>
  54. <script>
  55. var testPassword =/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,15}$/
  56. export default {
  57. data() {
  58. return {
  59. mine_code:"",
  60. mobile:'',
  61. vcode:'',
  62. password:'',
  63. copypassword:'',
  64. send_text:'发送验证码'
  65. };
  66. },
  67. onLoad() {
  68. this.mine_code = uni.getStorageSync('mine_code')
  69. },
  70. methods: {
  71. back(){
  72. uni.navigateTo({
  73. url:"../login/login"
  74. })
  75. },
  76. send_vcode(){
  77. if(this.mobile.length < 11){
  78. uni.showToast({
  79. icon:'none',
  80. title:'请填写正确的手机号'
  81. })
  82. return
  83. }
  84. if(this.send_text == "发送验证码"){
  85. this.$api.sms_send_v_code({
  86. mobile:this.mobile
  87. }).then((res)=>{
  88. console.log(res.data)
  89. if(res.data.code == 3001){
  90. uni.showToast({
  91. icon:"none",
  92. title:"电话号码错误"
  93. })
  94. this.send_text = "发送验证码"
  95. }else if(res.data.code == 3002){
  96. uni.showToast({
  97. icon:"none",
  98. title:"发送失败"
  99. })
  100. this.send_text = "发送验证码"
  101. }else if(res.data.code == 3003){
  102. uni.showToast({
  103. icon:"none",
  104. title:res.data.message
  105. })
  106. this.send_text = "发送验证码"
  107. }else if(res.data.code == 0){
  108. uni.showToast({
  109. icon:"none",
  110. title:"验证码发送成功"
  111. })
  112. }
  113. })
  114. }
  115. this.send_text = "已发送"
  116. if(this.send_text = "已发送"){
  117. uni.showToast({
  118. icon:"none",
  119. title:"请勿重复发送"
  120. })
  121. }
  122. },
  123. changeBtn(){
  124. if(this.vcode == ''){
  125. uni.showToast({
  126. icon:'none',
  127. title:'请填写验证码'
  128. })
  129. return
  130. }
  131. if(this.password == '' || this.copypassword == ''){
  132. uni.showToast({
  133. icon:'none',
  134. title:'请填写完整信息'
  135. })
  136. return
  137. }
  138. if(this.password !== this.copypassword){
  139. uni.showToast({
  140. icon:'none',
  141. title:'两次密码输入不一致'
  142. })
  143. return
  144. }
  145. if( !testPassword.test(this.password) ){
  146. uni.showToast({
  147. icon:'none',
  148. title:'密码必须包含大写字母、小写字母、数字和特殊符号且长度在8位至16位之间'
  149. })
  150. return
  151. }
  152. this.$api.user_forget_password({
  153. mobile:this.mobile,
  154. vcode:this.vcode,
  155. password:this.password
  156. }).then((res)=>{
  157. console.log(res)
  158. if(res.data.code == 4002){
  159. uni.showToast({
  160. icon:'none',
  161. title:"验证码超时或者错误"
  162. })
  163. return
  164. }else{
  165. uni.setStorageSync('login_password',this.password)
  166. uni.showToast({
  167. icon:'none',
  168. title:'密码修改成功、返回登陆'
  169. })
  170. this.send_text = "发送验证码"
  171. }
  172. setTimeout(function(){
  173. uni.navigateTo({
  174. url:"../login/login"
  175. })
  176. },1000)
  177. })
  178. }
  179. }
  180. }
  181. </script>
  182. <style lang="scss">
  183. page {}
  184. .content {
  185. width: 750rpx;
  186. min-height: 100vh;
  187. height: 100%;
  188. background-image: url(~@/static/login.png);
  189. background-size: cover;
  190. background-position: center center;
  191. background-repeat: no-repeat;
  192. .logo {
  193. width: 344rpx;
  194. height: 350rpx;
  195. margin: 0 auto;
  196. padding-top: 100rpx;
  197. image {
  198. width: 100%;
  199. height: 100%;
  200. }
  201. }
  202. .title {
  203. margin: 0 auto;
  204. margin-top: 32rpx;
  205. width: 288rpx;
  206. height: 47rpx;
  207. font-size: 36rpx;
  208. color: #FFFFFF;
  209. line-height: 47rpx;
  210. text-align: center;
  211. }
  212. .change_box {
  213. padding-top: 40px;
  214. .item {
  215. margin: 0 auto;
  216. margin-bottom: 20px;
  217. width: 600rpx;
  218. height: 45px;
  219. background: #FFFFFF;
  220. border-radius: 25px;
  221. box-sizing: border-box;
  222. padding: 0 20px;
  223. display: flex;
  224. align-items: center;
  225. .name {
  226. width: 150rpx;
  227. font-size: 16px;
  228. color: #009FE8;
  229. line-height: 45px;
  230. }
  231. .input {
  232. input {
  233. height: 45px;
  234. color: #666;
  235. }
  236. }
  237. }
  238. .send_box{
  239. margin: 0 auto;
  240. margin-bottom: 20px;
  241. width: 600rpx;
  242. display: flex;
  243. justify-content: space-between;
  244. align-items: center;
  245. .send_code{
  246. background: #FFFFFF;
  247. border-radius: 25px;
  248. box-sizing: border-box;
  249. padding: 0 20px;
  250. height: 45px;
  251. display: flex;
  252. justify-content: space-between;
  253. align-items: center;
  254. .name{
  255. width: 120rpx;
  256. font-size: 16px;
  257. font-family: MicrosoftYaHei;
  258. color: #009FE8;
  259. line-height: 45px;
  260. }
  261. .input{
  262. width: 140rpx;
  263. }
  264. }
  265. .send_btn{
  266. width: 220rpx;
  267. height: 50px;
  268. background: rgba(100, 220, 255, 0.8);
  269. border-radius: 25px;
  270. text-align: center;
  271. line-height: 50px;
  272. text {
  273. font-size: 34rpx;
  274. color: #FFFFFF;
  275. }
  276. }
  277. }
  278. }
  279. .tips {
  280. margin: 0 auto;
  281. margin-top: 25px;
  282. text-align: center;
  283. font-size: 14px;
  284. color: #ECF0F1;
  285. line-height: 40px;
  286. text-align: center;
  287. }
  288. .change_btn {
  289. margin: 40px auto;
  290. width: 200px;
  291. height: 50px;
  292. background: rgba(100, 220, 255, 0.8);
  293. border-radius: 25px;
  294. text-align: center;
  295. line-height: 50px;
  296. text {
  297. font-size: 18px;
  298. color: #FFFFFF;
  299. letter-spacing: 4px;
  300. }
  301. }
  302. }
  303. </style>