yizhizan-h5/pages/public/register.vue

<template>
  <view class="container">
    <nav-bar :title="steps == 0?'注册1/2':'创建账号密码2/2'" color="#000"></nav-bar>
	<view class="line-box">
		<view class="line line-bg" @click="steps = 0"></view>
		<view class="line" :class="[ steps == 1?'line-bg':'' ]" @click="steps = 1"></view>
	</view>
    <view class="wrapper">
      <view class="input-content">
        <!-- <view class="item-label">用户名</view>
        <view class="cu-form-group">
          <input
            :value="userName"
            placeholder="请输入用户名"
            data-key="userName"
            @input="inputChange"
          />
        </view> -->
        <view class="item-label" v-show="steps == 0">手机号码</view>
        <view class="cu-form-group" v-show="steps == 0">
          <input
            type="number"
            :value="phone"
            placeholder="请输入登录的手机号码"
            maxlength="11"
            data-key="phone"
            @input="inputChange"
          />
        </view>
        <view class="item-label" v-show="steps == 0">验证码</view>
        <view class="cu-form-group padding-right-xs" v-show="steps == 0">
          <input
            type="number"
            :value="code"
            placeholder="请输入验证码"
            maxlength="6"
            data-key="code"
            @input="inputChange"
            @confirm="toLogin"
          />
          <text class="send-msg" @click="sendMsg" :disabled="sending">
            {{ sendTime }}
          </text>
        </view>

        <view class="item-label" v-show="steps == 1">密码</view>
        <view class="cu-form-group" v-show="steps == 1">
          <input
            :value="password"
            :password="showPassword"
            placeholder="输入密码"
            placeholder-class="input-empty"
            maxlength="20"
            minlength="8"
            data-key="password"
            @input="inputChange"
            @confirm="toLogin"
          />
		  <u-icon @click="changePassword" class="eye" :class="{ 'eye-active': !showPassword }" name="eye-fill"></u-icon>
        </view>
		<view v-show="steps == 1">
			<u-line-progress class="line-progress" :show-percent="false" :active-color="progressColor" :percent="passwordStrength * 33.3"></u-line-progress>
			<view class="password-rules">
			  <view class="rule-item" v-for="(item, index) in list" :key="index" :class="{ 'rule-valid': item.checked }">
			    <image
			      src="@/static/images/jobApplicant/check.svg"
			      v-if="item.checked"
			      mode="scaleToFill"
			    />
			    <image
			      src="@/static/images/jobApplicant/border.svg"
			      v-else
			      mode="scaleToFill"
			    />
			    <text class="rule-text">{{item.label}}</text>
			  </view>
			</view>
		</view>
        <!-- <view class="cu-form-group" style="margin-top: 32rpx" v-if="required == '是'">
          <view class="item-label-code">邀请码</view>
          <input
            type=""
            maxlength="6"
            :value="invitation"
            placeholder="请填写邀请码(必填)"
            data-key="invitation"
            @input="inputChange"
            @confirm="toLogin"
          />
        </view> -->
        <!-- <view class="cu-form-group" style="margin-top: 32rpx" v-if="required == '否'">
          <view class="item-label-code">邀请码</view>
          <input
            type=""
            maxlength="6"
            :value="invitation"
            placeholder="请填写邀请码(选填)"
            data-key="invitation"
            @input="inputChange"
            @confirm="toLogin"
          />
        </view> -->
      </view>
      <button class="confirm-btn" @click="nextStep" v-if="steps == 0">下一步</button>
	  <button class="confirm-btn" @click="toLogin" v-if="steps == 1">继续</button>
      <!-- <view class="footer">
        <text
          @tap="isShowAgree"
          class="cuIcon"
          :class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'"
          >同意</text
        >
        <navigator url="/my/setting/mimi" open-type="navigate">《隐私政策》</navigator>
        和
        <navigator url="/my/setting/xieyi" open-type="navigate"
          >《用户服务协议》</navigator
        >
      </view> -->
    </view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";
