项目介绍

在这里插入图片描述

总体代码

<template>
	<view class="wrapper">
		<!-- 个人资料 -->
		<!-- <view class="profile">
      <view class="meta"> -->
		<!-- <image class="avatar" src="http://static.botue.com/ugo/uploads/monkey.png"></image> -->
		<!-- <open-data class="avatar" type="userAvatarUrl"></open-data> -->
		<!-- <text class="nickname">孙悟空</text> -->
		<!-- <open-data class="nickname" type="userNickName"></open-data> -->
		<!-- </view> -->
		<!-- </view> -->

		<!-- 个人资料 -->
		<view>
			<view class="top">
				<view class="center">
					<view class="center_top">
						<view class="center_img" @tap="gotoFeeds('/pages/my/set/set')">
							<!-- 这里可以放自己的静态头像 -->
							<!-- #ifndef MP-WEIXIN -->
							<image :src="image"></image>
							<!-- #endif -->
							<open-data type="userAvatarUrl" class="user_head"></open-data>
						</view>
						<view class="center_info" @tap="gotoFeeds('/pages/my/set/set')">
							<view class="center_name">
								<!-- 这里可以放自己的名称图片 -->
								<!-- #ifndef MP-WEIXIN -->
								<view>{{userInfo.name}}</view>
								<!-- #endif -->
								<open-data class="nickname" type="userNickName"></open-data>
							</view>
							<view class="center_vip">
								<image class="rank_icon" src="@/static/icon/vip.png" />
								<view class="vip_text">
									<text>普通会员</text>
								</view>
							</view>
						</view>
						<view style="margin-left: 140rpx;margin-top: 15rpx;"  @tap="gotoFeeds('/pages/my/set/set')">
							<image style="width: 30px;height: 30px;" src="@/static/icon/setting.png"></image>
						</view>
					</view>
					<!-- <view class="center_down">
						<view class="center_rank" @tap="toNone">
							<image class="rank_icon" src="@/static/icon/vip.png"></image>
							<text class="rank_text">我的排名</text>
						</view>
						<view class="center_score" @tap="toNone">
							<image class="rank_icon" src="../../static/points.png"></image>
							<text class="rank_text">我的积分</text>
						</view>
					</view> -->
				</view>
				<image src='@/static/icon/waterflow.gif' mode='scaleToFill' class='gif-wave'></image>
			</view>
		</view>


		<!-- 统计 -->
		<view class="count">
			<view class="cell"> 8 <text style="color: #AAAAAA;">收藏店铺</text> </view>
			<view class="cell"> 14 <text style="color: #AAAAAA;">收藏商品</text> </view>
			<view class="cell"> 18 <text style="color: #AAAAAA;">关注商品</text> </view>
			<view class="cell"> 84 <text style="color: #AAAAAA;">我的足迹</text> </view>
		</view>
		<!-- 我的订单 -->
		<view class="orders">
			<view class="title">我的订单</view>
			<view class="sorts">

					<view style="margin-top: -10rpx;margin-left: 60rpx;" @tap="gotoFeeds('/pages/sort/sort')">
						<image src='@/static/icon/nopay.png' style="width: 30px;height: 30px;"></image>
					</view>
					<view style="margin-top: 60rpx;margin-left: -60rpx;margin-bottom: -20rpx;" @tap="gotoFeeds('/pages/sort/sort')">
						<text class="icon-bill">待付款</text>
					</view>
	
					<view style="margin-top: -15rpx;margin-left: 95rpx;" @tap="gotoFeeds('/pages/sort/sort')">
						<image src='@/static/icon/noreceive.png' style="width: 40px;height: 40px;"></image>
					</view>
					<view style="margin-top: 60rpx;margin-left: -75rpx;margin-bottom: -20rpx;" @tap="gotoFeeds('/pages/sort/sort')">
						<text class="icon-car">待收货</text>
					</view>

					<view style="margin-top: -15rpx;margin-left: 95rpx;" @tap="gotoFeeds('/pages/sort/sort')">
						<image src='@/static/icon/noreturn.png' style="width: 40px;height: 40px;"></image>
					</view>
					<view style="margin-top: 60rpx;margin-left: -80rpx;margin-bottom: -20rpx;" @tap="gotoFeeds('/pages/sort/sort')">
						<text class="icon-money">待归还</text>
					</view>

					<view style="margin-top: -15rpx;margin-left: 95rpx;" @tap="gotoFeeds('/pages/sort/sort')">
						<image src='@/static/icon/allorder.png' style="width: 40px;height: 40px;"></image>
					</view>
					<view style="margin-top: 60rpx;margin-left: -85rpx;margin-bottom: -20rpx;" @tap="gotoFeeds('/pages/sort/sort')">
						<text class="icon-list">全部订单</text>
					</view>
				
			</view>
		</view>
		<!-- 地址管理 -->
		<view class="address icon-arrow">
			收货地址
		</view>
		<!-- 其它 -->
		<view class="extra">
			<view @click="makePhone" class="item icon-arrow">联系客服</view>
			<button open-type="feedback" class="item icon-arrow">意见反馈</button>
		</view>
	</view>
