aiot-app/pages/tour_tally/check/components/CheckCard.vue

<template>
  <view class="kd-check-card">
    <view class="title">
      <checkbox
        :value="item.id"
        color="#fff"
        @click="checkboxChange(item)"
        :checked="item.checked"
      />
      <text class="label">{{ index + 1 }}</text>
      <text>{{ item.name }}</text>
    </view>
    <view class="card-cell">
      <text class="label">内容</text>
      <text class="cell-content">{{ item.content }}</text>
    </view>
    <view class="card-cell">
      <text class="label">标准</text>
      <text class="cell-content">{{ item.norm }}</text>
    </view>
    <!-- <view class="card-cell">
			<text class="label">工具</text>
			<view class="cell-content" v-if="item.operationGuide && item.operationGuide.toolList.length > 0">
				<view v-for="(item, index) in item.operationGuide.toolList">{{ index + 1 }}、{{ item.categoryLevelName }}</view>
			</view>
			<view class="cell-content" v-else>无</view>
		</view>
		<view class="card-cell">
			<text class="label">指导</text>
			<view class="cell-content" v-if="item.operationGuide && item.operationGuide.procedureList.length > 0">
				<view v-for="(item, index) in item.operationGuide.procedureList">{{ index + 1 }}、{{ item.content }}</view>
			</view>
			<view class="cell-content" v-else>无</view>
		</view> -->
    <view class="card-cell">
      <text class="label">状态</text>
      <text class="cell-content">
        <view v-if="type == 'view'">
          <div v-if="item.status == -1" style="color: red">异常</div>
          <div v-else style="color: green">正常</div>
        </view>
        <view v-else>
          <uni-data-picker
            @change="statusChange"
            style="width: 100%"
            v-model="item.status"
            placeholder="请选择"
            :localdata="statusList"
            :clear-icon="false"
          >
          </uni-data-picker>
        </view>
      </text>
    </view>
    <view class="card-cell">
      <text class="label">结果</text>
      <view class="cell-content">
        <textarea
          v-if="type !== 'view'"
          placeholder="请输入"
          v-model="item.result"
        />
        <view class="result-text" v-else>{{ item.result }}</view>
        <view class="radio-wrapper">
          <!-- <div
						v-for="(it, ind) in statusList"
						:key="ind"
						v-if="type !== 'view'"
						class="wrapper-box"
						@click="changeStatus(item, it)"
						:style="item.status == it.status && item.status == -1 ? 'color:red;border: 1rpx solid red' : item.status == it.status && item.status == 0 ? 'color:green;border: 1rpx solid green' : ''">
						{{ it.label }}
					</div> -->
          <!-- <u-radio-group
            v-model="item.executeStatus"
            placement="row"
            v-if="type !== 'view'"
            :size="28"
          >
            <u-radio
              :customStyle="{ marginRight: '20px' }"
              :labelSize="30"
              label="正常"
              :name="1"
            >
            </u-radio>
            <u-radio :customStyle="{}" :labelSize="30" label="异常" :name="0">
            </u-radio>
          </u-radio-group> -->
          <!-- <view
            :class="item.executeStatus === 0 ? 'text-danger' : ''"
            v-else
            style="min-height: 1em"
          >
            {{ ['异常', '正常'][item.executeStatus] }}
          </view> -->
        </view>
      </view>
    </view>
    <!-- 新增拍照 *** -->
    <view class="card-cell">
      <text class="label">
        <span class="mark"></span>
      </text>
      <view class="photo_info">
        <view class="btn_box" v-if="type != 'view'">
          <text class="photo_btn" @click="chooseImage">拍照</text>
        </view>
        <view class="photo_list">
          <PreviewPhoto
            :type="type"
            @imagedelete="imagedelete"
            :imageList="photoList"
          />
        </view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import PreviewPhoto from "@/pages/maintenance/check/components/PreviewPhoto.vue";
