第一个vue案例

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_38747509/article/details/79963329

html:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>更多兑换</title>
<meta content="" name="keywords" />
<meta content="" name="description" />
<script type="text/javascript" src="dest/js/flexible.js"></script>
<link rel="stylesheet" href="dest/css/index.css">
</head>

<body>
<div class="container" id='app'>
<!-- <div class="head">
<a class="iconBack"></a>
更多兑换
</div> -->
<!--遮罩层-->
<div v-show="isLoading" class="cover"></div>
<aside v-show="isLoading" class="loading-wrapper" id="loadingWrapper">
<div>
<div class="loading-img"></div>
<div class="loading-animate"></div>
</div>
</aside>
<main id="mainContent" class="dn">
<!-- 航空产品兑换 -->
<div class="aviationExchange" v-show="aviModel">
<div class="common">
<div class="common_left1"></div>
<p class="common_left2">航空产品兑换</p>
<a id="ga_app_hkcp_more" target="_blank">
<span class="common_right2"></span>
<span class="common_right1">更多</span>
</a>
</div>
<div class="exchangeContent" v-show="aviationLen">
<span class="exchangeContentP1">{{aviation.FlightDate}}</span>
<span class="exchangeContentP2">{{aviation.FlightLine}}</span>
<a id="ga_app_hkcp_tj" onclick="exchangeDetail()">
<a class="exchangeContentP3"></a>
<span class="exchangeContentP4">积分起</span>
<span class="exchangeContentP5">{{aviation.MinPoint}}</span>
</a>
</div>
<div class="line"></div>
<ul class="exchangeItem">
<a target="_blank" href="https://m.ceair.com/pages/checkin/first_index.html" id="ga_app_yxzw">
<li>
<img src="images/seat.png" />
<p>优选座位</p>
</li>
</a>
<a target="_blank" href="https://m.ceair.com/pages/luggage/index.html" id="ga_app_yzxl">
<li>
<img src="images/luggageImg.png" />
<p>逾重行李</p>
</li>
</a>
<a target="_blank" href="http://shopping.ceair.com/Product/List?keyword=%e8%b4%b5%e5%ae%be%e5%ae%a4" id="ga_app_gps">
<li>
<img src="images/vip.png" />
<p>贵宾室</p>
</li>
</a>
<a id="ga_app_jfsc" target="_blank">
<li>
<img src="images/upgradesImg.png" />
<p>积分升舱</p>
</li>
</a>
</ul>
</div>
<!-- 接送机兑换 -->
<div class="pickExchange" v-show="carModel">
<div class="common">
<div class="common_left1"></div>
<p class="common_left2">接送机兑换</p>
<a target="_blank" href="https://car.ceair.com/app/" id="ga_app_jsj_more">
<span class="common_right2"></span>
<span class="common_right1">更多</span>
</a>
</div>
<div class="exchangeTip">
<p class="tipContent">{{ExchangeCarModel.Title}} </p>
<!-- <a class="tipRig"></a> -->
</div>
</div>
<!-- 积分商城兑换 -->
<div class="iconExchange" v-show="mallModel">
<div class="common">
<div class="common_left1"></div>
<p class="common_left2">积分商城兑换</p>
<a href="https://shopping.ceair.com" target="_blank" id="ga_app_jfsc">
<span class="common_right2"></span>
<span class="common_right1">更多</span>
</a>
</div>
<ul class="exchangeList">
<li v-for="(exchangeList,index) in mall" v-show="Object.keys(mall).length > 0">
<a v-bind:href="exchangeList.ProductLinkUrl" :id=`ga_app_jfcp${index+1}`>
<img v-bind:src="exchangeList.ProductImageUrl" />
<p class="productName">{{exchangeList.ProductName}}</p>
<div class="color">
<span>{{exchangeList.MinPoint | intW}}</span>积分
</div>
</a>
</li>
</ul>
</div>
<!-- 酒店兑换 -->
<div class="hotelExchange" v-show="hotelModel">
<div class="common">
<div class="common_left1"></div>
<p class="common_left2">酒店兑换</p>
<a href="https://hotels.ceair.com/app/" target="_blank" id="ga_app_jd_more">
<span class="common_right2"></span>
<span class="common_right1">更多</span>
</a>
</div>
<ul class="hotelList">
<li v-for="(hotelList,index) in hotel" v-show="Object.keys(hotel).length > 0">
<a v-bind:href="hotelList.HotelLinkUrl" :id=`ga_app_jdcp${index+1}`>
<img v-bind:src="hotelList.HotelImageUrl" />
<p class="productName">{{hotelList.HotelName}}</p>
<div class="use">最高可用</div>
<div class="color">
<span>{{hotelList.MinPoint | int}}</span>
积分
</div>
</a>
</li>
</ul>
</div>
</main>

