bindEmail.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <uni-forms ref="form" :modelValue="form" :rules="rules" label-width="auto">
  6. <uni-forms-item label="电子邮箱" name="email">
  7. <uni-easyinput type="number" v-model="form.email" placeholder="请输入电子邮箱" />
  8. </uni-forms-item>
  9. <uni-forms-item label="邮箱验证码" name="code">
  10. <view class="yzm">
  11. <view class="l">
  12. <uni-easyinput type="text" v-model="form.code" placeholder="请输入您的邮箱验证码" />
  13. </view>
  14. <view class="r">
  15. <button type="default" size="mini" @tap="sendCount">{{time_count==0?'发送验证码':time_count}}</button>
  16. </view>
  17. </view>
  18. </uni-forms-item>
  19. </uni-forms>
  20. <view class="btn">
  21. <button type="primary" @click="onSubmit('form')" size="small">立即绑定</button>
  22. </view>
  23. </view>
  24. </view>
  25. </mobile-frame>
  26. </template>
  27. <script>
  28. export default {
  29. data() {
  30. return {
  31. user: {},
  32. form: {},
  33. rules: {
  34. email: {
  35. rules: [{
  36. required: true,
  37. errorMessage: '请输入电子邮箱',
  38. }]
  39. },
  40. code: {
  41. rules: [{
  42. required: true,
  43. errorMessage: '请输入邮箱验证码',
  44. }]
  45. },
  46. },
  47. // 倒计时
  48. time_count: 0
  49. };
  50. },
  51. onLoad: function() {
  52. },
  53. onShow: function() {
  54. const that = this;
  55. that.watchLogin();
  56. },
  57. methods: {
  58. watchLogin() {
  59. const that = this;
  60. uni.getStorage({
  61. key: 'token',
  62. success: function(res) {
  63. let user = that.$jwt(res.data);
  64. if (user) that.$set(that, `user`, user);
  65. },
  66. fail: function(err) {
  67. console.log(err);
  68. }
  69. })
  70. },
  71. async sendCount() {
  72. const that = this;
  73. let form = that.form;
  74. let user = that.user;
  75. if (form && form.email) {
  76. let res = await that.$api(`/user/toBindEmail`, 'POST', {
  77. id: user._id,
  78. email: form.email
  79. })
  80. if (res.errcode == '0') {
  81. uni.showToast({
  82. title: '发送成功'
  83. })
  84. that.$set(that, `time_count`, 60);
  85. that.timeDown();
  86. }
  87. } else {
  88. uni.showToast({
  89. title: '输入错误,请重新输入!',
  90. icon: 'none'
  91. })
  92. }
  93. },
  94. // 倒计时
  95. timeDown() {
  96. const that = this;
  97. var times = setInterval(() => {
  98. that.time_count--;
  99. if (that.time_count <= 0) {
  100. clearInterval(times);
  101. }
  102. }, 1000);
  103. },
  104. // 提交保存
  105. onSubmit(ref) {
  106. const that = this;
  107. let user = that.user;
  108. that.$refs[ref].validate().then(async params => {
  109. params.id = user._id;
  110. const res = await that.$api(`/user/checkBindEmail`, 'POST', params);
  111. if (res.errcode == '0') {
  112. const arr = await that.$api(`/user/${params.id}`, 'POST', params);
  113. if (arr.errcode == '0') {
  114. uni.showToast({
  115. title: '绑定邮箱成功',
  116. icon: 'none'
  117. })
  118. uni.navigateBack({
  119. delta: 1
  120. })
  121. } else {
  122. uni.showToast({
  123. title: arr.errmsg,
  124. icon: 'none'
  125. })
  126. }
  127. } else {
  128. uni.showToast({
  129. title: res.errmsg,
  130. icon: 'none'
  131. })
  132. }
  133. })
  134. },
  135. }
  136. }
  137. </script>
  138. <style lang="scss">
  139. .main {
  140. display: flex;
  141. flex-direction: column;
  142. width: 100vw;
  143. height: 100vh;
  144. .one {
  145. padding: 2vw;
  146. .btn {
  147. text-align: center;
  148. button {
  149. margin: 0 2vw 2vw 2vw;
  150. background-color: var(--ff0Color);
  151. color: var(--fffColor);
  152. }
  153. .name {
  154. color: var(--f85Color);
  155. font-size: var(--font14Size);
  156. }
  157. }
  158. .Tips {
  159. font-size: var(--font12Size);
  160. color: var(--f85Color);
  161. }
  162. }
  163. }
  164. .uni-forms-item {
  165. margin-bottom: 6vw !important;
  166. display: flex;
  167. flex-direction: row;
  168. }
  169. .yzm {
  170. display: flex;
  171. flex-direction: row;
  172. justify-content: space-between;
  173. .l {
  174. flex-grow: 1;
  175. }
  176. .r {
  177. width: 20vw;
  178. button {
  179. width: 100%;
  180. line-height: 2.8;
  181. padding: 0 1vw;
  182. }
  183. }
  184. }
  185. </style>