功能场景:
当点击某个按钮后,地址栏上传值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="/jquery/3.3.1/jquery.js"></script><script src="/vue/dist/vue.js"></script><script src="/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>