RaiseYourVoice Alpha冲刺阶段博客目录
一、Scrum Meeting
基本程序已经完成
因为我是一个人一组，所以此处我就放我的代码
index.js
//index.js
//获取应用实例
var app = getApp();
Page({
data: {
offline: false,
remind: '加载中',
list: [
{ id: 5, 'type': 'new', name: '综合新闻', storage: [], url: '', enabled: { guest: true, student: true, teacher: true } },
],
cores: [
[
{ id: 'bx', name: '物业报修', disabled: false, teacher_disabled: false, offline_disabled: true },
{ id: 'sdf', name: '电费查询', disabled: false, teacher_disabled: true, offline_disabled: false },
{ id: 'cj', name: '服务查询', disabled: false, teacher_disabled: true, offline_disabled: false },
{ id: 'ykt', name: '一卡通', disabled: false, teacher_disabled: false, offline_disabled: false },
{ id: 'jy', name: '借阅信息', disabled: false, teacher_disabled: false, offline_disabled: false },
]
],
'active': {
id: 0,
'type': 'all',
data: [],
showMore: true,
remind: '上滑加载更多'
},
loading: false,
user_type: 'guest',
disabledRemind: false,
card: {
'ykt': {
show: true,
data: {
'last_time': '',
'balance': 0,
'cost_status': false,
'today_cost': {
value: [],
total: 0
}
}
},
'jy': {
show: true,
data: {}
},
'sdf': {
show: true,
data: {
'room': '',
'record_time': '',
'cost': 0,
'spend': 0
}
}
},
user: {},
disabledItemTap: true //点击了不可用的页面
},
//分享
onShareAppMessage: function(){
return {
title: 'OUC后勤',
desc: '开发版',
path: '/pages/index/index'
};
},
//下拉更新
onPullDownRefresh: function(){
_this.setData({
'loading': true,
'active.data': [],
'active.showMore': true,
'active.remind': '上滑加载更多',
'page': 0
});
_this.getNewsList();
if(app._user.is_bind){
this.getCardData();
}else{
wx.stopPullDownRefresh();
}
},
onShow: function(){
},
//上滑加载更多
onReachBottom: function () {
var _this = this;
if (_this.data.active.showMore) {
_this.getNewsList();
}
},
//获取新闻列表
getNewsList: function (typeId) {
var _this = this;
if (app.g_status) {
_this.setData({
'active.showMore': false,
'active.remind': app.g_status,
loading: false
});
wx.stopPullDownRefresh();
return;
}
typeId = typeId || _this.data.active.id;
if (_this.data.page >= 5) {
_this.setData({
'active.showMore': false,
'active.remind': '没有更多啦'
});
return false;
}
if (!_this.data.page) {
_this.setData({
'active.data': _this.data.list[0].storage
});
}
_this.setData({
'active.remind': '正在加载中'
});
wx.showNavigationBarLoading();
wx.request({
url: "https://www.ouchq.cn/hq.php?ac=list",
success: function (res) {
if (res.data && res.data.msg === 'success') {
//if (_this.data.active.id != 0) { return false; }
if (res.data.data) {
if (!_this.data.page) {
if (!_this.data.list[0].storage.length || app.util.md5(JSON.stringify(res.data.data)) != app.util.md5(JSON.stringify(_this.data.list[0].storage))) {
var data = {
'page': _this.data.page + 1,
'active.data': res.data.data,
'active.showMore': false,
'active.remind': '像我这么帅的人都是有底线的',
};
for (var i in res.data.data) {
res.data.data[i].type = 'new'
}
data['list[' + 0 + '].storage'] = res.data.data;
_this.setData(data);
} else {
_this.setData({
'page': _this.data.page + 1,
'active.showMore': true,
'active.remind': '上滑加载更多'
});
}
} else {
_this.setData({
'page': _this.data.page + 1,
'active.data': _this.data.active.data.concat(res.data.data),
'active.showMore': true,
'active.remind': '上滑加载更多',
});
}
} else {
_this.setData({
'active.showMore': false,
'active.remind': '没有更多啦'
});
}
} else {
app.showErrorModal(res.data.message);
_this.setData({
'active.remind': '加载失败'
});
}
},
fail: function (res) {
app.showErrorModal(res.errMsg);
_this.setData({
'active.remind': '网络错误'
});
},
complete: function () {
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
_this.setData({
loading: false
});
}
});
},
//获取焦点
changeFilter: function (e) {
this.setData({
'active': {
'id': e.target.dataset.id,
'type': e.target.id,
data: [],
showMore: true,
remind: '上滑加载更多'
},
'page': 0
});
this.getNewsList(e.target.dataset.id);
},
onLoad: function(){
var _this = this;
if (app._user.is_bind) {
this.setData({
user_type: !app._user.teacher ? 'student' : 'teacher'
});
} else {
this.setData({
user_type: 'guest',
'active.id': 5,
'active.type': 'new'
});
}
this.setData({
'loading': true,
'active.data': [],
'active.showMore': true,
'active.remind': '上滑加载更多',
'page': 0
});
this.getNewsList();
_this.setData({
remind:''
})
this.login();
},
login: function(){
},
response: function(status){
var _this = this;
if(status){
if(status != '离线缓存模式'){
//错误
_this.setData({
'remind': status
});
return;
}else{
//离线缓存模式
_this.setData({
offline: true
});
}
}
_this.setData({
user: app._user
});
//判断绑定状态
if(!app._user.is_bind){
_this.setData({
'remind': '未绑定'
});
}else{
_this.setData({
'remind': '加载中'
});
_this.getCardData();
}
},
disabled_item: function(){
var _this = this;
if(!_this.data.disabledItemTap){
_this.setData({
disabledItemTap: true
});
setTimeout(function(){
_this.setData({
disabledItemTap: false
});
}, 2000);
}
},
getCardData: function(){
var _this = this;
//判断并读取缓存
if(app.cache.kb){ kbRender(app.cache.kb); }
if(app.cache.ykt){ yktRender(app.cache.ykt); }
if(app.cache.sdf){ sdfRender(app.cache.sdf); }
if(app.cache.jy){ jyRender(app.cache.jy); }
if(_this.data.offline){ return; }
wx.showNavigationBarLoading();
//课表渲染
function kbRender(info){
var today = parseInt(info.day),
lessons = info.lessons[today===0 ? 6 : today-1], //day为0表示周日(6)，day为1表示周一(0)..
list = [],
time_list = _this.data.card.kb.time_list;
for(var i = 0; i < 6; i++){
for(var j = 0; j < lessons[i].length; j++){
var lesson = lessons[i][j];
if(lesson.weeks && lesson.weeks.indexOf(parseInt(info.week)) !== -1){
var begin_lesson = 2*i+1, end_lesson = 2*i+lesson.number;
list.push({
when: begin_lesson+' - '+end_lesson+'节'
+'（'+time_list[begin_lesson-1].begin+'~'+time_list[end_lesson-1].end+'）',
what: lesson.name,
where: lesson.place.trim()
});
}
}
}
_this.setData({
'card.kb.data': list,
'card.kb.show': true,
'card.kb.nothing': !list.length,
'remind': ''
});
}
//获取课表数据
var kb_data = {
id: app._user.we.info.id,
};
if(app._user.teacher){ kb_data.type = 'teacher'; }
var loadsum = 0; //正在请求连接数
loadsum++; //新增正在请求连接
wx.request({
url: app._server + '/api/get_kebiao.php',
method: 'POST',
data: app.key(kb_data),
success: function(res) {
if(res.data && res.data.status === 200){
var info = res.data.data;
if(info){
//保存课表缓存
app.saveCache('kb', info);
kbRender(info);
}
}else{ app.removeCache('kb'); }
},
complete: function() {
loadsum--; //减少正在请求连接
if(!loadsum){
if(_this.data.remind == '加载中'){
_this.setData({
remind: '首页暂无展示'
});
}
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
}
}
});
//一卡通渲染
function yktRender(list){
if(list.length > 0){
var last = list[0],
last_time = last.time.split(' ')[0],
now_time = app.util.formatTime(new Date()).split(' ')[0];
//筛选并计算当日消费（一卡通数据有一定延迟，无法成功获取到今日数据，主页卡片通常不能展示）
for(var i = 0, today_cost = [], cost_total = 0; i < list.length; i++){
if(list[i].time.split(' ')[0] == now_time && list[i].cost.indexOf('-') == 0){
var cost_value = Math.abs(parseInt(list[i].cost));
today_cost.push(cost_value);
cost_total += cost_value;
}
}
if(today_cost.length){
_this.setData({
'card.ykt.data.today_cost.value': today_cost,
'card.ykt.data.today_cost.total': cost_total,
'card.ykt.data.cost_status': true
});
}
_this.setData({
'card.ykt.data.last_time': last_time,
'card.ykt.data.balance': parseFloat(last.balance),
'card.ykt.show': true,
'remind': ''
});
}
}
//获取一卡通数据
loadsum++; //新增正在请求连接
wx.request({
url: app._server + '/api/get_yktcost.php',
method: 'POST',
data: app.key({
yktID: app._user.we.ykth
}),
success: function(res) {
if(res.data && res.data.status === 200){
var list = res.data.data;
if(list){
//保存一卡通缓存
app.saveCache('ykt', list);
yktRender(list);
}
}else{ app.removeCache('ykt'); }
},
complete: function() {
loadsum--; //减少正在请求连接
if(!loadsum){
if(_this.data.remind){
_this.setData({
remind: '首页暂无展示'
});
}
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
}
}
});
//水电费渲染
function sdfRender(info){
_this.setData({
'card.sdf.data.room': info.room.split('-').join('栋'),
'card.sdf.data.record_time': info.record_time.split(' ')[0].split('/').join('-'),
'card.sdf.data.cost': info.elec_cost,
'card.sdf.data.spend': info.elec_spend,
'card.sdf.show': true,
'remind': ''
});
}
if(!!app._user.we.room && !!app._user.we.build){
//获取水电费数据
loadsum++; //新增正在请求连接
wx.request({
url: app._server + '/api/get_elec.php',
method: 'POST',
data: app.key({
buildingNo: app._user.we.build,
floor: app._user.we.room.slice(0,1),
room: parseInt(app._user.we.room.slice(1))
}),
success: function(res) {
if(res.data && res.data.status === 200){
var info = res.data.data;
if(info){
//保存水电费缓存
app.saveCache('sdf', info);
sdfRender(info);
}
}else{ app.removeCache('sdf'); }
},
complete: function() {
loadsum--; //减少正在请求连接
if(!loadsum){
if(_this.data.remind){
_this.setData({
remind: '首页暂无展示'
});
}
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
}
}
});
}
//借阅信息渲染
function jyRender(info){
if(parseInt(info.books_num) && info.book_list && info.book_list.length){
var nowTime = new Date().getTime();
info.book_list.map(function(e){
var oDate = e.yhrq.split('-'),
oTime = new Date(oDate[0], oDate[1]-1, oDate[2]).getTime();
e.timing = parseInt((oTime - nowTime) / 1000 / 60 / 60 / 24);
return e;
});
_this.setData({
'card.jy.data': info,
'card.jy.show': true,
'remind': ''
});
}
}
//获取借阅信息
loadsum++; //新增正在请求连接
wx.request({
url: app._server + "/api/get_books.php",
method: 'POST',
data: app.key({
ykth: app._user.we.ykth
}),
success: function(res) {
if(res.data && res.data.status === 200){
var info = res.data.data;
if(info){
//保存借阅缓存
app.saveCache('jy', info);
jyRender(info);
}
}else{ app.removeCache('jy'); }
},
complete: function() {
loadsum--; //减少正在请求连接
if(!loadsum){
if(_this.data.remind){
_this.setData({
remind: '首页暂无展示'
});
}
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
}
}
});
}
});
index.wtml
<!--index.wxml-->
<view class="container">
<view class="fix_tip {{offline?'active':''}}">
<text>离线缓存模式</text>
</view>
<!--功能导航-->
<swiper class="main-swpier" indicator-dots="true" indicator-active-color="#73b4ef">
<swiper-item class="main-core" wx:for="{{cores}}" wx:for-item="core" wx:key="id" >
<block wx:for="{{core}}" wx:key="id">
<navigator wx:if="{{true}}" class="main-core-item" url="{{'/pages/core/'+item.id+'/'+item.id}}">
<image class="core-item-icon" src="/images/core/{{item.id}}.png"></image>
<text class="core-item-name">{{item.name}}</text>
</navigator>
<view wx:else class="main-core-item disabled" bindtap="disabled_item">
<image class="core-item-icon" src="/images/core/{{item.id}}@disabled.png"></image>
<text class="core-item-name">{{item.name}}</text>
</view>
</block>
</swiper-item >
</swiper>
<view class="fix_tip {{disabledItemTap?'active':''}}"></view>
<view wx:if="{{remind}}" class="remind-box">
<image wx:if="{{remind == '加载中'}}" class="remind-img3" src="/images/index/loading.gif"></image>
<block wx:else>
<image class="remind-img" src="/images/index/nothing.png"></image>
<text class="remind-text">{{remind}}</text>
<navigator wx:if="{{remind == '未绑定'}}" url="/pages/more/login" class="remind-btn">前往绑定</navigator>
</block>
</view>
<!--卡片列表-->
<!--在这里写一个通知公告栏，把下面的卡片挤下去，或者先删掉。-->
<view class="content">
<view class="loader">
<image src="/images/index/loading.gif" wx-if="{{loading}}"></image>
</view>
<block wx:for="{{active.data}}" wx:key="item.articleid">
<navigator url="/pages/news/{{item.type}}/{{item.type}}_detail?type={{item.type}}&id=5&href={{item.href}}&title={{item.title}}&time={{item.time}}&author={{item.dep}}">
<view class="list-item {{item.type}}">
<view class="list-item-left">
<text class="list-item-title">{{item.title}}</text>
<text class="list-item-time">{{item.time}} {{item.dep}}</text>
</view>
<image class="list-item-icon" src="/images/news/{{item.type}}.png"></image>
</view>
</navigator>
</block>
</view>
<!--提醒消息-->
<text class="content-ending">{{active.remind}}</text>
<view class="main-ending">
<view class="main-ending-line"></view>
<view class="main-ending-text">我是一个乖巧的结尾</view>
<view class="main-ending-line"></view>
</view>
</view>
index.wxss
/**index.wxss**/
.remind-img3{
width: 300rpx;
height:300rpx;
padding-bottom: 2rpx;
}
.container{
padding-bottom: 0;
">#FFFFFF;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: bottom center;
/*background-image: url('/images/index/tri.png');*/
/*微信暂不支持静态bgimg文件，改用服务器url*/
/*background-image: url('https://we.cqu.pt/app/images/index/tri.png');*/
}
.more-btn {
align-items: center;
font-size: 13pt;
padding: 0 30rpx;
}
/**功能导航**/
.main-core{
display: flex;
flex-flow: row wrap;
align-content: flex-start;
background: #fff;
border-bottom: 1rpx solid #e5e5e5;
padding: 15rpx 10rpx 10rpx;
min-height: 350rpx;
overflow: hidden;
}
.main-core-item{
background: #fff;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 20%;
height: 170rpx;
}
.main-core-item.disabled{
color: #9c9c9c;
}
.core-item-icon{
display: block;
width: 85rpx;
height: 85rpx;
margin: 15rpx auto;
}
.core-item-name{
display: block;
margin: 5rpx;
}
.main-swpier{
height:220rpx;
position: fixed;
padding-bottom: 0;
width: 100%;
white-space: nowrap;
}
.main-swpier .wx-swiper-dots.wx-swiper-dots-horizontal{
bottom: 0;
margin-bottom: -5rpx;
background: #fff;
}
/**卡片列表**/
.main-card {
position: fixed;
padding-bottom: 300rpx;
}
.main-card-item{
display: flex;
flex-direction: column;
background: #fff;
border-top: 1rpx solid #e5e5e5;
border-bottom: 1rpx solid #e5e5e5;
margin-bottom: 20rpx;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: bottom center;
overflow: hidden;
}
.main-card-item#kb{
/*background-image: url('/images/index/kb-bg.png');*/
/*微信暂不支持静态bgimg文件，改用服务器url*/
background-image: url('https://we.cqu.pt/app/images/index/kb-bg.png');
}
.main-card-item#ykt{
/*background-image: url('/images/index/ykt-bg.png');*/
/*微信暂不支持静态bgimg文件，改用服务器url*/
background-image: url('https://we.cqu.pt/app/images/index/ykt-bg.png');
}
.main-card-item#jy{
/*background-image: url('/images/index/jy-bg.png');*/
/*微信暂不支持静态bgimg文件，改用服务器url*/
background-image: url('https://we.cqu.pt/app/images/index/jy-bg.png');
}
.main-card-item#sdf{
/*background-image: url('/images/index/sdf-bg.png');*/
/*微信暂不支持静态bgimg文件，改用服务器url*/
background-image: url('https://we.cqu.pt/app/images/index/sdf-bg.png');
}
.main-card-item navigator{
display: flex;
flex-direction: column;
}
page .navigator-hover{
">rgba(100,100,100,0.1);
opacity: 0.8;
}
.card-item-hd{
display: flex;
align-items: center;
height: 75rpx;
border-bottom: 1rpx solid #e5e5e5;
margin-left: 30rpx;
}
.card-item-icon{
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
.card-item-name{
letter-spacing: 2px;
}
.card-item-more{
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 25rpx;
}
.card-item-open{
width: 30rpx;
height: 30rpx;
}
.card-item-bd{
padding: 20rpx 25rpx 30rpx 0;
margin-left: 30rpx;
display: flex;
flex-direction: column;
}
.card-info-hd{
display: flex;
justify-content: space-between;
}
.card-info-left{
display: flex;
flex-direction: column;
}
.card-info-right{
display: flex;
color: #acacac;
flex-direction: column;
}
.card-info-name{
font-size: 16pt;
line-height: 1.2;
letter-spacing: 1px;
color: #acacac;
}
.card-info-number{
line-height: 175%;
text-indent: 1px;
color: #aaa;
}
.main-ending{
display: none;
/*display: flex;*/
align-items: center;
justify-content: center;
width: 100%;
margin-top: 75rpx;
overflow: hidden;
}
.main-ending-text{
width: 72pt;
color: #ccc;
font-size: 8pt;
padding: 0 16rpx;
text-align: center;
white-space: nowrap;
}
.main-ending-line{
width: 100%;
height: 0;
border-top: 1rpx solid #e5e5e5;
}
/**一卡通**/
.ykt-balance{
display: flex;
align-items: flex-end;
justify-content: center;
font-weight: bold;
padding: 25rpx 0 30rpx;
}
.ykt-balance-text{
font-size: 17pt;
line-height: 2;
color: #999;
}
.ykt-balance-value{
font-size: 58pt;
line-height: 1;
padding: 0 20rpx;
color: #ffbf92;
}
.ykt-cost{
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 20rpx 0 30rpx;
font-weight: bold;
line-height: 200%;
}
.ykt-cost-text{
font-size: 10pt;
color: #999;
}
.ykt-cost-value{
font-size: 12pt;
font-weight: normal;
color: #777;
padding: 0 10rpx;
}
.ykt-cost-total{
font-size: 16pt;
color: #ffbf92;
padding: 0 10rpx;
}
.ykt-title{
font-size: 10pt;
}
.ykt-no-cost{
color: #bbb;
}
/**借阅信息**/
.main-card-item#jy .card-item-bd{
padding-bottom: 85rpx;
}
.jy-list{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.jy-item{
display: flex;
flex-direction: column;
align-items: center;
margin: 20rpx 15rpx 15rpx;
}
.jy-book{
display: flex;
flex-direction: column;
align-items: stretch;
box-sizing: border-box;
width: 176rpx;
height: 231rpx;
/*background-image: url('/images/index/jy-book.png');*/
/*微信暂不支持静态bgimg文件，改用服务器url*/
background-image: url('https://we.cqu.pt/app/images/index/jy-book.png');
background-size: 100% 100%;
padding: 5rpx 5rpx 50rpx 30rpx;
color: #fff;
margin-bottom: 10rpx;
}
.jy-pickup-time{
text-align: right;
font-size: 8pt;
word-wrap: break-word;
white-space: nowrap;
}
.jy-pickup-time-text{
padding-left: 4rpx;
}
.jy-book-name{
height: 126rpx;
font-size: 28rpx;
font-weight: bold;
line-height: 150%;
word-wrap: break-word;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.jy-timing, jy-return-time{
line-height: 200%;
}
.jy-timing-value{
font-size: 13pt;
font-weight: bold;
color: #729fc3;
padding: 0 8rpx;
}
.jy-timing-text{
font-size: 10pt;
color: #acacac;
}
.jy-return-time-value{
font-size: 12pt;
color: #7f848a;
}
.jy-return-time-text{
font-size: 10pt;
color: #acacac;
padding-left: 8rpx;
}
/**水电费**/
.main-card-item#sdf .card-item-bd{
padding-bottom: 80rpx;
}
.sdf-hd{
color: #acacac;
margin: 40rpx 0 20rpx;
}
.sdf-bd{
display: flex;
justify-content: space-between;
padding: 30rpx 0;
}
.sdf-key{
padding: 0 10rpx;
}
.sdf-value{
color: #ffbf92;
font-size: 46pt;
font-weight: bold;
padding: 0 15rpx;
}
.sdf-text{
color: #acacac;
font-size: 13pt;
}
/**news.wxss**/
.container-new{
">#fff;
padding-bottom: 0;
padding: 260rpx;
position: fixed;
}
.filter{
position: fixed;
z-index: 1;
width: 100%;
height: 160rpx;
white-space: nowrap;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), color-stop(0.93, rgba(255,255,255,.93)), to(rgba(255,255,255,0)));
}
.filter-item{
width: 120rpx;
height: 120rpx;
margin: 20rpx;
margin-left: 0;
border-radius: 5rpx;
box-shadow: 1px 2px 3px #e5e5e5;
opacity: .66;
}
.filter-item#all{
margin-left: 20rpx;
}
.filter-item.active{
opacity: 1;
transform: scale(1.08,1.08);
box-shadow: 1px 2px 3px #ddd;
}
.loader{
display: inline-block;
width: 100%;
height: 160rpx;
line-height: 160rpx;
margin-top: -160rpx;
letter-spacing: 10rpx;
text-align: center;
box-sizing: border-box;
padding-top: 40rpx;
}
.loader image{
height: 80rpx;
width: 80rpx;
}
.content{
flex-direction: column;
padding: 260rpx 20rpx 0;
}
.content-ending{
width: 100%;
color: #bbb;
text-align: center;
margin: 30rpx auto;
}
.list-item{
display: flex;
align-items: center;
justify-content: space-between;
height: 120rpx;
margin-bottom: 20rpx;
border-radius: 3px;
box-shadow: 1px 2px 3px #ddd;
padding: 0 30rpx;
color: #fff;
}
.list-item.jw{
">#9f8bea;
}
.list-item.oa{
">#73b4ef;
}
.list-item.hy{
">#ffcb63;
}
.list-item.jz{
">#e78ab0;
}
.list-item.new{
">#87CEEB;
}
.list-item-left{
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: hidden;
padding-right: 10rpx;
}
.list-item-title{
font-size: 10pt;
line-height: 175%;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
}
.list-item-dep{
font-size: 10pt;
line-height: 125%;
}
.list-item-time{
font-size: 10pt;
line-height: 125%;
opacity: 0.6;
}
.list-item-icon{
flex: 0 0 60rpx;
height: 60rpx;
width: 60rpx;
border-left: 1px solid #fff;
padding-left: 25rpx;
}
bx.js
//bx.js
//获取应用实例
var app = getApp();
Page({
data: {
remind: '加载中',
count: '-',
list: [],
process_state: {
'未审核': 'waited',
'未受理': 'waited',
'已受理': 'accepted',
'已派出': 'dispatched',
'已完工': 'finished',
'驳回': 'refused'
}
},
//下拉更新
onPullDownRefresh: function(){
this.getData();
},
onLoad: function(){
this.getData();
},
getData: function(){
var that = this;
if(!app._user.we.ykth){
that.setData({
remind: '未绑定'
});
return false;
}
// 发送请求
wx.vrequest({
url: app._server + '/repair/api/v3/repair/list?schoolId=10423&status=10&page=1&orderBy=normal&userType=owner&userId='+app._user.we.info.id,
success: function(res) {
if(res.data && res.data.status == "success") {
var list = res.data.data;
if(!list || list.total==0){
that.setData({
'remind': '无申报记录'
});
}else{
for(var i = 0, len = list.repairList; i < len; i++) {
list[i].state = that.data.process_state[list[i].wx_wxztm];
list[i].wx_bt = that.convertHtmlToText(list[i].wx_bt).replace(/[\r|\n]/g, "");
}
that.setData({
'list': list,
'count': len,
'remind': ''
});
}
}else{
that.setData({
remind: res.data.message || '未知错误',
'count': 0
});
}
},
fail: function(res) {
app.showErrorModal(res.errMsg);
that.setData({
remind: '网络错误',
'count': 0
});
},
complete: function(){
wx.stopPullDownRefresh();
}
});
},
convertHtmlToText: function(inputText){
var returnText = "" + inputText;
returnText = returnText.replace(/<\/?[^>]*>/g, '').replace(/[ | ]*\n/g, '\n').replace(/ /ig, '')
.replace(/&mdash/gi,'-').replace(/&ldquo/gi,'“').replace(/&rdquo/gi,'”');
return returnText;
}
});
bx.json
{
"navigationBarTitleText": "物业报修"
}
bx.wxml
<!--bx.wxml-->
<view class="container">
<view class="service-nav">
<navigator class="service-nav-item service-apply-btn" url="bx_apply">
<image class="service-apply-icon" src="/images/core/bx.png"></image>
<text>申报入口</text>
</navigator>
</view>
<view wx:if="{{remind}}" class="remind-box">
<image wx:if="{{remind == '加载中'}}" class="remind-img" src="/images/index/nothing.png"></image>
<block wx:else>
<image class="remind-img" src="/images/index/nothing2.jpg"></image>
<text class="remind-text">{{remind}}</text>
</block>
</view>
<block wx:else>
<text class="service-process-title">申报记录（{{count}}条）</text>
<block wx:for="{{list}}" wx:key="wx_djh">
<view class="process review-process">
<view class="process-hd">
<image class="review-process-icon" src="/images/core/bx/bx_{{item.state}}.png"></image>
<view class="order-number-name">
<text>{{item.wx_bt}}</text>
</view>
<view class="process-state">
<text class="process-state-name process-state-{{item.state}}">{{item.wx_wxztm}}</text>
</view>
</view>
<view class="process-bd">
<view class="process-item">
<view class="process-item-bd">
<text class="process-item-name">服务类型</text>
</view>
<view class="process-item-ft">
<text class="process-item-info">{{item.wx_bxlxm}}</text>
</view>
</view>
<view class="process-item">
<view class="process-item-bd">
<text class="process-item-name">报修时间</text>
</view>
<view class="process-item-ft">
<text class="process-item-info">{{item.wx_bxsj}}</text>
</view>
</view>
<view class="process-item">
<view class="process-item-bd">
<text class="process-item-name">响应时间</text>
</view>
<view class="process-item-ft">
<text class="process-item-info">{{item.xysj=='120分钟以上响应'?'未响应':item.xysj}}</text>
</view>
</view>
</view>
<navigator url="bx_detail?id={{item.wx_djh}}">
<view class="service-detail-open">
<text>详情</text>
</view>
</navigator>
</view>
</block>
</block>
</view>
/**bx.wxss**/
.container{
">#f7f7f7;
padding-top: 200rpx;
}
.service-nav{
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
display: flex;
background: #fff;
background: rgba(255,255,255,.9);
border-bottom: 1rpx solid #eee;
margin-bottom: 10rpx;
}
.service-nav-item {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 11pt;
line-height: 150%;
height: 160rpx;
padding: 20rpx;
border-right: 1rpx solid #eee;
}
.service-apply-btn{
flex: 1;
flex-direction: row;
align-items: center;
font-size: 25pt;
font-weight: bold;
color: #7acfa6;
background: rgba(122,207,166,.1);
}
.service-apply-btn:active{
background: #fff;
}
.service-nav-hd {
color: #777;
}
.service-nav-bd {
display: flex;
justify-content: center;
}
.service-nav-value {
font-size: 30pt;
color: #7acfa6;
font-weight: bold;
line-height: 150%;
padding: 0 20rpx 0 30rpx;
}
.service-apply-icon{
flex-shrink: 0;
width: 100rpx;
height: 100rpx;
margin-right: 15rpx;
}
.service-process-title{
color: #888;
padding: 20rpx 20rpx 15rpx;
}
.process{
display: flex;
flex-direction: column;
">#fff;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
margin-bottom: 20rpx;
}
.process-hd{
display: flex;
align-items: center;
height: 100rpx;
font-size: 11pt;
margin-left: 30rpx;
border-bottom: 1px solid #eee;
}
.review-process-icon{
flex-shrink: 0;
width: 45rpx;
height: 45rpx;
margin-right: 15rpx;
}
.order-number-name{
flex: 1 1 auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.process-state{
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 30rpx;
font-weight: bold;
}
.process-state-waited{
color: #ffcb63;
}
.process-state-accepted{
color: #73b4ef;
}
.process-state-dispatched{
color: #e78ab0;
}
.process-state-finished{
color: #9f8bea;
}
.process-state-refused{
color: #999;
}
.process-bd{
padding: 10rpx 30rpx;
}
.process-item{
display: flex;
justify-content: space-between;
margin: 20rpx 5rpx;
}
.process-item-bd{
display:flex;
}
.process-item-ft{
display: flex;
}
.service-detail-open{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 25rpx;
border-top: 1px solid #eee;
color: #7acfa6;
}
sdf.json
//sdf.js
//获取应用实例
var app = getApp();
Page({
data: {
remind: '加载中',
userName: '',
roomInfo:false,
renderData: {}
},
onLoad: function(){
var _this = this;
if(!app._user.we.info.name || !app._user.we.info.id){
_this.setData({
remind: '未绑定帐号'
});
return false;
}
if(!app._user.we.room || !app._user.we.build){
wx.request({
url: 'https://www.ouchq.cn/suse.php?stuno='+app._user.we.info.id,
success:function(res){
if(res.statusCode==200&&res.data){
app._user.we.build = res.data.house.lymc,
app._user.we.room = res.data.house.fjmc,
app._user.we.buildArea = res.data.house.areaName,
app._user.we.roomId = res.data.house.roomid
_this.setData({
roomInfo: res.data.house,
})
wx.showLoading({
title: '加载中',
})
_this.getroominfo()
}else{
_this.setData({
remind:'查询失败'
})
}
}
})
}
_this.setData({
userName: app._user.we.info.name,
userYkth: app._user.we.ykth
});
//判断并读取缓存
if(app.cache.sdf){
if (app._user.we.buildArea == '鱼山校区' || app._user.we.buildArea == '崂山北海苑'){
_this.sdfRender(app.cache.sdf);
}
else {
_this.sdfRender2(app.cache.sdf);
}
}
wx.showNavigationBarLoading();
wx.hideLoading()
},
sdfRender2(info){
var _this = this
_this.setData({
'renderData.room_name': info.xiaoqu+info.room,
'renderData.record_time': '当前',
'renderData.elec_cost': (parseFloat(info.restAmp)-parseFloat(info.chargeAmp)).toString(),//
'renderData.elec_start': parseFloat(info.monthTotalAmp).toFixed(3).toString(),
'renderData.elec_end': '<无法查询>',
'renderData.elec_free': '<无法查询>',
'renderData.elec_spend': parseFloat(info.restAmp).toFixed(3).toString(),
remind: ''
})
},
sdfRender(info) {
var _this = this
var data = info
_this.setData({
//'renderData': info,
'renderData.room_name': app._user.we.build+app._user.we.room,
'renderData.record_time': '当前',
'renderData.elec_cost': data.freeEle,
'renderData.elec_start': data.totalEle,
'renderData.elec_end': data.negativeEle,
'renderData.elec_free': data.chargeStatus,
'renderData.elec_spend': data.chargeEle,
remind: ''
});
},
getroominfo(){
var _this=this
if (app._user.we.buildArea == '崂山北海苑' || app._user.we.buildArea == '鱼山校区') {
var dataCopy =''
dataCopy += parseInt(app._user.we.build.slice(2, 4)).toString()
//单元房要加单元号
// if (app._user.we.build.slice(2,3)>'09'){
// dataCopy +=
// }
dataCopy += '0' + app._user.we.room.charAt(0)
dataCopy += '0' + app._user.we.room.slice(1)
wx.request({
url: 'https://www.ouchq.cn/Ele.php?roomNum=' + dataCopy + '&xiaoquName=' + app._user.we.buildArea,
success: function (res) {
if (res.statusCode==200&&res.data) {
var info = res.data;
if (info) {
//保存电费缓存
app.saveCache('sdf', info);
_this.sdfRender(info);
wx.hideLoading()
} else { _this.setData({ remind: '暂无数据' }); }
} else {
app.removeCache('sdf');
_this.setData({
remind: res.data.message || '未知错误'
});
}
},
fail: function (res) {
if (_this.data.remind == '加载中') {
_this.setData({
remind: '网络错误'
});
}
console.warn('网络错误');
},
complete: function () {
wx.hideNavigationBarLoading();
}
});
} else {
var xiaoquid = '0';
if (app._user.we.buildArea == '崂山南海苑') {
xiaoquid = '2'
} else if (app._user.we.buildArea == '崂山东海苑') {
xiaoquid = '3'
}
wx.request({
url: 'https://www.ouchq.cn/room.php?ac=roomamp&roomid=' + app._user.we.roomId + '&xiaoquid=' + xiaoquid,
success: function (res) {
if (res.data && res.data.message == '查询成功') {
var info = res.data.data;
if (info) {
//保存电费缓存
app.saveCache('sdf', info);
_this.sdfRender2(info);
wx.hideLoading()
wx.stopPullDownRefresh()
} else { _this.setData({ remind: '暂无数据' }); }
} else {
app.removeCache('sdf');
_this.setData({
remind: res.data.message || '未知错误'
});
}
},
fail: function (res) {
if (_this.data.remind == '加载中') {
_this.setData({
remind: '网络错误'
});
}
console.warn('网络错误');
},
complete: function () {
wx.hideNavigationBarLoading();
}
});
}
},
onPullDownRefresh:function(e){
var _this = this
_this.getroominfo();
}
});
sdf.json
{
"navigationBarBackgroundColor": "#ffcb63",
"navigationBarTitleText": "电费查询",
"backgroundColor": "#ffcb63",
"enablePullDownRefresh": true
}
<!--sdf.wxml-->
<view class="container">
<view wx:if="{{remind}}" class="remind-box">
<image wx:if="{{remind == '加载中'}}" class="remind-img" src="/images/index/loading.gif"></image>
<block wx:else>
<image class="remind-img" src="/images/index/nothing.png"></image>
<text class="remind-text">{{remind}}</text>
<navigator open-type="redirect" wx:if="{{remind == '未完善寝室信息'}}" url="/pages/more/append" class="remind-btn">前往完善</navigator>
</block>
</view>
<!--result-page-->
<view wx:else class="result-page">
<!--result-userInfo-->
<view class="result-userInfo result-model">
<view class="userInfo-dormitory">
<text class="dormitory-info">{{renderData.room_name}}寝室</text>
<!--<navigator open-type="redirect" url="/pages/more/append" class="dormitory-resetBtn">修改寝室</navigator>-->
</view>
<view class="userInfo-basic">
<text class="basic-name">{{userName}}（{{userYkth}}）</text>
<text class="basic-time">截至时间：{{renderData.record_time}}</text>
</view>
</view>
<!--result-chargeInfo-->
<view class="result-chargeInfo">
<view class="chargeInfo-num chargeInfo-model result-model">
<text class="chargeInfo-model-title">剩余电量</text>
<view class="chargeInfo-model-info">
<text class="model-info">{{renderData.elec_spend}}</text>度
</view>
</view>
<view class="chargeInfo-cost chargeInfo-model result-model">
<block wx:if="{{renderData.elec_cost<=0}}">
<text class="chargeInfo-model-title">免费额度剩余</text>
<view class="chargeInfo-model-info">
<text class="model-info">{{-renderData.elec_cost}}</text>度
</view>
</block>
<block wx:else>
<text class="chargeInfo-model-title">其中免费电量</text>
<view class="chargeInfo-model-info">
<text class="model-info">{{renderData.elec_cost}}</text>度
</view>
</block>
</view>
</view>
<!--result-specificInfo-->
<view class="result-specificInfo result-model">
<view class="specificInfo-item">
<text class="specificInfo-item-label">累计电量</text>
<text class="specificInfo-item-value">{{renderData.elec_start}}</text>
<text>度</text>
</view>
<view class="specificInfo-item">
<text class="specificInfo-item-label">负电量</text>
<text class="specificInfo-item-value">{{renderData.elec_end}}</text>
<text>度</text>
</view>
<view class="specificInfo-item">
<text class="specificInfo-item-label">供电状态</text>
<text class="specificInfo-item-value">{{renderData.elec_free}}</text>
<text>！</text>
</view>
</view>
<image class="sdf-bg" src="/images/core/sdf/sdf-bg.png"></image>
</view>
</view>
sdf.wxss
/**sdf.wxss**/
.container{
box-sizing: border-box;
padding: 30rpx;
background: #FFFFFF;
}
.remind-btn {
">#ffcb63;
border-color: #e0b358;
}
.result-page {
display: flex;
flex-flow: column;
align-items: stretch;
font-size: 11pt;
}
.result-model {
display: flex;
flex-flow: column;
border-radius: 3px;
color: #666;
">#faf9f7;
overflow: hidden;
}
.result-userInfo {
display: flex;
align-items: stretch;
padding: 35rpx 30rpx;
}
.userInfo-dormitory {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10rpx 0 20rpx;
}
.dormitory-info {
font-size: 15pt;
line-height: 150%;
letter-spacing: 1px;
}
.dormitory-resetBtn {
font-size: 9pt;
padding: 5rpx 20rpx;
text-align: center;
">#ffcb63;
border-radius: 3px;
color: #fff;
}
.userInfo-basic {
display: flex;
align-items: center;
justify-content: space-between;
color: #888;
}
.basic-name {
font-size: 11pt;
line-height: 150%;
}
.basic-time {
font-size: 10pt;
}
.result-chargeInfo {
display: flex;
flex-direction: row;
margin: 20rpx 0;
}
.chargeInfo-model {
flex: 1;
padding: 35rpx 30rpx;
}
.chargeInfo-num {
margin-right: 10rpx;
}
.chargeInfo-cost {
margin-left: 10rpx;
}
.chargeInfo-model-title{
margin-bottom: 30rpx;
}
.chargeInfo-model-info {
text-align: center;
}
.model-info {
color: #777;
font-weight: bold;
font-size: 30pt;
line-height: 120%;
padding: 0 15rpx 0 20rpx;
}
.result-specificInfo {
padding: 35rpx 30rpx;
}
.specificInfo-item {
display: flex;
justify-content: space-between;
padding: 25rpx 0;
}
.specificInfo-item-label{
flex: 1;
}
.specificInfo-item-value{
color: #888;
font-weight: bold;
font-size: 12pt;
margin-right: 10rpx;
}
.sdf-bg{
position: fixed;
width: 750rpx;
height: 90rpx;
bottom: -2rpx;
left: 0;
right: 0;
}
ykt.js
//ykt.js
//获取应用实例
var app = getApp();
Page({
data: {
remind: '加载中',
canvas_remind: '加载中',
fontSize: 12, // 字体大小, 24rpx=12px
count: 10, // 展示的消费次数
width: 0, // 画布宽
height: 300, // 画布高, wxss给定canvas高300px
dict: [], // 所有消费数据
points: [], // 点的集合（包括点的横坐标x、纵坐标y、当前点的详情detail）
costArr: [], // 消费金额集合
balanceArr: [], // 余额金额集合
tapDetail: {}, // 每个点对应的详情集合
lineLeft: 0, // 详情垂直线的初始左边距
gridMarginLeft: 35,// 表格左边距
gridMarginTop: 20, // 表格上边距
balance: 0, // 当前余额（余额卡片上的展示数据）
ykt_dqc:0,
ykt_lost:'',
ykt_state:'',
last_time: '',
ykt_id: '',
pages:1,
todayPages:1,
moreData:true,
ls:{
type:'',
data:[]
},
switchBtn: true, // true:余额 or false:交易额
options: {},
currentIndex: 0 // 当前点的索引，切换视图的时候保持当前详情
},
onLoad: function(){
var _this = this;
wx.getSystemInfo({
success: function(res) {
// 获取窗口宽, 计算画布宽
_this.setData({
'width': res.windowWidth
});
}
});
_this.getTodayData();
},
sendRequest: function() {
var _this = this;
if(!app._user.we.ykth){
_this.setData({
remind: '未绑定'
});
return false;
}
if (app.cache.ls) {yktRender1(app.cache.ls);
}
function yktRender1(info){
var type = "hy"
var data
if(_this.data.ls!==null)
data = _this.data.ls.data.concat(info.list)
else data = info.list
for (var i in data) {
if (data[i].money === null) {
data[i].money = data[i].pay
data[i].pay = data[i].type
data[i].type = data[i].area
data[i].area = null
}
}
var lsdata = {
type:type,
data:data
}
_this.setData({
ls:lsdata
})
};
wx.request({
url: 'https://www.ouchq.cn/app/index.php?token='+app._user.we.token+'&s=cardHistory&type=1&pageindex='+_this.data.pages,
success: function (res) {
if (res.data && res.data.code === 200) {
_this.setData({
pages:_this.data.pages+1
})
var info = res.data.data;
if (info) {
//保存一卡通缓存
app.saveCache('ls', info);
if (info.list.length > 0)
yktRender1(info);
} else { _this.setData({ remind: '暂无数据' }); }
} else {
app.removeCache('ls');
_this.setData({
remind: res.data.message || '未知错误'
});
}
},
fail: function (res) {
if (_this.data.remind == '加载中') {
_this.setData({
remind: '网络错误'
});
}
console.warn('网络错误');
},
})
//判断并读取缓存
if(app.cache.ykt){ yktRender(app.cache.ykt); }
function yktRender(info){
var data = info,
canvasWidth = _this.data.width,
canvasHeight = _this.data.height;
_this.setData({
balance: info.money,
last_time: '当前',
ykt_id: info.cardId,
ykt_dqc:info.money2,
ykt_lost:info.lost,
ykt_state:info.state,
lineLeft: _this.data.width - _this.data.gridMarginLeft - 1,
remind: '',
});
}
wx.showNavigationBarLoading();
wx.request({
url: 'https://www.ouchq.cn/app/index.php?token='+app._user.we.token+'&s=card',
success: function(res) {
if(res.data && res.data.code === 200){
var info = res.data.data;
if(info) {
//保存一卡通缓存
app.saveCache('ykt', info);
yktRender(info);
}else{ _this.setData({ remind: '暂无数据' }); }
} else {
app.removeCache('ykt');
_this.setData({
remind: res.data.message || '未知错误'
});
}
},
fail: function(res){
if(_this.data.remind == '加载中'){
_this.setData({
remind: '网络错误'
});
}
console.warn('网络错误');
},
complete: function() {
wx.hideNavigationBarLoading();
}
});
},
getTodayData: function(){
var _this = this
function yktRender2(info) {
var type = "hy"
var data
if (_this.data.ls !== null)
data = _this.data.ls.data.concat(info.list)
else data = info.list
//充值圈存的时候
for (var i in data) {
if (data[i].money === null) {
data[i].money = data[i].pay
data[i].pay = data[i].type
data[i].type = data[i].area
data[i].area = null
}
}
var lsdata = {
type: type,
data: data
}
_this.setData({
ls: lsdata
})
}
wx.request({
url: 'https://www.ouchq.cn/app/index.php?token=' + app._user.we.token + '&s=cardHistory&type=0&pageindex=' + _this.data.todayPages,
success: function (res) {
if (res.data && res.data.code === 200) {
_this.setData({
todayPages: _this.data.todayPages + 1
})
var info = res.data.data;
if (info) {
//保存一卡通缓存
app.saveCache('ls', info);
if (info.list.length > 0){
yktRender2(info);
_this.getTodayData()
}else{
_this.sendRequest()
}
} else { _this.setData({ remind: '暂无数据' });_this.sendRequest() }
} else {
app.removeCache('ls');
_this.setData({
remind: res.data.message || '未知错误'
});
}
},
fail: function (res) {
if (_this.data.remind == '加载中') {
_this.setData({
remind: '网络错误'
});
}
console.warn('网络错误');
},
})
},
// 绘制横轴&纵轴&网格线
drawLineXY: function(options, switchArr) {
var context = options.context,
gridMarginLeft = options.gridMarginLeft,
gridMarginTop = options.gridMarginTop,
canvasHeight = options.canvasHeight,
canvasWidth = options.canvasWidth,
xArr = options.xArr,
tmp_yArr = switchArr,
gridNum = options.gridNum,
fontSize = options.fontSize;
/*
* 余额纵坐标&横网格线
* gridNum: 横网格线条数
* spaceY: 横网格间距
* spaceYe: 纵轴余额的金额间隔
* tmp_minY: 余额的最小值
* tmp_maxY: 余额的最大值
*/
var tmp_minY = Math.min.apply(Math, tmp_yArr.map(function(e){ return Math.abs(e); })),
tmp_maxY = Math.max.apply(Math, tmp_yArr.map(function(e){ return Math.abs(e); })),
spaceYe = tmp_maxY / gridNum,
gridHeight = canvasHeight - 2*gridMarginTop,
spaceY = gridHeight / gridNum;
// 绘制竖网格
context.setLineWidth(1);
context.setLineCap("round");
context.setStrokeStyle("#dddddd");
for (var i = 0; i < xArr.length; i ++) {
context.beginPath();
context.moveTo(xArr[i] + gridMarginLeft, canvasHeight - gridMarginTop);
context.lineTo(xArr[i] + gridMarginLeft, gridMarginTop);
context.stroke();
context.closePath();
}
context.setStrokeStyle("#dddddd");
context.setFillStyle("#ffcb63");
// 绘制横网格&纵轴金额
for (var i = 0; i <= gridNum; i ++) {
var numY = 0,
diff = 0;
// 纵轴金额
if (i === 0) {
numY = 0;
} else {
numY = (spaceYe * i).toFixed(0);
}
context.beginPath();
context.moveTo(xArr[0] + gridMarginLeft, gridMarginTop + spaceY * i );
context.lineTo(xArr[xArr.length - 1] + gridMarginLeft, gridMarginTop + spaceY * i);
context.stroke();
context.closePath();
context.beginPath();
context.setFontSize(fontSize);
var left = 25;
if(numY<10){
left = 15;
}else if(numY<100){
left = 20;
}else if(numY<1000){
left = 25;
}
context.fillText(numY, gridMarginLeft - left, canvasHeight - gridMarginTop - spaceY * i + 3);
context.closePath();
}
/*
* 绘制横轴和纵轴
*/
context.setLineWidth(2);
context.setStrokeStyle("#ffcb63");
context.beginPath();
context.moveTo(xArr[0] + gridMarginLeft, canvasHeight - gridMarginTop);
context.lineTo(canvasWidth - gridMarginLeft/2, canvasHeight - gridMarginTop);
context.moveTo(xArr[0] + gridMarginLeft, canvasHeight - gridMarginTop);
context.lineTo(xArr[0] + gridMarginLeft, 0);
context.stroke();
context.closePath();
},
// 描点&连线
drawPointLine: function(options, switchArr) {
var _this = this;
var context = options.context,
yArr = [],
gridMarginLeft = options.gridMarginLeft,
gridMarginTop = options.gridMarginTop,
canvasHeight = options.canvasHeight,
canvasWidth = options.canvasWidth,
xArr = options.xArr,
gridNum = options.gridNum,
tmp_yArr = switchArr,
len = options.len,
spaceX = options.spaceX,
pointArr = [];
/*
* 点集的纵坐标
* 根据网格间距/余额间距的比例算出点的对应纵坐标
* spaceY: 横网格间距
* spaceYe: 纵轴金额间隔
* tmp_minY: 金额的最小值
* tmp_maxY: 金额的最大值
* yArr: 点在画布中的纵坐标
*/
var tmp_minY = Math.min.apply(Math, tmp_yArr.map(function(e){ return Math.abs(e); })),
tmp_maxY = Math.max.apply(Math, tmp_yArr.map(function(e){ return Math.abs(e); })),
spaceYe = tmp_maxY / gridNum,
gridHeight = canvasHeight - 2*gridMarginTop,
spaceY = gridHeight / gridNum,
switchBtn = Math.min.apply(Math, tmp_yArr) >= 0;
for(var i = 0; i < len; i++){
yArr.push(gridHeight - (tmp_maxY - Math.abs(tmp_yArr[i]))*spaceY / spaceYe);
}
/*
* 描点连线
*/
for(var i = 0; i < len; i ++){
var x = xArr[i] + gridMarginLeft, // 横坐标
y = canvasHeight - gridMarginTop -yArr[i]; // 纵坐标
// 将点在画布中的坐标&消费详情存入数组
pointArr.push({
x: x,
y: y,
detail: this.data.dict[i]
});
}
context.setStrokeStyle("#73b4ef");
context.setFillStyle("#ffcb63");
// 描点连线
for(var i = 0, pLen = pointArr.length; i < pLen; i++){
if(pointArr[i+1]){
if((switchBtn && tmp_yArr[i+1]>tmp_yArr[i]) || (!switchBtn && (tmp_yArr[i]>0 || tmp_yArr[i+1]>0))){
context.setGlobalAlpha(0.66);
}
context.beginPath();
context.moveTo(pointArr[i].x, pointArr[i].y);
context.lineTo(pointArr[i+1].x, pointArr[i+1].y);
context.stroke();
context.beginPath();
}
context.setGlobalAlpha(1);
context.beginPath();
context.arc(pointArr[i].x, pointArr[i].y, 2, 0, 2*Math.PI); // 画点
context.fill();
context.fillText((!switchBtn&&tmp_yArr[i]>0?'+':'')+tmp_yArr[i], pointArr[i].x + 3, pointArr[i].y - 3); // 点的含义，画字
context.closePath();
pointArr[i].detail.balance = parseFloat(pointArr[i].detail.balance);
}
_this.setData({
points: pointArr
});
},
// 触摸详情
canvasTap: function(e) {
var _this = this;
// 手指在画布中的坐标
var tapX = e.detail.x,
tapY = e.detail.y,
points = _this.data.points,
pointsLen = points.length,
diffX = 0,
iwidth = (_this.data.width-2*_this.data.gridMarginLeft)/(_this.data.count-1);
var i = Math.round((tapX - _this.data.gridMarginLeft) / iwidth);
_this.setData({
tapDetail: points[i].detail,
lineLeft: _this.data.gridMarginLeft + iwidth*i - 1, // 详情竖线的left
currentIndex: i // 当前点的索引，即显示当前详情
});
},
// 切换视图
switchBtn: function(e) {
var id = e.target.id;
if(!id || (id=='balance'&&this.data.switchBtn) || (id=='cost'&&!this.data.switchBtn)){
return false;
}
var context = this.data.options.context;
this.drawLineXY(this.data.options, this.data[id+'Arr']);
this.drawPointLine(this.data.options, this.data[id+'Arr']);
context.draw();
this.setData({
switchBtn: !this.data.switchBtn
});
},
onPullDownRefresh: function () {
var _this = this
_this.setData({
ls:null,
moreData:true,
todayPages:1,
pages:1
})
_this.getTodayData()
function yktRender(info) {
var data = info,
canvasWidth = _this.data.width,
canvasHeight = _this.data.height;
_this.setData({
balance: info.money,
last_time: '当前',
ykt_id: info.cardId,
ykt_dqc: info.money2,
ykt_lost: info.lost,
ykt_state: info.state,
lineLeft: _this.data.width - _this.data.gridMarginLeft - 1,
remind: '',
});
}
wx.request({
url: 'https://www.ouchq.cn/app/index.php?token=' + app._user.we.token + '&s=card',
success: function (res) {
if (res.data && res.data.code === 200) {
var info = res.data.data;
if (info) {
//保存一卡通缓存
app.saveCache('ykt', info);
yktRender(info);
} else { _this.setData({ remind: '暂无数据' }); }
} else {
app.removeCache('ykt');
_this.setData({
remind: res.data.message || '未知错误'
});
}
},
fail: function (res) {
if (_this.data.remind == '加载中') {
_this.setData({
remind: '网络错误'
});
}
console.warn('网络错误');
},
complete: function () {
wx.hideNavigationBarLoading();
}
});
wx.stopPullDownRefresh()
},
onReachBottom:function(){
var _this = this
if (!_this.data.moreData) {
wx.showModal({
title: '没有更多啦',
content: '仅能查询七天内数据，更多记录请前往学校一卡通官网（http://card.ouc.edu.cn/）查询。',
})
return;
}
function yktRender2(info) {
var type = "hy"
var data = _this.data.ls.data.concat(info.list)
//充值圈存的时候
for(var i in data){
if(data[i].money===null){
data[i].money = data[i].pay
data[i].pay = data[i].type
data[i].type = data[i].area
data[i].area = null
}
}
var lsdata = {
type: type,
data: data
}
_this.setData({
ls: lsdata
})
}
wx.request({
url: 'https://www.ouchq.cn/app/index.php?token=' + app._user.we.token + '&s=cardHistory&type=1&pageindex='+_this.data.pages,
success: function (res) {
if (res.data && res.data.code === 200) {
_this.setData({
pages: _this.data.pages + 1
})
var info = res.data.data;
if (info) {
if (info.list.length > 0) {
yktRender2(info);
} else {
_this.setData({
moreData:!_this.data.moreData
})
}
} else { _this.setData({ remind: '暂无数据' }); }
} else {
app.removeCache('ls');
_this.setData({
remind: res.data.message || '未知错误'
});
}
},
fail: function (res) {
if (_this.data.remind == '加载中') {
_this.setData({
remind: '网络错误'
});
}
console.warn('网络错误');
},
})
}
});
ykt.json
{
"navigationBarBackgroundColor": "#ffcb63",
"navigationBarTitleText": "一卡通" ,
"backgroundColor": "#ffcb63",
"enablePullDownRefresh": true
}
ykt.wxml
<!--ykt.wxml-->
<view class="container">
<view wx:if="{{remind}}" class="remind-box">
<image wx:if="{{remind == '加载中'}}" class="remind-img" src="/images/index/loading.gif"></image>
<block wx:else>
<image class="remind-img" src="/images/index/nothing.png"></image>
<text class="remind-text">{{remind}}</text>
</block>
</view>
<block wx:else>
<view class='ykt-card-back'>
<view class="ykt-card">
<view class="ykt-black-line"></view>
<view class="ykt-content">
<view class="ykt-ye">
<text class="ykt-ye-name">余额</text>
<view class="ykt-ye-money">
<text class="ykt-ye-value">{{balance}}</text>元
</view>
</view>
<view class="ykt-img">
<image src="/images/core/ykt/card-bg.png"></image>
</view>
</view>
<view class="ykt-card-more">
<text class="ykt-ye-time">时间：{{last_time}}</text>
<text class="ykt-ye-id">待圈存：{{ykt_dqc}}</text>
<text class="ykt-ye-id">遗失：{{ykt_lost}}</text>
</view>
<view class="ykt-card-more">
<text class="ykt-ye-id">状态：{{ykt_state}}</text>
<text class="ykt-ye-id">卡号：{{ykt_id}}</text>
</view>
</view>
</view>
<!--
<text class="grid-remind">近10次交易情况：</text>
<view class="balance-consumption" bindtap="switchBtn">
<text class="{{switchBtn ? 'current-btn' : ''}}" id="balance">余额</text>
<text class="{{switchBtn ? '' : 'current-btn'}}" id="cost">交易额</text>
</view>
<view class="grid-wraper">
<view wx:if="{{canvas_remind}}" class="remind-box">
<image wx:if="{{canvas_remind == '加载中'}}" class="remind-img" src="/images/index/loading.gif"></image>
</view>
<block wx:else>
<canvas id="ykt-canvas" canvas-id="firstCanvas" bindtap="canvasTap"></canvas>
<view class="line" style="left: {{lineLeft}}px;"></view>
<view class="y-text">{{switchBtn ? "余额" : "交易额"}}</view>
<view class="x-text">最近交易</view>
</block>
</view>
<text class="detail-remind">点击上图查看对应交易详情</text>
<view class="ykt-detail-wraper">
<view class="ykt-head">
<text class="ykt-type-name">交易详情</text>
</view>
<view class="detail-list">
<view class="detail-item">
<text class="detail-item-label">交易时间</text>
<text class="detail-item-value">{{tapDetail.time}}</text>
</view>
<view class="detail-item">
<text class="detail-item-label">交易类型</text>
<text class="detail-item-value">{{tapDetail.transaction}}</text>
</view>
<view class="detail-item">
<text class="detail-item-label">交易金额</text>
<text class="detail-item-value">{{(tapDetail.cost>0?'+':'')+tapDetail.cost}}</text>
</view>
<view class="detail-item">
<text class="detail-item-label">交易设备</text>
<text class="detail-item-value">{{tapDetail.device}}</text>
</view>
<view class="detail-item">
<text class="detail-item-label">交易地点</text>
<text class="detail-item-value">{{tapDetail.address}}</text>
</view>
<view class="detail-item">
<text class="detail-item-label">交易余额</text>
<text class="detail-item-value">{{tapDetail.balance}}</text>
</view>
</view>
</view>
-->
<view class="content">
<view class="loader">
<image src="/images/index/loading.gif" wx-if="{{loading}}"></image>
</view>
<block wx:for="{{ls.data}}" wx:key="item.articleid">
<navigator>
<view class="list-item {{ls.type}}">
<view class="list-item-left">
<text class="list-item-title">余额：{{item.money}} 消费：{{item.pay}} 类型：{{item.type}}</text>
<text class="list-item-time">地点:{{item.area}}</text>
<text class="list-item-time">日期:{{item.date}} 时间:{{item.time}}</text>
</view>
<!--<image class="list-item-icon" src="/images/news/{{ls.type}}.png"></image>-->
</view>
</navigator>
</block>
</view>
</block>
</view>
ykt.wxss
/**ykt.wxss**/
.container {
">#FFFFFF;
padding-left: 30rpx;
padding-right: 30rpx;
}
.ykt-card-back{
width: 100%;
height: 370rpx;
display: flex;
position: fixed;
background: #f7f7f7;
}
/* 今日余额 */
.ykt-card {
display: flex;
flex-direction: column;
position: fixed;
padding-left: 25rpx;
padding-right: 30rpx;
height: 360rpx;
margin: 15rpx 50rpx 45rpx;
background: #ffcb63;
border-radius: 15rpx;
box-shadow: 5rpx 5rpx 15rpx rgba(204, 204, 204, 0);
opacity:1;
}
.ykt-black-line {
width: 100%;
height: 80rpx;
margin: 40rpx 0 0;
background: #7b7b7b;
}
.ykt-content {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.ykt-ye {
flex: 1;
display: flex;
flex-direction: column;
padding-right: 50rpx;
color: #777;
}
.ykt-ye-name {
font-size: 11pt;
line-height: 50rpx;
padding-left: 30rpx;
}
.ykt-ye-money {
text-align: center;
font-size: 10pt;
}
.ykt-ye-value {
font-size: 36pt;
font-weight: bold;
line-height: 80rpx;
padding-right: 25rpx;
}
.ykt-img {
display: flex;
align-items: center;
justify-content: center;
width: 200rpx;
}
.ykt-img image {
width: 125rpx;
height: 125rpx;
padding: 20rpx 30rpx;
}
.ykt-card-more {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin: 5rpx 25rpx 10rpx 25rpx;
line-height: 100%;
opacity: .6;
}
.ykt-ye-time {
font-size: 9pt;
}
.ykt-ye-id {
font-size: 10pt;
}
/* canvas */
.grid-remind {
padding-left: 40rpx;
color: #999;
margin-bottom: 25rpx;
}
/* 余额、消费切换按钮 */
.balance-consumption {
display: flex;
margin: 0 45rpx 10rpx;
border-radius: 5px;
box-shadow: 0 0 10rpx #ddd;
overflow: hidden;
}
.balance-consumption text {
flex: 1;
flex-shrink: 0;
line-height: 150%;
font-size: 10pt;
padding: 12rpx 0;
font-weight: bold;
text-align: center;
background: #fff;
}
.balance-consumption .current-btn {
color: #fff;
background: #ffcb63;
}
/* 网格 */
.grid-wraper {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-top: 50rpx;
width: 100%;
height: 300px;
}
#ykt-canvas {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: 100%;
}
/* 详情竖线 */
.line {
position: absolute;
z-index: 999;
top: 15px;
height: 265px;
width: 3px;
background: #e78ab0;
}
/* 横纵坐标的含义 */
.y-text {
position: absolute;
left: 15rpx;
top: -40rpx;
padding: 0 10rpx;
font-size: 24rpx;
color: #999;
}
.x-text{
position: absolute;
right: 25rpx;
bottom: -10rpx;
padding: 0 10rpx;
font-size: 24rpx;
color: #999;
}
/* 详情盒子 */
.detail-remind {
font-size: 9pt;
line-height: 100%;
color: #aaa;
text-align: center;
margin: 30rpx 5rpx;
}
.ykt-detail-wraper {
display: flex;
flex-direction: column;
margin: 0 30rpx 30rpx;
background: #fff;
border-radius: 3px;
}
.ykt-detail {
display: flex;
flex-direction: column;
padding: 0 10rpx;
overflow: hidden;
}
.ykt-head {
display: flex;
justify-content: center;
align-items: center;
height: 120rpx;
}
.ykt-type-name {
font-size: 11pt;
}
.detail-list {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0 35rpx 10rpx;
}
.detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25rpx 5rpx 20rpx;
border-top: 1px solid #eee;
}
.detail-item-label {
color: #888;
width: 60pt;
}
.detail-item-value {
flex: 1;
}
.content{
flex-direction: column;
padding: 400rpx 20rpx 0;
}
.loader{
display: inline-block;
width: 100%;
height: 160rpx;
line-height: 160rpx;
margin-top: -160rpx;
letter-spacing: 10rpx;
text-align: center;
box-sizing: border-box;
padding-top: 40rpx;
}
.list-item{
display: flex;
align-items: center;
justify-content: space-between;
height: 120rpx;
margin-bottom: 20rpx;
border-radius: 3px;
box-shadow: 1px 2px 3px #ddd;
padding: 0 30rpx;
color: #fff;
}
.list-item.jw{
">#9f8bea;
}
.list-item.oa{
">#73b4ef;
}
.list-item.hy{
">#ffcb63;
}
.list-item.jz{
">#e78ab0;
}
.list-item.new{
">#7acfa6;
}
.list-item-left{
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: hidden;
padding-right: 10rpx;
}
.list-item-title{
font-size: 10pt;
line-height: 175%;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
}
.list-item-dep{
font-size: 10pt;
line-height: 125%;
}
.list-item-time{
font-size: 10pt;
line-height: 125%;
}
.list-item-icon{
flex: 0 0 60rpx;
height: 60rpx;
width: 60rpx;
border-left: 1px solid #fff;
padding-left: 25rpx;
}
还有一些就不再此处赘述
二、测试报告
1有一些机型会有图片加载的问题例如samsung
2不同手机存在颜色色差问题
测试时我会在不同的机型上进行测试，测试在不登录时各个功能是否正常运行，是否给予用户足够的反馈信息。
| 测试矩阵 | 后端功能测试 | 前端功能测试 | |||||||||||||
| 测试机型 | 登陆功能 | 节约信息 | 服务查询 | 海大新闻 | 查询校园卡 | 查询水电费 | 退出登录 | 报修结果 | 点击事件 | 页面排版 | 图片显示 | 结果显示 | 页面切换 | 图标有无问题 | |
|
三星s7edge |
正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 点活动偶尔会崩 | 较好 | 较好 | 正常 | 正常 | 没有 | |
| 小米9SE | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 没问题 | 较好 | 较好 | 正常 | 正常 | 没有 | |
| 华为mate30pro | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 点活动偶尔会崩 | 较好 | 较好 | 正常 | 正常 | 没有 | |
| 华为荣耀 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 点活动偶尔会崩 | 较好 | 较好 | 正常 | 正常 | 没有 | |
| SAMSUNG galaxy note3 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 正常 | 点活动偶尔会崩 | 较好 | 较好 | 正常 | 正常 | 没有 | |
三.习得的软工方法
我选择的迭代开发的方式，由于有之前srdp的经验。所以还算比较顺利。 在测试时，我用我们宿舍里的人的手机进行测试对项目进行了功能测试、逻辑测试，分别取得了令人满意的结果。
浙公网安备 33010602011771号