<template>
|
<div>
|
<van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" style="line-height: 43px;">
|
<div slot="title">
|
<p style="font-weight: bold;">支付宝拉新</p>
|
</div>
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i>
|
<div class="" slot="right" style="font-size: 14px;line-height: 50px;" @click="toExplain">说明</div>
|
</van-nav-bar>
|
<div class="lx-content">
|
<div class="lx-content-head">
|
<img src="../../assets/zfblx/bg.png" alt="">
|
<div class="lx-content-head-text">
|
<p v-for="item in text">
|
{{ item }}
|
</p>
|
</div>
|
<div class="lx-content-head-login">
|
<div>
|
<i class="iconfont" style="font-size: 20px"></i>
|
<input type="text" placeholder="请输入姓名" v-model="username" maxlength="5">
|
</div>
|
<div>
|
<i class="iconfont" style="font-size: 20px"></i>
|
<input type="text" placeholder="请输入手机号" v-model="usephone" maxlength="11">
|
</div>
|
</div>
|
<van-button round color="#896EDB" class="btn" @click="toCode">生成二维码</van-button>
|
</div>
|
<div class="lx-content-course">
|
<div class="lx-content-course-item1">
|
<img :src="`${imgAdd}1.png`" :alt="'图文教程'+ item">
|
</div>
|
<div class="lx-content-course-item" v-for="item in 5">
|
<img :src="`${imgAdd}${item + 1}.png`" :alt="'图文教程'+ item">
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import rule from '../../utils/formValidator';
|
export default {
|
data() {
|
return{
|
text: [],
|
usephone: '',
|
username: '',
|
imgAdd: 'https://t.finlean.com/czjc/img/sib_mer/zfblx/', //图片存后台的地址路径
|
}
|
},
|
created() {
|
this.init();
|
|
},
|
methods: {
|
init() {
|
this.text = [
|
" 1、请保证填写信息与客户注册支付宝信息一致，不然无法进行结算。",
|
"2、需要用户关闭WiFi，使用4G网络，同意所有授权。",
|
"3、客户注册支付宝前需提醒客户千万不要领取系统红包。"
|
]
|
},
|
//回退按钮
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
//跳转到拉新说明页面
|
toExplain() {
|
this.$router.push("/product/zfblx/lxexplain")
|
},
|
//跳转到拉新二维码页面
|
toCode() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.username)) {
|
v.toast('请输入用户名');
|
return;
|
}
|
if (v.checkValEmpty(this.usephone)) {
|
v.toast('请输入手机号');
|
return;
|
}
|
if (!v.checkPhone(this.usephone)) {
|
v.toast('请输入正确的手机号');
|
return;
|
}
|
console.log(this.usephone)
|
|
this.$api.zfbLxSave({usrName: this.username, usrNo: this.usephone}).then(res => {
|
this.$router.push("/product/zfblx/lxcode")
|
},err => err)
|
// this.$api.zfbLxList().then(res => {
|
// console.log(res.body)
|
// })
|
},
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
@font-face {
|
font-family: 'iconfont'; /* project id 1351259 */
|
src: url('//at.alicdn.com/t/font_1351259_rg7lh167259.eot');
|
src: url('//at.alicdn.com/t/font_1351259_rg7lh167259.eot?#iefix') format('embedded-opentype'),
|
url('//at.alicdn.com/t/font_1351259_rg7lh167259.woff2') format('woff2'),
|
url('//at.alicdn.com/t/font_1351259_rg7lh167259.woff') format('woff'),
|
url('//at.alicdn.com/t/font_1351259_rg7lh167259.ttf') format('truetype'),
|
url('//at.alicdn.com/t/font_1351259_rg7lh167259.svg#iconfont') format('svg');
|
}
|
.lx-content{
|
width: 100%;
|
margin-top: 16px;
|
img{
|
width: 100%;
|
height: 100%;
|
}
|
&-head{
|
height: 395px;
|
width: 94%;
|
margin: 0 3%;
|
// background: url('../../assets/zfblx/bg.png') no-repeat;
|
background-size: 100% 100%;
|
overflow: hidden;
|
position: relative;
|
&-text{
|
position: absolute;
|
top: 0;
|
margin: 50px 25px 0 30px;
|
p{
|
line-height: 20px;
|
font-size: 13px;
|
color: #705BAF;
|
}
|
}
|
&-login{
|
width: 100%;
|
// margin: 55px 25px 0 35px;
|
position: absolute;
|
// left: 35px;
|
width: 80%;
|
margin: 0 10%;
|
bottom: 78px;
|
input{
|
border: none;
|
height: 38px;
|
width: 85%;
|
border-radius: 20px;
|
padding-left: 15%;
|
box-sizing: content-box;
|
}
|
i{
|
position: absolute;
|
left: 16px;
|
line-height: 40px;
|
}
|
:first-child{
|
margin-bottom: 15px;
|
}
|
}
|
}
|
&-course{
|
width: 100%;
|
text-align: center;
|
&-item{
|
width: 100%;
|
img{
|
width: 100%;
|
}
|
}
|
&-item1{
|
margin-top: 32px;
|
width: 100%;
|
img{
|
display: inline-block;
|
width: 110px;
|
}
|
}
|
}
|
}
|
.btn{
|
width: 80%;
|
margin: 0 10%;
|
height: 40px;
|
position: absolute;
|
background:rgba(137,110,219,1);
|
// margin: 15px 30px 0 30px;
|
bottom: 23px;
|
// left: 35px;
|
color: white;
|
}
|
</style>
|
