|
|
@@ -0,0 +1,311 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="login-wrap">
|
|
|
+ <view class="login-form">
|
|
|
+ <u--form labelPosition="left" :model="userInfo" :rules="rules" ref="form1">
|
|
|
+ <u-form-item label="手机号" prop="phonenumber" labelWidth="auto" labelAlign="right">
|
|
|
+ <u--input v-model="userInfo.phonenumber" placeholder="请输入手机号" border="bottom" type="number"
|
|
|
+ maxlength="11"></u--input>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item labelWidth="auto" labelAlign="right" label="验证码" prop="smsCode" width="120">
|
|
|
+ <u--input v-model="userInfo.smsCode" disabledColor="#ffffff" placeholder="请输入验证码"
|
|
|
+ border="bottom" maxlength="6"></u--input>
|
|
|
+ <template #right>
|
|
|
+ <view class="identifying-code">
|
|
|
+ <u-code ref="uCode2" @change="codeChange2" keep-running start-text="获取验证码"></u-code>
|
|
|
+ <text @tap="getCode2" :text="tips2" class="u-page__code-text">{{tips2}}</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </u-form-item>
|
|
|
+ </u--form>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view @click="gotoBindAccountPassword()" class="op-btn-wrap">
|
|
|
+ <view class="h-btn">
|
|
|
+ <text>下一步</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 密码正确 -->
|
|
|
+ <u-popup :show="errShow" :round="10" mode="center">
|
|
|
+ <view class="h-popo-content">
|
|
|
+ <view class="h-img">
|
|
|
+ <!-- <u-icon name="close" color="red" size="40"></u-icon> -->
|
|
|
+ <u-icon name="/static/login/u01.png" color="red" size="50"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="h-text">
|
|
|
+ <text>系统已检测到该手机号已绑定过账号</text>
|
|
|
+ </view>
|
|
|
+ <view class="h-text">
|
|
|
+ <text>请选择</text>
|
|
|
+ </view>
|
|
|
+ <view class="h-btn-wrap">
|
|
|
+ <view @click="createNewAccount()" class="h-left-btn">
|
|
|
+ <text>创建新账号</text>
|
|
|
+ </view>
|
|
|
+ <view @click="loginOldAccount()" class="h-right-btn">
|
|
|
+ <text>登录老账号</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ errShow: false,
|
|
|
+ userInfo: {
|
|
|
+ phonenumber: '',
|
|
|
+ phone: '',
|
|
|
+ smsCode: '',
|
|
|
+ openId: '',
|
|
|
+ password: "",
|
|
|
+ transactionPassword: "",
|
|
|
+ reference: "",
|
|
|
+ type: '' // 实名认证创建新账号
|
|
|
+ },
|
|
|
+ tips2: '',
|
|
|
+ rules: {
|
|
|
+ phonenumber: [{
|
|
|
+ required: true,
|
|
|
+ min: 10,
|
|
|
+ max: 12,
|
|
|
+ message: '请输入11位电话号码',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 此为同步验证,可以直接返回true或者false,如果是异步验证,稍微不同,见下方说明
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ // 调用uView自带的js验证规则,详见:https://www.uviewui.com/js/test.html
|
|
|
+ return !this.$isDataEmpty(value);
|
|
|
+ },
|
|
|
+ message: "请认真填写电话号码",
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ smsCode: {
|
|
|
+ required: true,
|
|
|
+ min: 4,
|
|
|
+ max: 6,
|
|
|
+ message: '请输入4位验证码',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ // 判断Openid是否为空
|
|
|
+ if (!this.$isDataEmpty(option.openId)) {
|
|
|
+ this.userInfo.openId = option.openId;
|
|
|
+ console.log(option)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.$refs.form1.setRules(this.rules)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 创建新账号
|
|
|
+ createNewAccount() {
|
|
|
+ this.errShow = false;
|
|
|
+ this.userInfo.type = "2";
|
|
|
+ uni.$u.route({
|
|
|
+ url: '/pages/login/login-real-name-auth',
|
|
|
+ params: {
|
|
|
+ data: JSON.stringify(this.userInfo)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 登录老账号
|
|
|
+ loginOldAccount() {
|
|
|
+ this.errShow = false;
|
|
|
+ uni.$u.route({
|
|
|
+ url: '/pages/login/login-old-account',
|
|
|
+ params: {
|
|
|
+ phone: this.userInfo.phonenumber
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 验证电话号码是否存在
|
|
|
+ phoneIsExist() {
|
|
|
+ let that = this;
|
|
|
+ // 验证电话号码是否存在
|
|
|
+ this.$api.phoneIsExist({
|
|
|
+ data: this.userInfo
|
|
|
+ }).then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.phoneIsExist) { // 存在
|
|
|
+ that.errShow = true;
|
|
|
+ } else {
|
|
|
+ that.userInfo.phone = that.userInfo.phonenumber;
|
|
|
+ that.userInfo.type = "1";
|
|
|
+
|
|
|
+
|
|
|
+ uni.$u.route({
|
|
|
+ url: '/pages/login/bind-transaction-password',
|
|
|
+ params: {
|
|
|
+ data: JSON.stringify(that.userInfo)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ /* uni.$u.route({
|
|
|
+ url: '/pages/login/bind-account-password',
|
|
|
+ params: {
|
|
|
+ data: JSON.stringify(that.userInfo)
|
|
|
+ }
|
|
|
+ }) */
|
|
|
+
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.showToast({
|
|
|
+ title: "操作失败"
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 去绑定账号密码页面
|
|
|
+ gotoBindAccountPassword() {
|
|
|
+ this.$refs.form1.validate().then(res => {
|
|
|
+ this.phoneIsExist();
|
|
|
+ }).catch(errors => {
|
|
|
+ uni.$u.toast('校验失败,请认真填写')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ codeChange2(text) {
|
|
|
+ this.tips2 = text;
|
|
|
+ },
|
|
|
+ getCode2() {
|
|
|
+ let that = this;
|
|
|
+ if (this.$refs.uCode2.canGetCode) {
|
|
|
+ that.getSmsCode();
|
|
|
+ } else {
|
|
|
+ uni.$u.toast('倒计时结束后再发送');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取手机验证码
|
|
|
+ getSmsCode() {
|
|
|
+ let that = this;
|
|
|
+ // 模拟向后端请求验证码
|
|
|
+ uni.showLoading({
|
|
|
+ title: '正在获取验证码'
|
|
|
+ })
|
|
|
+ getSmsCode({
|
|
|
+ data: {
|
|
|
+ phonenumber: this.userInfo.phonenumber,
|
|
|
+ auth: true
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ // 这里此提示会被this.start()方法中的提示覆盖
|
|
|
+ uni.$u.toast('验证码已发送');
|
|
|
+ // 通知验证码组件内部开始倒计时
|
|
|
+ that.$refs.uCode2.start();
|
|
|
+ }).catch(() => {
|
|
|
+ uni.showToast({
|
|
|
+ title: "操作失败"
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+ page,
|
|
|
+ body {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-popo-content {
|
|
|
+ height: 380rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ width: 600rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
+
|
|
|
+ .h-img {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-text {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-btn-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 28rpx;
|
|
|
+
|
|
|
+ .h-left-btn {
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ background: #EEEEEE;
|
|
|
+ width: 200rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-right-btn {
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ background: #FFE05C;
|
|
|
+ width: 200rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ background: #fff;
|
|
|
+ height: 600rpx;
|
|
|
+
|
|
|
+ .login-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .login-form {
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .account {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .identifying-code {}
|
|
|
+ }
|
|
|
+
|
|
|
+ .op-btn-wrap {
|
|
|
+ margin-top: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .h-btn {
|
|
|
+ text-align: center;
|
|
|
+ width: 686rpx;
|
|
|
+ height: 84rpx;
|
|
|
+ background: #FFE05C;
|
|
|
+ border-radius: 54rpx;
|
|
|
+ line-height: 84rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|