活动分享页和活动预览页

package-lock.json

         }
       }
     },
+    "can-promise": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/can-promise/-/can-promise-0.0.1.tgz",
+      "integrity": "sha512-gzVrHyyrvgt0YpDm7pn04MQt8gjh0ZAhN4ZDyCRtGl6YnuuK6b4aiUTD7G52r9l4YNmxfTtEscb92vxtAlL6XQ==",
+      "requires": {
+        "window-or-global": "^1.0.1"
+      }
+    },
     "caniuse-api": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz",
         "randombytes": "^2.0.0"
       }
     },
+    "dijkstrajs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.1.tgz",
+      "integrity": "sha1-082BIh4+pAdCz83lVtTpnpjdxxs="
+    },
     "dir-glob": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
       "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
-      "dev": true,
       "requires": {
         "once": "^1.4.0"
       }
         "pify": "^3.0.0"
       }
     },
+    "map-age-cleaner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "requires": {
+        "p-defer": "^1.0.0"
+      }
+    },
     "map-cache": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
         "os-tmpdir": "^1.0.0"
       }
     },
+    "p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww="
+    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
       "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
     },
+    "p-is-promise": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
+      "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg=="
+    },
     "p-limit": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
       "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==",
       "dev": true
     },
+    "pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w=="
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qrcode": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.3.3.tgz",
+      "integrity": "sha512-SH7V13AcJusH3GT8bMNOGz4w0L+LjcpNOU/NiOgtBhT/5DoWeZE6D5ntMJnJ84AMkoaM4kjJJoHoh9g++8lWFg==",
+      "requires": {
+        "can-promise": "0.0.1",
+        "dijkstrajs": "^1.0.1",
+        "isarray": "^2.0.1",
+        "pngjs": "^3.3.0",
+        "yargs": "^12.0.5"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "requires": {
+            "nice-try": "^1.0.4",
+            "path-key": "^2.0.1",
+            "semver": "^5.5.0",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "execa": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+          "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+          "requires": {
+            "cross-spawn": "^6.0.0",
+            "get-stream": "^4.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "invert-kv": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
+          "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA=="
+        },
+        "isarray": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.4.tgz",
+          "integrity": "sha512-GMxXOiUirWg1xTKRipM0Ek07rX+ubx4nNVElTJdNLYmNO/2YrDkgJGw9CljXn+r4EWiDQg/8lsRdHyg2PJuUaA=="
+        },
+        "lcid": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
+          "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
+          "requires": {
+            "invert-kv": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "mem": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
+          "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
+          "requires": {
+            "map-age-cleaner": "^0.1.1",
+            "mimic-fn": "^2.0.0",
+            "p-is-promise": "^2.0.0"
+          }
+        },
+        "mimic-fn": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
+        },
+        "os-locale": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
+          "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
+          "requires": {
+            "execa": "^1.0.0",
+            "lcid": "^2.0.0",
+            "mem": "^4.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
+          "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+        },
+        "pump": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        },
+        "semver": {
+          "version": "5.7.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
+          "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA=="
+        },
+        "yargs": {
+          "version": "12.0.5",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
+          "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+          "requires": {
+            "cliui": "^4.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^3.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1 || ^4.0.0",
+            "yargs-parser": "^11.1.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
+          "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "qrcodejs2": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
         "string-width": "^1.0.2 || 2"
       }
     },
+    "window-or-global": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/window-or-global/-/window-or-global-1.0.1.tgz",
+      "integrity": "sha1-2+RboqKRqrxW1iz2bEW3+jIpRt4="
+    },
     "window-size": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "write": {
       "version": "0.2.1",

package.json

     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "print-js": "^1.0.50",
+    "qrcode": "^1.3.3",
     "qrcodejs2": "0.0.2",
     "screenfull": "4.2.0",
     "serve-static": "1.13.2",

src/api/activity/activity.js

       id: activity_id,
     }
   })
+}
+
+export function getActivityShareInfo(activity_id) {
+  return request({
+    url: "/api/activity/shareinfo",
+    method: "get",
+    params: {
+      id: activity_id,
+    }
+  })
 }

src/router/index.js

       noCache: true
     }
   }]
+},
+{
+  path: '/activity/preview',
+  component: () => import('@/scrm_pages/marketing_tool/activity_preview'),
+  hidden: true
 }
   // service
 ]

