<!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   找到了报错页面，是否报错，检查那句报错了，单词跟上面是否对起来了

mui ajax的更多相关文章

  1. Mui.ajax请求服务器正确返回json数据格式

    ajax: mui.ajax('http://server-name/login.php',{ data:{ username:'username', password:'password' }, d ...

  2. MUI AJAX Raw请求数据

    提交接口数据,接口方提供的是post请求,body - raw ; 我尝试过JQuery ajax raw 的方式,但是始终无法成功 然后我回想到我用的是mui我就开始考虑用mui.ajax结果就成功 ...

  3. Hbuilder app开发，使用mui.ajax和服务器交互，后台获取不到值，显示null的解决方法

    先上一个能用的js代码: function login() { var uname=document.getElementById("username").value.trim() ...

  4. Mui --- app与服务器之间的交互原理、mui ajax使用

    1.APP与服务器之间的交互原理 app端(客户端)与服务端的交互其实理解起来和容易,客户端想服务器端发送请求,服务器端进行数据运算后返回最终结果.结果可以是多种格式: 1.text 文本格式 2.x ...

  5. MUI ajax数据请求（list）

    服务器返回格式 { "code": "1001", "message": "查询成功", "data" ...

  6. mui.ajax与服务器(SpringMVC)传输json数据

    跨域问题 PC端为了安全,所以禁止跨域.而我使用mui做移动web时,难免会使用pc浏览器进行调试.mui.ajax是允许跨域的.为了可以调试成功,需要对浏览器进行设置及.以360急速浏览器为例,设置 ...

  7. mui ajax 应用的跨域问题

    1.首先在mui.ajax的error函数里出现: “syntaxerror unexpected token <” 这样的错误,那么在 mui.ajax中的type写成  JSONP ,后台需 ...

  8. mui ajax方法

    mui ajax方法详解: mui提供了mui.ajax,在此基础上有分装出mui.get()/mui.getJSON()/mui.post()三个方法. mui.ajax( url [,settin ...

  9. mui.ajax返回type为abort

    最近在使用h5和mui开发app,发现mui.ajax有一个小bug 情况一: 参数和请求路径无误,但是总是调起失败的回调函数,打印出 type=abort (终止请求) 原因: mui.ajax默认 ...

  10. mui ajax提交问题点

    <script type="text/javascript" charset="utf-8"> mui.init(); mui.ajax(__tes ...

随机推荐

  1. BZOJ 1601 [Usaco2008 Oct]灌水 (建图+mst)

    题意: 300个坑,每个坑能从别的坑引水,或者自己出水,i从j饮水有个代价,每个坑自己饮水也有代价,问让所有坑都有谁的最少代价 思路: 先建一个n的完全图,然后建一个超级汇点,对每个点连w[i],跑m ...

  2. 安装MinGW出现 mingw-get: *** ERROR *** Get package:

    个人的解决方法: 1.手机开个热点让电脑连上. 2.在Setting里面讲proxy关闭.

  3. Yandex Big Data Essentials Week1 Unix Command Line Interface File System exploration

    File System Function In computing, a file system or filesystem is used to control how data is stored ...

  4. js发展历史与基础

    最早的浏览器是WWW浏览器 Mosaic浏览器是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器,于1993年问世 浏览器组成部分: 1)shell部分(外壳) 2)内核部分 ① 渲染引擎(语法 ...

  5. 中小企业自建云WAF有多难？只需20分钟！而且：全程免费！

    以往,运营型的web为了安全目的,才使用WAF进行安全防护. 而现如今,WAF对企业web来说,已然成了刚需.为何?等保.网络安全法的硬性要求! 当然,这样要求显然是对的:没有网络安全,就没有国家安全 ...

  6. web测试和app测试

    web测试是b/s结构,app是c/s结构,因此会有很多测试点需要注意: 1.兼容性:web测试需要考虑多个浏览器内核测试,app主要是各种手机(iOS和Android各个型号)不同手机的分辨率.不同 ...

  7. LVS服务原理以及搭建

    一.LVS简介 LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统,目的在于使用集群技术和Linux操作系统实现一个高性能.高可用的服务器.它 ...

  8. centos7.5优化系统脚本（虚拟机下）

    #!/usr/bin/bash #安装常用软件,首先必须自行调整好网卡配置文件,保证可以上网,否则,下列优化会失败 yum -y install wget vim lrzsz bash-complet ...

  9. 查看Linux系统内存、CPU、磁盘使用率和详细信息

    一.查看内存占用 1.free # free -m 以MB为单位显示内存使用情况 [root@localhost ~]# free -m total used free shared buff/cac ...

  10. HTTP 中 GET 与 POST 的区别（详解）

    我们都知道GET和POST是HTTP请求的两种基本方法,最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 很多权威网站总结出的他们的区别: GET在浏览器回退 ...