Explorar o código

feat: 支持营销使用常用域名

zhangyuhan hai 2 semanas
pai
achega
4daeb4e7f5
Modificáronse 2 ficheiros con 116 adicións e 24 borrados
  1. 36 6
      client/components/thumbnail-panel.vue
  2. 80 18
      client/pages/home/components/preview.vue

+ 36 - 6
client/components/thumbnail-panel.vue

@@ -88,9 +88,35 @@
 			[DropdownItem.name]: DropdownItem
     },
     computed: {
-      pageLink(){ //页面链接
-        return this.$config.baseURL + '/view/' + this.pageData._id
-      }
+      pageLinkMap () {
+        return [
+          {
+            label: '主域名',
+            desc: '用于PC端页面使用',
+            domain: 'https://www.jianyu360.cn/h5-pages/' + this.pageData._id
+          },
+          {
+            label: '微信域名',
+            desc: '用于手机微信端页面',
+            domain: 'https://wx.jianyu360.cn/h5-pages/' + this.pageData._id
+          },
+          {
+            label: 'H5',
+            desc: '用于手机H5端页面',
+            domain: 'https://h5.jianyu360.cn/jyapp/view/' + this.pageData._id
+          },
+          {
+            label: 'APP端',
+            desc: '用于APP端页面(常用与广告位无需配置域名)',
+            domain: '/jyapp/view/' + this.pageData._id
+          },
+          {
+            label: '开发测试',
+            desc: '用于开发测试环节预览使用的地址',
+            domain: this.$config.baseURL + '/view/' + this.pageData._id
+          }
+        ]
+      },
     },
 		data() {
 			return {
@@ -231,10 +257,14 @@
 			},
 			// 复制链接
 			copyUrl() {
-          this.$copyText(this.pageLink).then(() => {
-            this.$message.success('已复制')
-          })
+        this.doCopyAll()
 			},
+      doCopyAll: function () {
+        const content = this.pageLinkMap.map(item => `${item.label}: ${item.domain}`).join('\n\n')
+        this.$copyText(content).then(() => {
+          this.$message.success('已复制所有平台链接')
+        })
+      },
 			// 设为我的模板
 			setTemplate() {
 				this.loading = true;

+ 80 - 18
client/pages/home/components/preview.vue

@@ -1,16 +1,28 @@
 <template>
   <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">
+
+
       <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 label="页面状态:">
           <span :class="[pageData.isPublish ? 'primary' : 'orange']">{{pageData.isPublish ? '已发布' : '未发布'}}</span>
@@ -30,11 +42,11 @@
           </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>
   </previewWrapper>
 </template>
@@ -61,8 +73,34 @@
 			this.getData()
     },
     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(){
 				if(!this.pageData.shareConfig){
@@ -99,8 +137,14 @@
 					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('已复制')
 				})
 			}
@@ -126,6 +170,7 @@
     .page-title-des {
       padding-left: 20px;
       flex: 1;
+      overflow: hidden;
     }
   }
   .info-form-wrapper {
@@ -144,8 +189,25 @@
   }
   .share-wx-config-wrapper {
     margin-top: 14px;
+    margin-right: 12px;
     display: block;
-    padding: 12px;
+    padding: 10px 8px;
     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>