Feat(用户&登录):增加性别和出生日期

pages/authorization/index.vue

@@ -40,12 +40,54 @@
 
     <view class="dialog-mask" v-if="showFillOut">
       <view class="dialog-fill flex flex-col ai-center">
-        <view class="title bold">请完善您的头像和昵称</view>
-        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
-          <image class="avatar" :src="avatarUrl"></image>
+        <view class="title bold">请完善您的信息</view>
+        <button
+          class="avatar-wrapper"
+          open-type="chooseAvatar"
+          @chooseavatar="onChooseAvatar"
+        >
+          <image
+            :src="avatarUrl"
+            class="avatar"
+          />
         </button>
-        <input type="nickname" class="input-wrapper" placeholder="请输入昵称" @input="inputName" @confirm="inputName"
-               @blur="inputName"/>
+        <input
+          type="nickname"
+          class="input-wrapper"
+          placeholder="请输入昵称"
+          @input="inputName"
+          @confirm="inputName"
+          @blur="inputName"
+        />
+        <view class="input-wrapper">
+          <picker
+            :value="form.birthday"
+            mode="date"
+            class="picker"
+            @change="birthdayChange"
+          >
+            {{ form.birthday || '请选择出生日期' }}
+          </picker>
+        </view>
+        <view class="gender-row">
+          性别：
+          <u-radio-group
+            v-model="form.gender"
+            placement="row"
+          >
+            <u-radio
+              :name="1"
+              :customStyle="{marginRight: '16px'}"
+              active-color="#C41617"
+              label="男"
+            />
+            <u-radio
+              :name="2"
+              active-color="#C41617"
+              label="女"
+            />
+          </u-radio-group>
+        </view>
         <view class="btn-submit" @click="onSubmit">确认</view>
       </view>
     </view>
@@ -61,10 +103,8 @@
 import {mapActions, mapMutations, mapState} from 'vuex'
 import cookie from '@/utils/store/cookie'
 import {login, uploadImage} from '@/utils'
-import {getAgree} from "@/api/public";
-import {postUserEdit} from "@/api/user";
-
-const defaultAvatarUrl = "/20230506100714762257.png"
+import {getAgree} from "@/api/public"
+import {postUserEdit} from "@/api/user"
 
 export default {
   data() {
@@ -75,10 +115,13 @@ export default {
       agreeInfo: {},
       isAgree: false,
       show: false,
-
       showFillOut: false,
-      nickname: "",
-      avatarUrl: this.$VUE_APP_RESOURCES_URL + defaultAvatarUrl,
+      nickname: '',
+      avatarUrl: this.$VUE_APP_RESOURCES_URL + '/20230506100714762257.png',
+      form: {
+        gender: '',
+        birthday: ''
+      }
     }
   },
   computed: {
@@ -205,9 +248,11 @@ export default {
     },
 
     saveUserInfo() {
-      let param = {
+      const param = {
         nickname: this.nickname,
-        avatar: this.avatarUrl
+        avatar: this.avatarUrl,
+        gender: this.form.gender || 0,
+        birthday: this.form.birthday || ''
       }
       postUserEdit(param).then(res => {
         if (res.status === 200) {
@@ -336,7 +381,6 @@ export default {
       box-sizing: border-box;
       overflow: hidden;
       width: 516rpx;
-      height: 576rpx;
       border-radius: 24rpx;
       background: #fff;
 
@@ -374,13 +418,20 @@ export default {
         font-size: 32rpx;
         text-align: center;
       }
+      .gender-row {
+        display: flex;
+        align-items: center;
+        margin-top: 32rpx;
+      }
+      .picker {
+        text-align: center;
+        line-height: 72rpx;
+      }
 
       .btn-submit {
-        position: absolute;
-        bottom: 0;
-        left: 0;
         width: 100%;
         height: 100rpx;
+        margin: 32rpx 0 0 0;
         box-sizing: border-box;
         border-top: 2rpx solid #E0E0E0;
         color: #3A87FC;