android-cloud-H5/pages/rtcEngine/components/CloudPhoneClipboard.vue

<template>
  <van-dialog v-model="pasteVersionVisible" :show-confirm-button="false" class="paste-version-modal" v-cloak>
    <template v-if="pasteVersionList.length">
      <div class="tc paste-version-title pre">
        <span class="pab">粘贴版</span>
        <span class="pab paste-version-clear" @click="deletePasteVersion()"> 清空 </span>
      </div>
      <div class="paste-version-list">
          <div v-for="(item,index) in pasteVersionList" :key="index"
              :class="[{'mb-1': index!==pasteVersionList.length - 1}]">
            <van-swipe-cell>
              <div :class="`copy-value-${index}, ellipsis`" @click="copyPasteVersiontext(item.content)">
                {{item.content}}
              </div>
              <template #right>
                <div class="paste-version-delete" @click="deletePasteVersion(item.id)">删除</div>
              </template>
            </van-swipe-cell>
          </div>
      </div>
    </template>
    <template v-else>
      <div class="paste-version-empty flex-center-all h100">
        <div>
          <img :src="jianqieban" alt="">
          <div class="tc">剪贴板为空</div>
        </div>
      </div>
    </template>
    <img class="pab paste-version-close" :src="closePath" alt="" @click="pasteVersionVisible = false" />
</van-dialog>
</template>

<script>
import Qs from 'qs';

export default {
  name: 'CloudPhoneClipboard',
  data() {
    return {
      jianqieban: '../rtcEngine/img/jianqieban_pic@2x.png',
      closePath: '../rtcEngine/img/guanbi_icon@2x.png',

      pasteVersionVisible: false, // 云机粘贴板弹窗
      pasteVersionList: [], // 粘贴板列表云机的粘贴板内容
    }
  },
  methods: {
    // 粘贴版相关接口
    shearContent({ type, params, queryStr }) {
      let url = '/public/v5/shear/content'
      if (queryStr) url += queryStr
      return this.$axios[`$${type}`](url, params);
    },
    // 内容植入云机的粘贴板
    init(text) {
      // 判断是否有内容, 有内容先把内容植入云机的粘贴板, 否则直接读取云机的粘贴板
      text ? this.openPasteboard(text) : this.getPasteVersion();
    },
    // 打开粘贴板
    async openPasteboard(content, callBack = () => {}) {
      try {
        await this.shearContent({ type: 'post', params: { content } });
      } catch (error) {
        console.log('error', error);
      } finally {
        callBack();
        // 获取剪切板
        this.getPasteVersion(() => {
          this.pasteVersionVisible = true;
        })
      }
    },
    // 获取云机粘贴板数据
    async getPasteVersion(callBack = () => {}) {
      try {
        const res = await this.shearContent({ type: 'get' });
        this.pasteVersionList = res.data;
        callBack(true)
      } catch (error) {
        callBack(false)
      }
    },
    // 清空全部 或 清除某条
    deletePasteVersion(ids){
      try {
        if (!ids) {
          this.$dialog.alert({
            title: '提示',
            message: '确定清空剪贴板？',
            confirmButtonText: '确定',
            confirmButtonColor: '#3cc51f',
            showCancelButton: true,
            beforeClose: (action, done) => {
              if (action === 'cancel') done()
              if (action === 'confirm') {
                fun.bind(this)(done)
              }
            }
          })
          return
        }

        fun.bind(this)()
        function fun(callBack = () => {}) {
          this.shearContent({
            type: 'delete', 
            queryStr: Qs.stringify(
              { ids: ids ? [ids] : this.pasteVersionList.map((v) => v.id) },
              { arrayFormat: 'repeat', addQueryPrefix: true },
            )
          }).then(res => {
            if (res.status === 0) {
              // 删除成功后重新获取云机粘贴板数据
              this.getPasteVersion()
              callBack(true)
            } else {
              callBack(false)
              this.$toast(res.msg)
            }
          }).catch(() => {
            callBack(false)
          })
        }
      } catch (error) {
        console.log('error', error);
      }
    },
    // 复制粘贴某条数据
    async copyPasteVersiontext(text) {
      try {
        await this.$native.clipboard.writeText(text);
        this.$toast('复制成功')
      }catch (error) {
        console.log('error', error);
        this.$toast('复制失败')
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.pre {
  position: relative;
}
.pab {
  position: absolute;
}
.tc {
  text-align: center;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.paste-version-modal {
  background-color: transparent;
  overflow: visible;

  ::v-deep .van-dialog__content {
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    height: 270px;
    padding-bottom: 28px;
    border-radius: 16px;

    .paste-version-title {
      height: 48px;
      line-height: 48px;
      font-size: 16px;
      margin: 0 18px;

      &::-webkit-scrollbar {
        display: none;
      }

      & > span:first-child {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
      }

      .paste-version-clear {
        position: absolute;
        top: 52%;
        transform: translateY(-52%);
        right: 0;
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
        font-size: 12px;
        background: #3666f2;
        border-radius: 3px;
        color: #ffffff;
      }
    }

    .paste-version-list {
      flex: 1;
      overflow-y: auto;

      .van-swipe-cell {
        margin: 0 18px;
        box-sizing: border-box;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 13px;
        color: #666;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;

        .van-swipe-cell__wrapper {
          width: 100%;
          height: 100%;
        }

        .ellipsis {
          width: 100%;
          height: 100%;
          padding: 0 10px;
          box-sizing: border-box;
        }
      }

      .paste-version-delete {
        width: 40px;
        height: 100%;
        border: none;
        background: #f04646;
        color: #fff;
        font-size: 12px;
        text-align: center;
        border-radius: 0 5px 5px 0;
      }
    }

    .paste-version-close {
      width: 38px;
      height: 38px;
      bottom: -20%;
      left: 50%;
      transform: translateX(-50%);
    }

    .paste-version-empty img {
      width: 128px;
      height: 160px;
    }

    .paste-version-empty > div > div {
      margin-top: 9px;
      font-size: 15px;
      color: #fff;
    }
  }

  .flex-center-all{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>