BindMobileNumber.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <template>
  2. <view>
  3. <u-navbar :back-text="i18n('Back')" title-width="300" :back-text-style="backStyle" back-icon-color="#fff"
  4. title-color="#fff" :background="background" :title="$i18n.locale=='zh'?'绑定手机号':'Bind mobile number'">
  5. </u-navbar>
  6. <view class="Unbundling">
  7. {{$i18n.locale=='zh'?'请输入新的手机号码,验证码会发送到新手机上':'Please enter a new mobile phone number and the verification code will be sent to the new mobile phone'}}
  8. </view>
  9. <view class="Unbundling-input">
  10. <u-form :model="form" ref="uForm">
  11. <u-form-item label="" :label-width="120">
  12. <view class="moblie">
  13. <view @click="toGR" style="display: inline-block;">
  14. <text
  15. style="max-width:106upx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;display: inline-block;vertical-align: middle;">
  16. {{selectName}}</text>
  17. <text style="vertical-align: middle;"> ({{'+' + select}})</text>
  18. </view>
  19. </view>
  20. <u-input v-model="form.moblie" :border="true" :placeholder="i18n('EnterMobile')" />
  21. </u-form-item>
  22. <u-form-item label="" :label-width="120" style="">
  23. <u-input v-model="form.validCode" :border="true" :placeholder="i18n('EnterVerification')" />
  24. <text class="code-send" v-if="showText==true" @click="getCodeFor">{{i18n('GetVerification')}}</text>
  25. <text v-else class=" code">{{second}}s{{i18n('resend')}}</text>
  26. </u-form-item>
  27. </u-form>
  28. <view class="next">
  29. <u-button type="primary" @click="update">{{i18n('submit')}}</u-button>
  30. </view>
  31. </view>
  32. <u-toast ref="uToast" />
  33. </view>
  34. </template>
  35. <script>
  36. import listCell from '@/components/JumpBox';
  37. import {
  38. addIntegral
  39. } from '@/components/addPointDetailByTaskDict'
  40. export default {
  41. components: {
  42. listCell,
  43. addIntegral
  44. },
  45. data() {
  46. return {
  47. second: 60,
  48. showText: true,
  49. form: {
  50. moblie: '',
  51. validCode: '',
  52. },
  53. select: '0086',
  54. selectName: this.$i18n.locale == 'zh' ? '中国' : 'China',
  55. selectList: '',
  56. regLogStyle: '3',
  57. phoneUserNum: "",
  58. active: '0',
  59. background: {
  60. backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
  61. },
  62. backStyle: {
  63. color: '#FFFFFF',
  64. },
  65. };
  66. },
  67. onLoad(options) {
  68. this.selectList = options.data ? JSON.parse(options.data) : {};
  69. this.select = this.selectList.id ? this.selectList.id : this.select;
  70. let countryName = this.$i18n.locale == 'zh' ? this.selectList.cnValue : this.selectList.enValue;
  71. this.selectName = countryName ? countryName : this.selectName;
  72. },
  73. onShow() {
  74. },
  75. methods: {
  76. toGR() {
  77. uni.navigateTo({
  78. url: '/pages/public/GlobalRoaming?regLogStyle=' + this.regLogStyle
  79. })
  80. },
  81. navTo(route) {
  82. this.$mRouter.push({
  83. route
  84. });
  85. },
  86. async update() {
  87. if (!this.form.moblie) {
  88. this.msg(this.i18n('Mobilephonenumbercannotbeempty'), "warning");
  89. return;
  90. }
  91. if (!this.form.validCode) {
  92. this.msg(this.i18n('Verificationcodecannotbeempty'), "warning");
  93. return false;
  94. }
  95. this.phoneUserNum = this.select + this.form.moblie;
  96. const result = await this.$myRequest({
  97. url: '/uc/securitySetting/updateMobile',
  98. data: {
  99. mobile: this.phoneUserNum,
  100. code: this.form.validCode
  101. }
  102. });
  103. if (result.status == '200') {
  104. this.msg('绑定成功', "success");
  105. addIntegral("point_task_bind_phone", "20");
  106. setTimeout(function() {
  107. uni.navigateTo({
  108. url: '/pages/profile/profileSetUp/accountSecurity'
  109. })
  110. }, 1500);
  111. } else {
  112. if (this.$i18n.locale == 'zh') {
  113. this.msg(result.msg, "error");
  114. } else {
  115. this.msg(
  116. 'Please confirm that the mobile phone number is not registered and the verification code is entered correctly',
  117. "error");
  118. }
  119. }
  120. },
  121. async getCodeFor() {
  122. if (!this.form.moblie) {
  123. this.msg(this.i18n('Mobilephonenumbercannotbeempty'), "warning");
  124. return false;
  125. }
  126. let language = this.$i18n.locale;
  127. this.phoneUserNum = this.select + this.form.moblie;
  128. //获取验证码信息
  129. const result = await this.$myRequest({
  130. url: '/ums/umsUsers/registCode',
  131. data: {
  132. account: this.phoneUserNum,
  133. service: "TX",
  134. language
  135. }
  136. });
  137. if (result.status == '200') {
  138. this.msg(this.i18n('Verificationcodehasbeensent'), "success");
  139. } else {
  140. this.msg(result.msg, "error");
  141. }
  142. this.showText = false
  143. let interval = setInterval(() => {
  144. let times = --this.second
  145. }, 1000)
  146. setTimeout(() => {
  147. clearInterval(interval)
  148. this.second = 60
  149. this.showText = true
  150. }, 60000)
  151. },
  152. msg(msg, type) {
  153. if (msg == 'error') {
  154. msg = this.i18n('ThesystemisbusyPleasetryagainlater') + "!" //系统繁忙,请稍后再试
  155. }
  156. return this.$refs.uToast.show({
  157. title: msg,
  158. type: type,
  159. // url: '/pages/user/index'
  160. })
  161. },
  162. i18n(data) {
  163. return this.$t('common.' + data);
  164. },
  165. }
  166. }
  167. </script>
  168. <style lang="scss" scoped>
  169. page,
  170. body.pages-profile-profileSetUp-setUp uni-page-body {
  171. background-color: #fff !important;
  172. .Unbundling {
  173. margin: 30upx 40upx 40upx 40upx;
  174. color: #333;
  175. font-size: 38upx;
  176. text-align: center;
  177. }
  178. .Unbundling-input {
  179. margin: 0 40upx;
  180. .getCode {
  181. margin-left: 20upx;
  182. color: #0000ff;
  183. }
  184. .code-send {
  185. margin-left: 48upx;
  186. color: #0000BF;
  187. }
  188. .moblie {
  189. color: #0000BF;
  190. margin-right: 20upx;
  191. }
  192. .next {
  193. margin-top: 100upx;
  194. }
  195. }
  196. }
  197. </style>