form

src/api/signup.js

+import request from "../utils/request";
+
+/**
+ * 报名
+ * @param {*} person 
+ * @returns 
+ */
+ export function singup(data) {
+  const url = `${baseURL}/singup`
+  return request(url, { method: 'POST', body: JSON.stringify(data) })
+}

src/components/HelloWorld.vue

-<template>
-  <div class="hello">
-        <img src="../assets/happyAccept.png" @click="() => this.$router.push('/signup')" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/pages/Test.vue

       <div class="body-swiper-right">
         <img style="width:70%;position: relative; right: -1vw;" src="../assets/buttonImage/3右滑.png" />
       </div>
-      <div class="button-img">
+      <div class="button-img" @click="() => this.$router.push('/signup')">
         <img style="width:100%;" src="../assets/buttonImage/1即刻尊享.png" />
       </div>
     </div>

src/pages/resultPage.vue

+<template>
+  <div>
+    <img
+      class="bgi"
+      src="../../public/images/result/resultbgi.jpg"
+      width="100%"
+    />
+    <img
+      @click="onShare"
+      class="share"
+      src="../../public/images/result/sharebtn.png"
+      width="45%"
+    />
+    <img
+      @click="close"
+      v-show="isShare"
+      class="sharebgi"
+      src="../../public/images/result/sharebgi.png"
+      width="100%"
+    />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      isShare:false
+    }
+  },
+  methods: {
+    onShare() {
+      this.isShare = true
+    },
+    close() {
+      this.isShare = false
+    }
+  }
+}
+</script>
+<style scoped>
+.bgi {
+  z-index: -1;
+  position: absolute;
+}
+.sharebgi {
+  z-index: 1;
+  opacity: 0.8;
+  position: absolute;
+}
+.share {
+  position: absolute;
+  margin: 78vh 0 0 27.5vw;
+}
+</style>

src/components/signup.vue → src/pages/signup.vue

 <template>
   <div>
     <img class="bgi" src="../../public/images/signup/bgi.jpg" width="100%" />
-    <!-- <van-form @submit="handleUser">
-      <van-cell-group inset>
-        <van-field
-          v-model="username"
-          name="用户名"
-          label="用户名"
-          placeholder="用户名"
-          :rules="[{ required: true, message: '请填写用户名' }]"
-        />
-        <van-field
-          v-model="password"
-          type="password"
-          name="密码"
-          label="密码"
-          placeholder="密码"
-          :rules="[{ required: true, message: '请填写密码' }]"
-        />
-      </van-cell-group>
-      <div style="margin: 16px">
-        <van-button round block type="primary" native-type="submit">
-          提交
-        </van-button>
-      </div>
-    </van-form> -->
     <div class="form">
       <div class="formItem">
         <label>身&nbsp;&nbsp;&nbsp;&nbsp;份</label>
       <div class="formItem intendedProductdiv">
         <label>意向产品</label>
         <input
-          @click="showProduct"
           class="intendedProduct"
           type="text"
           placeholder="请选择"
         />
       </div>
       <img
+        @click="sumbit"
         class="submit"
         src="../../public/images/signup/submit.png"
         width="45%"
       />
     </div>
-    <!-- <VuePicker
-      class="picker"
-      :data="productList"
-      :showToolbar="true"
-      @cancel="cancelProduct"
-      @confirm="confirmProduct"
-      :visible.sync="pickerVisibleProduct"
-    /> -->
   </div>
 </template>
 <script>
-// import VuePicker from 'vue-pickers'
 import checked from '../../public/images/signup/checked.png'
 import Unchecked from '../../public/images/signup/Unchecked.png'
 export default {
-  // components: {
-  //   VuePicker
-  // },
   data() {
     return {
       checked,
       this.ischecked = false
       this.formData.role = 'designer'
     },
-    showProduct() {
-      this.pickerVisibleProduct = true
+    // showProduct() {
+    //   this.pickerVisibleProduct = true
+    // },
+    // cancelProduct() {
+    //   this.pickerVisibleProduct = false
+    // },
+    // confirmProduct(res) {
+    //   this.formData.intendedProduct = res[0].label
+    // },
+    verification() {
+      if (!this.formData.userName) {
+        alert('请输入您的姓名')
+        return false
+      } else if (!this.formData.phone) {
+        alert('请输入您的手机号')
+        return false
+      } else if (!this.formData.intendedProduct) {
+        alert('请选择您的意向产品')
+        return false
+      } else if (!this.formData.address) {
+        alert('请选择您所在的地区')
+        return false
+      } else if (!this.formData.phone.match(/^1[0-9]{10}/)) {
+        alert('请输入正确的手机号哦')
+        return false
+      } else return true
     },
-    cancelProduct() {
-      this.pickerVisibleProduct = false
-    },
-    confirmProduct(res) {
-      // this.result = JSON.stringify(res)
-      this.formData.intendedProduct = res[0].label
+    sumbit() {
+      if (this.verification()) {
+        console.log(this.formData)
+        this.$router.push('/resultPage')
+      }
     }
   }
 }
   width: 100%;
   color: #a6b1ab;
   position: absolute;
-  margin-top: 9vh;
+  margin-top: 18%;
 }
 .formItem {
   position: absolute;
   position: relative;
 }
 .name {
-  margin-top: 14vh;
+  margin-top: 23%;
 }
 .userName {
   width: 80%;
   color: #a6b1ab;
 }
 .phonediv {
-  margin-top: 24vh;
+  margin-top: 40%;
 }
 .phone {
   width: 79%;
   color: #a6b1ab;
 }
 .intendedProductdiv {
-  margin-top: 34vh;
+  margin-top: 57%;
 }
 .intendedProduct {
   width: 77%;
   color: #a6b1ab;
 }
 .addressdiv {
-  margin-top: 44vh;
+  margin-top: 74%;
 }
 .address {
   width: 77%;
   color: #a6b1ab;
 }
 .submit {
-  margin: 55vh 0 0 27.5vw;
-}
-div.picker>div.vue-picker>div.content>div.colums>div.list>ul>li{
-  list-style-type: none;
+  margin: 93% 0 0 27.5vw;
 }
 </style>

src/router/index.js

 import ColmoIndex from '@/pages'
 import AllPages from '@/pages/AllPages'
 import Test from '@/pages/Test'
-import SignUp from '@/components/signup'
+import SignUp from '@/pages/signup'
+import Result from '@/pages/resultPage'
 
 Vue.use(Router)
 
       name: 'Test',
       component: Test
     },
