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;

pkg_user/views/personalData.vue

@@ -37,7 +37,51 @@
           <image :src="webUrl+'/20220925102920713727.png'" style="width: 40rpx;height: 40rpx"/>
         </view>
       </view>
-
+      <view class="cell flex jc-between ai-center">
+        <view class="flex ai-center">
+          <view class="title">性别</view>
+          <view class="value">
+            <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>
+        <view class="icon">
+          <image :src="webUrl+'/20220903145836941399.png'"/>
+        </view>
+      </view>
+      <view class="cell flex jc-between ai-center">
+        <view class="flex ai-center">
+          <view class="title">出生日期</view>
+          <view class="value">
+            <picker
+              :value="form.birthday"
+              mode="date"
+              class="picker"
+              @change="birthdayChange"
+            >
+              <u--text v-if="form.birthday" :text="form.birthday"></u--text>
+              <u--text v-else text="请选择" color="#c0c4cc"></u--text>
+            </picker>
+          </view>
+        </view>
+        <view class="icon">
+          <image :src="webUrl+'/20220903145836941399.png'"/>
+        </view>
+      </view>
       <view class="cell flex jc-between ai-center" @click="bindPhone">
         <view class="flex ai-center">
           <view class="title">手机号</view>
@@ -47,7 +91,6 @@
           <image :src="webUrl+'/20220903145836941399.png'"/>
         </view>
       </view>
-
       <view class="cell flex jc-between ai-center" @click="payPwdClick">
         <view class="flex ai-center">
           <view class="title">支付密码</view>
@@ -57,29 +100,20 @@
           <image :src="webUrl+'/20220903145836941399.png'"/>
         </view>
       </view>
-
     </view>
-
     <button class="btn-save" @click="submit">保存修改</button>
-
-    <!--    <view-->
-    <!--        class="logOut cart-color acea-row row-center-wrapper"-->
-    <!--        @click="logout"-->
-    <!--        v-if="$deviceType=='app'"-->
-    <!--    >退出登录-->
-    <!--    </view>-->
   </view>
 </template>
 
 <script>
-import {mapGetters} from "vuex";
-import {isWeixin, trim, uploadImage} from "@/utils";
-import {postUserEdit} from "@/api/user";
-import ImageCropper from "@/pkg_user/components/invinbg-image-cropper/invinbg-image-cropper.vue";
+import {mapGetters} from 'vuex'
+import {isWeixin, trim, uploadImage} from '@/utils'
+import {postUserEdit} from '@/api/user'
+import ImageCropper from '@/pkg_user/components/invinbg-image-cropper/invinbg-image-cropper.vue'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 
 export default {
-  name: "PersonalData",
+  name: 'PersonalData',
   components: {
     ImageCropper
   },
@@ -87,155 +121,101 @@ export default {
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
-      avatar: "",
+      avatar: '',
       isWeixin: false,
       currentAccounts: 0,
       switchUserInfo: [],
       userIndex: 0,
       tempFilePath: '',
       cropFilePath: '',
-      pageKeyId: Object.freeze('userConfig')
-    };
+      pageKeyId: Object.freeze('userConfig'),
+      form: {
+        gender: '',
+        birthday: ''
+      }
+    }
   },
