106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<template>
|
|
<view class="upload-wrapper" :style="{ paddingLeft: pdLeft }">
|
|
<view
|
|
class="upload-main"
|
|
:style="{ padding: pd, borderColor: borderBg }"
|
|
:class="[borderNone != undefined ? 'borderNone' : '']"
|
|
>
|
|
<view class="upload-title" :style="{ color: textColor, fontSize: fontSize }"><slot name="title">{{ name }}</slot> </view>
|
|
<view class="upload-img">
|
|
<JeepayUpLoad
|
|
v-if="imgUrl == ''"
|
|
@uploadSuccess="uploadSuccess"
|
|
:imgUrl="value"
|
|
@clear="clearImg"
|
|
></JeepayUpLoad>
|
|
<image v-else :src="imgUrl" @tap="previewImage([imgUrl])" mode="aspectFill" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { watch, onBeforeUnmount, ref, onMounted } from "vue"
|
|
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad"
|
|
import { addRules, clearOneRule } from "@/hooks/rules"
|
|
import valid from "@/hooks/validate"
|
|
const props = defineProps({
|
|
value: {
|
|
type: String,
|
|
},
|
|
pd: {
|
|
type: String,
|
|
default: " 30rpx 30rpx 30rpx 0",
|
|
},
|
|
borderNone: {
|
|
type: String,
|
|
},
|
|
pdLeft: {
|
|
type: String,
|
|
default: "30rpx",
|
|
},
|
|
imgUrl: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
borderBg: {
|
|
type: String,
|
|
default: "#f2f2f2",
|
|
},
|
|
fontSize: { type: String },
|
|
textColor: {
|
|
type: String,
|
|
default: "#000",
|
|
},
|
|
name: { type: String },
|
|
rules: { default: null },
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (props.rules !== null) {
|
|
props.rules.Msg = "请上传" + props.name
|
|
addRules(props.rules)
|
|
}
|
|
})
|
|
const emits = defineEmits(["update:value"])
|
|
const uploadSuccess = (res) => {
|
|
emits("update:value", res.data)
|
|
}
|
|
const previewImage = (v) => {
|
|
if (!valid.httpOrHttps(v)) return false
|
|
uni.previewImage({
|
|
indicator: "number",
|
|
loop: true,
|
|
urls: v,
|
|
})
|
|
}
|
|
const clearImg = () => {
|
|
emits("update:value", "")
|
|
}
|
|
onBeforeUnmount(() => {
|
|
if (props.rules !== null) {
|
|
clearOneRule(props.rules)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.upload-wrapper {
|
|
padding-left: 30rpx;
|
|
font-size: 33rpx;
|
|
.upload-main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-top: 1rpx solid #f2f2f2;
|
|
image {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.borderNone {
|
|
border: none !important;
|
|
}
|
|
</style>
|