onecric_h5/pages/forget/index.vue

<template>
	<view class="login">
		<header-logo></header-logo>
		<view class="login-main" v-if="step == 1">
      <div class="top flex">
        <div class="flex" @click="stepBack1">
          <u-icon name="arrow-left" color="#ffffff" size="16px" bold></u-icon>
          <!-- Log In -->
          {{ $t('login.login') }}
        </div>
      </div>
      <div class="section">
        <div class="title">
          <!-- Forget Password? -->
          {{ $t('login.forget') }}?
        </div>
        <div class="tip">
          <!-- We will send on otp to your Email ID / Mobile number -->
          {{ $t('login.lab') }}
        </div>
        <u--form class="form" labelPosition="left" :rules="rules" ref="uForm" :model="userInfo">
          <u-form-item prop="mobile" borderBottom ref="item1">
            <u--input placeholderStyle="color: #4E4E4E" color="#4E4E4E" fontSize="16px" v-model="userInfo.mobile" :placeholder="$t('login.lab1')" border="none">
              <template slot="prefix">
                <div class="code-box" @click="regionShow = true">
                  <img class="thumbnail" :src="thumbnail" alt="">
                  <div>+ {{ code }}</div>
                </div>
              </template>
            </u--input>
          </u-form-item>
        </u--form>
        <div class="fixed">
          <div class="btn" @click="stepTwo">
            <!-- Send -->
          {{ $t('login.lab2') }}
          </div>
        </div>
      </div>
		</view>
    <view class="login-main" v-if="step == 2">
      <div class="top flex">
        <div class="flex" @click="stepBack2">
          <u-icon name="arrow-left" color="#ffffff" size="16px" bold></u-icon>
          {{ $t('login.forget') }}?
        </div>
      </div>
			<div class="section">
        <div class="title">
          <!-- Enter the 6 digit OTP -->
          {{ $t('login.lab3') }}
        </div>
        <!-- OTP sent to -->
        <div class="tip">{{ $t('login.lab4') }} +{{ code }} {{ userInfo.mobile }}</div>
        <div class="lab">
          <!-- In Case You Don't Find It, Check Your Junk Information. -->
          {{ $t('login.lab5') }}
        </div>
        <u--form labelPosition="left" :rules="rules" ref="uForm" :model="userInfo">
          <u-form-item prop="code" ref="item1">
            <u-code-input size="84rpx" hairline borderColor="#959595" fontSize="16px" space="37rpx" v-model="userInfo.code" mode="line"></u-code-input>
          </u-form-item>
        </u--form>
      </div>
      <div class="fixed">
        <div class="box_btn_2">
          <div class="down-box" v-if="!timeFinish">
            <!-- Resend OTP IN -->
            {{ $t('login.lab6') }} <u-count-down @finish="timeFinishFun" :autoStart="autoStart" name="down" :time="2 * 60 * 1000" format="mm:ss"></u-count-down></div>
          <div class="down-box" v-if="timeFinish"><div class="Resend" @click="stepTwo">{{ $t('login.lab7') }}</div></div>
			    <div class="btn" @click="stepThree">{{ $t('login.lab8') }}</div>
        </div>
      </div>
		</view>
    <view class="login-main" v-if="step == 3">
      <div class="top flex">
        <div class="flex" @click="stepBack">
          <u-icon name="arrow-left" color="#ffffff" size="16px" bold></u-icon>
          {{ $t('login.forget') }}?
        </div>
      </div>
      <div class="section">
        <div class="title">{{ $t('login.forget') }}?</div>
        <div class="tip">
          <!-- We will send on otp to your Email ID / Mobile number -->
          {{ $t('login.lab') }}
        </div>
        <u--form class="form" labelPosition="left" :rules="rules" ref="uForm" :model="userInfo">
          <u-form-item prop="password" borderBottom ref="item1">
					<u--input placeholderStyle="color: #4E4E4E" color="#4E4E4E" fontSize="16px" :type="!pwshow ? 'password' : 'text'" v-model="userInfo.password" :placeholder="$t('login.lab9')" border="none">
						<img class="pwd" slot="prefix" src="/static/image/login/pwd.svg" alt="">
						<template slot="suffix">
							<div>
								<img v-if="!pwshow" class="show" @click="pwshow = true" src="/static/image/login/show.svg" alt="">
								<img v-if="pwshow" class="show" @click="pwshow = false" src="/static/image/login/hide2.png" alt="">
							</div>
						</template>
					</u--input>
				</u-form-item>
        <u-form-item prop="password1" borderBottom ref="item1">
					<u--input placeholderStyle="color: #4E4E4E" color="#4E4E4E" fontSize="16px" :type="!pwshow1 ? 'password' : 'text'" v-model="userInfo.password1" :placeholder="$t('login.lab10')" border="none">
						<img class="pwd" slot="prefix" src="/static/image/login/pwd.svg" alt="">
						<template slot="suffix">
							<div>
								<img v-if="!pwshow1" class="show" @click="pwshow1 = true" src="/static/image/login/show.svg" alt="">
								<img v-if="pwshow1" class="show" @click="pwshow1 = false" src="/static/image/login/hide2.png" alt="">
							</div>
						</template>
					</u--input>
				</u-form-item>
        </u--form>
      </div>
      <div class="fixed">
			  <div class="btn" @click="registered">
          <!-- Update -->
          {{ $t('login.lab11') }}
        </div>
      </div>
		</view>
    <u-overlay :show="regionShow" @close="close" @open="open" :closeable="regionShow">
      <selectRegion :tournamentList="tournamentList" @close="close" @checkboxChange="checkboxChange"></selectRegion>
    </u-overlay>
	</view>
