widget.qw 1.0.75 → 1.0.76

package/src/components/image_picker.vue

@@ -1,124 +1,124 @@
-<template>
-    <van-field v-if="!isGone" name="image" :label="props.label" :required="isRequired" :rules="props.rules"
-        label-class="label" :placeholder="props.placeholder">
-        <template #input>
-            <div class="image-box">
-                <van-uploader v-if="props.capture" v-model="files" :max-count="1" :capture="props.capture"
-                    accept="image/jpeg,image/png" :afterRead="onAfterRead" :disabled="isDisabled"
-                    :deletable="!isReadonly && !isDisabled" :before-delete="onBeforeDelete" :show-upload="!isReadonly"
-                     />
-                <van-uploader v-else v-model="files" :max-count="1" accept="image/jpeg,image/png"
-                    :afterRead="onAfterRead" :disabled="isDisabled" :deletable="!isReadonly && !isDisabled"
-                    :before-delete="onBeforeDelete" :show-upload="!isReadonly"
-                     />
-            </div>
-        </template>
-    </van-field>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
-import util from '../util'
-import { useVModel } from "@vueuse/core"
-
-const props = defineProps({
-    modelValue: {
-        type: String,
-        default: ''
-    },
-    label: {
-        type: String,
-        default: ''
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    placeholder: {
-        type: String,
-        default: ''
-    },
-    capture: {
-        type: String,
-        default: ''
-    },
-    compress: {
-        type: Boolean,
-        default: true
-    },
-    rules: {
-        type: Array,
-        default: () => []
-    },
-    auth: {
-        type: String,
-        default: ''
-    }
-})
-
-const emit = defineEmits(['update:modelValue'])
-const modelValue = useVModel(props, 'modelValue', emit)
-const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
-
-const files = ref([])
-
-onMounted(() => {
-
-})
-
-const onAfterRead = async (file) => {
-    console.log(file)
-
-    let compress_file = file.file
-    if (props.compress) {
-        compress_file = await util.compress_image(file.file)
-    }
-
-    let params = {
-        file: compress_file
-    }
-
-    return util.file_upload(params).then(res => {
-        modelValue.value = res.data
-        return Promise.resolve(file)
-    })
-}
-
-const onBeforeDelete = (e) => {
-    modelValue.value = ''
-    return Promise.resolve(e)
-}
-
-watch(() => props.modelValue,
-    (newVal, oldVal) => {
-        if (!props.modelValue) {
-            files.value = []
-            return
-        }
-
-        files.value = [{
-            url: props.modelValue
-        }]
-    },
-    {
-        immediate: true
-    }
-)
-</script>
-
-<style lang="scss" scoped>
-:deep(.label) {
-    color: #000 !important;
-}
-
-:deep(.van-field__control:disabled) {
-    color: #000 !important;
-    cursor: not-allowed;
-    opacity: 1;
-    -webkit-text-fill-color: #000;
-}
+<template>
+    <van-field v-if="!isGone" name="image" :label="props.label" :required="isRequired" :rules="props.rules"
+        label-class="label" :placeholder="props.placeholder">
+        <template #input>
+            <div class="image-box">
+                <van-uploader v-if="props.capture" v-model="files" :max-count="1" :capture="props.capture"
+                    accept="image/jpeg,image/png" :afterRead="onAfterRead" :disabled="isDisabled"
+                    :deletable="!isReadonly && !isDisabled" :before-delete="onBeforeDelete" :show-upload="!isReadonly"
+                     />
+                <van-uploader v-else v-model="files" :max-count="1" accept="image/jpeg,image/png"
+                    :afterRead="onAfterRead" :disabled="isDisabled" :deletable="!isReadonly && !isDisabled"
+                    :before-delete="onBeforeDelete" :show-upload="!isReadonly"
+                     />
+            </div>
+        </template>
+    </van-field>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
+import util from '../util'
+import { useVModel } from "@vueuse/core"
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    capture: {
+        type: String,
+        default: ''
+    },
+    compress: {
+        type: Boolean,
+        default: true
+    },
+    rules: {
+        type: Array,
+        default: () => []
+    },
+    auth: {
+        type: String,
+        default: ''
+    }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
+
+const files = ref([])
+
+onMounted(() => {
+
+})
+
+const onAfterRead = async (file) => {
+    console.log(file)
+
+    let compress_file = file.file
+    if (props.compress) {
+        compress_file = await util.compress_image(file.file)
+    }
+
+    let params = {
+        file: compress_file
+    }
+
+    return util.file_upload(params).then(res => {
+        modelValue.value = res.data
+        return Promise.resolve(file)
+    })
+}
+
+const onBeforeDelete = (e) => {
+    modelValue.value = ''
+    return Promise.resolve(e)
+}
+
+watch(() => props.modelValue,
+    (newVal, oldVal) => {
+        if (!props.modelValue) {
+            files.value = []
+            return
+        }
+
+        files.value = [{
+            url: props.modelValue
+        }]
+    },
+    {
+        immediate: true
+    }
+)
+</script>
+
+<style lang="scss" scoped>
+:deep(.label) {
+    color: #000 !important;
+}
+
+:deep(.van-field__control:disabled) {
+    color: #000 !important;
+    cursor: not-allowed;
+    opacity: 1;
+    -webkit-text-fill-color: #000;
+}
 </style>

package/src/components/images_picker.vue

@@ -1,145 +1,160 @@
-<template>
-    <van-field name="image" :label="props.label" :required="isRequired" :rules="props.rules" label-class="label"
-        :placeholder="props.placeholder">
-        <template #input>
-            <div class="image-box">
-                <van-uploader v-if="props.capture" v-model="files" :max-count="props.max" :capture="props.capture"
-                    accept="image/jpeg,image/png" :disabled="isDisabled" :deletable="!isRequired && !isDisabled"
-                    :afterRead="onAfterRead" :before-delete="onBeforeDelete" :show-upload="!isReadonly"/>
-                <van-uploader v-else v-model="files" :max-count="props.max" accept="image/jpeg,image/png"
-                    :disabled="isDisabled" :deletable="!isReadonly && !isDisabled" :afterRead="onAfterRead"
-                    :before-delete="onBeforeDelete" :show-upload="!isReadonly"/>
-            </div>
-        </template>
-    </van-field>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
-import util from "@/util"
-import { useVModel } from "@vueuse/core"
-
-const props = defineProps({
-    modelValue: {
-        type: Array,
-        default: []
-    },
-    label: {
-        type: String,
-        default: ''
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    placeholder: {
-        type: String,
-        default: undefined
-    },
-    capture: {
-        type: String,
-        default: ''
-    },
-    compress: {
-        type: Boolean,
-        default: true
-    },
-    max: {
-        type: Number,
-        default: 1000
-    },
-    rules: {
-        type: Array,
-        default: () => []
-    },
-    auth: {
-        type: String,
-        default: ''
-    }
-})
-const emit = defineEmits(['update:modelValue'])
-const modelValue = useVModel(props, 'modelValue', emit)
-const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
-const files = ref([])
-
-onMounted(() => {
-
-})
-
-const onAfterRead = async (file) => {
-    console.log(file)
-
-    let compress_file = file.file
-    if (props.compress) {
-        compress_file = await util.compress_image(file.file)
-    }
-
-    let params = {
-        file: compress_file
-    }
-
-    return util.file_upload(params).then(res => {
-        let newUrls = []
-        if (props.modelValue && props.modelValue.length > 0)
-            newUrls = [...props.modelValue, res.data]
-        else
-            newUrls = [res.data]
-
-        emit('update:modelValue', newUrls)
-        return Promise.resolve(file)
-    })
-}
-
-const onBeforeDelete = (e) => {
-    let newUrls = props.modelValue.filter(item => {
-        return item != e.url
-    })
-    emit('update:modelValue', newUrls)
-    return Promise.resolve(e)
-}
-
-watch(() => props.modelValue,
-    (newVal, oldVal) => {
-        if (!props.modelValue || props.modelValue.length < 1) {
-            files.value = []
-            return
-        }
-
-        files.value = props.modelValue.map(item => {
-            return {
-                url: item,
-                isImage: true
-            }
-        })
-    },
-    {
-        immediate: true
-    }
-)
-</script>
-
-<style lang="scss" scoped>
-.widget {
-    text-align: center;
-
-    .btn {
-        position: fixed;
-        bottom: 1rem;
-        left: 0;
-        right: 0;
-        margin: auto auto;
-        color: white;
-        font-size: 14px;
-        background: rgba(58, 136, 255, 1);
-        padding: 8px 35px;
-        width: 100px;
-        text-align: center;
-        display: inline-block;
-        border-radius: 2px;
-    }
-}
+<template>
+    <van-field name="image" :label="props.label" :required="isRequired" :rules="props.rules" label-class="label"
+        :placeholder="props.placeholder">
+        <template #input>
+            <div class="image-box">
+                <van-uploader v-if="props.capture && (!isReadonly && !isDisabled)" v-model="files" :max-count="props.max"
+                    :capture="props.capture" accept="image/jpeg,image/png" :disabled="isDisabled"
+                    :deletable="!isRequired && !isDisabled" :afterRead="onAfterRead" :before-delete="onBeforeDelete"
+                    :show-upload="!isReadonly" />
+                <van-uploader v-if="!props.capture && (!isReadonly && !isDisabled)" v-model="files" :max-count="props.max"
+                    accept="image/jpeg,image/png" :disabled="isDisabled" :deletable="!isReadonly && !isDisabled"
+                    :afterRead="onAfterRead" :before-delete="onBeforeDelete" :show-upload="!isReadonly" />
+                <img class="cover" v-if="isReadonly || isDisabled" v-for="(cover, i) in previews" :key="i" :src="cover" @click="onPreview(i)" />
+                <van-icon v-if="modelValue.length>props.maxPreview && (isReadonly || isDisabled)" name="ellipsis" @click="onToggleMore"/>
+            </div>
+        </template>
+    </van-field>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
+import util from "@/util"
+import { useVModel } from "@vueuse/core"
+import { showImagePreview } from 'vant';
+
+const props = defineProps({
+    modelValue: {
+        type: Array,
+        default: []
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    placeholder: {
+        type: String,
+        default: undefined
+    },
+    capture: {
+        type: String,
+        default: ''
+    },
+    compress: {
+        type: Boolean,
+        default: true
+    },
+    max: {
+        type: Number,
+        default: 10000
+    },
+    rules: {
+        type: Array,
+        default: () => []
+    },
+    auth: {
+        type: String,
+        default: ''
+    },
+    maxPreview: {
+        type: Number,
+        default: 1
+    }
+})
+const emit = defineEmits(['update:modelValue'])
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
+const files = ref([])
+const isPreviewMore=ref(false)
+const previews=computed(()=>{
+    if(!modelValue.value || modelValue.value.length<1)
+        return []
+
+    if(props.maxPreview > modelValue.value.length || isPreviewMore.value)
+        return modelValue.value
+
+    return modelValue.value.slice(0, props.maxPreview)
+})
+
+onMounted(() => {
+
+})
+
+const onAfterRead = async (file) => {
+    console.log(file)
+
+    let compress_file = file.file
+    if (props.compress) {
+        compress_file = await util.compress_image(file.file)
+    }
+
+    let params = {
+        file: compress_file
+    }
+
+    return util.file_upload(params).then(res => {
+        let newUrls = []
+        if (props.modelValue && props.modelValue.length > 0)
+            newUrls = [...props.modelValue, res.data]
+        else
+            newUrls = [res.data]
+
+        emit('update:modelValue', newUrls)
+        return Promise.resolve(file)
+    })
+}
+
+const onBeforeDelete = (e) => {
+    let newUrls = props.modelValue.filter(item => {
+        return item != e.url
+    })
+    emit('update:modelValue', newUrls)
+    return Promise.resolve(e)
+}
+
+const onPreview = (i) => {
+    showImagePreview({images:modelValue.value, startPosition:i})
+}
+
+const onToggleMore=()=>{
+    isPreviewMore.value = !isPreviewMore.value
+}
+
+watch(() => props.modelValue,
+    (newVal, oldVal) => {
+        if (!props.modelValue || props.modelValue.length < 1) {
+            files.value = []
+            return
+        }
+
+        files.value = props.modelValue.map(item => {
+            return {
+                url: item,
+                isImage: true
+            }
+        })
+    },
+    {
+        immediate: true
+    }
+)
+</script>
+
+<style lang="scss" scoped>
+
+    .image-box {
+
+        .cover {
+            width: 80px;
+            height: 80px;
+        }
+    }
 </style>