change.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>充流量</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
</head>
<body style="background:#f3f3f3">
<div id="change">
<div class="change_top">
<div class="change_top_num">
<div class="fr num_close" v-show="fillIn" @click="cancleNum">
<img src="image/close.png" alt="">
</div>
<div class="num_input" @input="telNum">
<input type="text" placeholder="请输入手机号码(移动、联通、电信均支持!)" v-model="tel" @blur="telBlur">
</div>
<div class="clear"></div>
</div>
<p class="change_top_addre" v-cloak>{{provice}}{{city}} <span class="num_ower">{{numOwer}}</span></p>
</div>
<div class="change_middle">
<p class="change_middle_title">全国可用,即时生效!</p>
<ul class="change_middle_choose">
<li v-cloak v-for="(item,index) in chooseList" @click="chooseRechange(index)">
<div class="choose_classify" :class="{bgColor:item.checked}">
<p v-cloak>{{item.classify}}M</p>
<p v-cloak>售价{{item.money}}元</p>
</div>
</li>
<div class="clear"></div>
</ul>
<div class="change_middle_money">
<p v-cloak>{{nowPrice}}元 <span class="choose_special" v-cloak>原价:{{prePrice}}元</span></p>
<p><span class="choose_range" v-cloak>{{range}}</span>全国流量,即时生效,月底失效</p>
</div>
</div>
<div class="change_btn">
<button>支付</button>
</div>
</div>
</body>
</html>
<script src="js/change.js"></script>
style.css
*{
padding: 0;
margin: 0;
list-style: none;
font-family:'Helvetica Neue', 'Microsoft Jhenghei', Helvetica, sans-serif;
color: #303030;
}
html,body {
width:100%;
height:100%;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
input,button{
outline: none;
}
[v-cloak] {
display: none;
}
.change_top{
background: #fff;
margin-bottom: 10px;
}
.num_ower{
margin-left: 8px;
color: #666666;
}
.change_top_num{
border-bottom: 1px solid #dcdcdc;
height: 50px;
line-height: 50px;
padding: 0 15px;
}
::-webkit-input-placeholder {
color: #b8b8b8;
}
:-moz-placeholder {
color: #b8b8b8;
}
::-moz-placeholder {
color: #b8b8b8;
}
:-ms-input-placeholder {
color: #b8b8b8;
}
.num_close{
width: 19px;
height: 19px;
margin-top: 5px;
}
.num_close>img{
width: 100%;
}
.num_input{
margin-right: 25px;
height: 40px;
}
.num_input>input{
width:100%;
height:100%;
box-sizing: border-box;
border:none;
font-size: 16px;
}
.change_top_addre{
line-height: 35px;
color: #666666;
font-size: 12px;
padding:0 15px;
}
.change_middle{
background: #fff;
}
.change_middle_title{
padding:0 15px;
line-height: 50px;
font-size: 14px;
border-bottom: 1px solid #dcdcdc;
}
.change_middle_choose{
padding: 15px;
border-bottom: 1px solid #dcdcdc;
}
.change_middle_choose>li{
width:33.33%;
margin-bottom: 20px;
float: left;
}
.choose_classify{
width:90px;
margin: 0 auto;
border:1px solid #34a9e3;
border-radius: 5px;
}
.choose_classify>p{
text-align: center;
color: #34a9e3;
}
.choose_classify>p:first-child{
font-size:14px;
line-height: 25px;
}
.choose_classify>p:last-child{
font-size:12px;
line-height: 20px;
}
.change_middle_money{
padding: 5px 15px;
}
.change_middle_money>p{
font-size: 15px;
line-height: 30px;
}
.change_middle_money>p:last-child{
color: #666666;
}
.choose_special{
color: #999999;
text-decoration: line-through;
margin-left: 20px;
}
.choose_range{
display: inline-block;
width: 40px;
height:20px;
line-height: 20px;
-webkit-border-radius:;
-moz-border-radius:;
border-radius:5px;
background: #0194dc;
color: #fff;
font-size:12px;
text-align: center;
margin-right: 20px;
}
.change_btn{
position: fixed;
margin: 0 auto;
bottom: 20px;
left:0;
right:0;
text-align: center;
}
.change_btn>button{
height:40px;
width:80%;
background:#0194dc;
color: #fff;
font-size:14px;
border-radius:5px;
border:none;
}
.bgColor{
background:#34a9e3;
}
.bgColor>p{
color: #fff;
}
change.js
var change = new Vue({
el:'#change',
data:function(){
return{
tel:'',
chooseList:[
{classify:10,money:2.8,checked:false},
{classify:10,money:3.5,checked:false},
{classify:10,money:4.5,checked:false},
{classify:10,money:5.5,checked:false},
{classify:10,money:6.5,checked:false},
{classify:10,money:7.5,checked:false}
],
nowPrice:2.5,
prePrice:'3.00',
range:'全国',
provice:'',
city:'',
numOwer:'',
fillIn:false,
tab_index:0
}
},
methods:{
ready:function(){
var this_obj = this;
var tab_index = this_obj.tab_index;
this_obj.chooseList[tab_index].checked = true;
this_obj.nowPrice = this_obj.chooseList[tab_index].money;
},
telNum:function(){
var this_obj = this;
this_obj.fillIn = true;
if(this_obj.tel == ''){
this_obj.fillIn = false;
this_obj.provice = '';
}
},
telBlur:function(){
var this_obj = this;
var reg = /^1(3|4|5|7|8)\d{9}$/;
if(this_obj.tel == ''){
this_obj.provice = '';
}else if(!reg.test(this_obj.tel)){
this_obj.provice = '请输入正确手机号';
$(".change_top_addre").css("color","red");
}else{
this_obj.provice = '北京-';
this_obj.city = '北京';
this_obj.numOwer = '移动';
}
},
cancleNum:function(){
this.tel = '';
this.fillIn = false;
this.provice = '';
this.city = '';
this.numOwer = '';
},
chooseRechange:function(index){
var this_obj = this;
this_obj.nowPrice = this_obj.chooseList[index].money;
for(var i = 0;i < this_obj.chooseList.length;i++){
this_obj.chooseList[i].checked = false;
}
this_obj.chooseList[index].checked = true;
}
}
})
change.ready();
运行结果如图:
