移动端h5落地页总结（vue cli+vant）

素颜马尾好姑娘i 2022-10-11 12:12 226阅读 0赞

## 一.template中使用图片： ##

1.js中引入图片：`import onepng from "@/assets/1.png";`  
2.data中定义template中用到的图片变量：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]  
3.template中使用：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]

## 二、vant在vue页面的按需引用： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]

## 三、引入json文件并使用 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 3]

## 四、base64引入使用： ##

1.安装：`npm install --save js-base64`  
2.在组件中直接引入`const Base64 = require('js-base64').Base64;`

## 五、axios使用 ##

1.安装：`npm install axios`  
2.页面引入`import axios from "axios";`  
3.使用：

axios({ 
            method: "post",
            url: this.baseurl+"/zld/pdd/yxSave",
            data: { 
              name: this.name,
              phone: this.phone,
              cityId: this.cityId,
              smsCode: this.smsCode,
              source: this.source,
            },
          }).then((response) => { 
            console.log(response);
            if(response.data.errorCode==0){ 
              Toast('提交成功');
              this.name= "",
              this.phone= "",
              this.smsCode= "",
              this.value='',
              this.cityId= null
              this.classObject1=false
              this.classObject2=false
              this.classObject3=false
              this.checked=false
            }else if(response.data.errorCode==1){ 
              Toast(response.data.errorMsg);
            }
          })

## 六、vue 区分正式环境、测试环境打包 ##

一、根目录下新建文件：

.env.dev
    .env.prod
    .env.test

1.  dev文件内容：

//表明这是开发环境
    NODE_ENV = 'development'
    //指定当前环境模式
    VUE_APP_CURRENTMODE = 'development'
    # base api
    VUE_APP_BASE_API = 'http://192.168.1.245:5151/hemo'
    VUE_APP_PYTHON_API='http://192.168.1.253:5005/'
    VUE_APP_IMAGE_HOST='http://sitimg.hmdata.com.cn:5050/'
    VUE_CLI_BABEL_TRANSPILE_MODULES = true

1.  prod文件内容

//表明这是生产环境(需要打包)
    NODE_ENV = 'production'
    //指定当前环境模式
    VUE_APP_CURRENTMODE = 'prod'
    //生成地址
    outputDir = "prod"

1.  staging文件地址 //测试

//表明这是生产环境(需要打包)
    NODE_ENV = 'production'
    # just a flag
    ENV = 'staging'

二、配置http请求

if (process.env.NODE_ENV === 'development') { 
        // 设置默认本地开发
        axios.defaults.baseURL = utils.api.test_domain;
        // axios.defaults.baseURL = utils.local_domain;
    } else if (process.env.VUE_APP_CURRENTMODE === 'test') { 
        // 测试
        axios.defaults.baseURL = utils.api.test_domain;
    } else if (process.env.VUE_APP_CURRENTMODE === 'prod') { 
        // 默认正式
        axios.defaults.baseURL = utils.api.prod_domain;
    }

三、配置package.json

"prod": "vue-cli-service build --mode prod",  //注意 --mode prod 中的 “prod” 要与 第一步新建文件 “.env.prod” 一样
    "build:stage": "vue-cli-service build --mode staging",
    "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

四、在vue.config.js文件下配置输出地址

/* 输出文件目录：在build时，生成文件的目录名称 */
    outputDir: 'build/' + (process.env.outputDir ? process.env.outputDir : 'dist'),

五、运行npm run serve 或 npm run build或者 npm run build：stage

附home页源码

