<!--pages/my/member/member.wxml--><view class='member'><image class='header' src="{{tempFilePaths }}" mode="aspecFill"bindtap="chooseimage"></image><view class='member_nickname'>昵称显示{{userInfo.nickName}}</view><view class='recharge'>充值金额：0.00{{money}}元 <view> 所得积分：0.00{{points}}分</view></view><view class="modalDlg" wx:if="{{showModal}}"><view class='close_mask' bindtap="close_mask">X</view> <input class='recharge_amount' type='text' placeholder='充值金额'maxlength="8" value='{{recharge_amount}}'></input><button class='save_money' type='submit' >立即充值</button></view><button class='save_money_sumbit' bindtap="submit">充值</button><view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view><view class='login_register'bindtap="supple">完善资料</view></view><view class='my_points' bindtap='points_center' >积分中心</view><view class='my_points'bindtap='exchangecode' >我的兑换码</view>
/* pages/my/member/member.wxss */page{background: #f1f1f1;}.member{border-bottom: 2rpx solid #aaa;height:330rpx;}.header{width: 140rpx;height: 140rpx;position: relative;top: 20rpx;left: 30rpx;z-index:20;border-radius:50%;}.member_nickname{position:relative;top:-100rpx;font-size:26rpx;left:25%;}.recharge {width:248rpx;height:100rpx;font-size:28rpx;position:relative;left:80rpx;line-height:88rpx;top:-30rpx;}.my_points {width: 100%;border-bottom: 2rpx solid #aaa;position: relative;height: 80rpx;font-size: 30rpx;line-height: 80rpx;text-indent: 1em;background: #fff;}.login_register{position:relative;font-size:32rpx;top:-300rpx;left: 76%;color: #d95155;}.save_money_sumbit{background: #d95155;width: 130rpx;height: 50rpx;line-height: 50rpx;position:relative;top:-110rpx;font-size:30rpx;left:5%;color: #fff;}/* 点击充值弹窗 */.mask{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;z-index: 9000;opacity: 0.7;}.modalDlg{width: 580rpx;height:450rpx;position: fixed;top: 50%;left: 0;z-index: 9999;margin: -370rpx 85rpx;background-color: #fff;border-radius: 36rpx;display: flex;flex-direction: column;align-items: center;}.recharge_amount{color:#aaa;width:450rpx;height:80rpx;background:#f1f1f1;text-align:center;border-radius:12rpx;margin-top:56rpx;text-indent:0;}.save_money{color:#fff;width:270rpx;height:80rpx;line-height: 80rpx;background:#d95155;text-align:center;border-radius:12rpx;margin-top:80rpx;font-size: 28rpx;text-indent: 0em;}.close_mask{color:#000;position:relative;left:40%; /* top: -82%; */font-size:32rpx;}/*弹窗结束 */button::after{border:none;}
// pages/my/member/member.jsPage({/*** 页面的初始数据*/data: {showModal: false,tempFilePaths: "/image/my/header.png",},// 弹窗事件// 点击充值弹窗submit: function () {this.setData({showModal: true})},preventTouchMove: function () {},close_mask: function () {this.setData({showModal: false})},// 点击按钮换手机相册或者电脑本地图片chooseimage: function () {var _this = this;wx.chooseImage({count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 _this.setData({tempFilePaths: res.tempFilePaths})}})},/*** 生命周期函数--监听页面加载*/onLoad: function () {},supple: function () {wx.navigateTo({url: "./supple/supple",})},points_center: function () {wx.navigateTo({url: "./points/points",})},exchangecode: function () {wx.navigateTo({url: "./exchangecode/exchangecode",})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})
pages/my/member/points.wxml
<view class="swiper-tab"><view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="tabNav"style="border-right:none;border-top-left-radius:20rpx;border-bottom-left-radius:20rpx">我的积分</view><view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="tabNav"style="border-radius:0rpx;border-left:2rpx solid #ccc;border-right:2rpx solid #ccc;">积分兑换</view><view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="tabNav"style="border-left:none;border-top-right-radius:20rpx;border-bottom-right-radius:20rpx">兑换项目</view></view><swiper current="{{currentTab}}" duration="1000"style="height:1000px"><swiper-item><view><view class='accumulated_point'><view class='my_points' bindtap='points_center'>我的积分<text style='float:right;margin-right:20rpx;'>0.00积分{{mypoints}}</text></view></view></view></swiper-item><swiper-item><view class='convertpoints' bindtap='points_center'>当前可兑换积分:0.00{{convert}}积分</view><view class='my_points_case' bindtap='points_center'>100{{}}积分<text class='mypoints'>小项理疗{{pointscase}}</text></view></swiper-item><swiper-item><view class='convertpoints' bindtap='points_center'>当前可兑换积分:0.00{{convert}}积分</view><view class='my_points_case' bindtap='points_center'>100{{}}积分<text class='mypoints'>小项理疗{{mypoints}}</text></view><view class='my_points_case' bindtap='points_center'>200{{}}积分<text class='mypoints'>中医传统艾灸{{pointscase}}</text></view><view class="modalDlg" wx:if="{{showModal}}"><view class='close_mask' bindtap="close_mask">X</view> </view><button class='confirm'bindtap="confirm">确定兑换</button><view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view></swiper-item></swiper>
pages/my/member/points.wxss
page {background: #f1f1f1;}.swiper-tab {width: 100%;text-align: center;line-height: 80rpx;margin-top: 40rpx;height: 100rpx;}.swiper-tab-list {font-size: 30rpx;display: inline-block;width: 166rpx;color: #777;border: 2rpx solid #ccc;background: #fff;}.on {color: #d95155;width: 166rpx;height: 80rpx;line-height: 80rpx;}.swiper-box {display: block;height: 100%;width: 100%;overflow: hidden;}.swiper-box view {text-align: center;}.accumulated_point {border-bottom: 2rpx solid #ccc;border-top: 2rpx solid #ccc;height: 100rpx;margin-top: 16rpx;}.item_time {font-size: 28rpx;height: 100rpx;line-height: 100rpx;margin-left: 20rpx;}.recharge_time {width: 248rpx;height: 100rpx;font-size: 28rpx;position: relative;left: 32%;top: -3rpx;line-height: 52rpx;}.recharge {width: 248rpx;height: 100rpx;font-size: 28rpx;position: relative;left: 32%;top: -100rpx;line-height: 52rpx;}.total_points {width: 162rpx;height: 100rpx;font-size: 26rpx;position: relative;left: 73%;top: -200rpx;line-height: 52rpx;color: #ccc;}.total_points_text {color: #000;font-size: 30rpx;position: relative;right: 18%;width: 250rpx;top: -10rpx;}.explain {color: #ccc;text-align: right;font-size: 28rpx;float: right;margin-right: 30rpx;}.recharge_time_money {width: 314rpx;height: 100rpx;font-size: 28rpx;position: relative;left: 8%;line-height: 52rpx;}.expense_case {width: 640rpx;}.expensed {position: relative;top: -76rpx;left: 80%;font-size: 32rpx;}.my_points {font-size: 26rpx;height: 100rpx;line-height: 100rpx;background: #fff;text-indent: 1em;}.my_points_case {font-size: 26rpx;height: 60rpx;line-height: 60rpx;border: 2rpx;background: #fff;margin-top: 20rpx;text-indent:1em;}.convertpoints {text-align: center;background: #d95155;color: #fff;font-size: 34rpx;height: 60rpx;line-height: 60rpx;}.mypoints {float: right;margin-right: 10px;background: #d95155;height: 40rpx;border-radius: 10rpx;color: #fff;text-align: center;line-height: 40rpx;margin-top: 10rpx;padding-left: 10rpx;padding-right: 10rpx;}.confirm{background: #fff;color: #ccc;font-size: 30rpx;position: relative;top: 5%;width: 300rpx;}button::after{border:none;}
// pages/my/member/points/points.jsPage({/*** 页面的初始数据*/data: {isShow: true,currentTab: 0,showModal: false },tabNav: function (e) {console.log(e.target.dataset.current, 111, this.data.currentTab)if (this.data.currentTab === e.target.dataset.current) {return false;} else {var showMode = e.target.dataset.current == 0;this.setData({currentTab: e.target.dataset.current,isShow: showMode})}},confirm:function(){if ((this.data.pointscase == null) || (this.data.pointscase == '')) {wx.showToast({title: '请选择项目',icon: 'none',duration: 2000})return}this.setData({showModal: true})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})
如果觉得《微信小程序点击换头像-图片从本地获取-tab选项卡-点击按钮出弹框》对你有帮助，请点赞、收藏，并留下你的观点哦！
