110 lines
2.4 KiB
Vue
110 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<view class="textarea-row">
|
||
|
|
<view class="form-row__label">
|
||
|
|
{{ name }}<text v-if="required" class="form-cell--required"></text>
|
||
|
|
</view>
|
||
|
|
<view class="flex flex-wrap">
|
||
|
|
<view v-for="(file, idx) in files" :key="idx" class="upload-item mt-10">
|
||
|
|
<image v-if="file.isImage" :src="file.url" class="w-full h-full"></image>
|
||
|
|
<image v-else src="/static/file.svg" class="w-full h-full"></image>
|
||
|
|
<uni-icons type="close" :size="32" color="red" class="remove-icon" @click="remove(idx)"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view v-if="value.length < 3"
|
||
|
|
class="upload-item border-primary mt-10 flex items-center justify-center text-primary" @click="addImage()">
|
||
|
|
<uni-icons type="camera" :size="40" color="#0074ff"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { upload } from '@/utils/http';
|
||
|
|
import { loading, hideLoading, toast } from '@/utils/widget';
|
||
|
|
|
||
|
|
const emits = defineEmits(['change']);
|
||
|
|
const props = defineProps({
|
||
|
|
form: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
},
|
||
|
|
name: {
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
required: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
disableChange: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const value = computed(() => Array.isArray(props.form[props.title]) ? props.form[props.title] : [])
|
||
|
|
const files = computed(() => value.value.map(i => {
|
||
|
|
return {
|
||
|
|
url: i.url,
|
||
|
|
name: i.name,
|
||
|
|
type: i.type,
|
||
|
|
isImage: /image/i.test(i.type)
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
|
||
|
|
function addImage() {
|
||
|
|
uni.chooseImage({
|
||
|
|
count: 1,
|
||
|
|
success: async (res) => {
|
||
|
|
loading();
|
||
|
|
const result = await upload(res.tempFilePaths[0]);
|
||
|
|
hideLoading();
|
||
|
|
if (result) {
|
||
|
|
change([...value.value, { url: result, type: 'image/png' }])
|
||
|
|
} else {
|
||
|
|
toast('上传失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function change(value) {
|
||
|
|
emits('change', {
|
||
|
|
title: props.title,
|
||
|
|
value: value
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function remove(idx) {
|
||
|
|
const value = [...files.value];
|
||
|
|
value.splice(idx, 1);
|
||
|
|
change(value)
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.upload-item {
|
||
|
|
position: relative;
|
||
|
|
width: 160rpx;
|
||
|
|
height: 160rpx;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-right: 30rpx;
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.textarea-row {
|
||
|
|
padding: 24rpx 30rpx;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.remove-icon {
|
||
|
|
position: absolute;
|
||
|
|
top: -30rpx;
|
||
|
|
right: -30rpx;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
</style>
|