@LastLeaf 下面是WXML代码和JS代码
js：
var wxCharts = require(’…/…/utils/wxcharts.js’);
// 获取全局应用程序实例对象
const app = getApp();
var areaChart = null;
// 创建页面实例对象
Page({
/**
* 页面名称
*/
name: “userlogin”,
/**
* 页面的初始数据
*/
data: {
loginTxt: “立即登录”,
textblue: “off”,
feeflag: “feeon”,
leftM: “–”,
rightM: “–”,
fee: “–”,
Pfee: “–”,
Sfee: “–”,
Deposit: “–”,
Mreturn: “–”,
percent: 0,
toview:‘loginview’,
bimg: “default_user.png”
},
loginview(event) {
wx.navigateTo({
url: ‘…/login/login’
})
},
toremained(e)
{
wx.navigateTo({
url: ‘…/remained/remained’
})
},
getPreMoth(count) {
var obj = [];
var curMonth = new Date().getMonth() + 1;
for (let i = count; i >= 1; i–) {
obj.push(curMonth + ‘月’);
curMonth -= 1;
if (curMonth == 0) {
curMonth = 12;
}
}
return obj;
},
/**
* 生命周期函数–监听页面加载
*/
onLoad(e) {
let res = wx.getSystemInfoSync();
let windowWidth = res.windowWidth;
let that = this;
let array = that.getPreMoth(6);
let percent = (300 / 500) * 100;
let data = [null,null,null,null,null,null];
if (app.isLogin) {
data = [100,120,200,240,112,70];
that.setData({
loginTxt: app.loginPhone,
textblue: “on”,
feeflag: “feeon”,
leftM: “300”,
rightM: “500”,
fee: “125.88”,
Pfee: “8.00”,
Sfee: “2.00”,
toview:“toremained”,
Deposit: “80.00”,
Mreturn: “45.50”,
percent: percent,
bimg: “user.png”
});
}
let config ={
canvasId: ‘areaCanvas’,
type: ‘area’,
categories: array.reverse(),
animation: false,
legend: false,
series: [{
data: data,
format: function (val) {
return val.toFixed(2) + “元”;
}
}],
yAxis: {
format: function (val) {
return “￥” + val;
},
min: 0,
max:300,
fontColor: ‘black’,
gridColor: ‘#f0f0f0’
},
xAxis: {
disableGrid: true,
fontColor: ‘black’,
gridColor: ‘#f0f0f0’
},
width: 300,
height: 200
}
areaChart = new wxCharts(config);
},
/**
* 生命周期函数–监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数–监听页面显示
*/
onShow() {
},
/**
* 生命周期函数–监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数–监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh() {
},
//以下为自定义点击事件
//去流量办理首页
goflowbusiness(){
console.log(“跳转流量办理页面…”);
wx.navigateTo({
url: ‘…/flowcharge/flowcharge’
})
},
//话费充值
mobilefeecharge(){
console.log(“话费办理页面跳转”);
wx.navigateTo({
url: ‘…/mobilefeecharge/mobilefeecharge’
})
},
//套餐更换
combochange(){
console.log(“套餐更换页面跳转”);
wx.navigateTo({
url: ‘…/combotype/combotype’
})
},
//电子发票
goinvoice(){
console.log(“电子发票跳转”);
wx.navigateTo({
url: ‘…/invoice/invoice’
})
},
//我的宽带
gomyTrade(){
wx.navigateTo({
url: ‘…/queryKD/queryKD’
})
},
//查看详情
lookflowfee(){
wx.navigateTo({
url: ‘…/myKDinfo/myKDinfo’
})
},
//查看详情
lookflowfee(){
wx.navigateTo({
url: ‘…/remained/remained’
})
},
//账单详情
lookbilldetal(){
wx.navigateTo({
url: ‘…/myBill/myBill’
})
},
})
wxml:
<view class=“pageView”>
<view class=" top_view" data-c_e_id=“wx_view_f7fc1e7b”>
<view catchtap="{{toview}}" class=" user_view" data-c_e_id=“wx_view_472ab680”>
<image class=“user_image” data-c_e_id=“wx_image_158643ae” mode=“aspectFit bimg” src="…/…/resources/lyl/{{bimg}}"/>
<text class=“c-block login_text” data-c_e_id=“wx_text_14ea0612”>{{loginTxt+" >"}}</text>
</view>
</view>
<view class=“center_view” data-c_e_id=“wx_view_b464488b”>
<navigator url="/page/ordernum/ordernum" class=“wx-navigator_g196O6” data-c_e_id=“wx_navigator_2917b410” hover-class=“none” open-type=“navigate”>
<view class=“c-minheight wx-view_L20iob” data-c_e_id=“wx_view_fb439e50”>
<image class=“wx-image_V2HPCo” data-c_e_id=“wx_image_68c913e9” mode=“scaleToFill” src="…/…/resources/lyl/order_num.png" />
</view>
<text class=“c-block wx-text_QfNwVo” data-c_e_id=“wx_text_94239397”>预约排号</text>
</navigator>
<navigator url="" class=“wx-navigator_g196O6” data-c_e_id=“wx_navigator7e5d36dd” hover-class=“none” open-type=“redirect”>
<view class=“c-minheight wx-view_L20iob” data-c_e_id=“wx_view7ceea4c2” bindtap=“goinvoice”>
<image class=“wx-image_V2HPCo” data-c_e_id=“wx_image4e26338b” mode=“scaleToFill” src="…/…/resources/lyl/elBill.png" />
</view>
<text class=“c-block wx-text_QfNwVo” data-c_e_id=“wx_text1bcb25f0” bindtap=“goinvoice”>电子发票</text>
</navigator>
<navigator url="" class=“wx-navigator_g196O6” data-c_e_id=“wx_navigatorc4655684” hover-class=“none” open-type=“redirect”>
<view class=“c-minheight wx-view_L20iob” data-c_e_id=“wx_view8ff62ba5” bindtap=“gomyTrade”>
<image class=“wx-image_V2HPCo” data-c_e_id=“wx_image1e643a9e” mode=“scaleToFill” src="…/…/resources/lyl/web.png" />
</view>
<text class=“c-block wx-text_QfNwVo” data-c_e_id=“wx_texta3e7cacc” bindtap=“gomyTrade”>我的宽带</text>
</navigator>
</view>
<view class=“M_view”>
<view class=“M_top_view”>
<text class=“M_top_view_text”>剩余流量</text>
</view>
<view class=“M_center_view”>
<view class=“M_center_view_1”>
<text class=“MCV_text_1 f_15”>{{leftM}}M</text>
<text class=“MCV_text_2 f_15”>{{rightM}}M</text>
</view>
<view class=“M_center_view_2”>
<progress color="#267bda" percent="{{percent}}" stroke-width=“12”/>
</view>
</view>
<view class=“M_end_view”>
<navigator url="" class="" hover-class=“navigator-hover” open-type=“redirect”>
<view class=“M_end_view_1”>
<image class=“m_end_img” mode=“scaleToFill” src="…/…/resources/lyl/order_M.png" />
<text class=“m_end_text text_24 {{textblue}}” bindtap=“goflowbusiness”>办流量</text>
</view>
</navigator>
<navigator url="" class="" hover-class=“navigator-hover” open-type=“redirect”>
<view class=“M_end_view_2” bindtap=“lookflowfee”>
<image class=“m_end_img” mode=“scaleToFill” src="…/…/resources/lyl/detail.png" />
<text class=“m_end_text text_24 {{textblue}}”>查看详情</text>
</view>
</navigator>
</view>
</view>
<view class=“M_view”>
<view class=“M_top_view”>
<text class=“M_top_view_text”>话费余额</text>
</view>
<view class=“M_center_view”>
<view class=“M_center_view_1” style=“margin-top:10px;”>
<text class=“M_top_view_text_1”>截止2017年04月09日</text>
</view>
<view class=“M_center_view_2_1”>
<text class=“f_15”>当前可用余额</text>
<view style=“margin-top: -20rpx;”>
<text class=“MCV_text_1 f_42”>{{fee}}</text>
<text class=“MCV_text_1 f_22”>元</text>
</view>
</view>
</view>
<view class=“M_end_view”>
<navigator url="" class="" hover-class=“navigator-hover” open-type=“redirect”>
<view class=“M_end_view_1”>
<image class=“m_end_img” mode=“scaleToFill” src="…/…/resources/lyl/order_M.png" />
<text class=“m_end_text text_24 {{textblue}}” bindtap=“mobilefeecharge”>充话费</text>
</view>
</navigator>
<navigator url="" class="" hover-class=“navigator-hover” open-type=“redirect”>
<view class=“M_end_view_2” bindtap=“lookflowfee”>
<image class=“m_end_img” mode=“scaleToFill” src="…/…/resources/lyl/detail.png" />
<text class=“m_end_text text_24 {{textblue}}”>查看详情</text>
</view>
</navigator>
</view>
</view>
<view class=“M_view_fee”>
<view class=“M_top_view”>
<text class=“M_top_view_text”>账单查询</text>
</view>
<view class=“M_center_view”>
<view class=“M_center_view_1” style=“margin-top:7px;”>
<view>
<text class=“M_six_text”>本月已付费用: </text>
<text class=“f_15 {{feeflag}}”> {{Pfee}}元</text>
</view>
<view>
<text class=“M_six_text”>本月应付费用: </text>
<text class=“f_15 {{feeflag}}”>{{Sfee}}元</text>
</view>
</view>
<view class=“M_center_view_2_1”>
<view>
<text class=“M_six_text”>本月存入: </text>
<text class=“f_15 {{feeflag}}”>{{Deposit}}元</text></view>
<view>
<text class=“M_six_text”>本月返还:</text>
<text class=“f_15 {{feeflag}}”>{{Mreturn}}元</text></view>
</view>
</view>
<view class=“M_center_six_view”>
<view class=“M_center_six_view_1”>
<image class=“m_end_img_1” mode=“scaleToFill” src="…/…/resources/lyl/data.png" />
<text class=“off” style=“margin-left:5px”>近6个月消费趋势图</text>
</view>
<view class=“M_center_six_view_2”>
<canvas canvas-id=“areaCanvas” class=“canvas” bindtouchstart=“touchHandler”></canvas>
</view>
</view>
<view class=“M_end_view” style=“padding-bottom:34rpx;”>
<navigator url="" class="" hover-class=“navigator-hover” open-type=“redirect”>
<view class=“M_end_view_1”>
<image class=“m_end_img” mode=“scaleToFill” src="…/…/resources/lyl/order_M.png" />
<text class=“m_end_text text_24 {{textblue}}” bindtap=“combochange”>换套餐</text>
</view>
</navigator>
<navigator url="" class="" hover-class=“navigator-hover” open-type=“redirect”>
<view class=“M_end_view_2” bindtap=“lookbilldetal”>
<image class=“m_end_img” mode=“scaleToFill” src="…/…/resources/lyl/detail.png" />
<text class=“m_end_text text_24 {{textblue}}”>查看详情</text>
</view>
</navigator>
</view>
</view>
<view class=“M_view_enjoy”>
<include src="…/enjoy/enjoy.wxml"></include >
</view>
</view>
强力驱动