-  computed: mapGetters(["userInfo"]),
+  computed: mapGetters(['userInfo']),
   mounted: function () {
-    this.avatar = this.userInfo.avatar;
-    this.isWeixin = isWeixin();
+    this.avatar = this.userInfo.avatar
+    this.form.gender = this.userInfo.gender
+    this.form.birthday = this.userInfo.birthday || ''
+    this.isWeixin = isWeixin()
   },
   onShow: function () {
-    //获取用户信息
-    this.$store.dispatch("getUser", true);
+    // 获取用户信息
+    this.$store.dispatch('getUser', true)
   },
   methods: {
     confirm(e) {
-      this.tempFilePath = '';
-      this.cropFilePath = e.detail.tempFilePath;
-
+      this.tempFilePath = ''
+      this.cropFilePath = e.detail.tempFilePath
       uploadImage(this.cropFilePath, img => {
         console.log(img)
-        this.avatar = img;
-        this.cropFilePath = '';
+        this.avatar = img
+        this.cropFilePath = ''
       })
     },
     cancel() {
       console.log('canceled')
     },
     bindPhone: function () {
-      this.$yrouter.push("/pkg_user/views/bindPhone");
+      this.$yrouter.push('/pkg_user/views/bindPhone')
     },
     payPwdClick: function () {
-      //先判断用户是否绑定过手机
+      // 先判断用户是否绑定过手机
       if (this.userInfo.phone) {
-        //再判断用户是否设置过支付密码
+        // 再判断用户是否设置过支付密码
         if (this.userInfo.hasPwdPay) {
-          //修改支付密码
-          this.$yrouter.push("/pkg_user/views/payPassword");
+          // 修改支付密码
+          this.$yrouter.push('/pkg_user/views/payPassword');
         } else {
-          //设置支付密码
-          this.$yrouter.push("/pkg_user/views/payPassword?isSetMode=true");
+          // 设置支付密码
+          this.$yrouter.push('/pkg_user/views/payPassword?isSetMode=true');
         }
       } else {
-        //跳转到绑定手机
-        this.$yrouter.push("/pkg_user/views/bindPhone");
+        // 跳转到绑定手机
+        this.$yrouter.push('/pkg_user/views/bindPhone');
       }
     },
-    // switchAccounts: function (index) {
-    //   let that = this;
-    //   this.userIndex = index;
-    //   let userInfo = this.switchUserInfo[this.userIndex];
-    //   if (this.switchUserInfo.length <= 1) return true;
-    //   if (userInfo === undefined) {
-    //     uni.showToast({
-    //       title: "切换的账号不存在",
-    //       icon: "none",
-    //       duration: 2000
-    //     });
-    //     return;
-    //   }
-    //   if (userInfo.user_type === "h5") {
-    //     switchH5Login()
-    //         .then(({data}) => {
-    //           uni.hideLoading();
-    //           const expires_time = dayjs(data.expires_time);
-    //           store.commit("login", data.token, expires_time);
-    //           that.$emit("changeswitch", false);
-    //           location.reload();
-    //         })
-    //         .catch(err => {
-    //           uni.hideLoading();
-    //           uni.showToast({
-    //             title:
-    //                 err.msg || err.response.data.msg || err.response.data.message,
-    //             icon: "none",
-    //             duration: 2000
-    //           });
-    //         });
-    //   } else {
-    //     cookie.set("loginType", "wechat", 60);
-    //     uni.hideLoading();
-    //     this.$store.commit("logout");
-    //     this.$emit("changeswitch", false);
-    //   }
-    // },
     chooseImage() {
       uni.chooseImage({
-        count: 1, //默认9
-        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
-        sourceType: ['album'], //从相册选择
+        count: 1,
+        sizeType: ['original', 'compressed'],
+        sourceType: ['album'],
         success: (res) => {
           this.tempFilePath = res.tempFilePaths.shift()
         }
-      });
+      })
+    },
+    birthdayChange(e) {
+      this.form.birthday = e.detail.value
     },
-
     submit: function () {
-      let userInfo = this.userInfo;
-      let that = this;
+      const that = this
       postUserEdit({
         nickname: trim(this.userInfo.nickname),
-        avatar: this.avatar
-      }).then(
-          res => {
-            that.$store.dispatch("userInfo", true);
-            uni.showToast({
-              title: res.msg,
-              icon: "none",
-              duration: 2000
-            });
-            setTimeout(function () {
-              that.$yrouter.back();
-            }, 2000)
-          },
-          err => {
-            uni.showToast({
-              title:
-                  err.msg || err.response.data.msg || err.response.data.message,
-              icon: "none",
-              duration: 2000
-            });
-          }
-      );
-    },
-    // logout: function () {
-    //   uni.showModal({
-    //     title: "提示",
-    //     content: "确认退出登录?",
-    //     success: function (res) {
-    //       if (res.confirm) {
-    //         getLogout()
-    //             .then(res => {
-    //               this.$store.commit("logout");
-    //               this.$yrouter.replace({
-    //                 path: "/pages/user/Login/index",
-    //                 query: {}
-    //               });
-    //             })
-    //             .catch(() => {
-    //             })
-    //       }
-    //     }
-    //   });
-    // }
+        avatar: this.avatar,
+        gender: this.form.gender,
+        birthday: this.form.birthday
+      }).then(res => {
+        that.$store.dispatch('userInfo', true)
+        uni.showToast({
+          title: res.msg,
+          icon: 'none',
+          duration: 2000
+        })
+        setTimeout(function () {
+          that.$yrouter.back()
+        }, 2000)
+      }, err => {
+        uni.showToast({
+          title: err.msg || err.response.data.msg || err.response.data.message,
+          icon: 'none',
+          duration: 2000
+        })
+      })
+    }
   }
 }
 </script>
@@ -290,7 +270,6 @@ export default {
 
   .cell-box {
     width: 686rpx;
-    height: 406rpx;
     margin: -130rpx 32rpx 0;
     padding: 0 40rpx 20rpx;
     box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
@@ -317,6 +296,9 @@ export default {
         color: #999999;
         font-size: 32rpx;
         line-height: 48rpx;
+        .picker {
+          width: 400rpx;
+        }
       }
 
       .icon {