欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序安装维修处理记录任务列表设计制作开发教程

    2018-08-01 09:43 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序安装维修处理记录任务列表设计制作开发教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <!--pages/work_list/work_list.wxml-->
    <view class='bgGray'>
    
      <view class='topBox flex align'>
        <view class="item {{tabindex==1 ? 'active':''}}" data-index='1' bindtap='tapchange'>待安装</view>
        <view class="item {{tabindex==2 ? 'active':''}}"  data-index='2' bindtap='tapchange'>待维修</view>
        <view class="item {{tabindex==3 ? 'active':''}}"  data-index='3' bindtap='tapchange'>处理记录</view>
      </view><!--topBox-->
    
    <view class='space50'></view>
    
    <!--class='statu2'  -->
      <view class='contentBox box1' wx:if="{{contentActive==1}}">
         
         <view class='listBox' wx:for="{{boxdata1}}">
          <view class='dataList border-bottom'>
            <view class='list'>安装时间:<text>{{item.date}}</text></view>
            <view class='list'>安装地址:<text>{{item.addr}}</text></view>
            <view class='list'>安装设备:<text>{{item.product}}</text></view>
            <view class='list'>客户姓名:<text>{{item.user}}</text></view>
            <view class='list'>订单编号:<text>{{item.order}}</text></view>
            <view class='list'>客户备注:<text>{{item.remark}}</text></view>
          </view><!-- dataList -->
          <view class='btnBox'>
                <view class='btn btn1' bindtap='calltel' data-tel='8888888'>联系客户</view>
                <view class='btn btn2' bindtap='go_oveWork'>安装完成</view>
          </view>
        </view><!---listBox-->
    
      </view><!--contentBox-->
    
      <view class='contentBox box2'  wx:if="{{contentActive==2}}">
         
         <view class='listBox' wx:for="{{boxdata2}}">
         <view class='dataList border-bottom'>
            <view class='list'>安装时间:<text>{{item.date}}</text></view>
            <view class='list'>安装地址:<text>{{item.addr}}</text></view>
            <view class='list'>维修设备:<text>{{item.parts}}</text></view>
            <view class='list'>客户姓名:<text>{{item.user}}</text></view>
            <view class='list'>订单编号:<text>{{item.order}}</text></view>
            <view class='list'>问题描述:<text>{{item.remark}}</text></view>
          </view><!-- dataList -->
          <view class='btnBox'>
                <view class='btn btn1' bindtap='calltel' data-tel='8888888'>联系客户</view>
                <view class='btn btn2' bindtap='go_oveWork'>维修完成</view>
          </view>
        </view><!---listBox-->
    
      </view><!--contentBox-->
    
    
       <view class='contentBox box3' wx:if="{{contentActive==3}}">
         
         <view class='listBox' wx:for="{{boxdata3}}">
         <view class='dataList border-bottom'>
            <view class='list'>服务类型:
                <text class='statu2' wx:if="{{item.type==1}}">安装</text>
                <text class='statu1' wx:if="{{item.type==2}}">维修</text>
            </view>
            <view class='list'>服务时间:<text>{{item.date}}</text></view>
            <view class='list'>服务地址:<text>{{item.addr}}</text></view>
            <view class='list'>服务设备:<text>{{item.parts}}</text></view>
            <view class='list'>客户姓名:<text>{{item.user}}</text></view>
            <view class='list'>订单编号:<text>{{item.order}}</text></view>
            <view class='list'>问题描述:<text>{{item.remark}}</text></view>
          </view><!-- dataList -->
        </view><!---listBox-->
    
      </view><!--contentBox-->
    
    
    </view>
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议