App.vue

作為入口文件，其中html部分放全局公共的樣式。
import其他vue文件，以及router，
setup里獲取后臺數據庫的數據，轉發給路由。
默認的初始跳轉界面是Home.js

router

兩種import寫法

import Home from '../views/index/Home.vue' const routes = [{path: '/',name: 'Home',component: Home},{path: '/service',name: 'Service',component: () => import('../views/index/Service.vue')},{path: '/pay',name: 'Pay',component: () => import('../views/index/Pay.vue')} ]

views

views/flight

Home

首先考慮直達和換乘的情況，用到動態組件的顯示。判斷數組flights的長度，長度為1則直達，反之為換乘。
在setup獲取飛機的信息。

DirectFlight TransitFlight

作為Home的子組件，引入飛機票頭部等信息(四組件)。
props接收父組件的傳值，此時接收的flights為數組。

FlightHeader 等

作為DirectFlight 、TransitFlight的子組件，props接收flight為數組對象。
這里的html布局與預期效果一致。

這部分總結：做的時候先確定flights數組的對象，給固定寫死的值，預覽效果是否和預期一致。
這里主要是實踐props的用法。

store

在state里定義passengers、passengerTypes(不同類型乘客的數量)。

views/index

這里放router跳轉的三個界面，Home、Service、Pay。
根據攜程界面，可知Home和Service都需引入前面的flight即右邊的飛機票部分。

Home

考慮到需要添加乘客，需要做for循環(寫到v-for就一定要寫:key)，將乘客信息組件化，再創建一個PassengerInfo.vue組件。
html里寫非組件的button按鈕

<el-button :disabled = "isPassengersVaild" type="primary"plainicon="el-icon-circle-plus"@click="handleAddPassenger">添加乘客</el-button> <span style="color:red" v-if="isPassengersVaild">您最多只能預訂4位乘客，您已訂滿，無法繼續添加乘客。</span>

@click="handleAddPassenger"添加乘客
在setup里定義handleAddPassenger方法，向vuex里commit數據
在mutations里定義addPassengerconst addPassenger = state => {
state.passengers.push(乘客的屬性，可以設默認初始值)}

在setup里定義passengers、isPassengersVaild、handleAddPassenger，反出去讓外面拿到。(只有外面需要的才反，內部使用的不需要)

const store = useStore() const passengers = computed(() => store.state.passengers) const isPassengersVaild = computed(() => store.state.passengers.length == 4) const handleAddPassenger = () =>{store.commit('addPassenger') }

在store里定義addPassenger方法，添加即push一個passenge對象，同時state.passengerTypes.ADU++默認添加一個成人。
該方法定義在mutations外，在mutations聲明。因為乘客數量不能為零(無論怎樣刪總有一個空白的乘客信息輸入組件)，所以delPassenger需要去判斷當state.passengers.length == 0時，調用addPassenger方法。如果在mutations里定義addPassenger會造成刪除乘客可致乘客數量為0，導致問題。

PassengerInfo

html寫好布局，需要用戶輸入的內容都要用v-model綁定，select要做for循環，要實現部分內容隨select的選擇而改變顯示，需要v-show=“idTypesHasBirthday.indexOf(p.idTypes) == -1”，刪除乘客handleDelPassenger§。
這里props接收Home傳遞的p(passenge)對象，同時setup里用到props的數據

setup(props) {const store = useStore()const handleDelPassenger = (p) =>{store.commit('delPassenger',p)}watch(() => props.p.birthday, (val) => { let passengerAge = differenceInYears(new Date(props.p.birthday), val)let type = ''if (passengerAge < 2) {type = 'BAB'} else if (passengerAge < 12) {type = 'CHI'} else {type = 'ADU'}console.log(type)props.p.type = type})watch(() => props.p.type, (val,oldval) => {store.commit('updatePassengerType',{oldType:oldval, newType:val})})

再到store里定義刪除乘客

delPassenger(state, p) {const index = state.passengers.indexOf(p)state.passengerTypes[p.type]--state.passengers.splice(index, 1)if(state.passengers.length == 0){addPassenger(state)} }

判斷乘客的類型(難點)

這里一定要轉換思想，不能用js的思想了，要考慮數據驅動不是事件驅動。
對輸入的證件號碼進行判斷，先定義valid(*)用computed獲取，如果是身份證則判斷輸入是否合法，合法取出它的出生年月日，將其轉換為標準格式，放入p.birthday里。如果不合法，則p.birthday為空字符串。如果是護照，直接返回p.cardNumber顯示即可。

//以下是一個身份證截取出生年月日轉換為中國標準時間的固定寫法 props.p.birthday = format(new Date(props.p.cardNumber.substr(6, 4),props.p.cardNumber.substr(10, 2) - 1,props.p.cardNumber.substr(12, 2)),'yyyy-MM-dd' )

如果是護照，則通過獲取生日，判斷乘客類型。
這里需要用到watch來監聽生日屬性，以獲取其變化。

watch(() => props.p.birthday, (val) => { //2021-06-01 18:30應該是獲取的當前時間，現在先寫死let passengerAge = differenceInYears(new Date("2021-06-01 18:30"), val)let type = ''if (passengerAge < 2) {type = 'BAB'} else if (passengerAge < 12) {type = 'CHI'} else {type = 'ADU'}console.log(type)props.p.type = type})watch(() => props.p.type, (val,oldval) => {store.commit('updatePassengerType',{oldType:oldval, newType:val})})

在mutations里

updatePassengerType(state, obj) {state.passengerTypes[obj.oldType]--obj.newType && state.passengerTypes[obj.newType]++ }

另外對用戶是否輸入姓名和證件號碼進行驗證，這里只提一下驗證證件號碼的部分，即是否有輸入內容和合法，這里不能用.value判斷是否有內容，用p.cardNumber和valid(*).。

Service

將html拆分為兩部分，上部分為乘客信息(兩組件)，下部分為增值服務(一組件)。
這里要從vuex里拿到乘客信息，并拿到路由。

import { getCurrentInstance } from 'vue' const { ctx } = getCurrentInstance() store.commit('addNav',ctx.$router.currentRoute.value.fullPath)

添加增值服務需要在vuex創建一個空的service對象，如果該服務已存在則刪除一個，沒有則添加。

addService(state,item){const index = state.service.indexOf(item)if(index > -1){state.service.splice(index, 1)}else{state.service.push(item)} }

Price

首先這里會同時用到v-for和v-if，先循環，再包一個div去用if判斷。

總結

以上是生活随笔為你收集整理的携程飞机票部分 vue/cli+element-plus的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。