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

一.template中使用图片：1.js中引入图片：import onepng from "@/assets/1.png";2.data中定义template中用到的图片变量：3.template中使用：二、vant在vue页面的按需引用：三、引入json文件并使用四、base64引入使用：1.安装：npm install --save js-base642.在组件中直接引入const Base6

边关月＿

2693人浏览 · 2021-06-30 16:00:59

边关月＿ · 2021-06-30 16:00:59 发布

一.template中使用图片：

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

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

在这里插入图片描述

三、引入json文件并使用

在这里插入图片描述

四、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

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

prod文件内容

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

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>
            <!-- <van-button size="small" type="" @click="getsmsCode" class="smscss"
              >获取验证码</van-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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^