本文给大家带来的是微信小程序收收总货源回收信息总量页设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--index.wxml-->
<view class="tool-tip " wx:if="{{popMsg}}">
<text class="{{popType}}">{{popMsg}}</text>
</view>
<view id="index">
<view class="topbj light text-center">
<view class="total ">
<view class="p num">{{cargoQuantity.num||0}}</view>
<view class="p">总回收量(台)</view>
</view>
<view class="row sub-total row-no-padding">
<view class="col">
<view class="p">{{cargoQuantity?cargoQuantity.informatenum :0}}</view>
<view class="p">信息总量(单)</view>
</view>
<view class="col">
<view class="p">{{cargoQuantity?cargoQuantity.goodsnum:0 }}</view>
<view class="p">总货源量(单)</view>
</view>
</view>
</view>
<view style="margin-top: -2.2rem;">
<view class="card">
<view class="row light-bg row-center main-list">
<navigator url="information" open-type="navigate" class="col border-rb">
<text class="icon iconfont icon-dengjixinxi energized"></text>
<view>
<view class="h5">信息登记</view>
<view class="p">提供回收信息就赚钱</view>
</view>
</navigator>
<navigator url="../order/order" open-type="navigate" class="col border-b">
<text class="icon iconfont icon-jiedanshouhuo positive"></text>
<view>
<view class="h5">已登记信息</view>
<view class="p">查看登记订单的状态</view>
</view>
</navigator>
</view>
<view class="row light-bg row-center main-list">
<navigator url="" open-type="navigate" class="col border-r">
<text class="icon iconfont icon-sponsorfill positive"></text>
<view>
<view class="h5">信息费收入</view>
<view class="p">随时查看收入明细</view>
</view>
</navigator>
<navigator url="" open-type="navigate" class="col">
<text class="icon iconfont icon-friendaddfill royal"></text>
<view>
<view class="h5">邀请同行好友</view>
<view class="p">邀请下单有现金奖励</view>
</view>
</navigator>
</view>
</view>
</view>
<view class="card">
<view class="row text-center light-bg row-center sub-menu border-b">
<navigator url="../util/help?id=23" open-type="navigate" class="col border-r ">
<text class="icon iconfont icon-wenti balanced"></text>
<view class="p" class="inline dark"> 我能做什么?</view>
</navigator>
<navigator navigator url="../util/help?id=24" open-type="navigate" class="col">
<text class="icon iconfont icon-question1 balanced"></text>
<view class="p" class="inline dark"> 我要做什么?</view>
</navigator>
</view>
<view href="tel:400-700-0097">
<image src="../../images/index/kefu.png" class="kefu full-image light-bg" alt="客服电话"></image>
</view>
</view>
<image src="../../images/index/buttom.png" class="kefu-bottom full-image" alt="让回收更简单"></image>
</view>
|
二、wxss样式文件代码如下：
/**index.wxss**/
#index {
width: 100%;
overflow: hidden;
}
.topbj {
/* background: url(../../images/topbj.png) 100% 100%;*/
background-color: #00ACFF;
background-size: cover;
height: 16rem;
padding-top: 0.8rem;
}
.total {
margin: auto;
width: 9rem;
height: 9rem;
border-radius: 50%;
padding-top: 3rem;
border: 3px solid rgba(255, 255, 255, 0.6);
-webkit-box-shadow: 0px 1px 2px rgba(136, 136, 136, 0.5);
box-shadow: 0px 1px 2px rgba(136, 136, 136, 0.5);
}
.total .num {
margin-bottom: 0.5rem;
font-size: 1.8rem;
height: 1.8rem;
line-height: 1.8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sub-total {
margin-top: 1rem;
}
.sub-total .p:first-child {
color: #FFFFFF;
font-size: 1.3rem;
margin: 0 0 0.1rem 0;
height: 1.6rem;
}
.main-list {
text-align: center;
}
.main-list navigator {
padding: 1rem 0.2rem 1rem 0.2rem;
}
.main-list navigator .h5, .main-list navigator .p {
margin: 0.3rem;
}
.main-list navigator .p {
font-size: 0.7rem !important;
color: #888888;
}
.main-list navigator .iconfont {
font-size: 2.2rem !important;
}
.sub-menu navigator {
padding: 1rem 0 0 1.2rem;
color: #585858;
}
.sub-menu navigator .iconfont {
vertical-align: middle;
}
.kefu {
height: 3.6rem;
}
.kefu-bottom {
height: 2rem;
}
|
三、js页面代码如下：
//index.js
//获取应用实例
var app = getApp();
var util = require('../../utils/util.js');
Page({
data: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
//接口API授权 type 1.是公共授权 2.登录授权
if (!wx.getStorageSync("userid")) {
util.authorization(1, function (data) {
//微信授权登录
util.wxLogin();
//首页统计货量
that.getIndexData();
});
} else if (wx.getStorageSync("userid")) {
util.authorization(2, function (data) {
//首页统计货量
that.getIndexData();
});
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/**
* 获取首页数据
*/
getIndexData: function () {
var that = this;
//首页统计货量
util.https(app.globalData.api + "/api/util/getsum", "GET", {},
function (data) {
if (data.code == 1001) {
that.setData({
cargoQuantity: data.data
})
} else {
util.toolTip(that, data.message)
}
}
)
}
})
|
.jpg)
.jpg)