</template>

<script>
	// 引入vuex
	import {
		mapState
	} from 'vuex';
	
	export default {
		data() {
			return {
				image:'',
			}
		},
		// 得到属性userInfo
		computed: {
			...mapState(['userInfo'])
		},
		created(){
			this.selectImageUrl()
		},
		methods: {
			async selectImageUrl(){
				let res = await this.$u.api.selectImageUrl({
					params: {
						user: this.userInfo.name
					}
				})
				this.image = res.data.data
				console.log("this.image ",this.image )
			},
			gotoFeeds(url) {
				// 可以跳多级目录
				uni.navigateTo({
					url
				})
				//跳转同级路由目录
				// uni.switchTab({
				// 	url
				// })
			}
		}
	};
</script>

<style scoped lang="scss">
	Page {
		font-size: 14px;
	}

	.top {
		width: 100%;
		height: 130px;
		background: #23EBB9;
		padding-top: 15px;
		position: relative;
	}

	.center {
		width: 95%;
		height: 100px;
		background: white;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		border-radius: 5px;
	}

	.center_top {
		display: flex;
		flex-direction: row;
		width: 80%;
		height: 80px;
		margin: 0 auto;
		margin-top: 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.center_img {
		width: 66px;
		height: 66px;
		border-radius: 50%;
		overflow: hidden;
	}

	.center_img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.center_img .user_head {
		width: 100%;
		height: 100%;
	}

	.center_info {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-left: 30px;
	}

	.center_name {
		font-size: 20px;
	}

	.center_phone {
		color: #BEBEBE;
	}

	// .center_down {
	// 	display: flex;
	// 	flex-direction: row;
	// 	width: 80%;
	// 	height: 35px;
	// 	margin: 0 auto;
	// 	margin-top: 20rpx;
	// }

	.center_rank {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}

	.rank_text {
		height: 35px;
		line-height: 35px;
		margin-left: 10rpx;
		color: #AAAAAA;
	}

	.center_vip image {
		width: 25px;
		height: 25px;
		margin-top: 15rpx;
	}

	.vip_icon {
		width: 25px;
		height: 25px;
		margin-top: -10rpx;
	}

	.vip_text {
		margin-top: -55rpx;
		margin-left: 50rpx;
		color: #AAAAAA;
	}

	.center_rank image {
		width: 35px;
		height: 35px;
	}

	.center_score {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}

	.center_score image {
		width: 35px;
		height: 35px;
	}

	.gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	.wrapper {
		position: absolute;
		top: 0;
		bottom: 0;

		width: 100%;
		background-color: #F4F4F4;
	}

	.profile {
		height: 375rpx;
		background-color: #ea4451;
		display: flex;
		justify-content: center;
		align-items: center;

		.meta {
			.avatar {
				display: block;
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
				overflow: hidden;
			}

			.nickname {
				display: block;
				text-align: center;
				margin-top: 20rpx;
				font-size: 30rpx;
				color: #fff;
			}
		}
	}

	.count {
		display: flex;
		margin: 0 20rpx;
		height: 120rpx;
		text-align: center;
		border-radius: 4rpx;
		background-color: #fff;

		position: relative;
		top: 10rpx;

		.cell {
			margin-top: 10rpx;
			flex: 1;
			padding-top: 20rpx;
			font-size: 27rpx;
			color: #333;
		}

		text {
			display: block;
			font-size: 24rpx;
		}
	}

	.orders {
		margin: 20rpx 20rpx 0 20rpx;
		padding: 40rpx 0;
		background-color: #fff;
		border-radius: 4rpx;

		.title {
			padding-left: 20rpx;
			font-size: 30rpx;
			color: #333;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
			margin-top: -30rpx;
		}

		.sorts {
			padding-top: 30rpx;
			text-align: center;
			display: flex;
		}

		[class*="icon-"] {
			flex: 1;
			font-size: 24rpx;

			&::before {
				display: block;
				font-size: 48rpx;
				margin-bottom: 8rpx;
				color: #ea4451;
			}
		}
	}

	.address {
		line-height: 1;
		background-color: #fff;
		font-size: 30rpx;
		padding: 25rpx 0 25rpx 20rpx;
		margin: 10rpx 20rpx;
		color: #333;
		border-radius: 4rpx;
	}

	.extra {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 4rpx;

		.item {
			line-height: 1;
			padding: 25rpx 0 25rpx 20rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 30rpx;
			color: #333;
		}

		button {
			text-align: left;
			background-color: #fff;

			&::after {
				border: none;
				border-radius: 0;
			}
		}
	}

	.icon-arrow {
		position: relative;

		&::before {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
		}
	}
</style>

评论区要求流水的gif

在这里插入图片描述

评论区要求的全局样式uni.scss

/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

@import 'uview-ui/theme.scss';
// @import 'node_modules/uview-ui/theme.scss';

// /* 颜色变量 */

// /* 行为相关颜色 */
// $uni-color-primary: #007aff;
// $uni-color-success: #4cd964;
// $uni-color-warning: #f0ad4e;
// $uni-color-error: #dd524d;

// /* 文字基本颜色 */
// $uni-text-color:#333;//基本色
// $uni-text-color-inverse:#fff;//反色
// $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
// $uni-text-color-placeholder: #808080;
// $uni-text-color-disable:#c0c0c0;

// /* 背景颜色 */
// $uni-bg-color:#ffffff;
// $uni-bg-color-grey:#f8f8f8;
// $uni-bg-color-hover:#f1f1f1;//点击状态颜色
// $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

// /* 边框颜色 */
// $uni-border-color:#c8c7cc;

// /* 尺寸变量 */

// /* 文字尺寸 */
// $uni-font-size-sm:12px;
// $uni-font-size-base:14px;
// $uni-font-size-lg:16;

// /* 图片尺寸 */
// $uni-img-size-sm:20px;
// $uni-img-size-base:26px;
// $uni-img-size-lg:40px;

// /* Border Radius */
// $uni-border-radius-sm: 2px;
// $uni-border-radius-base: 3px;
// $uni-border-radius-lg: 6px;
// $uni-border-radius-circle: 50%;

// /* 水平间距 */
// $uni-spacing-row-sm: 5px;
// $uni-spacing-row-base: 10px;
// $uni-spacing-row-lg: 15px;

// /* 垂直间距 */
// $uni-spacing-col-sm: 4px;
//$uni-spacing-col-base: 8px;
// $uni-spacing-col-lg: 12px;

// /* 透明度 */
// $uni-opacity-disabled: 0.3; // 组件禁用态的透明度

// /* 文章场景相关 */
// $uni-color-title: #2C405A; // 文章标题颜色
// $uni-font-size-title:20px;
// $uni-color-subtitle: #555555; // 二级标题颜色
// $uni-font-size-subtitle:26px;
// $uni-color-paragraph: #3F536E; // 文章段落颜色
// $uni-font-size-paragraph:15px;


/* 页面左右间距 */
$page-row-spacing: 30upx;
$page-color-base: #f8f8f8;
$page-color-light: #f8f6fc;
$base-color: #fa436a;

/* 文字尺寸 */
$font-sm: 24upx;
$font-base: 28upx;
$font-lg: 32upx;
/*文字颜色*/
$font-color-dark: #303133;
$font-color-base: #606266;
$font-color-light: #909399;
$font-color-disabled: #C0C4CC;
$font-color-spec: #4399fc;
/* 边框颜色 */
$border-color-dark: #DCDFE6;
$border-color-base: #E4E7ED;
$border-color-light: #EBEEF5;
/* 图片加载中颜色 */
$image-bg-color: #eee;
/* 行为相关颜色 */
$uni-color-primary:#fa436a;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

//垂直间距
// $uni-spacing-col-base: 32rpx;

项目演示二

在这里插入图片描述

总体代码

<template>
	<view class="container">
		<view class="list-cell b-b m-t" @click="navTo('个人资料')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">个人资料</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell b-b" @click="navTo('收货地址')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">收货地址</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell" @click="navTo('实名认证')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">实名认证</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		
		<view class="list-cell m-t">
			<text class="cell-tit">消息推送</text>
			<switch checked color="#fa436a" @change="switchChange" />
		</view>
		<view class="list-cell m-t b-b" @click="navTo('清除缓存')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">清除缓存</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell b-b" @click="navTo('关于Dcloud')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">关于我们</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell">
			<text class="cell-tit">检查更新</text>
			<text class="cell-tip">当前版本 1.0.3</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell log-out-btn" @click="toLogout">
			<text class="cell-tit">退出登录</text>
		</view>
	</view>
</template>

<script>
	import {  
	    mapMutations  
	} from 'vuex';
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			...mapMutations(['logout']),

			navTo(url){
				this.$api.msg(`跳转到${url}`);
			},
			//退出登录
			toLogout(){
				uni.showModal({
				    content: '确定要退出登录么',
				    success: (e)=>{
				    	if(e.confirm){
				    		this.logout();
				    		setTimeout(()=>{
				    			uni.navigateBack();
				    		}, 200)
				    	}
				    }
				});
			},
			//switch
			switchChange(e){
				let statusTip = e.detail.value ? '打开': '关闭';
				this.$api.msg(`${statusTip}消息推送`);
			},

		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx; 
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right:10upx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
</style>

最后

注意跳转和部分代码，不要盲目复制。有点自己的思考

# uni-app
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云致力推进全域Serverless时代，引领技术创新，赋能行业实践

avatar 华为云开发者联盟
cover

基于Serverless服务构建千万车辆数据实时处理的车联网业务

avatar 华为云开发者联盟
cover

大模型时代下的AI开发

avatar 华为云开发者联盟