From 207a55e525e600c0b72cfe0ed127715502f25632 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8C=83=E9=B9=8F?= <fanpeng@star-lock.cn>
Date: Mon, 13 Jan 2025 18:42:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E7=94=B3=E8=AF=B7?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E9=80=89=E6=8B=A9=E5=99=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/approval/components/Components.vue  | 34 +++++++++-
 .../approval/components/SelectPicker.vue      | 66 +++++++++++++++++++
 2 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/approval/components/SelectPicker.vue

diff --git a/src/pages/approval/components/Components.vue b/src/pages/approval/components/Components.vue
index 0162720..2cfa5e9 100644
--- a/src/pages/approval/components/Components.vue
+++ b/src/pages/approval/components/Components.vue
@@ -1,6 +1,6 @@
 <template>
   <view>
-    <view class="mx-4 p-2 rounded-2">
+    <view class="bg-white mx-4 p-2 rounded-2">
       <Input
         :id="0"
         value="单行"
@@ -18,6 +18,22 @@
         @change="textareaChange"
       ></Textarea>
       <wd-divider color="#bcbfbe"></wd-divider>
+      <SelectPicker
+        :value="1"
+        :id="2"
+        title="单选框"
+        placeholder="单选"
+        :columns="columns"
+      ></SelectPicker>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <SelectPicker
+        :value="[0]"
+        :id="3"
+        title="多选框"
+        placeholder="多选"
+        type="checkbox"
+        :columns="columns"
+      ></SelectPicker>
     </view>
   </view>
 </template>
@@ -25,6 +41,22 @@
 <script setup lang="ts">
   import Input from '@/pages/approval/components/Input.vue'
   import Textarea from '@/pages/approval/components/Textarea.vue'
+  import SelectPicker from '@/pages/approval/components/SelectPicker.vue'
+
+  const columns = ref<Record<number, any>>([
+    {
+      value: 0,
+      label: '男装'
+    },
+    {
+      value: 1,
+      label: '奢侈品'
+    },
+    {
+      value: 2,
+      label: '女装'
+    }
+  ])
 
   const inputChange = e => {
     console.log('inputChange', e)
diff --git a/src/pages/approval/components/SelectPicker.vue b/src/pages/approval/components/SelectPicker.vue
new file mode 100644
index 0000000..4ce41f7
--- /dev/null
+++ b/src/pages/approval/components/SelectPicker.vue
@@ -0,0 +1,66 @@
+<template>
+  <view class="px-2 text-3.5">
+    <view class="flex flex-items-center pos-relative">
+      <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
+      <view>{{ title }}</view>
+    </view>
+    <view class="pt-2">
+      <wd-select-picker
+        :type="type"
+        :title="placeholder"
+        :show-confirm="type === 'checkbox'"
+        v-model="picker"
+        :columns="columns"
+        size="large"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  const picker = ref(-1)
+
+  const props = defineProps({
+    id: {
+      type: Number,
+      required: true
+    },
+    type: {
+      type: String,
+      default: 'radio'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    value: {
+      type: [Number, Array, null],
+      default: null
+    },
+    columns: {
+      type: Array,
+      required: true
+    }
+  })
+
+  onMounted(() => {
+    if (props.value) {
+      picker.value = props.value
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  :deep(.wd-select-picker__cell) {
+    padding: var(--wot-cell-wrapper-padding, 10px) 0;
+    background-color: transparent;
+  }
+</style>