water_affairs/pages/facility/modules/uploadRecord.vue

<template>
  <view v-show="show">
    <view
      class="item"
      @click="openModel(item)"
      hover-class="navigator-hover"
      v-for="item in list"
      :key="item.rowindex"
    >
      <view class="title">{{ item.createdate || " --" }}</view>
      <view class="row u-line-3">
        {{ item.analysis || item.content || "--" }}
      </view>
    </view>

    <u-modal
      :show="showModal"
      confirmText="复制"
      cancelText="关闭"
      showCancelButton
      @cancel="
        () => {
          this.showModal = false;
          this.showItem = {};
        }
      "
      @confirm="copyShowItem()"
    >
      <view class="slot-content">
        <view>
          <view class="modal-header">
            <view class="label">{{ showItem.createdate }}</view>
            <view class="sliding-block">
              <view
                class="but"
                :class="showMode == '译文' ? 'action' : ''"
                style="left: 0"
                hover-class="navigator-hover"
                @click="showMode = '译文'"
                >译文</view
              >
              <view
                class="but"
                hover-class="navigator-hover"
                style="right: 0"
                :class="showMode == '原文' ? 'action' : ''"
                @click="showMode = '原文'"
                >原文</view
              >
              <view
                class="sliding"
                :style="{
                  transform: `translateX(${showMode == '译文' ? 0 : '34px'})`,
                }"
              />
            </view>
          </view>
          <view class="modal-content">
            {{
              (showMode == "译文" ? showItem.analysis : showItem.content) ||
              "--"
            }}
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
let paging = {};
export default {
  name: "uploadRecord",
  props: {
    w_deviceid: String,
  },
  data() {
    return {
      show: false,
      showModal: false,
      showItem: {},
      uninitialized: true,
      showMode: "译文",
      list: [],
      where: {
        begindate: "",
        enddate: "",
      },
    };
  },
  methods: {
    getList(init = false) {
      if (init)
        paging = {
          pageNumber: 1,
          pageTotal: 1,
        };
      return new Promise((resolve) => {
        if (paging.pageNumber > paging.pageTotal) return resolve();
        this.$Http
          .basic({
            id: 20230701132202,
            content: {
              type: 1,
              w_deviceid: this.w_deviceid,
              ...paging,
              where: this.where,
            },
          })
          .then((res) => {
            console.log("上传记录", res);
            resolve(!this.cutoff(res.msg));
            if (this.cutoff(res.msg)) return;
            paging.pageNumber = res.pageNumber + 1;
            paging.pageTotal = res.pageTotal;
            this.list =
              res.pageNumber == 1 ? res.data : this.list.concat(res.data);
          });
      });
    },
    copyShowItem() {
      let that = this;
      uni.setClipboardData({
        data:
          this.showMode == "译文"
            ? this.showItem.analysis
            : this.showItem.content,
        complete: (res) => {
          console.log("复制", res);
          that.showModal = false;
          that.showItem = {};
        },
      });
    },
    openModel(item) {
      this.showModal = true;
      this.showMode = "译文";
      this.showItem = item;
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  width: 355px;
  margin: 0 auto 10px;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;

  .title {
    line-height: 21px;
    font-size: 15px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10px;
  }

  .row {
    line-height: 17px;
    font-size: 12px;
    color: #666666;
    margin-bottom: 5px;
  }
}

/deep/.u-empty {
  z-index: 1 !important;
}
.modal-header {
  display: flex;
  justify-content: space-around;
  .label {
    font-weight: 700;
  }

  .sliding-block {
    position: relative;
    flex-shrink: 0;
    width: 74px;
    height: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
    background: #f5f6fa;

    .but {
      position: absolute;
      font-size: 10px;
      width: 40px;
      text-align: center;
      line-height: 21px;
      z-index: 2;
      color: #bbbbbb;
      border-radius: 12px;
      transition: color 0.3s ease;
    }

    .action {
      color: #ffffff !important;
      z-index: 3 !important;
    }

    .sliding {
      position: absolute;
      width: 40px;
      height: 20px;
      background: #3874f6;
      border-radius: 12px;
      z-index: 1;
      transition: transform 0.3s ease;
    }
  }
}

.modal-content {
  width: 300px;
  display: inline-block;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-top: 20px;
}
</style>