freight-web/src/pagesScenePhoto/index.vue

<template>
  <view class="layout">
    <view class="name">现场照片</view>
    <up-row customStyle="flex-wrap: wrap">
      <up-col span="6" v-for="(item, index) in list" :key="index">
        <view
          class="grid-item"
          :style="{
            marginLeft: index % 2 === 1 ? '10rpx' : '',
            marginRight: index % 2 === 0 ? '10rpx' : '',
            marginBottom: '10rpx',
          }"
        >
          <view class="time">{{ item.createTime }}</view>
          <text class="tip">{{ getType(item.imagesType) }}过磅</text>
          <image :src="item.url" :mode="'widthFix'" />
        </view>
      </up-col>
    </up-row>
    <view v-if="list.length === 0" style="justify-content: center">
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { PictureApi } from "@/services/index";
import { ImagesType } from "@/utils/enum";
let list: any = ref([]);
const getType = (v: number) => {
  if (v === ImagesType.Tare) {
    return "皮重";
  } else if (v === ImagesType.GROSSWEIGHT) {
    return "毛重";
  } else {
    return "其他";
  }
};
onLoad((option: any) => {
  // option.id
  PictureApi.getAnnex({
    businessId: option.id,
    orderType: parseInt(option.orderType),
    imagesType: option.imagesType,
  }).then((res) => {
    if (res.code === 200) {
      list.value = res.data;
    }
  });
});
</script>
<style lang="scss" scoped>
.layout {
  margin: 22.44rpx 26.54rpx;
  padding: 33rpx 18rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
  border-radius: 13rpx;
  font-family: Source Han Sans CN;
  .name {
    font-weight: 400;
    font-size: 30rpx;
    color: #000000;
    margin-bottom: 30rpx;
  }
  .grid-item {
    position: relative;
    image {
      width: 100% !important;
    }
    .time {
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 1);
      mix-blend-mode: difference;
      position: absolute;
      bottom: 30rpx;
      padding: 0rpx 20rpx;
    }
    .tip {
      background: rgba(0, 0, 0, 0.63);
      box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.09);
      border-radius: 0rpx 40rpx 40rpx 0rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
      padding: 0rpx 20rpx;
      position: absolute;
      top: 30rpx;
      left: 9rpx;
    }
  }
}
</style>
@/types/status