?

?小程序去除默認樣式需要在pages.json中去除

?

?

?個人中心頁面的代碼:

<template><view><view class="personalcenter container column"><topnavblue icontype="0" navfonts="個人中心"></topnavblue><scroll-view scrollY class="flex-1 scroll0"><view class="userinfobox row"><view class="flex-1"><view class="name fs28 fc-b-main">{{ personalCenterInfo.fwxName }}</view><view class="balance row mt20"><view @tap="toMyCouponList" class="balanceitem"><view class="topbigfont fc-b-main">{{ personalCenterInfo.fCouponCount }} 張</view><view class="fs28 fc-b-less mt10">消費券</view></view><view class="balanceitem"><!-- {{ filter.toYuan(personalCenterInfo.fPoints) }} --><view class="topbigfont fc-b-main">{{ personalCenterInfo.fPoints }} 元</view><view class="fs28 fc-b-less mt10">賬戶余額</view></view></view></view><view @tap="goToUpdateUserProfile" class="header"><image class="testhead" :src="personalCenterInfo.fheadImgUrl" v-if="personalCenterInfo.fheadImgUrl.length > 5"></image><image class="testhead p-blueborder" mode="aspectFill" :src="defaultAvatarUrl" v-else></image></view></view><view class="selectlist p-shadow"><view @tap="toRecharge" class="row flex-center top"><view class="flex-1"><image class="rechargefont" src="/static/images/personalcenter/rechargefont.png"></image></view><view class="rechargebtn p-btnblacksub">立即充值</view></view><view class="bot"><view class="botitemlist"><view @tap="toAppointmentlist" class="item row flex-center"><image class="lefticon" src="/static/images/personalcenter/icon-1.png"></image><view class="fs28 fc-b-main ml12">我的訂單</view></view><view @tap="toRechargeOrderList" class="item row flex-center"><image class="lefticon" src="/static/images/personalcenter/icon-2.png"></image><view class="fs28 fc-b-main ml12">我的充值記錄</view></view><view @tap="toexchange" class="item row flex-center"><image class="lefticon" src="/static/images/personalcenter/tuan.png"></image><view class="fs28 fc-b-main ml12">團購驗券</view></view><view @tap="toPointsTransfer" class="item row flex-center"><image class="lefticon" src="/static/images/personalcenter/icon-6.png"></image><view class="fs28 fc-b-main ml12">積分合并</view></view><view @tap="toCouponReceiveCenter" class="item row flex-center"><image class="lefticon" src="/static/images/personalcenter/icon-3.png"></image><view class="fs28 fc-b-main ml12">領券中心</view></view><view @tap="freeTell" class="item row flex-center"><image class="lefticon" src="/static/images/personalcenter/icon-4.png"></image><view class="fs28 fc-b-main ml12">聯系客服</view></view><!-- v-if="mahJongLeagueInfo.fAppletPath" --><view @tap="goToquestionnaire" class="item row flex-center" ><image class="lefticon" src="/static/images/personalcenter/icon-7.png"></image><view class="fs28 fc-b-main ml12">加盟</view></view></view></view></view></scroll-view></view><foot curent="3" :fDeviceId="deviceId"></foot></view> </template><script>import foot from '@/component/foot/foot';import topnavblue from '@/component/topnav/topnav';export default {components: {foot,topnavblue},data() {return {personalCenterInfo: {fwxName:'Mr.Liu',fCouponCount:10,fPoints:100,fheadImgUrl:'/static/images/bluehome/logo.png',},defaultAvatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',}},methods: {}} </script><style> .container {background-color: #f5f5f5;box-sizing: border-box;color: #333;display: -webkit-flex;display: flex;flex-direction: column;font-size: 28rpx;height: 100%;justify-content: space-between;left: 0;overflow: hidden;padding: 0rpx 0;position: absolute;top: 0;width: 100%; } .personalcenter {background-color: #f6f4ef; } .personalcenter .userinfobox {box-sizing: border-box;margin: 0 auto;padding: 50rpx 40rpx;width: 690rpx; } .personalcenter .header {height: 124rpx;width: 124rpx; } .personalcenter .header .testhead {border-radius: 50%;height: 124rpx;width: 124rpx; } .balance .balanceitem {width: 160rpx; } .balance .balanceitem .topbigfont {font-size: 32rpx; } .selectlist {background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #4ebf3b), color-stop(1, #4ebf3b));border-radius: 20rpx;margin: 0 auto;width: 690rpx; } .selectlist .rechargebtn {border-radius: 999rpx;font-size: 24rpx;height: 60rpx;line-height: 60rpx;text-align: center;width: 174rpx; } .selectlist .rechargefont {height: 35rpx;width: 254rpx; } .selectlist .top {padding: 30rpx; } .bot {background-color: #fff;border-radius: 20rpx;min-height: 410rpx;margin-bottom: 40rpx; } .botitemlist {box-sizing: border-box;padding: 20rpx; } .botitemlist .lefticon {border-radius: 50%;height: 60rpx;margin-left: 20rpx;overflow: hidden;width: 60rpx; } .botitemlist .item {border-bottom: 1rpx solid #fbecce;padding: 20rpx 0; } .botitemlist .item:nth-last-child(1) {border-bottom: none; } </style>

封裝的topnav組件代碼:

<template><view :class="'nav ' + size" :style="'height: ' + height + 'px;background-color:' + defaultSetting.backgroundColor"><view :style="'height:' + statusBarHeight + 'px;width: 100%;'"></view><view class="head" :style="'height: ' + navBarHeight + 'px;width: 100%;'"><viewclass="capsule-box":style="'height:' + menuHeight + 'px; min-height:' + menuHeight + 'px; line-height:' + menuHeight + 'px; left:' + menuRight + 'px; top:' + menuTop + 'px;'"><view class="row flex-center navfonts" v-if="!iscenter"><view @tap="back" class="back" v-if="icontype == '1'"><image class="backbtn" src="/static/images/nav/goback.png"></image></view><view @tap="gohome" class="home" v-else-if="icontype == '2'"><image class="homebtn" src="/static/images/nav/gohome.png"></image></view><view @tap="goHomeblueshop" class="home" v-else-if="icontype == '3'"><image class="homebtn" src="/static/images/nav/gohome.png"></image></view><view @tap="back" class="nav-title" v-if="icontype == '1'">{{ navfonts }}</view><view @tap="gohome" class="nav-title" v-else-if="icontype == '2'">{{ navfonts }}</view><view class="nav-title" v-else>{{ navfonts }}</view></view><view class="navfonts-center" v-if="iscenter"><view class="nav-title-center">{{ navfonts }}</view></view></view></view></view> </template><script> var app = getApp(); export default {data() {return {height: app.globalData.navBarHeight + app.globalData.statusBarHeight,statusBarHeight: app.globalData.statusBarHeight,navBarHeight: app.globalData.navBarHeight,size: 'default',defaultSetting: {backgroundColor: ''},menuHeight: '',menuRight: '',menuTop: ''};},props: {icontype: {type: String},navfonts: {type: String},iscenter: {type: Boolean,default: false},deviceId: {type: String,default: ''}},mounted: function () {},methods: {back: function () {if (1 == this.icontype) {uni.navigateBack({delta: 0});}},gohome: function () {var e = this.deviceId;console.log('gohome', e);uni.reLaunch({url: '/pages/room/roomList/roomList?fSourceType=1&fDeviceId='.concat(e)});},goHomeblueshop: function () {var e = this.deviceId;uni.reLaunch({url: '/pages/room/index/index?fDeviceId='.concat(e)});}} }; </script> <style> .nav {height: 176rpx;z-index: 99; } .capsule-box, .nav {background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #009827), color-stop(1, #00cd36));position: relative; } .capsule-box {height: 88rpx;left: 0;width: 100%; } .capsule-box .backbtn, .capsule-box .homebtn {height: 48rpx;width: 48rpx; } .navfonts {padding-left: 36rpx; } .navfonts, .navfonts-center {height: 88rpx; } .nav-title {color: #fff;font-size: 28rpx;line-height: 48rpx; } .nav-title-center {color: #fff;font-size: 28rpx;line-height: 88rpx;text-align: center; } </style>

封裝的foot組件代碼:

<template><view class="foot row flex-center "><view @tap="jump" class="flex-1" data-active="0"><view class="topicon"><image class="footicon" src="/static/images/foot/footicon-1.png" v-if="curent != 0"></image><image class="footicon" src="/static/images/foot/footicon-1active.png" v-if="curent == 0"></image></view><view :class="'botfont ' + (curent == 0 ? 'active' : '')">首頁</view></view><view @tap="jump" class="flex-1" data-active="1"><view class="topicon"><image class="footicon" src="/static/images/foot/footicon-2.png" v-if="curent != 1"></image><image class="footicon" src="/static/images/foot/footicon-2active.png" v-if="curent == 1"></image></view><view :class="'botfont ' + (curent == 1 ? 'active' : '')">充值</view></view><view @tap="jump" class="flex-1" data-active="2"><view class="topicon"><image class="footicon" src="/static/images/foot/footicon-3.png" v-if="curent != 2"></image><image class="footicon" src="/static/images/foot/footicon-3active.png" v-if="curent == 2"></image></view><view :class="'botfont ' + (curent == 2 ? 'active' : '')">訂單</view></view><view @tap="jump" class="flex-1" data-active="3"><view class="topicon"><image class="footicon" src="/static/images/foot/footicon-4.png" v-if="curent != 3"></image><image class="footicon" src="/static/images/foot/footicon-4active.png" v-if="curent == 3"></image></view><view :class="'botfont ' + (curent == 3 ? 'active' : '')">個人中心</view></view></view> </template><script> var app = getApp(); export default {data() {return {// isIos: app.globalData.isIos};},props: {curent: String,fDeviceId: String},methods: {jump: function (e) {var r = this.fDeviceId;var t = e.currentTarget.dataset.active;var a = getCurrentPages()[getCurrentPages().length - 1].route;switch ((console.log('active='.concat(t, ',curenturl=').concat(a, ',fDeviceId=').concat(r)), t)) {case '0':if ('/pages/room/roomList/roomList' == a) {break;}uni.redirectTo({url: '/pages/room/roomList/roomList?fSourceType=1&fDeviceId=' + r});break;case '1':if ('pages/room/recharge/recharge' == a) {break;}uni.redirectTo({url: '/pages/room/recharge/recharge?fDeviceId=' + r});break;case '2':if ('pages/room/order/orderDetails' == a) {break;}uni.redirectTo({url: '/pages/room/order/orderDetails?fDeviceId=' + r});break;case '3':if ('pages/room/userCenter/userCenter' == a) {break;}uni.redirectTo({url: '/pages/room/userCenter/userCenter?fDeviceId=' + r});}}} }; </script> <style> .foot {background-color: #fff;box-shadow: 0-4rpx 10rpx rgba(0, 0, 0, 0.1);font-size: 24rpx;height: 120rpx;padding-bottom: 20rpx;padding-top: 20rpx;position: fixed;text-align: center;width: 100%;/* z-index: 100; */bottom: 0;} .foot.ios {height: 140rpx;padding-bottom: 30rpx; } .footicon {display: block;height: 52rpx;margin: 0 auto;width: 52rpx; } .botfont {color: #9de591;margin-top: 10rpx;text-align: center; } .botfont.active {color: #1dc801; } </style>

topnav組件中的app.globaldata獲取值需要在項目APP.vue中獲取

?APP.vue

先需要在globalData中定義

?然后再通過uni.getSystemInfo中獲取值

?

?

總結

以上是生活随笔為你收集整理的个人中心页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。