</template>

<script>
import selectRegion from '../components/selectRegion/index.vue'
	export default {
    components: {
      selectRegion
    },
		data() {
			return {
				userInfo: {
					mobile: "",
        	password: "",
        	password1: "",
          code: ''
				},
				pwshow: false,
				pwshow1: false,
				rules: {},
				checked: false,
				checked1: false,
        step: 1,
        tournamentList: [],
        code: '',
        searchname: '',
        thumbnail: "",
        country_code: "",
        regionShow: false,
        autoStart: true,
        timeFinish: true,
			}
		},
    created() {
      this.get_cricket_tournament("");
    },
    mounted() {
    },
		methods: {
			stepTwo() {
				if (!this.userInfo.mobile) {
					uni.$u.toast(this.$t('login.lab12'));
					return
				}
				uni.showLoading({
					title: this.$t('common.lab'),
				});
				let mobile = this.code + '-' + this.userInfo.mobile
        uni.$u.http.get('/api/v1/getcode', {
          params: {
            type: 2,
            mobile: mobile
          }
        }).then(res => {
          uni.$u.toast(this.$t('login.lab13'));
          this.timeFinish = false
          this.step = 2
        }).finally(() => {
          uni.hideLoading();
        });
			},
      stepThree() {
        if (!this.userInfo.code || this.userInfo.code.length < 6) {
					uni.$u.toast(this.$t('login.lab14'));
					return
				}
        uni.showLoading({
          title: this.$t('common.lab'),
        });
        let mobile = this.code + '-' + this.userInfo.mobile
        uni.$u.http.get('/api/v1/verify_code', {
          params: {
            code: this.userInfo.code,
            mobile: mobile,
            type: 2
          }
        }).then(res => {
          this.step = 3
          this.timeFinish = true
        }).finally(() => {
          uni.hideLoading();
        });
      },
      registered() {
        if (!this.userInfo.password) {
					uni.$u.toast(this.$t('login.lab15'));
					return
				}
        if (!this.userInfo.password1) {
					uni.$u.toast(this.$t('login.lab16'));
					return
				}
        if (this.userInfo.password != this.userInfo.password1) {
          uni.$u.toast(this.$t('login.lab17'));
					return
        }
        uni.showLoading({
					title: this.$t('login.lab18')
				})
        uni.$u.http.get('/api/v1/forgotPassword', {
          params: {
            ...this.userInfo,
            mobile: this.code + '-' + this.userInfo.mobile,
          }
        }).then(res => {
          uni.showToast({
            title: this.$t('login.lab13'),
            icon: "success"
          })
          this.step = 1
          this.userInfo.code = ''
          this.userInfo.password = ''
          this.userInfo.password1 = ''
          this.userInfo.mobile = ''
          this.$toUrl('/pages/login/login')
        }).finally(() => {
          uni.hideLoading();
        });
      },
      get_cricket_tournament(value) {
        uni.$u.http
          .post(`/api/universal/getHot?code=${value}`, {})
          .then((res) => {
            this.tournamentList = res.CountryCode || [];
            if (this.searchname) {
              return
            }
            this.searchname = res.CountryCode[0].name;
            this.country_code = res.CountryCode[0].country_code;
            this.thumbnail = res.CountryCode[0].thumbnail;
            this.code = res.CountryCode[0].code;
          })
          .catch((res) => {});
      },
      checkboxChange(item) {
        this.searchname = item.name;
        this.country_code = item.country_code;
        this.thumbnail = item.thumbnail;
        this.code = item.code;
        this.regionShow = false;
      },
      close() {
        this.regionShow = false;
      },
      open() {
      },
      timeFinishFun() {
        this.timeFinish = true
      },
      stepBack1() {
        this.$toUrl('/pages/login/login')
      },
      stepBack2() {
        this.step = 1
        this.timeFinish = true
        this.userInfo.code = ''
        this.userInfo.password = ''
      },
      stepBack() {
        this.step = 2
        this.userInfo.password = ''
      }
		}
	}
