817 lines
20 KiB
Vue
817 lines
20 KiB
Vue
<template>
|
||
<view class="order_details">
|
||
<!-- 待支付 -->
|
||
<view class="part_one">
|
||
<view>
|
||
<!-- 订单状态 -->
|
||
<view class="rider_order" v-if="orderDetails.indentState == 0">待付款</view>
|
||
<view class="rider_order"
|
||
v-if="orderDetails.indentState == 1||orderDetails.indentState ==8||orderDetails.indentState ==9||orderDetails.indentState ==10">
|
||
已取消</view>
|
||
<view class="rider_order" v-if="orderDetails.indentState == 2">待接单</view>
|
||
<view class="rider_order" v-if="orderDetails.indentState == 5">待确认</view>
|
||
<view class="rider_order" v-if="orderDetails.indentState == 3">已接单</view>
|
||
<view class="rider_order" v-if="orderDetails.indentState ==4">派送中</view>
|
||
<view class="rider_order" v-if="orderDetails.indentState ==6||orderDetails.indentState ==7">已完成
|
||
</view>
|
||
<!-- 订单提示状态 -->
|
||
<view class="rider_tit" v-if="orderDetails.indentState == 2">请耐心等待骑手接单...</view>
|
||
<view class="rider_tit" v-if="orderDetails.indentState == 0">请及时支付订单，否则将自动取消</view>
|
||
<view class="rider_tit"
|
||
v-if="orderDetails.indentState ==5||orderDetails.indentState ==6||orderDetails.indentState ==7">
|
||
|
||
<text v-if="orderDetails.evaluateMessage">评价内容：{{orderDetails.evaluateMessage}}</text>
|
||
<text v-else>写下您的评价感受吧！</text>
|
||
</view>
|
||
<view class="rider_tit"
|
||
v-if="orderDetails.indentState == 1||orderDetails.indentState ==8||orderDetails.indentState ==9||orderDetails.indentState ==10">
|
||
订单已被您取消</view>
|
||
<view class="rider_tit" v-if="orderDetails.indentState == 3||orderDetails.indentState ==4">骑手已接单，尽快为您派送
|
||
</view>
|
||
|
||
<!-- 订单按钮状态 -->
|
||
<view style="display: flex;justify-content: flex-end;margin-top: 16upx;margin-right: 20rpx;">
|
||
<view class="btn1" @tap.stop="bindcomment(orderDetails)"
|
||
v-if="orderDetails.indentState ==7||orderDetails.indentState == 6&&!orderDetails.evaluateMessage">
|
||
去评论
|
||
</view>
|
||
<view class="btn1" v-if="orderDetails.indentState == 0||orderDetails.indentState == 2"
|
||
@tap.stop="bindorderOff(orderDetails)">取消订单</view>
|
||
<view class="btn1" @tap.stop="bindconfirm(orderDetails)" v-if="orderDetails.indentState == 5">确认订单
|
||
</view>
|
||
<view class="btn2" @tap.stop="bindorder(orderDetails)"
|
||
v-if="orderDetails.indentState == 1||orderDetails.indentState == 3||orderDetails.indentState ==8||
|
||
orderDetails.indentState ==9||orderDetails.indentState ==10||orderDetails.indentState == 4||orderDetails.indentState == 6">再来一单</view>
|
||
<view class="btn2" v-if="orderDetails.indentState == 0" @tap.stop="bindorderpay(orderDetails)">立即付款
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 购买时间 -->
|
||
<view class="five_box" style="padding: 30rpx 30rpx;font-size: 30upx;">
|
||
<text>预约时间</text>
|
||
<text style="font-weight: bold;">{{orderDetails.sendOutTime}}</text>
|
||
</view>
|
||
|
||
<map v-if="orderDetails.indentState == 4 && latitude && longitude" id="map" @tap="goMap"
|
||
style="width: 95%; height: 300rpx;margin: 20rpx auto 0;" :markers="markers" :latitude="latitude"
|
||
:longitude="longitude"></map>
|
||
|
||
<!-- 同城购买-->
|
||
<view class="part_three" v-if="orderDetails.indentType == 3">
|
||
<view class="city_pay">
|
||
<view class="city_box">同城购买</view>
|
||
<text v-if="orderDetails.buyType == 0">就近购买</text>
|
||
<text v-else>指定购买</text>
|
||
</view>
|
||
<view class="pay_tit">{{orderDetails.productDetails}}</view>
|
||
</view>
|
||
<!-- 同城服务-->
|
||
<view class="part_three" v-if="orderDetails.indentType == 4">
|
||
<view class="city_pay">
|
||
<view class="city_box">同城服务</view>
|
||
<text>{{orderDetails.serviceType}}</text>
|
||
</view>
|
||
<view class="pay_tit">{{orderDetails.serviceDetails}}</view>
|
||
</view>
|
||
<!-- 骑手商家地址 -->
|
||
<view class="part_four">
|
||
<view class="city_pay" v-if="orderDetails.indentType !=3&&orderDetails.indentType !=4">
|
||
<view class="city_box" v-if="orderDetails.indentType == 1">帮我送</view>
|
||
<view class="city_box" v-if="orderDetails.indentType == 2">帮我取</view>
|
||
<text>{{orderDetails.itemType}}</text>
|
||
</view>
|
||
<view v-if="orderDetails.indentType !=3&&orderDetails.indentType != 4">
|
||
<u-line color="#F2F2F2" />
|
||
</view>
|
||
<!-- 发货地址 -->
|
||
<view class="one_box" v-if="orderDetails.indentType != 4" style="margin-top: 30rpx;">
|
||
<view class="box_dian">
|
||
<image src="../../../static/image/mai.png" v-if="orderDetails.indentType == 3"></image>
|
||
<image src="../../../static/image/icon_f.png" v-else></image>
|
||
</view>
|
||
<view class="box_addres">
|
||
<view class="add">
|
||
{{orderDetails.shipAddress?orderDetails.shipAddress:''}}{{orderDetails.shipAddressDetail}}
|
||
</view>
|
||
<view class="num">
|
||
<view class="name" v-if="orderDetails.indentType !=3">
|
||
{{orderDetails.shipUserName}} <text>{{orderDetails.shipUserPhone}}</text>
|
||
<!-- <view class="phone_bd" @click="bindphone(0)">拨打</view> -->
|
||
</view>
|
||
<view class="name" v-else>暂无信息</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 收获地址 -->
|
||
<view class="one_box" style="margin-top: 20rpx;margin-bottom: 30rpx;">
|
||
<view class="box_dian">
|
||
<image src="../../../static/image/icon_s.png"></image>
|
||
</view>
|
||
<view class="box_addres">
|
||
<view class="add">{{orderDetails.deliveryAddress}}{{orderDetails.deilveryAddressDetail}}</view>
|
||
<view class="num">
|
||
<view class="name">
|
||
{{orderDetails.deliveryUserName}}<text>{{orderDetails.deliveryUserPhone}}</text>
|
||
<!-- <view class="phone_bd" @click="bindphone()">联系TA</view> -->
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-line color="#F2F2F2" />
|
||
<view class="address_pay">
|
||
<view class="runing_pay">
|
||
预估跑腿费
|
||
</view>
|
||
<view class="runing_distance">
|
||
<text v-if="orderDetails.distance">{{orderDetails.distance/1000}}公里</text>
|
||
<text>￥{{orderDetails.indentBasicsMoney}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 联系骑手 -->
|
||
<view class="rider_box"
|
||
v-if="orderDetails.indentState != 0&&orderDetails.indentState != 1&&orderDetails.indentState != 8&&orderDetails.indentState != 2&&orderDetails.indentState != 9&&orderDetails.indentState != 10">
|
||
<view class="flex justify-between align-center padding">
|
||
<view style="font-size: 31rpx;color: black;">联系骑手...</view>
|
||
<image @click="complaint" src="../../../static/image/order/tousu.png"
|
||
style="width: 43rpx;height: 39rpx;" mode=""></image>
|
||
</view>
|
||
<view>
|
||
<u-line color="#F2F2F2" />
|
||
</view>
|
||
<view style="padding: 20rpx 25rpx;display: flex;justify-content: space-between;align-items: center;">
|
||
<view style="display: flex;">
|
||
<view class="rider_left">
|
||
<image :src="orderDetails.avatar"></image>
|
||
</view>
|
||
<view style="margin-left: 10rpx;color: #333333;">
|
||
<view>{{orderDetails.riderNickName}}</view>
|
||
<view>{{orderDetails.phone}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="phone" @click="bindphone()">联系TA</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="part_six">
|
||
<view class="order_info">
|
||
订单信息
|
||
</view>
|
||
|
||
<!-- 备注 -->
|
||
|
||
<view class="order_list">
|
||
<view class="order_name">订单编号</view>
|
||
<view class="order_nums">{{orderDetails.indentNumber}}</view>
|
||
</view>
|
||
<view class="order_list">
|
||
<view class="order_name">下单时间</view>
|
||
<view class="order_nums">{{orderDetails.createTime}}</view>
|
||
</view>
|
||
<view class="order_list">
|
||
<view class="order_name">支付方式</view>
|
||
<view class="order_nums">在线支付</view>
|
||
</view>
|
||
<view class="order_list" v-if="orderDetails.itemCode">
|
||
|
||
<view class="order_name" style="color: #FF6A04;">收货码</view>
|
||
<view class="order_nums" style="color: #FF6A04;">{{orderDetails.itemCode}}</view>
|
||
</view>
|
||
<view class="order_list"
|
||
v-if="orderDetails.indentType != 4&&orderDetails.indentType != 3&&orderDetails.remarks">
|
||
<view class="order_name">备注</view>
|
||
<view class="order_nums">{{orderDetails.remarks}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 订单下单详情 -->
|
||
<view class="part_sevens">
|
||
<view class="order_info">
|
||
费用说明
|
||
</view>
|
||
<view class="order_list">
|
||
<view class="order_name">预估跑腿费</view>
|
||
<view class="order_nums">￥{{orderDetails.indentBasicsMoney}}</view>
|
||
</view>
|
||
<view class="order_list" v-if="orderDetails.tip">
|
||
<view class="order_name">小费</view>
|
||
<view class="order_nums">￥{{orderDetails.tip}}</view>
|
||
</view>
|
||
<view class="order_list" v-if="orderDetails.prepayMoney">
|
||
<view class="order_name">预付价格</view>
|
||
<view class="order_nums">￥{{orderDetails.prepayMoney}}</view>
|
||
</view>
|
||
<view class="order_list" v-if="orderDetails.redPacketAmount">
|
||
<view class="order_name">红包</view>
|
||
<view class="order_nums">-￥{{orderDetails.redPacketAmount}}</view>
|
||
</view>
|
||
<view class="order_list" v-if="orderDetails.cargoInsuranceFlag == 0">
|
||
<view class="order_name">物品保价</view>
|
||
<view class="order_nums">￥{{orderDetails.cargoInsurance}}</view>
|
||
</view>
|
||
<view class="order_list">
|
||
<view class="order_name" style="color: black;font-size: 28rpx;">合计</view>
|
||
<view class="order_nums" style="color: red;font-size: 28rpx;">￥{{orderDetails.indentMoney}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderDetails: '',
|
||
latitude: '',
|
||
longitude: '',
|
||
markers: [], //标记点
|
||
}
|
||
},
|
||
onLoad(data) {
|
||
let that = this
|
||
console.log(data)
|
||
that.indentNumber = data.indentNumber
|
||
if (!data) {
|
||
that.orderDetails = JSON.stringify(data.data)
|
||
}
|
||
// console.log(that.orderDetails)
|
||
that.userList()
|
||
|
||
},
|
||
methods: {
|
||
getLocation(e) {
|
||
let data = {
|
||
riderUserId: e,
|
||
lat: this.orderDetails.deliveryAddressLatitude,
|
||
lng: this.orderDetails.deliveryAddressLongitude
|
||
}
|
||
this.$Request.getT('/timedtask/selectRiderLocation', data).then(res => {
|
||
if (res.code === 0) {
|
||
|
||
console.log(res.data, '经纬度')
|
||
this.latitude = res.data.riderLocation.lat;
|
||
this.longitude = res.data.riderLocation.lng;
|
||
|
||
this.markers = [{
|
||
id: 1,
|
||
latitude: res.data.riderLocation.lat,
|
||
longitude: res.data.riderLocation.lng,
|
||
iconPath: '../../static/images/order/rider.png',
|
||
width: '40',
|
||
height: '40'
|
||
}]
|
||
}
|
||
});
|
||
},
|
||
goMap() {
|
||
uni.navigateTo({
|
||
url: '/pages/order/orderDetail/orderMap?indentNumber=' + this.indentNumber
|
||
})
|
||
},
|
||
// 拨打电话
|
||
bindphone() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.orderDetails.phone
|
||
});
|
||
},
|
||
userList() {
|
||
this.$Request.postT('/app/indent/userIndentMessage?indentNumber=' + this.indentNumber).then(res => {
|
||
console.log(res)
|
||
if (res.code == 0) {
|
||
this.orderDetails = res.data
|
||
this.getLocation(this.orderDetails.riderUserId)
|
||
}
|
||
});
|
||
},
|
||
// 再来一单
|
||
bindorder(e) {
|
||
console.log(e)
|
||
if (e.indentType == 1 || e.indentType == 2) {
|
||
let index = e.indentType
|
||
uni.navigateTo({
|
||
url: '/pages/Helpsend/Helpsend?indentNumber=' + e.indentNumber + '&index=' + index
|
||
})
|
||
} else if (e.indentType == 3) {
|
||
let index = e.indentType
|
||
let current = e.buyType
|
||
uni.navigateTo({
|
||
url: '/pages/Helppay/Helppay?indentNumber=' + e.indentNumber + '&index=' + index +
|
||
'¤t=' + current
|
||
})
|
||
} else if (e.indentType == 4) {
|
||
let index = e.indentType
|
||
uni.navigateTo({
|
||
url: '/pages/Cityservice/Cityservice?indentNumber=' + e.indentNumber + '&index=' + index
|
||
})
|
||
}
|
||
|
||
},
|
||
// 去评论
|
||
bindcomment(e) {
|
||
console.log(e)
|
||
uni.navigateTo({
|
||
url: '/pages/order/comments/comments?indentNumber=' + e.indentNumber + '&riderUserId=' + e
|
||
.riderUserId
|
||
})
|
||
},
|
||
// 取消订单
|
||
bindorderOff(e) {
|
||
// console.log(e)this.orderDetails.userFine
|
||
let indentNumber = e.indentNumber
|
||
console.log(indentNumber)
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '确定取消订单?',
|
||
showCancel: true,
|
||
cancelText: '取消',
|
||
confirmText: '确认',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
this.$Request.postT('/app/indent/userCancleIndent?indentNumber=' + indentNumber)
|
||
.then(res => {
|
||
// console.log(res)
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '订单取消成功'
|
||
});
|
||
this.userList()
|
||
// setTimeout(function() {
|
||
// uni.navigateBack();
|
||
// }, 1000);
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
showCancel: false,
|
||
title: '订单失败',
|
||
content: res.msg
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//确认订单
|
||
bindconfirm(e) {
|
||
// console.log(e)
|
||
let indentNumber = e.indentNumber
|
||
console.log(indentNumber)
|
||
this.$Request.postT('/app/indent/userDelivery?indentNumber=' + indentNumber).then(res => {
|
||
console.log(res)
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '订单确认成功'
|
||
});
|
||
this.userList()
|
||
// setTimeout(function() {
|
||
// uni.navigateBack();
|
||
// }, 1000);
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
showCancel: false,
|
||
title: '订单确认失败',
|
||
content: res.msg
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 立即付款
|
||
bindorderpay(e) {
|
||
console.log(e)
|
||
let indentNumber = e.indentNumber
|
||
uni.navigateTo({
|
||
url: '/pages/order/pay/pay?indentNumber=' + indentNumber
|
||
})
|
||
},
|
||
complaint() {
|
||
uni.navigateTo({
|
||
url: '/pages/order/complaint/complaint?indentNumber=' + this.orderDetails.indentNumber
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
body {
|
||
background: #F5F5F5;
|
||
}
|
||
|
||
/* #ifndef MP-WEIXIN */
|
||
page {
|
||
background: #F2EDED;
|
||
}
|
||
|
||
/* #endif */
|
||
.order_details {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 待支付 */
|
||
.part_one {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
height: 230rpx;
|
||
background: #ffffff;
|
||
border-radius: 10rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.city_box {
|
||
width: 110rpx;
|
||
line-height: 42rpx;
|
||
background: #c4e2ff;
|
||
color: #49A5FF;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
height: 42rpx;
|
||
}
|
||
|
||
.city_pay {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
height: 80rpx;
|
||
justify-content: left;
|
||
align-items: center;
|
||
}
|
||
|
||
.city_pay text {
|
||
font-size: 30rpx;
|
||
letter-spacing: 2rpx;
|
||
margin-left: 15rpx;
|
||
}
|
||
|
||
.rider_order {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
padding-top: 20rpx;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.rider_tit {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
color: #999999;
|
||
font-size: 30upx;
|
||
margin-top: 10rpx;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.order_btn {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.close_order {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.close_btn {
|
||
border: 1rpx solid #CCCCCC;
|
||
width: 245rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
text-align: center;
|
||
border-radius: 75rpx;
|
||
font-size: 31rpx;
|
||
color: #999999;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.tip_order {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.close_tip {
|
||
width: 245rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
text-align: center;
|
||
border-radius: 75rpx;
|
||
font-size: 31rpx;
|
||
color: white;
|
||
letter-spacing: 2rpx;
|
||
background: #FF7F00;
|
||
}
|
||
|
||
/* 骑手商家地址 */
|
||
.part_four {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
margin-top: 20rpx;
|
||
background: #FFFFFF;
|
||
/* height: 390rpx; */
|
||
border-radius: 10rpx;
|
||
padding: 15rpx 15rpx;
|
||
|
||
}
|
||
|
||
.u-line {
|
||
border-bottom-width: 6rpx !important;
|
||
}
|
||
|
||
.one_box {
|
||
width: 100%;
|
||
/* height: 100rpx; */
|
||
/* background: #F5F5F5; */
|
||
margin: 0 auto;
|
||
border-radius: 12upx;
|
||
display: flex;
|
||
|
||
}
|
||
|
||
.box_dian {
|
||
/* flex: 1; */
|
||
width: 10%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.box_dian image {
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
|
||
.box_name {
|
||
flex: 5;
|
||
display: flex;
|
||
justify-content: left;
|
||
align-items: center;
|
||
color: #333333;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.box_addres {
|
||
/* flex: 5; */
|
||
width: 85%;
|
||
font-size: 31rpx;
|
||
}
|
||
|
||
.add {
|
||
/* color: #333333;
|
||
font-size: 31rpx;
|
||
letter-spacing: 2upx;
|
||
font-weight: bold;
|
||
margin-top: 20upx; */
|
||
}
|
||
|
||
.name {
|
||
display: inline;
|
||
font-size: 30rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.name text {
|
||
color: #999999;
|
||
font-size: 30rpx;
|
||
margin-left: 30upx;
|
||
}
|
||
|
||
.address_pay {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
height: 80rpx;
|
||
line-height: 80rpx
|
||
}
|
||
|
||
.runing_pay {
|
||
/* flex: 1; */
|
||
color: #999999;
|
||
font-size: 30rpx;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
.runing_distance {
|
||
/* flex: 1; */
|
||
color: #999999;
|
||
font-size: 30rpx;
|
||
letter-spacing: 1rpx;
|
||
text-align: end;
|
||
}
|
||
|
||
.runing_distance text {
|
||
font-size: 31rpx;
|
||
color: black;
|
||
margin-left: 35rpx;
|
||
}
|
||
|
||
/* 收货码 */
|
||
.five_box {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
background: #ffffff;
|
||
margin-top: 20rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 35rpx;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.part_five {
|
||
/* height: 85rpx; */
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 20rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.take_number {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: left;
|
||
align-items: center;
|
||
text-indent: 30rpx;
|
||
}
|
||
|
||
.numbers {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
/* 订单信息 */
|
||
.part_six {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
/* height: 275rpx; */
|
||
background: #ffffff;
|
||
margin-top: 20rpx;
|
||
border-radius: 10rpx;
|
||
/* margin-bottom: 100rpx; */
|
||
|
||
}
|
||
|
||
.order_info {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 31rpx;
|
||
font-weight: bold;
|
||
letter-spacing: 3rpx;
|
||
}
|
||
|
||
.order_list {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
height: 60rpx;
|
||
|
||
}
|
||
|
||
.order_name {
|
||
flex: 1;
|
||
color: #999999;
|
||
font-size: 29rpx;
|
||
letter-spacing: 2rpx;
|
||
display: flex;
|
||
justify-content: left;
|
||
align-items: center;
|
||
}
|
||
|
||
.order_nums {
|
||
flex: 2;
|
||
color: #999999;
|
||
font-size: 28rpx;
|
||
letter-spacing: 2rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 同城服务 */
|
||
.part_three {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
margin-top: 20rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
.city_pay {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
/* height: 90rpx; */
|
||
justify-content: left;
|
||
align-items: center;
|
||
}
|
||
|
||
.city_pay text {
|
||
font-size: 28rpx;
|
||
letter-spacing: 2rpx;
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
.city_box {
|
||
width: 110rpx;
|
||
line-height: 42rpx;
|
||
background: #c4e2ff;
|
||
color: #49A5FF;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
height: 42rpx;
|
||
}
|
||
|
||
.pay_tit {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
font-size: 27rpx;
|
||
}
|
||
|
||
.btn1 {
|
||
width: 170upx;
|
||
font-size: 28rpx;
|
||
line-height: 60upx;
|
||
text-align: center;
|
||
border: 1upx solid #9C9C9C;
|
||
border-radius: 20upx;
|
||
color: #9C9C9C;
|
||
margin-right: 30upx;
|
||
}
|
||
|
||
.btn2 {
|
||
width: 170upx;
|
||
line-height: 60upx;
|
||
color: white;
|
||
background: #FF6A04;
|
||
font-size: 22upx;
|
||
text-align: center;
|
||
margin-right: 10rpx;
|
||
border-radius: 20upx;
|
||
}
|
||
|
||
.phone_bd {
|
||
display: inline-block;
|
||
background: #FF6A04;
|
||
color: #ffffff;
|
||
padding: 0rpx 15rpx;
|
||
margin-left: 14rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.part_seven {
|
||
padding: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.part_sevens {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
/* height: 275rpx; */
|
||
background: #ffffff;
|
||
margin-top: 20rpx;
|
||
padding-bottom: 10upx;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 100rpx;
|
||
}
|
||
|
||
/* 联系骑手 */
|
||
.rider_box {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
background: #ffffff;
|
||
margin-top: 20rpx;
|
||
border-radius: 10rpx;
|
||
|
||
}
|
||
|
||
.rider_left image {
|
||
width: 80rpx;
|
||
height: 85rpx;
|
||
border-radius: 60%;
|
||
}
|
||
|
||
.phone {
|
||
background: #FD6416;
|
||
color: #ffffff;
|
||
padding: 8rpx 15rpx;
|
||
border-radius: 13rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
</style>
|