60%

pages/auth/a04-register.vue

@@ -31,7 +31,7 @@
             :class="{ 'field-block--error': fieldErrors.phone }"
           >
             <view class="input-row">
-              <label class="input-label" for="a04-phone">手机号</label>
+              <label class="input-label" for="a04-phone"><text class="required-mark">*</text>手机号</label>
               <input
                 id="a04-phone"
                 v-model.trim="phone"
@@ -51,12 +51,26 @@
             }}</text>
           </view>
 
+          <view class="field-block">
+            <view class="input-row">
+              <label class="input-label" for="a04-nickname">昵称</label>
+              <input
+                id="a04-nickname"
+                v-model.trim="nickName"
+                class="auth-input"
+                :disabled="submitting || registrationCommitted"
+                placeholder="请输入昵称"
+                placeholder-class="placeholder"
+              />
+            </view>
+          </view>
+
           <view
             class="field-block"
             :class="{ 'field-block--error': fieldErrors.verificationCode }"
           >
             <view class="input-row code-row">
-              <label class="input-label" for="a04-verification-code">验证码</label>
+              <label class="input-label" for="a04-verification-code"><text class="required-mark">*</text>验证码</label>
               <input
                 id="a04-verification-code"
                 v-model.trim="verificationCode"
@@ -89,7 +103,7 @@
             :class="{ 'field-block--error': fieldErrors.password }"
           >
             <view class="input-row">
-              <label class="input-label" for="a04-password">设置密码</label>
+              <label class="input-label" for="a04-password"><text class="required-mark">*</text>设置密码</label>
               <input
                 id="a04-password"
                 v-model="password"
@@ -114,7 +128,7 @@
             :class="{ 'field-block--error': fieldErrors.confirmPassword }"
           >
             <view class="input-row">
-              <label class="input-label" for="a04-confirm-password">确认密码</label>
+              <label class="input-label" for="a04-confirm-password"><text class="required-mark">*</text>确认密码</label>
               <input
                 id="a04-confirm-password"
                 v-model="confirmPassword"
@@ -267,6 +281,7 @@ import {
 } from "@/utils/validation.js";
 
 const phone = ref("");
+const nickName = ref("");
 const verificationCode = ref("");
 const password = ref("");
 const confirmPassword = ref("");
@@ -292,6 +307,7 @@ const isDirty = computed(() =>
   !registrationCommitted.value &&
   Boolean(
     phone.value ||
+      nickName.value ||
       verificationCode.value ||
       password.value ||
       confirmPassword.value ||
@@ -517,6 +533,7 @@ const submitRegister = async () => {
     await appApi.registerWithPassword(
       {
         phone: phone.value,
+        nickName: nickName.value,
         passwordHash: calcMD5(password.value),
         smsCode: verificationCode.value,
       },
@@ -626,6 +643,15 @@ const submitRegister = async () => {
   font-size: 30rpx;
 }
 
+.required-mark {
+  display: inline-block;
+  margin-right: 4rpx;
+  color: #b42318;
+  font-size: 26rpx;
+  line-height: 1;
+  transform: translateY(-3rpx);
+}
+
 .auth-input {
   flex: 1;
   min-width: 0;