修改机票首页样式

pages/airTicket/airTicketList.vue

@@ -3,7 +3,7 @@
     :class="[NewDataList.length==0||2>NewDataList.length?'height100vh':'height100']">
         <view class="bgFFF">
             <AirTicketHeader></AirTicketHeader>
-            <view class="StartStopAddress" v-if="(AddressListAll&&AddressListAll.length>0)||(ArrivalCity&&ArrivalCity.length>0)">
+            <view class="StartStopAddress">
                 <view class="row-sb-n">
                     <view class="StartStopAddressText-box">
                         <view class="column">
@@ -25,11 +25,11 @@
                     </view>
                     <view class="StartStopAddressText-box">
                         <view class="column">
-                            <text class="fz24 color9999A6">目的地</text>
-                            <view class="MT31 row-aic-n" @click="AddressSelection(2)">
+                            <text class="fz24 color9999A6" style="text-align: right;">目的地</text>
+                            <view class="MT31 row-aic-n" style="justify-content: flex-end;" @click="AddressSelection(2)">
                                 <img class="inlineblock MR10" mode="widthFix" style="width: 18rpx;height: 22rpx"
                                 src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696743247000_254.png"/>
-                                <text class="StartStopAddressText fz30 fontBold"
+                                <text class="StartStopAddressText fz30 fontBold" style="width:auto;"
                                 :class="[!OriginAddress.ArriveCityName?'color9999A5':'']">
                                 {{OriginAddress.ArriveCityName?OriginAddress.ArriveCityName:'选择目的地'}}
                             </text>
@@ -207,10 +207,15 @@
             }
         },
         onLoad(options){
-            this.msg.DepartCityId = this.msgAddress.DepartCityId = this.OriginAddress.DepartCityId = options.DepartCityId?options.DepartCityId:0,
-            this.msg.ArriveCityId = this.msgAddress.ArriveCityId = this.OriginAddress.ArriveCityId = options.ArriveCityId?options.ArriveCityId:0,
-            this.msg.TicketType = this.msgAddress.TicketType = options.TicketType>0?options.TicketType:2,
-            
+            this.msg.DepartCityId = this.msgAddress.DepartCityId = this.OriginAddress.DepartCityId = options.DepartCityId?options.DepartCityId:0
+            this.msg.ArriveCityId = this.msgAddress.ArriveCityId = this.OriginAddress.ArriveCityId = options.ArriveCityId?options.ArriveCityId:0
+            this.msg.TicketType = this.msgAddress.TicketType = options.TicketType>0?options.TicketType:2
+            if(this.msg.ArriveCityId>0){
+				this.getCityInfoHandler(this.msg.ArriveCityId,1)
+			}
+			if(this.msg.DepartCityId>0){
+				this.getCityInfoHandler(this.msg.DepartCityId,0)
+			}
             this.U = uni.getStorageSync("mall_UserInfo")
             if(this.U&&this.U.Token){
                 this.isToken = true
@@ -421,8 +426,24 @@
             OffPopup(){
                 
             },
+			getCityInfoHandler(id,type){
+				this.apipost("dict_post_Destination_Get",{ID:id},(res)=>{
+					if(res.resultCode==1){
+						if(type==0){
+							this.OriginAddress.DepartCityName = res.data?.Name??''
+							this.OriginAddress.DepartCityId = id
+						}else{
+							this.OriginAddress.ArriveCityName = res.data?.Name??''
+							this.OriginAddress.ArriveCityId = id
+						}
+					}
+				})
+			},
             getDataAddressList(){
-                this.apipost("AirTicket_get_GetTicketCity",this.msgAddress,
+				let params = JSON.parse(JSON.stringify(this.msgAddress))
+				params.ArriveCityId="0",
+				params.DepartCityId="0"
+                this.apipost("AirTicket_get_GetTicketCity",params,
                 (res) => {
                     if(res.resultCode==1){
                         this.AddressListAll = []
@@ -444,18 +465,18 @@
                             })
                         })
                         this.AddressList = res.data
-                        if(this.msg.DepartCityId){
-                            let DepartCityName = this.AddressListAll.filter(x=>{
-                                return x.ID==this.msg.DepartCityId
-                            })
-                            this.OriginAddress.DepartCityName = DepartCityName.length>0?DepartCityName[0].Name:''
-                        }
-                        if(this.msg.ArriveCityId){
-                            let ArriveCityName = this.AddressListAll.filter(x=>{
-                                return x.ID==this.msg.ArriveCityId
-                            })
-                            this.OriginAddress.ArriveCityName = ArriveCityName.length>0?ArriveCityName[0].Name:''
-                        }
+                        // if(this.msg.DepartCityId){
+                        //     let DepartCityName = this.AddressListAll.filter(x=>{
+                        //         return x.ID==this.msg.DepartCityId
+                        //     })
+                        //     this.OriginAddress.DepartCityName = DepartCityName.length>0?DepartCityName[0].Name:''
+                        // }
+                        // if(this.msg.ArriveCityId){
+                        //     let ArriveCityName = this.AddressListAll.filter(x=>{
+                        //         return x.ID==this.msg.ArriveCityId
+                        //     })
+                        //     this.OriginAddress.ArriveCityName = ArriveCityName.length>0?ArriveCityName[0].Name:''
+                        // }
                         
                     }
                 });
@@ -463,9 +484,12 @@
         }
     }
 </script>
-<style scoped>
+<style>
 @import url("@/asset/css/flex.css");
 @import url("./style.css");
