最近开始用vue,对其简单地运用记录一下。
首先项目结构如下所示:
要实现的是从发送短信模块带参数跳到下个页面
首先:
在有跳转得页面的跳转按钮用标签包住:
<router-link></router-link>
加上
:to=”{path:’xzjsr’,query: {id:postdata.dept_id}}”
代码如下:
<router-link class="xzjsr" :to="{path:'xzjsr',query: {id:postdata.dept_id}}">
<input type="text" name="" id="" value="" readonly="readonly"/>
<img src="./img/contact.png"/>
</router-link>
在需要接受参数的页面中解析参数:
this.$route.query.id
上面就是获取url参数中的方法。
完整例子如下:
dxfs.html:
<div>
<header class="headerfield">
<div class="button left0" v-on:click="goback">
<span></span>返回
</div>
<div class="title" >短信发送</div>
<div class="button right0"></div>
</header>
<div class='dxfsield'>
<ul class="input-field">
<li>
<label for="">
<span>选择部门{{postdata.dept_id}}</span>
<select name="" v-model="postdata.dept_id" @change="getchange()">
<option value="" v-for="dep in departmentMsg" v-bind:value="dep.dept_id">{{dep.dept_name}}</option>
</select>
</label>
</li>
<li>
<label for="">
<span>接收人{{postxzjsr}}</span>
<!--<input type="text" name="" id="" value="" />-->
<router-link class="xzjsr" :to="{path:'xzjsr',query: {id:postdata.dept_id}}">
<input type="text" name="" id="" value="" readonly="readonly"/>
<img src="./img/contact.png"/>
</router-link>
<!--<select name="" v-model="postdata.recid">
<option value="" v-for="send in SendeeMsg" v-bind:value="send.user_id">{{send.user_name}}</option>
</select>
<img src="./img/contact.png"/>-->
</label>
</li>
<li>
<label for="">
<span>内容</span>
<textarea name="" rows="" cols="" v-model="postdata.content"></textarea>
</label>
</li>
</ul>
<div class="button-field">
<button class="button button-block" @click="sendMsg()">
发送短信
</button>
</div>
</div>
</div>
dxfs.js:
define(['vue', 'txt!../pages/dxfs.html','base'], function(v, dxfshtml) {
var Foo = v.extend({
template: dxfshtml,
data:function(){
base = {
goback:function(){
window.history.back();
},
departmentMsg:[], //部门数据
SendeeMsg:[], //接收人
postdata:{}, //传输数据
postxzjsr:''
};
return base;
},
mounted: function() {
//选择部门模拟数据
base.departmentMsg=[
{
"dept_id":01,
"dept_name":"01"
},
{
"dept_id":02,
"dept_name":"02"
},
{
"dept_id":03,
"dept_name":"03"
},
{
"dept_id":04,
"dept_name":"04"
},
{
"dept_id":05,
"dept_name":"05"
},
{
"dept_id":06,
"dept_name":"06"
},
{
"dept_id":07,
"dept_name":"07"
},
{
"dept_id":08,
"dept_name":"08"
}
]
},
methods:{
//选择部门
getchange:function(){//console.log(base.postdata.id)
base.postxzjsr=base.postdata.id;//console.log(base.postdata.id)
// console.log(base.postxzjsr)
},
// //接收人在一个页面的下拉框
// getSendee:function(){
// base.postdata.inf_account='thapp';
// base.postdata.inf_token='123qwe!@#';
// //base.postdata.id='TEST';
// //base.postdata.id=id;
// base.postdata.id=base.postdata.dept_id;
// console.log(base.postdata.id)
// if(base.postdata.id==undefined){
// baseobj.layerobj.alertmsg("请选择部门信息!");
// }else{
// baseobj.getJsonData('/sendsms/userinfo',base.postdata,function(data){
// console.log(data);
// if(data.Status==1){
// base.SendeeMsg=data.ResultDataInfos;
// }else{
// baseobj.layerobj.alertmsg("立即执行失败!")
// }
//
// });
// }
// },
//发送短息
sendMsg:function(){//console.log(base.postdata)
base.postdata.inf_account='thapp';
base.postdata.inf_token='123qwe!@#';
//base.postdata.recid=base.postdata.;
base.postdata.send_user_account='';
if(base.postdata.dept_id==undefined){
baseobj.layerobj.alertmsg("请选择部门信息!")
}else{
base.postdata.id=base.postdata.dept_id;
console.log("下面要调接口")
}
}
}
});
return Foo;
});
效果如下:
点击接收人,把上面部门的id传到下个页面:
完整代码下载地址:点击这里