export default {
  data() {
    return {
      userName: "",
      showAgree: false,
      code: "",
      phone: "",
      password: "",
	  showPassword:true,
      required: "否",
      sending: false,
      sendTime: "获取验证码",
      count: 60,
      relation: "",
      state: "",
      invitation: "",
      platform: "",
	  steps:0,
	  passwordStrength: 0, // 当前满足的条件数
	  list: [
		{ name: 'length', label: '最少8位数',checked: false, },
		{ name: 'number', label: '至少包含1个数字',checked: false, },
		{ name: 'upper', label: '至少包含一个大写字母',checked: false, }
	  ],
	  valueBackup: [],
	};
  },
  components: {
    navBar,
  },
  onLoad() {
    // this.invitation = this.$queue.getData('inviterCode') ? this.$queue.getData('inviterCode') : '';
    this.invitation = this.$queue.getData("invitation")
      ? this.$queue.getData("invitation")
      : "";
    // #ifdef APP-PLUS
    this.platform = "app";
    //#endif
    //#ifdef H5
    this.platform = "H5";
    // #endif
  },
  computed: {
      progressColor() {
        switch (this.passwordStrength) {
          case 1:
            return 'rgba(214, 44, 1, 1)';
          case 2:
            return 'rgba(250, 174, 22, 1)';
          case 3:
            return 'rgba(1, 107, 246, 1)';
          default:
            return 'rgba(237, 236, 239, 1)';
        }
      },
    },
  methods: {
    showMa() {
      //查询官方邀请码
      this.$Request.getT("/app/common/type/4").then((res) => {
        if (res.code == 0) {
          this.invitationCode = res.data.value;
        }
      });
    },
    // 注册邀请码必填
    invitationMa() {
      this.$Request.getT("/app/common/type/3").then((res) => {
        if (res.code == 0) {
          this.required = res.data.value;
        }
      });
    },
    // 获取新用户优惠券数量
    newMa() {
      this.$Request.getT("/app/common/type/119").then((res) => {
        if (res.code == 0) {
          this.amount = res.data.value;
        }
      });
    },
    isShowAgree() {
      //是否选择协议
      this.showAgree = !this.showAgree;
    },
    sendMsg() {
      const { phone } = this;
      if (!phone) {
        this.$queue.showToast("请输入手机号");
      } else if (phone.length !== 11) {
        this.$queue.showToast("请输入正确的手机号");
      } else if(this.sendTime != '获取验证码'){
		  return;
	  }else {
        this.$queue.showLoading("正在发送验证码...");
        this.$Request.getT("/app/Login/sendMsg/" + phone + "/1").then((res) => {
          if (res.code === 0) {
            this.sending = true;
            this.$queue.showToast("验证码发送成功请注意查收");
            this.countDown();
            uni.hideLoading();
          } else {
            uni.hideLoading();
            uni.showModal({
              showCancel: false,
              title: "短信发送失败",
              content: res.msg ? res.msg : "请一分钟后再获取验证码",
            });
          }
        });
      }
    },
    countDown() {
      const { count } = this;
      if (count === 1) {
        this.count = 60;
        this.sending = false;
        this.sendTime = "获取验证码";
      } else {
        this.count = count - 1;
        this.sending = true;
        this.sendTime = count - 1 + "秒后重新获取";
        setTimeout(this.countDown.bind(this), 1000);
      }
    },
    inputChange(e) {
      const key = e.currentTarget.dataset.key;
      this[key] = e.detail.value;
	  if(key == 'password'){
		this.checkPasswordStrength(this.password);
	  }
    },
	checkPasswordStrength(pwd) {
	  let strength = 0;
	  this.list.forEach(item => {
	    if (item.name === 'length') {
	      item.checked = pwd.length >= 8;
	      if (item.checked) strength++;
	    } else if (item.name === 'number') {
	      item.checked = /[0-9]/.test(pwd);
	      if (item.checked) strength++;
	    } else if (item.name === 'upper') {
	      item.checked = /[A-Z]/.test(pwd);
	      if (item.checked) strength++;
	    }
	  });
	  this.passwordStrength = strength;
	  this.valueBackup = this.list.map(i => i.checked);
	},
    navBack() {
      uni.navigateBack();
    },

    navTo(url) {
      uni.navigateTo({
        url,
      });
    },
	// 下一步
	nextStep(){
		const { phone,code } = this;
		if (!phone) {
		  this.$queue.showToast("请输入手机号");
		} else if (!code) {
		  this.$queue.showToast("请输入验证码");
		}else{
			this.steps = 1;
		}
	},
	changePassword(){
		this.showPassword = !this.showPassword;
	},
	// 注册
    toLogin() {
      const { userName, phone, password, code, showAgree, invitation } = this;
      if (!phone) {
        this.$queue.showToast("请输入手机号");
      } else if (!code) {
        this.$queue.showToast("请输入验证码");
      } else if (!password) {
        this.$queue.showToast("请设置密码");
      } else if (password.length < 8) {
        this.$queue.showToast("密码位数必须大于八位");
      } else if (!/(?=.*[A-Z])(?=.*\d)/.test(password)) {
		this.$queue.showToast("密码必须包含至少一个大写字母和一个数字");
	  }else {
        // this.invitation = "";
        this.logining = true;
        this.$queue.showLoading("注册中...");
        this.$Request
          .post(`/app/Login/registApp`, {
            userName: phone,
            password: password,
            phone: phone,
            wxOpenId: this.$queue.getData("openId") ? this.$queue.getData("openId") : "",
            // invitation: this.invitation,
            platform: this.platform,
            msg: code,
          })
          .then((res) => {
            if (res.code === 0) {
              this.$queue.showToast("注册成功");

              this.$queue.setData("token", res.token);
              this.$queue.setData("userId", res.user.userId);
              this.$queue.setData("userName", res.user.userName);
              this.$queue.setData("phone", res.user.phone);
              this.$queue.setData(
                "avatar",
                res.user.avatar ? res.user.avatar : "../../static/logo.png"
              );
              this.getUserInfo();
    //           setTimeout(function () {
    //             // 这里判断一下看是否是第一次登录如果是就跳到引导页，如果不是就正常跳
    //             // let firstLogin = uni.getStorageSync("firstLogin") || false;
				// console.log("userType：",res.user.userType)
    //             if (!res.user.userType) {
    //               uni.navigateTo({
    //                 url: "/pages/my/jobApplicant/guidePage",
    //               });
    //             } else {
    //               uni.switchTab({
    //                 url: "/pages/index/index",
    //               });
    //             }
    //           }, 1000);
            } else {
              uni.hideLoading();
              uni.showModal({
                showCancel: false,
                title: "注册失败",
                content: res.msg,
              });
            }
          });
      } 
	  // else {
   //      this.logining = true;
   //      this.$queue.showLoading("注册中...");
   //      this.$Request
   //        .post(`/app/Login/registApp?msg=${code}`, {
   //          userName: userName,
   //          password: password,
   //          phone: phone,
   //          openId: this.$queue.getData("openId") ? this.$queue.getData("openId") : "",
   //          invitation: this.invitation,
   //          platform: this.platform,
   //        })
   //        .then((res) => {
   //          if (res.code === 0) {
   //            this.$queue.setData("token", res.token);
   //            this.$queue.setData("userId", res.user.userId);
   //            this.$queue.setData("userName", res.user.userName);
   //            this.$queue.setData("phone", res.user.phone);
   //            this.$queue.setData(
   //              "avatar",
   //              res.user.avatar ? res.user.avatar : "../../static/logo.png"
   //            );
   //            this.$queue.setData("invitationCode", res.user.invitationCode);
   //            this.$queue.setData("inviterCode", res.user.inviterCode);
   //            this.getUserInfo();
   //            setTimeout(function () {
   //              uni.switchTab({
   //                url: "/pages/index/index",
   //              });
   //            }, 1000);
   //          } else {
   //            uni.showModal({
   //              showCancel: false,
   //              title: "注册失败",
   //              content: res.msg,
   //            });
   //          }
   //          uni.hideLoading();
   //        });
   //    }
    },
    //获取用户信息
    getUserInfo() {
      this.$Request.get("/app/user/selectUserById").then((res) => {
        if (res.code == 0) {
          uni.hideLoading();
          this.$queue.setData(
            "avatar",
            res.data.avatar ? res.data.avatar : "../../static/logo.png"
          );
          this.$queue.setData("userId", res.data.userId);
          this.$queue.setData("userName", res.data.userName);
          this.$queue.setData("phone", res.data.phone);
          this.$queue.setData("invitationCode", res.data.invitationCode);
          this.$queue.setData("inviterCode", res.data.inviterCode);

          this.userName = res.data.userName;
          this.invitationCode = res.data.invitationCode;
          uni.setStorageSync("invitationCode", res.data.invitationCode);
          setTimeout(function () {
            uni.reLaunch({
              url: "/pages/my/jobApplicant/registerSuccess",//pages/my/jobApplicant/registerSuccess
            });
          }, 1000);
		  return
        } else {
          uni.showModal({
            showCancel: false,
            title: "登录失败",
            content: res.msg,
          });
          this.$queue.logout();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .input-placeholder,.uni-input-placeholder {
  color: #9ea1a8;
  font-family: DM Sans;
  font-size: 28rpx;
  font-weight: 400;
  text-align: left;
}
page {
  height: 100%;
  background: #ffffff !important;
}
.item-label {
  color: rgba(18, 26, 44, 1);
  font-family: Roboto;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 51.2rpx;
  letter-spacing: 0px;
  text-align: left;
  padding-bottom: 8rpx;
  margin-top: 32rpx;
}
.cu-form-group {
	position: relative;
  box-sizing: border-box;
  border: 2rpx solid rgba(158, 161, 168, 1);
  border-radius: 24rpx;
  background: rgba(255, 255, 255, 1);
  padding: 8rpx 24rpx !important;
  height: 96rpx;
}
.eye{
	position: absolute;
	top: 50%;
	right: 24rpx;
	font-size: 48rpx;
	transform: translateY(-50%);
}
.eye-active{
	color: #016bf6;
}
.line-progress{
	margin: 32rpx 0;
}
.footer {
  padding-left: 140rpx;
  margin-top: 32rpx;
  text-align: center;
  display: flex;
  // color: #FFFFFF;
}

.send-msg {
  color: rgba(1, 107, 246, 1);
  font-size: 28rpx;
  font-weight: 400;
}

.container {
  padding-top: 32rpx;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff !important;
}
.line-box{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
}
.line{
	width: 20px;
	height: 4px;
	border-radius: 20px;
	background-color: rgba(153, 196, 250, 1);
}
.line-bg{
	background-color: #016BF6;
}
::v-deep .u-checkbox__label{
	margin-left: 20rpx;
	color: rgba(76, 74, 83, 1);
	font-family: Roboto;
	font-size: 32rpx;
	font-weight: 400;
}

.wrapper {
  position: relative;
  z-index: 90;
  background: #ffffff;
  padding-bottom: 20px;
}

.input-content {
  padding: 32rpx;
  box-sizing: border-box;
}

.confirm-btn {
	margin: 0 32rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 60rpx;
  background: #016bf6;
  color: #fff;
  font-size: 32rpx;
  font-weight: 400;

  &:after {
    border-radius: 60px;
  }
}
// 密码要求列表
.rule-item {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
  image{
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
  }
}

.rule-text {
  color: #4c4a53;
  font-family: Roboto;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 51.2rpx;
  text-align: left;
}

.rule-valid .rule-text {
  color: #4c4a53;
}

.input-box {
  position: relative;
}

.next-btn-active {
  background: #2979ff;
}

::v-deep .u-input {
  text-align: left !important;
}

.progress-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24rpx;
  padding-top: 40rpx;
  box-sizing: border-box;
  .progress-item {
    width: 40rpx;
    height: 8rpx;
    background-color: #016bf6;
    border-radius: 40rpx;
  }
}
</style>