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

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

上一篇 下一篇
本文给大家带来的是微信小程序安装维修处理记录任务列表设计制作开发教程,制作好以后效果图如下:
一、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>
 
二、wxss样式文件代码如下:
/* pages/work_list/work_list.wxss */
.topBox{
  background: white;
  padding:10px 0;
  text-align: center;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 11;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.08);
}
.topBox .item{
  width: 33.3%;
  color: gray;
  font-size: 14px;
  position: relative;
}
.topBox .item.active{
  color: #45a9fd;
}
.topBox .item.active::after{
  content: '';
  position: absolute;
  height: 4px;
  width: 60%;
  left: 20%;
  bottom:-8px;
  background: #45a9fd;
  border-radius: 100px;
}
.dataList{
  margin-bottom: 0;
}
.btnBox{
  padding: 10px;
  background: white;
  text-align: right;
}
.btnBox .btn{
  display: inline-block;
  margin-left: 10px;
  padding: 10px 20px;
  border-radius: 4px;
}
.btnBox .btn.btn1{
   color: #2c98ef;
   border: 1px solid #2c98ef;
}
.btnBox .btn.btn2{
     background-image:linear-gradient(to right,#78d3fe,#3ca4fb);
     color: white;
}
.listBox{
  margin-bottom: 10px;
}
三、js页面代码如下:
// pages/work_list/work_list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabindex:1,
    contentActive:1,
    boxdata1: [
      { date: '2016-02-15', addr: '高新区福年广场T5', product: '鱼鹰4号金色版', user: '王先生', order: 'FDD25454545',remark: '这是客户备注'},
      { date: '2016-02-15', addr: '高新区福年广场T5', product: '鱼鹰4号金色版', user: '王先生', order: 'FDD25454545', remark: '这是客户备注'},
      { date: '2016-02-15', addr: '高新区福年广场T5', product: '鱼鹰4号金色版', user: '王先生', order: 'FDD25454545', remark: '这是客户备注'},
      { date: '2016-02-15', addr: '高新区福年广场T5', product: '鱼鹰4号金色版', user: '王先生', order: 'FDD25454545', remark: '这是客户备注'}
    ],
    boxdata2: [
      { date: '2016-02-15', addr: '高新区福年广场T5', parts: '滤芯部件',remark:'这是问题描述显示', user: '王先生', order: 'FDD25454545' },
      { date: '2016-02-15', addr: '高新区福年广场T5', parts: '滤芯部件', remark: '这是问题描述显示', user: '王先生', order: 'FDD25454545' },
      { date: '2016-02-15', addr: '高新区福年广场T5', parts: '滤芯部件', remark: '这是问题描述显示', user: '王先生', order: 'FDD25454545' }
    ],
    boxdata3: [
      { type: '1', date: '2016-02-15', addr: '高新区福年广场T5', parts: '滤芯部件', remark: '这是问题描述显示', user: '王先生', order: 'FDD25454545' },        { type: '2', date: '2016-02-15', addr: '高新区福年广场T5', parts: '滤芯部件', remark: '这是问题描述显示', user: '王先生', order: 'FDD25454545' }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  tapchange:function(event){
    var index = event.currentTarget.dataset.index;
    this.setData({
      tabindex: index,
      contentActive:index
    })
  },
  calltel:function(event){
    var tel = event.currentTarget.dataset.tel;
    wx.makePhoneCall({
      phoneNumber: tel
    })
  },
  go_oveWork:function(){
    wx.navigateTo({
      url: '../over_work/over_work',
    })
  }
})

模板简介:该模板名称为【微信小程序安装维修处理记录任务列表设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 23,671次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 08-01
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信公众平台 自适应 单页式简历模板 微信图片 微信文章 响应式 微信模板 企业网站 微信素材 html5
您可能会喜欢的其他模板