141 lines
3.1 KiB
Vue
141 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<l-upload ref="imgUpload" uploadType="img" :serverUrl="this.url_config" :formData="{isImg: 'true'}" :width="110"
|
||
|
|
:height="110" :images="_value || []" :header="header" :max-size="$props.formProps.maxSize"
|
||
|
|
:disableAdd="$props.readonly" :limit="$props.formProps.maxNumber" @complete="complete" @remove="remove"
|
||
|
|
:disable="$props.readonly">
|
||
|
|
</l-upload>
|
||
|
|
<view v-if="!readonly" style="color: #999999; font-size: 26rpx;">{{ $props.formProps.placeholder || '请上传图片' }}
|
||
|
|
{{ sizeTip }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
formProps: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
modelValue: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
readonly: Boolean
|
||
|
|
},
|
||
|
|
model: {
|
||
|
|
prop: "modelValue",
|
||
|
|
event: "update",
|
||
|
|
},
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
imageStyles: {
|
||
|
|
width: 80,
|
||
|
|
height: 80,
|
||
|
|
padding: '19rpx'
|
||
|
|
},
|
||
|
|
originVal: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
header() {
|
||
|
|
return {
|
||
|
|
Authorization: "Bearer " + uni.getStorageSync('wflow-token')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_value: {
|
||
|
|
get() {
|
||
|
|
let dealArr = [];
|
||
|
|
// console.log(JSON.stringify(this.$props.modelValue),123)
|
||
|
|
// console.log(JSON.stringify(this.originVal),456)
|
||
|
|
// console.log(JSON.stringify(dealArr),111222)
|
||
|
|
if (JSON.stringify(this.$props.modelValue) == JSON.stringify(this.originVal)) {
|
||
|
|
return this.originVal
|
||
|
|
}
|
||
|
|
this.originVal.length = 0;
|
||
|
|
if (this.$props.modelValue) {
|
||
|
|
this.originVal = this.$props.modelValue;
|
||
|
|
console.log(JSON.stringify(this.originVal), 888)
|
||
|
|
this.originVal.map(item => {
|
||
|
|
if (item.url.indexOf("http://") != -1 || item.url.indexOf("https://") != -1) {
|
||
|
|
dealArr.push({
|
||
|
|
...item,
|
||
|
|
id: item.name,
|
||
|
|
url: item.name,
|
||
|
|
isImage: true,
|
||
|
|
contentType: "image/png"
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
dealArr.push({
|
||
|
|
...item,
|
||
|
|
id: item.url,
|
||
|
|
url: item.url,
|
||
|
|
isImage: true,
|
||
|
|
contentType: "image/png"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
return dealArr
|
||
|
|
} else {
|
||
|
|
return this.$props.modelValue
|
||
|
|
}
|
||
|
|
},
|
||
|
|
set(val) {
|
||
|
|
console.log("_value", val);
|
||
|
|
this.$emit('update:modelValue', val)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
sizeTip() {
|
||
|
|
return this.$props.formProps.maxSize > 0 ? `| 每张图不超过${this.$props.formProps.maxSize}MB` : ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
console.log(this.$props.formProps)
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
console.log(this.$props.formProps)
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
console.log(this.$props.formProps)
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
console.log(this.$props.formProps)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
resizeCollapse() {
|
||
|
|
setTimeout(() => this.$emit('resize'), 800)
|
||
|
|
},
|
||
|
|
complete(e) {
|
||
|
|
console.log(JSON.stringify(e), 666777)
|
||
|
|
this._value = e.imageArr
|
||
|
|
if ((this._value || []).length < e.imageArr.length) {
|
||
|
|
uni.showToast({
|
||
|
|
icon: 'none',
|
||
|
|
title: '上传图片成功'
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
icon: 'none',
|
||
|
|
title: '移除图片成功'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
this.resizeCollapse();
|
||
|
|
},
|
||
|
|
remove(i) {
|
||
|
|
if (!this.$props.readonly) {
|
||
|
|
this._value.splice(i, 1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|