Vue2电商实战项目(六)个人中心

个人中心Center组件

• 先搞定静态组件

### router.routes.js

import Center from '@/pages/Center'
export default [
	{
		name:"center",
		path: "/center",
		component: Center,
		meta: {
			show: true
		}
	}......

• 拆分Center组件,把我的订单和团购订单拆分成两个子路由组件(注意:并不是子组件而是子路由组件)

### myOrder.index.vue(把Center.index.vue结构中,'右侧的内容'拷贝过来)

<template>
	<div class="order-right">
		<div class="order-content">
			<div class="title">
				<h3>我的订单</h3>
			</div>
			<div class="chosetype">
				<table>
					<thead>
						<tr>
							<th width="29%">商品</th>
							<th width="31%">订单详情</th>
							<th width="13%">收货人</th>
							<th>金额</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</thead>
				</table>
			</div>
			<div class="orders">

				<table class="order-item">
					<thead>
						<tr>
							<th colspan="5">
								<span class="ordertitle">2017-02-11 11:59　订单编号：7867473872181848 <span
										class="pull-right delete"><img src="../images/delete.png"></span></span>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td width="60%">
								<div class="typographic">
									<img src="../images/goods.png">
									<a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a>
									<span>x1</span>
									<a href="#" class="service">售后申请</a>
								</div>
							</td>
							<td rowspan="2" width="8%" class="center">小丽</td>
							<td rowspan="2" width="13%" class="center">
								<ul class="unstyled">
									<li>总金额¥138.00</li>
									<li>在线支付</li>

								</ul>
							</td>
							<td rowspan="2" width="8%" class="center">
								<a href="#" class="btn">已完成 </a>
							</td>
							<td rowspan="2" width="13%" class="center">
								<ul class="unstyled">
									<li>
										<a href="mycomment.html" target="_blank">评价|晒单</a>
									</li>

								</ul>
							</td>
						</tr>
						<tr>
							<td width="50%">
								<div class="typographic">
									<img src="../images/goods.png">
									<a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a>
									<span>x1</span>
									<a href="#" class="service">售后申请</a>
								</div>
							</td>
						</tr>
					</tbody>
				</table>

				<table class="order-item">
					<thead>
						<tr>
							<th colspan="5">
								<span class="ordertitle">2017-02-11 11:59　订单编号：7867473872181848 <span
										class="pull-right delete"><img src="../images/delete.png"></span></span>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td width="60%">
								<div class="typographic">
									<img src="../images/goods.png">
									<a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a>
									<span>x1</span>
									<a href="#" class="service">售后申请</a>
								</div>
							</td>
							<td rowspan="2" width="8%" class="center">小丽</td>
							<td rowspan="2" width="13%" class="center">
								<ul class="unstyled">
									<li>总金额¥138.00</li>
									<li>在线支付</li>

								</ul>
							</td>
							<td rowspan="2" width="8%" class="center">
								<a href="#" class="btn">已完成 </a>
							</td>
							<td rowspan="2" width="13%" class="center">
								<ul class="unstyled">
									<li>
										<a href="mycomment.html" target="_blank">评价|晒单</a>
									</li>

								</ul>
							</td>
						</tr>
						<tr>
							<td width="50%">
								<div class="typographic">
									<img src="../images/goods.png">
									<a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a>
									<span>x1</span>
									<a href="#" class="service">售后申请</a>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="choose-order">
				<div class="pagination">
					<ul>
						<li class="prev disabled">
							<a href="javascript:">«上一页</a>
						</li>
						<li class="page actived">
							<a href="javascript:">1</a>
						</li>
						<li class="page">
							<a href="javascript:">2</a>
						</li>
						<li class="page">
							<a href="javascript:">3</a>
						</li>
						<li class="page">
							<a href="javascript:">4</a>
						</li>

						<li class="next disabled">
							<a href="javascript:">下一页»</a>
						</li>
					</ul>
					<div>
						<span>&nbsp;&nbsp;&nbsp;&nbsp;共2页&nbsp;</span>
					</div>
				</div>
			</div>
		</div>
		<!--猜你喜欢-->
		<div class="like">
			<h4 class="kt">猜你喜欢</h4>
			<ul class="like-list">
				<li class="likeItem">
					<div class="p-img">
						<img src="../images/itemlike01.png" />
					</div>
					<div class="attr">
						<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
					</div>
					<div class="price">
						<em>¥</em>
						<i>3699.00</i>
					</div>
					<div class="commit">已有6人评价
					</div>
				</li>
				<li class="likeItem">
					<div class="p-img">
						<img src="../images/itemlike02.png" />
					</div>
					<div class="attr">
						Apple苹果iPhone 6s/6s Plus 16G 64G 128G
					</div>
					<div class="price">
						<em>¥</em>
						<i>4388.00</i>
					</div>
					<div class="commit">已有700人评价
					</div>
				</li>
				<li class="likeItem">
					<div class="p-img">
						<img src="../images/itemlike03.png" />
					</div>
					<div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本
					</div>
					<div class="price">
						<em>¥</em>
						<i>4088.00</i>
					</div>
					<div class="commit">已有700人评价
					</div>
				</li>
				<li class="likeItem">
					<div class="p-img">
						<img src="../images/itemlike04.png" />
					</div>
					<div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本
					</div>
					<div class="price">
						<em>¥</em>
						<i>4088.00</i>
					</div>
					<div class="commit">已有700人评价
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MyOrder'
	}
</script>

<style>
</style>

### groupOrder.index.vue
<template>
	<div>
		我是团购订单的内容
	</div>
</template>

<script>
	export default {
		name:'GroupOrder'
	}
</script>

