t-admin/uni_modules/uni-cms/components/preview/preview.vue

<template>
  <view class="article-preview-box">
    <view class="title">文章预览</view>
    <!-- <view class="sub-title">预览功能由<a class="link" href="https://ext.dcloud.net.cn/plugin?id=11701" target="_blank">uni-cms-article</a>插件提供，文章发布后预览功能将失效</view> -->
    <view class="close" @click="() => $emit('close')">
      <uni-icons type="closeempty" size="20px" class="icon"></uni-icons>
    </view>
    <template v-if="loading">
      <view class="loading">正在加载...</view>
    </template>
    <template v-else>
      <uni-row class="row" :gutter="40">
        <uni-col :span="8">
          <view class="col-title">预览密钥</view>
          <view class="col-content">
            <uni-easyinput disabled :value="previewSecret"></uni-easyinput>
          </view>
        </uni-col>
        <uni-col :span="16">
          <view class="col-title">预览页面地址</view>
          <view class="col-content">
            <uni-easyinput disabled :value="previewPagePath"></uni-easyinput>
            <view class="description"></view>
          </view>
        </uni-col>
      </uni-row>
      <uni-row class="row" :gutter="40">
        <uni-col :span="8">
          <view class="col-title">小程序/APP预览</view>
          <view class="col-content">
            <image :src="qrcode" mode="aspectFill" class="qrcode-img"></image>
            <view class="description">在搜索栏 - 扫一扫图标扫码查看</view>
          </view>
        </uni-col>
        <uni-col :span="16">
          <view class="col-title">网页预览</view>
          <view class="col-content">
            <uni-easyinput v-model="feDomain" placeholder="请输入uni-cms-article部署地址"></uni-easyinput>
            <button type="primary" size="mini" style="margin-top: 10px;" @click="goPreviewPage">预览</button>
          </view>
        </uni-col>
      </uni-row>
    </template>
  </view>
</template>

<script>
import loadScript from "@/uni_modules/uni-cms/common/load-script";

const db = uniCloud.database()


function randomString(e) {
  e = e || 32;
  let t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678!@$*",
      a = t.length,
      n = "";
  for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
  return n
}

export default {
  name: "preview",
  props: {
    id: String
  },
  data () {
    return {
      previewPagePath: "uni_modules/uni-cms-article/pages/detail/preview",
      previewSecret: "",
      qrcode: "",
      feDomain: "",
      loading: true
    }
  },
  watch: {
    previewSecret () {
      this.createQrcode()
    }
  },
  mounted () {
    if (!this.id) {
      return uni.showModal({
        content: '文章ID不存在',
        showCancel: false
      })
    }

    this.initQrCode()
  },
  methods: {
    initQrCode () {
      loadScript('QRCode', 'https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js', async () => {
        await this.loadArticlePreviewSecret()
        this.loading = false
      })
    },
    async loadArticlePreviewSecret () {
      const {result} = await db.collection('uni-cms-articles').doc(this.id).field('is_admin,preview_secret,preview_expired').get({
        getOne: true
      })

      if (!result || !result.data) return

      let {preview_secret: previewSecret, preview_expired: previewExpired} = result.data

      if (!previewSecret || previewExpired < Date.now()) {
        previewSecret = randomString(16)
        await db.collection('uni-cms-articles').doc(this.id).update({
          preview_secret: previewSecret,
          preview_expired: Date.now() + (2 * 60 * 60 * 1000)
        })
      }

      this.previewSecret = previewSecret
    },
    createQrcode () {
      const previewQrcode = `internallink://${this.previewPagePath}?id=${this.id}&secret=${this.previewSecret}`
      window.QRCode.toDataURL(previewQrcode, {
        width: 180,
        margin: 2
      }).then(url => {
        this.qrcode = url
      })
    },
    goPreviewPage () {
      if (!this.feDomain) {
        return uni.showToast({
          icon: "none",
          title: "请输入前端网页托管地址"
        })
      }

      window.open(`${this.feDomain.replace(/\/$/, '')}/${this.previewPagePath}?id=${this.id}&secret=${this.previewSecret}`, '_blank')
    }
  }
}
</script>

<style scoped lang="scss">
.article-preview-box {
  color: #333;
  background: #FCFCFC;
  width: 570px;
  min-height: 300px;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  .title {
    font-size: 22px;
  }
  .sub-title {
    font-size: 12px;
    color: #bbb;
    margin-top: 10px;
  }
  .row {
    border-bottom: #f2f2f2 solid 1px;
    margin-top: 20px;
    padding-bottom: 20px;
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .col-title {
      font-size: 15px;
    }
    .col-content {
      margin-top: 8px;
      .description {
        font-size: 12px;
        color: #bbb;
        margin-top: 10px;
      }
    }
  }
}
.close {
  width: 30px;
  height: 30px;
  background: #f1f1f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  cursor: pointer;
}
.qrcode-img {
  width: 180px;
  height: 180px;
}
.loading {
  margin-top: 50px;
  font-size: 15px;
  text-align: center;
}
.link {
  color: #333;
}
</style>