feat(app): 重构推荐材料商页面并添加表单验证

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

@@ -2,6 +2,7 @@
 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'
+import {} from 'vue'
 
 const modelValue = defineModel({
   type: Object,
@@ -21,6 +22,7 @@ defineProps({
   },
 })
 const emits = defineEmits(['submit'])
+const form = ref()
 const types = {
   TextField: WdInput,
   Submit: WdButton,
@@ -54,10 +56,13 @@ const verticalDefaultProps = {
 const submit = () => {
   emits('submit', modelValue)
 }
-// const
+const validate = (): Promise<{ valid: boolean; errors: any[] }> => form.value?.validate()
+defineExpose({
+  validate,
+})
 </script>
 <template>
-  <wd-form ref="form" :model="modelValue" @submit="submit">
+  <wd-form ref="form" :model="modelValue">
     <template
       v-for="([prop, { type, label, props }], index) in Object.entries(schema)"
       :key="index"

packages/app/src/core/libs/requests.ts

@@ -268,6 +268,8 @@ export const getAppMaterials = () =>
   httpGet<MaterialDealerRes[]>('/app-api/member/materials/appMaterialsList')
 export const getAppMaterial = (id: number) =>
   httpGet<MaterialDealerRes>('/app-api/member/materials/queryHomePage', { id })
+export const createMaterialsReferrer = (data) =>
+  httpPost('/app-api/member/materials-referrer/create', data)
 export const refreshToken = (refreshToken: string) =>
   httpPost<any>('/app-api/member/auth/refresh-token', {}, { refreshToken })
 export const httpGetMock = <T>(data: T) =>

packages/app/src/pages/material/recommend/index.vue

@@ -1,96 +1,67 @@
 <route lang="yaml">
 style:
   navigationBarBackgroundColor: '#fff'
-  navigationBarTitleText: '推荐材料商'
+  navigationBarTitleText: 推荐材料商
 </route>
+
 <script setup lang="ts">
 import DataForm from '@/components/data-form.vue'
+import { useUserStore } from '../../../store'
 import { useToast } from 'wot-design-uni'
+import { storeToRefs } from 'pinia'
+import { createMaterialsReferrer } from '../../../core/libs/requests'
 
-const { success: showSuccess } = useToast()
-
-const model = reactive<{
-  value1: string
-  value2: string
-}>({
-  value1: '',
-  value2: '',
-})
-const form = ref()
+const { success, error } = useToast()
+const userStore = useUserStore()
+const { userInfo } = storeToRefs(userStore)
+const form = ref<InstanceType<typeof DataForm>>()
+const formData = ref({ referrerId: userInfo.value.userId, referrerName: userInfo.value.nickname })
+const handleSubmit = async () => {
+  const { valid } = await form.value.validate()
+  if (valid) {
+    console.log(formData.value)
+    const { code, msg } = await createMaterialsReferrer(formData.value)
+    code === 0 && success('提交成功')
+    code !== 0 && error(msg)
+  }
+}
 const schema = {
-  name: {
+  materialsName: {
     type: 'TextField',
     label: '*材料商名称/品牌名称',
   },
-  agentName: {
+  contactPerson: {
     type: 'TextField',
     label: '*对接人姓名',
   },
-  agentPosition: {
+  contactPosition: {
     type: 'TextField',
     label: '*对接人职位',
   },
-  agentPhone: {
+  contactPhone: {
     type: 'TextField',
     label: '*对接人电话',
   },
   submit: {
     type: 'Submit',
     label: '提交',
-    // onSubmit: handleSubmit,
   },
 }
-
-function handleSubmit() {
-  form.value
-    .validate()
-    .then(({ valid, errors }) => {
-      if (valid) {
-        showSuccess({
-          msg: '校验通过',
-        })
-      }
-    })
-    .catch((error) => {
-      console.log(error, 'error')
-    })
-}
+onMounted(() => {})
 </script>
 <template>
-  <div class="px-3.5 bg-white">
-    <!-- <LoginTest title="推荐材料"></LoginTest> -->
-    <DataForm :schema="schema" direction="vertical"></DataForm>
+  <div class="flex-grow p-3.5 bg-white">
+    <DataForm
+      ref="form"
+      v-model="formData"
+      :schema="schema"
+      direction="vertical"
+      @submit="handleSubmit"
+    ></DataForm>
     <div
       class="w-[319px] h-[43px] text-center text-black/30 text-xs font-normal font-['PingFang SC'] leading-normal"
     >
       为满足筑巢荟设计师设计需求，各位设计师可向平台推荐优质服务材料商/施工队，平台优先进行洽谈和考核
     </div>
-    <!-- <wd-form ref="form" :model="model" :isCell="false">
-      <wd-cell-group border>
-        <wd-input
-          label="用户名"
-          label-width="100px"
-          prop="value1"
-          clearable
-          v-model="model.value1"
-          placeholder="请输入用户名"
-          :rules="[{ required: true, message: '请填写用户名' }]"
-          :isCell="false"
-        />
-        <wd-input
-          label="密码"
-          label-width="100px"
-          prop="value2"
-          show-password
-          clearable
-          v-model="model.value2"
-          placeholder="请输入密码"
-          :rules="[{ required: true, message: '请填写密码' }]"
-        />
-      </wd-cell-group>
-      <view class="footer">
-        <wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
-      </view>
-    </wd-form> -->
   </div>
 </template>

packages/assets/src/svgs.ts

@@ -17,9 +17,6 @@ import videoPlayIcon from "./assets/svgs/video_play_icon.svg";
 import router from "./assets/svgs/router";
 import pageHeaderBg from "./assets/svgs/pageHeaderBg";
 import pageHeaderFilter from "./assets/svgs/pageHeaderFilter";
-
-// export const vipIcon = ;
-
 export {
   ts,
   pageHeaderBg,