48 我的地址页面布局

哆啦A梦15882025-11-17 14:44
收货人，包括手机号，以及所在城市详细地址，这一块信息我们也是存储到数据库的，并且也是当前用户的地址数据，所以说，我们先将地址这一块做一下。
1， 去 src/views/My.vue 添加如下内容
复制代码 
template:
<li @click="goPath">地址管理</li>

<ul>
    <li @click="goPath">地址管理</li>
    <li v-if="loginStatus" @click="loginOut">退出登录</li>
</ul>

script:
// 进入地址管理
goPath() {
    this.$router.push('/path');
}
2, 去 src/router/index.js 添加如下路由
复制代码 
{
    path: "/path",
    name: "Path",
    component: () =>
        import("../views/Path.vue"),
}
去 src/views/Path,vue 创建文件，内容如下
复制代码 
<template>
	<div class="path">
		<router-view></router-view>
	</div>
</template>

<script>
</script>
4, 去 src/views/path/Path-index.vue 创建目录文件，配置子路由
复制代码 
{
    path: "/path",
    children: [{
        path: "/",
        name: "PathIndex",
        component: () =>
            import("../views/path/Path-Index.vue"),
    }],
    component: () =>
        import("../views/Path.vue"),
}
Path-index.vue 文件内容如下
复制代码 
<template>
	<div class="path-index">11111</div>
</template>

<script>
</script>

<style>
</style>
访问http://localhost:8080/path 展示如下内容，表示子路由配置成功
5， 去 components/path/Header.vue 创建目录文件，内容如下
复制代码 
<template>
	<header>
		<i class='iconfont icon-fanhui' @click='$router.back()'></i>
		<slot>
			<span>我的地址</span>
		</slot>
		<i class="iconfont icon-kefu"></i>
	</header>
</template>

<style lang='scss' scoped>
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 44px;
	color: #fff;
	background-color: #b0352f;
	i {
		padding: 0 15px;
		font-size: 22px;
	}
	span {
		font-size: 18px;
		font-weight: 300;
	}
}
</style>
老师的

的地址页面布局 实现代码如下

复制代码 
1, src/views/My.vue

