976 lines
24 KiB
Vue
976 lines
24 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="part_one u-skeleton-fillet" v-if="orderDelites.indentState=='3' || orderDelites.indentState=='4'">
|
||
<view class="pickup" v-if="orderDelites.indentState=='3'">待取货...</view>
|
||
<view class="pickup" v-if="orderDelites.indentState=='4'">配送中...</view>
|
||
<view class="pickup_tit" v-if="orderDelites.indentState=='3'">抢单成功请及时取货送达</view>
|
||
<view class="pickup_tit" v-if="orderDelites.indentState=='4'">取货成功请及时送达</view>
|
||
</view>
|
||
|
||
<view class="part_one u-skeleton-fillet" v-else>
|
||
|
||
<view class="pickup" v-if="orderDelites.indentState=='5'">已完成...</view>
|
||
<view class="pickup" v-if="orderDelites.indentState=='6'">已完成...</view>
|
||
<view class="pickup" v-if="orderDelites.indentState=='7'">已完成...</view>
|
||
<view class="pickup" v-if="orderDelites.indentState=='9'">已取消...</view>
|
||
<view class="pickup" v-if="orderDelites.indentState=='10'">已取消...</view>
|
||
<view class="pickup_tit">加油明天会更好！</view>
|
||
|
||
</view>
|
||
<view class="part_one u-skeleton-fillet" style="height: auto;"
|
||
v-if="orderDelites.indentState=='3'|| orderDelites.indentState=='4' && orderDelites.indentType=='5'&& orderDelites.indentType!='3'">
|
||
<view class="pickup">取货码</view>
|
||
<view class="pickup_tit quhuoma">{{orderDelites.orderCode}}</view>
|
||
</view>
|
||
<view class="list_box1 u-skeleton-fillet">
|
||
<view class="part2">
|
||
<view class="box_add" style="padding-bottom: 12px;"
|
||
v-if="orderDelites.indentType == 5||orderDelites.indentType == 1 || orderDelites.indentType == 2 || (orderDelites.indentType==3 &&orderDelites.buyType==1)">
|
||
<view class="add_name">
|
||
<view class="flex">
|
||
<view class="buy">
|
||
<image src="../../../static/rider/icon-buy.png"></image>
|
||
</view>
|
||
<view class="sh_name" @click="goStart()">
|
||
{{orderDelites.shopAddressDetail}}
|
||
<u-icon name="map"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="xs_add" @click="coll(orderDelites.shopPhone)">
|
||
{{orderDelites.shopName?orderDelites.shopName:''}}<text
|
||
style="margin-left: 10upx;">{{orderDelites.shopPhone?orderDelites.shopPhone:''}}</text>
|
||
<u-icon name="phone"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="box_add">
|
||
<view class="add_name">
|
||
<view class="flex">
|
||
<view class="send">
|
||
<image src="../../../static/rider/icon-send.png"></image>
|
||
</view>
|
||
<view class="sh_name" @click="goEnd()">
|
||
{{orderDelites.userAddressDetail}}({{orderDelites.userProvince?orderDelites.userProvince:''}}
|
||
{{orderDelites.userCity?orderDelites.userCity:''}}{{orderDelites.userDistrict?orderDelites.userDistrict:''}})
|
||
<u-icon name="map"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="xs_add" @click="coll(orderDelites.userPhone)">
|
||
{{orderDelites.userName?orderDelites.userName:''}}<text
|
||
style="margin-left: 10upx;">{{orderDelites.userPhone?orderDelites.userPhone:''}}</text>
|
||
<u-icon name="phone"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="orderDelites.indentType == 5" style="padding-bottom: 15px;"></view>
|
||
<view class="part3" v-if="orderDelites.indentType != 5">
|
||
<view class="three_left" v-if="orderDelites.predictTime">
|
||
<image src="../../../static/rider/icon_data.png"></image>
|
||
<text>{{orderDelites.predictTime}}分钟内送达</text>
|
||
</view>
|
||
<view class="three_right">{{orderDelites.errandMoney}}元</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- tip -->
|
||
<view class="tip_box u-skeleton-fillet" v-if="orderDelites.indentType != 5">
|
||
<view class="tip_part1">
|
||
<view class="tip_title" v-if="orderDelites.indentType == 1">帮送清单</view>
|
||
<view class="tip_title" v-if="orderDelites.indentType == 2">帮取清单</view>
|
||
<view class="tip_title" v-if="orderDelites.indentType == 3">帮买清单</view>
|
||
<view class="tip_title" v-if="orderDelites.indentType == 4">服务内容</view>
|
||
<view class="tip_rider" v-if="orderDelites.prepayMoney" style="margin-right: 16upx;">
|
||
商品预付:￥<text>{{orderDelites.prepayMoney}}</text>
|
||
</view>
|
||
<view class="box_two1" v-if="orderDelites.itemType">{{orderDelites.itemType}}</view>
|
||
<view class="box_two1" v-if="orderDelites.serviceType">{{orderDelites.serviceType}}</view>
|
||
<view class="box_two1" v-if="orderDelites.itemValue">{{orderDelites.itemValue}}</view>
|
||
<view class="box_two1" v-if="orderDelites.itemWeight">{{orderDelites.itemWeight}}</view>
|
||
</view>
|
||
<u-line color="#F2F2F2" />
|
||
<view class="tip_content" v-if="orderDelites.indentType == 3">
|
||
{{orderDelites.productDetails?orderDelites.productDetails:''}}
|
||
</view>
|
||
<view class="tip_content" v-if="orderDelites.indentType == 1 || orderDelites.indentType == 2">
|
||
{{orderDelites.remarks?orderDelites.remarks:''}}
|
||
</view>
|
||
<view class="tip_content" v-if="orderDelites.indentType == 4">
|
||
{{orderDelites.serviceDetails?orderDelites.serviceDetails:''}}
|
||
</view>
|
||
</view>
|
||
<!-- 订单信息 -->
|
||
<view class="order_box u-skeleton-fillet">
|
||
<view class="order_title">订单信息</view>
|
||
<view class="order_list">
|
||
<view class="order_name">订单号码</view>
|
||
<view class="order_numbers" @click="copyOrder(orderDelites.indentNumber)">{{orderDelites.indentNumber}}
|
||
<u-icon name="order"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="order_list">
|
||
<view class="order_name">发布时间</view>
|
||
<view class="order_numbers">{{orderDelites.createTime}}
|
||
|
||
</view>
|
||
</view>
|
||
<view class="order_list">
|
||
<view class="order_name">接单时间</view>
|
||
<view class="order_numbers">{{orderDelites.receivingTime}}
|
||
|
||
</view>
|
||
</view>
|
||
<view class="order_list" v-if="orderDelites.finishTime">
|
||
<view class="order_name">完成时间</view>
|
||
<view class="order_numbers">{{orderDelites.finishTime}}
|
||
|
||
</view>
|
||
</view>
|
||
<view class="order_list padding-bottom-sm" v-if="orderDelites.remarks">
|
||
<view class="order_name">订单备注</view>
|
||
<view class="order_numbers">{{orderDelites.remarks}}
|
||
</view>
|
||
</view>
|
||
<!-- <view class="order_list">
|
||
<view class="order_name">发票抬头</view>
|
||
<view class="order_numbers">无(不需要发票)</view>
|
||
</view> -->
|
||
</view>
|
||
<!-- 费用明细 -->
|
||
<view class="order_box u-skeleton-fillet">
|
||
<view class="order_title">费用明细</view>
|
||
<view class="order_list">
|
||
<view class="income_name">跑腿费</view>
|
||
<view class="income_numbers">¥<text>{{orderDelites.errandMoney}}</text></view>
|
||
</view>
|
||
<view class="order_list" v-if="orderDelites.tip">
|
||
<view class="income_name">小费奖励</view>
|
||
<view class="income_numbers">¥<text>{{orderDelites.tip?orderDelites.tip:'0'}}</text></view>
|
||
</view>
|
||
<view class="order_list" v-if="orderDelites.prepayMoney">
|
||
<view class="income_name">商品费用</view>
|
||
<view class="income_numbers1">¥<text>{{orderDelites.prepayMoney}}</text></view>
|
||
</view>
|
||
<view class="order_list">
|
||
<view class="income_name">合计</view>
|
||
<view class="income_numbers1">¥<text>{{orderDelites.riderMoney}}</text></view>
|
||
</view>
|
||
</view>
|
||
<!-- 接单按钮 -->
|
||
<view class="tabbar_btn"
|
||
v-if="orderDelites.indentState=='3'||orderDelites.indentState=='4'||orderDelites.indentState=='5'">
|
||
<!-- <view class="btn_left">
|
||
联系TA
|
||
</view>
|
||
<view class="btn_right" @click="onshow">
|
||
确定送达
|
||
</view> -->
|
||
<view class="btn_right" @click="quhuo(orderDelites.indentId)" v-if="orderDelites.indentState=='3'">确认取货
|
||
</view>
|
||
<view class="btn_left" @click="zhuanOrder(orderDelites.indentId)" v-if="orderDelites.indentState=='3'">
|
||
转单
|
||
</view>
|
||
<view class="btn_left" v-if="orderDelites.indentState=='4'" @click="coll(orderDelites.userPhone)">
|
||
联系TA</view>
|
||
<view class="btn_right" v-if="orderDelites.indentState=='4'" @click.stop="shouhuo(orderDelites)">确认送达</view>
|
||
<view class="btn_right" v-if="orderDelites.indentState=='5'">客户待确认</view>
|
||
</view>
|
||
<!-- 聊天室 -->
|
||
<view style="position: fixed;bottom: 150rpx;right: 50rpx;" v-if="orderDelites.indentType == 5">
|
||
<image @tap="goChat(orderDelites.indentId,orderDelites.orderId)" src="../../../static/image/chats.png"
|
||
style="width: 100rpx;height: 100rpx;border-radius: 50rpx;">
|
||
</image>
|
||
<view class="shopxiaoix" v-if="RiderUnreadCount">{{RiderUnreadCount}}</view>
|
||
</view>
|
||
|
||
<!-- 转单 -->
|
||
<u-popup v-model="showOrder" mode="center" border-radius="18" :closeable="closeable" close-icon="close-circle"
|
||
close-icon-size="45" width="580rpx" height="400rpx">
|
||
<view class="receipt_code">
|
||
<view class="code_title">填写手机号码</view>
|
||
<u-input v-model="phone" type="number" placeholder="填写转单人手机号码" :border="border" />
|
||
<view class="sure" style="margin-top: 40rpx;" @click="zhuandan">确定</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 收货码弹框 -->
|
||
<u-popup v-model="show" mode="center" border-radius="18" :closeable="closeable" close-icon="close-circle"
|
||
close-icon-size="45" width="580rpx" height="400rpx">
|
||
<view class="receipt_code">
|
||
<view class="code_title">填写收货码</view>
|
||
<u-input v-model="shouhuoma" :type="type" placeholder="请输入收货码" :border="border" />
|
||
<view class="sure" @click="querenSh">确定</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
closeable: true,
|
||
value: '',
|
||
type: 'text',
|
||
border: true,
|
||
indentNumber: '',
|
||
orderId: '',
|
||
orderDelites: {},
|
||
latitude: '', //骑手起点经度
|
||
longitude: '', //骑手起点纬度
|
||
qiJuli: '', //骑手距离
|
||
shouhuoma: '',
|
||
loading: true, // 是否显示骨架屏组件
|
||
RiderUnreadCount: 0,
|
||
indentId: '',
|
||
showOrder: false,
|
||
phone: ''
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
var that = this
|
||
console.error(options)
|
||
// uni.showLoading({
|
||
// title: '加载中......',
|
||
// icon: 'none'
|
||
// })
|
||
that.indentNumber = options.id
|
||
that.orderId = options.orderId
|
||
|
||
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: function(res) {
|
||
console.log('当前位置的经度：' + res.longitude);
|
||
console.log('当前位置的纬度：' + res.latitude);
|
||
that.longitude = res.longitude
|
||
that.latitude = res.latitude
|
||
that.taskData()
|
||
}
|
||
|
||
});
|
||
|
||
|
||
|
||
setInterval(function() {
|
||
that.getRiderUnreadCount()
|
||
}, 10000)
|
||
|
||
},
|
||
methods: {
|
||
zhuanOrder(indentId) {
|
||
this.phone = ''
|
||
this.indentId = indentId
|
||
this.showOrder = true
|
||
},
|
||
zhuandan() {
|
||
this.$Request.postT('/app/tbindent/transferOfOrder', {
|
||
indentId: this.indentId,
|
||
phone: this.phone
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.phone = ''
|
||
this.$queue.setData('zhuandan', this.indentId);
|
||
uni.showToast({
|
||
title: '转单成功',
|
||
icon: "none"
|
||
});
|
||
setTimeout(d => {
|
||
uni.navigateBack()
|
||
}, 1000)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none"
|
||
});
|
||
}
|
||
});
|
||
},
|
||
goChat(indentId, orderId) {
|
||
orderId = orderId ? orderId : this.orderId;
|
||
uni.navigateTo({
|
||
url: '/pages/riderMy/kefu/liaotianshi?indentId=' + indentId + '&orderId=' + orderId
|
||
});
|
||
},
|
||
copyOrder(value) {
|
||
uni.setClipboardData({
|
||
data: value, //要被复制的内容
|
||
success: () => { //复制成功的回调函数
|
||
uni.showToast({ //提示
|
||
title: '复制成功'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
onshow() {
|
||
this.show = true
|
||
},
|
||
coll(phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
});
|
||
},
|
||
taskData() {
|
||
if (this.indentNumber) {
|
||
if (!this.longitude) {
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '未开启定位权限，无法获取数据，请开启一下',
|
||
showCancel: false,
|
||
cancelText: '',
|
||
confirmText: '我知道了',
|
||
success: res => {
|
||
uni.navigateBack({
|
||
|
||
})
|
||
},
|
||
fail: () => {},
|
||
complete: () => {}
|
||
});
|
||
return;
|
||
}
|
||
this.$Request.postT('/app/tbindent/indentMessage', {
|
||
indentNumber: this.indentNumber,
|
||
ol: this.longitude,
|
||
od: this.latitude
|
||
}).then(res => {
|
||
this.loading = false
|
||
uni.hideLoading()
|
||
if (res.code == 0 && res.data) {
|
||
// this.jsjl(this.longitude,this.latitude,res.data.deliveryAddressLatitude, res.data.deliveryAddressLongitude)
|
||
// this.jsjl(res.data.shipAddressLatitude, res.data.shipAddressLongitude,res.data.deliveryAddressLatitude, res.data.deliveryAddressLongitude)
|
||
// if (res.data.distanceInitial > 1000) {
|
||
// res.data.distanceInitials = (Number(res.data.distanceInitial) / 1000).toFixed(2)
|
||
// }
|
||
if (res.data.distance > 1000) {
|
||
res.data.distances = (Number(res.data.distance) / 1000).toFixed(2)
|
||
}
|
||
this.orderDelites = res.data
|
||
this.orderDelites.orderCode = res.data.orderCode.substring(res.data.orderCode.length -
|
||
3)
|
||
|
||
|
||
console.log('````', res.data)
|
||
} else {
|
||
console.log('失败：', res.data)
|
||
uni.navigateBack({
|
||
|
||
})
|
||
}
|
||
this.loading = false;
|
||
});
|
||
} else {
|
||
this.$Request.postT('/app/tbindent/indentMessageByOrderId', {
|
||
orderId: this.orderId,
|
||
ol: this.longitude,
|
||
od: this.latitude
|
||
}).then(res => {
|
||
this.loading = false
|
||
uni.hideLoading()
|
||
if (res.code == 0) {
|
||
// this.jsjl(this.longitude,this.latitude,res.data.deliveryAddressLatitude, res.data.deliveryAddressLongitude)
|
||
// this.jsjl(res.data.shipAddressLatitude, res.data.shipAddressLongitude,res.data.deliveryAddressLatitude, res.data.deliveryAddressLongitude)
|
||
if (res.data.distanceInitial > 1000) {
|
||
res.data.distanceInitials = (Number(res.data.distanceInitial) / 1000).toFixed(2)
|
||
}
|
||
if (res.data.distance > 1000) {
|
||
res.data.distances = (Number(res.data.distance) / 1000).toFixed(2)
|
||
}
|
||
this.orderDelites = res.data
|
||
this.orderDelites.orderCode = res.data.orderCode.substring(res.data.orderCode.length -
|
||
3)
|
||
|
||
|
||
console.log('````', res.data)
|
||
} else {
|
||
console.log('失败：', res.data)
|
||
}
|
||
this.loading = false;
|
||
});
|
||
}
|
||
|
||
},
|
||
quhuo(indentId) {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认取到货吗',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
that.$Request.postJson('/app/tbindent/riderBuyGoods', {
|
||
|
||
indentId: indentId,
|
||
indentState: "4"
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
that.taskData()
|
||
uni.showToast({
|
||
title: '确认取货成功',
|
||
icon: "none"
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none"
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
|
||
},
|
||
goStart() {
|
||
// let obj = {
|
||
// name: this.orderDelites.shopAddressDetail,
|
||
// lat: this.orderDelites.shopLat,
|
||
// long: this.orderDelites.shopLng,
|
||
// }
|
||
// this.navgate(obj)
|
||
// 一键导航
|
||
let latitude = this.orderDelites.shopLat
|
||
let longitude = this.orderDelites.shopLng
|
||
let name = this.orderDelites.shopAddressDetail
|
||
uni.openLocation({
|
||
latitude: latitude - 0, //要去的纬度-地址
|
||
longitude: longitude - 0, //要去的经度-地址
|
||
name: name, //地址名称
|
||
address: name, //详细地址名称
|
||
success: function() {
|
||
console.log('导航成功');
|
||
},
|
||
fail: function(error) {
|
||
console.log(error)
|
||
}
|
||
})
|
||
},
|
||
goEnd() {
|
||
// let obj = {
|
||
// name: this.orderDelites.userAddressDetail,
|
||
// lat: this.orderDelites.userLat,
|
||
// long: this.orderDelites.userLng,
|
||
// }
|
||
// this.navgate(obj)
|
||
|
||
let latitude = this.orderDelites.userLat
|
||
let longitude = this.orderDelites.userLng
|
||
let name = this.orderDelites.userAddressDetail
|
||
uni.openLocation({
|
||
latitude: Number(latitude), //要去的纬度-地址
|
||
longitude: Number(longitude), //要去的经度-地址
|
||
name: name, //地址名称
|
||
address: name, //详细地址名称
|
||
success: function() {
|
||
console.log('导航成功');
|
||
},
|
||
fail: function(error) {
|
||
console.log(error)
|
||
}
|
||
})
|
||
},
|
||
navgate(e) {
|
||
console.log(e)
|
||
let plugin = requirePlugin('routePlan');
|
||
let key = this.$queue.getData('mapKey'); //使用在腾讯位置服务申请的key
|
||
let referer = this.$queue.getData('mapName'); //调用插件的app的名称
|
||
|
||
let endPoint = JSON.stringify({ //终点
|
||
'name': e.name,
|
||
'latitude': e.lat,
|
||
'longitude': e.long
|
||
});
|
||
wx.navigateTo({
|
||
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
|
||
});
|
||
},
|
||
shouhuo(e) {
|
||
console.log(e)
|
||
this.indentNumber = e.indentNumber
|
||
if (e.itemCodeFlag == 0 && e.indentType != 5) {
|
||
this.show = true
|
||
|
||
} else {
|
||
this.querenSh()
|
||
}
|
||
|
||
},
|
||
querenSh() {
|
||
let that = this
|
||
|
||
that.$Request.postT('/app/tbindent/riderDelivery', {
|
||
indentNumber: that.indentNumber,
|
||
itemCode: that.shouhuoma
|
||
}).then(res => {
|
||
console.log(res)
|
||
if (res.code == 0) {
|
||
|
||
uni.showToast({
|
||
title: '订单完成',
|
||
icon: "none"
|
||
});
|
||
setTimeout(function() {
|
||
uni.navigateBack()
|
||
}, 1000)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none"
|
||
});
|
||
}
|
||
});
|
||
},
|
||
getRiderUnreadCount() {
|
||
let that = this
|
||
let data = {
|
||
ordersId: that.orderId
|
||
}
|
||
that.$Request.getT("/app/ordersChat/selectRiderUnreadCount", data).then(res => {
|
||
if (res.code == 0) {
|
||
if (res.data > 0) {
|
||
if (that.RiderUnreadCount != res.data) {
|
||
that.RiderUnreadCount = res.data
|
||
that.aplayAudio()
|
||
uni.showModal({
|
||
title: '消息',
|
||
content: '有' + res.data + '条消息，请前往聊天列表处理。',
|
||
success: (ret) => {
|
||
if (ret.confirm) {
|
||
uni.navigateTo({
|
||
url: '/pages/riderMy/kefu/liaotian'
|
||
})
|
||
|
||
} else {
|
||
console.log('else', ret)
|
||
that.defineCallBack()
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
});
|
||
},
|
||
//消息提示
|
||
aplayAudio() {
|
||
// console.log('语音提示')
|
||
const innerAudioContext = uni.createInnerAudioContext();
|
||
innerAudioContext.autoplay = true;
|
||
innerAudioContext.src =
|
||
'https://pw.xianmxkj.com/file/uploadPath/2022/01/19/0753211f78d718d44ee6372e33eae9ee.mp3';
|
||
innerAudioContext.onPlay(() => {
|
||
console.log('开始播放');
|
||
});
|
||
innerAudioContext.onError((res) => {
|
||
console.log(res.errMsg);
|
||
console.log(res.errCode);
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
body {
|
||
background: #F5F5F5;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
padding-bottom: 259rpx;
|
||
}
|
||
|
||
.part_one {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
height: 120rpx;
|
||
background: #ffffff;
|
||
margin-top: 20rpx;
|
||
border-radius: 23rpx;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
.pickup {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
font-size: 29rpx;
|
||
font-weight: bold;
|
||
letter-spacing: 2rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.pickup_tit {
|
||
color: #999999;
|
||
font-size: 22rpx;
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.quhuoma {
|
||
font-size: 50rpx;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
margin: 50rpx 0;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.list_box1 {
|
||
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
/* height: 320rpx; */
|
||
background: #FFFFFF;
|
||
border-radius: 23rpx;
|
||
/* box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(198, 186, 181, 0.20); */
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.part2 {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
padding-top: 25rpx;
|
||
}
|
||
|
||
.box_add {
|
||
display: flex;
|
||
}
|
||
|
||
.distance {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.a {
|
||
font-size: 16rpx;
|
||
}
|
||
|
||
.add_name {
|
||
flex: 8;
|
||
position: relative;
|
||
}
|
||
|
||
.buy {
|
||
/* position: absolute;
|
||
top: 0rpx; */
|
||
}
|
||
|
||
.buy image {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.send {
|
||
/* position: absolute;
|
||
top: 0rpx; */
|
||
}
|
||
|
||
.send image {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.sh_name {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
letter-spacing: 2rpx;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.xs_add {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
margin-top: 10rpx;
|
||
margin-left: 30px;
|
||
}
|
||
|
||
.jiantou {
|
||
margin-left: 23rpx;
|
||
}
|
||
|
||
.jiantou image {
|
||
width: 20rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.part3 {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
}
|
||
|
||
.three_left {
|
||
flex: 1;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: left;
|
||
align-items: center;
|
||
}
|
||
|
||
.three_left image {
|
||
width: 36rpx;
|
||
height: 37rpx;
|
||
}
|
||
|
||
.box_two1 {
|
||
background: #c4e2ff;
|
||
color: #359CFF;
|
||
/* width: 60px; */
|
||
padding: 0 5px;
|
||
height: 45rpx;
|
||
font-size: 22rpx;
|
||
text-align: center;
|
||
line-height: 45rpx;
|
||
border-radius: 5rpx;
|
||
margin-top: 20rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.three_left text {
|
||
color: #333333;
|
||
font-size: 25rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.three_right {
|
||
flex: 1;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
color: #FF412D;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* tip */
|
||
.tip_box {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
height: 180rpx;
|
||
background: #FFFFFF;
|
||
margin-top: 20rpx;
|
||
border-radius: 22rpx;
|
||
}
|
||
|
||
.tip_part1 {
|
||
display: flex;
|
||
}
|
||
|
||
.tip_title {
|
||
/* flex: 1; */
|
||
height: 80rpx;
|
||
display: flex;
|
||
justify-content: left;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
.tip_rider {
|
||
flex: 1;
|
||
font-size: 20rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
.tip_rider text {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.tip_content {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
font-size: 27rpx;
|
||
font-weight: bold;
|
||
letter-spacing: 2rpx;
|
||
margin-top: 15rpx;
|
||
}
|
||
|
||
.u-line {
|
||
border-bottom-width: 3px !important;
|
||
}
|
||
|
||
/* 订单信息 */
|
||
.order_box {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
/* height: 300rpx; */
|
||
background: #ffffff;
|
||
margin-top: 20rpx;
|
||
border-radius: 22rpx;
|
||
}
|
||
|
||
.order_title {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
line-height: 67rpx;
|
||
letter-spacing: 3rpx;
|
||
}
|
||
|
||
.order_list {
|
||
display: flex;
|
||
}
|
||
|
||
.order_name {
|
||
flex: 1;
|
||
margin-left: 35rpx;
|
||
color: #999999;
|
||
font-size: 25rpx;
|
||
height: 75rpx;
|
||
display: flex;
|
||
justify-content: left;
|
||
align-items: center;
|
||
}
|
||
|
||
.order_numbers {
|
||
flex: 1;
|
||
color: #333333;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
margin-right: 35rpx;
|
||
}
|
||
|
||
/* 费用明细 */
|
||
.income_name {
|
||
flex: 1;
|
||
margin-left: 35rpx;
|
||
color: #999999;
|
||
font-size: 26rpx;
|
||
height: 75rpx;
|
||
display: flex;
|
||
justify-content: left;
|
||
align-items: center;
|
||
}
|
||
|
||
.income_numbers {
|
||
flex: 1;
|
||
color: #333333;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
margin-right: 35rpx;
|
||
}
|
||
|
||
.income_numbers1 {
|
||
flex: 1;
|
||
color: #FF2400;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
margin-right: 35rpx;
|
||
}
|
||
|
||
/* 接单按钮 */
|
||
.tabbar_btn {
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
left: 0rpx;
|
||
right: 0rpx;
|
||
width: 100%;
|
||
height: 120rpx;
|
||
background: #FFFFFF;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn_left {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
color: white;
|
||
background: #33D442;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
border-radius: 16rpx;
|
||
margin-left: 35rpx;
|
||
margin-right: 20rpx;
|
||
font-size: 26rpx;
|
||
letter-spacing: 3rpx;
|
||
}
|
||
|
||
.btn_right {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
color: white;
|
||
background: #FF7F00;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
border-radius: 16rpx;
|
||
margin-left: 20rpx;
|
||
margin-right: 35rpx;
|
||
font-size: 26rpx;
|
||
letter-spacing: 3rpx;
|
||
}
|
||
|
||
/* 收货码弹框 */
|
||
.receipt_code {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.code_title {
|
||
width: 100%;
|
||
line-height: 100rpx;
|
||
font-size: 31rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
letter-spacing: 2rpx;
|
||
margin-top: 21rpx;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
|
||
.u-input--border {
|
||
border: 1px solid #F2F2F2 !important;
|
||
background: #F2F2F2 !important;
|
||
color: #999999 !important;
|
||
font-weight: 500 !important;
|
||
letter-spacing: 2rpx !important;
|
||
}
|
||
|
||
.u-input__input {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
flex: 1;
|
||
color: #999999 !important;
|
||
min-height: 85rpx !important;
|
||
margin-top: 7rpx;
|
||
}
|
||
|
||
.sure {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
background: #FF7F00;
|
||
color: white;
|
||
border-radius: 46rpx;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
margin-top: 30rpx;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.shopxiaoix {
|
||
background: red;
|
||
color: #ffffff;
|
||
width: 40rpx;
|
||
height: auto;
|
||
text-align: center;
|
||
border-radius: 30rpx;
|
||
position: relative;
|
||
top: -66px;
|
||
left: 35px;
|
||
}
|
||
</style> |