feat(component): 完善资料补充页面及判断

src/App.vue

@@ -2,21 +2,28 @@
 import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
 import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
 import { useAppStore } from '@/store/app'
+import { useUserStore } from '@/store/user'
 
-onLaunch(() => {
-  console.log('App Launch')
+onLaunch(async () => {
+  console.log('App =====> onLaunch')
   // 检查是否已登录
   const appStore = useAppStore()
 
   if (!appStore.isLogined) {
     uni.navigateTo({ url: '/pages-sub/auth/index' })
+  } else {
+    // 获取用户信息，用于：1.展示   2.判断是否需要完善信息
+    const userStore = useUserStore()
+    const res = await userStore.getUserInfo()
+    userStore.setUserDetail(res.Data)
   }
 })
+
 onShow(() => {
-  console.log('App Show')
+  console.log('App =====> onShow')
 })
 onHide(() => {
-  console.log('App Hide')
+  console.log('App =====> onHide')
 })
 </script>
 

src/pages-sub/auth/index.vue

@@ -65,7 +65,8 @@ const handleLogin = async () => {
 
               appStore.setAppInfo({ token, userid, openid })
 
-              uni.switchTab({ url: '/pages/index/index' })
+              uni.reLaunch({ url: '/pages/index/index' })
+              uni.$emit('authComplete', { result: true })
             } else {
               uni.showToast({
                 title: '授权失败，请重试',

src/pages-sub/user/index.vue

@@ -0,0 +1,270 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '我的资料',
+  },
+}
+</route>
+
+<template>
+  <view class="user-edit-page">
+    <view class="user-info p-2">
+      <wd-form ref="form" :model="model">
+        <wd-cell-group border>
+          <wd-input
+            label="用户名称"
+            label-width="100px"
+            prop="usersname"
+            clearable
+            v-model="model.usersname"
+            placeholder="请输入用户名称"
+            :rules="[{ required: true, message: '请填写用户名称' }]"
+          />
+          <wd-picker
+            label="用户类型"
+            label-width="100px"
+            prop="userstype"
+            v-model="model.userstype"
+            :columns="typeOptions"
+            placeholder="请选择用户类型"
+            :rules="[{ required: true, message: '请选择用户类型' }]"
+          />
+          <!-- 个人用户表单项 -->
+          <template v-if="model.userstype === '个人'">
+            <wd-input
+              label="证件号码"
+              label-width="100px"
+              prop="usersidcardnumber"
+              clearable
+              v-model="model.usersidcardnumber"
+              placeholder="请输入证件号码"
+              :rules="[{ required: true, message: '请填写证件号码' }]"
+            />
+            <wd-input
+              label="用户手机号"
+              label-width="100px"
+              prop="usersphone"
+              clearable
+              v-model="model.usersphone"
+              placeholder="请输入用户手机号"
+              :rules="[
+                { required: true, message: '请填写用户手机号' },
+                { required: false, pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
+              ]"
+            />
+            <wd-input
+              label="开户银行名称"
+              label-width="100px"
+              prop="usersbankname"
+              clearable
+              v-model="model.usersbankname"
+              placeholder="请输入开户银行名称"
+            />
+            <wd-input
+              label="银行账号"
+              label-width="100px"
+              prop="usersbanknumber"
+              clearable
+              v-model="model.usersbanknumber"
+              placeholder="请输入银行账号"
+            />
+            <wd-input
+              label="用户邮箱"
+              label-width="100px"
+              prop="usersemail"
+              clearable
+              v-model="model.usersemail"
+              placeholder="请输入用户邮箱"
+              :rules="[{ required: false, type: 'email', message: '邮箱格式不正确' }]"
+            />
+            <wd-input
+              label="用户地址"
+              label-width="100px"
+              prop="usersaddress"
+              clearable
+              v-model="model.usersaddress"
+              placeholder="请输入用户地址"
+            />
+            <wd-input
+              label="联系手机号"
+              label-width="100px"
+              prop="userscontactphone"
+              clearable
+              v-model="model.userscontactphone"
+              placeholder="请输入联系手机号"
+              :rules="[{ required: false, pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]"
+            />
+            <wd-input
+              label="联系邮箱"
+              label-width="100px"
+              prop="userscontactemail"
+              clearable
+              v-model="model.userscontactemail"
+              placeholder="请输入联系邮箱"
+              :rules="[{ required: false, type: 'email', message: '邮箱格式不正确' }]"
+            />
+            <wd-input
+              label="联系地址"
+              label-width="100px"
+              prop="userscontactaddress"
+              clearable
+              v-model="model.userscontactaddress"
+              placeholder="请输入联系地址"
+            />
+          </template>
+
+          <!-- 企业用户表单项 -->
+          <template v-if="model.userstype === '企业'">
+            <wd-input
+              label="统一社会信用代码"
+              label-width="100px"
+              prop="usersshtyxydm"
+              clearable
+              v-model="model.usersshtyxydm"
+              placeholder="请输入统一社会信用代码"
+              :rules="[{ required: true, message: '请填写统一社会信用代码' }]"
+            />
+            <wd-input
+              label="法人代表手机号"
+              label-width="100px"
+              prop="usersfrdbsjh"
+              clearable
+              v-model="model.usersfrdbsjh"
+              placeholder="请输入法人代表手机号"
+              :rules="[{ required: true, pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]"
+            />
+            <wd-input
+              label="电话(座机)"
+              label-width="100px"
+              prop="usersfrdbdh"
+              clearable
+              v-model="model.usersfrdbdh"
+              placeholder="请输入法人代表电话(座机)"
+            />
+            <wd-input
+              label="企业注册地"
+              label-width="100px"
+              prop="userszcd"
+              clearable
+              v-model="model.userszcd"
+              placeholder="请输入企业注册地"
+            />
+            <wd-input
+              label="传真"
+              label-width="100px"
+              prop="userscz"
+              clearable
+              v-model="model.userscz"
+              placeholder="请输入传真"
+            />
+          </template>
+
+          <!-- 备注 所有类型都显示 -->
+          <wd-textarea
+            label="备注"
+            label-width="100px"
+            prop="usersbz"
+            v-model="model.usersbz"
+            placeholder="请输入备注"
+            autosize
+            :maxlength="300"
+            show-word-limit
+          />
+        </wd-cell-group>
+        <view class="footer">
+          <wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
+        </view>
+      </wd-form>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+/** 客户信息 */
+// CREATE TABLE `users` (
+//   `usersid` varchar(50) NOT NULL COMMENT '用户id',
+//   `usersname` varchar(50) DEFAULT NULL COMMENT '用户名称',
+//   `usersnature` varchar(50) DEFAULT NULL COMMENT '用户性质（用户/渠道）',
+//   `userssuperiorid` varchar(50) DEFAULT NULL COMMENT '用户关联上级id',
+
+//   `usersidcardnumber` varchar(50) DEFAULT NULL COMMENT '用户证件号码',
+//   `usersbankname` varchar(50) DEFAULT NULL COMMENT '用户开户银行名称',
+//   `usersbanknumber` varchar(50) DEFAULT NULL COMMENT '用户开户银行账号',
+//   `usersphone` varchar(50) DEFAULT NULL COMMENT '用户手机号',
+//   `usersemail` varchar(50) DEFAULT NULL COMMENT '用户邮箱',
+//   `usersaddress` varchar(100) DEFAULT NULL COMMENT '用户地址',
+//   `userscontactphone` varchar(50) DEFAULT NULL COMMENT '用户联系手机号',
+//   `userscontactemail` varchar(50) DEFAULT NULL COMMENT '用户联系邮箱',
+//   `userscontactaddress` varchar(50) DEFAULT NULL COMMENT '用户联系地址',
+
+//   `usersopenid` varchar(50) DEFAULT NULL COMMENT '用户微信openid',
+//   `usersauthstatus` tinyint(2) DEFAULT NULL COMMENT '用户是否实名（0：未认证，1：已认证）',
+//   `usersdate` datetime DEFAULT NULL COMMENT '用户创建时间',
+//   `userstype` varchar(50) DEFAULT NULL COMMENT '用户类型（个人/企业）\n）',
+
+//   `usersfrdbdh` varchar(50) DEFAULT NULL COMMENT '法人代表电话(座机)',
+//   `usersfrdbsjh` varchar(50) DEFAULT NULL COMMENT '法人代表手机号',
+//   `usersxssjh` varchar(50) DEFAULT NULL COMMENT '销售手机号',
+//   `usersxsdh` varchar(50) DEFAULT NULL COMMENT '销售电话(座机)',
+//   `usersshtyxydm` varchar(50) DEFAULT NULL COMMENT '社会统一企业代码',
+//   `userszcd` varchar(100) DEFAULT NULL COMMENT '企业注册地',
+//   `userscz` varchar(50) DEFAULT NULL COMMENT '传真',
+
+//   `usersbz` varchar(1000) DEFAULT NULL COMMENT '备注',
+//   PRIMARY KEY (`usersid`)
+// ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户信息';
+
+const model = reactive({
+  usersnature: '用户',
+  usersname: '',
+  userstype: '个人',
+  usersidcardnumber: '',
+  usersbankname: '',
+  usersbanknumber: '',
+  usersphone: '',
+  usersemail: '',
+  usersaddress: '',
+  userscontactphone: '',
+  userscontactemail: '',
+  userscontactaddress: '',
+  usersopenid: '',
+  usersfrdbdh: '',
+  usersfrdbsjh: '',
+  usersshtyxydm: '',
+  userszcd: '',
+  userscz: '',
+  usersbz: '',
+})
+
+const typeOptions = ['个人', '企业']
+
+const form = ref()
+
+function handleSubmit() {
+  form.value
+    .validate()
+    .then(({ valid, errors }) => {
+      if (valid) {
+        // showSuccess({
+        //   msg: '校验通过',
+        // })
+      }
+    })
+    .catch((error) => {
+      console.log(error, 'error')
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+.user-edit-page {
+  .user-info {
+    background-color: #fff;
+  }
+  .footer {
+    padding: 0 16px;
+    margin-top: 20px;
+  }
+}
+</style>

src/pages.json

@@ -72,6 +72,14 @@
           "style": {
             "navigationBarTitleText": "登录"
           }
+        },
+        {
+          "path": "user/index",
+          "type": "page",
+          "layout": "default",
+          "style": {
+            "navigationBarTitleText": "我的资料"
+          }
         }
       ]
     }

src/pages/index/index.vue

@@ -90,7 +90,11 @@ import banner1 from '@/static/banner1.png'
 import { getUserListApi } from '@/service/user'
 import { ref } from 'vue'
 import { until } from '@vueuse/core'
+import { useUserStore } from '@/store/user'
+import { useAppStore } from '@/store/app'
+import { useMessage } from 'wot-design-uni'
 
+const message = useMessage()
 const current = ref<number>(0)
 const swiperList = ref([banner1, banner1, banner1])
 
@@ -179,8 +183,35 @@ function handleApply() {
   })
 }
 
+uni.$on('authComplete', function (data) {
+  if (data.result) {
+    showCompleteDialog()
+  }
+})
+
+const showCompleteDialog = () => {
+  const userStore = useUserStore()
+  const appStore = useAppStore()
+  if (appStore.isLogined && !userStore.isAuthComplete) {
+    message
+      .confirm({
+        msg: '您还未完善个人信息, 无法享受优惠劵活动, 点击按钮完善信息',
+        title: '提示',
+        confirmButtonText: '去完善',
+        cancelButtonText: '继续浏览',
+      })
+      .then(() => {
+        uni.navigateTo({
+          url: '/pages-sub/user/index',
+        })
+      })
+      .catch(() => {})
+  }
+}
+
 onShow(() => {
   getUserList()
+  showCompleteDialog()
 })
 </script>
 

src/service/user/index.ts

@@ -13,5 +13,13 @@ export const getUserListApi = (params: Partial<UserType>, page: Partial<ListType
 
 /** 获取用户详情 */
 export const getUserDetailApi = (id: string) => {
-  return http.post<UserType>('/api/query/view?pagevalue=19', { userid: id })
+  return http.get<UserType>(
+    '/api/query/view?pagevalue=56',
+    {
+      ...parseQueryValues({ usersid: id }),
+    },
+    {
+      formatData: true,
+    },
+  )
 }

src/store/user.ts

@@ -1,5 +1,8 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { getUserDetailApi } from '@/service/user'
+import { useAppStore } from '@/store/app'
+import type { UserType } from '@/types/user'
 
 const initState = {
   nickName: '',
@@ -15,7 +18,13 @@ const initState = {
 export const useUserStore = defineStore(
   'user',
   () => {
-    const userInfo = ref<IUserInfo>({ ...initState })
+    const userInfo = ref<IUserInfo>({ ...initState }) // 登录用户信息（微信小程序）
+    const userDetail = ref<UserType>({} as UserType) // 用户详细信息（系统）
+    // 是否已完善资料 （身份证或统一社会信用代码是否为空）
+    const isAuthComplete = computed(() => {
+      if (!userDetail.value.userstype) return false
+      return !!userDetail.value.usersidcardnumber || !!userDetail.value.usersshtyxydm
+    })
 
     const setUserInfo = (val: IUserInfo) => {
       userInfo.value = val
@@ -29,11 +38,24 @@ export const useUserStore = defineStore(
       userInfo.value = { ...initState }
     }
 
+    const getUserInfo = async () => {
+      const appStore = useAppStore()
+      return getUserDetailApi(appStore.appInfo.userid)
+    }
+
+    const setUserDetail = (val: UserType) => {
+      userDetail.value = val
+    }
+
     return {
       userInfo,
       setUserInfo,
       clearUserInfo,
       reset,
+      getUserInfo,
+      userDetail,
+      setUserDetail,
+      isAuthComplete,
     }
   },
   {

src/types/uni-pages.d.ts

@@ -7,7 +7,8 @@ interface NavigateToOptions {
   url: "/pages/index/index" |
        "/pages/form/form" |
        "/pages/mine/index" |
-       "/pages-sub/auth/index";
+       "/pages-sub/auth/index" |
+       "/pages-sub/user/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}
 

src/types/user.ts

@@ -4,6 +4,7 @@
 //   `usersname` varchar(50) DEFAULT NULL COMMENT '用户名称',
 //   `usersnature` varchar(50) DEFAULT NULL COMMENT '用户性质（用户/渠道）',
 //   `userssuperiorid` varchar(50) DEFAULT NULL COMMENT '用户关联上级id',
+
 //   `usersidcardnumber` varchar(50) DEFAULT NULL COMMENT '用户证件号码',
 //   `usersbankname` varchar(50) DEFAULT NULL COMMENT '用户开户银行名称',
 //   `usersbanknumber` varchar(50) DEFAULT NULL COMMENT '用户开户银行账号',
@@ -13,10 +14,12 @@
 //   `userscontactphone` varchar(50) DEFAULT NULL COMMENT '用户联系手机号',
 //   `userscontactemail` varchar(50) DEFAULT NULL COMMENT '用户联系邮箱',
 //   `userscontactaddress` varchar(50) DEFAULT NULL COMMENT '用户联系地址',
+
 //   `usersopenid` varchar(50) DEFAULT NULL COMMENT '用户微信openid',
 //   `usersauthstatus` tinyint(2) DEFAULT NULL COMMENT '用户是否实名（0：未认证，1：已认证）',
 //   `usersdate` datetime DEFAULT NULL COMMENT '用户创建时间',
 //   `userstype` varchar(50) DEFAULT NULL COMMENT '用户类型（个人/企业）\n）',
+
 //   `usersfrdbdh` varchar(50) DEFAULT NULL COMMENT '法人代表电话(座机)',
 //   `usersfrdbsjh` varchar(50) DEFAULT NULL COMMENT '法人代表手机号',
 //   `usersxssjh` varchar(50) DEFAULT NULL COMMENT '销售手机号',
@@ -24,6 +27,7 @@
 //   `usersshtyxydm` varchar(50) DEFAULT NULL COMMENT '社会统一企业代码',
 //   `userszcd` varchar(100) DEFAULT NULL COMMENT '企业注册地',
 //   `userscz` varchar(50) DEFAULT NULL COMMENT '传真',
+
 //   `usersbz` varchar(1000) DEFAULT NULL COMMENT '备注',
 //   PRIMARY KEY (`usersid`)
 // ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户信息';

src/utils/http.ts

@@ -1,8 +1,9 @@
 import { CustomRequestOptions } from '@/interceptors/request'
 import { useUserStore } from '@/store/user'
 import { useAppStore } from '@/store/app'
+import { formatBackendJson } from '@/utils'
 
-export const http = <T>(options: CustomRequestOptions) => {
+export const http = <T>(options: CustomRequestOptions & { formatData?: boolean }) => {
   const userStore = useUserStore()
   const appStore = useAppStore()
 
@@ -29,7 +30,18 @@ export const http = <T>(options: CustomRequestOptions) => {
           // 3. 业务状态码
           switch (Status) {
             case 0: // 请求成功
-              resolve(res.data as IResData<T>)
+              // 如果不需要格式化数据，则直接返回
+              if (!options.formatData) {
+                resolve(res.data as IResData<T>)
+              } else {
+                // 如果需要格式化数据，则格式化数据
+                resolve({
+                  Status: (res.data as any).Status,
+                  Message: (res.data as any).Message,
+                  Data: formatBackendJson((res.data as any).Data),
+                  OtherData: (res.data as any).OtherData,
+                } as IResData<T>)
+              }
               break
             case -1: // 请求失败
               uni.showToast({
@@ -92,11 +104,18 @@ export const http = <T>(options: CustomRequestOptions) => {
  * @param query 请求query参数
  * @returns
  */
-export const httpGet = <T>(url: string, query?: Record<string, any>) => {
+export const httpGet = <T>(
+  url: string,
+  query?: Record<string, any>,
+  options?: {
+    formatData?: boolean // 是否格式化数据  带label的数据转json
+  },
+) => {
   return http<T>({
     url,
     query,
     method: 'GET',
+    ...options,
   })
 }