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