orderdetail.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975
  1. <template>
  2. <view class="content">
  3. <view class="part_one u-skeleton-fillet" v-if="orderDelites.indentState=='3' || orderDelites.indentState=='4'">
  4. <view class="pickup" v-if="orderDelites.indentState=='3'">待取货...</view>
  5. <view class="pickup" v-if="orderDelites.indentState=='4'">配送中...</view>
  6. <view class="pickup_tit" v-if="orderDelites.indentState=='3'">抢单成功请及时取货送达</view>
  7. <view class="pickup_tit" v-if="orderDelites.indentState=='4'">取货成功请及时送达</view>
  8. </view>
  9. <view class="part_one u-skeleton-fillet" v-else>
  10. <view class="pickup" v-if="orderDelites.indentState=='5'">已完成...</view>
  11. <view class="pickup" v-if="orderDelites.indentState=='6'">已完成...</view>
  12. <view class="pickup" v-if="orderDelites.indentState=='7'">已完成...</view>
  13. <view class="pickup" v-if="orderDelites.indentState=='9'">已取消...</view>
  14. <view class="pickup" v-if="orderDelites.indentState=='10'">已取消...</view>
  15. <view class="pickup_tit">加油明天会更好!</view>
  16. </view>
  17. <view class="part_one u-skeleton-fillet" style="height: auto;"
  18. v-if="orderDelites.indentState=='3'|| orderDelites.indentState=='4' && orderDelites.indentType=='5'&& orderDelites.indentType!='3'">
  19. <view class="pickup">取货码</view>
  20. <view class="pickup_tit quhuoma">{{orderDelites.orderCode}}</view>
  21. </view>
  22. <view class="list_box1 u-skeleton-fillet">
  23. <view class="part2">
  24. <view class="box_add" style="padding-bottom: 12px;"
  25. v-if="orderDelites.indentType == 5||orderDelites.indentType == 1 || orderDelites.indentType == 2 || (orderDelites.indentType==3 &&orderDelites.buyType==1)">
  26. <view class="add_name">
  27. <view class="flex">
  28. <view class="buy">
  29. <image src="../../../static/rider/icon-buy.png"></image>
  30. </view>
  31. <view class="sh_name" @click="goStart()">
  32. {{orderDelites.shopAddressDetail}}
  33. <u-icon name="map"></u-icon>
  34. </view>
  35. </view>
  36. <view class="xs_add" @click="coll(orderDelites.shopPhone)">
  37. {{orderDelites.shopName?orderDelites.shopName:''}}<text
  38. style="margin-left: 10upx;">{{orderDelites.shopPhone?orderDelites.shopPhone:''}}</text>
  39. <u-icon name="phone"></u-icon>
  40. </view>
  41. </view>
  42. </view>
  43. <view class="box_add">
  44. <view class="add_name">
  45. <view class="flex">
  46. <view class="send">
  47. <image src="../../../static/rider/icon-send.png"></image>
  48. </view>
  49. <view class="sh_name" @click="goEnd()">
  50. {{orderDelites.userAddressDetail}}({{orderDelites.userProvince?orderDelites.userProvince:''}}
  51. {{orderDelites.userCity?orderDelites.userCity:''}}{{orderDelites.userDistrict?orderDelites.userDistrict:''}})
  52. <u-icon name="map"></u-icon>
  53. </view>
  54. </view>
  55. <view class="xs_add" @click="coll(orderDelites.userPhone)">
  56. {{orderDelites.userName?orderDelites.userName:''}}<text
  57. style="margin-left: 10upx;">{{orderDelites.userPhone?orderDelites.userPhone:''}}</text>
  58. <u-icon name="phone"></u-icon>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. <view v-if="orderDelites.indentType == 5" style="padding-bottom: 15px;"></view>
  64. <view class="part3" v-if="orderDelites.indentType != 5">
  65. <view class="three_left" v-if="orderDelites.predictTime">
  66. <image src="../../../static/rider/icon_data.png"></image>
  67. <text>{{orderDelites.predictTime}}分钟内送达</text>
  68. </view>
  69. <view class="three_right">{{orderDelites.errandMoney}}元</view>
  70. </view>
  71. </view>
  72. <!-- tip -->
  73. <view class="tip_box u-skeleton-fillet" v-if="orderDelites.indentType != 5">
  74. <view class="tip_part1">
  75. <view class="tip_title" v-if="orderDelites.indentType == 1">帮送清单</view>
  76. <view class="tip_title" v-if="orderDelites.indentType == 2">帮取清单</view>
  77. <view class="tip_title" v-if="orderDelites.indentType == 3">帮买清单</view>
  78. <view class="tip_title" v-if="orderDelites.indentType == 4">服务内容</view>
  79. <view class="tip_rider" v-if="orderDelites.prepayMoney" style="margin-right: 16upx;">
  80. 商品预付:¥<text>{{orderDelites.prepayMoney}}</text>
  81. </view>
  82. <view class="box_two1" v-if="orderDelites.itemType">{{orderDelites.itemType}}</view>
  83. <view class="box_two1" v-if="orderDelites.serviceType">{{orderDelites.serviceType}}</view>
  84. <view class="box_two1" v-if="orderDelites.itemValue">{{orderDelites.itemValue}}</view>
  85. <view class="box_two1" v-if="orderDelites.itemWeight">{{orderDelites.itemWeight}}</view>
  86. </view>
  87. <u-line color="#F2F2F2" />
  88. <view class="tip_content" v-if="orderDelites.indentType == 3">
  89. {{orderDelites.productDetails?orderDelites.productDetails:''}}
  90. </view>
  91. <view class="tip_content" v-if="orderDelites.indentType == 1 || orderDelites.indentType == 2">
  92. {{orderDelites.remarks?orderDelites.remarks:''}}
  93. </view>
  94. <view class="tip_content" v-if="orderDelites.indentType == 4">
  95. {{orderDelites.serviceDetails?orderDelites.serviceDetails:''}}
  96. </view>
  97. </view>
  98. <!-- 订单信息 -->
  99. <view class="order_box u-skeleton-fillet">
  100. <view class="order_title">订单信息</view>
  101. <view class="order_list">
  102. <view class="order_name">订单号码</view>
  103. <view class="order_numbers" @click="copyOrder(orderDelites.indentNumber)">{{orderDelites.indentNumber}}
  104. <u-icon name="order"></u-icon>
  105. </view>
  106. </view>
  107. <view class="order_list">
  108. <view class="order_name">发布时间</view>
  109. <view class="order_numbers">{{orderDelites.createTime}}
  110. </view>
  111. </view>
  112. <view class="order_list">
  113. <view class="order_name">接单时间</view>
  114. <view class="order_numbers">{{orderDelites.receivingTime}}
  115. </view>
  116. </view>
  117. <view class="order_list" v-if="orderDelites.finishTime">
  118. <view class="order_name">完成时间</view>
  119. <view class="order_numbers">{{orderDelites.finishTime}}
  120. </view>
  121. </view>
  122. <view class="order_list padding-bottom-sm" v-if="orderDelites.remarks">
  123. <view class="order_name">订单备注</view>
  124. <view class="order_numbers">{{orderDelites.remarks}}
  125. </view>
  126. </view>
  127. <!-- <view class="order_list">
  128. <view class="order_name">发票抬头</view>
  129. <view class="order_numbers">无(不需要发票)</view>
  130. </view> -->
  131. </view>
  132. <!-- 费用明细 -->
  133. <view class="order_box u-skeleton-fillet">
  134. <view class="order_title">费用明细</view>
  135. <view class="order_list">
  136. <view class="income_name">跑腿费</view>
  137. <view class="income_numbers">¥<text>{{orderDelites.errandMoney}}</text></view>
  138. </view>
  139. <view class="order_list" v-if="orderDelites.tip">
  140. <view class="income_name">小费奖励</view>
  141. <view class="income_numbers">¥<text>{{orderDelites.tip?orderDelites.tip:'0'}}</text></view>
  142. </view>
  143. <view class="order_list" v-if="orderDelites.prepayMoney">
  144. <view class="income_name">商品费用</view>
  145. <view class="income_numbers1">¥<text>{{orderDelites.prepayMoney}}</text></view>
  146. </view>
  147. <view class="order_list">
  148. <view class="income_name">合计</view>
  149. <view class="income_numbers1">¥<text>{{orderDelites.riderMoney}}</text></view>
  150. </view>
  151. </view>
  152. <!-- 接单按钮 -->
  153. <view class="tabbar_btn"
  154. v-if="orderDelites.indentState=='3'||orderDelites.indentState=='4'||orderDelites.indentState=='5'">
  155. <!-- <view class="btn_left">
  156. 联系TA
  157. </view>
  158. <view class="btn_right" @click="onshow">
  159. 确定送达
  160. </view> -->
  161. <view class="btn_right" @click="quhuo(orderDelites.indentId)" v-if="orderDelites.indentState=='3'">确认取货
  162. </view>
  163. <view class="btn_left" @click="zhuanOrder(orderDelites.indentId)" v-if="orderDelites.indentState=='3'">
  164. 转单
  165. </view>
  166. <view class="btn_left" v-if="orderDelites.indentState=='4'" @click="coll(orderDelites.userPhone)">
  167. 联系TA</view>
  168. <view class="btn_right" v-if="orderDelites.indentState=='4'" @click.stop="shouhuo(orderDelites)">确认送达</view>
  169. <view class="btn_right" v-if="orderDelites.indentState=='5'">客户待确认</view>
  170. </view>
  171. <!-- 聊天室 -->
  172. <view style="position: fixed;bottom: 150rpx;right: 50rpx;">
  173. <image @tap="goChat(orderDelites.indentId,orderDelites.orderId)" src="../../../static/image/chats.png"
  174. style="width: 100rpx;height: 100rpx;border-radius: 50rpx;">
  175. </image>
  176. <view class="shopxiaoix" v-if="RiderUnreadCount">{{RiderUnreadCount}}</view>
  177. </view>
  178. <!-- 转单 -->
  179. <u-popup v-model="showOrder" mode="center" border-radius="18" :closeable="closeable" close-icon="close-circle"
  180. close-icon-size="45" width="580rpx" height="400rpx">
  181. <view class="receipt_code">
  182. <view class="code_title">填写手机号码</view>
  183. <u-input v-model="phone" type="number" placeholder="填写转单人手机号码" :border="border" />
  184. <view class="sure" style="margin-top: 40rpx;" @click="zhuandan">确定</view>
  185. </view>
  186. </u-popup>
  187. <!-- 收货码弹框 -->
  188. <u-popup v-model="show" mode="center" border-radius="18" :closeable="closeable" close-icon="close-circle"
  189. close-icon-size="45" width="580rpx" height="400rpx">
  190. <view class="receipt_code">
  191. <view class="code_title">填写收货码</view>
  192. <u-input v-model="shouhuoma" :type="type" placeholder="请输入收货码" :border="border" />
  193. <view class="sure" @click="querenSh">确定</view>
  194. </view>
  195. </u-popup>
  196. <!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> -->
  197. </view>
  198. </template>
  199. <script>
  200. export default {
  201. data() {
  202. return {
  203. show: false,
  204. closeable: true,
  205. value: '',
  206. type: 'text',
  207. border: true,
  208. indentNumber: '',
  209. orderId: '',
  210. orderDelites: {},
  211. latitude: '', //骑手起点经度
  212. longitude: '', //骑手起点纬度
  213. qiJuli: '', //骑手距离
  214. shouhuoma: '',
  215. loading: true, // 是否显示骨架屏组件
  216. RiderUnreadCount: 0,
  217. indentId: '',
  218. showOrder: false,
  219. phone: ''
  220. }
  221. },
  222. onLoad(options) {
  223. var that = this
  224. console.error(options)
  225. // uni.showLoading({
  226. // title: '加载中......',
  227. // icon: 'none'
  228. // })
  229. that.indentNumber = options.id
  230. that.orderId = options.orderId
  231. uni.getLocation({
  232. type: 'wgs84',
  233. success: function(res) {
  234. console.log('当前位置的经度:' + res.longitude);
  235. console.log('当前位置的纬度:' + res.latitude);
  236. that.longitude = res.longitude
  237. that.latitude = res.latitude
  238. that.taskData()
  239. }
  240. });
  241. setInterval(function() {
  242. that.getRiderUnreadCount()
  243. }, 10000)
  244. },
  245. methods: {
  246. zhuanOrder(indentId) {
  247. this.phone = ''
  248. this.indentId = indentId
  249. this.showOrder = true
  250. },
  251. zhuandan() {
  252. this.$Request.postT('/app/tbindent/transferOfOrder', {
  253. indentId: this.indentId,
  254. phone: this.phone
  255. }).then(res => {
  256. if (res.code == 0) {
  257. this.phone = ''
  258. this.$queue.setData('zhuandan', this.indentId);
  259. uni.showToast({
  260. title: '转单成功',
  261. icon: "none"
  262. });
  263. setTimeout(d => {
  264. uni.navigateBack()
  265. }, 1000)
  266. } else {
  267. uni.showToast({
  268. title: res.msg,
  269. icon: "none"
  270. });
  271. }
  272. });
  273. },
  274. goChat(indentId, orderId) {
  275. uni.navigateTo({
  276. url: '/pages/riderMy/kefu/liaotianshi?indentId=' + indentId + '&orderId=' + orderId
  277. });
  278. },
  279. copyOrder(value) {
  280. uni.setClipboardData({
  281. data: value, //要被复制的内容
  282. success: () => { //复制成功的回调函数
  283. uni.showToast({ //提示
  284. title: '复制成功'
  285. })
  286. }
  287. });
  288. },
  289. onshow() {
  290. this.show = true
  291. },
  292. coll(phone) {
  293. uni.makePhoneCall({
  294. phoneNumber: phone
  295. });
  296. },
  297. taskData() {
  298. if (this.indentNumber) {
  299. if (!this.longitude) {
  300. uni.showModal({
  301. title: '温馨提示',
  302. content: '未开启定位权限,无法获取数据,请开启一下',
  303. showCancel: false,
  304. cancelText: '',
  305. confirmText: '我知道了',
  306. success: res => {
  307. uni.navigateBack({
  308. })
  309. },
  310. fail: () => {},
  311. complete: () => {}
  312. });
  313. return;
  314. }
  315. this.$Request.postT('/app/tbindent/indentMessage', {
  316. indentNumber: this.indentNumber,
  317. ol: this.longitude,
  318. od: this.latitude
  319. }).then(res => {
  320. this.loading = false
  321. uni.hideLoading()
  322. if (res.code == 0 && res.data) {
  323. // this.jsjl(this.longitude,this.latitude,res.data.deliveryAddressLatitude, res.data.deliveryAddressLongitude)
  324. // this.jsjl(res.data.shipAddressLatitude, res.data.shipAddressLongitude,res.data.deliveryAddressLatitude, res.data.deliveryAddressLongitude)
  325. // if (res.data.distanceInitial > 1000) {
  326. // res.data.distanceInitials = (Number(res.data.distanceInitial) / 1000).toFixed(2)
  327. // }
  328. if (res.data.distance > 1000) {
  329. res.data.distances = (Number(res.data.distance) / 1000).toFixed(2)
  330. }
  331. this.orderDelites = res.data
  332. this.orderDelites.orderCode = res.data.orderCode.substring(res.data.orderCode.length -
  333. 3)
  334. console.log('````', res.data)
  335. } else {
  336. console.log('失败:', res.data)
  337. uni.navigateBack({
  338. })
  339. }
  340. this.loading = false;
  341. });
  342. } else {
  343. this.$Request.postT('/app/tbindent/indentMessageByOrderId', {
  344. orderId: this.orderId,
  345. ol: this.longitude,
  346. od: this.latitude
  347. }).then(res => {
  348. this.loading = false
  349. uni.hideLoading()
  350. if (res.code == 0) {
  351. // this.jsjl(this.longitude,this.latitude,res.data.deliveryAddressLatitude, res.data.deliveryAddressLongitude)
  352. // this.jsjl(res.data.shipAddressLatitude, res.data.shipAddressLongitude,res.data.deliveryAddressLatitude, res.data.deliveryAddressLongitude)
  353. if (res.data.distanceInitial > 1000) {
  354. res.data.distanceInitials = (Number(res.data.distanceInitial) / 1000).toFixed(2)
  355. }
  356. if (res.data.distance > 1000) {
  357. res.data.distances = (Number(res.data.distance) / 1000).toFixed(2)
  358. }
  359. this.orderDelites = res.data
  360. this.orderDelites.orderCode = res.data.orderCode.substring(res.data.orderCode.length -
  361. 3)
  362. console.log('````', res.data)
  363. } else {
  364. console.log('失败:', res.data)
  365. }
  366. this.loading = false;
  367. });
  368. }
  369. },
  370. quhuo(indentId) {
  371. let that = this
  372. uni.showModal({
  373. title: '提示',
  374. content: '确认取到货吗',
  375. success: function(res) {
  376. if (res.confirm) {
  377. that.$Request.postJson('/app/tbindent/riderBuyGoods', {
  378. indentId: indentId,
  379. indentState: "4"
  380. }).then(res => {
  381. if (res.code == 0) {
  382. that.taskData()
  383. uni.showToast({
  384. title: '确认取货成功',
  385. icon: "none"
  386. });
  387. } else {
  388. uni.showToast({
  389. title: res.msg,
  390. icon: "none"
  391. });
  392. }
  393. });
  394. }
  395. }
  396. })
  397. },
  398. goStart() {
  399. // let obj = {
  400. // name: this.orderDelites.shopAddressDetail,
  401. // lat: this.orderDelites.shopLat,
  402. // long: this.orderDelites.shopLng,
  403. // }
  404. // this.navgate(obj)
  405. // 一键导航
  406. let latitude = this.orderDelites.shopLat
  407. let longitude = this.orderDelites.shopLng
  408. let name = this.orderDelites.shopAddressDetail
  409. uni.openLocation({
  410. latitude: latitude - 0, //要去的纬度-地址
  411. longitude: longitude - 0, //要去的经度-地址
  412. name: name, //地址名称
  413. address: name, //详细地址名称
  414. success: function() {
  415. console.log('导航成功');
  416. },
  417. fail: function(error) {
  418. console.log(error)
  419. }
  420. })
  421. },
  422. goEnd() {
  423. // let obj = {
  424. // name: this.orderDelites.userAddressDetail,
  425. // lat: this.orderDelites.userLat,
  426. // long: this.orderDelites.userLng,
  427. // }
  428. // this.navgate(obj)
  429. let latitude = this.orderDelites.userLat
  430. let longitude = this.orderDelites.userLng
  431. let name = this.orderDelites.userAddressDetail
  432. uni.openLocation({
  433. latitude: Number(latitude), //要去的纬度-地址
  434. longitude: Number(longitude), //要去的经度-地址
  435. name: name, //地址名称
  436. address: name, //详细地址名称
  437. success: function() {
  438. console.log('导航成功');
  439. },
  440. fail: function(error) {
  441. console.log(error)
  442. }
  443. })
  444. },
  445. navgate(e) {
  446. console.log(e)
  447. let plugin = requirePlugin('routePlan');
  448. let key = this.$queue.getData('mapKey'); //使用在腾讯位置服务申请的key
  449. let referer = this.$queue.getData('mapName'); //调用插件的app的名称
  450. let endPoint = JSON.stringify({ //终点
  451. 'name': e.name,
  452. 'latitude': e.lat,
  453. 'longitude': e.long
  454. });
  455. wx.navigateTo({
  456. url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
  457. });
  458. },
  459. shouhuo(e) {
  460. console.log(e)
  461. this.indentNumber = e.indentNumber
  462. if (e.itemCodeFlag == 0 && e.indentType != 5) {
  463. this.show = true
  464. } else {
  465. this.querenSh()
  466. }
  467. },
  468. querenSh() {
  469. let that = this
  470. that.$Request.postT('/app/tbindent/riderDelivery', {
  471. indentNumber: that.indentNumber,
  472. itemCode: that.shouhuoma
  473. }).then(res => {
  474. console.log(res)
  475. if (res.code == 0) {
  476. uni.showToast({
  477. title: '订完完成',
  478. icon: "none"
  479. });
  480. setTimeout(function() {
  481. uni.navigateBack()
  482. }, 1000)
  483. } else {
  484. uni.showToast({
  485. title: res.msg,
  486. icon: "none"
  487. });
  488. }
  489. });
  490. },
  491. getRiderUnreadCount() {
  492. let that = this
  493. let data = {
  494. ordersId: that.orderId
  495. }
  496. that.$Request.getT("/app/ordersChat/selectRiderUnreadCount", data).then(res => {
  497. if (res.code == 0) {
  498. if (res.data > 0) {
  499. if (that.RiderUnreadCount != res.data) {
  500. that.RiderUnreadCount = res.data
  501. that.aplayAudio()
  502. uni.showModal({
  503. title: '消息',
  504. content: '有' + res.data + '条消息,请前往聊天列表处理。',
  505. success: (ret) => {
  506. if (ret.confirm) {
  507. uni.navigateTo({
  508. url: '/pages/riderMy/kefu/liaotian'
  509. })
  510. } else {
  511. console.log('else', ret)
  512. that.defineCallBack()
  513. }
  514. }
  515. });
  516. }
  517. }
  518. }
  519. });
  520. },
  521. //消息提示
  522. aplayAudio() {
  523. // console.log('语音提示')
  524. const innerAudioContext = uni.createInnerAudioContext();
  525. innerAudioContext.autoplay = true;
  526. innerAudioContext.src =
  527. 'https://pw.xianmxkj.com/file/uploadPath/2022/01/19/0753211f78d718d44ee6372e33eae9ee.mp3';
  528. innerAudioContext.onPlay(() => {
  529. console.log('开始播放');
  530. });
  531. innerAudioContext.onError((res) => {
  532. console.log(res.errMsg);
  533. console.log(res.errCode);
  534. });
  535. },
  536. }
  537. }
  538. </script>
  539. <style>
  540. body {
  541. background: #F5F5F5;
  542. }
  543. .content {
  544. width: 100%;
  545. margin-bottom: 159rpx;
  546. }
  547. .part_one {
  548. width: 90%;
  549. margin: 0 auto;
  550. height: 120rpx;
  551. background: #ffffff;
  552. margin-top: 20rpx;
  553. border-radius: 23rpx;
  554. padding-top: 10rpx;
  555. }
  556. .pickup {
  557. width: 90%;
  558. margin: 0 auto;
  559. font-size: 29rpx;
  560. font-weight: bold;
  561. letter-spacing: 2rpx;
  562. line-height: 60rpx;
  563. }
  564. .pickup_tit {
  565. color: #999999;
  566. font-size: 22rpx;
  567. width: 90%;
  568. margin: 0 auto;
  569. }
  570. .quhuoma {
  571. font-size: 50rpx;
  572. text-align: center;
  573. font-weight: 600;
  574. margin: 50rpx 0;
  575. height: 100rpx;
  576. }
  577. .list_box1 {
  578. width: 90%;
  579. margin: 0 auto;
  580. /* height: 320rpx; */
  581. background: #FFFFFF;
  582. border-radius: 23rpx;
  583. /* box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(198, 186, 181, 0.20); */
  584. margin-top: 20rpx;
  585. }
  586. .part2 {
  587. width: 90%;
  588. margin: 0 auto;
  589. padding-top: 25rpx;
  590. }
  591. .box_add {
  592. display: flex;
  593. }
  594. .distance {
  595. flex: 1;
  596. text-align: center;
  597. font-size: 28rpx;
  598. }
  599. .a {
  600. font-size: 16rpx;
  601. }
  602. .add_name {
  603. flex: 8;
  604. position: relative;
  605. }
  606. .buy {
  607. /* position: absolute;
  608. top: 0rpx; */
  609. }
  610. .buy image {
  611. width: 20px;
  612. height: 20px;
  613. }
  614. .send {
  615. /* position: absolute;
  616. top: 0rpx; */
  617. }
  618. .send image {
  619. width: 20px;
  620. height: 20px;
  621. }
  622. .sh_name {
  623. font-size: 30rpx;
  624. font-weight: bold;
  625. letter-spacing: 2rpx;
  626. margin-left: 10px;
  627. }
  628. .xs_add {
  629. color: #999999;
  630. font-size: 24rpx;
  631. margin-top: 10rpx;
  632. margin-left: 30px;
  633. }
  634. .jiantou {
  635. margin-left: 23rpx;
  636. }
  637. .jiantou image {
  638. width: 20rpx;
  639. height: 40rpx;
  640. }
  641. .part3 {
  642. width: 90%;
  643. margin: 0 auto;
  644. display: flex;
  645. }
  646. .three_left {
  647. flex: 1;
  648. height: 100rpx;
  649. display: flex;
  650. justify-content: left;
  651. align-items: center;
  652. }
  653. .three_left image {
  654. width: 36rpx;
  655. height: 37rpx;
  656. }
  657. .box_two1 {
  658. background: #c4e2ff;
  659. color: #359CFF;
  660. /* width: 60px; */
  661. padding: 0 5px;
  662. height: 45rpx;
  663. font-size: 22rpx;
  664. text-align: center;
  665. line-height: 45rpx;
  666. border-radius: 5rpx;
  667. margin-top: 20rpx;
  668. margin-left: 10rpx;
  669. }
  670. .three_left text {
  671. color: #333333;
  672. font-size: 25rpx;
  673. margin-left: 10rpx;
  674. }
  675. .three_right {
  676. flex: 1;
  677. height: 100rpx;
  678. display: flex;
  679. justify-content: flex-end;
  680. align-items: center;
  681. color: #FF412D;
  682. font-size: 32rpx;
  683. font-weight: bold;
  684. }
  685. /* tip */
  686. .tip_box {
  687. width: 90%;
  688. margin: 0 auto;
  689. height: 180rpx;
  690. background: #FFFFFF;
  691. margin-top: 20rpx;
  692. border-radius: 22rpx;
  693. }
  694. .tip_part1 {
  695. display: flex;
  696. }
  697. .tip_title {
  698. /* flex: 1; */
  699. height: 80rpx;
  700. display: flex;
  701. justify-content: left;
  702. align-items: center;
  703. font-size: 32rpx;
  704. font-weight: bold;
  705. margin-left: 30rpx;
  706. }
  707. .tip_rider {
  708. flex: 1;
  709. font-size: 20rpx;
  710. display: flex;
  711. justify-content: flex-end;
  712. align-items: center;
  713. margin-left: 30rpx;
  714. }
  715. .tip_rider text {
  716. font-size: 30rpx;
  717. }
  718. .tip_content {
  719. width: 90%;
  720. margin: 0 auto;
  721. font-size: 27rpx;
  722. font-weight: bold;
  723. letter-spacing: 2rpx;
  724. margin-top: 15rpx;
  725. }
  726. .u-line {
  727. border-bottom-width: 3px !important;
  728. }
  729. /* 订单信息 */
  730. .order_box {
  731. width: 90%;
  732. margin: 0 auto;
  733. /* height: 300rpx; */
  734. background: #ffffff;
  735. margin-top: 20rpx;
  736. border-radius: 22rpx;
  737. }
  738. .order_title {
  739. width: 90%;
  740. margin: 0 auto;
  741. font-size: 32rpx;
  742. font-weight: 600;
  743. line-height: 67rpx;
  744. letter-spacing: 3rpx;
  745. }
  746. .order_list {
  747. display: flex;
  748. }
  749. .order_name {
  750. flex: 1;
  751. margin-left: 35rpx;
  752. color: #999999;
  753. font-size: 25rpx;
  754. height: 75rpx;
  755. display: flex;
  756. justify-content: left;
  757. align-items: center;
  758. }
  759. .order_numbers {
  760. flex: 1;
  761. color: #333333;
  762. display: flex;
  763. justify-content: flex-end;
  764. align-items: center;
  765. font-size: 26rpx;
  766. margin-right: 35rpx;
  767. }
  768. /* 费用明细 */
  769. .income_name {
  770. flex: 1;
  771. margin-left: 35rpx;
  772. color: #999999;
  773. font-size: 26rpx;
  774. height: 75rpx;
  775. display: flex;
  776. justify-content: left;
  777. align-items: center;
  778. }
  779. .income_numbers {
  780. flex: 1;
  781. color: #333333;
  782. display: flex;
  783. justify-content: flex-end;
  784. align-items: center;
  785. font-size: 26rpx;
  786. margin-right: 35rpx;
  787. }
  788. .income_numbers1 {
  789. flex: 1;
  790. color: #FF2400;
  791. display: flex;
  792. justify-content: flex-end;
  793. align-items: center;
  794. font-size: 26rpx;
  795. margin-right: 35rpx;
  796. }
  797. /* 接单按钮 */
  798. .tabbar_btn {
  799. position: fixed;
  800. bottom: 0rpx;
  801. left: 0rpx;
  802. right: 0rpx;
  803. width: 100%;
  804. height: 120rpx;
  805. background: #FFFFFF;
  806. display: flex;
  807. justify-content: center;
  808. align-items: center;
  809. }
  810. .btn_left {
  811. flex: 1;
  812. height: 80rpx;
  813. color: white;
  814. background: #33D442;
  815. text-align: center;
  816. line-height: 80rpx;
  817. border-radius: 16rpx;
  818. margin-left: 35rpx;
  819. margin-right: 20rpx;
  820. font-size: 26rpx;
  821. letter-spacing: 3rpx;
  822. }
  823. .btn_right {
  824. flex: 1;
  825. height: 80rpx;
  826. color: white;
  827. background: #FF7F00;
  828. text-align: center;
  829. line-height: 80rpx;
  830. border-radius: 16rpx;
  831. margin-left: 20rpx;
  832. margin-right: 35rpx;
  833. font-size: 26rpx;
  834. letter-spacing: 3rpx;
  835. }
  836. /* 收货码弹框 */
  837. .receipt_code {
  838. width: 90%;
  839. margin: 0 auto;
  840. }
  841. .code_title {
  842. width: 100%;
  843. line-height: 100rpx;
  844. font-size: 31rpx;
  845. font-weight: bold;
  846. text-align: center;
  847. letter-spacing: 2rpx;
  848. margin-top: 21rpx;
  849. margin-bottom: 25rpx;
  850. }
  851. .u-input--border {
  852. border: 1px solid #F2F2F2 !important;
  853. background: #F2F2F2 !important;
  854. color: #999999 !important;
  855. font-weight: 500 !important;
  856. letter-spacing: 2rpx !important;
  857. }
  858. .u-input__input {
  859. font-size: 30rpx;
  860. font-weight: bold;
  861. flex: 1;
  862. color: #999999 !important;
  863. min-height: 85rpx !important;
  864. margin-top: 7rpx;
  865. }
  866. .sure {
  867. width: 100%;
  868. height: 80rpx;
  869. background: #FF7F00;
  870. color: white;
  871. border-radius: 46rpx;
  872. text-align: center;
  873. line-height: 80rpx;
  874. margin-top: 30rpx;
  875. letter-spacing: 2rpx;
  876. }
  877. .shopxiaoix {
  878. background: red;
  879. color: #ffffff;
  880. width: 40rpx;
  881. height: auto;
  882. text-align: center;
  883. border-radius: 30rpx;
  884. position: relative;
  885. top: -66px;
  886. left: 35px;
  887. }
  888. </style>