2186 lines
48 KiB
Plaintext
2186 lines
48 KiB
Plaintext
<template>
|
||
<view class="container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
|
||
<map id="map" :polyline="polyline" lang="en" :longitude="center.longitude" :latitude="center.latitude"
|
||
:scale="scale" :controls="controls" :markers="markers" @markertap="onMarkertap"
|
||
bindmarkertap="handleMarkerTap" show-location
|
||
:style="'width:' + windowWidth + 'px;' + 'height:'+ windowHeight+'px;' ">
|
||
<view class="x_kai" :style=" 'width:'+windowWidth*0.9+'px;margin-left:'+windowWidth*0.05">
|
||
<view class="l_kuo" border="none">
|
||
<u-search :actionStyle="actionStyle" bgColor="#fff" height="40"
|
||
placeholder="Search for surrounding position" @custom="getSound()" @search="getSound()"
|
||
actionText="search" v-model="searchName" :animation="true"></u-search>
|
||
</view>
|
||
</view>
|
||
</map>
|
||
<!-- type1 -->
|
||
<view class="introduce_" style="box-sizing: border-box;" v-if="type == 7">
|
||
<view class="end_tel">
|
||
<text class="p_1"> {{detailInfo.name || "Tag point name"}} </text>
|
||
|
||
</view>
|
||
<view class="introduce_close" @click="interactiveType(1)"> <u-icon name="close" color="#999999"
|
||
size="16"></u-icon></view>
|
||
<view class="end_tel">
|
||
|
||
<view class="end_ds">
|
||
<text class="p_2" style="margin-right: 10px;">{{detailInfo.distance || "1" }}KM</text>
|
||
<u-icon name="phone" color="#999999" size="14"></u-icon><text @click="callPhone(detailInfo.tel)"
|
||
class="p_5">{{(detailInfo.tel&&detailInfo.tel.length)?detailInfo.tel : "No contact information available" }}</text>
|
||
|
||
</view>
|
||
<view class="end_ds">
|
||
<image style="width: 50rpx; height: 50rpx; margin: 0px 10px; " @click="newCallCar()"
|
||
src="../../static/imgs/dcIcon.png" mode=""></image>
|
||
<image style="width: 50rpx; height: 50rpx; " @click="navigation()"
|
||
src="../../static/imgs/dhIcon.png" mode=""></image>
|
||
</view>
|
||
|
||
</view>
|
||
<view style="margin-top: 5px;">
|
||
<text class="p_4">
|
||
{{ detailInfo.address || "This is the detailed address for clicking on the details" }}
|
||
</text>
|
||
</view>
|
||
<view class="end_img">
|
||
<view class="size-box" :key="index">
|
||
<u-album :urls="detailInfo.photos" keyName="url"></u-album>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ceicon" @click="showDrawer('showLeft')">
|
||
<image src="../../static/imgs/ceicon.png" style="width: 68rpx; height: 68rpx; "></image>
|
||
</view>
|
||
<!-- 定位按钮 -->
|
||
<view class="poicon" @click="locatePos('showLeft')">
|
||
<image src="../../static/imgs/dw_.png" style="width: 68rpx; height: 68rpx; "></image>
|
||
</view>
|
||
<!-- type3 选择哪个类型的车 -->
|
||
<view class="bottom_pr" v-if="type == 3">
|
||
<view class="limitation_">
|
||
<view class="lr_box">
|
||
<view class="lr_box"> <text style="font-size: 14px;">distance:</text> <text class="lv_size"
|
||
style="margin-bottom: 2px;">{{Number(orderEstimateInfo.estimateDistance/1000 || 0).toFixed(2) }}
|
||
</text> <text style="font-size: 12px;">km</text> </view>
|
||
|
||
<view class="lr_box"><text style="font-size: 14px;">time: </text><text class="lv_size"
|
||
style="margin-bottom: 2px;">{{Math.ceil(orderEstimateInfo.estimateTime/60 || 0)}}</text>
|
||
<text style="font-size: 12px;">min</text>
|
||
</view>
|
||
|
||
</view>
|
||
<list class="item-list">
|
||
<cell :class="{ 'acv_lv' : index ==vehicleTypeIndex }"
|
||
v-for="(item, index) in orderEstimateInfo.prices" :key="index" class="list-item"
|
||
@click="selectModelCar(item,index)">
|
||
<view class="d_s">
|
||
<u-avatar v-if="index ==vehicleTypeIndex" slot="icon" shape="square" size="35"
|
||
src="../../static/imgs/carIcon_withe.png"
|
||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||
<u-avatar v-else slot="icon" shape="square" size="35" src="../../static/imgs/carIcon.png"
|
||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||
<text :class="{ 'acv_lv' : index ==vehicleTypeIndex }">{{item.vehicleTypeStr}}</text>
|
||
</view>
|
||
|
||
<view class="">
|
||
<text :class="{ 'acv_lv' : index ==vehicleTypeIndex }">
|
||
￥{{Number(item.estimatePrice/100 || 0).toFixed(2)}}</text>
|
||
|
||
</view>
|
||
</cell>
|
||
</list>
|
||
|
||
|
||
</view>
|
||
<view class="lr_box">
|
||
<view class="r_anniu" @click="cancelTakeCar()">
|
||
<text style="color: #fff;">
|
||
Cancel
|
||
</text>
|
||
</view>
|
||
<view class="l_anniu" @click="sendOrder()">
|
||
<text style="color: #fff;">
|
||
Select
|
||
</text>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- type5 -->
|
||
<view class="bottom_pr2" v-if="type == 5">
|
||
<view class="user_box" v-if="3<=orderInfo.rideStatus&&orderInfo.rideStatus<=7">
|
||
<view style="border-bottom: 1rpx solid #EEEEEE;margin-bottom: 20rpx;">
|
||
<view class="d_s" style="margin-bottom: 20rpx;">
|
||
<text class="driverSize3">Automatic deductions at the end of the trip</text>
|
||
|
||
</view>
|
||
<view v-if="orderInfo.totalAmount" class="d_s" style="margin-bottom: 20rpx;"><text class="driverSize4">Estimated Amount(Accumulating)</text>
|
||
<text class="driverSize5">￥{{orderInfo.totalAmount}}</text>
|
||
</view>
|
||
<view v-else class="d_s" style="margin-bottom: 20rpx;"><text class="driverSize4">Estimated Amount(Total)</text>
|
||
<text class="driverSize5">￥{{Number(orderInfo.estimatePrice/100 || 0).toFixed(2)}}</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="driver_box">
|
||
<view class="d_s">
|
||
<view class="centen_box">
|
||
<image class="touxiangs" src="../../static/imgs/sjsj.png" mode=""></image>
|
||
|
||
</view>
|
||
<view style="margin-bottom: 20rpx;">
|
||
<text class="driverSize1">{{orderInfo.carInfo.licensePlate}}</text>
|
||
<text class="driverSize6">{{orderInfo.driverInfo.name||''}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
<view class="driver_buttom" @click="getTel()">
|
||
<u-icon name="phone-fill" color="#32714F" size="18"></u-icon>
|
||
<text style="color: #32714F; font-size: 14px;"> Contact</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="img_box" v-if="3<=orderInfo.rideStatus&&orderInfo.rideStatus<=7">
|
||
<view class="anniu_hui" @click="cancelTakeCar()">
|
||
<text class="hui_size">Cancel</text>
|
||
</view>
|
||
</view>
|
||
<view class="" v-if="orderInfo.rideStatus == 1">
|
||
<view class="img_box">
|
||
<image src="/static/imgs/sjimg.png" mode="aspectFit" style='width: 700rpx;'></image>
|
||
</view>
|
||
<view class="img_box">
|
||
<image src="/static/imgs/loging.gif" style="width: 100rpx; height: 100rpx; "></image>
|
||
</view>
|
||
<view class="img_box">
|
||
<text class="hui_size1">Checking for drivers</text>
|
||
</view>
|
||
<view class="img_box" style="margin: 15px auto;">
|
||
<text class="hui_size2"> Please be patient and wait for the results</text>
|
||
</view>
|
||
<view class="img_box">
|
||
<view class="anniu_hui" @click="cancelTakeCar()">
|
||
<text class="hui_size">Cancel Request</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- type6 -->
|
||
<view class="bottom_dc" v-if="type == 1">
|
||
|
||
<view class="jtk_">
|
||
<view class="kkk_"></view>
|
||
</view>
|
||
<view class="dc_ds">
|
||
<view class="d_s" @click="gotoSearch('2')">
|
||
<view class="lv_qiu"></view>
|
||
<text class="lvl_size"> {{staInfo.name || 'current location or search' }} </text>
|
||
</view>
|
||
|
||
<u-icon v-if="staInfo.name" name="close-circle" color="#909399" size="18"
|
||
@click="removeInfo('staInfo')"></u-icon>
|
||
</view>
|
||
<view class="dc_huang">
|
||
<view class="d_s" @click="gotoSearch('3')">
|
||
<view class="h_qiu"></view>
|
||
<text class="h_size"> {{endInfo.name || 'Where do you want to go?'}} </text>
|
||
</view>
|
||
<u-icon v-if="endInfo.name" name="close-circle" color="#909399" size="18"
|
||
@click="removeInfo('endInfo')"></u-icon>
|
||
|
||
</view>
|
||
<view class="po_but">
|
||
|
||
<view class="b_an" @click="goMap()" :class="{'avc_':bindex == 0}">
|
||
<text :class="{'avc_':bindex == 0}">Walk</text>
|
||
</view>
|
||
<view class="b_an" @click="ifNearCard()" :class="{'avc_':bindex == 1}">
|
||
<text :class="{'avc_':bindex == 1}">Taxi</text>
|
||
|
||
</view>
|
||
<view class="b_an" @click="goBus()" :class="{'avc_':bindex == 2}">
|
||
<text :class="{'avc_':bindex == 2}">Bus</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="box_box">
|
||
|
||
</view>
|
||
</view>
|
||
<!-- 预留手机号弹窗 -->
|
||
<u-modal :show="phoneShow" :showCancelButton="true" confirmColor="#32714F" confirmText="confirm"
|
||
cancelText="cancel" @confirm="phoneConfirm" @cancel="phoneCancel">
|
||
<view class="slot-content">
|
||
<view class="img-centen">
|
||
<image src="../../static/imgs/phone.png" mode="aspectFit" style="width: 150px; height: 150px;">
|
||
</image>
|
||
</view>
|
||
<text class="slot-size" style="margin: 10px 0px;">Please reserve your contact information</text>
|
||
<u--input placeholder="Virtual phone number" border="surround" v-model="userPhone"></u--input>
|
||
|
||
</view>
|
||
</u-modal>
|
||
<!-- 充值弹窗 -->
|
||
<u-modal :show="rechargeShow" :showCancelButton="true" confirmColor="#32714F" confirmText="confirm"
|
||
cancelText="cancel" @confirm="rechargeConfirm" @cancel="rechargeCancel">
|
||
<view class="slot-content">
|
||
<view class="img-centen">
|
||
<image src="../../static/imgs/gth.png" mode="aspectFit" style="width: 150px; height: 150px;">
|
||
</image>
|
||
</view>
|
||
<text class="slot-size" style="margin: 10px 0px;">Insufficient balance, please recharge
|
||
immediately</text>
|
||
</view>
|
||
</u-modal>
|
||
<!-- 抽屉 -->
|
||
<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
|
||
<view class="close">
|
||
<view class="left_box">
|
||
<image class="touxiang" :src="baseUrl + userInfo.avatar" mode="" v-if="userInfo.avatar"></image>
|
||
<image class="touxiang" src="http://47.94.122.58:83/userPhoto.png" mode="" v-else></image>
|
||
<view class="">
|
||
<text
|
||
style="font-size: 20px; color: #fff;margin: 15px 0px; margin-bottom: 5px;">{{userInfo.userName || 'Name'}}</text>
|
||
</view>
|
||
<view class="">
|
||
<text style="font-size: 12px; color: #fff;">{{userInfo.email || 'email'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="d-s">
|
||
<view class="">
|
||
<image class="l_icon" src="../../static/imgs/home.png" mode=""></image>
|
||
</view>
|
||
|
||
<view class="">
|
||
<text class="text_">Home</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="d-s" @click="goMe(1)">
|
||
<view class="">
|
||
<image class="l_icon" src="../../static/imgs/me1.png" mode=""></image>
|
||
</view>
|
||
|
||
<view class="">
|
||
<text class="text_">My Wallet</text>
|
||
</view>
|
||
</view>
|
||
<view class="d-s" @click="goMe(2)">
|
||
<view class="">
|
||
<image class="l_icon" src="../../static/imgs/me2.png" mode=""></image>
|
||
</view>
|
||
|
||
<view class="">
|
||
<text class="text_">History</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="d-s" @click="goMe(3)">
|
||
<view class="">
|
||
<image class="l_icon" src="../../static/imgs/me3.png" mode=""></image>
|
||
</view>
|
||
|
||
<view class="">
|
||
<text class="text_">Settings</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="d-s" @click="goMe(4)">
|
||
<view class="">
|
||
<image class="l_icon" src="../../static/imgs/me4.png" mode=""></image>
|
||
</view>
|
||
|
||
<view class="">
|
||
<text class="text_">Log out</text>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</uni-drawer>
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import headers from '../../components/header/headers.vue'
|
||
import tabbar from '../../components/tabbar/tabbar.vue'
|
||
import {
|
||
getToken
|
||
} from '@/utils/auth'
|
||
import config from '@/config'
|
||
import request from '../../utils/request'
|
||
export default {
|
||
data() {
|
||
return {
|
||
dcType: '',
|
||
driverStatus: "",
|
||
placeholderStyle: {
|
||
color: '#FFA629',
|
||
fontSize: '16px'
|
||
},
|
||
//点击回显数据
|
||
detailInfo: {
|
||
name: null,
|
||
address: null,
|
||
latitude: null,
|
||
longitude: null,
|
||
distance: null,
|
||
tel: '111111',
|
||
photos: []
|
||
},
|
||
actionStyle: {
|
||
width: '50px'
|
||
},
|
||
_mapContext: null,
|
||
platformOrderNo: '',
|
||
tripartiteOrderId: '',
|
||
selectCar: {},
|
||
vehicleTypeIndex: null,
|
||
driverInfo: '',
|
||
values: '',
|
||
type: 1,
|
||
wallet: '',
|
||
bindex: 0,
|
||
scale: 16,
|
||
inputValue: '',
|
||
info: {},
|
||
startPoint: [],
|
||
showLeft: false,
|
||
is_focus: false,
|
||
showLeft: true,
|
||
userInfo: {},
|
||
baseUrl: config.imagesUrl,
|
||
titles: "首页",
|
||
msg: "1",
|
||
controls: [],
|
||
carTypeTime: 0,
|
||
carTypeDistance: 0,
|
||
center: {
|
||
latitude: null,
|
||
longitude: null
|
||
},
|
||
markers: [],
|
||
userPhone: uni.getStorageSync('userPhone'),
|
||
driverShow: false,
|
||
paymentShow: false,
|
||
phoneShow: false,
|
||
rechargeShow: false,
|
||
show: false,
|
||
estimatePrice:0,
|
||
status: 'loading',
|
||
startX: 0, // 触摸开始的X坐标
|
||
endX: 0, // 触摸结束的X坐标
|
||
threshold: 50, // 滑动多少距离后显示删除按钮
|
||
carTypeEstimatePrice: 0,
|
||
staInfo: {},
|
||
endInfo: {},
|
||
//打车预估路线
|
||
polyline: [],
|
||
//预计费用信息
|
||
orderEstimateInfo: {},
|
||
searchName: null,
|
||
orderInfo: {},
|
||
timer: null
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.getLatLon()
|
||
console.log(getToken());
|
||
this.timer = setInterval(() => {
|
||
this.getOrderInfo()
|
||
}, 5000);
|
||
|
||
},
|
||
onShow() {
|
||
uni.hideLoading();
|
||
this.mapInit()
|
||
this.watchData()
|
||
this.getBaseInfo()
|
||
this.getOrderInfo()
|
||
//移除缓存
|
||
// uni.removeStorageSync('isFirst')
|
||
},
|
||
created() {
|
||
uni.setLocale("en")
|
||
},
|
||
onPullDownRefresh() {
|
||
console.log("刷新");
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
computed: {
|
||
windowHeight() {
|
||
return uni.getSystemInfoSync().windowHeight;
|
||
},
|
||
windowWidth() {
|
||
return uni.getSystemInfoSync().windowWidth;
|
||
}
|
||
|
||
},
|
||
components: {
|
||
headers,
|
||
tabbar
|
||
},
|
||
methods: {
|
||
//判断使用什么打车
|
||
async getDcType() {
|
||
console.log(430);
|
||
console.log('此时的 staInfo.location:', this.staInfo.location);
|
||
|
||
try {
|
||
let latitude, longitude;
|
||
|
||
if (Array.isArray(this.staInfo.location)) {
|
||
// 如果 location 是数组，转为字符串格式 "longitude,latitude"
|
||
[longitude, latitude] = this.staInfo.location;
|
||
this.staInfo.location = `${longitude},${latitude}`; // 更新为字符串格式
|
||
} else if (typeof this.staInfo.location === 'string') {
|
||
// 如果 location 已经是字符串，直接使用
|
||
[longitude, latitude] = this.staInfo.location.split(',');
|
||
} else {
|
||
throw new Error(`staInfo.location 类型未知: ${this.staInfo.location}`);
|
||
}
|
||
|
||
// console.log(`解析后的经度: ${longitude}, 解析后的纬度: ${latitude}`);
|
||
// console.log(`修正后的 location: ${this.staInfo.location}`);
|
||
|
||
let res = await request({
|
||
url: 'takeTaxi/getDcType',
|
||
method: 'post',
|
||
data: { latitude, longitude }
|
||
});
|
||
|
||
// console.log('请求成功:', res);
|
||
// console.log("判断使用什么打车", res);
|
||
|
||
this.dcType = res.data;
|
||
} catch (error) {
|
||
console.error('请求失败:', error);
|
||
}
|
||
}
|
||
,
|
||
|
||
newCallCar(){
|
||
console.log('叫车')
|
||
this.staInfo = {}
|
||
this.endInfo.name = this.detailInfo.name
|
||
this.endInfo.cnName = this.detailInfo.cnName
|
||
this.endInfo.location = this.detailInfo.longitude + ',' + this.detailInfo.latitude
|
||
this.ifNearCard()
|
||
},
|
||
|
||
navigation() {
|
||
console.log('步行导航');
|
||
this.staInfo = {}
|
||
this.endInfo.location = this.detailInfo.longitude + ',' + this.detailInfo.latitude
|
||
this.goMap()
|
||
},
|
||
callPhone(phone) {
|
||
console.log(phone);
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone //仅为示例
|
||
});
|
||
|
||
},
|
||
onMarkertap(data) {
|
||
uni.showLoading({
|
||
title: 'Loading...'
|
||
});
|
||
let dataId = data.detail.markerId
|
||
let tempData = this.markers.find(item => item.id == dataId)
|
||
console.log(tempData, 593);
|
||
this.detailInfo = {
|
||
name: tempData.label.content,
|
||
address: tempData.address,
|
||
latitude: tempData.latitude,
|
||
longitude: tempData.longitude,
|
||
distance: tempData.distance,
|
||
tel: tempData.tel,
|
||
photos: tempData.photos,
|
||
cnName:tempData.cnName
|
||
}
|
||
this.type = 7
|
||
uni.hideLoading();
|
||
},
|
||
tapTel() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.detailInfo.tel //仅为示例
|
||
});
|
||
},
|
||
//1 获取附近空车
|
||
async ifNearCard() {
|
||
console.log(491,'开始轿车');
|
||
this.bindex= 1
|
||
if (!this.endInfo.location) {
|
||
uni.showToast({
|
||
title: 'Please select destination',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.vehicleTypeIndex=null
|
||
|
||
if (!this.staInfo || !this.staInfo.location) {
|
||
console.log(2);
|
||
let that = this
|
||
uni.getLocation({
|
||
// 谷歌使用wgs84 其他使用gcj02
|
||
type: 'gcj02', // 使用国测局坐标系
|
||
geocode: true,
|
||
success: function(res) {
|
||
|
||
request({
|
||
url: 'takeTaxi/translator?chinese='+res.address.poiName,
|
||
method: 'post'
|
||
}).then(ress=>{
|
||
console.log(ress.data.translation,502);
|
||
that.staInfo = {}
|
||
that.staInfo.location = [res.longitude, res.latitude].join(',')
|
||
that.staInfo.name = ress.data.translation
|
||
that.staInfo.cnName = res.address.poiName
|
||
//获取附近车辆信息回显地图
|
||
that.getNearCard()
|
||
})
|
||
|
||
},
|
||
fail: function(err) {
|
||
uni.showToast({
|
||
title: 'Failed to get location',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
|
||
} else {
|
||
console.log(513);
|
||
//获取附近车辆信息回显地图
|
||
this.getNearCard()
|
||
|
||
}
|
||
},
|
||
//获取附近车辆
|
||
async getNearCard() {
|
||
console.log(523);
|
||
let _this = this
|
||
await this.getDcType()
|
||
//获取车辆价格和可选车型
|
||
this.getOrderEstimate()
|
||
// 写死南京经纬度 用于测试
|
||
request({
|
||
url: 'takeTaxi/getNearCard',
|
||
method: 'post',
|
||
data: {
|
||
latitude: _this.staInfo.location.split(',')[1],
|
||
longitude: _this.staInfo.location.split(',')[0],
|
||
platform: _this.dcType
|
||
}
|
||
}).then(res => {
|
||
_this.markers = res.data
|
||
_this.center.latitude = _this.staInfo.location.split(',')[1]
|
||
_this.center.longitude = _this.staInfo.location.split(',')[0]
|
||
}).finally(() => {
|
||
|
||
})
|
||
|
||
},
|
||
//2 预估费用 data为模拟数据
|
||
getOrderEstimate() {
|
||
console.log(551,'第一步')
|
||
uni.showLoading({
|
||
title: 'Loading...'
|
||
});
|
||
let that = this
|
||
console.log(551);
|
||
request({
|
||
url: 'takeTaxi/getOrderEstimate',
|
||
method: 'post',
|
||
data: {
|
||
startLocationLng: this.staInfo.location.split(',')[0],
|
||
startLocationLat: this.staInfo.location.split(',')[1],
|
||
endLocationLng: this.endInfo.location.split(',')[0],
|
||
endLocationLat: this.endInfo.location.split(',')[1],
|
||
platform: this.dcType,
|
||
|
||
}
|
||
}).then(res => {
|
||
console.log(565,res);
|
||
if(!res.data){
|
||
uni.showToast({
|
||
title:"There are no suitable vehicles at the current location",
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
//polyline
|
||
that.orderEstimateInfo = {
|
||
platform: res.data.platform,
|
||
estimateDistance: res.data.estimateDistance,
|
||
estimateTime: res.data.estimateTime,
|
||
prices: res.data.prices
|
||
}
|
||
console.log(574);
|
||
//路线规划
|
||
that.polyline = []
|
||
let item = {}
|
||
item.color = '#00aa00'
|
||
item.points = res.data.polyline
|
||
item.width = 11
|
||
item.arrowLine = true
|
||
that.polyline.push(item)
|
||
//消除历史标记
|
||
let markIds =[]
|
||
for (let item of that.markers) {
|
||
markIds.push(item.id)
|
||
}
|
||
that._mapContext.removeMarkers({
|
||
markerIds:markIds
|
||
})
|
||
let marksLength = that.markers.length
|
||
let markers = JSON.parse(JSON.stringify(that.markers))
|
||
that.markers = []
|
||
markers.push({
|
||
id: marksLength + 1,
|
||
iconPath: config.startIcon,
|
||
latitude: that.staInfo.location.split(',')[1],
|
||
longitude: that.staInfo.location.split(',')[0],
|
||
width: 38,
|
||
height: 38,
|
||
})
|
||
markers.push({
|
||
id: marksLength + 2,
|
||
iconPath: config.markIcon,
|
||
latitude: that.endInfo.location.split(',')[1],
|
||
longitude: that.endInfo.location.split(',')[0],
|
||
width: 38,
|
||
height: 38,
|
||
})
|
||
that.markers = markers
|
||
that._mapContext.addMarkers({
|
||
markers,
|
||
clear: true,
|
||
complete(res) {}
|
||
})
|
||
this.$forceUpdate()
|
||
console.log(608);
|
||
that.type = 3
|
||
}).finally(() => {
|
||
uni.hideLoading();
|
||
})
|
||
|
||
},
|
||
async translator(chinese){
|
||
let res = await request({
|
||
url: 'takeTaxi/translator?chinese='+chinese,
|
||
method: 'post'
|
||
})
|
||
return res.data
|
||
},
|
||
|
||
async cancelTakeCar() {
|
||
console.log(638);
|
||
//消除历史标记
|
||
this.markers=[]
|
||
const markers = []
|
||
this._mapContext.addMarkers({
|
||
markers,
|
||
clear: true,
|
||
complete(res) {}
|
||
})
|
||
this.polyline =[]
|
||
this.$forceUpdate()
|
||
if (!this.orderInfo.platformOrderNo) {
|
||
this.type = 1
|
||
return
|
||
}
|
||
|
||
//取消打车
|
||
let res = await request({
|
||
url: 'takeTaxi/getQueryCancel',
|
||
method: 'post',
|
||
data: {
|
||
platformOrderNo: this.orderInfo.platformOrderNo
|
||
}
|
||
})
|
||
if (res.data) {
|
||
console.log("取消打车",res.data);
|
||
let content = "";
|
||
if (!res.data.cancelFee || res.data.cancelFee == 0) {
|
||
content = "Free cancellation please confirm"
|
||
} else {
|
||
content =
|
||
`Cancellation of the order requires a deduction of ${Number(res.data.cancelFee/100 || 0).toFixed(2)}yuan`
|
||
}
|
||
let that = this
|
||
//弹出取消确认框
|
||
uni.showModal({
|
||
title: 'Confirm cancel？',
|
||
content: content,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
request({
|
||
url: 'takeTaxi/takeOrderCancel',
|
||
method: 'post',
|
||
data: {
|
||
platformOrderNo: that.orderInfo.platformOrderNo
|
||
}
|
||
}).then(ress => {
|
||
that.type = 1
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
},
|
||
//发送订单
|
||
async sendOrder() {
|
||
|
||
if (this.vehicleTypeIndex == null) {
|
||
uni.showToast({
|
||
title: "Please select the vehicle type first",
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
await this.getBaseInfo()
|
||
if (this.userInfo.wallet < (this.selectCar.estimatePrice / 100)*1.2) {
|
||
//余额不足
|
||
this.rechargeShow = true
|
||
return
|
||
}
|
||
this.phoneShow = true
|
||
},
|
||
//选择想要乘坐的车型
|
||
selectModelCar(item, index) {
|
||
console.log(689);
|
||
// 选择的车辆类型
|
||
this.estimatePrice = item.estimatePrice
|
||
this.selectCar = item
|
||
this.vehicleTypeIndex = index
|
||
},
|
||
orderCreate() {
|
||
uni.showLoading({
|
||
title: 'Loading...'
|
||
});
|
||
let that = this
|
||
request({
|
||
url: 'takeTaxi/createOrder',
|
||
method: 'post',
|
||
data: {
|
||
platform: that.dcType,
|
||
startLocationLng: that.staInfo.location.split(',')[0],
|
||
startLocationLat: that.staInfo.location.split(',')[1],
|
||
startName: that.staInfo.cnName,
|
||
startNameEN: that.staInfo.name,
|
||
endLocationLng: that.endInfo.location.split(',')[0],
|
||
endLocationLat: that.endInfo.location.split(',')[1],
|
||
endName: that.endInfo.cnName,
|
||
endNameEN: that.endInfo.name,
|
||
|
||
//实时订单
|
||
typeTime: 1,
|
||
vehicleType: that.selectCar.vehicleType,
|
||
estimateFlag: that.selectCar.estimateFlag,
|
||
estimatePrice: that.selectCar.estimatePrice,
|
||
passengerPhone: that.userPhone
|
||
}
|
||
}).then(res => {
|
||
console.log('创建订单', res.data);
|
||
let info = res.data
|
||
if (res) {
|
||
|
||
// 创建订单后需要持续获取司机信息
|
||
this.platformOrderNo = info.platformOrderNo
|
||
this.tripartiteOrderId = info.tripartiteOrderId
|
||
this.getOrderInfo()
|
||
}
|
||
}).finally(() => {
|
||
uni.hideLoading();
|
||
})
|
||
},
|
||
//获取订单信息
|
||
async getOrderInfo() {
|
||
|
||
let res = await request({
|
||
url: 'takeTaxi/getOrderInfo',
|
||
method: 'post',
|
||
data: {
|
||
platformOrderNo: this.platformOrderNo,
|
||
|
||
}
|
||
})
|
||
this.orderInfo = res.data
|
||
if (!res.data.carInfo) {
|
||
this.orderInfo.carInfo = {}
|
||
}
|
||
if (!res.data.driverInfo) {
|
||
this.orderInfo.driverInfo = {}
|
||
}
|
||
|
||
if (res.data.tripartiteOrderId) {
|
||
this.type = 5
|
||
} else {
|
||
if (this.type == 5)
|
||
this.type = 1
|
||
}
|
||
if (res.data.driverLat && res.data.driverLng) {
|
||
this.markers = []
|
||
//顶部搜索回调
|
||
this.markers.push({
|
||
id: 1,
|
||
iconPath: config.taxiIcon,
|
||
latitude: res.data.driverLat,
|
||
longitude: res.data.driverLng,
|
||
width: 38,
|
||
height: 38,
|
||
})
|
||
const markers = this.markers
|
||
|
||
this._mapContext.addMarkers({
|
||
markers,
|
||
clear: true,
|
||
complete(res) {}
|
||
})
|
||
this.$forceUpdate()
|
||
}
|
||
},
|
||
// 预留
|
||
phoneConfirm() {
|
||
this.phoneShow = false
|
||
uni.setStorageSync('userPhone', this.userPhone)
|
||
this.orderCreate()
|
||
},
|
||
// 不预留
|
||
phoneCancel() {
|
||
this.phoneShow = false
|
||
},
|
||
// 去充值
|
||
rechargeConfirm() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/MyWallet'
|
||
})
|
||
},
|
||
// 不去充值
|
||
rechargeCancel() {
|
||
this.rechargeShow = false
|
||
},
|
||
mapInit() {
|
||
this.$nextTick(() => {
|
||
this._mapContext = uni.createMapContext("map", this);
|
||
this.toLocation()
|
||
})
|
||
},
|
||
watchData() {
|
||
let that = this
|
||
uni.$once('updatePosition', function(res) {
|
||
console.log(res.data);
|
||
if (res.type == '1') {
|
||
//顶部搜索回调
|
||
that.updateMark(res.data)
|
||
} else if (res.type == '2') {
|
||
//起点位置回调
|
||
that.updateStartPos(res.data)
|
||
} else if (res.type == '3') {
|
||
//终点位置回调
|
||
that.updateEndPos(res.data)
|
||
}
|
||
})
|
||
},
|
||
updateMark(data) {
|
||
let that = this
|
||
this.searchName = data.searchName || data.name
|
||
this.markers = []
|
||
//顶部搜索回调
|
||
this.markers.push({
|
||
id: 1,
|
||
iconPath: config.markIcon,
|
||
latitude: data.location.split(',')[1],
|
||
longitude: data.location.split(',')[0],
|
||
width: 38,
|
||
height: 38,
|
||
})
|
||
const markers = this.markers
|
||
this._mapContext.addMarkers({
|
||
markers,
|
||
clear: true,
|
||
complete(res) {}
|
||
})
|
||
this.center.latitude = data.location.split(',')[1]
|
||
this.center.longitude = data.location.split(',')[0]
|
||
this.toLocation()
|
||
this.$forceUpdate()
|
||
//地图点击事件 将位置信息传到上面的markerClick函数中
|
||
|
||
|
||
},
|
||
updateMarks(datas) {
|
||
let that = this
|
||
this.markers = []
|
||
//顶部搜索回调
|
||
datas.forEach(item => {
|
||
let markIcon = config.markIcon
|
||
|
||
that.markers.push({
|
||
id: item.id,
|
||
label: {
|
||
content: item.name
|
||
},
|
||
cnName:item.cnName,
|
||
iconPath: markIcon,
|
||
latitude: item.location.split(',')[1],
|
||
longitude: item.location.split(',')[0],
|
||
width: 38,
|
||
height: 38,
|
||
address: item.address,
|
||
distance: item.distance ? item.distance / 1000 : 0,
|
||
tel: item.tel,
|
||
photos: item.photos
|
||
})
|
||
})
|
||
console.log(that.markers, 1046);
|
||
const markers = this.markers
|
||
this._mapContext.addMarkers({
|
||
markers,
|
||
clear: true,
|
||
complete(res) {}
|
||
})
|
||
console.log("markers数组：", this.markers);
|
||
|
||
this.$forceUpdate()
|
||
|
||
},
|
||
// 回到原位，恢复默认缩放
|
||
toLocation() {
|
||
console.log(this.center, 1201);
|
||
this._mapContext.moveToLocation({
|
||
longitude: this.center.longitude,
|
||
latitude: this.center.latitude
|
||
});
|
||
},
|
||
updateStartPos(data) {
|
||
this.staInfo = data
|
||
},
|
||
updateEndPos(data) {
|
||
this.endInfo = data
|
||
console.log(this.endInfo);
|
||
},
|
||
removeInfo(size) {
|
||
uni.removeStorageSync('updatePosition')
|
||
if (size == 'staInfo') {
|
||
this.staInfo = {}
|
||
} else if (size == 'endInfo') {
|
||
this.endInfo = {}
|
||
} else if (size == 'search') {
|
||
this.searchName = null
|
||
}
|
||
|
||
},
|
||
errorcick() {
|
||
uni.navigateTo({
|
||
url: '/pages/Chat/chat'
|
||
})
|
||
},
|
||
inputConfirm(data) {
|
||
let _this = this;
|
||
// console.log(data);
|
||
request({
|
||
url: 'system/records/getlocationSimple1',
|
||
method: 'post',
|
||
data: data
|
||
}).then(res => {
|
||
console.log(res);
|
||
_this.markers = JSON.parse(res.msg)
|
||
console.log(res.msg, '123456789');
|
||
})
|
||
},
|
||
gotoSearch(type) {
|
||
console.log(type, 513);
|
||
uni.navigateTo({
|
||
url: '/pages/index/search?type=' + type
|
||
})
|
||
},
|
||
getSound() {
|
||
|
||
let that = this
|
||
uni.getLocation({
|
||
// 谷歌使用wgs84 其他使用gcj02
|
||
type: 'gcj02', // 使用国测局坐标系
|
||
geocode: true,
|
||
success: function(res) {
|
||
uni.showLoading({
|
||
title: 'Loading...'
|
||
});
|
||
request({
|
||
url: 'system/records/roundSearch?searchName=' + that.searchName +
|
||
"&longitude=" + res.longitude + "&latitude=" + res.latitude,
|
||
method: 'get',
|
||
}).then(res => {
|
||
console.log('1119', res);
|
||
|
||
const data = res.data
|
||
|
||
if (data && data.length > 1) {
|
||
that.updateMarks(data)
|
||
that.center.latitude = data[0].location.split(',')[1]
|
||
that.center.longitude = data[0].location.split(',')[0]
|
||
that.toLocation()
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: "Sorry, we couldn't find anything related to it in the search!",
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
}).finally(() => {
|
||
uni.hideLoading();
|
||
})
|
||
},
|
||
fail: function(err) {
|
||
uni.showToast({
|
||
title: 'Failed to get location',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
|
||
touchStart(event) {
|
||
this.startX = event.touches[0].clientX;
|
||
|
||
},
|
||
touchMove(event) {
|
||
this.endX = event.touches[0].clientX;
|
||
|
||
},
|
||
touchEnd(event) {
|
||
|
||
if (this.endX - this.startX > this.threshold) {
|
||
|
||
} else {
|
||
if (this.endX - this.startX > this.threshold) {} else {
|
||
this.showDelete = false;
|
||
}
|
||
}
|
||
},
|
||
goMap() {
|
||
this.bindex= 0
|
||
if (!this.endInfo.location) {
|
||
uni.showToast({
|
||
title: 'Please select destination',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
let that = this
|
||
uni.getLocation({
|
||
// 谷歌使用wgs84 其他使用gcj02
|
||
type: 'gcj02', // 使用国测局坐标系
|
||
geocode: true,
|
||
success: function(res) {
|
||
console.log(res, 863);
|
||
that.staInfo = {}
|
||
that.staInfo.location = [res.longitude, res.latitude]
|
||
console.log(that.staInfo.location, 866);
|
||
|
||
uni.navigateTo({
|
||
url: '/pages/index/PedestrianNavigation?startPoint=' + that.staInfo
|
||
.location +
|
||
'&endPoint=' + that.endInfo.location
|
||
})
|
||
},
|
||
fail: function(err) {
|
||
uni.showToast({
|
||
title: 'Failed to get location',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
|
||
|
||
},
|
||
goBus(){
|
||
this.bindex= 2
|
||
if (!this.endInfo.location) {
|
||
uni.showToast({
|
||
title: 'Please select destination',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (!this.staInfo || !this.staInfo.location) {
|
||
let that = this
|
||
uni.getLocation({
|
||
// 谷歌使用wgs84 其他使用gcj02
|
||
type: 'gcj02', // 使用国测局坐标系
|
||
geocode: true,
|
||
success: function(res) {
|
||
that.staInfo = {}
|
||
that.staInfo.location = [res.longitude, res.latitude]
|
||
uni.navigateTo({
|
||
url: '/pages/busNavigation/busNavigation?startPoint=' + that.staInfo
|
||
.location +
|
||
'&endPoint=' + that.endInfo.location
|
||
})
|
||
},
|
||
fail: function(err) {
|
||
uni.showToast({
|
||
title: 'Failed to get location',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
|
||
} else {
|
||
let that = this
|
||
uni.navigateTo({
|
||
url: '/pages/busNavigation/busNavigation?startPoint=' + that.staInfo
|
||
.location +
|
||
'&endPoint=' + that.endInfo.location
|
||
})
|
||
|
||
}
|
||
|
||
|
||
|
||
},
|
||
getTel() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.orderInfo.driverInfo.phone //仅为示例
|
||
});
|
||
},
|
||
noMap() {
|
||
uni.showToast({
|
||
title: "Sorry, it's still under development and maintenance",
|
||
icon: 'none'
|
||
})
|
||
},
|
||
bindLogin() {
|
||
uni.navigateTo({
|
||
url: '/pages/index/newMap'
|
||
})
|
||
},
|
||
// 获取自身余额
|
||
async getBaseInfo() {
|
||
|
||
let res = await request({
|
||
url: 'system/user/getUserBaseInfo',
|
||
method: 'get',
|
||
|
||
})
|
||
if (res.code == 200) {
|
||
this.userInfo = res.data
|
||
console.log(this.userInfo.wallet, "获取自身余额");
|
||
uni.setStorageSync('user_info', res.data);
|
||
}
|
||
},
|
||
interactiveType(num) {
|
||
this.type = num
|
||
if (num == 0) {
|
||
uni.showToast({
|
||
title: "Sorry, it is currently in the development stage",
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
showDrawer(e) {
|
||
this.$refs[e].open()
|
||
},
|
||
locatePos(data) {
|
||
this.getLatLon()
|
||
},
|
||
change(e, type) {
|
||
console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
|
||
this[type] = e
|
||
},
|
||
closeDrawer(e) {
|
||
this.$refs[e].close()
|
||
},
|
||
goMe(num) {
|
||
if (num == 5) {
|
||
uni.navigateTo({
|
||
url: '/pages/my/my'
|
||
})
|
||
}
|
||
if (num == 1) {
|
||
uni.navigateTo({
|
||
url: '/pages/my/MyWallet'
|
||
})
|
||
}
|
||
if (num == 2) {
|
||
uni.navigateTo({
|
||
url: '/pages/my/History'
|
||
})
|
||
}
|
||
if (num == 3) {
|
||
uni.navigateTo({
|
||
url: '/pages/my/Settings'
|
||
})
|
||
}
|
||
if (num == 4) {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login'
|
||
})
|
||
}
|
||
},
|
||
goqb() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/MyWallet'
|
||
})
|
||
},
|
||
interactiveType(num) {
|
||
this.type = num
|
||
if (num == 0) {
|
||
uni.showToast({
|
||
title: "Sorry, it is currently in the development stage",
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
getLatLon() {
|
||
let _this = this;
|
||
uni.getLocation({
|
||
// 谷歌使用wgs84 其他使用gcj02
|
||
type: 'gcj02', // 使用国测局坐标系
|
||
geocode: true,
|
||
success: function(res) {
|
||
_this.center.longitude = res.longitude
|
||
_this.center.latitude = res.latitude
|
||
},
|
||
fail: function(err) {
|
||
console.log('获取位置信息失败: ' + err.errMsg);
|
||
uni.setStorageSync("isGetAddress", false)
|
||
}
|
||
});
|
||
},
|
||
showDrawer(e) {
|
||
this.$refs[e].open()
|
||
console.log(e, 138);
|
||
},
|
||
change(e, type) {
|
||
console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
|
||
this[type] = e
|
||
},
|
||
goback() {
|
||
uni.navigateBack()
|
||
}
|
||
},
|
||
onNavigationBarButtonTap(e) {
|
||
if (this.showLeft) {
|
||
this.$refs.showLeft.close()
|
||
} else {
|
||
this.$refs.showLeft.open()
|
||
}
|
||
},
|
||
// app端拦截返回事件 ，仅app端生效
|
||
onBackPress() {
|
||
if (this.showRight || this.showLeft) {
|
||
this.$refs.showLeft.close()
|
||
this.$refs.showRight.close()
|
||
return true
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
width: 750rpx;
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
|
||
.p_input {
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.introduce_ {
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
width: 690rpx;
|
||
background: #fff;
|
||
|
||
left: 30rpx;
|
||
padding: 10px;
|
||
border-radius: 8px;
|
||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
|
||
// transform: translateX(-375rpx);
|
||
}
|
||
|
||
.introduce_close {
|
||
position: absolute;
|
||
top: 10rpx;
|
||
right: 10rpx;
|
||
|
||
}
|
||
|
||
.bottom_time {
|
||
position: absolute;
|
||
bottom: 180rpx;
|
||
width: 690rpx;
|
||
background: #fff;
|
||
left: 30rpx;
|
||
padding: 15px 10px;
|
||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.souicon {
|
||
position: absolute;
|
||
top: 260rpx;
|
||
right: 30rpx;
|
||
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.ceicon {
|
||
position: absolute;
|
||
top: 340rpx;
|
||
right: 20rpx;
|
||
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.poicon {
|
||
position: absolute;
|
||
top: 640rpx;
|
||
right: 20rpx;
|
||
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.po_but {
|
||
width: 750rpx;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
box-sizing: border-box;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.bottom_po {
|
||
position: absolute;
|
||
bottom: 134rpx;
|
||
width: 750rpx;
|
||
background: #fff;
|
||
// box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 18px 18px 0px 0px;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
box-sizing: border-box;
|
||
padding: 30rpx;
|
||
|
||
}
|
||
|
||
.bottom_pr {
|
||
min-height: 160rpx;
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
width: 750rpx;
|
||
background: #fff;
|
||
box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 18px 18px 0px 0px;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.bottom_pr2 {
|
||
min-height: 160rpx;
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
width: 750rpx;
|
||
background: #fff;
|
||
box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 18px 18px 0px 0px;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
|
||
}
|
||
|
||
.bottom_dc {
|
||
min-height: 160rpx;
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
width: 750rpx;
|
||
background: #fff;
|
||
box-shadow: 1px -1px 1px 0px rgba(126, 126, 126, 0.1);
|
||
border-radius: 32px 32px 0px 0px;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.i_anniu {
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
width: 690rpx;
|
||
background: #32714F;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
border-radius: 4px;
|
||
margin-top: 15px;
|
||
|
||
}
|
||
|
||
.l_anniu {
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
width: 320rpx;
|
||
background: #32714F;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
border-radius: 4px;
|
||
margin-top: 15px;
|
||
|
||
}
|
||
|
||
.r_anniu {
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
width: 320rpx;
|
||
background: #c8070b;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
border-radius: 4px;
|
||
margin-top: 15px;
|
||
|
||
}
|
||
|
||
.h_anniu {
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
width: 690rpx;
|
||
background: #f00000;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
border-radius: 4px;
|
||
margin-top: 20px;
|
||
|
||
}
|
||
|
||
.dc_ds {
|
||
margin-left: 30rpx;
|
||
// margin: 30rpx auto;
|
||
width: 690rpx;
|
||
margin: 30rpx;
|
||
box-sizing: border-box;
|
||
padding: 0rpx 30rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.d_s {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.box_box {
|
||
margin-left: 30rpx;
|
||
|
||
width: 690rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
}
|
||
|
||
.dc_icon {
|
||
|
||
background: #FFFFFF;
|
||
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 6px 6px 6px 6px;
|
||
box-sizing: border-box;
|
||
padding: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.dw_size {
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
color: #333333;
|
||
}
|
||
|
||
.jtk_ {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.kkk_ {
|
||
width: 60px;
|
||
height: 6px;
|
||
background: #DDDDDD;
|
||
border-radius: 3px 3px 3px 3px;
|
||
margin: 10rpx auto;
|
||
}
|
||
|
||
.Walk_buttom {
|
||
background: #2e6748;
|
||
width: 690rpx;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 20rpx;
|
||
margin-left: 30rpx;
|
||
border-radius: 6px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.dc_huang {
|
||
border: 2px solid #FFA629;
|
||
width: 690rpx;
|
||
margin: 30rpx;
|
||
box-sizing: border-box;
|
||
padding: 30rpx;
|
||
border-radius: 6px;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
margin-left: 30rpx;
|
||
|
||
input {
|
||
width: 600rpx;
|
||
font-size: 16px;
|
||
color: #FFA629 !important;
|
||
|
||
}
|
||
}
|
||
|
||
.lvl_size {
|
||
width: 550rpx;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #32714F;
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
/* break-all(允许在单词内换行。) */
|
||
text-overflow: ellipsis;
|
||
/* 超出部分省略号 */
|
||
display: -webkit-box;
|
||
/** 对象作为伸缩盒子模型显示 **/
|
||
-webkit-box-orient: vertical;
|
||
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
||
-webkit-line-clamp: 1;
|
||
/** 显示的行数 **/
|
||
lines: 1; //NVUE下要用这个属性，来让文字超出隐藏变省略号
|
||
}
|
||
|
||
.h_size1 {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
text-overflow: ellipsis;
|
||
lines: 1,
|
||
|
||
}
|
||
|
||
.h_size {
|
||
width: 550rpx;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #FFA629;
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
/* break-all(允许在单词内换行。) */
|
||
text-overflow: ellipsis;
|
||
/* 超出部分省略号 */
|
||
display: -webkit-box;
|
||
/** 对象作为伸缩盒子模型显示 **/
|
||
-webkit-box-orient: vertical;
|
||
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
||
-webkit-line-clamp: 1;
|
||
/** 显示的行数 **/
|
||
lines: 1; //NVUE下要用这个属性，来让文字超出隐藏变省略号
|
||
}
|
||
|
||
.h_qiu {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background: #FFA629;
|
||
border-radius: 50%;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.lv_qiu {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background: #32714F;
|
||
border-radius: 50%;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.z_hang {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 15px;
|
||
border-bottom: 1px solid #F2F2F2;
|
||
}
|
||
|
||
.m_hang {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 15px;
|
||
border-bottom: 1px solid #F2F2F2;
|
||
}
|
||
|
||
.lv_hang {
|
||
background: #2e6748 !important;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.lv_size {
|
||
color: #fff !important;
|
||
}
|
||
|
||
.icon_ {
|
||
width: 100rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.sb_right {
|
||
width: 500rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.z_right {
|
||
// width: 500rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.bottom_ {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0px;
|
||
height: 136rpx;
|
||
z-index: 9999999999999;
|
||
flex-direction: row;
|
||
background: #fff;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.avc_ {
|
||
background: #32714F !important;
|
||
color: #fff !important;
|
||
}
|
||
.b_an1 {
|
||
box-sizing: border-box;
|
||
border: 1px solid #E8E8E8;
|
||
display: flex;
|
||
justify-content: center;
|
||
/* 水平居中 */
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
width: 220rpx;
|
||
border-radius: 6px 6px 6px 6px;
|
||
}
|
||
.b_an {
|
||
box-sizing: border-box;
|
||
border: 1px solid #E8E8E8;
|
||
display: flex;
|
||
justify-content: center;
|
||
/* 水平居中 */
|
||
align-items: center;
|
||
padding: 10rpx;
|
||
width: 220rpx;
|
||
border-radius: 6px 6px 6px 6px;
|
||
}
|
||
|
||
.ic_ {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
/* 水平居中 */
|
||
align-items: center;
|
||
/* 垂直居中 */
|
||
height: 100vh;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.k_img {
|
||
margin-top: -15px;
|
||
width: 25px;
|
||
height: 25px;
|
||
|
||
}
|
||
|
||
.x_kai {
|
||
height: 120rpx;
|
||
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
|
||
background: #fff;
|
||
padding: 10px 5px;
|
||
margin-top: 88rpx;
|
||
border-radius: 8px;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.left_box {
|
||
height: 500rpx;
|
||
background: #2e6748;
|
||
box-sizing: border-box;
|
||
padding: 35rpx;
|
||
}
|
||
|
||
.touxiang {
|
||
background: #fff;
|
||
margin-top: 120rpx;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 50%;
|
||
border: 2px solid #fff;
|
||
}
|
||
|
||
.text_ {
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
}
|
||
|
||
.d-s {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
|
||
}
|
||
|
||
.l_icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.p_1 {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
margin-bottom: 10px;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.p_2 {
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
color: #333333;
|
||
margin-bottom: 5rpx;
|
||
|
||
}
|
||
|
||
.p_3 {
|
||
font-weight: bold;
|
||
font-size: 12px;
|
||
color: #333333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.p_4 {
|
||
font-weight: 500;
|
||
font-size: 10px;
|
||
color: #999999;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.p_5 {
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
margin-left: 5px;
|
||
color: #999999;
|
||
|
||
|
||
}
|
||
|
||
.g_ {
|
||
width: 1px;
|
||
height: 74px;
|
||
background: #E8E8E8;
|
||
|
||
}
|
||
|
||
.sm1 {
|
||
font-size: 12px;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
|
||
.sm2 {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
color: #333333;
|
||
margin: 8px 0px;
|
||
text-align: center;
|
||
}
|
||
|
||
.sm3 {
|
||
font-size: 12px;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
|
||
.sm4 {
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.sm5 {
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
|
||
color: #DDDDDD;
|
||
}
|
||
|
||
.sm6 {
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.sm7 {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #FFA629;
|
||
}
|
||
|
||
.limitation_ {
|
||
// max-height: 600rpx;
|
||
overflow: auto;
|
||
// scrollbar-width: none;
|
||
}
|
||
|
||
.s_b {
|
||
background: #fff;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
margin-bottom: 30rpx;
|
||
|
||
}
|
||
|
||
.icon2 {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.a_ {
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
}
|
||
|
||
.r_ {
|
||
width: 500rpx;
|
||
}
|
||
|
||
.user_box {
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 30rpx;
|
||
// flex-direction: row;
|
||
// align-items: center;
|
||
// justify-content: space-between;
|
||
|
||
}
|
||
|
||
.l_kuo {
|
||
width: 630rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.img-centen {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.h_size {
|
||
color: #999999;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.touxiangs {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.size_hui {
|
||
color: #999;
|
||
font-size: 14px;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.zl_time {
|
||
|
||
text-align: left;
|
||
}
|
||
|
||
.slot-content {
|
||
width: 550rpx;
|
||
|
||
text-align: center;
|
||
}
|
||
|
||
.slot-size {
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
margin-top: 15px;
|
||
color: #8A8A8F;
|
||
}
|
||
|
||
.lv_s_size {
|
||
font-weight: bold;
|
||
color: #209600;
|
||
}
|
||
|
||
.lv_h_size {
|
||
font-size: 16px;
|
||
color: #d0d0d0;
|
||
}
|
||
|
||
.size-box {
|
||
display: inline-block;
|
||
|
||
overflow: hidden;
|
||
|
||
box-sizing: border-box;
|
||
padding: 5px 0px;
|
||
margin-right: 10px;
|
||
border-radius: 4px;
|
||
|
||
image {
|
||
width: 200rpx;
|
||
height: 120rpx;
|
||
border-radius: 4px;
|
||
|
||
}
|
||
}
|
||
|
||
.end_tel {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.lr_box {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.end_ds {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.end_img {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.img_box {
|
||
|
||
background: #fff;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.anniu_hui {
|
||
width: 686rpx;
|
||
height: 96rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
border: 2rpx solid #E0E2E9;
|
||
|
||
justify-content: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.hui_size {
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #8C9099;
|
||
}
|
||
|
||
.hui_size1 {
|
||
font-weight: 600;
|
||
font-size: 48rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.hui_size2 {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #8C9099;
|
||
}
|
||
|
||
.lv_size {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #2e6748;
|
||
}
|
||
|
||
.acv_lv {
|
||
background: #2e6748 !important;
|
||
color: #fff !important;
|
||
|
||
.u-cell__title-text {
|
||
color: #fff !important;
|
||
}
|
||
}
|
||
|
||
.scroll-container {
|
||
height: 200rpx;
|
||
/* 设定固定的高度 */
|
||
overflow: hidden;
|
||
backface-visibility: hidden;
|
||
transform: translate3d(0, 0, 0);
|
||
-webkit-backface-visibility: hidden;
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
.item-list {
|
||
height: 400rpx;
|
||
/* 设定固定的高度 */
|
||
overflow: hidden;
|
||
backface-visibility: hidden;
|
||
transform: translate3d(0, 0, 0);
|
||
-webkit-backface-visibility: hidden;
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: stretch;
|
||
|
||
/* 启用原生滚动特性 */
|
||
-webkit-overflow-scrolling: touch;
|
||
|
||
/* 当内容超出了设定的高度，则允许内部内容滚动 */
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.list-item {
|
||
padding: 20rpx;
|
||
border-bottom-width: 1px;
|
||
border-style: solid;
|
||
border-color: #e8e8e8;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.driverSize1 {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.driverSize2 {
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.driverSize3 {
|
||
width: 730rpx;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.driverSize4 {
|
||
font-size: 28rpx;
|
||
color: #8C9099;
|
||
}
|
||
|
||
.driverSize5 {
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #32714F;
|
||
}
|
||
|
||
.driverSize6 {
|
||
font-size: 28rpx;
|
||
color: #8C9099;
|
||
}
|
||
|
||
.driver_box {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.driver_buttom {
|
||
width: 180rpx;
|
||
height: 60rpx;
|
||
border-radius: 50px;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1rpx solid #32714F;
|
||
border-radius: 8px;
|
||
|
||
}
|
||
|
||
.centen_box {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.Walk_buttom {}
|
||
</style>
|