InspectionCleaning/pages/index/cleanDetails.vue

<template>
  <view class="content">
    <u-navbar title="保洁详情"></u-navbar>
    <view class="area-info">
      <view class="name">{{ dataInfo.name }}</view>
      <view class="position">所属计划：{{ dataInfo.planName }}</view>
    </view>
    <view class="area-details">
      <view class="title">区域详情</view>
      <view class="details">
        <view class="block">
          <view class="value"> {{ dataInfo.areaType }}</view>
          <view class="label">区域类型</view>
        </view>
        <view class="block">
          <view class="value">{{ dataInfo.userName }}</view>
          <view class="label">保洁人员</view>
        </view>
        <view class="block">
          <view class="value">{{ dataInfo.completedTime }}</view>
          <view class="label">清扫时间</view>
        </view>
        <view class="block">
          <view class="value">{{ dataInfo.note }}</view>
          <view class="label">备注</view>
        </view>
      </view>
      <view class="title">保洁区域图片</view>
      <view class="images">
        <image
          class="image"
          v-for="(v, i) in dataInfo.pictures"
          :key="i"
          :src="BASE_URL + '/uploads/' + v.path"
          @click="previewImage(i)"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
import BASE_URL from "@/api/env.js"; //引入接口共用地址
import { GetPlanInfoAre } from "@/api/apiList";
import { dateFormat } from "@/utils/utils.js";
export default {
  data() {
    return {
      id: "",

      params: {},

      dataInfo: {},

      BASE_URL,
    };
  },

  onLoad(options) {
    console.log("options", JSON.parse(decodeURIComponent(options.params)));
    this.params = JSON.parse(decodeURIComponent(options.params));
  },

  onShow() {
    this.getAreaInfo();
  },

  methods: {
    dateFormat,

    // 预览图片
    previewImage(index) {
      uni.previewImage({
        urls: this.dataInfo.pictures.map(
          (v) => BASE_URL + "/uploads/" + v.path
        ),
        current: index,
      });
    },

    async getAreaInfo() {
      const res = await GetPlanInfoAre({
        id: this.params.id,
      });

      if (res.succeed) {
        this.dataInfo = res.data;
        this.dataInfo.completedTime = dateFormat(
          new Date(this.dataInfo.completedTime),
          "YYYY/MM/DD HH:mm:ss"
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  background: linear-gradient(#fff 0%, #e0ebf9 20%);
  .title {
    line-height: 1;
    border-left: 10rpx solid #5a7ee9;
    padding-left: 16rpx;
    font-weight: bold;
    font-size: 36rpx;
    color: #000000;
  }
  .area-info {
    padding: 44rpx;
    margin-top: 30rpx;
    height: 290rpx;
    background: url("@/static/images/area-bg.png") no-repeat 100% 100%;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    .name {
      font-weight: bold;
      font-size: 56rpx;
      color: #211d2f;
    }
    .position {
      margin-top: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #717b94;
    }
  }
  .area-details {
    padding: 50rpx 32rpx;
    background: #ffffff;
    border-radius: 36rpx 36rpx 0 0;
    min-height: calc(100vh - 400rpx);
    .details {
      margin-top: 42rpx;
      margin-bottom: 70rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10rpx;
        width: 48.5%;
        height: 160rpx;
        background: #f1f7fe;
        border-radius: 18rpx;
      }
      .block:nth-child(n + 3) {
        margin-top: 14rpx;
      }

      .label {
        color: #5a6c88;
      }
    }
    .images {
      display: flex;
      flex-wrap: wrap; /* 允许换行 */
      justify-content: flex-start; /* 从左开始排列 */
      margin-top: 32rpx;
    }

    .image {
      /* 设置宽度，留出间隙 */
      width: calc((100% - 40rpx) / 3); /* 假设间隙为 20rpx */
      height: 210rpx; /* 或根据需要调整高度 */
      border-radius: 18rpx;
      background-color: #eee;
      overflow: hidden;
      margin-right: 20rpx; /* 右边间隙 */
      margin-bottom: 20rpx; /* 下边间隙 */
    }

    /* 清除每行最后一个元素的右边距 */
    .image:nth-child(3n) {
      margin-right: 0;
    }
  }
}
</style>