网站首页/ php及前端/ vue初实践之简单加载页面<一>
好用的记账软件,电脑手机都能用-聚宝盆记账易
vue初实践之简单加载页面<一>
编辑时间：2019-11-27 作者：金满斗 浏览量：1872 来源：原创

vue现在比较火，可是我一直没怎么学。

其实我认为最简单的学习就是实践，昨天把一个用jq实现的老页面用vue实现了下，确实很方便。这是最初版本。

看不懂是正常的。这个本来就是自己的一个记录。 



codelayui.code
  1. <style>
  2.     .btn-circle .layui-icon {font-size: 18px;}
  3. </style>
  4. <!-- 正文开始 -->
  5. <div class="layui-fluid" id="Business_lst_html" >
  6.     <div class="layui-row layui-col-space15" >
  7.           <div class="layui-col-xs12">
  8.              <div class="layui-card">
  9.                     <div class="layui-card-body">
  10.                     <div class="layui-form" lay-filter="butsinLstFormTop" >
  11.                             <div class="layui-block layui-form" style="margin-bottom:10px;"> 
  12.                                     <input type="type" name="seachTest" class="myseach-input"  lay-verify="required"  placeholder="按事项关键字搜索"  />
  13.                                     <button class="layui-btn icon-btn layui-btn-sm myseach"  lay-filter="seachButsin" lay-submit >
  14.                                         <i class="layui-icon">&#xe615;</i>搜
  15.                                     </button>
  16.                                 </div>
  17.                         
  18.                             <div class="layui-btn-container">
  19.                                 <button class="layui-btn btn-circle"  @click="openWin()" style="bottom: 60px; z-index: 9999;font-size: 18px" title="增加业务">
  20.                                     <i class="layui-icon">&#xe654;</i>
  21.                                 </button>
  22.                                 
  23.                                 <!--<button data-tableid="butsinLstTable" ew-event="exportCsv" class="layui-btn icon-btn layui-btn-sm">
  24.                                     <i class="layui-icon">&#xe67d;</i>导出
  25.                                 </button>-->
  26.                                 <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="only_debts">
  27.                                     只看欠款
  28.                                 </button>
  29.                                 <button class="layui-btn layui-btn-sm layui-btn-danger" v-on:click="wait_works(1)">
  30.                                     待处理
  31.                                 </button>
  32.                                 <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="wait_works(2)">
  33.                                     处理中
  34.                                 </button>
  35.                                 <button class="layui-btn layui-btn-sm" v-on:click="wait_works(3)">
  36.                                     待结账
  37.                                 </button>
  38.                               
  39.                               </div>
  40.                        
  41.                     </div>
  42.                   </div>   
  43.                 </div> 
  44.             </div>
  45.         </div>
  46.       
  47.         <div class="layui-row layui-col-space15" id="Business_html">
  48.             <div class="layui-col-xs12 layui-col-sm6 layui-col-md6 mymain"    v-for="(obj,index) in listData"  v-bind:key="obj.id" >
  49.                 <div class="layui-card">
  50.                     <div class="layui-card-body">
  51.                     <div class="layui-text">
  52.                             <template v-if="obj.img_url != 'assets/images/default.png' ">
  53.                                 <div class="user-text-head" >
  54.                                         <img  @click="imgprev(obj.img_url)"  v-bind:src=`${obj.img_url}?x-oss-process=style/thumb`  v-bind:layer-src="obj.img_url" />
  55.                                 </div>
  56.                             </template>
  57.                         <div class="con-right ">
  58.                             <h3>事项</h3>
  59.                             <p>{{obj.matters}} </p>
  60.                             <p>{{obj.bus_detailed}}</p>
  61.                         </div>
  62.                         <div class="layui-clear"></div>
  63.                         <div class="layui-text"><span>{{obj.create_time}}</span><span class="pull-right" style="color:#FF5722;" >￥{{obj.actual_pay}}<span></div>
  64.                         <template v-if="obj.phone">
  65.                              <div class="layui-text" >
  66.                                     <span>客户：{{obj.user_name}}</span>
  67.                                     <span style="margin-left:10px;">{{obj.phone}}</span>
  68.                                     <a v-bind:href=`tel:${obj.phone}` class=" pull-right layui-btn layui-btn-primary layui-btn-xs">直拨电话</a> 
  69.                             </div>
  70.                         </template>
  71.                         <div class="layui-text layui-clear" style="margin-top:5px;">
  72.                                 <a v-if="obj.status == 1 "  class="layui-btn layui-btn-danger layui-btn-xs" @click="openWin(index)">{{obj.status_text}}</a>
  73.                                 <a v-else-if="obj.status == 2 " class="layui-btn layui-btn-normal layui-btn-xs"  @click="openWin(index)">{{obj.status_text}}</a>
  74.                                 <a v-else-if="obj.status == 3 " class="layui-btn  layui-btn-xs" @click="openWin(index)">{{obj.status_text}}</a>
  75.                                 <template v-else  class="layui-btn  layui-btn-xs">
  76.                                         <span v-if="obj.dabt == 0  "  >完成</span>
  77.                                         <a v-else  class="layui-btn  layui-btn-xs"  @click="openWin(index)"  >欠款{{obj.dabt}}</a>
  78.                                 </template>
  79.                                 <span  v-if="obj.status == 10 " class="layui-ml10">收款:{{obj.pay_type_title}}</span>
  80.                                 <button class="layui-btn layui-btn-xs layui-btn-primary"  @click="del(index)"   style="float: right;"><i class="layui-icon">&#xe640;</i> 删除</button>
  81.             <button class="layui-btn layui-btn-xs layui-btn-primary"   @click="openWin(index)" style="float: right;margin-right: 10px;"><i class="layui-icon">&#xe642;</i> 修改</button>     
  82.                         </div>
  83.                 
  84.               </div>
  85.             </div>
  86.         </div>
  87.             </div>
  88.         </div>
  89. </div>
  90.   
  91. <script >
  92. layui.use(['layer', 'form',  'config','common'],
  93. function () {
  94. "use strict";
  95. var $ = layui.jquery;
  96. var layer = layui.layer;
  97. var form = layui.form;
  98. var config = layui.config;
  99. var my_html_data = {
  100.             title:'业务',
  101.             mainId:"#Business_lst_html",
  102.             geturl:'Business/apilst',
  103.             addurl:"business/gethtml/method/business_add/",
  104.             searchsUrl:'Business/searchs',        //搜索用地址
  105.             delurl:'Business/del',
  106. }
  107. var vm = new Vue({
  108.         el: '#Business_lst_html',
  109.         data: {
  110.             listData:[],
  111.             initData:my_html_data,
  112.             searchData:{   //请求搜索时的对象
  113.                 'page': 1,
  114.                 'limit': 30,
  115.                 'search':[]
  116.             }          
  117.         },
  118.         methods: {
  119.             //初始加载
  120.             gethtml:function(url){
  121.                 let _that = this;
  122.                 admin.req(url,_that.searchData, function (res) { 
  123.                         if(res.code != 0) return wx.miniProgram.navigateTo({url:'/pages/start/start'});  
  124.                        // 如果超过了500条，就清空免得影响性能，这么长谁看
  125.                        if(_that.listData.length > 500){
  126.                          _that.listData = [];
  127.                        } 
  128.                     _that.listData.push.apply( _that.listData,res.data) ;   //数组加入原来数组
  129.                     if(_that.listData.length ==0){
  130.                           layer.msg("暂无数据");
  131.                        }
  132.                     }, 'POST');
  133.             },
  134.             //页面参数重新初始化
  135.             seachInit:function(){
  136.                 this.searchData.limit = 1;
  137.                 this.searchData.limit = 10;
  138.                 this.listData=[];
  139.             },
  140.             //只看欠账
  141.             only_debts:function(){
  142.                 this.seachInit();
  143.                 this.searchData.search = {arrears:1};
  144.                 this.gethtml(config.base_server + this.initData.searchsUrl);
  145.             },
  146.             //看工作状态
  147.             wait_works:function(status_text){
  148.                 this.seachInit();
  149.                 this.searchData.search = {status:status_text};
  150.                 this.gethtml(config.base_server + this.initData.searchsUrl);
  151.            
  152.             },
  153.             //绑定微信预览图片接口事件
  154.             imgprev:function(src){
  155.                 wx.previewImage({
  156.                 current: src, // 当前显示图片的http链接
  157.                 urls: [src] // 需要预览的图片http链接列表
  158.                 });
  159.             },
  160.             //打开窗口事件
  161.             openWin(tabid){
  162.                 let _that = this;
  163.                 let id = (tabid &&(tabid !='undefined')) ? 1 : 0;       //因为js中0算假，因此加1判断
  164.                 let title = id ? "修改":"增加";
  165.                 let url = id ? _that.initData.addurl+'/id/'+_that.listData[tabid].id :  _that.initData.addurl;
  166.                 url = config.base_server + url;
  167.                 admin.open({
  168.                     title: title + _that.initData.title,
  169.                     url: url,
  170.                     end:function(){
  171.                         if(id){
  172.                             let data = admin.getTempData('tr_temp_data');
  173.                             console.log(data);
  174.                             _that.listData.splice(tabid,tabid+1,data);
  175.                         }else{
  176.                             let data = admin.getTempData('tr_temp_data');
  177.                             _that.listData.unshift(data);      //数组插入到首位
  178.                         }
  179.                         
  180.                     }
  181.                     
  182.                 });
  183.             },
  184.             del:function(tabid){
  185.                 let _that = this;
  186.                 layer.confirm('确定删除吗?注意,删除后不可恢复', function(index){
  187.                         admin.req(_that.initData.delurl,{id:_that.listData[tabid].id}
  188.                         ,function(data){
  189.                             if(data.code==1001){
  190.                                 _that.listData.splice(tabid, 1);
  191.                             }
  192.                             layer.msg(data.msg);
  193.                         },'POST'
  194.                             
  195.                         );
  196.                         layer.close(index);
  197.                  });  
  198.             } 
  199.         },
  200.         created:function(){     //实例被创建后执行代码
  201.             this.searchData.limit = 1;
  202.             this.searchData.limit = 10;
  203.             this.gethtml(config.base_server + this.initData.geturl);
  204.         },
  205.        
  206.     })
  207. })
  208.  
  209. </script>

还有下拉加载没做，慢慢做。实践了一下，真有隔代杀的感觉。

好用的记账软件,电脑手机都能用-聚宝盆记账易
来说两句吧
    • 请先说点什么
    热门评论
    1873人参与，0条评论www
    当前导航
    电脑基础 aardio语言 php及前端 C及单片机 linux及其它
    好用记账软件、聚宝盆记账易
    热文排行
    最近分享
    拼多多优惠卷合集
    友情链接