You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
595 lines
16 KiB
595 lines
16 KiB
<template>
|
|
<view class="hitchRide">
|
|
<loadlogo v-if="!loadlogo" />
|
|
<view class="hitchRide-title" :style="{height: HitchData.adv.length == 0? '60rpx':'422rpx'}" v-else>
|
|
<view class="swiperBox" style="width: 100%;height: 100%;" >
|
|
<swiper class="swiper" indicator-color="rgba(255,255,255,.4)" indicator-active-color="rgba(255,255,255,.85)" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
|
|
<swiper-item v-for="(item, index) in HitchData.adv" :key="index" >
|
|
<image :src="item.thumb" style="width: 100%;height: 100%;"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F99fc792ef019f8457cc753964bd6d92c37111136.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620526828&t=a675342b718d142e7925668bf2e81371" mode=""></image> -->
|
|
<view class="yongche" v-if="type == 1" :style="{top: HitchData.adv.length == 0? '0rpx':'360rpx'}">
|
|
<image :src="imgfixUrls + 'yongche.png'" mode=""></image>
|
|
<view class="yongcheBtn f-36 f-w">
|
|
<view class="flex-box t-c col-f">
|
|
<image :src="imgfixUrls + 'baiyongche.png'" mode="aspectFit"></image>
|
|
我要用车
|
|
</view>
|
|
<view class="flex-box t-c col-9" @click="changeType(2)">
|
|
<image :src="imgfixUrls + 'huichezhu.png'" mode="aspectFit"></image>
|
|
我是车主
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="yongche" v-else :style="{top: HitchData.adv.length == 0? '0rpx':'360rpx'}">
|
|
<image :src="imgfixUrls + 'chezhu.png'" mode=""></image>
|
|
<view class="yongcheBtn f-36 f-w">
|
|
<view class="flex-box t-c col-9" @click="changeType(1)">
|
|
<image :src="imgfixUrls + 'huiyongche.png'" mode="aspectFit"></image>
|
|
我要用车
|
|
</view>
|
|
<view class="flex-box t-c col-f" >
|
|
<image :src="imgfixUrls + 'baichezhu.png'" mode="aspectFit"></image>
|
|
我是车主
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="f-24 aggregate">
|
|
共{{count}}条用车信息
|
|
</view>
|
|
<view class="destination">
|
|
|
|
<view class="punctuation">
|
|
<view class="dot dis-il-block">
|
|
|
|
</view>
|
|
<view class="dis-il-block destination-origin-go" @click="getLocat(1)">
|
|
<input type="text" disabled v-model="start_address" placeholder="点击定位出发地址"class="f-28 inouts" style="color:#185DE9;padding-top: 6upx;" placeholder-class="f-28" placeholder-style="color:#185DE9;" value="" />
|
|
</view>
|
|
</view>
|
|
<view class="punctuation " style="background-color: #F8F8F8;margin-top: 30upx;">
|
|
<view class="dot dis-il-block" style="background-color: #FF4444;">
|
|
|
|
</view>
|
|
<view class="dis-il-block destination-origin" style="padding: 30upx 30upx 30upx 60upx;" @click="getLocat(2)">
|
|
<input type="text" disabled v-model="end_address" value="" class="f-32 col-3 f-w inouts" placeholder="点击定位目的地" placeholder-class="f-32 col-3 f-w"/>
|
|
</view>
|
|
<view class="dis-il-block f-w f-32 p-top-bom-30" style="float: right;padding-right: 30upx;color: #185DE9;" @click="search">
|
|
搜索
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="hitchRide-content">
|
|
|
|
<view class="filter-box dis-flex">
|
|
<!-- <view style="flex: 0.8;">
|
|
<filtertab
|
|
:requestType="'9'"
|
|
:isPageScroll="'1'"
|
|
@selectAreaid="selectAreaid"
|
|
@selectSort="selectSort"
|
|
@getmore="getmore"
|
|
@getResumeList="getResumeList"
|
|
@selectClassTwoid="selectClassTwoid"
|
|
@selectOrders="selectOrders"
|
|
@getcityWork="getcityWork"
|
|
@selectGneder="selectGneder"></filtertab>
|
|
</view>
|
|
<view class="f-26" style="flex: 0.2;line-height: 75upx;padding-left: 20upx;" @click="check = !check">
|
|
<text>更多</text>
|
|
<text class="iconfont icon-unfold" style="padding-left: 10upx;vertical-align: top;"></text>
|
|
</view> -->
|
|
<view class="flex-box">
|
|
<view :class="transport_type == 0?'left-check':'left-nocheck'" @click="checkLeft(0)">
|
|
全部
|
|
</view>
|
|
<view :class="transport_type == 1 || transport_type == 3?'left-check':'left-nocheck'" @click="checkLeft(type == 1?3:1)">
|
|
乘用
|
|
</view>
|
|
<view :class="transport_type == 2 || transport_type == 4?'left-check':'left-nocheck'" @click="checkLeft(type == 1?4:2)">
|
|
载货
|
|
</view>
|
|
</view>
|
|
<!-- <view class="flex-box dis-flex flex-around flex-warp flex-x-around" v-if="type == 1">
|
|
<view :class="frequency == 1?'right-check':'right-nocheck'" @click="checkRight(1)">
|
|
全部
|
|
</view>
|
|
<view :class="frequency == 1?'right-check':'right-nocheck'" @click="checkRight(1)">
|
|
一次
|
|
</view>
|
|
<view :class="frequency == 2?'right-check':'right-nocheck'" @click="checkRight(2)">
|
|
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="journey-box" v-if="HitchData.list.length > 0">
|
|
<view class="journey-item" v-for="(item,index) in HitchData.list" :key="index">
|
|
<journey :phones="true" :boxPadding="false" :hitchItem="item"></journey>
|
|
</view>
|
|
</view>
|
|
<view class="journey-box" v-else>
|
|
<nonemores></nonemores>
|
|
</view>
|
|
|
|
<!-- 地址选择 -->
|
|
<!-- #ifdef H5 -->
|
|
<PopManager :show="isOpenLaction" :type="'bottom'" :overlay="'false'" :showOverlay="'false'">
|
|
<view class="iframe-wid-hgt" :style="{ height: phoneHeight }" v-if="latlngis">
|
|
<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KIQBZ-6OT3G-AOMQD-IHW6J-PEUDV-VCFAF&referer=myapp&coord=${latlngis.latitude},${latlngis.longitude}`"></iframe>
|
|
</view>
|
|
<view class="iframe-wid-hgt" :style="{ height: phoneHeight }" v-if="!latlngis">
|
|
<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KIQBZ-6OT3G-AOMQD-IHW6J-PEUDV-VCFAF&referer=myapp`"></iframe>
|
|
</view>
|
|
</PopManager>
|
|
<!-- #endif -->
|
|
|
|
<!-- 更多筛选弹窗 -->
|
|
<view >
|
|
<screening :check="check" @close="close" @checkeda="checkeda" @confirm="confirm" v-bind:moreData.sync="moreData"></screening>
|
|
</view>
|
|
<phoneNavBar :type="type" :checked="'首页'" :payclose="HitchData.payclose" :page="'hitch'"></phoneNavBar>
|
|
<far-bottom></far-bottom>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js';
|
|
import nonemores from '@/components/template/nonemores.vue';
|
|
import filtertab from '@/components/template/filtertab.vue';
|
|
import screening from '@/components/template/screening.vue';
|
|
import journey from '@/components/template/journey.vue';
|
|
import phoneNavBar from '@/components/template/phoneNavBar';
|
|
import PopManager from '@/components/template/PopManager';
|
|
import Loadlogo from '@/components/template/loadlogo.vue';
|
|
let videoAd = null;
|
|
export default{
|
|
data(){
|
|
return{
|
|
arr:[1,2,3],
|
|
check:false,
|
|
checked:false,
|
|
checkedLeft:1,
|
|
checkedRight:1,
|
|
moreData:{},
|
|
page:1,
|
|
total:1,
|
|
agencyData:{},
|
|
listimgstyle:{},
|
|
HitchData:{
|
|
list:[],
|
|
adv:[]
|
|
},
|
|
sort:0,
|
|
type:1,
|
|
transport_type:0,
|
|
frequency:1,
|
|
end_address:'',
|
|
start_address:'',
|
|
latlng:null,
|
|
latlngTwo:{},
|
|
latlngis:{},
|
|
isOpenLaction:false,
|
|
phoneHeight:null,
|
|
count:0,
|
|
loadlogo:false,
|
|
userInfo:{},
|
|
lblis:{}
|
|
}
|
|
},
|
|
components:{
|
|
filtertab,
|
|
journey,
|
|
screening,
|
|
nonemores,
|
|
phoneNavBar,
|
|
PopManager,
|
|
Loadlogo
|
|
},
|
|
onLoad() {
|
|
let _this = this;
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
_this.phoneHeight = res.windowHeight + 'px';
|
|
}
|
|
});
|
|
// #ifdef MP-WEIXIN
|
|
// 在页面中定义激励视频广告
|
|
|
|
|
|
// 在页面onLoad回调事件中创建激励视频广告实例
|
|
// if (wx.createRewardedVideoAd) {
|
|
// videoAd = wx.createRewardedVideoAd({
|
|
// adUnitId: 'adunit-13ceba8798651263'
|
|
// })
|
|
// videoAd.onLoad(() => {})
|
|
// videoAd.onError((err) => {})
|
|
// videoAd.onClose((res) => {})
|
|
// }
|
|
|
|
|
|
// #endif
|
|
_this.latlngis = uni.getStorageSync('curLoction');
|
|
_this.latlng = uni.getStorageSync('curLoction');
|
|
this.agencyData = uni.getStorageSync('agencyData');
|
|
this.listimgstyle = uni.getStorageSync('listimgstyle');
|
|
this.getHitchList()
|
|
},
|
|
onShow() {
|
|
let _this = this;
|
|
// #ifdef H5
|
|
window.addEventListener(
|
|
'message',
|
|
function(event) {
|
|
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
|
|
let loc = event.data;
|
|
if (loc && loc.module == 'locationPicker') {
|
|
//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
|
|
console.log('location', loc);
|
|
if(_this.isOpenLaction == 1){
|
|
_this.start_address = loc.poiname;
|
|
_this.latlng = loc.latlng;
|
|
|
|
}else{
|
|
_this.end_address = loc.poiname;
|
|
_this.latlngTwo = loc.latlng;
|
|
}
|
|
_this.isOpenLaction = false;
|
|
|
|
}
|
|
},
|
|
false
|
|
);
|
|
// #endif
|
|
//#ifdef APP-PLUS
|
|
if(_this.userInfo.lat){
|
|
if(_this.isOpenLaction == 1){
|
|
_this.address = _this.userInfo.address;
|
|
_this.latlng.lat = _this.userInfo.lat;
|
|
_this.latlng.lng = _this.userInfo.lng;
|
|
}else{
|
|
_this.addressTwo = _this.userInfo.address;
|
|
_this.latlngTwo.lat = _this.userInfo.lat;
|
|
_this.latlngTwo.lng = _this.userInfo.lng;
|
|
}
|
|
_this.isOpenLaction = false;
|
|
}
|
|
//#endif
|
|
},
|
|
onReachBottom() {
|
|
if(this.total == this.page) return
|
|
this.page++;
|
|
this.getHitchList(true);
|
|
},
|
|
methods:{
|
|
changeType(num){
|
|
// 用户触发广告后，显示激励视频广告
|
|
// if (videoAd) {
|
|
// videoAd.show().catch(() => {
|
|
// // 失败重试
|
|
// videoAd.load()
|
|
// .then(() => videoAd.show())
|
|
// .catch(err => {
|
|
// console.log('激励视频 广告显示失败')
|
|
// })
|
|
// })
|
|
// }
|
|
this.type = num;
|
|
this.transport_type = 0;
|
|
// this.frequency = 1;
|
|
this.page = 1;
|
|
this.latlng = uni.getStorageSync('curLoction');
|
|
this.end_address = '';
|
|
this.start_address = '';
|
|
this.getHitchList();
|
|
},
|
|
getLocat(num){
|
|
this.isOpenLaction = num;
|
|
let _this = this;
|
|
// #ifdef MP-WEIXIN
|
|
uni.chooseLocation({
|
|
success: function(res) {
|
|
if(_this.isOpenLaction == 1){
|
|
// _this.start_address = loc.poiname;
|
|
// _this.latlng = loc.latlng;
|
|
_this.start_address = res.name;
|
|
_this.latlng.lat = res.latitude;
|
|
_this.latlng.lng = res.longitude;
|
|
console.log(res);
|
|
}else{
|
|
// _this.end_address = loc.poiname;
|
|
// _this. = loc.latlng;
|
|
_this.end_address = res.name;
|
|
_this.latlngTwo.lat = res.latitude;
|
|
_this.latlngTwo.lng = res.longitude;
|
|
}
|
|
_this.isOpenLaction = false;
|
|
|
|
}
|
|
});
|
|
// #endif
|
|
//#ifdef APP-PLUS
|
|
App.navigationTo({
|
|
url: 'pages/subPages2/map/index'
|
|
});
|
|
//#endif
|
|
},
|
|
checkLeft(num){
|
|
this.page = 1;
|
|
this.transport_type = num;
|
|
this.getHitchList();
|
|
},
|
|
checkRight(num){
|
|
this.page = 1;
|
|
this.frequency = num;
|
|
this.getHitchList();
|
|
},
|
|
search(){
|
|
this.getHitchList();
|
|
},
|
|
getHitchList(flag){
|
|
let data = {
|
|
page:this.page,
|
|
is_total:1,
|
|
type:this.type == 1?2:1,
|
|
transport_type:this.transport_type,
|
|
start_lat:this.latlng.lat || '',
|
|
start_lng:this.latlng.lng || '',
|
|
end_lat:this.latlngTwo.lat || '',
|
|
end_lng:this.latlngTwo.lng || ''
|
|
}
|
|
App._post_form(
|
|
`&p=vehicle&do=homeList`,
|
|
data,
|
|
res => {
|
|
if(flag){
|
|
this.HitchData.list = this.HitchData.list.concat(res.data.list);
|
|
}else{
|
|
console.log(res);
|
|
this.HitchData = res.data;
|
|
uni.setStorageSync('payclose',this.HitchData.payclose);
|
|
this.total = res.data.total;
|
|
this.count = res.data.count;
|
|
}
|
|
},
|
|
false,
|
|
() => {
|
|
this.loadlogo = true;
|
|
}
|
|
);
|
|
},
|
|
getmore(data) {
|
|
data.top.forEach((item,index) => {
|
|
if(index > 2){
|
|
this.moreData[item.subscript] = data[item.subscript];
|
|
}
|
|
});
|
|
this.moreData.top = data.top;
|
|
for(let key in this.moreData){
|
|
this.moreData[key].forEach((item,index) => {
|
|
item.checked = false;
|
|
if(this.isShowVideo && key == 'get_type' && item.val == 1) {
|
|
item.checked = true
|
|
}
|
|
// if(key == 'job_type' && item.val == this.job_type){
|
|
// item.checked = true;
|
|
// }
|
|
})
|
|
}
|
|
},
|
|
// 更多弹窗确定
|
|
confirm(e) {
|
|
console.log(e)
|
|
// this.apiParams = {...this.apiParams,...e}
|
|
// this.check = false
|
|
// this.currentPage = 1
|
|
// this.memberList = []
|
|
// this.getMemberList()
|
|
// console.log(this.apiParams)
|
|
},
|
|
// 更多弹窗选项选择
|
|
checkeda(index,key,flag) {
|
|
// this.moreData[key].forEach(item=>{
|
|
// item.checked = false
|
|
// });
|
|
// let obj = Object.assign({},this.moreData);
|
|
// this.moreData = {...obj}
|
|
// this.moreData[key][index].checked = flag
|
|
},
|
|
// 关闭和清除
|
|
close(flag) {
|
|
console.log(flag)
|
|
},
|
|
selectGneder(item){
|
|
console.log(item)
|
|
},
|
|
selectSort(item){
|
|
console.log(item)
|
|
},
|
|
getResumeList(item) {
|
|
console.log(item)
|
|
},
|
|
|
|
selectClassTwoid(item) {
|
|
console.log(item)
|
|
},
|
|
|
|
selectOrders(item) {
|
|
console.log(item)
|
|
},
|
|
|
|
selectAreaid(item) {
|
|
console.log(item)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.hitchRide{
|
|
padding-bottom: 240upx;
|
|
.hitchRide-title{
|
|
height: 422upx;
|
|
width: 750upx;
|
|
position: relative;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.swiper {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.yongche{
|
|
width: 750upx;
|
|
height: 110upx;
|
|
position: absolute;
|
|
top: 360upx;
|
|
left: 0;
|
|
.yongcheBtn{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 110upx;
|
|
line-height: 110upx;
|
|
display: flex;
|
|
image{
|
|
width: 32upx;
|
|
height: 38upx;
|
|
vertical-align: middle;
|
|
margin-bottom: 6upx;
|
|
margin-right: 10upx;
|
|
}
|
|
}
|
|
}
|
|
.aggregate{
|
|
padding: 20upx 30upx;
|
|
padding-top: 70upx;
|
|
color: #C1D6FF;
|
|
}
|
|
.destination{
|
|
padding: 30upx;
|
|
border-radius: 20upx;
|
|
background-color: #FFFFFF;
|
|
width: 690upx;
|
|
height: 235upx;
|
|
box-sizing: border-box;
|
|
margin: auto;
|
|
.punctuation{
|
|
position:relative;
|
|
.dot{
|
|
width: 12upx;
|
|
height: 12upx;
|
|
border-radius: 50%;
|
|
background-color: #00C095;
|
|
position: absolute;
|
|
left: 30upx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.destination-origin{
|
|
color: #00C095;
|
|
font-size: 30upx;
|
|
padding-left: 60upx;
|
|
|
|
/deep/ .uni-input-input{
|
|
width: 430upx;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
-o-text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
// line-height: 40upx;
|
|
}
|
|
.destination-origin-go{
|
|
color: #00C095;
|
|
font-size: 30upx;
|
|
padding-left: 60upx;
|
|
|
|
/deep/ .uni-input-input{
|
|
width: 540upx;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
-o-text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.hitchRide-content{
|
|
padding: 30upx;
|
|
padding-top: 380upx;
|
|
background: linear-gradient(180deg, #185DE9 450upx, #185DE9 1%, #F8F8F8 750upx);
|
|
background-repeat: no-repeat;
|
|
// background-color: #FFFFFF;
|
|
.journey-box{
|
|
.journey-item{
|
|
background-color: #FFFFFF;
|
|
padding: 30upx;
|
|
margin-bottom: 20upx;
|
|
border-radius: 20upx;
|
|
}
|
|
}
|
|
.filter-box{
|
|
padding: 10upx 0upx 26upx;
|
|
.left-nocheck{
|
|
width: 90upx;
|
|
height: 48upx;
|
|
line-height: 48upx;
|
|
font-size: 28upx;
|
|
color: #C1D6FF;
|
|
margin-right: 20upx;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
.left-check{
|
|
width: 90upx;
|
|
height: 48upx;
|
|
line-height: 48upx;
|
|
font-size: 28upx;
|
|
color: #FFFFFF;
|
|
font-weight: 700;
|
|
border: 1upx solid #FFFFFF;
|
|
border-radius: 60upx;
|
|
margin-right: 20upx;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
.right-nocheck{
|
|
width: 150upx;
|
|
height: 48upx;
|
|
line-height: 48upx;
|
|
font-size: 28upx;
|
|
color: #C1D6FF;
|
|
// margin-right: 20upx;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
.right-check{
|
|
width: 150upx;
|
|
height: 48upx;
|
|
line-height: 48upx;
|
|
font-size: 28upx;
|
|
color: #FFFFFF;
|
|
font-weight: 700;
|
|
border: 1upx solid #FFFFFF;
|
|
border-radius: 60upx;
|
|
margin-right: 0upx;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
.iframe-wid-hgt{
|
|
width: 100vw;
|
|
}
|
|
}
|
|
</style>
|
|
|