orderDetails.vue 39 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375
  1. <!-- 订单详情-->
  2. <template>
  3. <view class="content">
  4. <view class="fixed1"></view>
  5. <view class="fixed">
  6. <view class='title flex flex-center'>
  7. <image class="back" src="../../static/images/return.png" @click="back" mode=""
  8. style="width: 40rpx; height: 40rpx;"></image>
  9. <!-- <u-icon class="back" name="arrow-left" color="" size="20" @click="back"></u-icon> -->
  10. <view class="nav-title">订单详情</view>
  11. <image class="search" style='width:18px;height:18px;' src="../../static/images/kefu.png"
  12. @click="$helper.contactCustomerService()" mode=""></image>
  13. <!-- <u-icon class="search" name="server-fill" color="" size="28" @click="$helper.contactCustomerService()"> -->
  14. </u-icon>
  15. </view>
  16. </view>
  17. <view class="content1">
  18. <view class="item1">
  19. <view class="status">{{dataObj.cargoOwnerStatus}}</view>
  20. </view>
  21. <!-- flex flex-space-between -->
  22. <view class="item2">
  23. <u-button class="btn" text="拒绝" @click="accept(2)" v-if="dataObj.cargoOwnerStatus=='待接单'">
  24. </u-button>
  25. <u-button class="btn" text="接受" @click="accept(1)" v-if="dataObj.cargoOwnerStatus=='待接单'">
  26. </u-button>
  27. <u-button class="btn" text="终止" @click="clickstop()" v-if="dataObj.cargoOwnerStatus=='未装车'">
  28. </u-button>
  29. <!-- <u-button class="btn" @click="lookContract" v-if="dataObj.cargoOwnerContract=='1'">查看合同</u-button>
  30. <u-button class="btn" text="签订合同" @click="signContract" v-if="dataObj.cargoOwnerStatus=='待确认装车'&&dataObj.cargoOwnerContract!='1'">
  31. </u-button> -->
  32. <u-button class="btn" text="驳回装车信息" @click="confirmLoading(5)" v-if="dataObj.cargoOwnerStatus=='待确认装车'">
  33. </u-button>
  34. <!-- <u-button class="btn" text="确认装车" @click="confirmLoading(3)"
  35. v-if="dataObj.cargoOwnerStatus=='待确认装车'&&dataObj.cargoOwnerContract=='1'">
  36. </u-button> -->
  37. <u-button class="btn" text="确认装车" @click="confirmLoading(3)" v-if="dataObj.cargoOwnerStatus=='待确认装车'">
  38. </u-button>
  39. <u-button class="btn" text="驳回卸车信息" @click="confirmUnLoading(6)" v-if="dataObj.cargoOwnerStatus=='待收货'">
  40. </u-button>
  41. <u-button class="btn" text="确认卸车" @click="confirmUnLoading(4)" v-if="dataObj.cargoOwnerStatus=='待收货'">
  42. </u-button>
  43. <u-button class="btn" text="确认运费" @click="freightOk()" v-if="dataObj.cargoOwnerStatus=='司机驳回运费信息'">
  44. </u-button>
  45. <!-- <u-button class="btn" text="确认卸车" @click="confirmLoading(4)" v-if="dataObj.cargoOwnerStatus=='待收货'">
  46. </u-button> -->
  47. <u-button class="btn" text="付款" @click="closed"
  48. v-if="dataObj.cargoOwnerStatus=='待结算'||dataObj.cargoOwnerStatus=='已结算'"></u-button>
  49. <u-button class="btn" text="还款" @click="stop" v-if="dataObj.cargoOwnerStatus=='待还款'"></u-button>
  50. <u-button class="btn" text="联系客服" @click="$helper.contactCustomerService()"
  51. v-if="dataObj.cargoOwnerStatus!='待接单'&&dataObj.cargoOwnerStatus!='未装车'">
  52. </u-button>
  53. </view>
  54. <view class="item3 flex flex-space-between align-center">
  55. <view class="left flex align-center" @click="goTodriverDetail">
  56. <u--image :showLoading="true" :src="dataObj.driverPortrait" width="44px" height="44px" @click=""
  57. shape='circle'>
  58. </u--image>
  59. <view class="name">{{dataObj.driverName}}</view>
  60. <view class="flex align-center">
  61. <!-- <view class="number">4.98</view> -->
  62. <!-- <u-icon class="star" name="star-fill" color="#FEC823" size="20" @click="back"></u-icon> -->
  63. </view>
  64. </view>
  65. <view class="right flex s-row align-center phone">
  66. <view class="bgc">
  67. <image class="phone" style='width:24px;height:24px;' src="../../static/images/dianhua.png"
  68. @click="toPhone" mode=""></image>
  69. <!-- <u-icon class="phone" name="phone-fill" color="#2772FB" size="20" @click="toPhone"></u-icon> -->
  70. </view>
  71. <view class="hz-name">联系司机</view>
  72. </view>
  73. </view>
  74. <!-- <view class='row-between'>
  75. <view class="">货主</view>
  76. <view>张三</view>
  77. </view>
  78. <view class='row-between'>
  79. <view class="">货主单位</view>
  80. <view>黑龙江中天昊元贸易有限公司</view>
  81. </view>
  82. <view class='row-between'>
  83. <view class="">卸货地</view>
  84. <view>黑龙江省齐齐哈尔市梅里斯达斡尔族区杜尔门沁达斡尔乡53农场</view>
  85. </view>
  86. <view class='row-between'>
  87. <view class="">货名</view>
  88. <view>玉米</view>
  89. </view>
  90. <view class='row-between'>
  91. <view class="">距离</view>
  92. <view>约15公里</view>
  93. </view>
  94. <view class='row-between'>
  95. <view class="">货运费</view>
  96. <view>100元/吨</view>
  97. </view> -->
  98. </view>
  99. <view class="content2">
  100. <view class="flex flex-space-between border">
  101. <view class="flex s-row item1">
  102. <view class="fontsize-46 fontweight-500 text">{{dataObj.sendCity}}</view>
  103. <view class="fontsize-28 gray">发货地</view>
  104. </view>
  105. <image class="change-btn" src="@/static/images/common/jt.png" mode='widthFix'></image>
  106. <view class="flex s-row item2">
  107. <view class="fontsize-46 fontweight-500 text" @click="">{{dataObj.unloadCity}}</view>
  108. <view class="fontsize-28 gray text-align-right">卸货地</view>
  109. </view>
  110. </view>
  111. <view class="level2-title">基本信息</view>
  112. <view class='row-between'>
  113. <view class="row-left-text gray">订单编号</view>
  114. <view class="row-right-text">{{dataObj.orderNo}}</view>
  115. </view>
  116. <!-- <view class='row-between'>
  117. <view class="row-left-text gray">货主</view>
  118. <view class="row-right-text">{{dataObj.cargoOwner}}</view>
  119. </view> -->
  120. <view class='row-between'>
  121. <view class="row-left-text gray">发货单位</view>
  122. <view class="row-right-text">{{dataObj.compName?dataObj.compName:'个人货主'}}</view>
  123. </view>
  124. <view class='row-between'>
  125. <view class="row-left-text gray">发货地</view>
  126. <view class="row-right-text place">
  127. {{dataObj.sendPrivate}}{{dataObj.sendCity}}{{dataObj.sendArea}}{{dataObj.sendDetailedAddress}}
  128. </view>
  129. </view>
  130. <view class='row-between'>
  131. <view class="row-left-text gray">卸货地</view>
  132. <view class="row-right-text place">
  133. {{dataObj.unloadPrivate}}{{dataObj.unloadCity}}{{dataObj.unloadArea}}{{dataObj.unloadDetailedAddress}}
  134. </view>
  135. </view>
  136. <view class='row-between'>
  137. <view class="row-left-text gray">货名</view>
  138. <view class="row-right-text">{{dataObj.goodsName}}</view>
  139. </view>
  140. <view class='row-between'>
  141. <view class="row-left-text gray">距离</view>
  142. <view class="row-right-text">约{{dataObj.distance}}公里</view>
  143. </view>
  144. <!-- <view class='row-between'>
  145. <view class="row-left-text gray">运费</view>
  146. <view class="row-right-text">{{dataObj.freight}}{{dataObj.illingMethod==0?'元/吨':'元/车'}}</view>
  147. </view>
  148. -->
  149. </view>
  150. <view class="content3" v-if="status1">
  151. <view class="level2-title">承运信息</view>
  152. <view class='row-between'>
  153. <view class="row-left-text gray">合同编号</view>
  154. <view class="row-right-text">
  155. {{dataObj.publishTaskInfo.wtContractNo?dataObj.publishTaskInfo.wtContractNo:'未签订'}}
  156. </view>
  157. </view>
  158. <view class='row-between'>
  159. <view class="row-left-text gray">车牌号</view>
  160. <view class="row-right-text">{{dataObj.hyCarrierInfo.carNo}}</view>
  161. </view>
  162. <view class='row-between'>
  163. <view class="row-left-text gray">预计运费</view>
  164. <view class="row-right-text">{{dataObj.hyCarrierInfo.estimatedFreight}}元</view>
  165. </view>
  166. <view class='row-between'>
  167. <view class="row-left-text gray">预付款</view>
  168. <view class="row-right-text">{{dataObj.advanceCharge}}元</view>
  169. </view>
  170. <view class='row-between'>
  171. <view class="row-left-text gray">装车净重</view>
  172. <view class="row-right-text">{{dataObj.hyCarrierInfo?dataObj.hyCarrierInfo.loadingWeight:""}}吨</view>
  173. </view>
  174. <view class='row-between' v-if="dataObj.hyCarrierInfo && dataObj.hyCarrierInfo.unloadingWeight">
  175. <view class="row-left-text gray">卸车净重</view>
  176. <view class="row-right-text">{{dataObj.hyCarrierInfo?dataObj.hyCarrierInfo.unloadingWeight:""}}吨</view>
  177. </view>
  178. <view class='row-between'>
  179. <view class="row-left-text gray">运输开始日期</view>
  180. <view class="row-right-text">{{dataObj.tranStartDate}}</view>
  181. </view>
  182. <view class='row-between'>
  183. <view class="row-left-text gray">运输结束日期</view>
  184. <view class="row-right-text">{{dataObj.tranEndDate}}</view>
  185. </view>
  186. <view class='row-between'>
  187. <view class="row-left-text gray">装车时间</view>
  188. <view class="row-right-text">{{dataObj.hyCarrierInfo.loadingDate}}</view>
  189. </view>
  190. <view class='row-between'>
  191. <view class="row-left-text gray">运输时长</view>
  192. <view class="row-right-text">{{dataObj.hyCarrierInfo.transportationDuration }} 小时</view>
  193. </view>
  194. <view class='row-between'>
  195. <view class="row-left-text gray">装车照片</view>
  196. <view class="flex">
  197. <u--image :showLoading="true" :src="item" width="40px" height="40px"
  198. v-for="(item,index) in zcImgList" @click='ylImg(zcImgList)'></u--image>
  199. </view>
  200. </view>
  201. <view
  202. v-if='dataObj.orderStatus=="待货主确认卸车"||dataObj.orderStatus=="待平台确认卸车"||dataObj.orderStatus=="货主驳回装车信息"||dataObj.orderStatus=="平台驳回装车信息"||dataObj.orderStatus=="待确认运费"||dataObj.cargoOwnerStatus=="已完结"'>
  203. <view class='row-between'>
  204. <view class="row-left-text gray">合计应付运费</view>
  205. <view class="row-right-text">
  206. <u--input v-if='dataObj.orderStatus=="待货主确认卸车"' placeholder="请输入合计应付运费" border="none"
  207. inputAlign="right" clearable v-model="totalFreight"></u--input>
  208. <view
  209. v-if='dataObj.orderStatus=="待平台确认卸车"||dataObj.orderStatus=="货主驳回装车信息"||dataObj.orderStatus=="平台驳回装车信息"||dataObj.orderStatus=="待确认运费"||dataObj.cargoOwnerStatus=="已完结"'>
  210. {{totalFreight}}
  211. </view>
  212. </view>
  213. </view>
  214. <view class='row-between'>
  215. <view class="row-left-text gray">卸车时间</view>
  216. <view class="row-right-text">{{dataObj.hyCarrierInfo.unloadingDate}}</view>
  217. </view>
  218. <view class='row-between'>
  219. <view class="row-left-text gray">卸车照片</view>
  220. <view class="flex">
  221. <u--image :showLoading="true" :src="item" width="40px" height="40px"
  222. v-for="(item,index) in xcImgList" @click='ylImg(xcImgList)'></u--image>
  223. </view>
  224. </view>
  225. <view class='row-between'>
  226. <view class="row-left-text gray">回单照片</view>
  227. <view class="flex">
  228. <u--image @click='ylImg(hdImgList)' :showLoading="true" :src='item' width="40px" height="40px"
  229. v-for="(item,index) in hdImgList"></u--image>
  230. </view>
  231. </view>
  232. </view>
  233. </view>
  234. <!-- v-if="status2 -->
  235. <view class="content4" v-if="status2">
  236. <view class="level2-title">运费信息(单位:元)</view>
  237. <view class='row-between'>
  238. <view class="row-left-text gray">预付运费</view>
  239. <view class="row-right-text">{{dataObj.freightInfo.prepaidFreight}}</view>
  240. </view>
  241. <view class='flex flex-end'>
  242. <view class="row-right-text">{{dataObj.freightInfo.prepaidFreightDate}}</view>
  243. </view>
  244. <view class='row-between'>
  245. <view class="row-left-text gray">运费尾款</view>
  246. <view class="row-right-text">
  247. {{dataObj.freightInfo.ownerFreightBalanceDate?dataObj.freightInfo.ownerFreightBalance:"未支付"}}
  248. </view>
  249. </view>
  250. <view class='flex flex-end'>
  251. <view class="row-right-text">{{dataObj.freightInfo.ownerFreightBalanceDate}}</view>
  252. </view>
  253. <view style='flex-wrap: wrap;' class='flex mx row-left-text'>
  254. <!-- 明细:预付{{dataObj.advanceCharge}}元,服务费{{dataObj.freightInfo.driverServiceCharge}}元,尾款{{dataObj.freightInfo.ownerFreightBalance}}元,合计{{dataObj.freightInfo.totalPayment}}元。 -->
  255. 明细:预付{{dataObj.advanceCharge}}元,工本费{{dataObj.freightInfo.ownerServiceCharge}}元,<text
  256. v-if="dataObj.freightInfo.ownerFreightBalance">尾款{{dataObj.freightInfo.ownerFreightBalance}}元,</text>合计{{dataObj.freightInfo.totalPayment}}元。
  257. </view>
  258. </view>
  259. <!-- v-if="status3" -->
  260. <view class="content4" v-if="status3">
  261. <view class="level2-title gray">还款信息</view>
  262. <view class='row-between'>
  263. <view class="row-left-text gray">运费</view>
  264. <view class="row-right-text">{{dataObj.freightInfo.totalRepayable}}</view>
  265. </view>
  266. <view class='flex flex-end'>
  267. <view class="gray row-right-text">{{dataObj.freightInfo.prepaidFreightDate}}</view>
  268. </view>
  269. <view class='row-between'>
  270. <view class="row-left-text gray">超期费(每天3%)</view>
  271. <view class="row-right-text">{{dataObj.freightInfo.overdueFee}}</view>
  272. </view>
  273. <view class='row-between'>
  274. <view class="row-left-text gray">合计应还</view>
  275. <view class="row-right-text">{{dataObj.freightInfo.totalRepayable}}</view>
  276. </view>
  277. <view class='row-between'>
  278. <view class="row-left-text gray">还款(尾号{{dataObj.freightInfo.repaymentBank}})</view>
  279. <view class="row-right-text">{{dataObj.freightInfo.repaymentConfirm}}</view>
  280. </view>
  281. <view class='row-between'>
  282. <view class="row-left-text gray">{{dataObj.freightInfo.updateDate}}</view>
  283. <!-- <view class="row-right-text">{{dataObj.freightInfo.freightBalance}}</view> -->
  284. </view>
  285. </view>
  286. <u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :confirmText='confirmText'
  287. :closeOnClickOverlay='true' :showCancelButton='true' @confirm="$u.throttle(confirmClick(), 1000)"
  288. @close="cancelClick" @cancel="cancelClick" class="modal">
  289. <u-radio-group v-model="radiovalue1" placement="" v-if='isShowTerminationReason' class='row'>
  290. <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
  291. :label="item.name" :name="item.name" @change="radioChange">
  292. </u-radio>
  293. </u-radio-group>
  294. <u--textarea class="row" v-model="value2" placeholder="终止原因描述" count maxlength='50'
  295. v-if='isShowTerminationReason'>
  296. </u--textarea>
  297. </u-modal>
  298. <u-popup :show="show" mode="bottom" @close="close" @open="open">
  299. <view class="u-popup-wrap">
  300. <view>
  301. <image style='width:12px;height:12px;' @click='closepopup' class='close'
  302. src="../../static/images/order/guanbi@3x.png" mode=""></image>
  303. <!-- <u-icon @click="closepopup" class='close' name="close" size="20"></u-icon> -->
  304. </view>
  305. <view style='fon-size:34rpx;margin-bottom:20px;text-align:center;font-weight: 600;'>确认终止订单</view>
  306. <view style="margin: 0 auto;">
  307. <u-radio-group iconPlacement="right" v-model="radiovalue1" placement="">
  308. <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
  309. :label="item.name" :name="item.name" @change="radioChange">
  310. </u-radio>
  311. </u-radio-group>
  312. </view>
  313. <view style='border-top:10px solid #F2F4F7;position:absolute;left:0;height:0;width:100%;'></view>
  314. <view style='padding:40rpx 0 30rpx;'>终止原因描述</view>
  315. <u--textarea class="row" v-model="value2" placeholder="终止原因描述" count maxlength='50'>
  316. </u--textarea>
  317. <view class='termination' :class="{'active':value2.length>0}" @click='$u.throttle(termination(), 1000)'>
  318. 终止</view>
  319. </view>
  320. </u-popup>
  321. <u-toast ref="uToast"></u-toast>
  322. <!-- <u-popup :show="moneyShow" mode="center" @close="close" @open="open">
  323. <view class="freight">
  324. <view class="freight_text">
  325. 合计运费
  326. </view>
  327. <u--input v-model="totalFreight" placeholder="请输入合计运费"></u--input>
  328. <view class="freight_up">
  329. <view class="freight_item">取消</view>
  330. <view class="freight_item">确定</view>
  331. </view>
  332. </view>
  333. </u-popup> -->
  334. <u-modal :show="moneyShow" title="合计运费" showCancelButton @confirm="moneyClick" @close="moneyclose"
  335. @cancel="moneyclose">
  336. <view class="slot-content">
  337. <u--input v-model="totalFreight" type="number" placeholder="合计应付运费(含预付款)"></u--input>
  338. </view>
  339. </u-modal>
  340. <!-- <view v-if="lookAlert" class="look-contract" @click="lookAlert==false">
  341. <u-button class="btn" text="查看合同" @click="lookContract"></u-button>
  342. <u-button class="btn" text="签名"></u-button>
  343. <view class="wrapper">
  344. <view class="handBtn">
  345. <image @click="selectColorEvent('black','#1A1A1A')"
  346. :src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
  347. :class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
  348. <image @click="selectColorEvent('red','#ca262a')"
  349. :src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
  350. :class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
  351. <button @click="retDraw" class="delBtn">重写</button>
  352. <button @click="saveCanvasAsImg" class="saveBtn">保存</button>
  353. <button @click="previewCanvasImg" class="previewBtn">预览</button>
  354. <button @click="subCanvas" class="subBtn">完成</button>
  355. </view>
  356. <view class="handCenter">
  357. <canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
  358. @touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
  359. </view>
  360. <view class="handRight">
  361. <view class="handTitle">请签名</view>
  362. </view>
  363. </view>
  364. </view> -->
  365. </view>
  366. </template>
  367. <script>
  368. var that;
  369. import permision from "@/js_sdk/wa-permission/permission.js"
  370. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  371. import uploadImage from '@/components/ossutil/uploadFile.js';
  372. export default {
  373. components: {
  374. uniPopup
  375. },
  376. data() {
  377. return {
  378. cyinfoStatus: '未装车',
  379. src: 'https://cdn.uviewui.com/uview/album/1.jpg',
  380. isShowTerminationReason: false,
  381. id: "",
  382. dataObj: {
  383. contractNo: '123'
  384. },
  385. type: null,
  386. status1: false,
  387. status2: false,
  388. status3: false,
  389. id: '',
  390. show: false,
  391. value2: '',
  392. radiolist1: [{
  393. name: '已与司机协商',
  394. disabled: false
  395. },
  396. {
  397. name: '司机原因终止',
  398. disabled: false
  399. },
  400. {
  401. name: '货主个人原因终止',
  402. disabled: false
  403. }, {
  404. name: '其他',
  405. disabled: false
  406. }
  407. ],
  408. radiovalue1: '已与司机协商',
  409. confirmText: '终止',
  410. alertTitle: '确定终止订单?',
  411. alertContent: "",
  412. isShowAlert: false,
  413. zcImgList: [],
  414. xcImgList: [],
  415. hdImgList: [],
  416. contractSrc: '',
  417. canvasName: 'handWriting',
  418. ctx: '',
  419. startX: null,
  420. startY: null,
  421. canvasWidth: 0,
  422. canvasHeight: 0,
  423. selectColor: 'black',
  424. lineColor: '#1A1A1A', // 颜色
  425. lineSize: 5, // 笔记倍数
  426. moneyShow: false,
  427. totalFreight: ""
  428. }
  429. },
  430. onLoad(options) {
  431. that = this
  432. this.id = options.id
  433. // this.get_camera_permission()
  434. // this.ctx = uni.createCanvasContext("handWriting");
  435. // this.$nextTick(() => {
  436. // uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
  437. // this.canvasWidth = rect.width;
  438. // this.canvasHeight = rect.height;
  439. // /* 将canvas背景设置为 白底,不设置 导出的canvas的背景为透明 */
  440. // this.setCanvasBg('#fff');
  441. // })
  442. // .exec();
  443. // });
  444. },
  445. onShow() {
  446. this.getList()
  447. },
  448. methods: {
  449. async get_camera_permission() {
  450. var phone = await permision.requestAndroidPermission("android.permission.CALL_PHONE")
  451. if (phone == false) {
  452. uni.showModal({
  453. title: '提示',
  454. content: '您已经关闭拨打电话权限,去设置',
  455. success: function(res) {
  456. if (res.confirm) {
  457. permision.gotoAppPermissionSetting()
  458. // plus.runtime.openURL("app-settings:");
  459. } else if (res.cancel) {
  460. console.log('用户点击取消');
  461. }
  462. }
  463. });
  464. }
  465. },
  466. moneyClick() {
  467. this.moneyShow = false
  468. if (this.dataObj.cargoOwnerStatus == "司机驳回运费信息") {
  469. this.$request.baseRequest('post', '/orderInfo/api/confirmFreight', {
  470. id: this.dataObj.id,
  471. typeFlag: 1,
  472. totalFreight: this.totalFreight
  473. }).then(res => {
  474. if (res.code == 200) {
  475. this.$refs.uToast.show({
  476. type: 'success',
  477. message: "确认成功",
  478. })
  479. // this.getList()
  480. }
  481. })
  482. } else {
  483. this.confirmUnLoading(4)
  484. }
  485. },
  486. moneyclose() {
  487. this.moneyShow = false
  488. this.totalFreight = ""
  489. },
  490. freightOk() {
  491. // billingMethod 0:元/吨 1:元/车
  492. if (this.dataObj.billingMethod == 1) { //元/车
  493. this.totalFreight = this.dataObj.freight
  494. } else { //元/吨
  495. //装车净重和卸车净重最小值 * 运输单价
  496. if (Number(this.dataObj.hyCarrierInfo.loadingWeight) > Number(this.dataObj.hyCarrierInfo
  497. .unloadingWeight)) {
  498. this.totalFreight = Number(this.dataObj.hyCarrierInfo.unloadingWeight) * Number(this.dataObj.freight)
  499. this.totalFreight = this.totalFreight.toFixed(2)
  500. } else {
  501. this.totalFreight = Number(this.dataObj.hyCarrierInfo.loadingWeight) * Number(this.dataObj.freight)
  502. this.totalFreight = this.totalFreight.toFixed(2)
  503. }
  504. }
  505. this.moneyShow = true
  506. },
  507. radioChange(n) {
  508. console.log('radioChange', n);
  509. },
  510. closepopup() {
  511. this.show = false
  512. },
  513. open() {
  514. // console.log('open');
  515. },
  516. close() {
  517. this.show = false
  518. // console.log('close');
  519. },
  520. ylImg(src) {
  521. uni.previewImage({
  522. urls: src,
  523. longPressActions: {
  524. itemList: ['发送给朋友', '保存图片', '收藏'],
  525. success: function(data) {
  526. console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
  527. },
  528. fail: function(err) {
  529. console.log(err.errMsg);
  530. }
  531. }
  532. });
  533. },
  534. goTodriverDetail() {
  535. uni.$u.route('/pages/order/driverDetail', {
  536. driver: JSON.stringify(this.dataObj)
  537. });
  538. },
  539. lookContract() {
  540. uni.downloadFile({
  541. url: this.dataObj.ownerContractUrl,
  542. success: function(res) {
  543. var filePath = res.tempFilePath;
  544. uni.openDocument({
  545. filePath: filePath,
  546. showMenu: true,
  547. success: function(res) {
  548. console.log('打开文档成功');
  549. }
  550. });
  551. }
  552. });
  553. },
  554. signContract() {
  555. // this.lookAlert = true
  556. uni.$u.route('/pages/order/signContract', {
  557. obj: JSON.stringify(this.dataObj)
  558. });
  559. },
  560. // 完结
  561. closed() {
  562. let item = this.dataObj
  563. let that = this
  564. this.$request.baseRequest('post', '/orderInfo/api/editEnd', {
  565. id: item.id,
  566. }).then(res => {
  567. if (res.code == 200) {
  568. this.$refs.uToast.show({
  569. type: 'success',
  570. message: "提交成功",
  571. complete() {
  572. that.upCallback({
  573. size: 10,
  574. num: 1
  575. })
  576. }
  577. })
  578. }
  579. })
  580. .catch(res => {
  581. uni.$u.toast(res.message);
  582. });
  583. },
  584. accept(type) {
  585. this.type = type
  586. if (type == 1) {
  587. this.alertTitle = '确定接受订单?'
  588. this.confirmText = '确定'
  589. } else if (type == 2) {
  590. this.alertTitle = '确定拒绝订单?'
  591. this.confirmText = '确定'
  592. } else {
  593. this.alertTitle = '确定终止订单?'
  594. this.confirmText = '终止'
  595. }
  596. this.isShowAlert = true
  597. },
  598. confirmLoading(type) {
  599. this.type = type
  600. //货主签订合同改为 已每个任务签订,不是按车每次签订合同
  601. // if(this.type == 3 || this.type == 4){
  602. // if (this.dataObj.cargoOwnerContract != '1') {
  603. // uni.showToast({
  604. // title: '请先签订合同!',
  605. // icon: 'none'
  606. // })
  607. // return
  608. // }
  609. // }
  610. if (type == 3) {
  611. this.alertTitle = '确认装车?'
  612. this.confirmText = '确定'
  613. this.isShowAlert = true
  614. } else if (type == 4) {
  615. this.alertTitle = '确认卸车?'
  616. this.confirmText = '确定'
  617. this.isShowAlert = true
  618. } else if (type == 5) { //驳回装车信息不用签合同
  619. this.alertTitle = '确认驳回装车信息?'
  620. this.confirmText = '确定'
  621. this.isShowAlert = true
  622. }
  623. // uni.$u.route('/pages/order/confirmLoading', item);
  624. },
  625. confirmUnLoading(type) {
  626. this.type = type
  627. if (type == 4) {
  628. if (this.totalFreight) {
  629. this.alertTitle = '确认卸车?'
  630. this.confirmText = '确定'
  631. this.isShowAlert = true
  632. } else {
  633. // billingMethod 0:元/吨 1:元/车
  634. if (this.dataObj.billingMethod == 1) { //元/车
  635. this.totalFreight = this.dataObj.freight
  636. } else { //元/吨
  637. //装车净重和卸车净重最小值 * 运输单价
  638. if (Number(this.dataObj.hyCarrierInfo.loadingWeight) > Number(this.dataObj.hyCarrierInfo
  639. .unloadingWeight)) {
  640. this.totalFreight = Number(this.dataObj.hyCarrierInfo.unloadingWeight) * Number(this.dataObj.freight)
  641. this.totalFreight = this.totalFreight.toFixed(2)
  642. } else {
  643. this.totalFreight = Number(this.dataObj.hyCarrierInfo.loadingWeight) * Number(this.dataObj.freight)
  644. this.totalFreight = this.totalFreight.toFixed(2)
  645. }
  646. }
  647. this.moneyShow = true
  648. }
  649. } else if (type == 6) {
  650. this.alertTitle = '确定驳回卸车信息?'
  651. this.confirmText = '确定'
  652. this.isShowAlert = true
  653. }
  654. // let item = this.dataObj
  655. // uni.$u.route('/pages/order/confirmUnloading', item);
  656. },
  657. confirmClick() {
  658. var that = this
  659. that.isShowAlert = false
  660. if (this.type == 1 || this.type == 2) {
  661. let _title = ''
  662. this.$request.baseRequest('post', '/orderInfo/api/orderReceiving', {
  663. id: this.dataObj.id,
  664. flag: this.type
  665. }).then(res => {
  666. if (res.code == 200) {
  667. if (this.type == 1) {
  668. _title = '接单成功'
  669. } else {
  670. _title = '拒绝接单成功'
  671. }
  672. this.$refs.uToast.show({
  673. type: 'success',
  674. message: _title,
  675. complete() {
  676. that.getList()
  677. }
  678. })
  679. } else {
  680. if (this.type == 1) {
  681. _title = '接单失败'
  682. } else {
  683. _title = '拒绝接单失败'
  684. }
  685. this.$refs.uToast.show({
  686. type: 'success',
  687. message: _title,
  688. complete() {
  689. }
  690. })
  691. }
  692. })
  693. .catch(res => {
  694. uni.$u.toast(res.message);
  695. });
  696. } else if (this.type == 3 || this.type == 4) {
  697. let _flag = ''
  698. if (this.type == 3) _flag = 1
  699. if (this.type == 4) _flag = 2
  700. this.$request.baseRequest('post', '/carrierInfo/cargoOwnerLoadingAdd', {
  701. orderId: this.dataObj.id,
  702. id: this.dataObj.hyCarrierInfo.id,
  703. loadingFlag: _flag,
  704. flag: 1,
  705. totalFreight: this.totalFreight,
  706. }).then(res => {
  707. if (res.code == 200) {
  708. this.$refs.uToast.show({
  709. type: 'success',
  710. message: "提交成功",
  711. complete() {
  712. that.getList()
  713. // that.upCallback({
  714. // size: 10,
  715. // num: 1
  716. // })
  717. }
  718. })
  719. }
  720. })
  721. .catch(res => {
  722. uni.$u.toast(res.message);
  723. });
  724. } else if (this.type == 5) {
  725. this.$request.baseRequest('post', '/carrierInfo/cargoOwnerLoadingAdd', {
  726. orderId: this.dataObj.id,
  727. loadingFlag: 1,
  728. flag: 2
  729. }).then(res => {
  730. if (res.code == 200) {
  731. this.$refs.uToast.show({
  732. type: 'success',
  733. message: "驳回装车成功!",
  734. complete() {
  735. that.getList()
  736. // that.upCallback({
  737. // size: 10,
  738. // num: 1
  739. // })
  740. }
  741. })
  742. }
  743. })
  744. .catch(res => {
  745. uni.$u.toast(res.message);
  746. });
  747. } else if (this.type == 6) {
  748. this.$request.baseRequest('post', '/carrierInfo/cargoOwnerLoadingAdd', {
  749. orderId: this.dataObj.id,
  750. loadingFlag: 2,
  751. flag: 2
  752. }).then(res => {
  753. if (res.code == 200) {
  754. this.$refs.uToast.show({
  755. type: 'success',
  756. message: "驳回卸车信息成功",
  757. complete() {
  758. that.getList()
  759. // that.upCallback({
  760. // size: 10,
  761. // num: 1
  762. // })
  763. }
  764. })
  765. }
  766. })
  767. .catch(res => {
  768. uni.$u.toast(res.message);
  769. });
  770. } else {
  771. var that = this
  772. if (this.radiovalue1 == '其他' && !this.value2) {
  773. this.$refs.uToast.show({
  774. type: 'error',
  775. message: "请填写终止原因描述!",
  776. })
  777. return
  778. }
  779. let _terminationReason = ''
  780. if (this.radiovalue1 == '已与司机协商') {
  781. _terminationReason = 1
  782. } else if (this.radiovalue1 == '司机原因终止') {
  783. _terminationReason = 2
  784. } else if (this.radiovalue1 == '货主个人原因终止') {
  785. _terminationReason = 3
  786. } else if (this.radiovalue1 == '其他') {
  787. _terminationReason = 4
  788. }
  789. this.$request.baseRequest('post', '/orderInfo/api/end', {
  790. id: this.id,
  791. terminator: 2,
  792. terminationReason: _terminationReason,
  793. terminationReasonDescription: this.value2
  794. }).then(res => {
  795. if (res.code == 200) {
  796. that.show = false
  797. that.value2 = ''
  798. this.$refs.uToast.show({
  799. type: 'success',
  800. message: '终止订单成功',
  801. })
  802. that.getList()
  803. } else {
  804. this.$refs.uToast.show({
  805. type: 'success',
  806. message: '终止订单失败',
  807. })
  808. }
  809. })
  810. .catch(res => {
  811. uni.$u.toast(res.message);
  812. });
  813. }
  814. },
  815. termination() {
  816. var that = this
  817. if (this.radiovalue1 == '其他' && !this.value2) {
  818. this.$refs.uToast.show({
  819. type: 'error',
  820. message: "请填写终止原因描述!",
  821. })
  822. return
  823. }
  824. let _terminationReason = ''
  825. if (this.radiovalue1 == '已与司机协商') {
  826. _terminationReason = 1
  827. } else if (this.radiovalue1 == '司机原因终止') {
  828. _terminationReason = 2
  829. } else if (this.radiovalue1 == '货主个人原因终止') {
  830. _terminationReason = 3
  831. } else if (this.radiovalue1 == '其他') {
  832. _terminationReason = 4
  833. }
  834. this.$request.baseRequest('post', '/orderInfo/api/end', {
  835. id: this.id,
  836. terminator: 2,
  837. terminationReason: _terminationReason,
  838. terminationReasonDescription: this.value2
  839. }).then(res => {
  840. if (res.code == 200) {
  841. that.show = false
  842. that.value2 = ''
  843. this.$refs.uToast.show({
  844. type: 'success',
  845. message: '终止订单成功',
  846. })
  847. that.getList()
  848. } else {
  849. this.$refs.uToast.show({
  850. type: 'success',
  851. message: '终止订单失败',
  852. })
  853. }
  854. })
  855. .catch(res => {
  856. uni.$u.toast(res.message);
  857. });
  858. },
  859. cancelClick() {
  860. this.isShowAlert = false
  861. },
  862. stop() {
  863. let item = this.dataObj
  864. // 货主接单
  865. if (item.cargoOwnerStatusKey == 1) {
  866. this.isShowTerminationReason = false
  867. } else {
  868. this.isShowTerminationReason = true
  869. }
  870. this.id = item.id
  871. this.isShowAlert = true
  872. },
  873. clickstop() {
  874. let item = this.dataObj
  875. // 货主接单
  876. if (item.cargoOwnerStatusKey == 1) {
  877. this.isShowTerminationReason = false
  878. } else {
  879. this.isShowTerminationReason = true
  880. }
  881. this.id = item.id
  882. this.show = true
  883. },
  884. toPhone() {
  885. var that = this
  886. that.get_camera_permission()
  887. uni.makePhoneCall({
  888. phoneNumber: that.dataObj.driverPhone,
  889. success: (res) => {
  890. console.log('调用成功!')
  891. },
  892. // 失败回调
  893. fail: (res) => {
  894. console.log('调用失败!')
  895. }
  896. });
  897. },
  898. back() {
  899. uni.navigateBack()
  900. },
  901. getList() {
  902. this.$request.baseRequest('get', '/orderInfo/getOrderInfo', {
  903. id: this.id,
  904. }).then(res => {
  905. if (res.code == 200) {
  906. this.dataObj = res.data
  907. if (this.dataObj.hyCarrierInfo.totalFreight) { //货主确定卸车输入的 合计运费
  908. this.totalFreight = this.dataObj.hyCarrierInfo.totalFreight
  909. }
  910. // 承运信息显示
  911. if (res.data.cargoOwnerStatus != "待接单" && res.data.cargoOwnerStatus != "未装车" && res.data
  912. .cargoOwnerStatus != "已终止") {
  913. this.status1 = true
  914. }
  915. // 运费信息
  916. if (res.data.cargoOwnerStatus == "已完结") {
  917. this.status2 = true
  918. }
  919. //还款信息
  920. if (res.data.cargoOwnerStatus == "待还款" && res.data.cargoOwnerStatus == "已还款" && res.data
  921. .cargoOwnerStatus == "已完结") {
  922. this.status3 = true
  923. }
  924. if (res.data.hyCarrierInfo) {
  925. this.zcImgList = []
  926. if (res.data.hyCarrierInfo.loadingImg) {
  927. let _zcList = res.data.hyCarrierInfo.loadingImg.split(',')
  928. for (let i = 0; i < _zcList.length; i++) {
  929. if (_zcList[i]) this.zcImgList.push(_zcList[i])
  930. }
  931. }
  932. if (res.data.hyCarrierInfo.unloadingImg) {
  933. this.xcImgList = []
  934. let _xcList = res.data.hyCarrierInfo.unloadingImg.split(',')
  935. for (let i = 0; i < _xcList.length; i++) {
  936. if (_xcList[i]) this.xcImgList.push(_xcList[i])
  937. }
  938. }
  939. if (res.data.hyCarrierInfo.receiptImg) {
  940. this.hdImgList = []
  941. let _hdList = res.data.hyCarrierInfo.receiptImg.split(',')
  942. console.log(_hdList)
  943. for (let i = 0; i < _hdList.length; i++) {
  944. if (_hdList[i]) this.hdImgList.push(_hdList[i])
  945. }
  946. }
  947. }
  948. }
  949. })
  950. },
  951. goConfirmLoading(id) {
  952. console.log('点击详情id:', id)
  953. uni.$u.route('/pages/order/confirmLoading', {
  954. id: this.id,
  955. });
  956. },
  957. }
  958. }
  959. </script>
  960. <style lang="scss">
  961. .fixed,
  962. .fixed1 {
  963. background: white;
  964. position: fixed;
  965. top: var(--status-bar-height);
  966. z-index: 999;
  967. width: 100%;
  968. }
  969. .fixed {
  970. padding-bottom: 10rpx;
  971. .title {
  972. background: white;
  973. position: relative;
  974. font-size: 36rpx;
  975. color: rgba(0, 0, 0, 0.85);
  976. .search {
  977. position: absolute;
  978. right: 20rpx;
  979. }
  980. .back {
  981. position: absolute;
  982. left: 20rpx;
  983. }
  984. }
  985. }
  986. .fixed1 {
  987. top: 0;
  988. height: var(--status-bar-height);
  989. background: white;
  990. }
  991. .row-between {
  992. margin-bottom: 10rpx;
  993. }
  994. .content1 {
  995. background: white;
  996. margin: calc(var(--status-bar-height) + 80rpx) 20rpx 0 20rpx;
  997. border-radius: 20rpx;
  998. padding: 40rpx 0rpx 0 0;
  999. box-sizing: border-box;
  1000. .status {
  1001. display: flex;
  1002. justify-content: center;
  1003. margin-bottom: 40rpx;
  1004. font-size: 36rpx;
  1005. color: #333333;
  1006. font-weight: 700;
  1007. }
  1008. .btn {
  1009. width: 40%;
  1010. margin-top: 20rpx;
  1011. }
  1012. .item2 {
  1013. padding-bottom: 40rpx;
  1014. }
  1015. .item3 {
  1016. padding: 20rpx;
  1017. background: linear-gradient(180deg, #F7F7F9 0%, #FFFFFF 100%);
  1018. border-radius: 0 0 20rpx 20rpx;
  1019. .name {
  1020. margin-left: 10rpx;
  1021. margin-right: 20rpx;
  1022. font-size: 32rpx;
  1023. font-weight: 500;
  1024. color: #333333;
  1025. }
  1026. .number {
  1027. font-size: 26rpx;
  1028. color: #878787;
  1029. }
  1030. .star {
  1031. margin-left: 10rpx;
  1032. }
  1033. .phone {
  1034. .bgc {
  1035. background: #E5F0FE;
  1036. width: 58rpx;
  1037. height: 58rpx;
  1038. display: flex;
  1039. align-items: center;
  1040. justify-content: center;
  1041. border-radius: 50%;
  1042. }
  1043. .hz-name {
  1044. font-size: 26rpx;
  1045. color: #2772FB;
  1046. }
  1047. }
  1048. }
  1049. }
  1050. .level2-title {
  1051. margin: 20rpx 0 20rpx 0;
  1052. }
  1053. .content2 {
  1054. background: white;
  1055. margin: 20rpx;
  1056. border-radius: 20rpx;
  1057. padding: 20rpx;
  1058. .change-btn {
  1059. width: 86rpx;
  1060. height: 86rpx;
  1061. position: relative;
  1062. top: -20rpx;
  1063. }
  1064. .item1,
  1065. .item2 {
  1066. width: 40%;
  1067. .text {
  1068. text-overflow: ellipsis;
  1069. overflow: hidden;
  1070. white-space: nowrap;
  1071. }
  1072. .gray {
  1073. text-align: center;
  1074. }
  1075. }
  1076. .item1 .text {
  1077. text-align: center;
  1078. }
  1079. .item2 .text {
  1080. text-align: center;
  1081. }
  1082. .border {
  1083. border-bottom: 1px solid #EEEEEE;
  1084. padding-bottom: 33rpx;
  1085. }
  1086. .place {
  1087. width: 80%;
  1088. text-align: right;
  1089. }
  1090. }
  1091. .content3,
  1092. .content4 {
  1093. background: white;
  1094. margin: 20rpx;
  1095. border-radius: 20rpx;
  1096. padding: 20rpx;
  1097. }
  1098. .content4 {
  1099. .time {
  1100. text-align: right;
  1101. }
  1102. .mx {
  1103. background: #F7F8FA;
  1104. padding: 10rpx;
  1105. margin: 10rpx 0;
  1106. }
  1107. }
  1108. /deep/.u-modal__content {
  1109. flex-direction: column;
  1110. }
  1111. .look-contract {
  1112. padding-top: 1000rpx;
  1113. position: fixed;
  1114. top: 0;
  1115. bottom: 0;
  1116. left: 0;
  1117. right: 0;
  1118. margin: auto;
  1119. background: #0000005e;
  1120. width: 100%;
  1121. height: 100vh;
  1122. .btn {
  1123. width: 70%;
  1124. margin-bottom: 20rpx;
  1125. }
  1126. }
  1127. .wrapper {
  1128. width: 100%;
  1129. height: 95vh;
  1130. margin: 30rpx 0;
  1131. overflow: hidden;
  1132. display: flex;
  1133. align-content: center;
  1134. flex-direction: row;
  1135. justify-content: center;
  1136. font-size: 28rpx;
  1137. position: relative;
  1138. }
  1139. .handWriting {
  1140. background: #fff;
  1141. width: 100%;
  1142. height: 95vh;
  1143. }
  1144. .handRight {
  1145. display: inline-flex;
  1146. align-items: center;
  1147. }
  1148. .handCenter {
  1149. border: 4rpx dashed #e9e9e9;
  1150. flex: 5;
  1151. overflow: hidden;
  1152. box-sizing: border-box;
  1153. }
  1154. .handTitle {
  1155. transform: rotate(90deg);
  1156. flex: 1;
  1157. color: #666;
  1158. }
  1159. .handBtn button {
  1160. font-size: 28rpx;
  1161. }
  1162. .handBtn {
  1163. height: 95vh;
  1164. display: inline-flex;
  1165. flex-direction: column;
  1166. justify-content: space-between;
  1167. align-content: space-between;
  1168. flex: 1;
  1169. }
  1170. .delBtn {
  1171. position: absolute;
  1172. top: 250rpx;
  1173. left: 0rpx;
  1174. transform: rotate(90deg);
  1175. color: #666;
  1176. }
  1177. .delBtn image {
  1178. position: absolute;
  1179. top: 13rpx;
  1180. left: 25rpx;
  1181. }
  1182. .subBtn {
  1183. position: absolute;
  1184. bottom: 52rpx;
  1185. left: -3rpx;
  1186. display: inline-flex;
  1187. transform: rotate(90deg);
  1188. background: #008ef6;
  1189. color: #fff;
  1190. margin-bottom: 30rpx;
  1191. text-align: center;
  1192. justify-content: center;
  1193. }
  1194. /*Peach - 新增 - 保存*/
  1195. .saveBtn {
  1196. position: absolute;
  1197. top: 375rpx;
  1198. left: 0rpx;
  1199. transform: rotate(90deg);
  1200. color: #666;
  1201. }
  1202. .previewBtn {
  1203. position: absolute;
  1204. top: 500rpx;
  1205. left: 0rpx;
  1206. transform: rotate(90deg);
  1207. color: #666;
  1208. }
  1209. .uploadBtn {
  1210. position: absolute;
  1211. top: 625rpx;
  1212. left: 0rpx;
  1213. transform: rotate(90deg);
  1214. color: #666;
  1215. }
  1216. /*Peach - 新增 - 保存*/
  1217. .black-select {
  1218. width: 60rpx;
  1219. height: 60rpx;
  1220. position: absolute;
  1221. top: 30rpx;
  1222. left: 25rpx;
  1223. }
  1224. .black-select.color_select {
  1225. width: 90rpx;
  1226. height: 90rpx;
  1227. top: 100rpx;
  1228. left: 10rpx;
  1229. }
  1230. .red-select {
  1231. width: 60rpx;
  1232. height: 60rpx;
  1233. position: absolute;
  1234. top: 140rpx;
  1235. left: 25rpx;
  1236. }
  1237. .red-select.color_select {
  1238. width: 90rpx;
  1239. height: 90rpx;
  1240. top: 120rpx;
  1241. left: 10rpx;
  1242. }
  1243. /deep/.u-popup__content {
  1244. border-radius: 10px;
  1245. // padding:20px;
  1246. }
  1247. /deep/.u-radio {
  1248. margin: 40rpx 0;
  1249. }
  1250. .close {
  1251. position: absolute;
  1252. right: 20px;
  1253. }
  1254. .termination {
  1255. background: #F1F3F6;
  1256. color: #C5CAD4;
  1257. padding: 10px;
  1258. border-radius: 30px;
  1259. text-align: center;
  1260. margin-top: 30rpx;
  1261. }
  1262. .termination.active {
  1263. background: #2772FB;
  1264. color: white;
  1265. }
  1266. .freight {
  1267. .freight_text {
  1268. font-size: 34rpx;
  1269. font-weight: 600;
  1270. margin-bottom: 20rpx;
  1271. }
  1272. .freight_up {
  1273. display: flex;
  1274. border-top: 1px solid #EEEEEE;
  1275. height: 60rpx;
  1276. background: red;
  1277. margin-top: 10px;
  1278. }
  1279. .freight_item {
  1280. width: 50%;
  1281. text-align: center;
  1282. line-height: 50rpx;
  1283. }
  1284. }
  1285. .u-popup-wrap {
  1286. padding: 20px;
  1287. }
  1288. </style>