保存一下

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 150
+}

src/assets/style/mixin.scss

@@ -1,18 +1,27 @@
-.goshopping{
-    width: 12vw;
-    height: 12vw;
-    font-size: 4vw;
-    border-radius: 50%;
-    position: fixed;
-    bottom: 15vw;
-    right: 5vw;
-    border: 1vw solid #1ABC9C;
-    background-color: #1ABC9C;
+.goshopping {
+  width: 12vw;
+  height: 12vw;
+  font-size: 4vw;
+  border-radius: 50%;
+  position: fixed;
+  bottom: 15vw;
+  right: 5vw;
+  border: 1vw solid #1abc9c;
+  background-color: #1abc9c;
+  opacity: 0.8;
+  box-shadow: 0px 5px 5px gray;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  animation: myfirst 3s;
+}
+@keyframes myfirst {
+  from {
+    opacity: 0;
+  }
+  to {
     opacity: 0.8;
-    box-shadow: 0px 5px 5px gray;
-    color: #fff;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
+  }
+}

src/components/wxapp.vue

@@ -0,0 +1,48 @@
+<template>
+  <div style="width: 100%; height: 100%;">
+    按钮按钮：
+    <wx-open-launch-weapp username="gh_" path="/pages/index/index.html">
+      <script type="text/wxtag-template">
+        <style>.btn { padding: 12px}</style>
+        <button class="btn">跳转小程序</button>
+      </script>
+    </wx-open-launch-weapp>
+  </div>
+</template>
+
+<script>
+import { openWxmini } from "@/assets/js/api.js";
+export default {
+  methods: {
+    wxmini() {
+      // 获取密钥
+      openWxmini({ url: window.location.href }).then((res) => {
+        let { appId, nonceStr, signature, timestamp } = res.result;
+        wx.config({
+          // eslint-disable-line
+          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
+          appId, // 必填，公众号的唯一标识
+          timestamp, // 必填，生成签名的时间戳
+          nonceStr, // 必填，生成签名的随机串
+          signature, // 必填，签名
+          jsApiList: ["onMenuShareTimeline"], // 必填，需要使用的JS接口列表
+          openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
+        });
+        /* eslint-disable */
+        wx.ready(function() {
+          console.log("ready");
+        });
+      });
+    },
+  },
+  created() {
+    const oScript = document.createElement("script");
+    oScript.type = "text/javascript";
+    oScript.src = "https://res2.wx.qq.com/open/js/jweixin-1.6.0.js";
+    oScript.onload = this.wxmini;
+    document.body.appendChild(oScript);
+  },
+};
+</script>
+
+<style></style>

src/main.js

@@ -4,9 +4,9 @@ import router from './router'
 
 Vue.config.productionTip = false
 
-// import Vant from 'vant';
-// import 'vant/lib/index.css';
-// Vue.use(Vant);
+import Vant from 'vant';
+import 'vant/lib/index.css';
+Vue.use(Vant);
 
 // import ElementUI from 'element-ui';
 // import 'element-ui/lib/theme-chalk/index.css';

src/views/shopping/index.vue

@@ -3,34 +3,39 @@
     <div class="logobox">
       <img class="logo" src="@/assets/img/logo_font.png" />
     </div>
-    <div class="infobox">
-      <img id="u71_img" class="img " src="@/assets/img/u71.png" />
-    </div>
-    <div class="infobox">
-      <img id="u71_img" class="img " src="@/assets/img/u73.svg" />
-    </div>
-    <div class="infobox">
-      <img id="u71_img" class="img " src="@/assets/img/u74.svg" />
-    </div>
-    <div class="infobox">
-      <img id="u71_img" class="img " src="@/assets/img/u75.svg" />
-    </div>
-    <div class="infobox">
-      <img id="u71_img" class="img " src="@/assets/img/u75.svg" />
+    <div class="infobox" v-for="(item, index) in imgSrc" :key="index" @click="openShow = true">
+      <img id="u71_img" class="img " :src="item.src" />
     </div>
     <div class="goshopping" @click="$router.push('/')">
       <span>返回</span>
       <span>首页</span>
     </div>
+
+    <van-dialog v-model="openShow" title="长按二维码进入公众号购买" show-cancel-button :showConfirmButton="false">
+      <img class="gzh" src="@/assets/img/wxlogo.jpg" />
+    </van-dialog>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      openShow: false,
+      imgSrc: [
+        { src: require('@/assets/img/u71.png') },
+        { src: require('@/assets/img/u73.svg') },
+        { src: require('@/assets/img/u74.svg') },
+        { src: require('@/assets/img/u75.svg') },
+        { src: require('@/assets/img/u75.svg') }
+      ]
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/style/mixin.scss";
+@import '@/assets/style/mixin.scss';
 .logobox {
   position: relative;
   left: 50%;
@@ -38,7 +43,7 @@ export default {};
   top: 0px;
   width: 40vw;
   height: 30vw;
-  background-color: #1ABC9C;
+  background-color: #1abc9c;
   border-bottom-left-radius: 30px;
   border-bottom-right-radius: 30px;
   z-index: 2;
@@ -62,5 +67,15 @@ export default {};
     border-radius: 20px;
   }
 }
-
+.gzh {
+  width: 100%;
+}
+/deep/ .van-dialog__content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/deep/ .van-dialog__header {
+  // user-select: none;
+}
 </style>