App.vue

作為入口文件，其中html部分放全局公共的樣式。
import其他vue文件，以及router，
setup里獲取后臺數(shù)據(jù)庫的數(shù)據(jù)，轉(zhuǎn)發(fā)給路由。
默認(rèn)的初始跳轉(zhuǎn)界面是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

首先考慮直達(dá)和換乘的情況，用到動態(tài)組件的顯示。判斷數(shù)組flights的長度，長度為1則直達(dá)，反之為換乘。
在setup獲取飛機(jī)的信息。

DirectFlight TransitFlight

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

FlightHeader 等

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

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

store

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

views/index

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

Home

考慮到需要添加乘客，需要做for循環(huán)(寫到v-for就一定要寫:key)，將乘客信息組件化，再創(chuàng)建一個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">您最多只能預(yù)訂4位乘客，您已訂滿，無法繼續(xù)添加乘客。</span>

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

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

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對象，同時(shí)state.passengerTypes.ADU++默認(rèn)添加一個成人。
該方法定義在mutations外，在mutations聲明。因?yàn)槌丝蛿?shù)量不能為零(無論怎樣刪總有一個空白的乘客信息輸入組件)，所以delPassenger需要去判斷當(dāng)state.passengers.length == 0時(shí)，調(diào)用addPassenger方法。如果在mutations里定義addPassenger會造成刪除乘客可致乘客數(shù)量為0，導(dǎo)致問題。

PassengerInfo

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

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

判斷乘客的類型(難點(diǎn))

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

//以下是一個身份證截取出生年月日轉(zhuǎn)換為中國標(biāo)準(zhǔn)時(shí)間的固定寫法 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' )

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

watch(() => props.p.birthday, (val) => { //2021-06-01 18:30應(yīng)該是獲取的當(dāng)前時(shí)間，現(xiàn)在先寫死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]++ }

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

Service

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

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

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

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

Price

首先這里會同時(shí)用到v-for和v-if，先循環(huán)，再包一個div去用if判斷。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。