Initial commit

pages/login/registerOrForget/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <view class="register_container content_with_back">
+    <view class="back_icon">
+      <u-icon name="arrow-left" bold size="22" @click="back" />
+    </view>
+    <view class="title" v-if="isRegister">新用户注册</view>
+    <view class="title" v-else>忘记密码</view>
+    <u-form
+      labelPosition="top"
+      :model="userInfo"
+      :rules="rules"
+      :labelStyle="{
+        fontSize: '14px',
+        marginTop: '20rpx',
+        minWidth: '200rpx',
+      }"
+      ref="registerForm"
+    >
+      <u-form-item prop="phoneNumber" label="手机号码">
+        <u-input
+          v-model="userInfo.phoneNumber"
+          border="surround"
+          placeholder="请输入手机号码"
+          clearable
+        >
+          <view slot="prefix" class="phoneNumber_areacode" @click="showPicker">
+            <text class="areacode_content">+{{ userInfo.areaCode }}</text>
+            <u-icon class="arrow_down" name="arrow-down"></u-icon>
+          </view>
+        </u-input>
+      </u-form-item>
+    </u-form>
+    <view class="action_btn">
+      <u-button
+        @click="sendSms"
+        type="primary"
+        :disabled="isRegister && !checked[0]"
+      >
+        {{ isRegister ? "下一步" : "获取验证码" }}
+      </u-button>
+    </view>
+    <AreaPicker ref="AreaPicker" @chooseArea="chooseArea" />
+  </view>
+</template>
+
+<script>
+import AreaPicker from "@/components/AreaPicker";
+import { businessSendSms } from "@/api/login";
+import { SmsUserFor } from "@/constant";
+import { checkLoginError } from "@/util/common";
+export default {
+  components: {
+    AreaPicker,
+  },
+  data() {
+    return {
+      userInfo: {
+        phoneNumber: "",
+        email: "",
+        areaCode: "86",
+        invitationCode: "",
+      },
+      checked: [true],
+      rules: {
+        phoneNumber: [
+          {
+            type: "string",
+            required: true,
+            message: "请输入手机号码",
+            trigger: ["blur", "change"],
+            pattern: /^\d{11}$/,
+          },
+        ],
+      },
+      isRegister: true,
+      pageStatus: "normal",
+    };
+  },
+  onLoad(param) {
+    this.isRegister = JSON.parse(param.isRegister);
+  },
+  methods: {
+    sendSms() {
+      this.$refs.registerForm.validate().then((valid) => {
+        const options = {
+          phoneNumber: this.userInfo.phoneNumber,
+          areaCode: `+${this.userInfo.areaCode}`,
+          usedFor: this.isRegister ? SmsUserFor.Register : SmsUserFor.Reset,
+          invitationCode: this.userInfo.invitationCode,
+        };
+        businessSendSms(options)
+          .then(() => {
+            uni.$u.toast("验证码已发送！");
+            setTimeout(
+              () =>
+                uni.$u.route("/pages/login/verifyCode/index", {
+                  userInfo: JSON.stringify(this.userInfo),
+                  isRegister: this.isRegister,
+                }),
+              1000,
+            );
+          })
+          .catch((err) => {
+            console.error(err);
+            uni.$u.toast(checkLoginError(err));
+          });
+      });
+    },
+    back() {
+      uni.$u.route("/pages/login/index");
+    },
+    showPicker() {
+      this.$refs.AreaPicker.init();
+    },
+    chooseArea(areaCode) {
+      this.userInfo.areaCode = areaCode;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.register_container {
+  margin-top: var(--status-bar-height);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 137, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+
+  .title {
+    font-size: 44rpx;
+    font-weight: 600;
+    color: $u-primary;
+  }
+
+  .action_btn {
+    padding-top: 20vh;
+  }
+}
+</style>