<template>
      <div class="home">
        <div>
          <van-image width="100%" height="100%" :src="toppng" class="top" />
        </div>
        <div class="content">
          <van-cell-group class="cont">
            <van-field
              v-model="name"
              label="申请人"
              placeholder="请输入"
              class="bgcolor bord"
            />
            <van-cell is-link @click="showPopup" class="bgcolor" title="所在省市" :value="value" ></van-cell>
            <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
              <van-picker
                show-toolbar
                title=""
                :columns="columns"
                @cancel="show = false"
                @confirm="onConfirm"
                @change="onChange"
              />
            </van-popup>
            <van-field
              v-model="chep"
              label="车牌号"
              placeholder="请输入"
              class="bgcolor"
            />
            <van-cell title="购车方式" value="" class="bgcolor bgcolor2" />
            <van-row type="flex" justify="space-around" class="bgcolor">
              <van-col span="4" class="bt" :class='{activ:classObject1}' @click="changecss(1)">全款</van-col>
              <van-col span="8" class="bt" :class='{activ:classObject2}' @click="changecss(2)">分期-已结清</van-col>
              <van-col span="8" class="bt" :class='{activ:classObject3}' @click="changecss(3)">分期-未结清</van-col>
            </van-row>
            <van-field
              v-model="phone"
              label="手机号"
              placeholder="请输入"
              class="bgcolor"
            />
            <van-field
              v-model="smsCode"
              center
              clearable
              label="验证码"
              placeholder="请输入验证码"
              class="bgcolor"
            >
              <template #button>
                
                <smsVerify class="co" :phone="phone"/>
              </template>
            </van-field>
            <van-checkbox v-model="checked" checked-color="#a18b76 " label-disabled class="check"></van-checkbox>
            <p class=" check2">我已阅读并同意<span @click="look">《留资隐私政策》</span></p>
            <van-popup v-model="show222" class="bb" closeable position="bottom" :style="{ width:'90%',padding:'20px', height: '70%' }">
              <h3>隐私政策</h3>
              <h4 >尊敬的客人，感谢您选择我司为您提供服务！</h4><p>
    
    
    
    6、如您对本隐私政策或您个人信息的相关事宜有任何疑问、问题、意见、建议或投诉，您有权：</p><p>
    
    （1）随时拨打我们客服电话4000598598（工作日9:00 - 18:00)进行咨询或反映。受理您的问题后，我们会及时、妥善处理。</p><p>
    
    （2）我们设立了信息安全管理委员会，您可通过发送邮件至指定邮箱shuy@yxqiche.com与其联系，一般情况下，我们将在15日内给予答复。</p>
            </van-popup>
            <div style="margin: 16px">
              <van-button
              class="bgcolo"
                round
                block
                type="info"
                native-type="submit"
                @click="submit"
                >提交</van-button
              >
            </div>
          </van-cell-group>
          <van-row type="flex" justify="space-around">
            <van-col span="16" class="title">简单4步轻松到账</van-col>
          </van-row>
          <van-row type="flex" justify="space-around" class="liucheng">
            <van-col span="4">
              <van-image :src="onepng" />
              <p>在线审批</p>
            </van-col>
            <van-col span="1" class="jiantou">
              <van-image :src="jiantoupng" />
            </van-col>
            <van-col span="4">
              <van-image :src="twopng" />
              <p>电子签约</p>
            </van-col>
            <van-col span="1">
              <van-image :src="jiantoupng" class="jiantou" />
            </van-col>
            <van-col span="4">
              <van-image :src="tpng" />
              <p>抵押登记</p>
            </van-col>
            <van-col span="1">
              <van-image :src="jiantoupng" class="jiantou" />
            </van-col>
            <van-col span="4">
              <van-image :src="fpng" />
              <p>钱款到账</p>
            </van-col>
          </van-row>
          <van-row type="flex" justify="space-around">
            <van-col span="10" class="title title2">申请条件</van-col>
          </van-row>
          <ul>
            <li>1、18-60周岁，中国大陆公民；</li>
            <li>2、申请个人名下非营运车辆，当前无抵押；</li>
            <li>3、车龄未超过8年（以出厂日期为准）</li>
          </ul>
          <van-row type="flex" justify="space-around">
            <van-col span="10" class="title title3">产品特点</van-col>
          </van-row>
          <ol>
            <li>港交所上市，产品连续6年稳定运营</li>
            <li>融资成本低，24期和36期任选</li>
            <li>流程简单，办理快速，最快当天到账</li>
          </ol>
          <van-row type="flex" justify="space-around">
            <van-col span="10" class="info">
              <van-image :src="infopng" />
            </van-col>
          </van-row>
        </div>
      </div>
    </template>
    
    <script>
    import smsVerify from '@/components/SmsVerify.vue'
    import axios from "axios";
    import onepng from "@/assets/1.png";
    import twopng from "@/assets/2.png";
    import tpng from "@/assets/3.png";
    import fpng from "@/assets/4.png";
    import infopng from "@/assets/info.png";
    import toppng from "@/assets/top.png";
    import jiantoupng from "@/assets/jiantou.png";
    import Vue from "vue";
    import {  Image as VanImage } from "vant";
    import { 
      Toast,
      Field,
      Cascader,
      Col,
      Row,
      Cell,
      CellGroup,
      Checkbox,
      Button,
      List,
      Picker,
      Popup,
      Notify,
    } from "vant";
    Vue.use(Toast);
    Vue.use(Notify);
    Vue.use(Button);
    Vue.use(List);
    Vue.use(Picker);
    Vue.use(Popup);
    Vue.use(Checkbox);
    Vue.use(Col);
    Vue.use(Row);
    Vue.use(Field);
    Vue.use(Cascader);
    Vue.use(Cell);
    Vue.use(CellGroup);
    Vue.use(VanImage);
    const cities = require("../assets/cities.json").info;
    const Base64 = require('js-base64').Base64;
    export default { 
      name: "Home",
      components: { smsVerify},
      data() { 
        return { 
          baseurl:process.env.VUE_APP_BASE_API,
          show222:false,
          name: "",
          phone: "",
          smsCode: "",
          cityId: null,
          source: null,
          chep:'',
          columns: [{  values: Object.keys(cities) }, {  values: cities["安徽"] }],
          show: false,
          toppng: toppng,
          onepng: onepng,
          tpng: tpng,
          fpng: fpng,
          twopng: twopng,
          jiantoupng: jiantoupng,
          infopng: infopng,
          value: "",
          checked: false,
          cities2: { },
          classObject1:false,
          classObject2:false,
          classObject3:false,
        };
      },
      created() { 
        if(this.$route.query.Baserow){ 
          let row=this.$route.query.Baserow;
          row=Base64.decode(row);
          row=(JSON.parse(row))
          this.source=row.source
          console.log(this.source)
        }
        for (let i = 0; i < cities.length; i++) { 
          let a = cities[i].fullName;
          this.cities2[a] = [];   
          for (let j = 0; j < cities[i].list.length; j++) { 
            this.cities2[a].push(cities[i].list[j].fullName);
          }
        }
        (this.columns = [
          {  values: Object.keys(this.cities2) },
          {  values: this.cities2["安徽省"] },
        ])
        
      },
      methods: { 
        look(){ 
          this.show222=true
        },
        // getsmsCode() { 
        // axios({ 
        // method: "post",
        // url: this.baseurl+"/zld/pdd/sendSms/code",
        // data: { 
        // phone: this.phone,
        // },
        // }).then((response) => { 
        // console.log(response);
        // });
        // },
        submit() { 
          if(!this.name){ 
            Toast('请输入申请人姓名');
            return
          }
          if(!this.value){ 
            Toast('请选择所在省市');
            return
          }
          
          if(!this.phone){ 
            Toast('请输入申请人手机号');
            return
          }
          if(!(/^1[3456789]\d{9}$/.test(this.phone))){ 
            Toast('请输入正确的手机号');
            return
          }
          if(!this.smsCode){ 
            Toast('请输入手机号验证码');
            return
          }
          if(!this.checked){ 
            Toast('请先阅读并同意《留资隐私政策》');
            return
          }
          console.log(this.value.slice(4))
          for (let i = 0; i < cities.length; i++) { 
            for (let j = 0; j < cities[i].list.length; j++) { 
              if(cities[i].list[j].fullName==this.value.slice(4)){ 
                this.cityId=cities[i].list[j].sid
              }
            }
        }
          axios({ 
            method: "post",
            url: this.baseurl+"/zld/pdd/yxSave",
            data: { 
              name: this.name,
              phone: this.phone,
              cityId: this.cityId,
              smsCode: this.smsCode,
              source: this.source,
            },
          }).then((response) => { 
            console.log(response);
            if(response.data.errorCode==0){ 
              Toast('提交成功');
              this.name= "",
              this.phone= "",
              this.smsCode= "",
              this.value='',
              this.cityId= null
              this.classObject1=false
              this.classObject2=false
              this.classObject3=false
              this.checked=false
            }else if(response.data.errorCode==1){ 
              Toast(response.data.errorMsg);
            }
          })
        },
        onChange(picker, values){ 
          console.log(2222,picker, values)
          picker.setColumnValues(1, this.cities2[values[0]]);
        },
        // onChange(picker, values) { 
        // console.log(2222, picker, values);
        // for(let i=0;i<cities.length;i++){ 
        // if(cities[i].fullName== values[0]){ 
        // var arrr=cities[i].list
        // var arr=[]
        // for(let j=0;j<arrr.length;j++){ 
        // arr.push(arrr[j].fullName)
        // }
        // }
        // }
        // picker.setColumnValues(
        // 1,
        // arr
        // );
        // // console.log(111, cities.find((v) => v.fullName === values[0]).list.map((v) => v.fullName))
        // },
        showPopup() { 
          this.show = true;
        },
        onConfirm(value) { 
          this.value = value.join(",");
          console.log(this.value);
          this.show = false;
        },
        changecss(index){ 
          if(index==1){ 
            this.classObject1=true
            this.classObject2=false
            this.classObject3=false
          }else if(index==2){ 
            this.classObject1=false
            this.classObject2=true
            this.classObject3=false
          }else if(index==3){ 
            this.classObject1=false
            this.classObject2=false
            this.classObject3=true
          }
        }
      },
    };
    </script>
    <style scoped>
    .bgcolo{ 
      width: 90%;
      margin-left: 5%;
      border: none;
      background: #c0b9b3;
      margin-bottom: 30px;
    }
    .co{   
      color: #a18b76 !important;
    }
    .check { 
      display: inline-block;
      margin-top: 10px;
      margin-left: 10px;
    }
    .check2{ 
      padding: 0 0 10px 10px;
      /* margin-top: 20px; */
      font-size: 13px;
      display: inline-block;
      /* line-height: 30px; */
      color: #999 ;
    }
    .check2 span{ 
      color: #a18b76;
    }
    h4{ 
      margin: 2px;
      padding: 0;
    }
    .bb{ 
      border-top-left-radius:6% ;
      border-top-right-radius:6% ;
    }
    p{ 
      margin: 0;
      padding: 0;
      color: #6e727a;
      line-height: 24px;
      font-size: 14px;
    }
    h3{ 
      text-align: center;
    }
    .top { 
      display: block;
    }
    .bord{ 
      border-top-left-radius:20% ;
      border-top-right-radius:20% ;
    }
    .bgcolor .activ{ 
      background-color:#a18b76 ;
      color: white;
    }
    .content { 
      background: url("../assets/bg.png") no-repeat;
      background-size: 100% 100%;
      margin-top: -2px;
      background-origin: border-box;
    }
    .bgcolor { 
      /* padding: 10px; */
      background: #fcf6f0;
      border-bottom: 1px solid rgb(225, 208, 191);
    }
    .bgcolor2{ 
      border: none;
    }
    .cont { 
      background: #fcf6f0;
      margin: auto;
      width: 90%;
      border-radius: 3%;
      border: 1px solid transparent;
    }
    .bt { 
      margin-bottom: 10px;
      width: 26%;
      height: 35px;
      line-height: 35px;
      background: #fcf6f0;
      border: 1px solid #a18b76;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-radius: 20px;
      text-align: center;
      font-size: 13px;
      color: #6e727a;
    }
    .smscss{ 
      background-color:#fcf6f0 ;
      border: none;
      font-size: 14px;
      color:#a18b76 ;
    }
    
    .title { 
      margin-top: 50px;
      color: white;
      text-align: center;
      line-height: 30px;
      background: url("../assets/fontbg.png") no-repeat;
      background-size: 100% 100%;
    }
    .liucheng { 
      margin-top: 50px;
      width: 86%;
      margin-left: 7%;
      color: white;
      font-size: 13px;
    }
    .jiantou { 
      margin-top: 20px;
    }
    ul,
    ol { 
      color: white;
      background: url("../assets/border.png") no-repeat;
      background-size: 100% 100%;
      margin: 6%;
      padding: 6%;
      font-size: 14px;
      line-height: 26px;
    }
    ol { 
      padding-left: 10%;
    }
    ol li:before { 
      content: "";
      display: block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #35b4fd;
      position: absolute;
      left: 12%;
      margin-top: 10px;
    }
    .info { 
      margin: 30px;
    }
    .title2,
    .title3 { 
      margin-top: 30px;
    }
    </style>

项目浏览地址：  
https://yxapp.yixincapital.com/\#/marketingCenter?thirdPartyId=babakeji&subThirdPartyId=babakeji2&timestamp=1608719032817&accessToken=99f6ddf744705e26a238f310a68feaa8&timer=1610023989507

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/d543abf368c24ba4883a9d0c2b70d021.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/33d91cefe83742a3821133b078ee642d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/57625e3cb1e5447da50c9f528bbbaa46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/7890f951f8814ba7bd202ed99091a9c6.png