126 lines
3.2 KiB
Vue
126 lines
3.2 KiB
Vue
<template>
|
|
<view>
|
|
<slot name="content" v-bind:imgList="imgList" v-bind:num="num" v-bind:maxlength="maxlength" v-bind:isShow="isShow" />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { UploadImage } from '@/common/utils/index'
|
|
import { SERVER_TYPE } from '@/common/config.js'
|
|
export default {
|
|
name: 'benben-images-upload',
|
|
props: {
|
|
maxlength: {
|
|
type: [String, Number],
|
|
default: '9',
|
|
},
|
|
imgList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
isShowTips: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
imgIds: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
data: () => ({
|
|
uploading: false,
|
|
imgIdArr: [],
|
|
}),
|
|
computed: {
|
|
isShow() {
|
|
return this.imgList.length < this.maxlength
|
|
},
|
|
num() {
|
|
return this.imgList.length || 0
|
|
},
|
|
},
|
|
//监听imgIds
|
|
watch: {
|
|
imgIds: {
|
|
handler(val) {
|
|
if (SERVER_TYPE !== 0) {
|
|
this.imgIdArr = val ? (val + '').split(',') : []
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
imgList: {
|
|
handler(val) {
|
|
if (SERVER_TYPE === 0) {
|
|
this.$emit('update:img-ids', JSON.stringify(val))
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
},
|
|
},
|
|
methods: {
|
|
//点击删除
|
|
delImage(index) {
|
|
let imgList = JSON.parse(JSON.stringify(this.imgList))
|
|
imgList.splice(index, 1)
|
|
this.$emit('update:img-list', imgList)
|
|
if (SERVER_TYPE !== 0) {
|
|
let imgIdArr = JSON.parse(JSON.stringify(this.imgIdArr))
|
|
imgIdArr.splice(index, 1)
|
|
this.$emit('update:img-ids', imgIdArr.join(','))
|
|
}
|
|
},
|
|
//点击预览
|
|
previewImage(index) {
|
|
uni.previewImage({
|
|
current: this.imgList[index],
|
|
urls: this.imgList,
|
|
})
|
|
},
|
|
//点击上传
|
|
manyChooseImage() {
|
|
let self = this
|
|
let imgIdArr = JSON.parse(JSON.stringify(this.imgIdArr))
|
|
let imgList = JSON.parse(JSON.stringify(this.imgList))
|
|
if (self.uploading) return
|
|
if (self.maxlength - self.imgList.length < 1) return
|
|
// 从相册中选择图片
|
|
uni.chooseImage({
|
|
count: self.maxlength - self.imgList.length, // 默认3
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
success: function (res) {
|
|
self.uploading = true
|
|
// 开始上传
|
|
new UploadImage(res.tempFiles, {
|
|
complete: function (res) {
|
|
self.uploading = false
|
|
res.map((item) => {
|
|
imgIdArr.push(item.id)
|
|
imgList.push(item.path)
|
|
})
|
|
if (SERVER_TYPE !== 0) {
|
|
self.$emit('update:img-ids', imgIdArr.join(','))
|
|
}
|
|
self.$emit('update:img-list', imgList)
|
|
},
|
|
})
|
|
},
|
|
})
|
|
},
|
|
},
|
|
// 组件周期函数--监听组件挂载完毕
|
|
mounted() {},
|
|
// 组件周期函数--监听组件数据更新之前
|
|
beforeUpdate() {},
|
|
// 组件周期函数--监听组件数据更新之后
|
|
updated() {},
|
|
// 组件周期函数--监听组件激活(显示)
|
|
activated() {},
|
|
// 组件周期函数--监听组件停用(隐藏)
|
|
deactivated() {},
|
|
// 组件周期函数--监听组件销毁之前
|
|
beforeDestroy() {},
|
|
}
|
|
</script>
|
|
<style></style>
|