<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title>新手攻略</title>
|
<!--css-->
|
<link rel="stylesheet" type="text/css" href="css/DOUI.min.css"/>
|
<style type="text/css">
|
/*图片效果*/
|
.imgstyle{ width: 100%; height: auto; display: block; }
|
.animt_img{ animation: imgopc 1s; animation-fill-mode: both; animation-timing-function: ease; }
|
@keyframes imgopc{ 0%{ opacity: 0; } 100%{ opacity: 1; } }
|
/*APP下载*/
|
.homeappwai{ width: 94%; height: 3.5rem; padding: 0 3%; position: fixed; left: 0; bottom: 0.5rem; background-color: rgba(0,0,0,0.75); z-index: 50; color: white; }
|
.homeappimg{ width: 2.5rem; height: 2.5rem; margin-right: 0.3rem; }
|
.homeappgo{ width: 4rem; height: 2rem; border-radius: 1rem; background-color: #E5005C; text-decoration: none; color: white; }
|
</style>
|
<!--js-->
|
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
|
<script src="js/DOUI.min.js" type="text/javascript" charset="utf-8"></script>
|
</head>
|
|
<body class="displayNone">
|
<div id="allwai" class="allwai font3" style="background-color: #FDD757;">
|
|
<!--图片列表-->
|
<div style="width: 100%; padding-bottom: 5rem; overflow: scroll;">
|
<div style="width: 100%;height: auto;">
|
|
<!--循环添加-->
|
<div v-for="item in imglist" style="width: 100%; height: auto;">
|
<img v-bind:src="item" class="imgstyle animt_img" onclick="return false"/>
|
</div>
|
|
</div>
|
</div>
|
|
<!--APP下载卡片-->
|
<div v-if="inapp=='false'||inapp==false" class="homeappwai fboxRow Ycenter">
|
<img class="homeappimg" src="img/list_load.png"/>
|
<div>不只领优惠券，APP客户端还返利</div>
|
<div class="flex1"></div>
|
<a class="homeappgo fboxRow Xcenter Ycenter" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.yeshi.ec.rebate">下载</a>
|
</div>
|
|
</div>
|
</body>
|
|
<script type="text/javascript">
|
|
$("body").addClass("displayNone");
|
|
//======================== 页面数据 ================================
|
//数据请求接口
|
var https = "http://flq.yeshitv.com";
|
|
//图片内容信息
|
var imgdata = {
|
inapp: true, //是否在app内部打开
|
id: null, //攻略id
|
imglist: [], //图片列表
|
};
|
|
//图片数据vue实例化
|
var alldata = new Vue({
|
el: "#allwai",
|
data: imgdata,
|
//创建完毕
|
created: function () { $("body").removeClass("displayNone"); },
|
//数据节点渲染完毕
|
updated: function () { var num_all = $('img').length; console.log("图片总张数："+num_all); },
|
});
|
|
//获取地址栏传递参数
|
var urldata = doui.urlParamGet();
|
//获取攻略id
|
if (urldata.id) { imgdata.id = urldata.id; }
|
else { doui.showToast("未获取到攻略id"); }
|
//是否在app内部打开
|
if (urldata.inApp) { imgdata.inapp = urldata.inApp; }
|
|
|
|
//======================== 数据请求 ================================
|
imglistGet();
|
function imglistGet ()
|
{
|
doui.showLoading("获取攻略");
|
//发送数据准备
|
var myurl = "../../api/h5/v1/strategy/strategyPicture";
|
var mydata = doui.AjaxData({
|
id: imgdata.id,
|
});
|
//发起请求
|
$.get({ url:myurl, data:{id: imgdata.id}, success: function(res){
|
res=JSON.parse(res);
|
doui.hideLoading();
|
if (res.code != 0) { doui.showToast(res.msg); }
|
//向图片组中添加数据
|
else { imgdata.imglist = res.data; }
|
}});
|
}
|
|
|
</script>
|
|
</html>
|
