<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title>推荐</title>
|
<link rel="stylesheet" type="text/css" href="css/doui.min.css"/>
|
<script src="js/doui.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="js/publicFunction.js" type="text/javascript" charset="utf-8"></script>
|
<style type="text/css">
|
/*轮播图*/
|
.swiper-pagination{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: center; justify-content: center; }
|
.swiper-container-horizontal>.swiper-pagination-bullets{ width: 94%; left: 3%; bottom: 8px; border-radius: 0.04rem; background-color: rgba(255,255,255,0.4); }
|
.swiper-pagination-bullet{ -webkit-flex: 1; flex: 1; height: 0.08rem; border-radius: 0.04rem; background: transparent; }
|
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0; }
|
.swiper-pagination-bullet-active{ background-color: white; opacity: 1; }
|
/*白色圆弧盘*/
|
.whitePan{ width: 7.14rem; margin-left: 0.18rem; padding-bottom: 0.1rem; background-color: white; border-radius: 0.3rem; }
|
/*问题标题*/
|
.contitle{ width: 6.5rem; margin-top: 0.42rem; line-height: 1.2; color: #3399CC; }
|
/*已经下架*/
|
.sp1_xiaJiaWai{ width: 100%; height: 100%; border-radius: 0.1rem; position: absolute; left: 0; top: 0; background-color: rgba(102,102,102,0.6); }
|
.sp1_xiaJia{ width: 1.02rem; height: 1.02rem; position: absolute; left: 0; top: 0; }
|
</style>
|
<script type="text/javascript">
|
doui.importSet([
|
'css/yesApp.css',
|
'css/swiper.min.css',
|
'http://cdn.yeshitv.com/js/vue.min.js',
|
'js/swiper.min.js',
|
'js/yesApp.js',
|
'js/wangEditor.min.js',
|
'js/wangEditor.config.js',
|
]);
|
</script>
|
</head>
|
|
<body style="display:none;">
|
<div id="allwai" class="heightenBox fontMobile">
|
|
<!--预留轮播图区域-->
|
<div v-show="swiper.list.length>0">
|
<!--轮播图插件-->
|
<div class="swiper-container">
|
<div class="swiper-wrapper">
|
<div v-for="(item, index) in swiper.list" class="swiper-slide">
|
<div class="home_lunbo fboxRow Xcenter Ycenter" v-on:click="lunboImgClick(item)">
|
<img style="width:100%; height:100%;" v-bind:src="item.src"/>
|
</div>
|
</div>
|
</div>
|
<div class="swiper-pagination"></div>
|
</div>
|
</div>
|
|
<!--内容区域-->
|
<div style="width:7.5rem; padding-top:0.18rem; padding-bottom:0.18rem;">
|
<!--白色圆弧盘-->
|
<div v-show="pushCon.title" class="whitePan fboxCol Xstart Ycenter">
|
|
|
<!--推送标题-->
|
<div class="font36 contitle">{{pushCon.title}}</div>
|
|
|
<!--推送内容-->
|
<div style="width:6.9rem; margin-bottom:0.05rem;">
|
<!--富文本编辑器-->
|
<div id="editor1"></div><!--菜单栏隐藏-->
|
<div id="editor2"></div><!--正文编辑区（禁止编辑）-->
|
</div>
|
|
|
<!--一个商品单框-->
|
<div v-for="(item, index) in table.list" class="sp1 fboxRow" style="width:100%; border-radius:0.2rem;" v-on:click="if(item.state==0){ spdanClick(item.auctionId); } else{ doui.showToast('该商品已下架'); }">
|
|
<!--商品图片-->
|
<div class="sp1_img">
|
<img class="sp1_imgsrc" src="img/flq/sp_imgDef.png"/>
|
<img class="sp1_imgsrc" v-bind:src="item.pictUrl" />
|
<div v-if="item.state==1" class="sp1_xiaJiaWai"></div>
|
<img v-if="item.state==1" class="sp1_xiaJia" src="img/AppPage/pushToday/goodsFalse.png"/>
|
</div>
|
|
<div class="sp1_content fboxCol">
|
|
<!--商品标题栏-->
|
<div class="sp1_title fboxRow Xstart Ycenter">
|
<!--标题文字-->
|
<div class="sp1_titleFont font-ell2">{{item.title}}</div>
|
<!--来源-->
|
<div class="sp_type">
|
<img v-if='item.shopType==1' src="img/flq/sp_type1.png" />
|
<img v-else-if='item.shopType==2' src="img/flq/sp_type2.png" />
|
</div>
|
</div>
|
|
<!--返利-->
|
<div class="fboxRow Xstart Ycenter" style="width:100%; margin-top:0.2rem;">
|
<!--返利-->
|
<div class="fboxRow Xstart Ycenter">
|
<div class="spF_fan"><img src="img/flq/sp_fan.png"/></div>
|
<div v-if="item.taoBaoHongBaoInfo.hongbao>0" class="sp1_fanFont">￥{{item.taoBaoHongBaoInfo.hongbao}}</div>
|
<div v-else-if="item.taoBaoHongBaoInfo.hongbao<=0" class="sp1_fanFont">{{item.taoBaoHongBaoInfo.rate}}</div>
|
<div v-else class="sp1_fanFont">￥0</div>
|
</div>
|
<!--空白-->
|
<div class="flex1"></div>
|
<!--销量-->
|
<div class="sp1_xiaoFont">月销 {{item.salesCount}}</div>
|
</div>
|
|
<!--空白区域-->
|
<div class="flex1"></div>
|
|
<!--原价-->
|
<div class="fboxRow Xstart Ycenter" style="margin-bottom:0.1rem;">
|
<div v-if="item.shopType==1" class="sp1_yuanFont">淘宝价￥{{item.zkPrice}}</div>
|
<div v-else-if="item.shopType==2" class="sp1_yuanFont">天猫价￥{{item.zkPrice}}</div>
|
<div v-else class="sp1_yuanFont">原价￥{{item.zkPrice}}</div>
|
</div>
|
|
<!--价格栏-->
|
<div class="fboxRow Xstart Ycenter">
|
<!--现价数目-->
|
<div class="ziF_red fboxRow Xstart Ybaseline">
|
<div class="font24">￥</div>
|
<div v-if="item.taoBaoQuanInfo" class="font40 font-weight">{{item.quanPrice}}</div>
|
<div v-else class="font40 font-weight">{{item.zkPrice}}</div>
|
</div>
|
<!--空白-->
|
<div class="flex1"></div>
|
<!--优惠券-->
|
<div v-if="item.taoBaoQuanInfo" class="sp1_quan spF_quanBg">{{item.taoBaoQuanInfo.couponAmount}}元券</div>
|
</div>
|
|
</div>
|
|
</div>
|
|
|
</div>
|
</div>
|
|
<div class="do-scrollLoading"></div>
|
|
</div>
|
</body>
|
|
</html>
|
|
|
<!--编辑器-->
|
<script type="text/javascript">
|
|
// 编辑器申明
|
var editor = null;
|
// 轮播图申明
|
var mySwiper = null;
|
// vue申明
|
var vm = null;
|
|
doui.onReady(function()
|
{
|
// vue 初始化
|
vm = new Vue({
|
el: "#allwai",
|
// 数据
|
data: {
|
// 轮播图
|
swiperChange: false,
|
swiper: { list: [], },
|
|
// 推送内容
|
pushCon: {
|
id: null,
|
title: "",
|
html: "",
|
},
|
|
// 表格
|
table: {
|
yema: 1,
|
yemamax: 1,
|
pagesize: 20,
|
list: [],
|
},
|
},
|
// 数据监听
|
updated: function () {
|
// 轮播图组件更新
|
if (vm.swiperChange == true && $(".swiper-wrapper").children().length > 0)
|
{
|
mySwiper.update();
|
vm.swiperChange = false;
|
console.log("轮播图更新成功");
|
}
|
},
|
watch: {
|
// 深度监听，可监听到对象、数组的变化
|
'swiper.list': {
|
handler (val, oldVal) {
|
console.log("轮播图数据发生变化");
|
vm.swiperChange = true;
|
},
|
deep:true
|
},
|
},
|
// 初始事件
|
methods: {
|
creatPushCon: function () { vm.pushCon.id = null; vm.pushCon.title = ''; vm.pushCon.html = ''; },
|
creatTable: function () { vm.table.yema = 1; vm.table.yemamax = 1; vm.table.list = new Array(); },
|
},
|
});
|
|
|
// 关闭左上角“叉叉”按钮
|
yesApp.closeBtnHidden();
|
|
|
// 轮播图实例化
|
mySwiper = new Swiper('.swiper-container',
|
{
|
autoplay: true, //可选选项，自动滑动
|
pagination: { el: '.swiper-pagination', },
|
});
|
|
|
// 编辑器初始化
|
editor = wang.createGet({
|
ids: ['editor1', 'editor2'],
|
menus: [], // 菜单项设置
|
});
|
wang.editorFalse(editor, 'editor2');
|
wang.style_scrollbar();
|
wang.style_menu(editor, 'display:none;');
|
wang.style_editor(editor, 'font-size:0.3rem;');
|
wang.style_img('width:0.3rem; height:0.3rem;');
|
|
|
// 获取地址栏传递值
|
var urldata = doui.urlParamGet();
|
if (urldata.id)
|
{
|
// id赋值
|
vm.pushCon.id = urldata.id;
|
// 请求数据
|
doui.showScrollLoading("加载推荐^_^", function(){ tableGet(); });
|
}
|
else { doui.showToast("获取推荐ID失败"); }
|
|
|
// 轮播图
|
Get_lunbo();
|
|
|
document.body.style.display = "block";
|
});
|
|
|
|
// =================================================================== 页面事件
|
// 轮播图点击
|
function lunboImgClick (itemC)
|
{
|
if (itemC.params)
|
{
|
yesApp.navigatorTo(itemC.jumpDetail, itemC.params, true);
|
}
|
}
|
|
|
|
// =================================================================== 数据请求
|
// 轮播图
|
function Get_lunbo ()
|
{
|
// 数据准备
|
var myurl = getHttp() + '/api/apph5/v1/swiper/getpicture';
|
var mydata = doui.AjaxData({ card: "h5_pushToday" });
|
// 数据请求
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) {}
|
// 轮播图保存
|
else { vm.swiper.list = res.data.result_list; }
|
});
|
}
|
|
// 获取列表
|
function tableGet ()
|
{
|
// 数据准备
|
var myurl = getHttp() + "/api/apph5/v1/push/getpushgoods";
|
var mydata = doui.AjaxData({
|
id: vm.pushCon.id,
|
page: vm.table.yema,
|
});
|
|
// 数据请求
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.hideScrollLoading(); doui.showToast(res.msg); }
|
else
|
{
|
// 标题赋值
|
vm.pushCon.title = res.data.title;
|
// 内容赋值(html代码)
|
vm.pushCon.html = res.data.content;
|
wang.valueSet(editor, vm.pushCon.html);
|
// 列表赋值
|
vm.table.list = res.data.result_list;
|
// 取消弹框
|
doui.hideScrollLoading();
|
}
|
});
|
}
|
</script>
|
