微信小程序个人中心、我的界面
微信小程序个人中心、我的界面、自定义顶部状态栏、页面监听跳转、简单界面布局
const WXAPI = require('../../wxapi/main');
const PAY = require('../../utils/pay');
const app=getApp();
Page({
/**
* 页面的初始数据
*/
data: {
showPircePop:false,
baseurl:'',
freenum:0,
priceIndex:-1,
authorize:false,
barHeight: 30, // 顶部状态栏高度
navBarHeight: 66, // 顶部高度
staticlist:[0,0],
navlist: ['收信箱', '发信箱'],
navstatus: [1, 2],
},
// 查看详情监听
detailClick() {
wx.showToast({
title: '暂未开发',
icon: 'none'
})
// wx.navigateTo({
// url: '/pages/index/index',
// })
},
/**
* 获取订单数据
*/
getdata(page) {
let current = this.data.current
let status = this.data.navstatus
const that = this
let apidata = {
page: this.data.page,
pagesize: this.data.pagesize,
status: status[current]
}
WXAPI.getnote(apidata).then(function (res) {
if (res.list.length < apidata.pagesize) {
that.setData({
islast: true,
})
}
for (let obj of res.list) {
obj.payprice=parseFloat(obj.payprice)
}
let list = that.data.list;
list = list.concat(res.list);
that.setData({
loading: false,
list: list,
staticlist:res.staticlist
})
})
},
/**打开套餐面板 */
onPriceOpen(){
this.setData({
showPircePop:true,
priceIndex:-1,
})
},
/**选择价格 */
onPriceSelected(e){
const that=this
let index=e.currentTarget.dataset.index
if(index==this.data.priceIndex){
return
}
let item=this.data.messlist[index]
this.setData({
priceIndex:index
})
PAY.pay({
url:WXAPI.messorderurl,
payprice:item.price,
messid:item.id,
num:item.title,
freenum:item.title,
}).then(res=>{
that.setData({
showPircePop:false
})
if(res.status==1){
wx.showToast({
title: res.info,
success:()=>{
wx.navigateTo({
url: '/pages/order/index',
})
}
})
}else{
wx.showToast({
title: res.info,
icon:"error"
})
}
})
},
onError(){
wx.showToast({
title: '暂未开发',
icon: 'error'
})
},
/*编辑个人信息*/
toedit(){
wx.navigateTo({
url: '/pages/mine/edit',
})
},
onPriceClose(){
this.setData({
showPircePop:false
})
},
onCopy(){
wx.setClipboardData({
data: this.data.userinfo.openid,
})
},
tofabu(){
wx.navigateTo({
url: '/pages/topic/fabu',
})
},
tostar(){
wx.navigateTo({
url: '/pages/topic/star',
})
},
toorder(){
wx.navigateTo({
url: '/pages/order/index',
})
},
toqa(){
wx.navigateTo({
url: '/pages/about/index',
})
},
toabout(){
wx.navigateTo({
url: '/pages/about/about',
})
},
tomymy(){
wx.navigateTo({
url: '/pages/mine/mymy',
})
},
/**
* 生命周期函数--监听页面加载
*/
onShow () {
const that = this
let userinfo=wx.getStorageSync('userinfo')
userinfo.openidcopy=userinfo.openid.substring(0,3)+'****'+userinfo.openid.substring(userinfo.openid.length-5,userinfo.openid.length-1)
that.setData({
userinfo
})
WXAPI.getfreenum({}).then(res=>{
that.setData({
freenum:res.list
})
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad () {
const that = this
WXAPI.getmess({}).then(res=>{
that.setData({
messlist:res.list
})
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
},
})2、wxml代码
<!-- 顶部状态栏 -->
<privacy/>
<login showlogin="{{showlogin}}" id="loginCom" bindchangelogin="changeLogin" />
<!-- 个人信息 -->
<view class="bar-box" style="height: {{navBarHeight}}px;">
<view class="level" style="margin-top: {{barHeight}}px;">
<view class="level bar" bindtap="toedit" wx:if="{{show}}">
<image class="top-head" src="{{userinfo.avaturl!=''?userinfo.avaturl:'../../images/nim.png'}}" mode="widthFix"></image>
<view class="welcome">
<text class="nick">{{userinfo.nickname}}</text>
<text class="acount">{{userinfo.openidcopy}}</text>
</view>
</view>
<view class="bar-title" wx:else>个人中心</view>
</view>
</view>
<view class="head-box" style="padding-top: {{navBarHeight+20}}px;">
<view class="level">
<image class="top-head" src="{{userinfo.avaturl!=''?userinfo.avaturl:'../../images/nim.png'}}" mode="widthFix"></image>
<view class="level head-right">
<view class="welcome">
<view class="nick">{{userinfo.nickname}}</view>
<view class='openid-wrapper'>
<view class="id-wrapper">ID</view>
<view class="openid">{{userinfo.openidcopy}}</view>
<view class="copy" bindtap="onCopy">复制</view>
</view>
</view>
<view class="level set-center">已认证</view>
</view>
</view>
<view class="level share-box" bindtap="detailClick">
<view>
<view class="money">
<text>开通会员</text>
<text class="money-text">￥99</text>
</view>
<view class="share-text">开启通往成功的道路！</view>
</view>
<view class="share-btn">查看详情</view>
</view>
</view>
<view class="level sign-box">
<view wx:for="{{navlist}}" wx:key='index' class="tab {{current == index ? 'tabselect theme-color border-color' : ''}}" data-current="{{index}}" id="{{'tab'+index}}" bindtap='checkCurrenttab'>
<view>{{item}}</view><text>{{staticlist[index]}}</text>
<view class="tabline bg-color"></view>
</view>
<view class="tpye">
<view class="type-name">短信剩余</view>
<view class="type-num">{{freenum}}</view>
</view>
</view>
<van-popup show="{{ showPircePop }}" position="bottom" closeable close-icon="close" round bind:close="onPriceClose">
<view class="pricetitle">信封购买</view>
<view class="multi-tips">Tips：点击对应套餐即可购买，只支持微信支付！</view>
<view class="pricelist flex flexwrap">
<view class="priceitem {{priceIndex==index?'border-color':''}}" catchtap="onPriceSelected" data-index="{{index}}" wx:for="{{messlist}}" wx:key="index">
<image src="/images/envelope.png" class="priceitem-logo" mode=""/>
<view class="price_t">{{item.title}}/封</view>
<view class="price_p">{{item.price}}￥</view>
</view>
</view>
</van-popup>
<!-- 二级菜单 -->
<view class="white-box">
<button class="row" style="width: 100%;" bindtap="toedit">
<view class="left">
<image src="../../images/ocean.png"></image>
<text class="text">基本信息</text>
</view>
<image class="right" src="../../images/right.png" mode="widthFix"></image>
</button>
<button class="row" style="width: 100%;" bindtap="tofabu">
<view class="left">
<image src="../../images/ocean.png"></image>
<text class="text">我的烦恼</text>
</view>
<image class="right" src="../../images/right.png" mode="widthFix"></image>
</button>
<button class="row" style="width: 100%;" bindtap="tostar">
<view class="left">
<image src="../../images/star.png"></image>
<text class="text">我的点赞</text>
</view>
<image class="right" src="../../images/right.png" mode="widthFix"></image>
</button>
<button class="row" style="width: 100%;" bindtap="toorder">
<view class="left">
<image src="../../images/charge.png"></image>
<text class="text">充值记录</text>
</view>
<image class="right" src="../../images/right.png" mode="widthFix"></image>
</button>
<button class="row" style="width: 100%;" bindtap="onPriceOpen">
<view class="left">
<image src="../../images/order.png"></image>
<text class="text">信封购买</text>
</view>
<image class="right" src="../../images/right.png" mode="widthFix"></image>
</button>
<button class="row" style="width: 100%;" bindtap="toqa">
<view class="left">
<image src="../../images/qa.png"></image>
<text class="text">常见问题</text>
</view>
<image class="right" src="../../images/right.png" mode="widthFix"></image>
</button>
<button class="row" style="width: 100%;" bindtap="toabout">
<view class="left">
<image src="../../images/about.png"></image>
<text class="text">关于我们</text>
</view>
<image class="right" src="../../images/right.png" mode="widthFix"></image>
</button>
</view>
<view class="white-box">
<button open-type="contact" class="row" style="width: 100%;border-bottom: none;">
<view class="left">
<text class="text">在线客服</text>
</view>
</button>
<button class="row" style="width: 100%;border-bottom: none;">
<view class="left">
<text class="text">当前版本</text>
</view>
<view style="text-align: center;">V2.0</view>
</button>
</view>
<view class="copy">
<text>2022-2023 © 码尚有缘</text>
</view>3、wxss代码
page {
background-color: #f1f1f1;
}
.level {
display: flex;
align-items: center;
}
/* 状态栏 */
.bar-box {
background-color: #2979ff;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
padding: 20rpx 0;
}
.bar {
width: 80%;
margin-right: 30%;
margin-top: 1.5%;
margin-left: 20rpx;
}
.bar-title {
margin-top: 1.5%;
margin-left: 20rpx;
text-align: center;
font-size: 34rpx;
color: white;
}
.top-head {
width: 15%;
border-radius: 50%;
background-color: white;
}
.welcome {
display: flex;
flex-direction: column;
margin-left: 20rpx;
color: white;
}
.nick {
font-size: 32rpx;
font-weight: bold;
margin-bottom: -15rpx;
}
.acount {
font-size: 22rpx;
margin-top: 5rpx;
}
.head-box {
background-color: #2979ff;
padding: 0 20rpx;
}
.head-right {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.set-center {
background-color: #19be6b;
color: white;
border-radius: 50rpx;
font-size: 26rpx;
padding: 5rpx 20rpx;
}
.share-box {
justify-content: space-between;
margin-top: 8%;
background-color: rgb(65, 64, 64);
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
padding: 20rpx;
}
.money {
font-size: 30rpx;
color: rgb(248, 201, 70);
}
.money-text {
padding-left: 20rpx;
}
.share-text {
padding-top: 10rpx;
font-size: 24rpx;
color: rgba(248, 212, 112, 0.479);
}
.share-btn {
background-color: rgb(248, 201, 70);
color: rgb(54, 54, 54);
border-radius: 50rpx;
font-size: 26rpx;
padding: 5rpx 15rpx 8rpx 15rpx;
}
.sign-box {
margin: 0 20rpx;
padding: 30rpx 20rpx;
font-size: 30rpx;
color: gray;
text-align: center;
justify-content: space-around;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
background-color: white;
}
/* 二级菜单 */
.tab-box {
margin: 20rpx;
background-color: white;
box-shadow: 0 0 5rpx 5rpx #f1f1f1;
padding: 30rpx 20rpx;
border-radius: 20rpx;
}
.tab-list {
flex: 1;
text-align: center;
color: gray;
}
.tab-img {
width: 50%;
}
.tab-text {
font-size: 30rpx;
margin: 5rpx 0;
}
.white-box {
background-color: white;
margin: 20rpx;
border-radius: 20rpx;
padding: 0 20rpx;
}
.row {
display: flex;
align-items: center;
padding: 36rpx 10rpx;
font-size: 30rpx;
font-weight: inherit;
height: 120rpx;
background-color: rgba(0, 0, 0, 0);
border-bottom: 1rpx solid #f1f1f1;
}
.row::after {
border: none;
}
.text {
margin-left: 15rpx;
color: #636262;
}
.left {
width: 90%;
text-align: left;
display: flex;
align-items: center;
color: rgb(59, 59, 59);
}
.left image{
align-self: center;
width: 35rpx;
height: 35rpx;
}
.right {
width: 25rpx;
height: 25rpx;
text-align: right;
color: rgb(148, 147, 147);
}
/* 商标 */
.copy {
padding: 30rpx;
text-align: center;
}
.copy text {
font-size: 25rpx;
color: gray
}
.openid-wrapper{
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.id-wrapper{
background-color: #4da9ff;
color: #000000;
padding: 0rpx 10rpx;
margin-right: 10rpx;
border-radius: 8rpx;
}
.openid{
color: rgb(255, 255, 255);
font-weight: 500;
}
.copy{
color: #ffffff;
}
.pricetitle {
text-align: center;
padding: 20rpx;
}
.multi-tips{
color: #999;
font-size: 24rpx;
text-align: center;
position: relative;
}
.pricelist {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20rpx;
padding: 30rpx;
box-sizing: border-box;
}
.priceitem {
display: flex;
padding: 30rpx;
box-sizing: border-box;
border: 1px dashed #ececec;
}
.priceitem-logo {
padding: 10rpx 0;
width: 60rpx;
height: 40rpx;
}
.price_t {
position:relative;
font-size: 28rpx;
width: 40%;
padding: 10rpx;
text-align: left;
}
.price_p {
position:relative;
width: 40%;
padding: 10rpx;
text-align: right;
font-size: 28rpx;
color: #999;
}4、json代码
{
"usingComponents": {},
"navigationStyle": "custom"
}更多微信小程序示例的分享，请进入我的主页查看哦。
