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