本文给大家带来的是微信小程序蓝色风格我的会员中心页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/account/account.wxml-->
<view class="tool-tip " wx:if="{{popMsg}}">
<text class="{{popType}}">{{popMsg}}</text>
</view>
<view>
<view class="list">
<navigator url="accountinfo" open-type="navigate" class="item item-positive item-avatar item-icon-right user">
<image src="{{userdata.userfigure||'../../images/head.jpg'}}" alt=""></image>
<view class="h2 {{(userdata.username==null&&userdata.nickname==null)?'padding-top':''}}">
{{userdata.username||userdata.nickname}}
</view>
<view class="p">{{userdata.mobile}}</view>
<text class="icon-accessory iconfont icon-right "></text>
</navigator>
<view class="item item-icon-left order money">
<text class="icon iconfont icon-moneybag" style="color: #4cd964;"></text>
<view class="h2 ">我的钱包
<navigator url="../wallet/recharge" open-type="navigate" class="button button-positive button-outline">
提现
</navigator>
<navigator url="../wallet/recharge" open-type="navigate"
class="button button-energized button-outline">充值
</navigator>
</view>
</view>
<view class="row row-no-padding light-bg row-center text-center order-item">
<navigator url="../wallet/wallet" open-type="switchTab" class="item item-icon-right col ">
<view>账号余额</view>
<view style="color: #f26604">{{orderSum.account||0.00}}</view>
<text class="icon iconfont icon-balance " style="color: #f26604"></text>
</navigator>
<navigator url="" open-type="navigate" class="item item-icon-right col item-borderless">
<view>银行卡</view>
<view style="color: #f26604">{{orderSum.banknum||0}}张</view>
<text class="icon iconfont icon-yinxingqia " style="color: #00ACFF"></text>
</navigator>
</view>
<view class="padding-top"></view>
<navigator url="../order/order" open-type="navigate" class="item item-icon-left item-icon-right">
<text class="icon iconfont icon-form" style="color: #11c1f3"></text>
<view class="h2">我登记的信息及货源</view>
<text class="icon-accessory iconfont icon-right"></text>
</navigator>
<navigator url="../wallet/wallet" open-type="switchTab" class="item item-icon-left item-icon-right">
<text class="icon iconfont icon-moneybag" style="color: #FFD700"></text>
<view class="h2">我的钱包
<view class="item-note">余额 ：
<text class="balanced ">{{orderSum.account || 0}}</text>
</view>
</view>
<text class="icon-accessory iconfont icon-right"></text>
</navigator>
<navigator url="../news/news" open-type="switchTab" class="item item-icon-left item-icon-right">
<text class="icon iconfont icon-mark" style="color: #0ab66a"></text>
<view class="h2">消息</view>
<text class="icon-accessory iconfont icon-right"></text>
</navigator>
<view class="padding-top"></view>
<navigator url="../util/help?id=22" open-type="navigate" class="item item-icon-left item-icon-right">
<text class="icon iconfont icon-guanyuwomen" style="color: #ffc900"></text>
<view class="h2">关于收收</view>
<text class="icon-accessory iconfont icon-right"></text>
</navigator>
<button open-type="share" class="item item-icon-left item-icon-right">
<text class="icon iconfont icon-share" style="color: #4cae4c"></text>
<view class="h2">分享给我的朋友</view>
<text class="icon-accessory iconfont icon-right"></text>
</button>
<navigator url="setting" open-type="navigate" class="item item-icon-left item-icon-right">
<text class="icon iconfont icon-settings" style="color: #1b6d85"></text>
<view class="h2">设置</view>
<text class="icon-accessory iconfont icon-right"></text>
</navigator>
<view class="padding-top"></view>
</view>
</view>
|
二、wxss样式文件代码如下：
/* pages/account/account.wxss */
.icon:not(.icon-right), .iconfont:not(.icon-right) {
color: #00ACFF;
font-size: 1.5rem !important;
}
.user {
height: 2.2rem !important;
}
.user .h2, .user .p, .user .icon-right {
color: #fff !important;
}
.user image {
border: 1px solid #fff;
}
.order {
border-bottom: 1px solid rgba(221, 221, 221, 0.3) !important;
}
.order-item navigator {
margin-top: 1px;
padding: 0.3rem !important;
}
.order-item navigator:first-of-type {
margin-right: 1px;
border-right: 1px solid rgba(221, 221, 221, 0.3) !important;
}
.money .button {
display: inline-block;
float: right;
margin-left: 1.5rem;
min-height: 23px;
line-height: 23px;
}
button.item {
text-align: left;
line-height: 20px;
}
|
三、js页面代码如下：
// pages/account/account.js
//获取应用实例
var app = getApp();
var util = require('../../utils/util.js');
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
util.isLoginModal();
this.getAccountData();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '收收分享',
path: '/pages/account/account',
success: function(res) {
// 转发成功
},
fail: function(res) {
// 转发失败
}
}
},
/**
* 获取我的数据
*/
getAccountData: function () {
var that = this;
//根据会员ID获取会员账号基本信息
util.getUserInfo(function (data) {
that.setData({
userdata: data.data
})
})
}
})
|
.jpg)
.jpg)
