password.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <view class="container">
  3. <view class="info-item" v-if="hasPassword == 'Y'">
  4. <view class="contacts">
  5. <text class="name">旧密码:</text>
  6. <input class="weui-input value" type="password" v-model="passwordOld" placeholder="请输入旧密码"/>
  7. </view>
  8. </view>
  9. <view class="info-item">
  10. <view class="contacts">
  11. <text class="name">新密码:</text>
  12. <input class="weui-input value" type="password" v-model="password" placeholder="请输入新密码"/>
  13. </view>
  14. </view>
  15. <view class="info-item">
  16. <view class="contacts">
  17. <text class="name">新密码确认:</text>
  18. <input class="weui-input value" type="password" v-model="passwordCopy" placeholder="请输入新密码确认"/>
  19. </view>
  20. </view>
  21. <!-- 底部操作按钮 -->
  22. <view class="footer-fixed">
  23. <view class="btn-wrapper">
  24. <view class="btn-item btn-item-main" @click="doSubmit()">保存</view>
  25. </view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. import * as UserApi from '@/api/user'
  31. import store from '@/store'
  32. export default {
  33. data() {
  34. return {
  35. //当前页面参数
  36. options: {},
  37. // 正在加载
  38. isLoading: false,
  39. userInfo: {},
  40. qrCode: "",
  41. password: "",
  42. passwordCopy: "",
  43. passwordOld: "",
  44. hasPassword: ""
  45. }
  46. },
  47. /**
  48. * 生命周期函数--监听页面加载
  49. */
  50. onLoad(options) {
  51. this.hasPassword = options.hasPassword;
  52. },
  53. methods: {
  54. // 提交保存
  55. doSubmit() {
  56. const app = this;
  57. app.isLoading = true;
  58. if (app.hasPassword == 'Y' && (!app.password || !app.passwordOld)) {
  59. app.$error('请先填写表单!');
  60. return false;
  61. }
  62. if (app.password != app.passwordCopy) {
  63. app.$error('新密码输入不一致!');
  64. return false;
  65. }
  66. UserApi.save({"password": app.password, "passwordOld": app.passwordOld})
  67. .then(result => {
  68. app.isLoading = false;
  69. if (result.code == 200) {
  70. app.$success('保存成功!');
  71. } else {
  72. app.$error(result.message ? result.message : '保存失败!');
  73. }
  74. }).catch(err => {
  75. app.isLoading = false;
  76. })
  77. }
  78. }
  79. }
  80. </script>
  81. <style lang="scss" scoped>
  82. .info-list {
  83. padding-bottom: 30rpx;
  84. margin-top: 30rpx;
  85. }
  86. // 项目内容
  87. .info-item {
  88. margin: 20rpx auto 20rpx auto;
  89. padding: 30rpx 40rpx;
  90. width: 94%;
  91. box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  92. border-radius: 16rpx;
  93. background: #fff;
  94. .avatar-warp {
  95. line-height: 120rpx;
  96. }
  97. }
  98. .contacts {
  99. font-size: 30rpx;
  100. height: 40rpx;
  101. .name {
  102. margin-left: 0px;
  103. float: left;
  104. margin-right: 10rpx;
  105. line-height: 40rpx;
  106. }
  107. .value {
  108. float:right;
  109. color:#999999;
  110. text-align: right;
  111. .second {
  112. margin-left: .6rem;
  113. }
  114. }
  115. .vcode {
  116. float: left;
  117. line-height: 40rpx;
  118. }
  119. .password {
  120. text-align: right;
  121. float: left;
  122. padding-right: 5rpx;
  123. }
  124. .avatar {
  125. width: 120rpx;
  126. height: 120rpx;
  127. border-radius: 120rpx;
  128. border: solid 1px #cccccc;
  129. float: right;
  130. }
  131. }
  132. // 底部操作栏
  133. .footer-fixed {
  134. z-index: 11;
  135. box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
  136. margin-top: 80rpx;
  137. .btn-wrapper {
  138. height: 100%;
  139. display: flex;
  140. text-align: center;
  141. align-items: center;
  142. padding: 0 30rpx;
  143. margin-bottom: 10rpx;
  144. }
  145. .btn-item {
  146. flex: 1;
  147. font-size: 28rpx;
  148. height: 80rpx;
  149. line-height: 80rpx;
  150. text-align: center;
  151. color: #fff;
  152. border-radius: 40rpx;
  153. }
  154. .btn-item-main {
  155. background: linear-gradient(to right, #f9211c, #ff6335);
  156. }
  157. .btn-item-back {
  158. margin-top: 20rpx;
  159. background: #FFFFFF;
  160. border: 1px solid $fuint-theme;
  161. color: #666666;
  162. }
  163. }
  164. </style>