|
@@ -1,16 +1,28 @@
|
|
<template>
|
|
<template>
|
|
<previewWrapper :pageId="pageId" @closePreview="closePreview" v-loading="loading">
|
|
<previewWrapper :pageId="pageId" @closePreview="closePreview" v-loading="loading">
|
|
- <p class="page-title paddingL30">页面预览</p>
|
|
|
|
|
|
+ <p class="page-title paddingL30">
|
|
|
|
+ 页面预览
|
|
|
|
+ <el-button style="margin-left: 16px" icon="el-icon-document-copy" size="small" type="primary" round @click="doCopyAll">一键复制所有平台链接</el-button>
|
|
|
|
+ </p>
|
|
<div class="preview-info-wrapper" v-if="!loading">
|
|
<div class="preview-info-wrapper" v-if="!loading">
|
|
|
|
+
|
|
|
|
+
|
|
<el-form label-width="90px" label-position="left">
|
|
<el-form label-width="90px" label-position="left">
|
|
- <el-form-item label="页面二维码:">
|
|
|
|
- <QrcodeVue :value="pageLink" :size="120" level="H"></QrcodeVue>
|
|
|
|
- <p v-if="!pageData.isPublish" class="gray fontsize-12 lineheight-18">注意:为防范钓鱼安全风险,预览内容仅供作者调试使用,有效期 50 分钟,如需供他人预览,请使用发布功能。</p>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="页面链接:">
|
|
|
|
- <div><el-button type="primary" @click="doCopy">复制链接</el-button></div>
|
|
|
|
- <a class="share-wx-config-wrapper" target="_blank" :href="pageLink">{{pageLink}}</a>
|
|
|
|
|
|
+
|
|
|
|
+ <el-form-item v-for="(item, index) in pageLinkMap" :key="index" :label="item.label + ':'">
|
|
|
|
+ <div class="preview-url-item">
|
|
|
|
+ <span class="preview-url-desc">{{ item.desc }}</span>
|
|
|
|
+ <br>
|
|
|
|
+ <div class="preview-url-item--content">
|
|
|
|
+ <div>
|
|
|
|
+ <QrcodeVue :value="item.domain" :size="120" level="H"></QrcodeVue>
|
|
|
|
+ <a class="share-wx-config-wrapper" target="_blank" :href="item.domain">{{item.domain}}</a>
|
|
|
|
+ </div>
|
|
|
|
+ <el-button icon="el-icon-document-copy" type="primary" size="mini" round @click="doCopy(item.domain)">复制链接</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+
|
|
<!--页面效果-->
|
|
<!--页面效果-->
|
|
<el-form-item label="页面状态:">
|
|
<el-form-item label="页面状态:">
|
|
<span :class="[pageData.isPublish ? 'primary' : 'orange']">{{pageData.isPublish ? '已发布' : '未发布'}}</span>
|
|
<span :class="[pageData.isPublish ? 'primary' : 'orange']">{{pageData.isPublish ? '已发布' : '未发布'}}</span>
|
|
@@ -30,11 +42,11 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="clearfix paddingT30 text-center">
|
|
|
|
- <a :href="pageLink" target="_blank">
|
|
|
|
- <el-button type="primary">新标签打开链接</el-button>
|
|
|
|
- </a>
|
|
|
|
- </div>
|
|
|
|
|
|
+<!-- <div class="clearfix paddingT30 text-center">-->
|
|
|
|
+<!-- <a :href="pageLink" target="_blank">-->
|
|
|
|
+<!-- <el-button type="primary">新标签打开链接</el-button>-->
|
|
|
|
+<!-- </a>-->
|
|
|
|
+<!-- </div>-->
|
|
</div>
|
|
</div>
|
|
</previewWrapper>
|
|
</previewWrapper>
|
|
</template>
|
|
</template>
|
|
@@ -61,8 +73,34 @@
|
|
this.getData()
|
|
this.getData()
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
- pageLink(){
|
|
|
|
- return this.$config.baseURL + (this.pageData.isPublish ? '/view/': '/in-preview/') + this.pageId
|
|
|
|
|
|
+ pageLinkMap () {
|
|
|
|
+ return [
|
|
|
|
+ {
|
|
|
|
+ label: '主域名',
|
|
|
|
+ desc: '用于PC端页面使用',
|
|
|
|
+ domain: 'https://www.jianyu360.cn/h5-pages/' + this.pageId
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '微信域名',
|
|
|
|
+ desc: '用于手机微信端页面',
|
|
|
|
+ domain: 'https://wx.jianyu360.cn/h5-pages/' + this.pageId
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: 'H5',
|
|
|
|
+ desc: '用于手机H5端页面',
|
|
|
|
+ domain: 'https://h5.jianyu360.cn/jyapp/view/' + this.pageId
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: 'APP端',
|
|
|
|
+ desc: '用于APP端页面(常用与广告位无需配置域名)',
|
|
|
|
+ domain: '/jyapp/view/' + this.pageId
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '开发测试',
|
|
|
|
+ desc: '用于开发测试环节预览使用的地址',
|
|
|
|
+ domain: this.$config.baseURL + (this.pageData.isPublish ? '/view/': '/in-preview/') + this.pageId
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
},
|
|
},
|
|
shareData(){
|
|
shareData(){
|
|
if(!this.pageData.shareConfig){
|
|
if(!this.pageData.shareConfig){
|
|
@@ -99,8 +137,14 @@
|
|
this.loading = false;
|
|
this.loading = false;
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- doCopy: function () {
|
|
|
|
- this.$copyText(this.pageLink).then(() => {
|
|
|
|
|
|
+ doCopyAll: function () {
|
|
|
|
+ const content = this.pageLinkMap.map(item => `${item.label}: ${item.domain}`).join('\n\n')
|
|
|
|
+ this.$copyText(content).then(() => {
|
|
|
|
+ this.$message.success('已复制所有平台链接')
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ doCopy: function (url) {
|
|
|
|
+ this.$copyText(url).then(() => {
|
|
this.$message.success('已复制')
|
|
this.$message.success('已复制')
|
|
})
|
|
})
|
|
}
|
|
}
|
|
@@ -126,6 +170,7 @@
|
|
.page-title-des {
|
|
.page-title-des {
|
|
padding-left: 20px;
|
|
padding-left: 20px;
|
|
flex: 1;
|
|
flex: 1;
|
|
|
|
+ overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.info-form-wrapper {
|
|
.info-form-wrapper {
|
|
@@ -144,8 +189,25 @@
|
|
}
|
|
}
|
|
.share-wx-config-wrapper {
|
|
.share-wx-config-wrapper {
|
|
margin-top: 14px;
|
|
margin-top: 14px;
|
|
|
|
+ margin-right: 12px;
|
|
display: block;
|
|
display: block;
|
|
- padding: 12px;
|
|
|
|
|
|
+ padding: 10px 8px;
|
|
background-color: #f0f3f4;
|
|
background-color: #f0f3f4;
|
|
}
|
|
}
|
|
|
|
+ .preview-url-list {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .preview-url-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .preview-url-label {}
|
|
|
|
+ .preview-url-desc {}
|
|
|
|
+ .preview-url-item--content {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|