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.
 
 
 
 
 

395 lines
9.3 KiB

<template>
<view class="hitchRideDetails">
<view class="disclaimer dis-flex">
<text style="font-size: 24upx;padding-right: 10upx;" class="iconfont icon-info"></text>
<view class="text dis-il-block" @click="disclaimerPopShow = true">{{hitchDetails.desc_disclaimers}}</view>
<view style="font-size: 24upx;" class="iconfont icon-right t-r flex-box"></view>
</view>
<view class="generalize">
<journey :hitchItem="hitchDetails" :flag="true"></journey>
</view>
<view class="particulars">
<view class="particulars-box">
<view class="particulars-title">
出发时间
</view>
<view class="particulars-content">
{{hitchDetails.start_time_text}}
</view>
</view>
<view class="particulars-box">
<view class="particulars-title">
出发地
</view>
<view class="particulars-content">
{{hitchDetails.start_address}}
</view>
</view>
<view class="particulars-box" v-if="hitchDetails.frequency == 2">
<view class="particulars-title">
班次:
</view>
<view class="particulars-content">
每天
</view>
</view>
<view class="particulars-box" v-if="hitchDetails.pass_by.length > 0">
<view class="particulars-title">
途径地:
</view>
<view class="particulars-content">
<view class="dis-il-block tags" style="padding-right: 6upx;" v-for="(item,index) in hitchDetails.pass_by" :key="index">{{item}}</view>
</view>
</view>
<view class="particulars-box" v-if="hitchDetails.transport_type == 1 || hitchDetails.transport_type == 3">
<view class="particulars-title">
{{hitchDetails.transport_type == 1?'人数':'空座'}}:
</view>
<view class="particulars-content">
{{hitchDetails.people}}
</view>
</view>
<view class="particulars-box" v-if="hitchDetails.transport_type == 2 || hitchDetails.transport_type == 4">
<view class="particulars-title">
{{hitchDetails.transport_type == 2?'货重':'载重'}}:
</view>
<view class="particulars-content">
{{hitchDetails.weight}}KG
</view>
</view>
<view class="particulars-box">
<view class="particulars-title">
手机号:
</view>
<view class="particulars-content">
{{hitchDetails.contacts_phone}}
</view>
</view>
<view class="particulars-box">
<view class="particulars-title">
联系人:
</view>
<view class="particulars-content">
{{hitchDetails.contacts}}
</view>
</view>
</view>
<view class="remark">
<view class="remark-title col-9 f-30">
备注说明
</view>
<view class="f-28">
{{hitchDetails.remarks}}
</view>
</view>
<view class="bottomMenu dis-flex">
<view class=" dis-flex" style="flex: 0.4;">
<view class="flex-box" @click="report">
<view class="t-c">
<image :src="imgfixUrls + 'f4jubao.png'" mode=""></image>
</view>
<view class="f-26 c-ff4444 t-c">
举报
</view>
</view>
<view class="flex-box" @click="collect">
<view :class="hitchDetails.is_collection == 1?'iconfont icon-xihuan t-c':'iconfont icon-xihuan1 t-c'" style="font-size: 40upx;" :style="{color: hitchDetails.is_collection == 1?'#FF4444':'#333333'}">
</view>
<view class="f-26 color333333 t-c">
收藏
</view>
</view>
</view>
<view style="flex: 0.6;">
<view class="consult" @click="consule">
在线咨询
</view>
<view class="playCall" @click="kfPhone">
拨打电话
</view>
</view>
</view>
<PopManager :show="show" type="center" @clickmask="close">
<view class="reportPop">
<view class="reportPop-title">
举报信息
<text class="iconfont icon-close" style="font-size: 36upx;float: right;" @click="close"></text>
</view>
<view class="reportPop-content">
<textarea v-if="show" class="textarea" placeholder-class="col-9" v-model="describe" value="" placeholder="请输入举报信息" />
</view>
<view class="submit" @click="submitReport">
提交
</view>
</view>
</PopManager>
<PopManager :show="disclaimerPopShow" type="center" @clickmask="disclaimerPopShow = false">
<view class="disclaimerPop">
{{hitchDetails.desc_disclaimers}}
</view>
<view class="line">
</view>
<view class="iconfont icon-roundclose col-f icons" @click="disclaimerPopShow = false">
</view>
</PopManager>
<far-bottom></far-bottom>
</view>
</template>
<script>
import App from '@/common/js/app.js';
import journey from '@/components/template/journey.vue';
import PopManager from '@/components/template/PopManager';
export default{
data(){
return{
flag:false,
disclaimerPopShow:false,
show:false,
hitchDetails:{},
id:null,
describe:''
}
},
components:{
journey,
PopManager
},
onLoad(e) {
console.log(e);
this.id = e.id;
this.getHitchDetails(e.id);
},
methods:{
kfPhone() {
let _this = this
uni.makePhoneCall({
phoneNumber: _this.hitchDetails.contacts_phone //仅为示例
});
},
consule(){
let getSetInfo = uni.getStorageSync('getSetInfo');
if(getSetInfo.type == 1){
App.navigationTo({
url: 'pagesA/instantMessenger/instantMessenger?other_party_id=' + this.hitchDetails.mid + '&other_party_type=' + 1+ '&type=1'
})
}else{
App.navigationTo({
url: 'pages/subPages/homepage/chat/chat?other_party_id=' + this.hitchDetails.mid + '&other_party_type=' + 1+ '&type=1'
})
}
},
collect(){
App._post_form(
`&p=vehicle&do=collection`,
{id:this.id},
res => {
uni.showToast({
title:this.hitchDetails.is_collection == 0?'收藏成功':'取消收藏成功'
});
this.getHitchDetails(this.id);
},
false,
() => {}
);
},
submitReport(){
this.show = false;
App._post_form(
`&p=vehicle&do=report`,
{id:this.id,describe:this.describe},
res => {
uni.showToast({
title:res.message
});
this.describe = '';
},
false,
() => {}
);
},
getHitchDetails(id){
App._post_form(
`&p=vehicle&do=routeDesc`,
{id:id},
res => {
this.hitchDetails = res.data;
console.log(res);
},
false,
() => {}
);
},
report(){
this.show = true;
},
close(){
this.show = false;
}
}
}
</script>
<style lang="scss" scoped>
.hitchRideDetails{
padding-bottom: 200upx;
.disclaimer{
padding: 15upx 30upx;
background-color: #FDFBE6;
font-size: 24upx;
color: #FFA62E;
.text{
width: 630upx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 28upx;
}
}
.generalize{
margin: 30upx;
padding: 0 30upx;
background: #FFFFFF;
box-shadow: 0upx 8upx 24upx rgba(221, 221, 221, 0.5);
border-radius: 20upx;
}
.particulars{
padding: 30upx;
font-size: 28upx;
.particulars-box{
display: flex;
padding-bottom: 30upx;
.particulars-title{
width: 140upx;
color: #999999;
text-align: right;
}
.particulars-content{
flex: 1;
color: #333333;
.tags{
height: 40upx;
line-height: 40upx;
padding: 0 10upx;
background-color: #ff4444;
border-radius: 6upx;
color: #ffffff;
font-size: 24upx;
margin-right: 10upx;
margin-bottom: 10upx;
}
}
}
}
.remark{
padding: 0 30upx;
.remark-title{
padding: 30upx 0;
border-top: 8upx solid #f8f8f8;
}
}
.bottomMenu{
padding: 20upx 30upx;
background-color: #FFFFFF;
border: 1upx solid #EEEEEE;
image{
width: 34upx;
height: 40upx;
}
position: fixed;
left: 0;
bottom: 0;
width: 750upx;
box-sizing: border-box;
.consult{
display: inline-block;
width: 190upx;
height: 100upx;
line-height: 100upx;
text-align: center;
border-radius: 10upx;
border: 1upx solid #72AAFD;
color: #72AAFD;
font-size: 28upx;
font-weight: 700;
margin-right: 20upx;
}
.playCall{
display: inline-block;
width: 190upx;
height: 100upx;
line-height: 100upx;
text-align: center;
border-radius: 10upx;
background: linear-gradient(180deg, #6EA6FD 0%, #6094FD 100%);
color: #FFFFFF;
font-size: 28upx;
font-weight: 700;
}
}
.reportPop{
width: 630upx;
// height: 630upx;
padding: 50upx;
box-sizing: border-box;
border-radius: 30upx;
background-color: #FFFFFF;
.reportPop-title{
font-size: 36upx;
font-weight: 700;
color: #333333;
text-align: center;
}
.reportPop-content{
margin: 50upx 0;
padding: 30upx;
background-color: #F8F8F8;
/deep/ .uni-textarea-textarea{
width: 100%;
height: 300upx;
}
.textarea{
width: 100%;
}
}
.submit{
width: 520upx;
height: 80upx;
line-height: 80upx;
text-align: center;
color: #FFFFFF;
font-size: 28upx;
background: linear-gradient(180deg, #6EA6FD 0%, #6094FD 100%);
border-radius: 20upx;
}
}
.disclaimerPop{
width: 600upx;
height: 600upx;
border-radius: 20upx;
padding: 30upx;
background-color: #FFFFFF;
font-size: 30upx;
overflow: auto;
}
.line{
width: 1upx;
border-left: 1upx dashed #F9F9F9;
margin: auto;
height: 100upx;
}
.icons{
margin: auto;
text-align: center;
position: relative;
font-size: 40upx;
top: -10upx;
}
}
</style>