123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- <template>
- <view>
- <u-navbar :back-text="i18n('Back')" title-width="300" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
- :background="background" :title="$i18n.locale=='zh'?'更改手机号':'Change mobile number'"></u-navbar>
- <view class="Unbundling">
- {{i18n('remarkSecPhone1')}}:{{salfPhone}}
- </view>
- <view class="Unbundling" style="font-size: 22upx;">{{i18n('remarkSecPhone2')}}</view>
- <view class="Unbundling-input">
- <u-form :model="form" ref="uForm">
- <!-- <u-form-item label="手机号" :label-width="120">
- <u-input v-model="form.moblie" :border="true" placeholder="请输入手机号" />
- </u-form-item> -->
- <u-form-item label="" :label-width="120" style="">
- <u-input v-model="form.code" :border="true" :placeholder="i18n('EnterVerification')" />
- <text class="code-send" v-if="showText==true" @click="getCodeFor">{{i18n('GetVerification')}}</text>
- <text v-else class=" code">{{second}}s{{i18n('resend')}}</text>
- </u-form-item>
- </u-form>
- <view class="next">
- <u-button type="primary" @click="validCode">{{i18n('Next')}}</u-button>
- </view>
- </view>
- <u-toast ref="uToast" />
- </view>
- </template>
- <script>
- import listCell from '@/components/JumpBox';
- export default {
- components: {
- listCell
- },
- data() {
- return {
- second: 60,
- showText: true,
- form: {
- code: '', //验证码
- },
- moblieNum: '', //手机号
- moblie: '', //手机号
- salfPhone: '',
- phoneUserNum: "",
- background: {
- backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
- },
- backStyle: {
- color: '#FFFFFF',
- },
- };
- },
- onShow() {
- // this.phoneUserNum = uni.getStorageSync('loginAccount');
- this.getUserInfoById();
- },
- methods: {
- async getUserInfoById() {
- const result = await this.$myRequest({
- url: '/uc/securitySetting/getUserInfoById',
- });
- this.moblie = result.data.userPreferredMobile;
- if (result) {
- // this.moblieNum = JSON.stringify(result.data.userPreferredMobile);
- this.moblieNum = result.data.userPreferredMobile;
- if (this.moblieNum.length < 12) {
- this.salfPhone = this.moblieNum.substr(0, 3) + '****' + this.moblieNum.substr(7, 4);
- }else{
- this.salfPhone = this.moblieNum.substr(4, 3) + '****' + this.moblieNum.substr(11, 4);
- }
- console.log(this.moblieNum)
- console.log(this.salfPhone)
- } else {
- this.msg(result.msg, "error");
- }
- },
- // 通用跳转
- navTo(route) {
- this.$mRouter.push({
- route
- });
- },
- //校验验证码
- async validCode() {
- if (!this.form.code) {
- this.msg(this.i18n('Verificationcodecannotbeempty'), "warning");
- return false;
- }
- const result = await this.$myRequest({
- url: '/uc/securitySetting/validCode',
- data: {
- mobile: this.moblie,
- code: this.form.code
- }
- });
- if (result.status == '200') {
- this.$mRouter.push({
- route: '/pages/profile/profileSetUp/changeNewMobileNumber'
- });
- } else {
- this.msg(result.msg, "error");
- }
- },
- //获取验证码信息
- async getCodeFor() {
- let language = this.$i18n.locale;
- //获取验证码信息
- const result = await this.$myRequest({
- url: '/ums/umsUsers/registCode',
- data: {
- account: this.moblie,
- service: "TX",
- language
- }
- });
- if (result.status == '200') {
- this.msg(this.i18n('Verificationcodehasbeensent'), "success");
- } else {
- this.msg(result.msg, "error");
- }
- this.showText = false
- let interval = setInterval(() => {
- let times = --this.second
- }, 1000)
- setTimeout(() => {
- clearInterval(interval)
- this.second = 60
- this.showText = true
- }, 60000)
- },
- msg(msg, type) {
- if (msg == 'error') {
- msg = this.i18n('ThesystemisbusyPleasetryagainlater') + "!" //系统繁忙,请稍后再试
- }
- return this.$refs.uToast.show({
- title: msg,
- type: type,
- // url: '/pages/user/index'
- })
- },
- i18n(data) {
- return this.$t('common.' + data);
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- page,
- body.pages-profile-profileSetUp-setUp uni-page-body {
- background-color: #fff !important;
- .Unbundling {
- margin: 30upx 40upx 40upx 40upx;
- color: #333;
- font-size: 38upx;
- text-align: center;
- }
- .Unbundling-input {
- margin: 0 40upx;
- .uni-input {
- display: inline-block;
- font-size: 30upx;
- line-height: 90upx;
- height: 90upx;
- min-height: 90upx;
- overflow: hidden;
- border: 1px solid #ccc;
- width: 70%;
- vertical-align: middle;
- text-indent: 2em;
- }
- .getCode {
- margin-left: 20upx;
- color: #0000ff;
- }
- .send {
- margin-left: 20upx;
- }
- .code-send {
- margin-left: 48upx;
- color: #0000BF;
- }
- .next {
- margin-top: 100upx;
- }
- }
- }
- </style>
|