<div id="app">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value="">请选择一个商家</option>
<option v-for="(maker, index) in maker_list" :value="maker.mid">{{ maker.name }}</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<a class="layui-btn" :href="maker_qq_url">联系客服</a>
</div>
</div>
</form>
</div>
<script src="layui/layui.js"></script>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
var App = new Vue({
el: '#app',
data: {
selected: 0,
maker_list: [],
maker_qq_url: ''
},
mounted: function () {
this.getMakerList();
},
methods: {
getMakerList: function (e) {
var vm = this;
vm.$http.get('http://hunteryun.com/api/maker/list').then(function (response) {
vm.maker_list = response.data;
vm.$nextTick(function () {
layui.use(['layer', 'form'], function(){
var form = layui.form();
form.on('select', function(data){
App.getMakerQQ(data.value);
});
form.render();
});
})
}, function (response) {
alert('获取商家列表失败！');
});
},
getMakerQQ: function (mid) {
var vm = this;
vm.$http.get('http://hunteryun.com/api/maker/get/qq/'+mid).then(function (response) {
vm.maker_qq_url = 'mqqwpa://im/chat?chat_type=wpa&uin='+response.data+'&version=1&src_type=web&web_src=oicqzone.com';
}, function (response) {
alert('获取商家QQ失败！');
});
}
}
})
</script>
本文转自盛赞！大赞！狂赞！贤心！LayUI完美兼容Vuejs!