mui ajax

2019/05/13 11:18
阅读数 25

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>直播生活商家端-订单大厅</title>
<script src="../../js/flexible.js"></script>
<script src="../../js/mui.min.js"></script>
<link rel="stylesheet" href="../../fonts/iconfont.css" />
<link rel="stylesheet" href="../../css/mui.min.css" />
<link rel="stylesheet" href="../../css/init.css" />
<link rel="stylesheet" type="text/css" href="../../css/gz_css.css" />

</head>

<body style="background-color: #f7f7f7">
<header class="mui-bar mui-bar-nav gz_bar">
<h1 class="mui-title">订单大厅</h1>
</header>

<div class="mui-content gz_order_index" id="order_index">
<div class="gz_box">
<ul class="mui-table-view gz_order_ul">
<li class="mui-table-view-cell mui-media gz_order_li gz_xiangqing" v-for="val in order" :data-id="val.order_id">
<a href="javascript:;" class="gz_order_li_a">
<div class="gz_order_top">
<span class="gz_order_top_left">订单号:<em>{{val.order_sn}}</em></span>
<span class="gz_order_top_right">{{val.add_time}}</span>
</div>
<div class="gz_order_index_li_body">
<div class="gz_order_body_1">
<h1><em>{{val.order_id}} {{val.consignee}}</em>{{val.mobile}}</h1>

</div>
<div class="gz_order_body_2">
<h1><span>12:00</span><span>前送达</span></h1>
<ul>
<li v-for="val2 in val.goods_list">/*循环套循环*/
<h3>{{val2.goods_name}}</h3>
<h4>x{{val2.goods_num}}</h4>
<h5>¥{{val2.goods_price}}</h5>
</li>
</ul>

</div>

<div class="gz_order_body_3">
<button type="button" class="mui-btn mui-btn-block mui-btn-primary gz_jiedan">接单</button>
</div>
</div>
</a>
</li>

</ul>
</div>
</div>
<div class="gz_button_box_show"></div>

<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script src="../../js/Vue.js"></script>
<script src="../../js/common.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({});//初始化
var order_index_vue = new Vue({
el: '#order_index',
data: {
order: [] //order

},
methods: {
get_shangjia_info: function() {
var that = this;
mui.ajax(site_url + '/Home/Business/getOrderList', {
data: {
token: plus.storage.getItem('token'),
type: 0
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒,超时报错;
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function(data) {
console.log(JSON.stringify(data));
if(data.status == 1) {//状态为1,正常
that.order = data.data,
console.log(JSON.stringify(that.order))
} else {
mui.toast(data.msg)
}

},
error: function(xhr, type, errorThrown) {
console.log('网络错误');
}
});
}

}
})
mui.plusReady(function() {
order_index_vue.get_shangjia_info();
});

$(".gz_order_ul").on("click", ".gz_order_li", function(e) {
console.log(111);
e.stopPropagation();
var id = this.getAttribute("data-id");//获取产品的data-id
// console.log(id);
// alert(id);
mui.openWindow({
url: "../order/order_details.html",
id: "order_details",
extras:{
order_index_id:id
},

})
})

$(".gz_order_ul").on("click", ".gz_jiedan", function(e) {
console.log(1222);
e.stopPropagation(); //阻止冒泡,列表里面有按钮要点击的时候
var jiedan = plus.webview.currentWebview().selfid; //通过id获取页面
var botton = plus.webview.getWebviewById(jiedan);
mui.fire(botton, "jiedan", ''); //自定义事件
})
</script>

</body>

</html>

 

总结:

套数据步骤:

1,套数据时,首先看看是否引入了vue.js和域名;

2,new一个vue

3,vue最外面的父级放上id

4,模拟数据。data:{假数据},让页面展示出来

5,调接口,让页面变活

6,列表页,数据空做判断,数据空提示暂无数据,下拉刷新,上拉加载

注意事项:

1,使用vue时,列表是需要循环出来的, v-for="val in order",{{val.order_sn}}

2,使用ajax时候不要忘记调用

3,使用class,id名,不要忘记.,#

4,事件绑定失败,点击事件不触发:

  1.找到事件的方法,里面console一下,没有在外面在console

  2.页面有没有报错

  3.看绑定事件,名字对不对。class少没有,{}对不对,逗号,冒号,分号,类名点,id#

  4.报错...is not a function   找到了报错页面,是否报错,检查那句报错了,单词跟上面是否对起来了

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
在线直播报名
返回顶部
顶部