个人中心页面

最新推荐文章于 2024-06-04 11:17:32 发布
最新推荐文章于 2024-06-04 11:17:32 发布
阅读量255 收藏 1
点赞数
文章标签： 数学建模 java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57400398/article/details/130944674
版权

 

 小程序去除默认样式需要在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%;'">
            <view
                class="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中获取值

 

 

Mr.Liu notes
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
个人中心页面资料
12-20
在IT行业中，个人中心页面是移动应用或网站中不可或缺的一部分，它为用户提供了一种管理和查看自己账户信息的途径。这个“个人中心页面资料”可能包含了关于如何设计、实现和优化一个高效、用户友好的个人中心页面的...
5.2 创建个人中心页面-前端部分
是芜湖的，更是世界的！
09-05 7857
5.2 创建个人中心页面-前端部分
Android 简单用户中心布局实现
wh445306
03-12 1535
Android 简单用户中心界面布局实现，采用纯LinearLayout线性布局，分组排列，圆角化布局块的设计，实现了类IOS布局边框立体渲染，ImageView头像圆角化的设计。
P3. 创建个人中心页面
最新发布
m0_67850950的博客
06-04 955
实现第三部分，个人中心页面的创建。主要是实现了一个bot表和类，介绍了如何对新定义的类或表进行CRUD操作，包括前后端的编写，是一个通用的方法。
html实现个人空间（源码）
xcLeigh
11-04 6846
html实现个人空间，个人空间可以配置自己想听的音乐，个人空间可以配置自己常用的链接，个人空间可以自定义链接类型，在这基础上可以扩展记事本，音乐等。html实现个人主页，html实现个人私密空间。支持扩展配置
040-云E办_ 个人中心
weixin_43989347的博客
03-09 859
040-云E办_ 个人中心一、个人中心二、个人中心操作controller 修改信息和密码service 更改密码：三、Bug解决CustomAuthorityDeserializerpojo/admin 一、个人中心 在普通项目中需要获取当前登录用户的信息，一般做法是在登录成功后，将当前用户信息存入session中。在需要使用当前用户的时候从session里面读取。更新用户信息也是直接通过数据库进行相应的更 新。 在Spring Security中要如何获取用户信息和更新用户信息呢？ 在Spring S
创建个人中心页面
weixin_49884716的博客
11-14 733
springboot
微博之我页面和个人中心页面的开发
08-26
在移动应用开发领域，微博平台的“我”页面和个人中心页面是用户交互的核心部分，它们提供了用户个人信息展示、社交互动以及个性化设置等功能。本话题将深入探讨如何在Android平台上进行这两个关键页面的开发。 ...
VUE DEMO之模拟登录个人中心页面之间数据传值实例
10-16
在这个VUE DEMO中，我们看到了一个模拟登录和个人中心页面的数据传递实例。这个实例主要通过浏览器的`localStorage` API来存储和检索用户信息，实现了跨页面的数据持久化。 首先，我们看`login.html`页面。在这个...
Android代码-个人中心页面框架
08-06
LSettingView 设置界面条目封装，同时包含： 设置左侧图标 设置左侧文字 设置右侧图标 设置右侧图标是否显示 设置右侧为复选框样式 设置右侧为开关模式 设置右侧文字及样式 ...LSettingItem mSettingItemOne = ...
微信小程序：个人中心页面
05-04
在这个“微信小程序：个人中心页面”的项目中，我们将会探讨如何构建一个用户个人中心的功能模块。 1. **基础配置文件**： - **app.js**: 这是小程序的全局配置文件，它包含了小程序的启动逻辑和全局方法。在这里...
网页设计（个人中心，会员开通）
07-15
只实现了个人中心和会员充值部分，其中最上层的top部分是引入到每一页面中去的，处女作，有些简单
Android 个人中心页面前端代码
扮作大侠的博客
06-28 2458
截图： 代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/fragment_setting" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://sche
vue3+antd——实现个人中心页面+同步更改头部用户信息——基础积累
yehaocheng520的博客
08-08 2981
vue3+antd——实现个人中心页面+同步更改头部用户信息——基础积累
微信小程序个人中心、我的界面（示例四）
weixin_45465881的博客
04-30 3102
微信小程序个人中心、我的界面，超简洁的九宫格界面布局，代码粘贴即用。更多微信小程序界面示例，请进入我的主页哦！更多微信小程序示例的分享，请进入我的主页查看哦。
【小白专用】微信小程序个人中心、我的界面（示例一）23.11.04
热门推荐
zgscwxd的博客
11-04 1万+
微信小程序个人中心、我的界面（示例一）
我的头条（vue项目实战）--个人中心页
Zwq8023520的博客
08-27 4675
项目实战 vue axios 文件上传
uni-app个人中心
不愧是暮言的博客
07-25 6657
uni-app 是基于Vue.js框架开发的一个跨平台移动应用开发框架，可以同时支持多个平台（如iOS、Android、Web等）的应用开发。采用了统一的语法和组件规范，可以大大简化跨平台开发的工作，提高开发效率。
Vue+element ui实现好看的个人中心
geejkse_seff的博客
07-31 9737
目录 一、效果图 二、项目结构 三、界面效果和代码实现 1.路由注册 2.个人主页实现 3.编辑弹窗按钮实现 4.个人简介实现 5.发贴页实现 6.收藏页实现 7.关注和收藏页实现 四、总结 一、效果图 仿照原神社区的个人中心写了个个人中心界面，下图分别为原神社区个人中心主页和我画的个人中心的效果图： 原神社区个人中心效果图： 我画的个人中心效果图： 下面上代码 二、项目结构 router文件夹里的index.js为路由注册文件，person文件夹里Info文件为个人简介页，MyArt
android个人中心页面fragment
06-02
好的，您想了解关于 Android 中个人中心页面的 Fragment 的相关内容。个人中心页面通常用于展示用户相关信息、设置、个人资料等。在 Android 中，我们可以使用 Fragment 来实现这个页面。下面是实现个人中心页面的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值