</div>
<script type="text/javascript" src="dest/js/lib/vue.js"></script>
<script type="text/javascript" src="dest/js/lib/axios.min.js"></script>
<script type="text/javascript" src="dest/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="dest/js/index.min.js"></script>
</body>

</html>

less:

/*初始化样式*/
html {overflow-y:scroll;font-family: "PingFangSC-Light";}
body,*{
padding:0;
margin:0;
box-sizing: border-box;
}
body{
background-color: #F2F2F2;
}
.dn {
display: none!important;
}
li{list-style-type:none;}
img{border:0;display:block; width: 100%;max-width:100%;}
a{text-decoration-line: none;}
.container{
width: 100%;
height: auto;
padding-bottom:50px;
.head{
width: 100%;
height: 128px;
padding:63px 31px 17px 31px;
overflow: hidden;
background: #FAFBFC;
box-shadow: 0 1px 10px 0 rgba(0,132,255,0.30);
color: #333333;
font-size: 34px;
text-align: center;
.iconBack{
display: block;
float: left;
width: 19.9px;
height: 35px;
background: url("..\images\ico_back_blue.png") no-repeat center center;
background-size:100% 100%;
}
}
// common start
.productName{
line-height: 33px;
font-size: 24px;
color: #999999;
text-align: left;
word-wrap: break-word;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.color{
height: 37px;
width: auto;
font-family: "HelveticaNeue-Medium";
font-size: 24px;
color: #FF7F00;
text-align: left;
}
.color span{
font-weight: bold;
font-size: 30px;
}
.common{
width: 100%;
height: 93px;
overflow: hidden;
vertical-align: middle;
padding:32px 30.1px 19px 31px;
.common_left1{
float: left;
width: 4px;
height: 30px;
background: #007AFF;
margin-top:8px;
}
.common_left2{
float: left;
width: 180px;
height: 42px;
line-height: 42px;
font-size: 30px;
color: #333333;
letter-spacing: 0;
margin-left: 12px;
}
.common_right1{
display: block;
float: right;
width: auto;
height: 33px;
line-height: 33px;
font-size: 24px;
color: #999999;
letter-spacing: 0;
margin-right: 10px;
padding-top:2px;
}
.common_right2{
display: block;
float: right;
width: 19.8px;
height: 19.8px;
background: url("..\images\common.png") no-repeat center center;
background-size:auto auto;
margin-top: 8.1px;
}
}
// common end
.aviationExchange{
width: 100%;
background: #fff;
border-bottom: 1px solid #e5e5e5;
.exchangeContent{
width: 100%;
height: 100px;
overflow: hidden;
padding:28.5px 30px 29.5px 32px;
font-size: 30px;
color: #999999;
border-top: 1px solid #E5E5E5;
.exchangeContentP1{
display: block;
float: left;
width: 229px;
text-align: left;
}
.exchangeContentP2{
display: block;
float: left;
width: auto;
color: #333333;
text-align: left;
}
.exchangeContentP3{
display: block;
float: right;
width: 14px;
height: 27.1px;
background: url("..\images\more.png") no-repeat center center;
background-size:100% 100%;
margin-top:6px;
}
.exchangeContentP4{
display: block;
float: right;
margin-right: 22px;
width: 90px;
}
.exchangeContentP5{
display: block;
float: right;
margin-right: 4px;
width: auto;
height: 37px;
line-height: 37px;
font-family: "HelveticaNeue-Medium";
color: #FF9500;
}
}
.line{
width: 690px;
height: 1px;
margin: 0 auto;
background-color: #E5E5E5;
}
.exchangeItem{
width:100%;
height: 197px;
padding:60px 35px 31px 35px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content:space-between;
align-items:center;
vertical-align:middle;
text-align: center;
overflow: hidden;
img{
width: auto;
height: 50px;
display: inline-block;
text-align: center;
}
p{
font-size: 24px;
color: #999999;
margin-top:24.4px;
}
}
}

.pickExchange{
width: 100%;
height: 190px;
background: #FFFFFF;
margin-top:24px;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
.exchangeTip{
width: 100%;
height: 100px;
line-height: 100px;
border-top: 0 solid #979797;
padding-left:32px;
padding-right: 30px;
border-top: 1px solid #E5E5E5;
}
.tipContent{
float: left;
width: 620px;
font-size: 30px;
color: #333333;
}
.tipRig{
display: block;
float: right;
width: 14px;
height: 27.1px;
background: url("..\images\more.png") no-repeat center center;
background-size:100% 100%;
margin-top:32.5px;
}
}
.iconExchange{
width: 100%;
height: 390px;
background: #FFFFFF;
margin-top:21px;
.exchangeList{
width:100%;
height: 297px;
padding:31px 38px 28px 32px;
vertical-align:middle;
text-align: center;
border-top: 1px solid #E5E5E5;
overflow: hidden;
li{
display: block;
float: left;
margin-left:103px;
width: 158px;
height: 100%;
}
:nth-child(1){
margin-left:0;
}
img{
width: auto;
height: 120px;
display: inline-block;
text-align: center;
}
p{
width: 158px;
height: 66px;
margin-top:15.1px;
}
div{
margin-top: 3px;
}
}
}
.hotelExchange{
width: 100%;
height:430px;
background: #FFFFFF;
margin-top:21px;
.hotelList{
width:100%;
height: 337px;
padding:18px 29px 38px 30px;
align-items:center;
vertical-align:middle;
text-align: center;
overflow: hidden;
border-top: 1px solid #E5E5E5;
li{
display: block;
float: left;
margin-left: 90.5px;
width: 170px;
height: 100%;
}
:nth-child(1){
margin-left: 0;
}
img{
width: 170px;
height: 130px;
display: inline-block;
text-align: center;
}
p{
width: 170px;
height: 66px;
margin-top:15px;
}
.use{
height: 33px;
width: 170px;
font-family: "PingFangSC-Light";
font-size: 24px;
color: #FF7F00;
text-align: left;
margin-top:3px;
}
}
}
.cover{
position:fixed;
z-index:100;
left:0;
bottom:0;
right:0;
top:0;
}

.loading-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
animation-duration: 1s;
animation-fill-mode: both;
z-index:120;


}
.loading-img {
margin: 0 auto;
width: 108px;
height: 128px;
background: url('../images/penguin.png') no-repeat;
background-size: 100% auto;
}
.loading-animate {
margin: 0 auto;
width: 100px;
height: 40px;
background: url(data:../images/gif;base64,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) no-repeat;
background-size: 100% auto;
}
}


