【vue3.0】19.0 某东到家（十九）——订单页面创建及顶部布局
修改 src\views\home\Docker.vue
<template>
<!-- 底部主菜单容器 -->
<div class="docker">
<span
:class="{ docker__item: true, 'docker__item--active': item.active }"
v-for="(item, index) in dockerList"
:key="index"
>
<router-link :to="item.to">
<div class="docker__item_icon">
<i :class="item.icon"></i>
</div>
<div class="docker__item__title">{{ item.title }}</div>
</router-link>
</span>
</div>
</template>
<script>
export default {
name: 'Docker',
setup() {
const dockerList = [
{
active: true,
icon: 'custom-icon custom-icon-home',
title: '首页',
to: '/'
},
{
icon: 'custom-icon custom-icon-shopping',
title: '购物车',
to: '/cartList'
},
{
icon: 'custom-icon custom-icon-order',
title: '订单',
to: '/'
},
{
icon: 'custom-icon custom-icon-my',
title: '我的',
to: '/'
}
]
return { dockerList }
}
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables';
@import '@/style/mixins';
.docker {
color: $content-font-color;
display: flex; //自适应均赠,弹性盒子
position: absolute; //绝对定位
box-sizing: border-box; //这个会以body的最外层作为容器的最外层
padding: 0 0.18rem;
left: 0;
bottom: 0;
width: 100%;
height: 0.49rem;
border-top: 1px solid $content-bg-color;
&__item {
flex: 1;
text-align: center;
a {
color: $content-font-color;
text-decoration: none;
}
&--active {
a {
color: #1fa4fc;
}
}
&_icon {
margin: 0.05rem 0 0.02rem 0; //图标距离上边距7px左右;
font-size: 0.18rem;
}
&__title {
//浏览器最小像素是12px，如果想表达12px以下大小得如下编写
font-size: 0.12rem;
transform: scale(0.5 0.5); //横向缩小50% 纵向搜小50%
transform-origin: center top; //缩放的中心点
}
}
}
</style>
主要是构建路由跳转。
增加代码如下：
<router-link :to="item.to">
......
</router-link>
......
const dockerList = [
{
active: true,
icon: 'custom-icon custom-icon-home',
title: '首页',
to: '/'
},
{
icon: 'custom-icon custom-icon-shopping',
title: '购物车',
to: '/cartList'
},
{
icon: 'custom-icon custom-icon-order',
title: '订单',
to: '/'
},
{
icon: 'custom-icon custom-icon-my',
title: '我的',
to: '/'
}
]
......
新增页面src\views\cartList\CartList.vue
<template> cartList</template>
<script>
export default {
name: 'CartList'
}
</script>
新增路由：
src\router\index.js
{
path: '/cartList',
name: 'CartList',
component: () =>
import(
/* webpackChunkName: "cartList" */ '../views/cartList/CartList.vue'
)
},
新增订单页面
调整路由：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
......
{
path: '/orderConfirmation',
name: 'OrderConfirmation',
component: () =>
import(
/* webpackChunkName: "orderConfirmation" */ '../views/OrderConfirmation/OrderConfirmation.vue'
)
}
]
......
export default router
创建src\views\orderConfirmation\OrderConfirmation.vue:
<template> </template>
<script>
export default {
name: 'OrderConfirmation',
setup() {}
}
</script>
路由文件更新如下：
src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () =>
import(/* webpackChunkName: "home" */ '../views/home/Home.vue')
},
{
path: '/login',
name: 'Login',
component: () =>
import(/* webpackChunkName: "login" */ '../views/login/Login.vue'),
beforeEnter: (to, from, next) => {
// 只有访问Login页面之前才会执行次函数
const { isLogin } = localStorage // 从本地存储中取isLogin
// 如果登录，就跳到首页页面;否则跳转到登录页面
isLogin ? next({ name: 'Home' }) : next()
}
},
{
path: '/register',
name: 'Register',
component: () =>
import(
/* webpackChunkName: "register" */ '../views/register/Register.vue'
),
beforeEnter: (to, from, next) => {
const { isLogin } = localStorage
isLogin ? next({ name: 'Home' }) : next()
}
},
{
path: '/shop/:id',
name: 'Shop',
component: () =>
import(/* webpackChunkName: "shop" */ '../views/shop/Shop.vue')
},
{
path: '/cartList',
name: 'CartList',
component: () =>
import(
/* webpackChunkName: "cartList" */ '../views/cartList/CartList.vue'
)
},
{
path: '/orderConfirmation',
name: 'OrderConfirmation',
component: () =>
import(
/* webpackChunkName: "orderConfirmation" */ '../views/orderConfirmation/OrderConfirmation.vue'
)
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
// beforeEach:全局，每次做路由跳转之前都会执行这个操作。
router.beforeEach((to, from, next) => {
// to and from are Route Object,
// to:跳转的时候想要跳转的页面的信息
// from :指从哪里跳过来的信息
// next() must be called to resolve the hook}
// 中间件继续执行的方法
// 从本地存储中取isLogin
const { isLogin } = localStorage
console.log(to, from)
/** 判断是否登录 */
// 必须双循环，才能防止死循环
// 如果没有登录，就跳到登录页面
const { name } = to
const isLoginOrRegister = name === 'Login' || name === 'Register'
isLogin || isLoginOrRegister ? next() : next({ name: 'Login' })
})
export default router
新建文件
src\views\orderConfirmation\OrderConfirmation.vue
<template>
<div>orderConfirmation</div>
</template>
<script>
// import { ref } from 'vue'
export default {
name: 'OrderConfirmation'
}
</script>
修改src\views\shop\Cart.vue
......
<div class="check__btn">
<router-link :to="{ name: 'OrderConfirmation' }">
去结算
</router-link>
</div>
......
跳转后需要知道是哪个商铺下的购物车订单。这时候需要带一个参数过去，可以修改如下：
src\views\orderConfirmation\OrderConfirmation.vue
......
<div class="check__btn">
<router-link :to="{ path: `/orderConfirmation/${shopId}` }">
去结算
</router-link>
</div>
......
image.png
修改路由：
src\router\index.js
{
path: '/orderConfirmation/:shopId',
name: 'OrderConfirmation',
component: () =>
import(
/* webpackChunkName: "orderConfirmation" */ '../views/orderConfirmation/OrderConfirmation.vue'
)
}
订单页面样式布局
首先完善一下骨架：
src\views\orderConfirmation\OrderConfirmation.vue
<template>
<div class="top">
<div class="top__bgcolor" />
<div class="top__header">
<span><i class="custom-icon custom-icon-back"></i> 确认订单</span>
</div>
<div class="top__receiver">
<div class="top__receiver__title">收货地址</div>
<div class="top__receiver__address">西安一二三大学四五六科技园2号楼</div>
<div class="top__receiver__info">
<span class="top__receiver__info__name">张三（先生）</span>
<span class="top__receiver__info__phone">18012341234</span>
</div>
<span><i class="custom-icon custom-icon-back"></i></span>
</div>
</div>
</template>
<script>
// import { ref } from 'vue'
export default {
name: 'OrderConfirmation'
}
</script>
image.png
接下来增加样式：
<style lang="scss" scoped>
.top {
height: 1.96rem;
background-size: 100% 1.59rem;
/* 渐变轴为0度,相当于从下到上，
高度4%位置从rgba(0, 145, 255, 0) 开始渐变
到高度50%位置的蓝色（#0091ff）结束 */
background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, #0091ff 50%);
}
</style>
image.png
这里背景超出长度会显示原来的蓝色。
优化如下：
<style lang="scss" scoped>
.top {
height: 1.96rem;
background-size: 100% 1.59rem;
/* 渐变轴为0度,相当于从下到上，
高度4%位置从rgba(0, 145, 255, 0) 开始渐变
到高度50%位置的蓝色（#0091ff）结束 */
background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, #0091ff 50%);
background-repeat: no-repeat;
}
</style>
image.png
增加样式：
<style lang="scss" scoped>
.top {
......
&__header {
padding-top: 0.4rem;
line-height: 0.24rem;
color: #fff;
text-align: center;
}
}
</style>
image.png
进一步微调
<template>
<div class="top">
<div class="top__bgcolor" />
<div class="top__header">
<div class="top__header__back">
<i class="custom-icon custom-icon-back"></i>
</div>
<span>确认订单</span>
</div>
......
</div>
</template>
<style lang="scss" scoped>
.top {
......
&__header {
position: relative;
padding-top: 0.4rem;
line-height: 0.24rem;
color: #fff;
text-align: center;
font-size: 0.16rem;
&__back {
position: absolute;
font-size: 0.22rem;
left: 0.18rem;
}
}
}
</style>
image.png
以上是模拟器的效果，考虑到真机浏览器的大小本来就会给上部留白，这里微调一下距上的距离：
&__header {
......
padding-top: 0.26rem;
......
&__back {
......
}
}
image.png
进一步，优化收货信息：
<template>
<div class="wrapper">
<div class="top">
<div class="top__bgcolor" />
<div class="top__header">
<div class="top__header__back">
<i class="custom-icon custom-icon-back"></i>
</div>
<span>确认订单</span>
</div>
<div class="top__receiver">
<div class="top__receiver__title">收货地址</div>
<div class="top__receiver__address">
西安一二三大学四五六科技园2号楼
</div>
<div class="top__receiver__info">
<span class="top__receiver__info__name">张三（先生）</span>
<span class="top__receiver__info__phone">18012341234</span>
</div>
<span><i class="custom-icon custom-icon-back"></i></span>
</div>
</div>
</div>
</template>
<script>
// import { ref } from 'vue'
export default {
name: 'OrderConfirmation'
}
</script>
<style lang="scss" scoped>
.wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #eee;
}
.top {
position: relative;
height: 1.96rem;
background-size: 100% 1.59rem;
/* 渐变轴为0度,相当于从下到上，
高度4%位置从rgba(0, 145, 255, 0) 开始渐变
到高度50%位置的蓝色（#0091ff）结束 */
background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, #0091ff 50%);
background-repeat: no-repeat;
&__header {
position: relative;
padding-top: 0.26rem;
line-height: 0.24rem;
color: #fff;
text-align: center;
font-size: 0.16rem;
&__back {
position: absolute;
font-size: 0.22rem;
left: 0.18rem;
}
}
&__receiver {
position: absolute;
left: 0.18rem;
right: 0.18rem;
bottom: 0rem;
height: 1.11rem;
background: #fff;
border-radius: 0.04rem;
}
}
</style>
image.png
继续优化其他信息：
<template>
<div class="wrapper">
<div class="top">
<div class="top__bgcolor" />
<div class="top__header">
<div class="top__header__back">
<i class="custom-icon custom-icon-back"></i>
</div>
<span>确认订单</span>
</div>
<div class="top__receiver">
<div class="top__receiver__title">收货地址</div>
<div class="top__receiver__address">
西安一二三大学四五六科技园2号楼
</div>
<div class="top__receiver__info">
<span class="top__receiver__info__name">张三（先生）</span>
<span class="top__receiver__info__phone">18012341234</span>
</div>
<div class="top__receiver__icon">
<i class="custom-icon custom-icon-back"></i>
</div>
</div>
</div>
</div>
</template>
......
<style lang="scss" scoped>
.wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #eee;
}
.top {
......
&__receiver {
position: absolute;
left: 0.18rem;
right: 0.18rem;
bottom: 0rem;
height: 1.11rem;
background: #fff;
border-radius: 0.04rem;
&__title {
line-height: 0.22rem;
padding: 0.16rem 0 0.14rem 0.16rem;
font-size: 0.16rem;
color: #333;
}
&__address {
line-height: 0.2rem;
padding: 0 0.4rem 0 0.16rem;
font-size: 0.16rem;
color: #333;
}
&__info {
padding: 0.06rem 0 0 0.16rem;
&__name &__phone {
margin-right: 0.1rem;
line-height: 0.18rem;
font-size: 0.12rem;
color: #666;
}
}
&__icon {
//旋转180度
transform: rotate(180deg);
position: absolute;
right: 0.16rem;
top: 0.5rem;
font-size: 0.16rem;
color: #666;
}
}
}
</style>
image.png
发表评论 (审核通过后显示评论)：