Переглянути джерело

feat(profile): 将吸烟饮酒史改为选择器模式

- 使用 picker 组件替换原有的 radio 组件
- 新增吸烟史和饮酒史的选择器
- 添加 smokingIndex 和 drinkingIndex 用于记录选择项
- 添加 smokingSelected 和 drinkingSelected 用于标识是否已选择
- 实现 onSmokingChange 和 onDrinkingChange 事件处理函数
- 更新样式以支持 picker 显示效果
mcbaiyun 2 місяців тому
батько
коміт
00e59449b7
1 змінених файлів з 42 додано та 13 видалено
  1. 42 13
      src/pages/profile/infos/patient-filing.vue

+ 42 - 13
src/pages/profile/infos/patient-filing.vue

@@ -6,19 +6,17 @@
 
       <!-- 吸烟饮酒史 -->
       <view class="form-item">
-        <text class="label">吸烟饮酒史</text>
-        <view class="radio-group">
-          <label class="radio-item" v-for="option in smokingOptions" :key="option.value">
-            <radio :value="option.value" :checked="smokingHistory === option.value" @change="smokingHistory = $event.detail.value" />
-            <text>{{ option.label }}</text>
-          </label>
-        </view>
-        <view class="radio-group">
-          <label class="radio-item" v-for="option in drinkingOptions" :key="option.value">
-            <radio :value="option.value" :checked="drinkingHistory === option.value" @change="drinkingHistory = $event.detail.value" />
-            <text>{{ option.label }}</text>
-          </label>
-        </view>
+        <text class="label">吸烟史</text>
+        <picker mode="selector" :range="smokingOptions" :value="smokingIndex" range-key="label" @change="onSmokingChange">
+          <view class="picker">{{ smokingSelected ? smokingOptions[smokingIndex]?.label : '请点击选择' }}</view>
+        </picker>
+      </view>
+
+      <view class="form-item">
+        <text class="label">饮酒史</text>
+        <picker mode="selector" :range="drinkingOptions" :value="drinkingIndex" range-key="label" @change="onDrinkingChange">
+          <view class="picker">{{ drinkingSelected ? drinkingOptions[drinkingIndex]?.label : '请点击选择' }}</view>
+        </picker>
       </view>
 
       <!-- 疾病诊断 -->
@@ -112,6 +110,10 @@ const diseases = [
 // 响应式数据
 const smokingHistory = ref('')
 const drinkingHistory = ref('')
+const smokingIndex = ref(0)
+const drinkingIndex = ref(0)
+const smokingSelected = ref(false)
+const drinkingSelected = ref(false)
 const diseaseHistory = ref<Record<string, boolean>>({
   diabetes: false,
   hypertension: false,
@@ -130,6 +132,19 @@ const toggleDisease = (key: string, value: boolean) => {
   diseaseHistory.value[key] = value
 }
 
+// picker change事件处理
+const onSmokingChange = (e: any) => {
+  smokingIndex.value = e.detail.value
+  smokingHistory.value = smokingOptions[smokingIndex.value].value
+  smokingSelected.value = true
+}
+
+const onDrinkingChange = (e: any) => {
+  drinkingIndex.value = e.detail.value
+  drinkingHistory.value = drinkingOptions[drinkingIndex.value].value
+  drinkingSelected.value = true
+}
+
 // 提交表单
 const submitForm = () => {
   const formData = {
@@ -241,6 +256,20 @@ const submitForm = () => {
   max-width: 100%;
 }
 
+.picker {
+  width: 100%;
+  height: 80rpx;
+  border: 1rpx solid #ddd;
+  border-radius: 8rpx;
+  padding: 0 20rpx;
+  display: flex;
+  align-items: center;
+  font-size: 32rpx;
+  color: #333;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
 .switch-row {
   display: flex;
   justify-content: space-between;