src/router/modules/marketing_tool.js

         noCache: true,
       }
     },
-    {
-      path: "/activity/preview",
-      hidden: true,
-      is_menu: false,
-      component: () => import("@/scrm_pages/marketing_tool/activity_preview"),
-      name: "activityPreview",
-      meta: {
-        title: "activityPreview",
-        noCache: true,
-      }
-    },
+    // {
+    //   path: "/activity/preview",
+    //   hidden: true,
+    //   is_menu: false,
+    //   component: () => import("@/scrm_pages/marketing_tool/activity_preview"),
+    //   name: "activityPreview",
+    //   meta: {
+    //     title: "activityPreview",
+    //     noCache: true,
+    //   }
+    // },
     {
       path: "/activity/signupusers",
       hidden: true,

src/scrm_pages/marketing_tool/activity_detail.vue

                 </div>
                 <div class="title-panel">
                     <p class="title">
-                        <router-link :to="activity_url">{{ title }}</router-link>
+                        <!-- <router-link v-if="activity != null && activity.status == 4" :to="activity_url" target="_blank">{{ title }}</router-link>
+                        <router-link v-else :to="activity_url">{{ title }}</router-link> -->
+                        <router-link :to="activity_url" target="_blank">{{ title }}</router-link>
                     </p>
                     <p class="date">活动日期：{{ activity_time }}</p>
                 </div>

src/scrm_pages/marketing_tool/activity_preview.vue

 <template>
-    <div></div>
+<div style="background-color: #f6f8f9;">
+    <div class="main">
+        <div class="border title-panel">
+            <img :src="activity.poster_photo"/>
+            <div class="text">
+                <p class="title">{{ activity.title }}</p>
+                <p class="subtitle">{{ activity.subtitle }}</p>
+            </div>
+        </div>
+        <div class="org-info border">
+            <div class="logo">
+                <img :src="org.logo" />
+            </div>
+            <div class="info">
+                <p class="name">{{ org.name }}</p>
+                <p class="address">{{ activity.address }}</p>
+            </div>
+            <div class="arrow">
+                <img src="@/assets/img/sa_52.png" />
+            </div>
+        </div>
+        <div class="simple-cell border">
+            <div class="icon">
+                <img src="@/assets/img/sa_21.png" />
+            </div>
+            <div class="text">
+                <p>{{ parseTime(activity.start_time, "{y}-{m}-{d} {h}:{i}") }}</p>
+            </div>
+            <div class="arrow-panel">
+                <img src="@/assets/img/sa_52.png" />
+            </div>
+        </div>
+        <div class="simple-cell border" v-if="activity.phone_number.length > 0">
+            <div class="icon">
+                <img src="@/assets/img/sa_24.png" />
+            </div>
+            <div class="text">
+                <p>{{ activity.phone_number }}</p>
+            </div>
+            <div class="arrow-panel">
+                <img src="@/assets/img/sa_52.png" />
+            </div>
+        </div>
+        <div class="simple-cell border" v-if="activity.limit_num > 0">
+            <div class="title">
+                <p>活动名额</p>
+            </div>
+            <div class="detail">
+                <p>{{ activity.limit_num + "人" }}</p>
+            </div>
+        </div>
+
+        <div class="large-text-cell border" v-if="sign_up_notice.length > 0">
+            <div class="title">
+                <img src="@/assets/img/sa_25.png" />
+                <span>报名须知</span>
+            </div>
+            <p class="content" v-html="sign_up_notice">
+            </p>
+        </div>
+
+        <div class="large-text-cell border" v-if="activity_paragraph.title.length > 0">
+            <div class="title">
+                <img src="@/assets/img/sa_26.png" />
+                <span>{{ activity_paragraph.title }}</span>
+            </div>
+            <p class="content" v-html="activity_paragraph.content">
+            </p>
+        </div>
+
+        <div class="signup-fake-btn">
+            立即报名
+        </div>
+    </div>
+</div> 
 </template>
 
 <script>
+import { fetchActivity } from "@/api/activity/activity"
+import { parseTime } from "@/utils"
+
 export default {
     name: "ActivityPreview",
+    data() {
+        return {
+            activity_id: 0,
+
+            activity: {
+                id: 0,
+                poster_photo: "",
+                title: "",
+                subtitle: "",
+                address: "",
+                limit_num: 0,
+                sign_up_deadline: 0,
+                start_time: 0,
+                phone_number: "",
+                sign_up_notice: "",
+            },
+            activity_paragraph: {
+                title: "",
+                content: "",
+            },
+            org: {
+                name: "",
+                logo: "",
+            }
+        }
+    },
+    computed: {
+        sign_up_notice: function() {
+            return this.activity.sign_up_notice.replace(/\n/g, "<br/>")
+        }
+    },
+    mounted() {
+        this.activity_id = this.$route.query.id
+
+        fetchActivity(this.activity_id).then(rs => {
+            var resp = rs.data
+            if (resp.state == 1) {
+                // console.log(resp.data)
+                var activity = resp.data.activity
+                this.activity.id = activity.id
+                this.activity.poster_photo = activity.poster_photo
+                this.activity.title = activity.title
+                this.activity.subtitle = activity.subtitle
+                this.activity.address = activity.address
+                this.activity.limit_num = activity.limit_num
+                this.activity.sign_up_deadline = activity.sign_up_deadline * 1000
+                this.activity.start_time = activity.start_time * 1000
+                this.activity.phone_number = activity.phone_number
+                this.activity.sign_up_notice = activity.sign_up_notice
+
+                var paragraph = resp.data.paragraph
+                this.activity_paragraph.title = paragraph.title
+                this.activity_paragraph.content = paragraph.content
+
+                this.org.name = resp.data.org.name
+                this.org.logo = resp.data.org.logo
+
+            } else {
+                this.$message.error(resp.msg)
+            }
+
+        }).catch(err => {
+            this.$message.error(err)
+        })
+    },
+    methods: {
+        parseTime,
+    }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.main {
+    width: 750px;
+    margin: 0 auto;
+    padding: 14px 30px 0 30px;
+
+    .title-panel {
+        background-color: white;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+        .text {
+            padding: 12px 15px 16px 20px;
+
+            .title {
+                font-size: 18px;
+                color: #485b6d;
+                font-weight: bold;
+                line-height: 32px;
+            }
+            .subtitle {
+                margin-top: 4px;
+                color: #a6a6a6;
+                font-size: 14px;
+            }
+        }
+    }
+
+    .org-info {
+        padding: 26px 20px;
+        position: relative;
+        display: flex;
+        -webkit-box-align: center;
+        align-items: center;
+        margin-top: 15px;
+        background-color: white;
 
+        .logo {
+            img {
+                width: 40px;
+                height: 40px;
+                border-radius: 20px;
+                object-fit: cover;
+                object-position: center;
+            }
+        }
+
+        .info {
+            flex: 1;
+            padding-left: 23px;
+            color: #485b6d;
+
+            .name {
+                font-size: 16px;
+                line-height: 22px;
+            }
+            .address {
+                font-size: 14px;
+                line-height: 20px;
+            }
+        }
+        
+        .arrow {
+            width: 20px;
+            position: relative;
+            img {
+                width: 8px;
+                float: right;
+            }
+        }
+    }
+
+    .simple-cell {
+        background-color: white;
+        padding: 20px 20px;
+        margin-top: 15px;
+        position: relative;
+        display: flex;
+        -webkit-box-align: center;
+        align-items: center;
+
+        .icon {
+            img {
+                width: 20px;
+                height: auto;//20px;
+                vertical-align: middle;
+            }
+        }
+        .text {
+            flex: 1;
+            padding-left: 17px;
+            color: #485b6d;
+            line-height: 20px;
+        }
+        .arrow-panel {
+            width: 20px;
+            position: relative;
+
+            img {
+                width: 8px;
+                float: right;
+                vertical-align: middle;
+            }
+        }
+
+        .title {
+            p {
+                color: #485b6d;
+            }
+        }
+        .detail {
+            flex: 1;
+            padding-left: 23px;
+            color: #485b6d;
+
+            p {
+                color: #485b6d;
+                float: right;
+                text-align: right;
+            }
+        }
+    }
+
+    .large-text-cell {
+        background-color: white;
+        padding: 20px 20px;
+        position: relative;
+        -webkit-box-align: center;
+        align-items: center;
+        margin-top: 15px;
+
+        .title {
+            color: #485b6d;
+            line-height: 18px;
+            height: 18px;
+
+            img {
+                margin-right: 11px;
+                float: left;
+            }
+        }
+        .content {
+            color: #a8b3ba;
+            margin: 10px 0 0 0;
+            font-size: 14px;
+            line-height: 20px;
+        }
+    }
+
+    .signup-fake-btn {
+        background: #58a1ed;
+        color: #fff;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        width: 100%;
+        margin-top: 100px;
+        font-size: 16px;
+    }
+}
 </style>
 
+<style scoped>
+.border {
+    border: solid 1px #dee2e5;
+    border-radius: 4px;
+}
+</style>

src/scrm_pages/marketing_tool/activity_share.vue

 <template>
-    <div></div>
+    <div class="main-contain">
+        <div class="position">
+            <bread-crumb :crumbs="crumbs"></bread-crumb>
+        </div>
+        <div class="app-container" style="padding: 0 6px 20px; background-color: #f6f8f9;">
+            <div class="wx-share-panel">
+                <div class="text-panel">
+                    <p class="title">微信分享</p>
+                    <p class="desc">以微信方式推送给客户，该方式可以监测活动的展现及参与次数</p>
+                </div>
+                <div class="qrcode-panel">
+                    <div class="qrcode">
+                        <img :src="qr_img" :style="{ opacity: qr_img.length > 0 ? 1 : 0 }" />
+                    </div>
+                    <div class="btn">
+                        <el-button type="primary" @click="previewAction">新窗口预览</el-button>
+                    </div>
+                </div>
+            </div>
+            <div class="sms-share-panel">
+                <div class="text-panel">
+                    <p class="title">短信分享</p>
+                    <p class="desc">以短信方式推送给客户</p>
+                </div>
+                <div class="btn-panel">
+                    <el-button type="primary">短信推送</el-button>
+                </div>
+            </div>
+            <div class="link-share-panel">
+                <div>
+                    <p class="title">网页链接</p>
+                    <p class="desc">可以直接分享以下链接到相应媒体（邮件、QQ、微博等），或者嵌入到微信公众号菜单</p>
+                </div>
+                <div class="input-line">
+                    <div class="input">
+                        <el-input readonly v-model="short_url"></el-input>
+                    </div>
+                    <el-button type="primary" @click="copyAction">复制链接</el-button>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+import BreadCrumb from "@/scrm_pages/components/bread-crumb"
+import QRCode from "qrcode"
+import { getActivityShareInfo } from "@/api/activity/activity"
+
 export default {
     name: "ActivityShare",
+    components: {
+        BreadCrumb,
+    },
+    data() {
+        return {
+            crumbs: [
+                { path: false, name: "活动详情" },
+                { path: false, name: "活动分享" },
+            ],
+
+            activity_id: 0,
+            short_url: "",
+            qr_img: "",
+        }
+    },
+    mounted() {
+        this.activity_id = this.$route.query.id
+
+        getActivityShareInfo(this.activity_id).then(rs => {
+            var resp = rs.data
+            if (resp.state == 1) {
+                this.short_url = resp.data.url
+
+                var opts = {
+                    errorCorrectionLevel: "H",
+                    type: "image/png"
+                };
+                var that = this;
+                QRCode.toDataURL(this.short_url, opts, function(err, qr_url) {
+                    if (err) {
+                        console.log(err);
+                    } else {
+                        that.qr_img = qr_url;
+                    }
+                });
+
+            } else {
+                this.$message.error(resp.msg)
+            }
+        }).catch(err => {
+            this.$message.error(err)
+        })
+
+    },
+    methods: {
+        previewAction: function () {
+            // var new_page = this.$router.resolve({ 
+            //     path: '/activity/preview',
+            //     query: {
+            //         id: this.activity_id,
+            //     }   
+            // })
+            // window.open(new_page.href, '_blank');
+            window.open(this.short_url, "_blank")
+        },
+        copyAction: function() {
+            var input = document.createElement("input");
+            input.value = this.short_url;
+            document.body.appendChild(input);
+            input.select();
+            document.execCommand("Copy");
+            document.body.removeChild(input);
+
+            this.$message.success("已复制链接")
+        }
+    },
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.wx-share-panel {
+    box-shadow: 0 0 1px #dee2e5;
+    padding: 25px 35px;
+    display: flex;
+    background-color: white;
+
+    .text-panel {
+        flex: 1;
+
+        .title {
+            font-size: 16px;
+            color: #485b6d;
+            font-weight: bold;
+            height: 40px;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+        }
+        .desc {
+            color: #7b8a97;
+            font-size: 14px;
+        }
+    }
+    .qrcode-panel {
+        text-align: right;
+
+        .qrcode {
+            text-align: center;
 
+            img {
+                width: 120px;
+                height: 120px;
+            }
+        }
+
+        .btn {
+            text-align: center;
+        }
+    }
+}
+
+.sms-share-panel {
+    box-shadow: 0 0 1px #dee2e5;
+    padding: 25px 35px;
+    display: flex;
+    margin-top: 20px;
+    background-color: white;
+
+    .text-panel {
+        flex: 1;
+
+        .title {
+            font-size: 16px;
+            color: #485b6d;
+            font-weight: bold;
+            height: 40px;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+        }
+        .desc {
+            color: #7b8a97;
+            font-size: 14px;
+        }
+    }
+    .btn-panel {
+        text-align: right;
+        padding-right: 4px;
+    }
+}
+
+.link-share-panel {
+    box-shadow: 0 0 1px #dee2e5;
+    padding: 25px 35px;
+    // display: flex;
+    margin-top: 20px;
+    background-color: white;
+
+    .title {
+        font-size: 16px;
+        color: #485b6d;
+        font-weight: bold;
+        height: 40px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+    }
+    .desc {
+        color: #7b8a97;
+        font-size: 14px;
+    }
+    .input-line {
+        margin-top: 20px;
+
+        .input {
+            display: inline-block;
+            width: 400px;
+        }
+    }
+}
 </style>
 

src/scrm_pages/marketing_tool/components/edit_activity_edit_form.vue

             <div class="submit-button-panel">
                 <el-button style="padding: 10px 30px;" type="primary" @click="publishAction" :loading="publishing_activity" :disabled="saving_activity || saving_before_preview_activity">发 布</el-button>
                 <el-button style="color: #409eff; border-color: #409eff; padding: 10px 30px;" @click="saveAction" :loading="saving_activity" :disabled="publishing_activity || saving_before_preview_activity">保存草稿</el-button>
-                <el-button style="color: #409eff; border-color: #409eff; padding: 10px 30px;" :loading="saving_before_preview_activity" :disabled="publishing_activity || saving_activity">预 览</el-button>
+                <el-button style="color: #409eff; border-color: #409eff; padding: 10px 30px;" @click="previewAction" :loading="saving_before_preview_activity" :disabled="publishing_activity || saving_activity">预 览</el-button>
             </div>
         </div>
     </div>
         },
         previewAction: function() {
             this.saving_before_preview_activity = true
+            var t = this
             this.submitActivity(false, function() {
-                this.$router.push({ path: "/activity/preview", query: { id: this.activity.id } })
+                var new_page = t.$router.resolve({ 
+                    path: '/activity/preview',
+                    query: {
+                        id: t.activity.id,
+                    }   
+                })
+                window.open(new_page.href, '_blank');
             })
         },
         submitActivity: function(is_publish, successCallBack) {
                     this.saving_before_preview_activity = false
 
                 }).catch(err => {
+                    console.log('------  ' + err)
                     this.$message.error(err)
                     this.saving_activity = false
                     this.publishing_activity = false
                 })
 
             }).catch(err => {
+                console.log('asdada  ' + err)
                 this.$message.error(err)
                 this.saving_activity = false
                 this.publishing_activity = false
                 this.saving_before_preview_activity = false
             })
-            
         },
         validActivityInfo: function() {
             return new Promise((resolve, reject) => {

src/xt_permission.js

 
 NProgress.configure({ showSpinner: false })// NProgress Configuration
 
-const loginWhiteList = ['/token/verify', '/401', '/404'] // 登录验证白名单
+const loginWhiteList = ['/token/verify', '/401', '/404', "/activity/preview"] // 登录验证白名单
 const permissionWhiteList = loginWhiteList.concat(['/']) // 权限验证白名单
 
 router.beforeEach((to, from, next) => {