zhywpt-sp/login/register-step3.vue

<!-- 注册第3步 -->
<template>
  <view class="register-main">
    <view class="title">请设置登录密码</view>
    <view class="hint">设置登录密码用于登录</view>
    <view class="hint1">密码</view>
    <view class="form-input">
      <input
        class="input"
        v-model="state.password"
        placeholder="请输入密码"
        placeholder-class="form-placeholder"
        :password="state.isPwdType ? true : false"
        type="text"
      />
      <image
        :src="`${$imgUrl}login/${
          state.isPwdType ? 'icon_eye_close' : 'icon_eye_open'
        }.png`"
        class="eye"
        @click="state.isPwdType = !state.isPwdType"
      ></image>
    </view>
    <view class="hint4">{{ state.pwdHint }}</view>
  </view>

  <view class="btn">
    <submit-button title="确认注册" @submit="doRegister"></submit-button>
  </view>
</template>

<script setup lang="ts">
import { msg, confirm, checkStr } from "@/utils/utils";
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { request } from "@/utils/network/request";
import { regist } from "@/utils/network/api";

const state = reactive({
  isPwdType: true,
  password: "", //密码
  phone: "", //手机号
  code: "", //验证码
  pwdHint: "密码不少于10位，必须同时包含数字、大小写字母和特殊符号",
});

onLoad((options) => {
  state.phone = options.phone;
  state.code = options.code;
});

/* 注册 */
const doRegister = () => {
  if (!state.password) {
    msg("请输入密码");
    return;
  }

  const options = {
    type: 2,
    data: {
      loginPass: state.password,
      mobile: state.phone,
      code: state.code,
      nickName: state.phone,
    },
    method: "POST",
    showLoading: true,
  };
  request(regist, options).then((res) => {
    confirm(
      "注册成功，请登录！",
      () => {
        uni.$emit("login", { phone: state.phone });
        uni.navigateBack({ delta: 3 });
      },
      "提示",
      false
    );
  });
};
</script>

<style lang="scss" scoped>
.register-main {
  border-top: 1rpx solid #dcdcdc;
  padding: 78rpx 30rpx 50rpx;
  .title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 600;
  }
  .hint {
    font-size: 24rpx;
    color: #999999;
    margin-top: 20rpx;
  }
  .hint1 {
    color: #333333;
    font-size: 28rpx;
    margin-top: 100rpx;
    font-weight: 600;
  }
  .hint4 {
    margin-top: 30rpx;
    font-size: 26rpx;
    color: #00b38b;
  }
}

.form-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 90rpx;
  margin-top: 30rpx;
  border-bottom: 1rpx solid #dcdcdc;
  color: #333333;
  .input {
    flex: 1;
    padding-right: 48rpx;
    font-size: 26rpx;
  }
  .eye {
    width: 48rpx;
    height: 48rpx;
  }
}
.form-placeholder {
  color: #999999;
}

.btn {
  margin: 150rpx 40rpx 0px;
}
</style>