【vue3.0】19.0 某東到家（十九）——訂單頁面創建及頂部佈局

原創 bobokaka 2021-12-01 04:35

修改 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>
......

修改路由：
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>

接下來增加樣式：

<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>

這裏背景超出長度會顯示原來的藍色。
優化如下：

<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>

增加樣式：

<style lang="scss" scoped>
.top {
......
  &__header {
    padding-top: 0.4rem;
    line-height: 0.24rem;
    color: #fff;
    text-align: center;
  }
}
</style>

進一步微調

<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>

以上是模擬器的效果，考慮到真機瀏覽器的大小本來就會給上部留白，這裏微調一下距上的距離：

  &__header {
......
    padding-top: 0.26rem;
......
    &__back {
......
    }
  }

進一步，優化收貨信息：

<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>

繼續優化其他信息：

<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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

鼠標控制軟件有可能和虛擬機軟件產生衝突

  最近Virtualbox虛擬機經常卡頓、鼠標無法點擊，給工作帶來很多麻煩。有一次身子在開會的時候直接卡死，特別尷尬。。 一開始以爲是輸入法或者操作系統補丁的問題，但調整後並不能解決。 更改虛擬機的各種設置，全部無效。 之後升級了Virt

氫氦 2024-06-13 14:37:05

比特幣區塊檢查

比特幣採用Pow共識機制，即不斷調整Nonce值，對區塊頭做雙重SHA256哈希運算，使得結果滿足給定數量前導0的哈希值的過程。其中前導0的個數，取決於挖礦難度，前導0的個數越多，挖礦難度越大。 1 塊兒產生時的檢查 首先，生成鑄幣交易，並

weiwei22844 2024-06-13 14:36:55

自定義MyBatis插件

插件原理回顧 在前面，我們通過 MyBatis插件機制介紹與原理 分析了 MyBatis 插件的基本原理，但是可能還只是理論上的分析，沒有實戰的鍛鍊可能理解的還是不夠透徹。接下來，我們通過自定義插件實例來進一步深度理解 MyBatis 插件

燈塔下的守望者 2024-06-13 14:36:45

高性能版本的零內存分配LikeString函數（ZeroMemAllocLikeOperator）

繼上一篇文章在.NET Core，除了VB的LikeString，還有其它方法嗎？(四種LikeString實現分享)分享了四種實現方式，筆者對這四種實現方式，不管是執行性能還是內存分配性能上，都不太滿意。 那麼是否有好的實現方法呢？答案是

VAllen 2024-06-13 14:35:54

【java基礎】java線程的四種創建方式

1.繼承Thread類   2.實現Runnable接口  因爲Runnable接口就是支持函數式編程的接口，可以這麼玩   3.實現Callable接口，用FutureTask<T>獲取返回值。FutureTask還是繼承的Runn

金大鑫要堅持 2024-06-13 14:32:24

【java基礎】線程池的狀態流轉

前言： 首先要知道什麼是線程池？ 池化：數據庫連接池， 線程池，字符串常量池 線程是用來執行任務的， 如果不用線程池，那麼線程每次使用前創建，使用後釋放，資源利用率低。所以說用線程池提高了線程對象利用率。 所以可以用線程池完成，先創建好那麼

金大鑫要堅持 2024-06-13 14:32:24

微服務實踐之使用 kube-vip 搭建高可用 Kubernetes 集羣

實驗環境 原理 生成kube-vip靜態pod配置清單 export VIP=192.168.215.200 # 我的vip是192.168.215.200 export INTERFACE=ens33 #可以用 ip a 查看接口名稱

hiningrise 2024-06-13 14:30:24

Keyboard Maestro 常用的 Actions 記錄

前言 使用 Keyboard Maestro 做自動化管理是，Actions太多了，總是記不住，這裏特意記錄一下 正文 觸發鍵盤按鍵 Type a Keystroke Categories: Interface Control Action

水車 2024-06-13 14:27:44

一款.NET開源、功能強大、跨平臺的繪圖庫 - OxyPlot

前言 今天大姚給大家分享一款.NET開源（MIT License）、免費、跨平臺、功能強大的繪圖庫，支持多平臺使用（包括：WPF、UWP、WinForm、Silverlight、Xamarin.iOS、Xamarin.Android、Xam

追逐時光 2024-06-13 14:27:24

一個開源且全面的C#算法實戰教程

前言 算法在計算機科學和程序設計中扮演着至關重要的角色，如在解決問題、優化效率、決策優化、實現計算機程序、提高可靠性以及促進科學融合等方面具有廣泛而深遠的影響。今天大姚給大家分享一個開源、免費、全面的C#算法實戰教程：TheAlgorith

追逐時光 2024-06-13 14:27:24

重新搞黑魂1的mod

筆記本沒顯卡. 玩黑魂1, 不是重置版還可以. 裝上受死版之後, 需要打dsfix 的補丁. 設置: DSfix.ini # internal rendering resolution of the game # higher values

張博的博客 2024-06-13 14:25:14

C語言--右移 左移

C語言--右移 左移 右移，高位補符號位，低位移除（正整數符號位爲0，負整數符號位爲1） 16 >> 2 等價爲 16 /（ 2 * 2） 左移，高位移除，低位補零，最高位爲1時，表示負數。16 << 2 等價爲 16 *（ 2 * 2）

張博的博客 2024-06-13 14:25:14

Redis相關總結

一、緩存雪崩、緩存穿透 現象：緩存雪崩：大量緩存同時過期、緩存中間件宕機 緩存穿透：訪問不存在key、緩存過期解決：緩存雪崩：設置不同過期時間 緩存穿透：不存在key也存入緩存、使用布隆過濾器、使用分佈式

DayVK 2024-06-13 14:24:13

HbuilderX，找不到rollup/rollup-win32-x64-msvc

在使用HbuilderX,使用vue3開發uniapp時，我運行app，報錯，rollup組件找不到了。這個rollup是一個編譯js的工具，win32-x64的意思是採用windows版本64位的運行版本，msvc是說，需要windows

HelloLLLLL 2024-06-13 14:22:53

sc-token傳參方式20240613

2018 2024-06-13 14:20:13