+.bgF5,.fontBold {
+	font-family: 'microsoft yahei ui light' !important;
+}
 .StartStopAddress{
     padding: 61rpx 54rpx 0 54rpx;
 }

pages/airTicket/components/address/indexGroup.vue

 <template>
     <view class="addressIndex-box">
-        <view class="fz30 fontBold textCenter MB30 PX53 relative">选择出发地/目的地
+        <view class="fz30 fontBold textCenter MB30 PX53 relative" style="text-align: left;">选择出发地/目的地
             <text v-if="SelectObj.DepartCityId||SelectObj.ArriveCityId" class="fz24 color9999A5 absolute PX10" 
             style="right: 53rpx;top: 0;bottom: 0;" @click="Clear">清空</text>
         </view>
-        <view class="fz30 fontBold MB30 PX53 row-aic-n">
+        <view class="fz30 fontBold MB30 PX53 row-aic-n" v-if="false">
             <text style="width: 50%;">当前出发地</text>
             <text>当前目的地</text>
         </view>
-        <view class="MT30 PX53 row-aic-n">
+        <view class="MT30 PX53 row-aic-n" v-if="false">
             <view style="width: 50%;">
                 <view class="addressIndex-Orientation inlineblock bgF5 row-ajc-n textCenter" style="width: auto; padding: 15rpx 50rpx;">
                     <img class="inlineblock MR10" mode="widthFix" style="width: 18rpx;height: 22rpx"
@@ -41,13 +41,21 @@
             </view>
         </view>
         <view class="height-line1 MT25" ></view>
-        <view class="fz30 fontBold MT20 PX53 MB20 row-aic-n">
+       <!-- <view class="fz30 fontBold MT20 PX53 MB20 row-aic-n">
             <view style="width: 150rpx;">出发地</view>
             <view class="flexG">目的地</view>
-        </view>
+        </view> -->
         <view class="hidden" style="height: calc(100vh - 60vh);">
-            <scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" :style="{ height: '100%' }">
-                <template v-for="(item,index) in dataList">
+            <scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" style="padding:0 20px;" :style="{ height: '100%' }">
+				<view class="air-city-box">
+					<view class="air-city-item" :class="{'active':i==active}" @click="changeHandler(i)" v-for="(x,i) in dataList" :key="i">
+						{{x.Name}}出发
+					</view>
+				</view>
+				<view class="air-arrcity-box">
+					<div class="air-arrcity-item" @click="getAddress(i)" :class="{'currentCity':SelectObj.ArriveCityId==x.ID && SelectObj.DepartCityId==dataList[active].ID}" v-for="(x,i) in dataList[active].CityList">{{x.Name}}</div>
+				</view>
+                <!-- <template v-for="(item,index) in dataList">
                     <view class="addressIndex-toponym row-aic-n" :key="item.ID">
                         <view style="width: 150rpx;"
                         :class="[SelectObj.DepartCityId==item.ID?'colorDEBF7B':'']"
@@ -63,7 +71,8 @@
                         </view>
                     </view>
                     <view class="height-line1 MT10" ></view>
-                </template>
+                </template> -->
+				
             </scroll-view>
         </view>
         <view class="AirplanePassengerList-footer fixedFooter bgFFF fixed z-index2">
@@ -81,6 +90,7 @@
         data() {
             return {
                 SelectObj: {},
+				active:0
             }
         },
         onLoad(options){
@@ -99,6 +109,10 @@
             
         },
         methods: {
+			changeHandler(i) {
+				console.log(i)
+				this.active=i
+			},
             RenewalAddres(){
                 this.$emit('RenewalAddres',this.SelectObj)
             },
@@ -115,7 +129,9 @@
                     this.SelectObj.ArriveCityId = 0
                 }
             },
-            getAddress(item,items){
+            getAddress(i){
+				let item = this.dataList[this.active]
+				let items = this.dataList[this.active].CityList[i]
                 if(item&&items){
                     this.ClearData(item,items)
                 }
@@ -152,4 +168,56 @@
 .addressIndex-toponym-box{
     flex: 0 0 33.33%;
 }
+.air-city-box{
+	display: flex;
+	width: auto;
+	align-items: center;
+	overflow-x: auto;
+	margin:10px 0 15px 0;
+}
+.air-city-box .air-city-item{
+	height: 50px;
+	line-height: 50px;
+	font-size: 15px;
+	transition-duration: 0.5s;
+	padding: 0 15px;
+	font-weight: bold;
+	position: relative;
+}
+.air-city-box .air-city-item::after{
+	display: block;
+	content: ' ';
+	position: absolute;
+	bottom: 16px;
+	z-index: -1;
+	height: 8px;
+	left: 10px;
+	right: 10px;
+	border-radius: 4px;
+}
+.air-city-box .air-city-item.active::after{
+	background-color: #DFBE6E;
+}
+.air-arrcity-box{
+	display: flex;
+	flex-wrap: wrap;
+	height: auto;
+}
+.air-arrcity-box .air-arrcity-item{
+	margin-bottom: 20px;
+	margin-right: 20px;
+	flex-shrink: 0;
+	width: 26%;
+	background-color: #e4e2db;
+	border-radius: 10px;
+	height: 50px;
+	line-height: 50px;
+	text-align: center;
+	font-size: 14px;
+	font-weight: bold;
+}
+.air-arrcity-box .air-arrcity-item.currentCity{
+	background-color: #1f1f1f;
+	color:#FFF;
+}
 </style>
\ No newline at end of file