JiangNingUmale-h5/subEnterprise/WorkOrder/handle.vue

<template>
  <view class="app-container">
    <u-navbar
      leftText="返回"
      title="整改工单处理"
      :autoBack="true"
      :placeholder="true"
    />
    <view class="basic-data">
      <view class="basic-title">
        <image
          src="/static/images/grid-icon.png"
          class="title-icon"
          mode="aspectFill"
        ></image>
        <text class="title-text">基本信息</text>
      </view>
      <view class="basic-main view-global">
        <view class="item-cell">
          <view class="cell-lable">整改工单编号：</view>
          <view class="cell-value">202309120001</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">整改主体名称：</view>
          <view class="cell-value">南京市XX街道XX路66号XX店</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">整改截止时间：</view>
          <view class="cell-value">2023-09-12</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">检查人员：</view>
          <view class="cell-value">张三</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">发现隐患：</view>
          <view class="cell-value">XXXXXXX</view>
        </view>
        <view class="item-cell" style="display: block">
          <view class="cell-lable">隐患照片：</view>
          <view class="cell-value" style="margin-top: 20rpx">
            <view class="info-images">
              <view
                class="file-item"
                v-for="(item, index) in fileList"
                :key="index"
              >
                <image :src="item.url" mode="aspectFill"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="basic-data">
      <view class="basic-title">
        <image
          src="/static/images/grid-icon.png"
          class="title-icon"
          mode="aspectFill"
        ></image>
        <text class="title-text">整改完成照片</text>
      </view>
      <view class="basic-main upload-images view-global">
        <view class="upload-btn">
          <view class="upload-icon" @click="upload">
            <u-icon
              name="camera-fill"
              size="50rpx"
              color="rgb(211, 212, 214)"
            ></u-icon>
          </view>
          <text class="upload-text"
            >最多可上传5个图片，支持上传jpg.png等格式文件</text
          >
        </view>
        <view class="file-list">
          <view
            class="file-item"
            v-for="(item, index) in fileList"
            :key="index"
          >
            <view class="close-btn">
              <u-icon name="minus-circle-fill" color="#EB5B47"></u-icon>
            </view>

            <image :src="item.url" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="basic-data">
      <view class="basic-title">
        <image
          src="/static/images/grid-icon.png"
          class="title-icon"
          mode="aspectFill"
        ></image>
        <text class="title-text">备注</text>
      </view>
      <view class="basic-main view-global">
        <u--textarea
          v-model="value"
          placeholder="请输入内容"
          border="none"
        ></u--textarea>
      </view>
    </view>
    <view v-show="false">
      <uni-file-picker ref="files" />
    </view>
    <fixed-buttom title="提交"></fixed-buttom>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      fileList: [
        {
          url: "https://cdn.uviewui.com/uview/album/1.jpg",
        },
        {
          url: "https://cdn.uviewui.com/uview/album/1.jpg",
        },
        {
          url: "https://cdn.uviewui.com/uview/album/1.jpg",
        },
      ],
    };
  },
  methods: {
    upload() {
      this.$refs.files.choose();
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-title {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;

  .title-icon {
    height: 25rpx;
    width: 40rpx;
  }

  .title-text {
    margin-left: 25rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #0f1316;
  }
}

.basic-main {
  margin-bottom: 30rpx;
  border-radius: 16rpx;
  background: #fff;
  box-sizing: border-box;
  padding: 25rpx;

  .item-cell {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .cell-lable {
      width: 200rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #9da2ab;
    }

    .cell-value {
      flex: 1;
      font-size: 28rpx;
      font-weight: 400;
      color: #2e2f31;

      .info-images {
        display: flex;
        align-items: center;

        .file-item {
          width: calc((100% / 3) - 19rpx);
          height: 160rpx;
          margin-right: calc(19rpx + (19rpx / 3));
          position: relative;

          image {
            display: inline-block;
            height: 100%;
            width: 100%;
          }
        }

        & > .file-item:last-child {
          margin-right: 0;
        }
      }
    }
  }

  & > .item-cell:last-child {
    margin-bottom: 0;
  }
}

.upload-images {
  .upload-btn {
    display: flex;
    align-items: center;

    .upload-icon {
      height: 150rpx;
      width: 150rpx;
      background-color: #f4f5f7;
      border-radius: 4rpx;
      margin-right: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .upload-text {
      flex: 1;
      color: rgb(192, 196, 204);
    }
  }

  .file-list {
    display: flex;
    align-items: center;
    margin-top: 40rpx;

    .file-item {
      width: calc((100% / 5) - 20rpx);
      height: 115rpx;
      margin-right: calc(20rpx + (20rpx / 4));
      position: relative;

      image {
        display: inline-block;
        height: 100%;
        width: 100%;
      }

      .close-btn {
        position: absolute;
        right: -10rpx;
        top: -10rpx;
        z-index: 10;
      }
    }

    & > .file-item:last-child {
      margin-right: 0;
    }
  }
}
</style>