注册调整

2024-05-24 00:21:47 +08:00
parent 0c0d5e55d5
commit b53dc2dd4f
18 changed files with 1683 additions and 1467 deletions
--- a/src/pages/common/login/index.vue
+++ b/src/pages/common/login/index.vue
@@ -26,7 +26,7 @@
 <script setup lang='ts'>
 import { useUserStore } from '@/store';
 import { assetsUrl } from '@/utils/assets';
-import { showToast } from '@/utils';
+import { getRegisterStoreId, showToast } from '@/utils';

 const userStore = useUserStore();
 const isAgreePrivacy = ref(false);
@@ -36,14 +36,24 @@ async function wechatLogin() {
    showToast('请先阅读并同意小程序隐私保护协议');
    return;
  }
-  await uni.showLoading();
-  const result = await userStore.login();
-  uni.hideLoading();
-  if(result) {
-    await uni.reLaunch({ url: '/pages/home/index' });
-  } else {
-    await uni.navigateTo({ url: '/pages/common/register/index' });
+
+  if(!getRegisterStoreId()) {
+    showToast('请从公众号消息窗口点击店名打开小程序');
+    return;
  }
+
+  userStore.login().then(() => {
+    uni.hideLoading();
+    uni.reLaunch({ url: '/pages/home/index' });
+  });
+  // await uni.showLoading();
+  // const result = await userStore.login();
+  // uni.hideLoading();
+  // if(result) {
+  //   await uni.reLaunch({ url: '/pages/home/index' });
+  // } else {
+  //   await uni.navigateTo({ url: '/pages/common/register/index' });
+  // }
 }

 const bindCheck = () => {
--- a/src/pages/common/register/index.vue
+++ b/src/pages/common/register/index.vue
@@ -1,182 +1,202 @@
 <template>
  <view class='content'>
-    <image class='bg-image' :src='assetsUrl("bg_register.png")' />
-    <image :src='assetsUrl("ic_register_gift_text.png")'
-           style='align-self: center;position: relative;width: 356rpx;height: 124rpx;margin-top: 70rpx' />
-
-    <view class='card-view'>
-      <view class='mobile-view c-flex-row' >
-        <image :src='assetsUrl("ic_register_mobile.png")' />
-        <input placeholder='请输入手机号' inputmode='number' maxLength='11' />
-      </view>
-
-      <view class='captcha-view c-flex-row' style='display: none'>
-        <view class='c-flex-row'>
-          <image :src='assetsUrl("ic_register_captcha.png")' />
-          <input placeholder='请输入验证码' inputmode='number' maxLength='6' />
-        </view>
-        <text @click.stop='startCountdown'>{{ countdown }}</text>
-      </view>
-
-      <text class='btn_register' @click.stop='register'>注册领券</text>
+    <view class='c-flex-column avatar-container'>
+      <image class='avatar' :src='avatarUrl' />
+      <button class='avatar-button' open-type='chooseAvatar' @chooseavatar='chooseAvatar' />
    </view>
+    <view class='c-flex-row' style='margin-top: 60rpx'>
+      <label class='row-title'>姓名</label>
+      <input class='row-value' type='nickname' placeholder='请输入手机号' v-model='nickName' />
+    </view>
+    <view class='divider' />
+    <view class='c-flex-row'>
+      <label class='row-title'>手机号</label>
+      <input class='row-value' placeholder='请输入手机号' type='text' v-model='telephone' />
+      <button class='primary-button authorize-button' open-type='getPhoneNumber' @getphonenumber='getPhoneNumber'>
+        获取手机号
+      </button>
+    </view>
+    <view class='divider' />
+    <view class='c-flex-row'>
+      <label class='row-title'>生日</label>
+      <picker mode='date' @change='changeDate'>
+        <text class='row-value'>{{ dayjs(birthday).format('YYYY-MM-DD') || '请选择生日' }}</text>
+      </picker>
+    </view>
+    <view class='divider' />
+    <view class='c-flex-row'>
+      <label class='row-title'>性别</label>
+      <view class='c-flex-row' @click.stop='changeGender(0)'>
+        <image class='gender-image'
+               :src='assetsUrl(gender==="男"?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
+        <text class='gender-text'>男</text>
+      </view>
+      <view class='c-flex-row' @click.stop='changeGender(1)'>
+        <image class='gender-image'
+               :src='assetsUrl(gender==="女"?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
+        <text class='gender-text'>女</text>
+      </view>
+    </view>
+
+    <view style='height: 100rpx' />
+    <button class='primary-button submit-button' @click='save'>确定</button>
  </view>
 </template>

 <script lang='ts' setup>
-import { assetsUrl } from '@/utils/assets';
+import { ref } from 'vue';
+import { getTelephone } from '@/api/user';
 import { useUserStore } from '@/store';
-import { getRegisterCoupon } from '@/api/user';
+import { assetsUrl } from '@/utils/assets';
+import { getSessionKey, showToast } from '@/utils';
+import dayjs from 'dayjs';

 const userStore = useUserStore();
-const { companyConfigInfo } = storeToRefs(userStore);
+const { userInfo } = storeToRefs(userStore);

-const countdown = ref('获取验证码');
-const couponBean = ref();
+const birthday = ref(userInfo.value.birthday);
+const nickName = ref(userInfo.value.nickName);
+const gender = ref(userInfo.value.gender);
+const telephone = ref(userInfo.value.telephone);
+const avatarUrl = ref(userInfo.value.image);

-onLoad(async (e) => {
-  couponBean.value = await getRegisterCoupon();
-});
-
-const startCountdown = () => {
-  if(countdown.value !== '获取验证码') {
-    return;
-  }
-  let time = 120;
-  let interval = setInterval(() => {
-    time--;
-    countdown.value = `${time}s 重新获取`;
-    if(time == 0) {
-      clearInterval(interval);
-      countdown.value = '获取验证码';
+const chooseAvatar = (e: any) => {
+  uni.showLoading();
+  uni.uploadFile({
+    url: import.meta.env.VITE_APP_BASE_API + '/wc/wechat/uploadImage',
+    filePath: e.detail.avatarUrl,
+    name: 'fileName',
+    header: {
+      'Content-Type': 'multipart/form-data'
+    },
+    success: (res: any) => {
+      avatarUrl.value = JSON.parse(res.data).data;
+    },
+    error: (err: any) => {
+      showToast('上传失败');
+    },
+    complete() {
+      uni.hideLoading();
    }
-  }, 1000);
+  });
 };

-const register = () => {
+const getPhoneNumber = (e: any) => {
+  if(e.detail.errMsg === 'getPhoneNumber:ok') {
+    uni.login({
+      success: res => {
+        getTelephone({
+          sessionKey: getSessionKey(),
+          code: res.code,
+          iv: e.detail.iv,
+          encryptedData: e.detail.encryptedData
+        }).then(response => {
+          if(response.phoneNumber) {
+            telephone.value = response.phoneNumber;
+          }
+        });
+      }
+    });
+  }
 };

+const changeDate = (e: any) => {
+  birthday.value = e.detail.value;
+};
+
+const changeGender = (index: number) => {
+  gender.value = index === 0 ? '男' : '女';
+};
+
+const save = async () => {
+  await uni.showLoading();
+  const registerForm = {
+    image: avatarUrl.value,
+    avatarUrl: avatarUrl.value,
+    nickName: nickName.value,
+    telephone: telephone.value,
+    birthday: birthday.value,
+    gender: gender.value
+  };
+
+  getApp().globalData?.logger.info('register params: ', registerForm);
+  const result = await userStore.register(registerForm);
+  getApp().globalData?.logger.info('register params: ', registerForm);
+  if(result) {
+    showToast('注册成功');
+    await uni.reLaunch({
+      url: '/pages/home/index'
+    });
+  }
+  uni.hideLoading();
+};
 </script>

 <style lang='scss' scoped>
 .content {
-  position: relative;
-  height: 100vh;
-}
-
-.bg-image {
-  position: fixed;
-  height: 100vh;
-  width: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.card-view {
-  background: #FFFFFF;
-  border-radius: 10rpx;
-  margin: 0 40rpx;
-  padding: 50rpx;
-  top: 150rpx;
-  position: relative;
-
-  .mobile-view {
-    border-radius: 10rpx;
-    border: 1rpx solid #D8D8D8;
-    padding-left: 28rpx;
-
-    image {
-      width: 36rpx;
-      height: 36rpx;
-    }
-
-    input {
-      flex: 1;
-      height: 80rpx;
-      font-size: 30rpx;
-      color: #333333;
-      margin-left: 26rpx;
-    }
-  }
-
-  .captcha-view {
-    margin-top: 20rpx;
-
-    .c-flex-row {
-      border-radius: 10rpx;
-      border: 1rpx solid #D8D8D8;
-      padding-left: 28rpx;
-      flex: 1;
-
-      image {
-        width: 33rpx;
-        height: 26rpx;
-      }
-
-      input {
-        height: 80rpx;
-        font-size: 30rpx;
-        color: #333333;
-        margin-left: 26rpx;
-      }
-    }
-
-    text {
-      display: flex;
-      height: 80rpx;
-      background: #FFD436;
-      border-radius: 10rpx;
-      margin-left: 12rpx;
-      padding: 0 15rpx;
-      font-size: 28rpx;
-      align-items: center;
-      justify-content: center;
-      color: #FFFFFF;
-    }
-  }
-
-  .btn_register {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 90rpx;
-    background: #F53636;
-    border-radius: 10rpx;
-    font-weight: 400;
-    font-size: 30rpx;
-    color: #FFFFFF;
-    margin-top: 46rpx;
-  }
+  display: flex;
+  background: white;
+  padding: 30rpx;

  .divider {
-    border-bottom-style: dashed;
-    border-color: #E98585;
-    border-width: 0.2rpx;
-    margin-top: 34rpx
+    margin: 30rpx 5rpx;
  }

-  .coupon {
-    margin-top: 30rpx;
+  .row-title {
+    font-size: 30rpx;
+    color: #666666;
+    width: 150rpx;
+  }

-    .coupon-name {
-      display: flex;
-      font-size: 36rpx;
-      color: #D95554;
-      flex: 1;
-    }
-
-    image {
-      width: 13rpx;
-      height: 24rpx;
-    }
-
-    .expired-time {
-      font-size: 28rpx;
-      color: #333333;
-      margin-top: 2rpx;
-    }
+  .row-value {
+    font-size: 30rpx;
+    color: #333333;
  }
 }
+
+.avatar-container {
+  align-items: center;
+  margin-top: 20rpx;
+  position: relative;
+
+  .avatar {
+    width: 150rpx;
+    height: 150rpx;
+    border-radius: 10rpx;
+    background-color: #f2f2f2;
+  }
+
+  .avatar-button {
+    width: 150rpx;
+    height: 150rpx;
+    background-color: transparent;
+    position: absolute;
+    top: 0;
+  }
+}
+
+.authorize-button {
+  width: auto;
+  font-size: 20rpx;
+  min-width: auto;
+  height: 50rpx;
+}
+
+.gender-image {
+  width: 37rpx;
+  height: 37rpx;
+}
+
+.gender-text {
+  width: 80rpx;
+  color: #333333;
+  font-size: 30rpx;
+  margin-left: 10rpx;
+}
+
+.submit-button {
+  display: flex;
+  margin-top: 40rpx;
+}
+
 </style>
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -139,7 +139,7 @@ onShow(async () => {

 const switchCompany = () => {
  fetchCompanyList((companyList: any[], userList: any[]) => {
-    companyDialogRef.value.show(getCompanyId(),(index: number) => {
+    companyDialogRef.value.show(getCompanyId(), (index: number) => {
      userStore.setUserInfo(userList[index]);
      userStore.setCompanyInfo(companyList[index]);
    });
@@ -155,8 +155,11 @@ const fetchCompanyList = (fn: any = undefined) => {
      fn(companyList.value, userList.value);
    } else {
      let index = companyList.value.findIndex((res: { id: string }) => res.id === getCompanyId());
+
+      //未在当前公司下注册
      if(index < 0) {
-        index = 0;
+        goPath('/pages/common/register/index');
+        return;
      }
      userStore.setUserInfo(userList.value[index]);
      userStore.setCompanyInfo(companyList.value[index]);
--- a/src/pages/mine/index.vue
+++ b/src/pages/mine/index.vue
@@ -199,6 +199,7 @@ const showOfficialAccountDialog = () => {
    width: 100%;
    height: 100%;
    position: absolute;
+    border-radius: 8rpx;
  }

  .top-row {
--- a/src/pages/mine/subs/profile/index.vue
+++ b/src/pages/mine/subs/profile/index.vue
@@ -48,7 +48,7 @@
      <view class='c-flex-row'>
        <text>生日</text>
        <picker mode='date' :disabled='(userInfo.birthday?.length||0)!=0' @change='changeDate'>
-          <text>{{ params?.birthday || '请选择生日' }}</text>
+          <text>{{ dayjs(params?.birthday).format('YYYY-MM-DD') || '请选择生日' }}</text>
        </picker>
      </view>
    </view>