userCenterSecuritySettingChangePhone.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. <template>
  2. <div style="width: 100%;background: #fff;min-height: 800px;position: relative;"
  3. class="userCenterSecuritySettingChangePhone">
  4. <div
  5. style="height: 80px;line-height: 80px;margin-top: 20px;margin: 0 20px; color: #666;font-size: 15px; border-bottom: 1px solid #bcbcbc;">
  6. {{ $t('common.Change Mobile Phone Number') }}
  7. <!-- <span style="float: right;margin-top: 27px;"> <i class="el-icon-edit"></i> 修改</span> -->
  8. </div>
  9. <div style="margin-top: 100px;margin-left: 236px;" v-if="active==1 || active==2">
  10. <el-steps :space="200" :active="active" finish-status="success">
  11. <el-step :title="$t('common.VerifyIdentidy')"></el-step>
  12. <el-step :title="$t('common.ModifyPhoneNumber')"></el-step>
  13. <el-step :title="$t('common.CompleteReplacement')"></el-step>
  14. </el-steps>
  15. </div>
  16. <!-- 验证身份 -->
  17. <div style="margin-left: 350px;margin-top: 25px;" v-if="active==1">
  18. <div style="font-size: 18px;color: #666;font-weight: 700;">
  19. {{ $t('common.remarkSecPhone1') }}:{{ this.salfPhone ? this.salfPhone : $t('common.nothing') }}
  20. </div>
  21. <div style="font-size: 14px;color: #999;margin-top: 10px;margin-left: 5px;">{{ $t('common.remarkSecPhone2') }}
  22. </div>
  23. <el-form ref="form" :model="form" label-width="160px" class="demo-ruleForm"
  24. style="margin-left: -177px;margin-top: 40px;width: 700px;">
  25. <el-form-item :label="$t('common.VerificationCode')">
  26. <el-input v-model="form.vervification1" style="width: 50%;" maxlength="10" show-word-limit>
  27. </el-input>
  28. <span v-show="show" @click="getCode" style="margin-left: 20px;color: #2c5589;"
  29. class="cursor">{{ $t('common.getVerificationCode') }}</span>
  30. <span v-show="!show" class="count"
  31. style="margin-left: 20px;color: #999;">{{ count }} {{ $t('common.SendInSeconds') }}</span>
  32. </el-form-item>
  33. </el-form>
  34. </div>
  35. <!-- 修改手机号码 -->
  36. <div style="width: 600px;" v-if="active==2">
  37. <el-form ref="form" :model="form" label-width="160px" class="demo-ruleForm"
  38. style="margin-left: 120px;margin-top: 40px;width: 700px;">
  39. <el-form-item :label="$t('common.MobilePhone')" prop='mobilePhone' style="width: 70%;" maxlength="10"
  40. show-word-limit>
  41. <GlobalRoaming ref='GlobalRoaming' :size="{width:'760px'}" v-model="form.mobilePhone"
  42. @getAreaCode="getPassAreaCode"></GlobalRoaming>
  43. </el-form-item>
  44. <el-form-item :label="$t('common.VerificationCode')">
  45. <el-input v-model="form.vervification2" style="width: 70%;" maxlength="10" show-word-limit>
  46. </el-input>
  47. <span v-show="show" @click="getCode" style="margin-left: 20px;color: #2c5589;"
  48. class="cursor">{{ $t('common.getVerificationCode') }}</span>
  49. <span v-show="!show" class="count"
  50. style="margin-left: 20px;color: #999;">{{ count }}{{ $t('common.SendInSeconds') }}</span>
  51. </el-form-item>
  52. </el-form>
  53. </div>
  54. <div style="width: 600px;margin-left: 425px;margin-top: 150px;color: #666;" v-if="active==3">
  55. <div>
  56. <i class="el-icon-mobile-phone" style="font-size: 65px;"></i>
  57. </div>
  58. <div style="margin-left: -67px;font-size: 26px;line-height: 56px;">
  59. {{ $t('common.remarkSecPhone3') }}
  60. </div>
  61. <div style="margin-left: -79px;color: #999;">
  62. {{ $t('common.remarkSecPhone4') }}
  63. </div>
  64. </div>
  65. <div style="height: 100px;">
  66. <div style="margin-top: 50px;">
  67. <el-button type="primary" style="margin-left: 310px;width: 296px;" @click="goAithentication">
  68. {{ active == 3 ? $t('common.return') : $t('common.next') }}
  69. </el-button>
  70. </div>
  71. </div>
  72. <div style="height: 180px;position: absolute;bottom: 20px;left: 0;width: 100%;">
  73. <div class="securBox" :style="active==1?'height:170px':'height:129px'">
  74. <div class="div">{{ active == 1 ? $t('common.CommonProblem') : $t('common.SecurityTips') }}</div>
  75. <div v-if="active==1" class="div1">{{ $t('common.remarkSecPhone5') }}</div>
  76. <div class="div2">{{ active == 1 ? $t('common.remarkSecPhone6') : $t('common.remarkSecPhone7') }}</div>
  77. <div v-if="active==1" class="div1">{{ $t('common.remarkSecPhone8') }}</div>
  78. <div v-if="active==1" class="div2">
  79. {{ $t('common.remarkSecPhone9') }}{{ $t('common.remarkSecPhone10') }}{{ $t('common.remarkSecPhone11') }}
  80. </div>
  81. <div v-else class="div2">{{ $t('common.remarkSecPhone12') }}</div>
  82. </div>
  83. </div>
  84. </div>
  85. </template>
  86. <script>
  87. import Base from "@/views/base/Base";
  88. import GlobalRoaming from "@/components/GlobalRoaming";
  89. import {sendTelCode, getUserInfoById, validCheckCode, updateMobile} from "@/api/user";
  90. import {getUserInfoByTel} from "@/api/login";
  91. export default {
  92. name: 'userCenterSecuritySettingChangePhone',
  93. extends: Base,
  94. components: {GlobalRoaming},
  95. data() {
  96. return {
  97. informationsClass: '1',
  98. dialogVisible: false,
  99. realnameAuthenticationPersonal: true,
  100. ifDiaslog: '',
  101. phone: '',
  102. salfPhone: '',
  103. title: '',
  104. active: '1',
  105. show: true,
  106. isSendCode: false,
  107. count: '',
  108. timer: null,
  109. userInfo: '',
  110. select: '0086',
  111. phoneUserNum: '',
  112. form: {
  113. mobilePhone: '',
  114. vervification1: '',
  115. vervification2: '',
  116. delivery: false,
  117. type: [],
  118. resource: '',
  119. desc: ''
  120. },
  121. }
  122. },
  123. mounted() {
  124. this.initData();//默认消息类型为全部
  125. },
  126. methods: {
  127. initData() {
  128. getUserInfoById().then(result => {
  129. if (result) {
  130. this.phone = result.data.userPreferredMobile;
  131. this.salfPhone = this.phone.substr(4, 3) + '****' + this.phone.substr(11, 4);
  132. }
  133. }).catch((error) => {
  134. this.msg(error.msg, "error");
  135. })
  136. },
  137. goAithentication() {
  138. if (this.active == 1) {
  139. this.validCode();
  140. } else if (this.active == 2) {
  141. this.update();
  142. } else {
  143. this.$router.go(-1)
  144. }
  145. },
  146. async update() {
  147. if (!this.form.mobilePhone) {
  148. this.$message.warning(this.$t('common.Mobilephonenumbercannotbeempty'));
  149. return;
  150. }
  151. /* if(!this.isSendCode){
  152. this.$message.warning("请先发送验证码!");
  153. return false;
  154. }*/
  155. if (!this.form.vervification2) {
  156. this.$message.warning(this.$t('common.Verificationcodecannotbeempty'));
  157. return false;
  158. }
  159. this.phoneUserNum = this.select.concat(this.form.mobilePhone);
  160. await updateMobile(this.phoneUserNum, this.form.vervification2).then(result => {
  161. if (result.status == 200) {
  162. this.msg(result.msg, "success");
  163. this.active++
  164. }
  165. }).catch((error) => {
  166. this.msg(error.msg, "error");
  167. })
  168. },
  169. validCode() {
  170. /* if(!this.isSendCode){
  171. this.$message.warning("请先发送验证码!");
  172. return false;
  173. }*/
  174. if (!this.form.vervification1) {
  175. this.$message.warning(this.$t('common.Verificationcodecannotbeempty'));
  176. return false;
  177. }
  178. validCheckCode(this.phone, this.form.vervification1).then(result => {
  179. this.active++;
  180. this.show = true;
  181. this.timer = null;
  182. clearInterval(this.timer);
  183. this.isSendCode = false;
  184. }).catch((error) => {
  185. // this.msg(error.msg, "error");
  186. this.$message.warning(this.$t('common.Verificationcodeerror'));
  187. })
  188. },
  189. getCode() {
  190. if (this.active == 2) {
  191. if (!this.form.mobilePhone) {
  192. this.$message.warning(this.$t('common.Mobilephonenumbercannotbeempty'));
  193. return;
  194. }
  195. this.phoneUserNum = this.select.concat(this.form.mobilePhone);
  196. this.code(this.phoneUserNum);
  197. } else {
  198. this.code(this.phone);
  199. }
  200. },
  201. code(phoneOrEmail) {
  202. let locale = window.localStorage.getItem('locale');
  203. //获取验证码信息
  204. sendTelCode(phoneOrEmail, "TX", locale).then(result => {
  205. if (result.status == 200) {
  206. this.isSendCode = true;
  207. this.msg(result.msg, "success");
  208. // this.msg(this.$t('common.Verificationcodehasbeensent'), "success");
  209. }
  210. }).catch((error) => {
  211. this.msg(error.msg, "error");
  212. })
  213. const TIME_COUNT = 60;
  214. if (!this.timer) {
  215. this.count = TIME_COUNT;
  216. this.show = false;
  217. this.timer = setInterval(() => {
  218. if (this.count > 0 && this.count <= TIME_COUNT) {
  219. this.count--;
  220. } else {
  221. this.show = true;
  222. clearInterval(this.timer);
  223. this.timer = null;
  224. }
  225. }, 1000)
  226. }
  227. },
  228. getPassAreaCode(code) {
  229. this.select = code;
  230. console.log("select=" + this.select);
  231. },
  232. msg: function (msg, type) {
  233. if (msg == 'error') {
  234. msg = this.$t('common.ThesystemisbusyPleasetryagainlater')
  235. }
  236. return this.$message({
  237. message: msg,
  238. type: type
  239. })
  240. },
  241. }
  242. }
  243. </script>
  244. <style scoped>
  245. .el-button {
  246. width: 200px;
  247. height: 45px;
  248. }
  249. .authenticationBox1 {
  250. margin-left: 35px;
  251. margin-right: 150px;
  252. height: 100px;
  253. border: 1px solid rgba(153, 153, 153, 1);
  254. border-radius: 10px;
  255. margin-top: 50px;
  256. position: relative;
  257. }
  258. .authenticationBox2 {
  259. margin: 50px 150px 0 35px;
  260. height: 100px;
  261. border: 1px solid rgba(153, 153, 153, 1);
  262. border-radius: 10px;
  263. position: relative;
  264. }
  265. .authenticationBox1:hover,
  266. .authenticationBox2:hover {
  267. border: 1px solid #ff8400;
  268. }
  269. .avatar-uploader .el-upload {
  270. border: 1px dashed #d9d9d9;
  271. border-radius: 6px;
  272. cursor: pointer;
  273. position: relative;
  274. overflow: hidden;
  275. }
  276. .avatar-uploader .el-upload:hover {
  277. border-color: #409EFF;
  278. }
  279. .userCenterSecuritySettingChangePhone >>> .el-step.is-horizontal .el-step__line {
  280. top: 24px;
  281. }
  282. .userCenterSecuritySettingChangePhone >>> .el-step__icon {
  283. width: 50px;
  284. height: 50px;
  285. font-size: 25px;
  286. }
  287. .avatar-uploader-icon {
  288. font-size: 28px;
  289. color: #8c939d;
  290. width: 178px;
  291. height: 178px;
  292. line-height: 178px;
  293. text-align: center;
  294. }
  295. .avatar {
  296. width: 178px;
  297. height: 178px;
  298. display: block;
  299. }
  300. .securBox {
  301. margin: 25px 20px 20px 20px;
  302. height: 170px;
  303. background: #f2f2f2;
  304. line-height: 29px;
  305. padding-left: 10px;
  306. }
  307. .securBox .div {
  308. font-size: 14px;
  309. color: #666;
  310. font-weight: 600;
  311. }
  312. .securBox .div1 {
  313. font-size: 14px;
  314. color: #666;
  315. }
  316. .securBox .div2 {
  317. font-size: 14px;
  318. color: #999;
  319. margin-left: 20px;
  320. }
  321. .el-form >>> .el-select {
  322. width: 150px;
  323. }
  324. .el-form >>> .dcp_input .el-input__inner[type="text"] {
  325. width: 227px !important;
  326. }
  327. .el-form >>> .dcp_input .el-input-group__prepend .el-input__inner[type="text"] {
  328. width: 120px !important;
  329. }
  330. </style>