</script>

<style lang="scss" scoped>
.login-main {
	padding: 0 0 30rpx;
  .top {
    background-color: #262E4A;
    height: 40px;
    font-weight: 500;
    font-size: 16px;
    padding: 0 16px;
    color: #fff;
    .u-icon {
      margin-right: 10px;
    }
  }
  .section {
    padding: 32px 16px 0;
  }
	.title {
		font-weight: 600;
		font-size: 18px;
		color: #242424;
		margin-bottom: 16px;
    line-height: 1;
	}
	.tip {
		font-weight: 400;
		font-size: 14px;
		color: #4E4E4E;
    line-height: 1;
	}
	.u-form {
		padding-top: 5.5vh;
    &.form {
      padding-top: 8vh;
    }
	}
	.pwd {
		height: 16px;
		display: block;
	}
	.show {
		display: block;
		cursor: pointer;
		width: 20px;
	}
	/deep/ .u-input__content__prefix-icon {
		margin-right: 12px;
	}
	/deep/ .u-input__content__subfix-icon {
		padding-right: 5px;
	}
  .checkbox {
		position: relative;
		padding-left: 28px;
		font-weight: 400;
		font-size: 12px;
		color: #4E4E4E;
		margin-bottom: 26px;
    margin-top: 16px;
    .no {
      width: 14px;
      height: 14px;
      border: 1px solid #B1B1B1;
      border-radius: 3px;
      position: absolute;
      left: 0;
      top: 1px;
    }
    .line {
      text-decoration: underline;
      margin: 0 3px;
    }
    .img {
      width: 16px;
      position: absolute;
      left: 0;
      top: 1px;
    }
	}
  .code-box {
    display: flex;
    align-items: center;
    .thumbnail {
      width: 30px;
      margin-right: 11px;
    }
  }
  .lab {
    font-weight: 400;
    font-size: 12px;
    color: #4E4E4E;
    margin-top: 32px;
    line-height: 1;
  }
}

.box_btn_2 {
  .down-box {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    color: #4E4E4E;
    margin-bottom: 16px;
  }
  .u-count-down {
    margin-left: 3px;
  }
  .Resend {
    font-weight: 900;
    color: #DE2D01;
}
}

.btn {
  cursor: pointer;
  background: linear-gradient(94.25deg, #FF3300 -3.08%, #D22A00 100%);
  border-radius: 4px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  padding: 16px;
  bottom: 20px;
  background-color: #fff;
}
.u-form-item + .u-form-item {
	margin-top: 20px;
}
</style>