js:

import 'layerApp';
import 'layerAppCss';
import baseApp from 'baseApp';
var app = new baseApp();

function parseUrl(url) {
var pattern = /(\w+)=([^\#&]*)/ig,
parames = {};
url = url || window.location.href;
url.replace(pattern, function (attr, key, value) {
parames[key] = decodeURI(value);
});
return parames;
}
var point;

function exchangeDetail() {
window.location.href = "exchange.html?point=" + point;
}
var showlogin = {
//判断客户端类型
ShowCus() {
var u = navigator.userAgent,
w = window.location.href,
t = parseUrl(w);
if (!app.isInApp()) {
return "wap";
}
if (u.match(/Android/i) != null) { //android设备
return "Android";
} else if (u.match(/iPhone|iPod/i) != null) { //IOS
return "IOS";
} else {
return "WP";
}
},
//跳转原生(机票兑换、积分升舱)
morehref() {
var customer = showlogin.ShowCus();
var url = window.location.href;
url = url.replace(/\&/g, '&amp;');
var title = "更多兑换";
switch (customer) {
case "wap":
break;
case "Android":
$("#ga_app_hkcp_more").click(function () {
jpdh.gotoJPDH();
});
$("#ga_app_jfsc").click(function () {
gotourl.clickOngotoEWP('http://192.168.8.88:4002/app_s/run/?id=ch_ddgl');
})

break;
case "IOS":
$("#ga_app_hkcp_more").click(function () {
gotoJPDH();
});
$("#ga_app_jfsc").click(function () {
clickOngotoEWP("http://192.168.8.88:4002/app_s/run/?id=ch_ddgl");
})
break;
case "WP":
break;
}
}
}

//http://10.66.29.103:8201/api/pc/portal/point/exchange
var vm = new Vue({
el: "#app",
data: {
aviation: {},
mall: {},
hotel: {},
ExchangeCarModel: {},
isLoading: true,
aviationLen: true,
aviModel: true,
carModel: true,
hotelModel: true,
mallModel: true,
},
beforeMount() {

},
mounted() {
var _this = this;
axios.post('http://10.67.200.70:9001/api/pc/portal/point/exchange')
.then(function (response) {
const data = response.data;
if (data && data.code == -1 && data.data) {
let {
ExchangeAviationModel = {}, ExchangeCarModel = {}, ExchangeMallModel = {}, ExchangeHotelModel = {}
} = data.data;
//航空类兑换是否启用
ExchangeAviationModel ? _this.aviModel = true : _this.aviModel = false;
//接送机兑换是否启用
ExchangeCarModel ? _this.carModel = true : _this.carModel = false;
//酒店兑换是否启用
ExchangeHotelModel ? _this.hotelModel = true : _this.hotelModel = false;
//积分商城兑换是否启用
ExchangeMallModel ? _this.mallModel = true : _this.mallModel = false;
//航空类兑换
ExchangeAviationModel = ExchangeAviationModel || {};
//接送机兑换
ExchangeCarModel = ExchangeCarModel || {};
//积分商城兑换
ExchangeMallModel = ExchangeMallModel || {};
//酒店兑换
ExchangeHotelModel = ExchangeHotelModel || {};

_this.aviation = ExchangeAviationModel.RecommedFlight || {};
//航空类兑换---7800积分起 是否启用
(_this.aviation && _this.aviation.FlightDate) ? _this.aviationLen = true: _this.aviationLen = false;

_this.ExchangeCarModel = ExchangeCarModel || {};

_this.mall = ExchangeMallModel.RecommendProduct && ExchangeMallModel.RecommendProduct.length ? ExchangeMallModel.RecommendProduct.splice(0, 3) : [];

_this.hotel = ExchangeHotelModel.RecommendHotel && ExchangeHotelModel.RecommendHotel.length ? ExchangeHotelModel.RecommendHotel.splice(0, 3) : [];
//积分商城兑换是否启用
(_this.mall && _this.mall.length) > 0 ? _this.mallModel = true : _this.mallModel = false;
} else if (data.httpcode == 500) {
//四个模块全部禁用
_this.aviModel = false;
_this.carModel = false;
_this.hotelModel = false;
_this.mallModel = false;

}
}).finally((res) => {
this.isLoading = false;
document.getElementById('mainContent').className = ''
})
.catch(function (error) {
console.warn(error)
});
showlogin.morehref();
},
methods: {
even: function (number) {}
},
computed: {

},
filters: {
intW: function (value) {
value = value.replace(/,/g, '').split(".")[0];
if (value.length > 4) {
value = parseInt(value) / 10000 + "万";
} else {
value = parseInt(value);
}
return value
},
int: function (value) {
value = value.replace(/,/g, '').split(".")[0];
value = parseInt(value);
return value
}
}
});


效果图:


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页