<view class="main"> <view class="header"> <image src="userbg.png" class="bg"></image> <image src="{{thumb}}" class="thumb"></image> <text class="nickname">{{nickname}}</text> <view class="top3"> <view class="top33"> <text class="t1">0.00元</text> <text class="t2">账户余额</text> </view> <view class="top33"> <text class="t1">0张</text> <text class="t2">优惠券</text> </view> <view class="top33"> <text class="t1">0个</text> <text class="t2">积分数量</text> </view> </view> </view> <view class="orders-box"> <view class="orders">积分充值</view> <view class="userbut" bindtap="Recharge"> <image src="../../image/userbut.png"></image> </view> </view> <view class="address-box"> <view class="address-manage"> <navigator url="/pages/order/order">全部订单</navigator> </view> <view wx:if="{{hasAddress}}" class="address-list"> <view>{{address.name}}</view> <view>{{address.phone}}</view> <view>{{address.detail}}</view> </view> </view> <view class="address-box"> <view class="address-manage"> <navigator url="#">意见反馈</navigator> </view> <view wx:if="{{hasAddress}}" class="address-list"> <view>{{address.name}}</view> <view>{{address.phone}}</view> <view>{{address.detail}}</view> </view> </view> </view> |
.header{ position: relative; width: 100vw; height: 57.87vw; line-height: 100rpx; box-sizing: border-box; font-size: 28rpx; color: #fff; } .bg{position: absolute; top: 0; width: 100%; height: 100%; } .header .thumb{ position: absolute; left: 50rpx; top: 50rpx; width: 150rpx; height: 150rpx; border-radius: 50%; box-shadow:#FEC47B 0px 0px 5px 5px; } .top3{ width: 100%; position: absolute; bottom: 30px;} .top3 .top33{width: 33.33%; float: left; text-align: center;} .t1{ height: 25px; line-height: 25px;} .t2{ height: 25px; line-height: 25px; color: #522F07;} .top3 .top33 text{ width: 100%; float: left;} .nickname{ position: absolute; left: 230rpx; line-height: 120px; } .header .about{ float: right; } .address-box{ border-bottom: 1rpx solid #e9e9e9; color: #999; line-height: 90rpx; font-size: 28rpx; } .address-box .address-manage{ position: relative; height: 90rpx; padding-left: 20rpx; } .address-box .address-manage::after{ position: absolute; right: 30rpx; top: 34rpx; content: ''; width: 16rpx; height: 16rpx; border-top: 4rpx solid #7f7f7f; border-right: 4rpx solid #7f7f7f; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .address-box .address-list{ padding-left: 30rpx; } .address-box .address-list view{ height: 90rpx; } .address-box .address-list view:last-child{ border-bottom: 0; } .orders-box{ color: #999; font-size: 28rpx; border-bottom: 20rpx solid #e9e9e9; } .orders{ height: 90rpx; line-height: 90rpx; text-align: center; font-size: 40rpx; color: #000; margin: 30rpx 0; } .userbut{ width: 350px; height: 127px; margin: 0 auto; margin-bottom:50rpx; } .userbut image{ width: 100%; height: 100%; } .orders-list{ padding-left: 30rpx; } .orders-list:last-child{ border-bottom: 0; } .orders-number{ height: 90rpx; line-height: 90rpx; border-bottom: 1rpx solid #e9e9e9; } .orders-detail{ position: relative; height: 120rpx; padding: 35rpx 20rpx 35rpx 170rpx; } .orders-detail image{ position: absolute; left: 0; top: 20rpx; width: 150rpx; height: 150rpx; } .orders-detail view{ line-height: 60rpx; } .orders-detail .orders-status{ position: absolute; right: 20rpx; top: 35rpx; height: 120rpx; line-height: 120rpx; color: #b42f2d; } .orders-footer{ height: 60rpx; line-height: 60rpx; color: #2f2f2f; padding:15rpx 30rpx 15rpx 0; } .orders-btn{ float: right; width: 170rpx; height: 60rpx; position:absolute; right:20rpx; top:60rpx; line-height:60rpx; border-radius: 6rpx; background: #FF8503; color: #fff; } |
// page/component/new-pages/user/user.js Page({ data:{ thumb:'', nickname:'', orders:[], hasAddress:false, address:{} }, Recharge: function () { var that = this wx.showModal({ title: '消息', content: '该功能尚未开放', success: function (res) { if (res.confirm) { console.log('用户点击确定') } } }) }, onLoad(){ var self = this; /** * 获取用户信息 */ wx.getUserInfo({ success: function(res){ self.setData({ thumb: res.userInfo.avatarUrl, nickname: res.userInfo.nickName }) } }), /** * 发起请求获取订单列表信息 */ wx.request({ url: '', success(res){ self.setData({ orders: res.data }) } }) }, onShow(){ var self = this; /** * 获取本地缓存 地址信息 */ wx.getStorage({ key: 'address', success: function(res){ self.setData({ hasAddress: true, address: res.data }) } }) }, /** * 发起支付请求 */ payOrders(){ wx.requestPayment({ timeStamp: 'String1', nonceStr: 'String2', package: 'String3', signType: 'MD5', paySign: 'String4', success: function(res){ console.log(res) }, fail: function(res) { wx.showModal({ title:'支付提示', content:'<text>', showCancel: false }) } }) } }) |
模板简介:该模板名称为【微信小程序我的彩色个人中心充值页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。