info
This commit is contained in:
c
@@ -0,0 +1,204 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user