group_web_merchant/src/views/licenseManagement/businessLicense.vue

<template>
  <div class="card content-box">
    <div class="tip-text">如需更换请联系客服</div>
    <div class="license-container" v-if="licenseImage">
      <div class="license-display">
        <el-image :src="licenseImage" fit="contain" class="license-image" :preview-src-list="[licenseImage]">
          <template #error>
            <div class="empty-image-box">
              <el-icon class="empty-icon">
                <Picture />
              </el-icon>
            </div>
          </template>
        </el-image>
      </div>
    </div>
    <div v-else class="empty-contract">
      <el-empty description="暂无合同图片" :image-size="100" />
    </div>
  </div>
</template>

<script setup lang="ts" name="businessLicense">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Picture } from "@element-plus/icons-vue";
import { getBusinessLicense } from "@/api/modules/licenseManagement";
import { localGet } from "@/utils";

const licenseImage = ref<string>("");

const id = localGet("createdId");

onMounted(async () => {
  await initData();
});

const initData = async () => {
  const params = {
    id: id
  };
  const res: any = await getBusinessLicense(params);
  if (res.code === 200) {
    licenseImage.value = res.data[0].imgUrl;
  }
};
</script>

<style lang="scss" scoped>
.page-header {
  margin-bottom: 20px;
}
.store-title {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}
.divider {
  width: 100%;
  height: 1px;
  margin-bottom: 20px;
  background-color: var(--el-border-color-lighter);
}
.tip-text {
  margin-top: 20px;
  margin-bottom: 50px;
  font-size: 18px;
  color: var(--el-text-color-regular);
}
.license-container {
  padding: 20px;
  background-color: var(--el-bg-color-page);
  border-radius: 8px;
}
.license-display {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 700px;
  height: 500px;
}
.license-image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
}
.empty-image-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--el-fill-color-lighter);
  border-radius: 8px;
  .empty-icon {
    font-size: 64px;
    color: var(--el-text-color-placeholder);
  }
}
.empty-contract {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 570px;
  padding: 40px 20px;
}
</style>