feat: 开发推广需求

pages/businessCard/index.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="business-page">
+    <!-- 请求到具体渠道后再显示页面内容 -->
+    <div class="empty" v-if="!isShow && websiteInfo === 'none'">
+      <div><img src="~/assets/image/businessCard/404.png" /></div>
+      <div class="text-404">您访问的页面信息不存在</div>
+      <!-- <a class="go-home underline-hover" href="https://www.androidscloud.com/">双子星官网</a> -->
+    </div>
+
+    <div class="business-card" v-else-if="isShow && Object.keys(websiteInfo).length > 0">
+      <!-- 背景图片 -->
+      <img id="page-bg" :src="`${this.IMG_URL}/business-card-bg.png`" @load="onLoadBgImg" />
+      <!-- 下载按钮区域 -->
+      <div class="download-wrap">
+        <div>
+          <img @click="downloadApp('pc')" class="cursor" src="~/assets/image/businessCard/pc-download-btn.png" />
+          <img @click="downloadApp('android')" class="cursor" src="~/assets/image/businessCard/android-download-btn.png" />
+        </div>
+      </div>
+      <!-- 底部信息 -->
+      <div class="footer-wrap">
+        <!-- 应用信息 -->
+        <div class="app-info-wrap">{{ websiteInfo.websiteInformation }}</div>
+        <div class="copyright-menu">
+          <div class="menu-item"><a href="#">功能介绍</a></div>
+          <div class="menu-item"><a href="#">应用权限</a></div>
+          <div class="menu-item"><a href="#">隐私政策</a></div>
+          <div class="menu-item"><a href="#">公司介绍</a></div>
+          <div class="menu-item"><a href="#">联系方式</a></div>
+        </div>
+
+        <div class="copyright-wrap">
+          <a href="https://beian.miit.gov.cn" target="_blank">
+            <img src="https://www.androidscloud.com/templates/default/static/img/ba.png" alt="" style="width: 18px;">
+            <span>{{ websiteInfo.websiteCopyright }}</span>
+          </a>
+        </div>
+
+        <div class="copyright-logo">
+          <a href="https://www.androidscloud.com/"><img src="~/assets/image/businessCard/footer-logo.png" /></a>
+        </div>
+      </div>
+      <!-- 固定区域 联系商务 -->
+      <div class="fixed-wrap">
+        <div class="contact-wrap">
+          <div class="qr-img-wrap">
+            <img class="qr-code-img" :src="websiteInfo.businessQrCodeUrl" alt="">
+          </div>
+        </div>
+        <div class="contact-title"><img class="cursor" src="~/assets/image/businessCard/float-server-btn.png" /></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  auth: false,
+  name: 'BusinessCard',
+  head: {
+    title: '双子星云手机',
+  },
+  async fetch() {
+    // 页面初始化后触发
+    try {
+      const params = this.$route.query;
+      let code = params.code || '';
+      let merchantSign = params.merchantSign || '';
+
+      if(code === '' || merchantSign === '') {
+        // 如果没有code或merchantSign
+        this.websiteInfo = 'none'; // 设置渠道信息为none，表示没有查询到
+        return;
+      }
+
+      /* 
+       * 获取官网落地页信息
+       * @param (请求参数) {String} code 请求路径上面带的
+       * @param (请求参数) {String} merchantSign 请求路径上面带的
+       */
+      const res = await this.$axios.$get('/support/v5/tChannelSemInfo/getWebsiteInfo', {params});
+
+      // 查询到渠道信息后，设置页面内容显示
+      this.isShow = true; // 显示页面内容
+      this.websiteInfo = res.data; // 设置渠道信息
+    } catch (error) {
+      console.error('请求渠道信息失败', error);
+      this.websiteInfo = 'none'; // 设置渠道信息为none，表示没有查询到
+    }
+  },
+  data() {
+    return {
+      isShow: false, // 是否显示页面内容
+      websiteInfo: {}, // 网站渠道信息
+      windowWidth: 0,
+      windowHeight: 0,
+      IMG_URL: process.env.IMG_URL,
+    }
+  },
+  computed: {
+    // windowHeight() {
+    //   // 计算窗口高度
+    //   return this.windowHeight;
+    // },
+    // 计算属性可以用来处理数据
+    // 例如：计算背景图的样式
+    backgroundStyle() {
+      return {
+        backgroundImage: `url(${this.IMG_URL}/business-card-bg.png)`
+      }
+    }
+  },
+  mounted() {
+    document.documentElement.classList.add('custom-html-class');
+    // document.body.classList.add('custom-body-class');
+  },
+  beforeDestroy() {
+    // 清理样式，避免影响其他页面
+    document.documentElement.classList.remove('custom-html-class');
+    // document.body.classList.remove('custom-body-class');
+  },
+  methods: {
+    // 图片加载完成后触发
+    onLoadBgImg() {
+      // 获取图片的显示宽高(页面的整体宽高)
+      const imgElement = document.getElementById('page-bg');
+      this.windowWidth = imgElement.clientWidth;
+      this.windowHeight = imgElement.clientHeight;
+    },
+    // 下载应用
+    downloadApp(type) {
+      this.reportSemPoint(type); // 上报埋点
+
+      let url = ''; // 下载链接
+      if(type === 'pc') {
+        url = this.websiteInfo.pcDownloadUrl;
+      } else if(type === 'android') {
+        url = this.websiteInfo.androidDownloadUrl;
+      }
+
+      if(url) {
+        let a = document.createElement('a');
+        a.href = url;
+        a.click();
+        a.remove();
+        a = null; // 清理引用
+      }
+    },
+    // 上报埋点
+    async reportSemPoint(pointType) {
+      try {
+        // 点击类型（website_open：官网打开、pc_download：PC下载、android_download：安卓下载）
+        const em = {
+          'web': 'website_open', // 官网打开
+          'pc': 'pc_download', // PC下载
+          'android': 'android_download', // 安卓下载
+          'ios': 'ios_download' // iOS下载
+        };
+
+        let {id: semInfoId, suffixEncoding: semCode} = this.websiteInfo;
+
+        await this.$axios.$post('/support/v5/tChannelSemInfo/reportSemPoint', {
+          pointType: em[pointType], 
+          semCode, // 渠道标识
+          semInfoId, // 获取官网落地页信息接口中返回的id
+        });
+      } catch (error) {
+        console.error('上报埋点失败', error);
+      }
+    },
+  },
+}
+</script>
+
+<style>
+/* 全局样式 */
+html.custom-html-class {
+  overflow-x: auto;
+  
+  /* Firefox */
+  scrollbar-width: thin;          /* 设置滚动条宽度 */
+  scrollbar-color: #888 #f1f1f1;  /* 滑块颜色 | 轨道颜色 */
+
+  /* WebKit 浏览器 */
+  ::-webkit-scrollbar {
+    width: 12px;  /* 垂直滚动条宽度 */
+    height: 12px; /* 水平滚动条高度 */
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #888;
+    border: 3px solid transparent;
+    background-clip: padding-box;
+    border-radius: 6px;
+  }
+}
+
+/* body.custom-body-class {
+  margin: 0;
+  font-family: 'Arial', sans-serif;
+} */
+</style>
+
+<style lang="scss" scoped>
+.cursor{
+  cursor: pointer;
+}
+
+.underline-hover:hover {
+  text-decoration: underline;
+}
+
+.business-page {
+  position: relative;
+  font-size: 0;
+
+  .empty{
+    padding-top: 40px;
+    text-align: center;
+    color: #333;
+    
+    .text-404{
+      line-height: 40px;
+      font-size: 24px;
+    }
+
+    .go-home{
+      line-height: 40px;
+      font-size: 24px;
+    }
+  }
+
+  .business-card{
+    position: relative;
+
+    .download-wrap {
+      position: absolute;
+      top: 674px;
+      left: 200px;
+      width: 550px;
+      height: 170px;
+      z-index: 1;
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .footer-wrap{
+      text-align: center;
+      font-size: 24px;
+      color: #fff;
+      line-height: 33px;
+      font-weight: 500;
+      position: absolute;
+      bottom: 600px;
+      right: 0;
+      left: 0;
+
+      .app-info-wrap {
+        margin-bottom: 43px;
+      }
+
+      .copyright-menu{
+        display: flex;
+        justify-content: center;
+        margin-bottom: 57px;
+
+        & > div.menu-item {
+          a{
+            color: #fff;
+          }
+        }
+
+        // 除开最后一个元素,中间都使用after
+        & > div.menu-item:not(:last-child)::after {
+          content: '|';
+          margin: 0 10px;
+        }
+      }
+
+      .copyright-wrap{
+        margin-bottom: 64px;
+
+        & > a {
+          color: #fff;
+        }
+      }
+    }
+
+    .fixed-wrap{
+      position: fixed;
+      right: 8px;
+      bottom: 100px;
+
+      &:hover{
+        .contact-wrap{
+          display: block;
+        }
+      }
+
+      .contact-wrap{
+        position: relative;
+        width: 0;
+        height: 0;
+        display: none;
+
+        .qr-img-wrap{
+          position: absolute;
+          right: 21px;
+          top: -60px;
+          width: 274px;
+          height: 312px;
+          background-image: url('~/assets/image/businessCard/qr-wrap.png');
+          padding-top: 60px;
+          padding-left: 52px;
+
+          .qr-code-img{
+            width: 173px;
+            height: 173px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>