diff --git a/components.d.ts b/components.d.ts
index 19a5e08..7982ed8 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -28,6 +28,8 @@ declare module '@vue/runtime-core' {
     VanIcon: typeof import('vant/es')['Icon']
     VanList: typeof import('vant/es')['List']
     VanPullRefresh: typeof import('vant/es')['PullRefresh']
+    VanRadio: typeof import('vant/es')['Radio']
+    VanRadioGroup: typeof import('vant/es')['RadioGroup']
     VanStepper: typeof import('vant/es')['Stepper']
   }
 }
diff --git a/src/views/badge/index.vue b/src/views/badge/index.vue
index b9a132a..c2084e5 100644
--- a/src/views/badge/index.vue
+++ b/src/views/badge/index.vue
@@ -176,6 +176,16 @@
         <h5-cropper :option="option" @getbase64Data="getbase64Data" @imgorigoinf="imgorigoinf"></h5-cropper>
       </div>
     </div>
+    <div v-if="typeId == 4">
+      <div style="font-size: 16px; color: #222; font-weight: bold; margin-top: 16px;padding: 0 16px;">风格类型</div>
+      <div class="kind-box">
+        <div class="kind-box-item" v-for="item in kindList" :key="item.id" :class="{ styleActive: kindId == item.id }">
+          <div class="kind-item-title" @click="kindChange(item.id)">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+    </div>
     <div v-if="typeId != 4">
       <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7 || prodId == 1">温馨提示：请上传只有{{ prop == '3D真人肖像' ? '1' : '1-3' }}人的照片</div>
       <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8 || prodId == 2">温馨提示：请上传只有1-3只宠物的照片</div>
@@ -330,6 +340,7 @@ const getOrderStat = () => {
     orderStat.value = res
     if (res.type_id == 4) {
       prodId.value = res.prod_id == 1 ? 1 : 2
+      getKindList()
     } else {
       prodId.value = res.type_id == 3 ? 8 : res.prod_id
     }
@@ -339,6 +350,18 @@ const getOrderStat = () => {
   })
 }
 
+const kindList = ref([])
+const getKindList = () => {
+  badgeApi.getKindList({
+    support_subject: 1,
+    type_id: 4
+  }).then((res: any) => {
+    kindList.value = res.list
+    kindId.value = res.list && res.list[0].id
+    console.log('kindList', kindList.value)
+  })
+}
+
 const prodChange = (id: number) => {
   console.log('prodChange', id)
   if (typeId.value == 3 && id == 7) {
@@ -351,6 +374,13 @@ const prodChange = (id: number) => {
   }
   prodId.value = typeId.value == 4 ? id == 8 ? 2 : 1 : id == 7 ? 7 : 8
   picture.value = null
+  kindId.value = 0
+}
+
+const kindId = ref(0)
+const kindChange = (id: number) => {
+  kindId.value = id
+  console.log('kindChange', id)
 }
 
 const isLoading = ref(false)
@@ -612,7 +642,8 @@ const sendToOss = async (src: string, url: string) => {
         group: 1,
         prod_id: prodId.value,
         extend_value: -1,
-        type_id: typeId.value
+        type_id: typeId.value,
+        kind_id: kindId.value
       }
       badgeApi.putModeling(params).then((res: any) => {
         console.log('putModeling', res)
@@ -640,7 +671,8 @@ const createLog = () => {
     pid: pid.value,
     group: 1,
     prod_id: prodId.value,
-    type_id: typeId.value
+    type_id: typeId.value,
+    kind_id: kindId.value
   }
   badgeApi.createLog(params).then((res: any) => {
     console.log('createLog', res)
@@ -657,7 +689,8 @@ const createLog = () => {
           pid: pid.value,
           group: 1,
           prod_id: prodId.value,
-          type_id: typeId.value
+          type_id: typeId.value,
+          kind_id: kindId.value
         },
       })
     }, 1000);
@@ -1281,4 +1314,25 @@ onMounted(() => {
   background: #50CF54;
   color: #fff;
 }
+.kind-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  padding: 16px 36px;
+}
+.kind-box-item {
+  margin-right: 10px;
+  padding: 6px 10px;
+  background: #f5f5f5;
+  border-radius: 8px;
+  color: #333;
+}
+.kind-item-title {
+  font-size: 14px;
+}
+.kind-box-item.styleActive {
+  background: #50CF54;
+  color: #fff;
+}
 </style>
diff --git a/src/views/badge/preview.vue b/src/views/badge/preview.vue
index bc84129..3dc56e0 100644
--- a/src/views/badge/preview.vue
+++ b/src/views/badge/preview.vue
@@ -234,7 +234,8 @@ function sureReload() {
       pid: pid.value,
       group: 1,
       prod_id: prodId.value,
-      type_id: typeId.value
+      type_id: typeId.value,
+      kind_id: kindId.value
     }
     badgeApi.putModeling(params).then((res: any) => {
       console.log('putModeling', res)
@@ -274,7 +275,8 @@ const createLog = () => {
     pid: pid.value,
     group: 1,
     prod_id: prodId.value,
-    type_id: typeId.value
+    type_id: typeId.value,
+    kind_id: kindId.value
   }).then((res: any) => {
     console.log('createLog', res)
     showReload.value = false
@@ -873,6 +875,7 @@ function handleBeforeUnload(_event: BeforeUnloadEvent) {
 const pid = ref(0)
 const route = useRoute()
 const prodId = ref(0)
+const kindId = ref(0)
 onMounted(() => {
   pid.value = route.query.pid
   group.value = route.query.group
@@ -882,6 +885,9 @@ onMounted(() => {
   if (route.query.prod_id) {
     prodId.value = route.query.prod_id
   }
+  if (route.query.kind_id) {
+    kindId.value = Number(route.query.kind_id)
+  }
   getTrialCode()
 
   // pid.value = 281505;