feat(app/auth): 开发：实现数据表单组件和设计师认证页面

packages/app/src/components/data-form.vue

@@ -1,19 +1,29 @@
 <script setup lang="ts">
 import WdButton from 'wot-design-uni/components/wd-button/wd-button.vue'
 import WdInput from 'wot-design-uni/components/wd-input/wd-input.vue'
+import WdPicker from 'wot-design-uni/components/wd-picker/wd-picker.vue'
 
+const modelValue = defineModel({
+  type: Object,
+  default: () => ({}),
+})
 defineProps({
   schema: {
     type: Object as PropType<{
-      [key: string | symbol]: { type: 'TextField' | 'Submit' | string; label?: string }
+      [key: string | symbol]: { type: 'TextField' | 'Submit' | string; label?: string; props?: any }
     }>,
     required: true,
     default: () => ({}),
   },
+  direction: {
+    type: String as PropType<'horizontal' | 'vertical'>,
+    default: 'vertical',
+  },
 })
 const types = {
   TextField: WdInput,
   Submit: WdButton,
+  Select: WdPicker,
 }
 const defaultProps = {
   TextField: {
@@ -27,24 +37,42 @@ const defaultProps = {
     block: true,
   },
 }
+// const
 </script>
 <template>
-  <div ref="form">
-    <template v-for="([prop, { type, label }], index) in Object.entries(schema)" :key="index">
-      <div class="grid mb-4">
-        <label
-          v-if="type !== 'Submit'"
-          class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-relaxed mb-1"
-          :for="prop"
-        >
-          {{ label || prop }}
-        </label>
-        <!-- #ifdef H5 -->
-        <component :is="types[type]" :name="prop" v-bind="defaultProps[type]">
-          <span v-if="type === 'Submit'">提交</span>
-        </component>
-        <!-- #endif -->
-      </div>
-    </template>
-  </div>
+  <wd-form ref="form" :model="modelValue">
+    <wd-cell-group border>
+      <template
+        v-for="([prop, { type, label, props }], index) in Object.entries(schema)"
+        :key="index"
+      >
+        <div class="grid mb-4">
+          <label
+            v-if="type !== 'Submit' && direction === 'vertical'"
+            class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-relaxed mb-1"
+            :for="prop"
+          >
+            {{ label || prop }}
+          </label>
+          <!-- #ifdef H5 -->
+          <component :is="types[type]" :name="prop" v-bind="defaultProps[type]">
+            <span v-if="type === 'Submit'">提交</span>
+          </component>
+          <!-- #endif -->
+          <!-- #ifdef MP-WEIXIN -->
+          <wd-input
+            v-if="type === 'TextField'"
+            v-bind="{ label, ...props }"
+            v-model="modelValue[prop]"
+          ></wd-input>
+          <wd-picker
+            v-if="type === 'Select'"
+            v-bind="{ label, ...props }"
+            v-model="modelValue[prop]"
+          ></wd-picker>
+          <!-- #endif -->
+        </div>
+      </template>
+    </wd-cell-group>
+  </wd-form>
 </template>

packages/app/src/core/themes/default.ts

@@ -1,4 +1,4 @@
-import {ConfigProviderThemeVars} from "wot-design-uni";
+import { ConfigProviderThemeVars } from 'wot-design-uni'
 
 export const defaultThemeVars: ConfigProviderThemeVars = {
   // colorTheme: 'red',
@@ -12,4 +12,5 @@ export const defaultThemeVars: ConfigProviderThemeVars = {
   tagPrimaryColor: '#fff',
   tagInfoBg: '#efefef',
   tagRoundRadius: '8rpx',
-};
+  colorTheme: 'red',
+}

packages/app/src/layouts/default.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
-import {defaultThemeVars} from "@/core/themes/default";
-
+import { defaultThemeVars } from '@/core/themes/default'
 </script>
 <template>
-  <wd-config-provider class="flex-grow flex flex-col" custom-class="flex-grow" :themeVars="defaultThemeVars">
+  <wd-config-provider
+    class="flex-grow flex flex-col"
+    custom-class="flex-grow"
+    :themeVars="defaultThemeVars"
+  >
     <view class="bg-[#f6f6f6] flex-grow flex flex-col">
       <slot />
     </view>

packages/app/src/pages.json

@@ -210,6 +210,14 @@
       }
     },
     {
+      "path": "pages/mine/authentication/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "设计师认证",
+        "navigationStyle": "custom"
+      }
+    },
+    {
       "path": "pages/publish/cases/index",
       "type": "page",
       "style": {
@@ -232,6 +240,13 @@
         "navigationBarTitleText": "添加标签",
         "navigationBarBackgroundColor": "#fff"
       }
+    },
+    {
+      "path": "pages/mine/authentication/submit/success/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "提交成功"
+      }
     }
   ],
   "subPackages": []

packages/app/src/pages/login/index.vue

@@ -65,7 +65,7 @@ const getTestCode = async ({ detail }) => {
 }
 </script>
 <template>
-  <div class="w-full flex flex-col items-center justify-around px-3.5">
+  <div class="flex-grow flex flex-col items-center justify-around px-3.5">
     <div>
       <wd-img :src="logo" width="78" height="78"></wd-img>
       <div class="text-black text-2xl font-normal font-['PingFang SC'] leading-[10.18px]">

packages/app/src/pages/mine/authentication/index.vue

