From 01cf735453bb4f2757615beab5ee72480c07e417 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Wed, 20 Mar 2024 10:13:27 +0800
Subject: [PATCH] 优化图片预览组件，支持缩略图加载失败回退

---
 forms/checkbox/CCheckBox.vue |  116 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 105 insertions(+), 11 deletions(-)

diff --git a/forms/checkbox/CCheckBox.vue b/forms/checkbox/CCheckBox.vue
index 0c0dc6b..ef4718d 100644
--- a/forms/checkbox/CCheckBox.vue
+++ b/forms/checkbox/CCheckBox.vue
@@ -4,7 +4,10 @@
  */
 
 <template>
-    <view class="c-check-box">
+    <view
+        class="c-check-box"
+        :class="displayType==='dialog'?'c-check-box-dialog':''"
+    >
         <AtInput
             ref="input"
             :name="itemRes.name"
@@ -12,21 +15,66 @@
             :required="itemRes.required"
             :disabled="itemRes.disabled"
             :error="itemRes.error"
-        />
+            :editable="displayType!=='dialog'"
+            :placeholder="placeholder"
+            :value="selectedStr"
+            :onClick="evt => handleOpen()"
+        >
+            <view
+                v-if="displayType==='dialog'"
+                class="at-icon at-icon-chevron-right"
+            />
+        </AtInput>
         <AtCheckbox
             ref="check"
+            v-if="displayType==='plane'"
             :class="'c-check-box-' + boxType"
             :options="options"
             :selectedList="selectedList"
             :onChange="evt => handleChange(evt)"
         />
+        <AtModal
+            :isOpened="isDialogOpened"
+            v-if="displayType==='dialog'"
+            :onClose="evt => handleClose()"
+        >
+            <AtModalHeader>请选择{{itemRes.label}}</AtModalHeader>
+            <AtModalContent>
+                <scroll-view
+                    class="scrollor"
+                    :scrollY="true"
+                >
+                    <AtCheckbox
+                        ref="check"
+                        :class="'c-check-box-' + boxType"
+                        :options="options"
+                        :selectedList="selectedList"
+                        :onChange="evt => handleChange(evt)"
+                    />
+                    <view
+                        class="m-text-ignore"
+                        v-show="options.length===0"
+                    >（选项加载异常）</view>
+                </scroll-view>
+            </AtModalContent>
+            <AtModalAction>
+                <button @tap="evt => handleClose(evt)">确定</button>
+            </AtModalAction>
+        </AtModal>
     </view>
 </template>
 
 <script>
 import Taro from '@tarojs/taro';
 import { $ } from '@tarojs/extend';
-import { AtInput, AtCheckbox } from 'taro-ui-vue';
+import {
+    AtInput,
+    AtCheckbox,
+    AtModal,
+    AtModalHeader,
+    AtModalContent,
+    AtModalAction,
+} from 'taro-ui-vue';
 import { Tools } from '@components/common/Tools';
 import './cCheckBox.scss';
 
@@ -35,6 +83,10 @@
     components: {
         AtInput,
         AtCheckbox,
+        AtModal,
+        AtModalHeader,
+        AtModalContent,
+        AtModalAction,
     },
     props: {
         // 表单数据资源（表单组件内部机制专用）
@@ -49,9 +101,18 @@
             type: String,
             default: 'checkbox', // checkbox 多选、radio 单选
         },
+        // 显示模式
+        displayType: {
+            type: String,
+            default: 'plane', // plane 直接显示、dialog 弹窗
+        },
+        // 占位提示
+        placeholder: String,
     },
     data() {
-        return {};
+        return {
+            isDialogOpened: false,
+        };
     },
     computed: {
         selectedList() {
@@ -61,6 +122,14 @@
             } else {
                 return [value];
             }
+        },
+        selectedStr() {
+            return (this.selectedList || [])
+                .map(selected => {
+                    const option = this.options.find(opt => opt.value === selected);
+                    return option ? option.label || '' : '';
+                })
+                .join(',');
         },
     },
     methods: {
@@ -72,6 +141,13 @@
                     if (typeof item === 'undefined') {
                         return;
                     }
+                    const selectedIndex = this.options.findIndex(
+                        opt => opt.value === item
+                    );
+                    console.log(item, selectedIndex);
+                    if (selectedIndex < 0) {
+                        return;
+                    }
                     next.push(item);
                 });
                 this.itemRes.onChange(next);
@@ -79,17 +155,35 @@
             // 单选
             else if (this.boxType === 'radio') {
                 const next = evt[evt.length - 1];
-                this.itemRes.onChange(next);
+                const selectedIndex = this.options.find(opt => opt.value === item);
+                if (selectedIndex < 0) {
+                    this.itemRes.onChange('');
+                } else {
+                    this.itemRes.onChange(next);
+                }
             }
+        },
+        handleOpen() {
+            if (this.displayType === 'plane') {
+                return;
+            }
+            this.isDialogOpened = true;
+        },
+        handleClose() {
+            this.isDialogOpened = false;
         },
     },
     mounted() {
-        if (process.env.TARO_ENV === 'h5') {
-            $(this.$refs.input.$el)
-                .find('.at-input__container')
-                .prepend(this.$refs.check.$el);
-        } else if (process.env.TARO_ENV === 'weapp') {
-            $(this.$refs.input.$el).find('.at-input__container').append(this.$refs.check);
+        if (this.displayType === 'plane') {
+            if (process.env.TARO_ENV === 'h5') {
+                $(this.$refs.input.$el)
+                    .find('.at-input__container')
+                    .prepend(this.$refs.check.$el);
+            } else if (process.env.TARO_ENV === 'weapp') {
+                $(this.$refs.input.$el)
+                    .find('.at-input__container')
+                    .append(this.$refs.check.$el);
+            }
         }
     },
 };

--
Gitblit v1.9.1