export default {
  components: {
    PreviewPhoto,
  },
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
    index: Number,
    type: {
      type: String,
      default: "edit",
    },
  },
  data() {
    return {
      statusList: [
        {
          text: "正常",
          value: 1,
        },
        {
          text: "异常",
          value: -1,
        },
      ],
    };
  },
  // *** 新增
  computed: {
    photoList() {
      if (!this.item.photoList) return [];
      return this.item.photoList;
    },
  },
  methods: {
    checkboxChange(item) {
      item.checked = !item.checked;
    },
    // inputChange(obj, item) {
    // 	if (obj.target.value.length > 0 && obj.target.value != '正常') {
    // 		item.status = -1
    // 	} else {
    // 		item.status = 1
    // 	}
    // },
    statusChange() {
      if (this.item.status == 1) {
        this.item.result = "正常";
      } else {
        this.item.result = "异常";
      }
    },

    // *** 新增拍照功能
    chooseImage() {
      const _this = this;
      if (_this.photoList.length >= 9) {
        _this.$refs.uToast.show({
          type: "warning",
          message: "最多上传9张照片",
        });
        return;
      }
      uni.chooseImage({
        count: 9, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera"], //从相册选择
        success: function (res) {
          uni.showLoading({
            title: "加载中",
          });

          _this.uploadFile(res.tempFilePaths).then((res) => {
            res.forEach((item) => {
              let fileNames = item.storePath.split("/");
              let url =
                _this.apiUrl +
                "/main/file/getFile?objectName=" +
                item.storePath +
                "&fullfilename=" +
                fileNames[fileNames.length - 1];
              console.log(_this.item, "url ---");
              if (!_this.item.photoList || _this.item.photoList?.length == 0) {
                _this.$set(_this.item, "photoList", [url]);
              } else {
                // 不能存储超过 9 张
                if (_this.item.photoList.length < 9) {
                  _this.item.photoList.push(url);
                }
              }
              // _this.imgs.push(url)
            });
            uni.hideLoading();
          });
        },
      });
    },
    uploadFile(list) {
      let PromiseAll = [];
      const apiUrl = this.apiUrl;
      const token = uni.getStorageSync("token"); //取存本地的token
      list.forEach((item) => {
        PromiseAll.push(
          new Promise((resolve, reject) => {
            uni.uploadFile({
              url: apiUrl + "/main/file/upload",
              filePath: item,
              name: "multiPartFile",
              header: {
                authorization: token,
              },
              success: (uploadFileRes) => {
                let data = JSON.parse(uploadFileRes.data);
                resolve(data.data);
              },
            });
          }),
        );
      });
      return Promise.all(PromiseAll);
    },
    // 图片删除
    imagedelete(index) {
      this.item.photoList.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
$border-color: #f2f2f2;

.kd-check-card {
  font-size: 28rpx;
  border: 1rpx solid $border-color;

  .label {
    display: inline-block;
    width: 80rpx;
    text-align: center;
    border-right: 1px solid $border-color;
    justify-content: center;
  }

  .mark {
    width: 80rpx;
    height: 4rpx;
    display: inline-block;
  }

  .title {
    line-height: 72rpx;
    font-weight: bold;
    background-color: #f2f2f2;
  }

  .card-cell {
    min-height: 72rpx;
    display: flex;
    align-items: stretch;
    border: 1px solid $border-color;

    text {
      display: flex;
      align-items: center;
    }
  }

  .cell-content {
    flex: 1;

    /deep/span {
      width: 100%;
    }

    .content-status {
      width: 100%;
      height: 50rpx;
      line-height: 50rpx;
      text-indent: 10rpx;
      border-bottom: 1rpx solid #f2f2f2;
    }
  }

  .radio-wrapper {
    padding: 10rpx 20rpx;
    border-bottom: 1px solid $border-color;
    margin-left: -8rpx;
  }

  /deep/uni-textarea {
    width: 100%;
    box-sizing: border-box;
  }

  .result-text {
    min-height: 100rpx;
    padding: 10rpx;
  }

  .cell-content {
    padding-left: 8rpx;
  }

  .radio-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .wrapper-box {
    width: 45%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border: 1rpx solid #000;
    color: #000;
    border-radius: 15rpx;
  }
}

.photo_info {
  width: 100%;
  padding: 6px 12rpx;

  .btn_box {
    width: 100%;
  }

  .photo_btn {
    background-color: #157a2c;
    width: 140rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 24rpx;
    color: #fff;
    text-align: center;
    border-radius: 8rpx;
    margin-bottom: 12rpx;
    display: inline-block !important;
  }
}
</style>