<!--pages/centrality/centrality.wxml-->
<view class='container'>
<view class='user-info' catchtap='toMyInfo'>
<view class='vip'>V</view>
<view class='no-vip'>
<image src='../images/huang.png' class='huang'></image>
<view>成为会员</view>
</view>
<image src='../images/user_img.png' class='userHead'></image>
<view style='margin-left: 37rpx'>
<view class='userName'>
<text style='font-size:36rpx;font-weight: bold;margin-right:20rpx'>徐小平</text>总经理</view>
<view class='company'>联想创投有限公司</view>
</view>
</view>
<view class='mySetting'>
<view class='mySetting-in'>
<view class='mine' catchtap='toMyData'>
<view class='mine-in'>
<image src='../images/ziliao.png' class='tubiao'></image>
<view>完善资料</view>
</view>
<view class='mine-in'>
<view style="color:#999">未认证</view>
<image src='../images/question.png' class='question'></image>
<image src='../images/arrow.png' class='arrow'></image>
</view>
</view>
<view class='mine' catchtap='toMyMessage'>
<view class='mine-in'>
<image src='../images/xiaoxi.png' class='tubiao'></image>
<view>我的消息</view>
</view>
<view class='mine-in'>
<image src='../images/arrow.png' class='arrow'></image>
</view>
</view>
<view class='mine' catchtap='toMyConsume'>
<view class='mine-in'>
<image src='../images/xiaofei.png' class='tubiao'></image>
<view>我的消费</view>
</view>
<view class='mine-in'>
<image src='../images/arrow.png' class='arrow'></image>
</view>
</view>
</view>
</view>
<view class='line'></view>
<view class='system'>
<view class='system-in'>
<view class='mine' catchtap='tel'>
<view class='mine-in'>
<image src='../images/kefu.png' class='tubiao'></image>
<view>联系客服</view>
</view>
<view class='mine-in'>
<image src='../images/tel.png' class='tel'></image>
</view>
</view>
<view class='mine' catchtap='toMySetting'>
<view class='mine-in'>
<image src='../images/shezhi.png' class='tubiao'></image>
<view>系统设置</view>
</view>
<view class='mine-in'>
<image src='../images/arrow.png' class='arrow'></image>
</view>
</view>
</view>
</view>
</view>
<!--tab切换 -->
<import src="/pages/template/template.wxml" />
<template is="enterprise-tab" data="{{userInfo}}" />
|
/* pages/centrality/centrality.wxss */
@import "/pages/template/template.wxss";
.container {
font-size: 28rpx;
color: #333;
}
.user-info {
background: url('http://image.chubanyun.net/images/TRQ/user-head.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 56rpx 0 135rpx 64rpx;
box-sizing: border-box;
display: flex;
align-items: center;
color: #fff;
position: relative;
}
.vip {
position: absolute;
font-size: 18rpx;
width: 32rpx;
height: 32rpx;
text-align: center;
line-height: 32rpx;
background-color: #febd00;
border: 1px solid #fff;
border-radius: 50%;
left: 25%;
top: 50%;
}
.no-vip {
position: absolute;
font-size: 20rpx;
width: 115rpx;
height: 36rpx;
text-align: center;
line-height: 36rpx;
background-color: #fff;
border: 1px solid #febd00;
color: #febd00;
display: flex;
align-items: center;
border-radius: 5rpx;
justify-content: space-around;
left: 15%;
top: 53%
}
.huang{
width: 18rpx;
height: 18rpx
}
.userHead {
width: 158rpx;
height: 158rpx;
border-radius: 50%;
border: 1px solid #fff;
}
.mySetting {
width: 100%;
padding: 27rpx;
box-sizing: border-box;
}
.mySetting .mySetting-in {
width: 100%;
border: 1px solid #eee;
padding: 0 15rpx;
box-sizing: border-box;
box-shadow: 0 5rpx 5rpx #f7f7f7;
border-radius: 10rpx;
}
.mine {
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
line-height: 100rpx;
border-bottom: 1px solid #eee;
}
.mine:last-child {
border: none;
}
.mine-in {
display: flex;
align-items: center;
}
.tubiao {
width: 42rpx;
height: 42rpx;
margin-right: 20rpx;
}
.question {
width: 31rpx;
height: 31rpx;
margin: 0 8rpx;
}
.arrow {
width: 15rpx;
height: 23rpx;
}
.line {
height: 20rpx;
width: 100%;
background-color: #eee;
}
.system {
padding: 27rpx;
box-sizing: border-box;
}
.system .system-in {
width: 100%;
border: 1px solid #eee;
padding: 0 15rpx;
box-sizing: border-box;
box-shadow: 0 5rpx 5rpx #f7f7f7;
border-radius: 10rpx;
}
.tel {
width: 60rpx;
height: 60rpx;
}
|
// pages/centrality/centrality.js
import { toTabPage } from "../../utils/common.js"
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
// tab切换
toTabPage: function (e) {
toTabPage(e)
},
//个人信息
toMyInfo: function () {
let that = this;
wx.navigateTo({
url: `/pages/A-centrality/A-myInfo/A-myInfo`,
})
},
//完善资料
toMyData: function () {
let that = this;
wx.navigateTo({
url: `/pages/A-centrality/A-myData/A-myData`,
})
},
//我的消息
toMyMessage: function () {
let that = this;
wx.navigateTo({
url: `/pages/A-centrality/A-myMessage/A-myMessage`,
})
},
//我的消费
toMyConsume: function () {
let that = this;
wx.navigateTo({
url: `/pages/A-centrality/A-myConsume/A-myConsume`,
})
},
//我的设置
toMySetting: function () {
let that = this;
wx.navigateTo({
url: `/pages/A-centrality/A-mySetting/A-mySetting`,
})
},
//联系客服
tel: function () {
let that = this;
wx.makePhoneCall({
phoneNumber: '18771078756',
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
模板简介：该模板名称为【微信小程序单页面模板之投资金融融资会员个人中心页面制作设计】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
