.

src/api/register.js

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

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/main.js

 import Swiper from './components/Swiper'
 import SwiperSlide from './components/SwiperSlide'
 
-import { Popup } from 'vant';
-import { Area } from 'vant';
+import { Popup, Picker, Area } from 'vant';
 Vue.use(Popup);
+Vue.use(Picker);
 Vue.use(Area);
 
 Vue.config.productionTip = false

src/pages/AllPages.vue

 
       switch (e) {
         case 'yushi':
-          console.log('yushi')
           var arr = JSON.stringify(this.typeYushi)
           this.$router.push({
             name: 'Test',

src/pages/IndexImage.vue

 <template>
   <div class="index-image">
-    <!-- <img :src="require('@/assets/images/index.png')" class="bg-image" @load="loadBg" /> -->
     <div class="index-inner-swiper">
       <swiper :options="swiperOptions">
         <swiper-slide class="index-inner-slide">
   name: 'IndexImage',
   props: {
     typeImage: {
-      type: Object
-      // default: () => ({})
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
 <style lang="scss" scoped>
 .index-image {
   .index-inner-swiper {
-    width: 100vw;
     .index-inner-slide {
       position: relative;
-      left: -11vw;
-    }
 
-    img {
-      width: 100%;
-      height: 100%;
+      & > img {
+        width: 100%;
+        height: 37vh;
+      }
     }
   }
 }

src/pages/Test.vue

         <img style="width:100%;" src="../assets/buttonImage/1即刻尊享.png" />
       </div>
     </div>
+    
   </div>
 </template>
 
   },
   props: {
     typePages: {
-      type: Object
-      // default: () => ({})
+      type: Object,
+      default: () => ({})
     }
   },
   components: {
   width: 100vw;
   height: 100vh;
   display: flex;
-  // justify-content: center;
   .bg-image {
     width: 100%;
+    height: 100vh;
     position: absolute;
   }
   .body-swiper {
     position: absolute;
-    width: 100%;
-    top: 335px;
-    height: 50vh;
+    width: 100vw;
+    top: 47.5vh;
     display: flex;
     &-left,
     &-right {
       z-index: 2;
     }
     &-middle {
-      width: 84%;
-      overflow: hidden;
-      position: relative;
-      top: 20px;
-    }
-    .button-img {
-      width: 40%;
-      position: absolute;
-      bottom: 0px;
-      left: 115px;
+      width: 84vw;
     }
   }
+  .button-img {
+    position: absolute;
+    width: 45vw;
+    left: 27.5vw;
+    top: 37vh;
+  }
 }
 </style>

src/pages/index.vue

   }
   .bth-div {
     position: absolute;
-    width: 184px;
-    height: 49px;
+    width: 45vw;
     bottom: 18vh;
     /* margin: 0 auto; */
     /* justify-content: center; */
     /* margin: 0 auto; */
     display: flex;
-    left: 28vw;
+    left: 27.5vw;
     align-items: center;
     .bth-image {
       width: 100%;

src/pages/resultPage.vue

 </script>
 <style scoped>
 .bgi {
-  z-index: -1;
+  z-index: 1;
   position: absolute;
 }
 .sharebgi {
-  z-index: 1;
+  z-index: 2;
   position: absolute;
 }
 .share {
+  z-index: 3;
   position: absolute;
   margin: 78vh 0 0 27.5vw;
 }

src/pages/signup.vue

         <label>手&nbsp;机&nbsp;号</label>
         <input class="phone" type="text" placeholder="请输入手机号" v-model="formData.phone" />
       </div>
-      <div class="formItem intendedProductdiv">
-        <label>意向产品</label>
+      <div class="formItem intendedProductdiv" @click="visible = true">
+        <label>意向产品</label>        
         <input
           class="intendedProduct"
           type="text"
       </div>
       <img @click="sumbit" class="submit" src="../../public/images/signup/submit.png" width="45%" />
     </div>
+    <van-popup v-model="visible" position="bottom">
+      <van-picker
+        title="意向产品"
+        show-toolbar
+        :columns="productList"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+      />
+    </van-popup>
     <area-picker :show.sync="showArea" @change="handleArea" @cancel='showArea=false'></area-picker>
   </div>
 </template>
 <script>
 
-
+import { register } from '../api/register'
 export default {
   components: {
     AreaPicker: () => import('@/components/AreaPicker')
   },
   data() {
     return {
+      visible: false,
       showArea: false,
       checked: `./images/signup/checked.png`,
       Unchecked: `./images/signup/Unchecked.png`,
         intendedProduct: undefined,
         address: undefined
       },
-      productList: [
-        [
-          {
-            label: 'COLMO子母太空舱',
-            value: 'COLMO子母太空舱'
-          },
-          {
-            label: 'COLMO星图干洗护理套装',
-            value: 'COLMO星图干洗护理套装'
-          },
-          {
-            label: 'COLMO星辰干洗护理套装',
-            value: 'COLMO星辰干洗护理套装'
-          },
-          {
-            label: 'COLMO星际干洗护理套装',
-            value: 'COLMO星际干洗护理套装'
-          },
-          {
-            label: 'COLMO TURING套系智慧干洗护理空间站',
-            value: 'COLMO TURING套系智慧干洗护理空间站'
-          }
-        ]
-      ],
+      productList: ['COLMO子母太空舱', 'COLMO星图干洗护理套装', 'COLMO星辰干洗护理套装', 'COLMO星际干洗护理套装', 'COLMO TURING套系智慧干洗护理空间站'],
       pickerVisibleProduct: false,
       address: undefined
     }
   },
   methods: {
+    onConfirm(value, index) {
+      this.formData.intendedProduct=value
+      this.onCancel()
+    },
+    onCancel() {
+      this.visible = false
+    },
     handleUser() {
       this.ischecked = true
       this.formData.role = 'user'
     },
     sumbit() {
       if (this.verification()) {
-        console.log(this.formData)
-        this.$router.push('/resultPage')
+        register(this.formData).then(() => {
+          this.$router.push('/resultPage')
+        })
       }
     }
   }
   padding: 0;
 }
 .bgi {
-  z-index: -1;
+  z-index: 1;
   position: absolute;
 }
 .form {
   color: #a6b1ab;
   position: absolute;
   margin-top: 18%;
+  z-index: 2;
 }
 .formItem {
   position: absolute;

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]))
 
     })
 }
 
-export const domain = process.env.NODE_ENV === 'development' ? '' : 'https://hhdlots.njyunzhi.com'
+export const domain = process.env.NODE_ENV === 'development' ? '' : 'http://colmo-service.dianyang.njyunzhi.com'
 
 export const baseURL = `${domain}/api/wx`

vue.config.js

 
 const path = require('path')
+const resolve = dir => path.join(__dirname, dir)
+
 
 module.exports = {
-  publicPath: './',
-  chainWebpack(config) {
-    config.resolve.alias
-      .set('@/components', path.resolve(__dirname, 'src/components/'))
-      .set('@/utils', path.resolve(__dirname, 'src/utils/'))
+
+  devServer: {
+    proxy: {
+      '/api': {
+        target: "http://192.168.89.147:8081",
+        // ws: true,
+        changeOrigin: true,
+        // pathRewrite: {
+        //   // 路径重写
+        //   "/api": "" // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的话， 会自动拼接上
+        // }
+      },
+    },
+
+
+  },
+  lintOnSave: false,
+  publicPath: "./",//在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath。 https://cli.vuejs.org/zh/config/#vue-config-js
+  runtimeCompiler: true,
+  chainWebpack: config => {
+    config.resolve.alias.set("@", resolve("src"));
   }
 }