功能场景:
当点击某个按钮后,地址栏上传值status,获取这个值,触发和值相对应的点击事件,从而进入
$http
查询出相对应的选项(代付款、代发货、待收货……)。
为何不直接在控制器中接这个值,从而查询出相对应的数据呢?
因为视图页面上有vue代码,如果直接进去,没有触发$http
,那么这些vue代码就不显示,只有触发了$http
才能够进入后台取值回到前台去显示。 我在前台中触发$http的是点击事件
。就要实现进入页面后获取值从而触发和值相对应的点击事件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的订单</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/skn/css/header.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/skn/css/achievement.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/skn/css/reset.css">
<link rel="stylesheet" href="__PUBLIC__/skn/css/bui.css" />
<!-- bui.js 依赖于Zepto或jQuer y -->
<script src="__PUBLIC__/skn/js/zepto.js"></script>
<script src="__PUBLIC__/skn/js/bui.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
</head>
<body>
<header>
<div class="head">
<a href="javascript:window.history.back(-1)" class="lpic"><img src="__PUBLIC__/skn/img/back.png"></a>
<p>我的订单</p>
</div>
</header>
<main id="app5">
<div class="bui-page main">
<main>
<div id="uiTab" class="bui-tab">
<div class="bui-tab-head">
<ul class="bui-nav" id="bui-btns">
<li class="bui-btn" @click="indexs" value="10">全部</li>
<li class="bui-btn" @click="indexs" value="0">待付款</li>
<li class="bui-btn" @click="indexs" value="1">待发货</li>
<li class="bui-btn" @click="indexs" value="2">待收货</li>
<li class="bui-btn" @click="indexs" value="3">待评价</li>
</ul>
</div>
<div class="bui-tab-main list_cont">
<ul class="none-style">
<!-- 内容必须在li里面 -->
<li>
<div class="product_order" v-for="item in items">
<div class="product_order_top" v-for="or in item.goods">
<img :src="or.img" alt="">
<dl class="product_order_main">
<dt>{{or.name}}</dt>
<dd v-if ="item.status == 0">未支付</dd>
<dd v-if ="item.status == 1">已支付</dd>
<dd v-if ="item.status ==2">待收货</dd>
<dd v-if="item.status == 3">已收货</dd>
<dd v-if="item.status == 4">已完成</dd>
</dl>
<dl class="product_order_bot"><dt>¥{{or.memprice}}</dt>
<dd>×{{or.num}}</dd>
</dl>
<p class="font">共<span>{{or.num}}</span>件商品合计:{{item.total}}</p>
</div>
<div class="btn">
<button>查看物流</button>
<button>确认收货</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</main>
</div>
</main>
<script>
var app5 = new Vue({
el: '#app5',
data: {
status:'',
items:''
},
methods: {
indexs:function(event){
var e=event.currentTarget;
var status=e.value;
this.$http.post('{:U("Mylist/xianshi")}',{status:status},{emulateJSON:true})
.then(function(res){
this.items=res.data;
console.log(this.items)
})
.catch(function(error){
console.log(error);
});
}
}
});
</script>
</body>
</html>
<script>
window.onload=function(){
var value=location.href.substring(location.href.indexOf("=")+1);
arr=['10','0','1','2','4'];
for(var i=0;i<arr.length;i++)
{
if(value==arr[i])
{
$("#bui-btns").children("li")[i].click();
}
}
}
</script>