-    //报名页
+    // 报名页
     {
       path: '/signup',
       name: 'signup',
       component: SignUp
+    },
+    // 结果页
+    {
+      path: '/resultPage',
+      name: 'Result',
+      component: Result
     }
   ]
 })

src/utils/request.js

+
+// import { getToken } from './token'
+
+export default function request (url, options = {}) {
+  const headers = new Headers();
+  headers.append('Content-Type', 'application/json;charset=utf8');
+  // headers.append('X-Authorization-JWT', getToken());
+
+  Object.keys(options.headers || {}).forEach(key => headers.append(key, options.headers[key]))
+
+  return fetch(url, { ...options, headers, credentials: 'include', mode: 'cors' })
+    .then(response => response.json())
+    .then(data => {
+      if (data.code === 1000) return data.data
+      return Promise.reject(data)
+    })
+}
+
+export const domain = process.env.NODE_ENV === 'development' ? '' : 'https://hhdlots.njyunzhi.com'
+
+export const baseURL = `${domain}/api/wx`

yarn.lock

   resolved "https://registry.npmmirror.com/check-types/-/check-types-7.4.0.tgz#0378ec1b9616ec71f774931a3c6516fad8c152f4"
   integrity sha512-YbulWHdfP99UfZ73NcUDlNJhEIDgm9Doq9GhpyXbF+7Aegi3CVV7qqMCKTTqJxlvEvnQBp9IA+dxsGN6xK/nSg==
 
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
+  version "3.5.3"
+  resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chokidar@^2.1.2, chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.npmmirror.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@^3.4.1:
-  version "3.5.3"
-  resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
-  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
-  dependencies:
-    anymatch "~3.1.2"
-    braces "~3.0.2"
-    glob-parent "~5.1.2"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.6.0"
-  optionalDependencies:
-    fsevents "~2.3.2"
-
 chownr@^1.0.1:
   version "1.1.4"
   resolved "https://registry.npmmirror.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.npmmirror.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom7@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.npmmirror.com/dom7/-/dom7-4.0.4.tgz#8b68c5d8e5e2ed0fddb1cb93e433bc9060c8f3fb"
+  integrity sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==
+  dependencies:
+    ssr-window "^4.0.0"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
   resolved "https://registry.npmmirror.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
   integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
+immutable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
+  integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
   version "1.4.0"
   resolved "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
   resolved "https://registry.npmmirror.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==
 
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
   resolved "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass-loader@^7.3.1:
+  version "7.3.1"
+  resolved "https://registry.npmmirror.com/sass-loader/-/sass-loader-7.3.1.tgz#a5bf68a04bcea1c13ff842d747150f7ab7d0d23f"
+  integrity sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA==
+  dependencies:
+    clone-deep "^4.0.1"
+    loader-utils "^1.0.1"
+    neo-async "^2.5.0"
+    pify "^4.0.1"
+    semver "^6.3.0"
+
+sass@^1.49.7:
+  version "1.49.7"
+  resolved "https://registry.npmmirror.com/sass/-/sass-1.49.7.tgz#22a86a50552b9b11f71404dfad1b9ff44c6b0c49"
+  integrity sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@~1.2.1, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   resolved "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
+semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
 send@0.17.2:
   version "0.17.2"
   resolved "https://registry.npmmirror.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
   resolved "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
+"source-map-js@>=0.6.2 <2.0.0":
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
 source-map-resolve@^0.5.0:
   version "0.5.3"
   resolved "https://registry.npmmirror.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
   resolved "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+ssr-window@^4.0.0, ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 ssri@^5.2.4:
   version "5.3.0"
   resolved "https://registry.npmmirror.com/ssri/-/ssri-5.3.0.tgz#ba3872c9c6d33a0704a7d71ff045e5ec48999d06"
   resolved "https://registry.npmmirror.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
+style-loader@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.npmmirror.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
+  integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.npmmirror.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swiper@^8.0.5:
+  version "8.0.6"
+  resolved "https://registry.npmmirror.com/swiper/-/swiper-8.0.6.tgz#3996d3212cb73b93e9f274e18ea58c029340c7c7"
+  integrity sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA==
+  dependencies:
+    dom7 "^4.0.4"
+    ssr-window "^4.0.2"
+
 table@4.0.2:
   version "4.0.2"
   resolved "https://registry.npmmirror.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"