h5-editor/client/pages/home/components/preview.vue

<template>
  <previewWrapper :pageId="pageId" @closePreview="closePreview" v-loading="loading">
    <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 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>
        </el-form-item>
      </el-form>

      <div class="page-info">
        <div class="page-cover">
          <img :src="shareData.coverImage || defaultCoverImage" alt="">
        </div>
        <div class="page-title-des paddingT10">
          <div class="info-form-wrapper">
            {{shareData.title}}
          </div>
          <div class="info-form-wrapper ellipsis">
            {{shareData.description}}
          </div>
        </div>
      </div>
<!--      <div class="clearfix paddingT30 text-center">-->
<!--        <a :href="pageLink" target="_blank">-->
<!--          <el-button type="primary">新标签打开链接</el-button>-->
<!--        </a>-->
<!--      </div>-->
    </div>
  </previewWrapper>
</template>

<script>
	import previewWrapper from '@client/components/preview-wrapper'
	import QrcodeVue from 'qrcode.vue'
	export default {
		components: {
			previewWrapper,
			QrcodeVue
		},
		props: {
			pageId: String
		},
		data() {
			return {
				loading: true,
				defaultCoverImage: require('@client/common/images/pagecover-image.png'),
				pageData: {}
      }
		},
    created(){
			this.getData()
    },
    computed: {
      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){
					return {}
        }
				if(this.pageData.shareConfig.shareWx){
					return {
						coverImage: this.pageData.shareConfig.coverImage,
						title: this.pageData.shareConfig.title,
						description: this.pageData.shareConfig.description,
          }
        }else{
					return {
						coverImage: this.pageData.coverImage,
						title: this.pageData.title,
						description: this.pageData.description,
          }
        }
      }
    },
		methods: {
			/**
       * 关闭弹窗事件
			 */
			closePreview() {
				this.$emit('closePreview', false);
			},
			getData(){
				this.loading = true;
				this.$API.getPageDetail({pageId: this.pageId}).then(res => {
					this.loading = false;
          this.pageData = res.body;
				}).catch(() => {
					this.loading = false;
				})
      },
      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('已复制')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
  .preview-info-wrapper {
    padding: 30px 30px 60px;
    font-size: 16px;
  }

  .page-info {
    display: flex;
    padding: 12px;
    background-color: #f0f3f4;
    .page-cover {
      width: 80px;
      height: 80px;
      overflow: hidden;
    }
    .page-title-des {
      padding-left: 20px;
      flex: 1;
      overflow: hidden;
    }
  }
  .info-form-wrapper {
    display: flex;
    padding-bottom: 16px;
    .info-form-l {
      line-height: 42px;
      &.com-width {
        width: 120px;
      }
    }
    .info-form-r {
      flex: 1;
      padding-left: 10px;
    }
  }
  .share-wx-config-wrapper {
    margin-top: 14px;
    margin-right: 12px;
    display: block;
    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>