update: 落地页预览封装

src/components/preview-page.vue

+<template>
+  <div class="iphone">
+    <span class="pageTitle">{{ pageTitle }}</span>
+    <div class="content">
+      <div class="enterpriseInfo">
+        <div class="logo"></div>
+        <div class="name">{{ merchantName }}</div>
+      </div>
+      <div class="QRcode"></div>
+      <div class="leadingText">{{ guideComment }}</div>
+      <div class="enterpriseNum">
+        <i class="iconfont-hb3 iconhuawushuju"></i>
+        <p>{{ merchantPhoneNumber }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    pageTitle: {
+      type: String,
+      default: '标题'
+    },
+    merchantName: {
+      type: String,
+      default: '商户名称'
+    },
+    merchantPhoneNumber: {
+      type: String,
+      default: '0571-82345678'
+    },
+    merchantLogo: {
+      type: String,
+      default: ''
+    },
+    pageBackgroudImg: {
+      type: String,
+      default: ''
+    },
+    guideComment: {
+      type: String,
+      default: '长按保存/识别二维码，添加您的专属导购'
+    }
+  },
+  watch: {
+    mediaList(val) {
+      console.log(val);
+    }
+  }
+};
+</script>
+
+<style type="text/scss" lang="scss" scoped>
+.iphone {
+  position: relative;
+  margin-left: 117px;
+  display: inline-block;
+  font-size: 0;
+  line-height: 0;
+  background-image: url('../assets/iphone3.png');
+  background-repeat: no-repeat;
+  background-size: 280px auto;
+  width: 280px;
+  height: 543px;
+  .pageTitle {
+    font-size: 14px;
+    position: sticky;
+    color: #000000;
+    font-weight: 500;
+    top: 64px;
+    width: 100%;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+  }
+  .content {
+    width: 228px;
+    height: 410px;
+    box-sizing: border-box;
+    padding: 20px 16px;
+    position: absolute;
+    top: 97px;
+    left: 26px;
+    background: #ffffff;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 10px 10px 24px 24px;
+    .enterpriseInfo {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      width: 100%;
+      .logo {
+        width: 36px;
+        height: 36px;
+        background: #f6f6f6;
+        border-radius: 60px;
+      }
+      .name {
+        margin-left: 10px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #242835;
+        line-height: 17px;
+        width: 80%;
+      }
+    }
+    .QRcode {
+      width: 176px;
+      height: 176px;
+      margin: 11px 0 16px 0;
+      background: #f6f6f6;
+      background-image: url('../assets/QRcode.png');
+      background-size: 176px auto;
+    }
+    .leadingText {
+      font-size: 10px;
+      color: #7f818a;
+      line-height: 14px;
+      width: 88%;
+      text-align: center;
+    }
+    .enterpriseNum {
+      width: 130px;
+      margin-top: 68px;
+      height: 32px;
+      box-sizing: border-box;
+      border-radius: 40px;
+      border: 1px solid #9da0a6;
+      display: flex;
+      align-items: center;
+      padding: 9px 12px;
+
+      line-height: 14px;
+      color: #63666b;
+      font-size: 12px;
+      i {
+        font-size: 12px;
+      }
+      p {
+        margin-left: 5px;
+      }
+    }
+  }
+}
+</style>

src/components/utils/preview-page.vue

-<template>
-  <div class="iphone">
-    <span class="pageTitle">{{ pageTitle }}</span>
-    <div class="infoList">
-      <div class="infoListBox">
-        <div class="textInfo"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {};
-  },
-  props: {
-    pageTitle: {
-      type: String,
-      default: ''
-    },
-    merchantName: {
-      type: String,
-      default: ''
-    },
-    merchantPhoneNumber: {
-      type: String,
-      default: ''
-    },
-    merchantLogo: {
-      type: String,
-      default: ''
-    },
-    pageBackgroudImg: {
-      type: String,
-      default: ''
-    },
-    guideComment: {
-      type: String,
-      default: ''
-    }
-  },
-  watch: {
-    mediaList(val) {
-      console.log(val);
-    }
-  }
-};
-</script>
-
-<style type="text/scss" lang="scss" scoped>
-.iphone {
-  border-radius: 4px;
-  position: relative;
-  margin-left: 117px;
-  display: inline-block;
-  font-size: 0;
-  line-height: 0;
-  background-image: url('../assets/iphone3.png');
-  background-repeat: no-repeat;
-  width: 240px;
-  min-height: 495px;
-  background-size: 240px auto;
-  color: #303133;
-  .infoList {
-    padding: 0 10px;
-    margin-top: 80px;
-    border-radius: 6px;
-    max-height: 360px;
-    overflow: auto;
-    .infoListBox {
-    }
-    .infoListBox + .infoListBox {
-      margin-top: 15px;
-    }
-  }
-}
-</style>

src/router/actCodeManageRouter/attractFlowLinkRouter.js

@@ -5,6 +5,11 @@ const attractFlowLinkRouter = [
     path: '/attractFlowLink',
     name: '引流链接',
     component: _import('salesleads/actCodeManage/attractFlowLink', 'index')
+  },
+  {
+    path: '/ladingPageInfo',
+    name: '落地页详情',
+    component: _import('salesleads/actCodeManage/attractFlowLink/landingPage', 'detail')
   }
 ];
 

src/views/salesleads/actCodeManage/attractFlowLink/landingPage/detail.vue

+<template>
+  <div>
+    <previewPage />
+  </div>
+</template>
+<script>
+import previewPage from '@/components/preview-page.vue';
+export default {
+  components: {
+    previewPage
+  }
+};
+</script>