fix(app): 优化数据表单组件并添加材料详情页面

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

@@ -20,6 +20,7 @@ defineProps({
     default: 'vertical',
   },
 })
+const emits = defineEmits(['submit'])
 const types = {
   TextField: WdInput,
   Submit: WdButton,
@@ -38,51 +39,78 @@ const defaultProps = {
     block: true,
   },
 }
+const verticalDefaultProps = {
+  TextField: {
+    noBorder: true,
+    style: {},
+    customClass: 'rounded border border-[#e1e1e1] border-solid p-1',
+    placeholder: ' ',
+  },
+  Submit: {
+    customClass: 'w-full! rounded-lg! my-4!',
+    block: true,
+  },
+}
+const submit = () => {
+  emits('submit', modelValue)
+}
 // const
 </script>
 <template>
-  <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>
-          <wd-radio-group
-            v-if="type === 'Radio'"
-            v-bind="{ label, ...props, cell: true, shape: 'button' }"
-            v-model="modelValue[prop]"
-          >
-            <template v-for="{ label, value } of props.columns" :key="value">
-              <wd-radio :value="value">{{ label }}</wd-radio>
-            </template>
-          </wd-radio-group>
-          <!-- #endif -->
-        </div>
-      </template>
-    </wd-cell-group>
+  <wd-form ref="form" :model="modelValue" @submit="submit">
+    <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="{
+            ...(direction === 'vertical' ? verticalDefaultProps[type] : {}),
+            ...props,
+          }"
+          v-model="modelValue[prop]"
+        ></wd-input>
+        <wd-picker
+          v-if="type === 'Select'"
+          v-bind="{ label, ...props }"
+          v-model="modelValue[prop]"
+        ></wd-picker>
+        <wd-radio-group
+          v-if="type === 'Radio'"
+          v-bind="{ label, ...props, cell: true, shape: 'button' }"
+          v-model="modelValue[prop]"
+        >
+          <template v-for="{ label, value } of props.columns" :key="value">
+            <wd-radio :value="value">{{ label }}</wd-radio>
+          </template>
+        </wd-radio-group>
+        <wd-button
+          v-if="type === 'Submit'"
+          v-bind="{
+            ...(direction === 'vertical' ? verticalDefaultProps[type] : {}),
+            ...props,
+            formType: 'submit',
+          }"
+          @click="submit"
+        >
+          <span v-if="type === 'Submit'">提交</span>
+        </wd-button>
+        <!-- #endif -->
+      </div>
+    </template>
   </wd-form>
 </template>

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

@@ -266,6 +266,8 @@ export const getMaterials = (query = {}) =>
   }>('/app-api/member/materials/page', query)
 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 refreshToken = (refreshToken: string) =>
   httpPost<any>('/app-api/member/auth/refresh-token', {}, { refreshToken })
 export const httpGetMock = <T>(data: T) =>

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

@@ -5,11 +5,18 @@ style:
 <script setup lang="ts">
 import Card from '@/components/card.vue'
 import SectionHeading from '@/components/section-heading.vue'
-import StartMenuButton from '@/components/start-menu-button.vue'
+import { getAppMaterial } from '../../../core/libs/requests'
 
+const id = ref()
+const { data, run: setData } = useRequest(() => getAppMaterial(id.value))
 const handleBackClick = () => {
   uni.navigateBack()
 }
+onLoad(async (query: { id: number }) => {
+  id.value = query.id
+  await setData()
+  console.log(data.value)
+})
 </script>
 <template>
   <view class="">

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

@@ -50,9 +50,9 @@ const materialsByBrandLevel = ref<{ list: MaterialDealer[] }[]>([])
 const handleMenuItemClick = ({ path }: any) => {
   uni.navigateTo({ url: path })
 }
-const toDetail = () => {
+const toDetail = (id: number) => {
   uni.navigateTo({
-    url: '/pages/material/detail/index',
+    url: `/pages/material/detail/index?id=${id}`,
   })
 }
 const handleCall = (phone: string) => {
@@ -122,7 +122,7 @@ onMounted(async () => {
         <SectionHeading :title="brandLevelName" custom-class="mx-3.5"></SectionHeading>
         <div class="my-6 flex px-3.5 gap-3">
           <template v-for="(it, index) in materialsList" :key="index">
-            <div :style="{ width: '50%' }" @click="toDetail">
+            <div :style="{ width: '50%' }" @click="toDetail(it.id)">
               <Card>
                 <div class="flex flex-col items-center">
                   <wd-img

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

@@ -57,9 +57,9 @@ function handleSubmit() {
 }
 </script>
 <template>
-  <div class="w-full px-3.5 bg-white">
+  <div class="px-3.5 bg-white">
     <!-- <LoginTest title="推荐材料"></LoginTest> -->
-    <DataForm :schema="schema"></DataForm>
+    <DataForm :schema="schema" direction="vertical"></DataForm>
     <div
       class="w-[319px] h-[43px] text-center text-black/30 text-xs font-normal font-['PingFang SC'] leading-normal"
     >