Merge branch 'master' of http://git.ycjcjy.com/dianyang/colmo-h5

src/api/register.js

@@ -0,0 +1,11 @@
+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

@@ -1,11 +0,0 @@
-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

@@ -11,8 +11,7 @@ import router from './router'
 import Swiper from './components/Swiper'
 import SwiperSlide from './components/SwiperSlide'
 
-import { Popup } from 'vant';
-import { Area, Picker } from 'vant';
+import { Popup, Picker, Area } from 'vant';
 Vue.use(Popup);
 Vue.use(Picker);
 Vue.use(Area);

src/pages/AllPages.vue

@@ -77,7 +77,6 @@ export default {
 
       switch (e) {
         case 'yushi':
-          console.log('yushi')
           var arr = JSON.stringify(this.typeYushi)
           this.$router.push({
             name: 'Test',

src/pages/IndexImage.vue

@@ -1,6 +1,5 @@
 <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">
@@ -27,8 +26,8 @@ export default {
   name: 'IndexImage',
   props: {
     typeImage: {
-      type: Object
-      // default: () => ({})
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
@@ -46,15 +45,13 @@ export default {
 <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

@@ -24,6 +24,7 @@
         <img style="width:100%;" src="../assets/buttonImage/1即刻尊享.png" />
       </div>
     </div>
+    
   </div>
 </template>
 
@@ -37,8 +38,8 @@ export default {
   },
   props: {
     typePages: {
-      type: Object
-      // default: () => ({})
+      type: Object,
+      default: () => ({})
     }
   },
   components: {
@@ -60,16 +61,15 @@ export default {
   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 {
@@ -80,17 +80,14 @@ export default {
       z-index: 2;
     }
     &-middle {
-      width: 84%;
-      overflow: hidden;
-      position: relative;
-      top: 20px;
-    }
-    .button-img {
-      width: 40%;
-      position: absolute;
-      bottom: -5vh;
-      left: 29vw;
+      width: 84vw;
     }
   }
+  .button-img {
+    position: absolute;
+    width: 45vw;
+    left: 27.5vw;
+    top: 37vh;
+  }
 }
 </style>

src/pages/index.vue

@@ -34,14 +34,13 @@ export default {
   }
   .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

@@ -39,14 +39,15 @@ export default {
 </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

@@ -25,8 +25,8 @@
         <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"
@@ -57,18 +57,29 @@
       </div>
       <img @click="sumbit" class="submit" src="../../public/images/signup/submit.png" width="45%" />
     </div>
-    <area-picker :show.sync="showArea" @change="handleArea" @cancel="showArea=false"></area-picker>
+    <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 { setRegister, getCity } from '../utils/api'
 
+import { register } from '../api/register'
+import { setRegister, getCity } from '../utils/api'
 export default {
   components: {
     AreaPicker: () => import('@/components/AreaPicker')
   },
   data() {
     return {
+      visible: false,
       showArea: false,
       checked: `./images/signup/checked.png`,
       Unchecked: `./images/signup/Unchecked.png`,
@@ -81,18 +92,7 @@ export default {
         intendedProduct: undefined,
         address: undefined
       },
-      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
-      productList: [
-        'COLMO子母太空舱',
-
-        'COLMO星图干洗护理套装',
-
-        'COLMO星辰干洗护理套装',
-
-        'COLMO星际干洗护理套装',
-
-        'COLMO TURING套系智慧干洗护理空间站'
-      ],
+      productList: ['COLMO子母太空舱', 'COLMO星图干洗护理套装', 'COLMO星辰干洗护理套装', 'COLMO星际干洗护理套装', 'COLMO TURING套系智慧干洗护理空间站'],
       pickerVisibleProduct: false,
       address: undefined
     }
@@ -104,7 +104,7 @@ export default {
   methods: {
     onConfirm(value, index) {
       this.formData.intendedProduct = value
-      this.showPicker = false
+      this.onCancel()
     },
 
     onCancel() {
@@ -151,6 +151,9 @@ export default {
     },
     sumbit() {
       if (this.verification()) {
+        // register(this.formData).then(() => {
+        //   this.$router.push('/resultPage')
+        // })
         const { userName, phone, intendedProduct, address, role } =
           this.formData
         let arrNew = address.map((item) => {
@@ -186,7 +189,7 @@ export default {
   padding: 0;
 }
 .bgi {
-  z-index: -1;
+  z-index: 1;
   position: absolute;
 }
 .form {
@@ -194,6 +197,7 @@ export default {
   color: #a6b1ab;
   position: absolute;
   margin-top: 18%;
+  z-index: 2;
 }
 .formItem {
   position: absolute;

src/utils/request.js

@@ -55,5 +55,3 @@ export default function (url, options) {
     })
   })
 }
-
-

vue.config.js

@@ -1,5 +1,7 @@
 
 const path = require('path')
+const resolve = dir => path.join(__dirname, dir)
+
 
 module.exports = {
 
@@ -18,10 +20,10 @@ module.exports = {
 
 
   },
-  publicPath: './',
-  chainWebpack (config) {
-    config.resolve.alias
-      .set('@/components', path.resolve(__dirname, 'src/components/'))
-      .set('@/utils', path.resolve(__dirname, 'src/utils/'))
+  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"));
   }
 }