| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 |
- <template>
- <view class="container">
- <view class="page-title">绑定手机号</view>
- <form @submit="login">
-
- <view class="cell flex-row-between">
- <input type="number" name="tel" @input="getphone" :value="phone" maxlength="11" placeholder="请输入手机号码"></input>
- <i class="iconfont iconquchu" @click="onClearPhone" v-show="phone"></i>
- </view>
-
- <view class="cell flex-row-between">
- <input type="number" name="register_code" maxlength="6" placeholder="请输入验证码"></input>
- <view class="code-btn" @click="getCode">{{codeConfig.type == 1?'获取验证码':'重试('+codeConfig.time+'s)'}}</view>
- </view>
-
- <view class="cell flex-row-between">
- <input type="text" name="pass"
- maxlength="16" placeholder="请输入6到16位的数字和字母组合"></input>
- </view>
-
- <view class="cell flex-row-between">
- <input type="text" name="repass" maxlength="16" placeholder="请再次输入登录密码"></input>
- </view>
-
- <view class="xieyi flex-row" >
- <image src="../../static/images/select_on.png" mode="aspectFit" class="icon" v-if="xieyiActive"></image>
- <image src="../../static/images/select.png" mode="aspectFit" class="icon" v-else></image>
- <view class="xieyi-text">你已阅读并同意</view>
- <view @click.stop="agreement" style="color: #007AFF;">《注册服务协议》</view>
- </view>
- <button form-type="submit" class="login-btn">确定</button>
- </form>
-
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- phone: null,
- code: null,
- xieyiActive: true,
- codeConfig: {
- type: 1,
- time: 60
- },
- }
- },
- onLoad(e) {
- this.code = e.code;
- this.type=e.type;
- },
- methods: {
- getphone(e) {
- this.phone = e.detail.value;
- },
- onClearPhone() {
- this.tel = "";
- this.phone = "";
- },
- agreement(e) {
- uni.navigateTo({
- url: "../text/text?title=注册服务协议"
- })
- },
- getCode() {
- if (this.codeConfig.type == 2) {
- return false
- }
- if (!/^1[0-9]{10}/.test(this.phone)) {
- uni.showToast({
- title: "请输入手机号",
- icon: 'none'
- })
- return false
- }
- //请求验证码
- this.request({
- url: "user/sendcode",
- data: {
- tel: this.phone,
- },
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- this.codeConfig.type = 2
- this._timer = setInterval(() => {
- if (this.codeConfig.time == 1) {
- this.codeConfig = {
- type: 1,
- time: 30
- }
- clearInterval(this._timer)
- }
- this.codeConfig.time--
- }, 1000)
- }
- }).catch((res) => {
- console.log("message", res)
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- },
- login(e) {
- let data, url;
- if (!/^1[0-9]{10}/.test(e.detail.value.tel)) {
- uni.showToast({
- title: "请正确输入手机号",
- icon: 'none'
- })
- return false
- }
- if (!e.detail.value.register_code) {
- uni.showToast({
- title: "请输入验证码",
- icon: 'none'
- })
- return false
- }
- if (!e.detail.value.pass) {
- uni.showToast({
- title: "请输入密码",
- icon: 'none'
- })
- return false
- }
-
- if (e.detail.value.pass!=e.detail.value.repass) {
- uni.showToast({
- title: "确认密码不一致",
- icon: 'none'
- })
- return false
- }
-
- data=e.detail.value;
- data.code=this.code;
- data.type=this.type;
- this.request({
- url:"user/register",
- data,
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- uni.setStorageSync("token", res.data.token);
- uni.setStorage({
- key: 'login',
- data: {
- tel: e.detail.value.tel,
- },
- success: () => {
- console.log('success');
- uni.reLaunch({
- url: "../index/index"
- })
-
- // if (!this.is_pwd) {
- // uni.reLaunch({
- // url: "./password?tel=" + e.detail.value.tel
- // })
- // } else {
- // uni.reLaunch({
- // url: "../index/index"
- // })
- // }
-
- }
- });
- }
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- }
- }
- }
- </script>
- <style>
- .container {
- padding: 0 60rpx;
- }
- .page-title {
- padding: 40rpx 0 50rpx 0;
- font-size: 54rpx;
- line-height: 1;
- font-weight: 700;
- color: #242424;
- }
- .cell {
- height: 90rpx;
- border-bottom: 2rpx solid #ededed;
- margin-bottom: 30rpx;
- }
- .cell .iconquchu {
- flex: none;
- font-size: 23rpx;
- color: #cbcbcb;
- }
- .cell .code-btn {
- flex: none;
- width: 170rpx;
- height: 60rpx;
- border-radius: 30rpx;
- background-color: #3387FF;
- text-align: center;
- line-height: 60rpx;
- color: #fff;
- font-size: 24rpx;
- }
- .cell input {
- flex: auto;
- margin-right: 40rpx;
- }
- .login-btn {
- width: 630rpx;
- height: 98rpx;
- background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
- border-radius: 8rpx;
- box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
- font-size: 32rpx;
- font-weight: 500;
- text-align: center;
- color: #fff;
- line-height: 98rpx;
- margin: 100rpx auto 0;
- }
- .xieyi {
- font-size: 26rpx;
- }
- .xieyi .icon {
- flex: none;
- margin-right: 12rpx;
- display: block;
- width: 28rpx;
- height: 28rpx;
- }
- .xieyi .xieyi-text {
- color: #a8a8a8;
- }
- .xieyi navigator {
- color: #3387FF;
- }
- </style>
|