<template>
	<div class="my container">
		<!-- {{list}}
		<div> state的数据：{{ list }}</div> -->
		<header>

			<!-- {{userInfo}} -->

			<div class="user-info" v-if="loginStatus">
				<img :src="userInfo.imgUrl" alt="" />
				<span>{{userInfo.nickName}}</span>
			</div>

			<div v-else class="login" @click="goLogin">登录/注册</div>
		</header>
		<section>
			<ul>
				<li @click="goPath">地址管理</li>
				<li v-if="loginStatus" @click="loginOut">退出登录</li>
			</ul>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import Tabbar from '@/components/common/Tabbar.vue'
	export default {
		name: "My",
		components: {
			// 挂载
			Tabbar
		},
		computed: {
			...mapState({
				// list: state => state.user.list
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		methods: {
			// 调用退出登录的方法
			...mapMutations(['loginOut']),

			// 在我的页面点击'登录/注册' 跳转到登录页面
			goLogin() {
				this.$router.push('/login');
			},
			// 进入地址管理
			goPath() {
				this.$router.push('/path');
			}
		}
	}
</script>

<style scoped lang="scss">
	header {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 160px;
		background-color: #b0352f;

		.login {
			padding: 10px 30px;
			font-size: 16px;
			color: #fff;
			// background-color: rgba(255, 181, 0, 0.9);
			background-color: #F6AB32;
			border-radius: 6px;
		}

		.user-info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			img {
				width: 60px;
				height: 60px;
				border-radius: 50%;
			}

			span {
				padding: 20px 0;
				font-size: 18px;
				color: #fff;
				// text-align: center;
			}
		}
	}

	section {
		flex: 1;
		overflow: hidden;

		ul li {
			padding: 15px;
			font-size: 16px;
		}
	}
</style>





2, src/views/Path.vue
<template>
	<div class="path">
		<router-view></router-view>
	</div>
</template>

<script>
</script>

<style>
</style>





3, src/views/path/Path-Index.vue

<template>
	<div class="path-index container">
		<Header></Header>
		<section>
			<ul>
				<li>
					<div>
						<span>张三</span>
						<span>15300935233</span>
					</div>
					<div>
						<span class="active">[默认]</span>
						<span>上海 上海市 长宁区 343434</span>
					</div>
				</li>
			</ul>
			<div class="add-path">添加地址</div>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
	import Header from '@/components/path/Header.vue'
	import Tabbar from '@/components/common/Tabbar.vue'
	export default {
		name: "Path-Index",
		data() {
			return {
				//
			}
		},
		components: {
			Header,
			Tabbar
		}
	}
</script>

<style scoped lang="scss">
	section {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f7f7f7;

		ul {
			width: 100%;

			li {
				padding: 10px 15px;
				width: 100%;
				margin: 6px 0;
				background-color: #FFFFFF;

				span {
					padding-right: 15px;
					font-size: 18px;
				}

				.active {
					color: #b0353f;
				}
			}
		}

		.add-path {
			margin-top: 30px;
			width: 150px;
			line-height: 40px;
			font-size: 18px;
			text-align: center;
			color: #fff;
			background-color: #b0352f;
			border-radius: 6px;
		}
	}

	::v-deep .tabbar {
		border-top: 2px solid #ccc;
	}
</style>




4, src/components/path/Header.vue
<template>
	<header>
		<!-- 左 -->
		<div @click="goBack">
			<i class="iconfont icon-a-huaban1fuben44"></i>
		</div>
		<!-- 中 -->
		<div>
			<slot>
				<span>我的地址</span>
			</slot>
		</div>
		<!-- 右 -->
		<div>
			<i class="iconfont icon-kefu"></i>
		</div>
	</header>
</template>

<script>
	export default {
		data() {
			return {
				//
			}
		},
		methods: {
			goBack() {
				// 返回上一页
				this.$router.back();
			},
		}
	}
</script>

<style scoped lang="scss">
	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 44px;
		color: #fff;
		background-color: #b0352f;

		i {
			padding: 0 18px;
			font-size: 24px;
		}

		span {
			font-size: 18px;
			font-weight: 300;
		}
	}
</style>






5, src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [{
		path: "/home",
		name: "Home",
		component: Home,
	},
	{
		path: "/",
		redirect: "/home", // 重定向
	}, {
		path: "/list",
		name: "List",
		component: () =>
			import("../views/List.vue"),
	}, {
		path: "/cart",
		name: "Cart",
		meta: {
			keepAlive: true, // 此组件需要被缓存
		},
		component: () =>
			import("../views/Cart.vue"),
	}, {
		path: "/my",
		name: "My",
		component: () =>
			import("../views/My.vue"),
	},
	{
		path: "/search",
		children: [{
			path: "/",
			name: "index",
			component: () =>
				import("../views/search/Search-index.vue"),
		}, {
			path: "/search/list",
			name: "Search-list",
			component: () =>
				import("../views/search/Search-list.vue"),
		}],
		component: () =>
			import("../views/Search.vue"),
	},
	{
		path: "/detail",
		name: "Detail",
		meta: {
			keepAlive: true, // 此组件需要被缓存
		},
		component: () =>
			import("../views/Detail.vue"),
	},
	{
		path: "/login",
		name: "Login",
		component: () =>
			import("../views/login/Login.vue"),
	},
	{
		path: "/userLogin",
		name: "UserLogin",
		component: () =>
			import("../views/login/UserLogin.vue"),
	},
	{
		path: "/register",
		name: "Register",
		component: () =>
			import("../views/login/Register.vue"),
	},
	{
		path: "/recovery",
		children: [{
			path: "/",
			name: "RecoveryIndex",
			component: () =>
				import("../views/recovery/RecoveryIndex.vue"),
		}, {
			path: "/recovery/btn",
			name: "RecoveryBtn",
			component: () =>
				import("../views/recovery/RecoveryBtn.vue"),
		}],
		component: () =>
			import("../views/recovery/Recovery.vue"),
	},
	{
		path: "/path",
		children: [{
			path: "/",
			name: "PathIndex",
			component: () =>
				import("../views/path/Path-Index.vue"),
		}],
		component: () =>
			import("../views/Path.vue"),
	}
];

const router = new VueRouter({
	mode: "history",
	base: process.env.BASE_URL,
	routes,
});

export default router;
相关推荐
zyfts2 小时前
十分钟搞定Nestjs上传文件到阿里云OSS
后端·node.js
bug爱好者2 小时前
vue3.x 使用vue3-tree-org实现组织架构图 + 自定义模版内容 - 附完整示例
前端·javascript·vue.js
flashlight_hi2 小时前
LeetCode 分类刷题：1669. 合并两个链表
javascript·leetcode·链表
毕设十刻3 小时前
基于Vue的售票系统开发3g480（程序 + 源码 + 数据库 + 调试部署 + 开发环境配置），配套论文文档字数达万字以上，文末可获取，系统界面展示置于文末
前端·数据库·vue.js
MC丶科3 小时前
Spring Boot + Vue 实现一个在线商城（商品展示、购物车、订单）！从零到一完整项目
前端·vue.js·spring boot
zwjapple5 小时前
Node.js 集成百度语音
node.js·语音识别
q***0565 小时前
使用Node.js搭配express框架快速构建后端业务接口模块Demo
node.js·express
码途进化论5 小时前
从Chrome跳转到IE浏览器的完整解决方案
前端·javascript
笙年5 小时前
Vue 基础配置新手总结
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）05Linux下V2Ray安装配置指南06《大数据技术原理与应用》实验报告三 熟悉HBase常用操作07综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件08jdk21下载、安装（Windows、Linux、macOS）092025 最新教程：注册并切换到美区 Apple ID10Labelme从安装到标注：零基础完整指南