@@ -0,0 +1,106 @@
+<route lang="yaml">
+style:
+  navigationBarTitleText: 设计师认证
+  navigationStyle: custom
+</route>
+<script lang="ts" setup>
+import Card from '@/components/card.vue'
+import DataForm from '@/components/data-form.vue'
+import SectionHeading from '@/components/section-heading.vue'
+import StartMenuButton from '@/components/start-menu-button.vue'
+import { createUserAuthInfo, getByDictType } from '@/core/libs/requests'
+import { useUserStore } from '@/store'
+import { storeToRefs } from 'pinia'
+import { useMessage, useToast } from 'wot-design-uni'
+
+const userStore = useUserStore()
+const { userInfo } = storeToRefs(userStore)
+const { alert } = useMessage()
+const { error } = useToast()
+const formData = ref({})
+const schema = ref({
+  channelSource: {
+    type: 'Select',
+    label: '来源',
+    props: {
+      labelWidth: '126rpx',
+      placeholder: '请选择通过哪个渠道入驻的筑巢荟',
+      columns: [],
+    },
+  },
+  referrer: {
+    type: 'TextField',
+    label: '推荐人',
+    props: {
+      labelWidth: '126rpx',
+      placeholder: '请如实填写推荐人编号，设计师会员编号或渠道编号',
+    },
+  },
+  designerName: {
+    type: 'TextField',
+    label: '姓名',
+    props: {
+      labelWidth: '126rpx',
+      placeholder: '请输入真实姓名',
+    },
+  },
+  mobile: {
+    type: 'TextField',
+    label: '电话',
+    props: {
+      labelWidth: '126rpx',
+      placeholder: '请输入电话号码',
+    },
+  },
+  employer: {
+    type: 'TextField',
+    label: '公司',
+    props: {
+      labelWidth: '126rpx',
+      placeholder: '请输入所在公司或自己公司名称',
+    },
+  },
+  spatialExpertiseType: {
+    type: 'TextField',
+    label: '擅长空间类型',
+    props: {
+      placeholder: ' ',
+    },
+  },
+})
+const handleSubmit = async () => {
+  const { code, msg } = await createUserAuthInfo({
+    gender: userInfo.value.sex,
+    attachment: 'https://via.placeholder.com/319x204',
+    ...formData.value,
+  })
+  if (code === 0) {
+    uni.navigateTo({ url: '/pages/mine/authentication/submit/success/index' })
+  } else {
+    error(msg)
+  }
+}
+onMounted(async () => {
+  const { data } = await getByDictType('member_channel_source')
+  console.log()
+  schema.value.channelSource.props.columns = data
+  alert({ title: '提示', msg: '您的认证申请已提交，请耐心等待审核，审核通过后您将获得通知' })
+})
+</script>
+<template>
+  <div class="flex-grow flex flex-col p-3.5 gap-3.5">
+    <StartMenuButton />
+    <Card>
+      <SectionHeading size="base" title="基本信息"></SectionHeading>
+      <DataForm v-model="formData" :schema="schema" direction="horizontal"></DataForm>
+    </Card>
+    <Card>
+      <SectionHeading size="base" title="上传附件"></SectionHeading>
+      <wd-upload></wd-upload>
+    </Card>
+    <div class="flex-1"></div>
+    <div>
+      <wd-button block :round="false" @click="handleSubmit">提交</wd-button>
+    </div>
+  </div>
+</template>

packages/app/src/pages/mine/authentication/submit/success/index.vue

@@ -0,0 +1,18 @@
+<route lang="yaml">
+style:
+  navigationBarTitleText: 提交成功
+</route>
+<script setup lang="ts"></script>
+<template>
+  <div>
+    <div class="w-[60px] h-[60px] bg-black/40 rounded-full"></div>
+    <div class="text-black/90 text-xl font-normal font-['PingFang SC'] leading-none">提交成功</div>
+    <div
+      class="w-[210px] h-[45px] text-center text-black/40 text-base font-normal font-['PingFang SC'] leading-relaxed"
+    >
+      我们会有专属客户与您联系
+      <br />
+      请您注意接听电话
+    </div>
+  </div>
+</template>

packages/app/src/pages/mine/index.vue

@@ -72,6 +72,10 @@ onShow(async () => {
     })
   }
 })
+const handleToAuthentication = () => {
+  if (!isLogined.value) return
+  uni.navigateTo({ url: '/pages/mine/authentication/index' })
+}
 onMounted(async () => {
   // await run()
   // console.log(data.value)
@@ -156,6 +160,7 @@ onMounted(async () => {
           <div class="flex-1"></div>
           <div
             class="w-[83px] h-[29px] bg-gradient-to-l from-[#ffdab6] to-[#ffebd5] rounded-[30px] flex items-center justify-center"
+            @click="handleToAuthentication()"
           >
             <div
               class="text-[#9e5934] text-[13px] font-normal font-['PingFang SC'] leading-relaxed"

packages/app/src/types/uni-pages.d.ts

@@ -23,9 +23,11 @@ interface NavigateToOptions {
        "/pages/material/calculator/index" |
        "/pages/material/detail/index" |
        "/pages/material/recommend/index" |
+       "/pages/mine/authentication/index" |
        "/pages/publish/cases/index" |
        "/pages/publish/moment/index" |
-       "/pages/publish/tags/index";
+       "/pages/publish/tags/index" |
+       "/pages/mine/authentication/submit/success/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}