Skip to content

J
jz_Travel
Commit a6c7ada4 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 7bcc99cb
Hide whitespace changes
Inline Side-by-side
Showing with 163 additions and 269 deletions
pages/jiuzhai/jz_Line.vue
View file @ a6c7ada4
......@@ -71,10 +71,10 @@
.jz_ListMain {
padding-bottom: 10px;
margin:0 30rpx;
margin: 0 30rpx;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 10px;
}
.jz_TuDivBotm img {
......@@ -167,18 +167,19 @@
display: flex;
align-items: center;
}
.jz_Content .team-box {
display: flex;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
}
.jz_Content .team-box:after {
content: "";
flex: auto;
}
.jz_Content .team-box .team {
width: calc(50% - 30rpx);
background: #ECF1F4;
......@@ -186,18 +187,20 @@
font-size: 26rpx;
color: #999999;
text-align: center;
padding:20rpx;
margin-top:30rpx;
padding: 20rpx;
margin-top: 30rpx;
margin-right: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
.jz_Content .team-box .team.active {
background: #111111;
color: #FFFFFF;
}
.jz_Content .team-box .team .team-content{
.jz_Content .team-box .team .team-content {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
......@@ -205,41 +208,48 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.jz_Content .start-range-box{
.jz_Content .start-range-box {
background: #ECF1F4;
border-radius: 10rpx;
margin-top:30rpx;
margin-top: 30rpx;
display: flex;
align-items: center;
padding:20rpx;
padding: 20rpx;
}
.jz_Content .start-range-box .date-box{
flex:1;
.jz_Content .start-range-box .date-box {
flex: 1;
font-weight: 400;
}
.jz_Content .start-range-box .split-box{
.jz_Content .start-range-box .split-box {
color: #bbb;
font-size: 24rpx;
margin:0 20rpx
margin: 0 20rpx
}
.jz_Content .start-range-box .date-box.right view{
.jz_Content .start-range-box .date-box.right view {
text-align: right;
}
.jz_Content .start-range-box .date-box .label{
color:#bbb;
.jz_Content .start-range-box .date-box .label {
color: #bbb;
font-size: 24rpx;
}
.jz_Content .start-range-box .date-box .chosen-date{
color:#111;
.jz_Content .start-range-box .date-box .chosen-date {
color: #111;
font-size: 28rpx;
font-weight: 600;
}
.jz_Content .start-city {
.jz_Content .start-city {
display: inline-block;
position: relative;
}
.jz_Content .start-city text {
.jz_Content .start-city text {
position: relative;
z-index: 2;
font-size: 30rpx;
......@@ -247,8 +257,8 @@
font-weight: 500;
color: #111;
}
.jz_Content .start-city::after {
.jz_Content .start-city::after {
background-color: #DFBE6E;
height: 6px;
bottom: 2px;
......@@ -259,6 +269,7 @@
display: block;
content: ' ';
}
.jz_Content .price {
margin-top: 10rpx;
font-weight: 500;
......@@ -266,7 +277,7 @@
font-size: 20rpx;
text-align: right;
}
.jz_Content .price .money {
font-size: 36rpx;
}
......@@ -274,22 +285,19 @@
<template>
<div class="jz_Line">
<view class="jz_Content">
<!-- <u-search placeholder="目的地,旅游线路" shape="round" v-model="searchKey" input-align="left" :value="searchKey" text-color="#111"
:show-action="false"></u-search> -->
<view class="search-box">
<view class="date" @click="showBranch=true">
<u-icon name="location" color="#111" size="24"></u-icon>
<text style="margin-left: 20rpx;">{{currentBrachName}}</text>
</view>
<view style="width: 1px; flex: 1;">
<u-search placeholder="目的地名称" v-model="searchKey" input-align="left" :value="searchKey"
text-color="#111" bg-color="rgba(0,0,0,0)" :show-action="false"></u-search>
<u-search placeholder="目的地名称" v-model="searchKey" input-align="left" :value="searchKey" text-color="#111" bg-color="rgba(0,0,0,0)"
:show-action="false"></u-search>
</view>
</view>
<view>
<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#000" inactive-color="#444">
<u-dropdown-item v-model="msg.orderBy" :title="optionsTitle[0]" :options="orderBys"
@change="changeOrderBy">
<u-dropdown-item v-model="msg.orderBy" :title="optionsTitle[0]" :options="orderBys" @change="changeOrderBy">
</u-dropdown-item>
<u-dropdown-item :title="optionsTitle[1]">
<view class="slot-content" style="padding: 30rpx;padding-top:0;background-color: #FFF;">
......@@ -299,13 +307,14 @@
<text style="font-size: 28rpx;color:#111;font-weight: 800;margin-right: 10rpx;">{{x.DestinationName}}</text>
</view>
<view class="team-box">
<view v-for="(y,yi) in x.Teams" :key="i" class="team" :class="{'active':msg.team.indexOf(y.TeamId)!=-1}" @click="setTeams(i,yi)">
<view v-for="(y,yi) in x.Teams" :key="i" class="team" :class="{'active':msg.team.indexOf(y.TeamId)!=-1}"
@click="setTeams(i,yi)">
<view class="team-content">{{y.TeamName}}</view>
</view>
</view>
</template>
</scroll-view>
<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
<view style="flex:1;margin-right: 30rpx;">
<u-button :custom-style="btnStyle" @click="clearTeams">清除</u-button>
......@@ -322,8 +331,9 @@
<view style="padding-top:30rpx">
<text style="font-size: 28rpx;color:#111;font-weight: 800;margin-right: 10rpx;">行程天数</text>
</view>
<view class="team-box" >
<view v-for="x in days" class="team" style="width:calc(25% - 30rpx);" :class="{'active':msg.days.indexOf(x.day)!=-1}" @click="setDays(x.day)">{{x.name}}</view>
<view class="team-box">
<view v-for="x in days" class="team" style="width:calc(25% - 30rpx);" :class="{'active':msg.days.indexOf(x.day)!=-1}"
@click="setDays(x.day)">{{x.name}}</view>
</view>
<view style="padding-top:30rpx">
<text style="font-size: 28rpx;color:#111;font-weight: 800;margin-right: 10rpx;">出发日期</text>
......@@ -342,7 +352,7 @@
</view>
</view>
</scroll-view>
<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
<view style="flex:1;margin-right: 30rpx;">
<u-button :custom-style="btnStyle" @click="clearDayAndDate">清除</u-button>
......@@ -353,27 +363,16 @@
</view>
</view>
</u-dropdown-item>
<u-dropdown-item v-model="msg.startCity" :title="optionsTitle[3]" :options="startCitys"
@change="changeStartCity" >
<u-dropdown-item v-model="msg.startCity" :title="optionsTitle[3]" :options="startCitys" @change="changeStartCity">
</u-dropdown-item>
<!-- <u-dropdown-item v-model="searchObj.enclosure" :title="optionsTitle[1]" :options="options2" @change="change2"></u-dropdown-item> -->
</u-dropdown>
</view>
<!-- <view class="jz_Sort">
<view class="jz_SortItem">价格</view>
<view class="jz_SortItem">团期</view>
<view class="jz_SortItem" @click="screenshow=true">线路</view>
<view class="jz_SortItem" @click="isShowDate=true">日期</view>
</view> -->
<view v-if="screenshow==true" class="Jz_Mask" @click="screenshow=false"></view>
<u-empty v-if="dataList.length==0" text="暂无数据" mode="data"></u-empty>
<template v-else>
<view style="height: calc(100vh - 120px);overflow: hidden;">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
:style="{ height: '100%' }">
<view class="jz_ListMain" v-for="(item,index) in dataList" :key="index"
@click="goJzDetail(item.tcid,item.configId)">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
<view class="jz_ListMain" v-for="(item,index) in dataList" :key="index" @click="goJzDetail(item.tcid,item.configId)">
<view class="jz_List">
<view class="jz_TuDiv">
<img class="jz_TuBigImg" mode="aspectFill" :src="getImgs(item.imgCover)" alt="" />
......@@ -384,13 +383,8 @@
{{item.productRecommend}}
</view>
<view style="margin:10px 0;display: flex;align-items: center;">
<!-- <img class="jz_calederImg"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/canlder.png" />{{item.startDate}}
<text class="jz_Canhoubu">
{{item.isSubstitution==0?'不可候补':'可以候补'}}
</text> -->
<view class="start-city">
<text>成都出发</text>
<text>{{item.startCityName}}出发</text>
</view>
<view style="margin-left: 20rpx;">
<u-tag mode="plain" border-color="#DFBE6E" color="#DFBE6E" :text="`${item.dayNum}天`" size="mini"></u-tag>
......@@ -412,7 +406,8 @@
<u-popup v-model="showTimePopup" mode="bottom" border-radius="20" length="90%" :safe-area-inset-bottom="true">
<canlendar @finish="chosenDateResult"></canlendar>
</u-popup>
<u-picker mode="selector" v-model="showBranch" :default-selector="[0]" :range="branchList" @confirm='changeBranch' range-key="BName"></u-picker>
<u-picker mode="selector" v-model="showBranch" :default-selector="[0]" :range="branchList" @confirm='changeBranch'
range-key="BName"></u-picker>
</div>
</template>
<script>
......@@ -424,17 +419,17 @@
data() {
return {
pageTitle: '线路',
showTimePopup:false,
showTimePopup: false,
msg: {
pageIndex: 1,
pageSize: 15,
orderBy: "",
team:[],
days:['<100'],
startDate:'',
endDate:'',
startCity:-1,
branchId:0
team: [],
days: ['<100'],
startDate: '',
endDate: '',
startCity: -1,
branchId: 0
},
time: '',
params: {
......@@ -445,188 +440,73 @@
minute: false,
second: false
},
btnStyle:{
btnStyle: {
borderRadius: '16rpx',
color: '#111',
fontSize: '30rpx',
width: '100%',
border:"1px solid #111",
background:"#FFF"
border: "1px solid #111",
background: "#FFF"
},
btnStyle2:{
btnStyle2: {
borderRadius: '16rpx',
color: '#fff',
fontSize: '30rpx',
width: '100%',
background:"#111"
background: "#111"
},
dataList: [], //数据
searchKey: '', //搜索数据
value1: 1,
isShowDate: false,
orderBys: [{
label: '推荐排序',
value: 1,
orderBys: [],
lineList: [],
days: [{
name: "不限",
day: '<100'
},
{
label: '好评优先',
value: 2,
name: "2日以下",
day: '<=2'
},
{
label: '低价优先',
value: 3,
name: "3日",
day: '=3'
},
{
label: '高价优先',
value: 4,
}
],
lineList: [{
DestinationName: '四川',
DestinationId: 1,
Teams:[
{
TeamName:"星空九寨",
TeamId:1
},
{
TeamName:"锦绣九寨",
TeamId:2
},
{
TeamName:"亲子系列：亲亲宝贝熊猫体验夏令营",
TeamId:3
},
{
TeamName:"礼佛峨眉·乐山大佛",
TeamId:4
}
]
},
{
DestinationName: '新疆',
DestinationId: 2,
Teams:[
{
TeamName:"印象新疆漫游西域假期",
TeamId:11
},
{
TeamName:"花间集~“杏”好遇见你",
TeamId:21
}
]
},
{
DestinationName: '内蒙古',
DestinationId: 2,
Teams:[
{
TeamName:"印象内蒙古草原风情",
TeamId:12
},
{
TeamName:"邂逅·内蒙",
TeamId:22
},
{
TeamName:"诗画·内蒙",
TeamId:32
},
{
TeamName:"辽阔•内蒙",
TeamId:42
},
{
TeamName:"私享内蒙",
TeamId:52
},
{
TeamName:"绝美金秋·额济纳旗",
TeamId:62
}
]
}
],
days:[
{
name:"不限",
day:'<100'
name: "4日",
day: '=4'
},
{
name:"2日以下",
day:'<=2'
name: "5日",
day: '=5'
},
{
name:"3日",
day:'=3'
name: "6日",
day: '=6'
},
{
name:"4日",
day:'=4'
name: "7日",
day: '=7'
},
{
name:"5日",
day:'=5'
},
{
name:"6日",
day:'=6'
},
{
name:"7日",
day:'=7'
},
{
name:"8日以上",
day:'>=8'
name: "8日以上",
day: '>=8'
}
],
loadText: {
loadmore: "轻轻上拉，加载更多",
loading: "努力加载中",
nomore: "没有更多了",
},
startCitys:[
{
label:'不限',
value:-1
},
{
label:'成都',
value:0
},
{
label:'绵阳',
value:1
},
{
label:'德阳',
value:2
}
],
startCitys: [],
screenshow: false,
status: "加载中",
page_count: 0,
branchList:[{
BName:'成都站',
BId:0
},
{
BName:'武汉站',
BId:1
},
{
BName:'西安站',
BId:2
},
{
BName:'昆明站',
BId:3
}],
currentBrachName:"",
showBranch:false,
branchList: [],
currentBrachName: "",
showBranch: false,
optionsTitle: [
"推荐排序",
"线路玩法",
......@@ -636,59 +516,76 @@
};
},
created() {
this.getLineQuery();
this.getList();
uni.setNavigationBarTitle({
title:"精品旅游线路"
title: "精品旅游线路"
})
this.msg.branchId=this.branchList[0].BId
this.currentBrachName=this.branchList[0].BName
},
methods: {
changeBranch(val){
this.msg.branchId=this.branchList[val].BId
this.currentBrachName=this.branchList[val].BName
//获取查询条件
getLineQuery() {
this.apipost(
"b2b_get_GetMiniAppTravelQuery", {},
res => {
console.log("res", res);
if (res.resultCode == 1) {
this.orderBys = res.data.OrderByList;
this.branchList = res.data.SiteList;
this.startCitys = res.data.CityList;
this.lineList = res.data.linePlaceList;
this.msg.branchId = this.branchList[0].BId
this.currentBrachName = this.branchList[0].BName
}
},
null
);
},
setDays(day){
if(day=='<100'){
this.msg.days=['<100']
}else{
if(this.msg.days.indexOf('<100')!=-1){
this.msg.days.splice(this.msg.days.indexOf('<100'),1)
changeBranch(val) {
this.msg.branchId = this.branchList[val].BId
this.currentBrachName = this.branchList[val].BName
},
setDays(day) {
if (day == '<100') {
this.msg.days = ['<100']
} else {
if (this.msg.days.indexOf('<100') != -1) {
this.msg.days.splice(this.msg.days.indexOf('<100'), 1)
}
let temp=this.msg.days.indexOf(day)
if(temp==-1){
let temp = this.msg.days.indexOf(day)
if (temp == -1) {
this.msg.days.push(day)
}else{
this.msg.days.splice(temp,1)
} else {
this.msg.days.splice(temp, 1)
}
}
},
clearDayAndDate(){
this.msg.days=['<100']
this.optionsTitle[2]='天数日期'
this.msg.startDate=''
this.msg.endDate=''
clearDayAndDate() {
this.msg.days = ['<100']
this.optionsTitle[2] = '天数日期'
this.msg.startDate = ''
this.msg.endDate = ''
this.$forceUpdate()
this.$refs.uDropdown.close();
},
changeDayAndDate(){
let temp=''
if(this.msg.days.indexOf("<100")==-1){
this.msg.days.forEach(x=>{
this.days.forEach(y=>{
if(y.day==x){
temp+=y.name+","
changeDayAndDate() {
let temp = ''
if (this.msg.days.indexOf("<100") == -1) {
this.msg.days.forEach(x => {
this.days.forEach(y => {
if (y.day == x) {
temp += y.name + ","
}
})
})
}
if(this.msg.startDate!=''){
temp+="最早:"+this.msg.startDate+","
if (this.msg.startDate != '') {
temp += "最早:" + this.msg.startDate + ","
}
if(this.msg.endDate!=''){
temp+="最早:"+this.msg.endDate+","
if (this.msg.endDate != '') {
temp += "最早:" + this.msg.endDate + ","
}
this.optionsTitle[2]=temp==''?'天数日期':temp
this.optionsTitle[2] = temp == '' ? '天数日期' : temp
this.$forceUpdate()
this.$refs.uDropdown.close();
},
......@@ -697,37 +594,36 @@
this.msg.endDate = obj.end;
this.showTimePopup = false
},
clearTeams(){
this.msg.team=[]
this.optionsTitle[1]='线路玩法'
clearTeams() {
this.msg.team = []
this.optionsTitle[1] = '线路玩法'
this.$forceUpdate()
this.$refs.uDropdown.close();
},
changeTeams(){
if(this.msg.team.length==0){
this.optionsTitle[1]='线路玩法'
}else{
let temp=''
this.lineList.forEach(x=>{
x.Teams.forEach(y=>{
if(this.msg.team.indexOf(y.TeamId)!=-1){
temp+=y.TeamName+","
changeTeams() {
if (this.msg.team.length == 0) {
this.optionsTitle[1] = '线路玩法'
} else {
let temp = ''
this.lineList.forEach(x => {
x.Teams.forEach(y => {
if (this.msg.team.indexOf(y.TeamId) != -1) {
temp += y.TeamName + ","
}
})
})
this.optionsTitle[1]=temp
this.optionsTitle[1] = temp
}
this.$forceUpdate()
this.$refs.uDropdown.close();
},
setTeams(x,y){
let id=this.lineList[x].Teams[y].TeamId
let temp=this.msg.team.indexOf(id)
if(temp==-1){
setTeams(x, y) {
let id = this.lineList[x].Teams[y].TeamId
let temp = this.msg.team.indexOf(id)
if (temp == -1) {
this.msg.team.push(id)
}else{
this.msg.team.splice(temp,1)
} else {
this.msg.team.splice(temp, 1)
}
this.$forceUpdate()
},
......@@ -740,14 +636,14 @@
}
})
this.optionsTitle[0] = temp.label
this.msg.orderBy=temp.value
this.msg.orderBy = temp.value
this.$forceUpdate()
},
changeStartCity(index) {
if(index==-1){
if (index == -1) {
this.optionsTitle[3] = "出发城市"
this.msg.startCity=-1
}else{
this.msg.startCity = -1
} else {
let temp = this.startCitys.find(x => {
if (x.value == index) {
return x
......@@ -755,8 +651,8 @@
return false
}
})
this.optionsTitle[3] = temp.label+"出发"
this.msg.startCity=temp.value
this.optionsTitle[3] = temp.label + "出发"
this.msg.startCity = temp.value
}
this.$forceUpdate()
},
......@@ -775,8 +671,6 @@
if (res.resultCode == 1) {
this.dataList = this.dataList.concat(res.data.pageData);
this.page_count = res.data.pageCount;
} else {
}
},
null
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment