上传记录添加译文

pages/facility/modules/uploadRecord.vue

@@ -1,108 +1,226 @@
 <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.content }}
+  <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>
+      </view>
+    </u-modal>
+  </view>
 </template>
 
 <script>
-let paging = {}
+let paging = {};
 export default {
-    name: "uploadRecord",
-    props: {
-        w_deviceid: String
-    },
-    data() {
-        return {
-            show: false,
-            uninitialized: true,
-            list: [],
-            "where": {
-                "begindate": "",
-                "enddate": ""
+  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);
+          });
+      });
     },
-    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) {
-            uni.showModal({
-                title: item.createdate,
-                content: item.content,
-                cancelText: '关闭',
-                confirmText: '复制',
-                confirmColor: '#2979ff',
-                success: (result) => {
-                    if (result.confirm) uni.setClipboardData({
-                        data: item.content,
-                        complete: (res) => {
-                            console.log("复制", res)
-                        },
-                    })
-                }
-            });
-
-        }
+      });
     },
-}
+    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;
+  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;
 
-    .title {
-        line-height: 21px;
-        font-size: 15px;
-        font-family: PingFang SC-Medium, PingFang SC;
-        font-weight: bold;
-        color: #333333;
-        margin-bottom: 10px;
+    .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;
     }
 
-    .row {
-        line-height: 17px;
-        font-size: 12px;
-        color: #666666;
-        margin-bottom: 5px;
+    .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;
+    }
+  }
+}
 
-/deep/.u-empty {
-    z-index: 1 !important;
+.modal-content {
+  width: 300px;
+  display: inline-block;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin-top: 20px;
 }
 </style>