<style>
</style>

• 在Center路由中,注册二级路由

### router.routes.js
......
{
	name:"center",
	path: "/center",
	component: Center,
	......
	children:[ // 注册二级路由
		{
			path: "myorder", // 注意,不要写成'/myorder'
			component: MyOrder,
		},
		{
			path: "grouporder",
			component: GroupOrder,
		},
	]
},

### Center.index.vue
......
<div class="order-body">
	<!--左侧列表-->
	<div class="order-left">
		<dl>
			<dt><i>·</i> 订单中心</dt>
			<dd><!--生成链接-->
				<router-link to="/center/myorder">我的订单</router-link> 
			</dd>
			<dd>
				<router-link to="/center/grouporder">团购订单</router-link>
			</dd>
			<dd>本地生活订单 </dd>
	<!-- 右侧内容 -->
			<!-- <MyOrder></MyOrder> -->
			<!-- <GroupOrder></GroupOrder> -->
			<!--展示内容-->
			<router-view></router-view>
- 注意事项: Center组件的 <style lang="less" > 必须取消scoped,否则'我的订单'没有样式

• 至此,二级路由组件配置完成,但是有一个问题,当用户访问Center页面的时候,右侧一片空白,用户需点击我的订单才有内容

  所以,当用户访问Center页面的时候,路由应当直接重定向到myOrder,即默认就展示我的订单

### router.routes.js
......
{
		name:"center",
		......
		children:[
			{
				path: "myorder",
				component: MyOrder,
			},
			{
				path: "grouporder",
				component: GroupOrder,
			},
			{
				path: "/center",
				redirect: "/center/myorder", // 配置重定向
			},
		]
	},

获取个人中心数据

• 配置请求,然后挂载组件以后发请求

### api.index.js
......
// 传入page和limie
export const reqMyOrderList = (page,limit)=>requests({url:`/order/auth/${page}/${limit}`,method:'get'})

### myOrder.index.vue
......
<script>
	export default {
		name: 'MyOrder',
		data(){
			return {
				page:1, // 初始化数据
				limit:3,
				myOrder:{}
			}
		},
		mounted(){
			this.getData(); // 封装异步函数
		},
		methods:{
			async getData(){
				const {page,limit} = this
				let res = await this.$API.reqMyOrderList(page,limit)
				// console.log(res)
				if(res.code == 200){
					this.myOrder = res.data
				}
			}
		}
	}
</script>

• 数据的渲染

### myOrder.index.vue

<template>
	<div class="order-right">
		......
			<div class="orders">
				
				<!--开始渲染-->
				<table class="order-item" v-for="(order,index) in myOrder.records" :key="order.id">
					<thead>
						<tr>
							<th colspan="5">			<!--订单创建时间和订单编号-->
								<span class="ordertitle">{{order.createTime}}　订单编号：{{order.outTradeNo}} <span
										class="pull-right delete"><img src="../images/delete.png"></span></span>
							</th>
						</tr>
					</thead>
					<tbody>
						<!--渲染购物车商品数据-->
						<tr v-for="(cart,index) in order.orderDetailList" :key="cart.id">
							<td width="60%">
								<div class="typographic">
									<!--渲染图片并指定样式-->
									<img :src="cart.imgUrl" style="width: 100px;height: 100px;">
									<a href="#" class="block-text">{{cart.skuName}}</a>
									<span>{{cart.skuNum}}</span>
									<a href="#" class="service">售后申请</a>
								</div>
							</td>
							<!-- <td rowspan="2" width="8%" class="center">{{order.consignee}}</td> -->
							<!--渲染'行数'-->
							<td :rowspan="order.orderDetailList.length" v-if="index==0" width="8%" class="center">{{order.consignee}}</td>
							<td :rowspan="order.orderDetailList.length" v-if="index==0" width="13%" class="center">
								<ul class="unstyled">
									<li>总金额¥{{order.totalAmount}}</li>
									<li>在线支付</li>

								</ul>
							</td>
							<td :rowspan="order.orderDetailList.length" v-if="index==0" width="8%" class="center">
								<a href="#" class="btn">{{order.orderStatusName}} </a>
							</td>
							<td :rowspan="order.orderDetailList.length" v-if="index==0" width="13%" class="center">
								......
							</td>
						</tr>
					</tbody>
				</table>

			</div>
			<div class="choose-order">
				......
			</div>
		</div>
		<!--猜你喜欢-->
		<div class="like">
			......
		</div>
	</div>
</template>

• 最后,搞定分页(注意:分页已是全局组件,搞过来用即可)

### myOrder.index.vue
......
<div class="choose-order">
	<!--引入全局组件Pagination-->
	<Pagination
		:pageNo="page"
		:pageSize="limit"
		:total="myOrder.total"
		:continues="5"
		@getPageNo="getPageNo" <!--绑定事件-->
	></Pagination>
	
</div>
......
methods:{
	......
	getPageNo(page){ // 获取用户点击的当前页面,再次发请求
		this.page = page
		this.getData()
	}
}

本栏目推荐文章
• 基于VueCli自定义创建项目
• IDEA项目名称后面出现中括号，模块Modules的名子和文件夹名称不同，可以右键修改名称也可以在File->Project Structure 修改Modules的Name(快捷键ctrl+Shift+Alt+s)
• 去年最火的 JS 开源项目「GitHub 热点速览」
• 用jacoco统计JAVA项目测试代码覆盖率
• vue---循环方式以及跳出循环
• 个人职业生涯规划
• [Python学习记]个人感受(持续更新）
• 14.Mock 实战练习
• 分享uniapp移动端和h5项目如何使用谷歌地图
• 个人博客详细设计说明书