源文件

jeepay-ui-uapp-agent/components/newComponents/JUpLoad/JUpLoad.vue

@@ -0,0 +1,105 @@
+<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>