107 lines
2.3 KiB
Vue
107 lines
2.3 KiB
Vue
<template>
|
||
<view class="design-feedback">
|
||
<view class="remark-area">
|
||
<textarea
|
||
:value="innerValue"
|
||
:placeholder="placeholder"
|
||
:auto-height="autoHeight"
|
||
@input="handleInput"
|
||
class="w-full"
|
||
></textarea>
|
||
</view>
|
||
<view class="picture-area">
|
||
<u-upload
|
||
class="upload-wrapper"
|
||
:fileList="fileList['repairImage']"
|
||
name="repairImage"
|
||
:maxCount="9"
|
||
multiple
|
||
@beforeRead="beforeRead"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
:width="80"
|
||
:height="80"
|
||
:class="setClassName"
|
||
></u-upload>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch, unref, computed } from 'vue'
|
||
import { useUploadValidate } from '@/hooks/useUploadValidate'
|
||
|
||
const props = defineProps({
|
||
placeholder: {
|
||
type: String,
|
||
default: '请输入备注信息，最多250字'
|
||
},
|
||
autoHeight: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
remark: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
maxlength: {
|
||
type: Number,
|
||
default: 250
|
||
},
|
||
imageList: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
})
|
||
const emit = defineEmits(['update:remark', 'update:imageList'])
|
||
|
||
const innerValue = ref('')
|
||
const handleInput = e => {
|
||
const { value } = e.detail
|
||
innerValue.value = value
|
||
emit('update:remark', value)
|
||
}
|
||
|
||
const { fileList, beforeRead, afterRead, deletePic } = useUploadValidate()
|
||
|
||
const setClassName = computed(() => (fileList.value['repairImage'].length <= 4 ? 'column-4' : ''))
|
||
|
||
watch(
|
||
fileList,
|
||
val => {
|
||
emit('update:imageList', unref(val))
|
||
},
|
||
{
|
||
deep: true
|
||
}
|
||
)
|
||
watch(
|
||
() => props.remark,
|
||
val => {
|
||
innerValue.value = val
|
||
}
|
||
)
|
||
watch(
|
||
() => props.imageList,
|
||
val => {
|
||
fileList.value = val
|
||
},
|
||
{ deep: true }
|
||
)
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.design-feedback {
|
||
padding: 32rpx 24rpx 20rpx;
|
||
background-color: $white-1;
|
||
border-radius: 16rpx;
|
||
textarea {
|
||
font-size: 28rpx;
|
||
min-height: 200rpx;
|
||
}
|
||
.picture-area {
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
</style>
|