- <template>
- <!-- 容器 -->
- <div class="container">
- <!-- 标头 -->
- <div class="header" :style="{ height: height }">
- <wxc-minibar background-color="#fff"
- text-color="#1a1a1a"
- :title="titles"
- @wxcMinibarLeftButtonClicked="minibarLeftButtonClick">
- <!-- 图片位置 -->
- <image slot="right" @click="jump('employEdit')" class="icon-add" src="../../../web/assets/images/icon-add.png"></image>
- </wxc-minibar>
- </div>
- <list class="list">
- <!-- list 容器 -->
- <cell class="list-cell" v-for="num in list" @click="jump('employEdit',1)">
- <div class="list-box">
- <image class="menu-img" src="../../../web/assets/images/icon-find-maintenance.png"></image>
- <span class="list-m">
- <text class="set-name">{{num.employeeName+"员工"}}</text>
<!-- <text class="set-addr">{{num.employeePhone}}</text> -->
- </span>
- <image class="icon-triggle" src="../../../web/assets/images/icon-triggle.png"></image>
- </span>
- </div>
- </cell>
- </list>
- </div>
- </template>
- <script>
- import { WxcMinibar,WxcCell,WxcTabPage, WxcPanItem, Utils, BindEnv } from 'weex-ui';
- // 不变的
- const modal = weex.requireModule('modal');
- // 定义变量
- var stream = weex.requireModule('stream');
- export default {
- // 组件
- components: { WxcMinibar,WxcCell },
- data(){
- return{
- height:88,
- titles:'员工管理',
- // 定义 list
- list: []
- }
- },
- created: function() {
- var me = this;
- },
- // 安装
- mounted:function(){
- var me = this;
- console.log(6666666666666);
- // 数据接收发出
- stream.fetch({
- method: 'POST',
- url: '/api/employee/findAll?name='+1,
- type:'json'
- }, function(ret) {
- if(!ret.ok){
- console.log("123");
- me.getJsonpResult = "request failed";
- }else{
- me.list = ret.data;
- // 控制台打印 类似 alert()
- console.log(me.list[0].employeeName+"打印进来了");
- }
- // 响应
- },function(response){
- // 取得进展
- console.log('get jsonp in progress:'+response.length);
- // 接收的字节数
- me.getJsonpResult = "你好!!!:"+response.length;
- console.log('最后返回:'+response.length);
- });
- },
- /*
- stream Demo 演示
- stream.fetch({
- method: 'POST',
- url: POST_URL,
- type:'json'
- }, function(ret) {
- if(!ret.ok){
- me.postResult = "request failed";
- }else{
- console.log('get:'+JSON.stringify(ret));
- me.postResult = JSON.stringify(ret.data);
- }
- },function(response){
- console.log('get in progress:'+response.length);
- me.postResult = "bytes received:"+response.length;
- });
- */
- // 预估
- beforeCreate: function() {
- // 文档标记名
- document.getElementsByTagName("body")[0].style.backgroundColor="#f4f4f4";
- },
- methods: {
- toParams(obj){
- var param = "";
- for(const name in obj){
- if(typeof obj[name] != 'function'){
- param += "&" + "=" + encodeURI(obj[name]);
- }
- }
- return param.substring(1);
- },
- // 小左按钮
- minibarLeftButtonClick () {
- },
- // 小右按钮
- minibarRightButtonClick () {
- modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
- },
- // 点击
- wxcCellClicked (e) {
- console.log(e)
- },
- // 跳转
- jump(urlName,id){
- // this.$router.push({name: urlName,params:{Id:id}});
- /* 第一个参数是跳转路径, 第二个参数是代理商 id*/
- this.$router.push({name: urlName,params:{id:id}});
- }
- }
- };
- </script>
- <style scoped>
- .header{
- z-index: 9999;
- position: fixed;
- top:0;
- width: 100%;
- border-bottom: 1px solid #e5e5e5;
- }
- .icon-add{
- width: 29px;
- height: 29px;
- }
- .container{
- padding-top: 88px;
- }
- .list,.list-cell{
- width: 750px;
- }
- .list{
- padding-bottom: 98px;
- }
- .list-cell{
- padding: 24px 20px;
- border-bottom: 1px solid #f4f4f4;
- background-color: #fff;
- }
- .list-box{
- width: 100%;
- flex-direction: row;
- }
- .text-name{
- margin-bottom: 16px;
- font-size: 28px;
- color: #333333;
- }
- .list-m{
- flex: 1;
- padding:0 0 0 20px;
- }
- .list-r{
- padding-top: 10px;
- }
- .text-status.color-has .color-n{
- display: inline-block;
- padding: 0 4px;
- font-size: 26px;
- background-color: #e5e5e5;
- color: #999;
- border-radius: 4px;
- }
- .set-name{
- font-size: 28px;
- line-height: 100px;
- color: #333333;
- }
- .icon-triggle{
- position: absolute;
- right: 20px;
- top: 50%;
- transform: translateY(-50%);
- width: 17px;
- height: 28px;
- }
- .menu-img{
- width: 100px;
- height: 100px;
- border-radius: 4px;
- }
- </style>
来源: http://www.bubuko.com/infodetail-2581454.html