rescueOrder.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955
  1. <template>
  2. <view class="box">
  3. <!-- 自定义导航 -->
  4. <view class="zdyNavBox">
  5. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  6. <view class="zdyNav">
  7. <view class="zdyNavLeft">
  8. <image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback">
  9. </image>
  10. </view>
  11. <view class="zdyNavTitle">救援订单</view>
  12. <view style="width: 50px;"></view>
  13. </view>
  14. </view>
  15. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  16. <view style="height: 44px;"></view>
  17. <!-- 搜索框 -->
  18. <view class="newtop">
  19. <view class="searchBox">
  20. <view class="searchInputBox">
  21. <image src="../../static/img/icon_search.png" mode="" class="iconSimg"></image>
  22. <input type="text" v-model="name" placeholder="订单号、手机号、联系人、车牌号" class="searchInput" @confirm="searchCf">
  23. <image v-if="name" @click="ssql" src="../../static/img/chahao.png" mode="" class="sschahao"></image>
  24. </view>
  25. <!-- <image @click="screenSHowBtn" src="../../static/img/icon_shai.png" mode="" class="iconShai"></image> -->
  26. </view>
  27. <!-- 筛选框 -->
  28. <view class="screen">
  29. <view class="screenLine screenLine1" @click="ckShopAppFn">
  30. <!-- <span class="screenLineSpan">救援门店</span> -->
  31. <!-- <view class="">
  32. <picker @change="bindPickerChange" :value="pickerindex" :range-key="'shopName'" :range="pickerarray">
  33. <view class="screenLine">
  34. <span class="screenLineSpan">救援门店</span>
  35. <img src="../../static/img/arrow_down.png" alt="" class="screenLineImg">
  36. </view>
  37. </picker>
  38. </view> -->
  39. <span class="screenLineSpan">{{shopName?shopName:'救援门店'}}</span>
  40. <!-- <span class="screenLineSpan">连锁一号测试门店测试</span> -->
  41. <img src="../../static/img/arrow_down.png" alt="" class="screenLineImg">
  42. </view>
  43. <view class="screenLine screenLine2" @click="cktimeFn">
  44. <!-- <span class="screenLineSpan">下单时间</span> -->
  45. <span class="screenLineSpan">{{date1}}-{{date2}}</span>
  46. <img src="../../static/img/arrow_down.png" alt="" class="screenLineImg">
  47. </view>
  48. <view class="screenLine screenLine3" @click="typeSHow=true">
  49. <span class="screenLineSpan">更多</span>
  50. <img src="../../static/img/arrow_down.png" alt="" class="screenLineImg">
  51. </view>
  52. <view class="orderTimesxBox" v-if="orderTimesxSHow">
  53. <view class="orderTimesxBoxTitle">下单时间</view>
  54. <view class="sdTimeBox">
  55. <picker mode="date" :value="date1" @change="bindDateChange1">
  56. <view class="dateinput">{{date1?date1:'选择日期'}}</view>
  57. </picker>
  58. <view class="timeHx">-</view>
  59. <picker mode="date" :value="date2" @change="bindDateChange2">
  60. <view class="dateinput">{{date2?date2:'选择日期'}}</view>
  61. </picker>
  62. </view>
  63. <view class="screenBottom">
  64. <view class="screenCz" @click="closeTime">取消</view>
  65. <view class="screenY" @click="orderTimesx">确认</view>
  66. </view>
  67. </view>
  68. <view class="orderTimesxBox" v-if="typeSHow">
  69. <view class="screenBt">救援类型</view>
  70. <view class="typelineBox">
  71. <view class="typeLine " v-for="(item,index) in tabList"
  72. :class="{typeactive:index==typeLineIndex}" @click="typeLineCk(index)">{{item.name}}
  73. </view>
  74. </view>
  75. <view class="screenBottom">
  76. <view class="screenCz" @click="resetting">重置</view>
  77. <view class="screenY" @click="subhelpType">确定</view>
  78. </view>
  79. </view>
  80. </view>
  81. <view class="tab">
  82. <view class="tabLine" :class="{tabActive:tabIndex==-1}" @click="tabClick(-1)">全部</view>
  83. <view class="tabLine" :class="{tabActive:tabIndex==0}" @click="tabClick(0)">待确认</view>
  84. <view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">已接单</view>
  85. <view class="tabLine" :class="{tabActive:tabIndex==2}" @click="tabClick(2)">已出发</view>
  86. <view class="tabLine" :class="{tabActive:tabIndex==3}" @click="tabClick(3)">已完成</view>
  87. </view>
  88. </view>
  89. <view class="main">
  90. <!-- <view>{{ms}}</view> -->
  91. <view class="itemBg" v-for="(item,index) in items" @click="goDetail(item)">
  92. <view class="itemTop">
  93. <view class="itemType" >
  94. <span v-if="item.HelpType==1">搭电</span>
  95. <span v-if="item.HelpType==2">拖车</span>
  96. <span v-if="item.HelpType==3">换胎</span>
  97. <span v-if="item.HelpType==4">未知原因</span>
  98. -
  99. <span v-if="item.Hscene==1">地面</span>
  100. <span v-if="item.Hscene==2">车库</span>
  101. <span v-if="item.Hscene==3">其他</span>
  102. </view>
  103. <view class="itemSheetState redColor" v-if="item.SheetState==0">待确认</view>
  104. <view class="itemSheetState redColor" v-if="item.SheetState==1">已接单</view>
  105. <view class="itemSheetState orangeColor" v-if="item.SheetState==2">已出发</view>
  106. <view class="itemSheetState greenColor" v-if="item.SheetState==3">已完成</view>
  107. <view class="itemSheetState" v-if="item.SheetState==4">已取消</view>
  108. <view class="itemSheetState greenColor" v-if="item.SheetState==5">已评价</view>
  109. </view>
  110. <view class="itemaddress">
  111. <div class="addressDD"></div> {{item.HStartAddress}}
  112. </view>
  113. <view class="itemName" v-if="item.orderType==1">救援时间:立刻</view>
  114. <view class="itemName" v-else>救援时间:{{item.HTime}}</view>
  115. <view v-if="item.PlateNumber">
  116. <view class="itemName" >{{item.PlateNumber}}</view>
  117. </view>
  118. <view style="display: flex;justify-content: space-between;">
  119. <view class="itemName" style="padding-bottom: 0;">{{item.ShopName}}</view>
  120. <view class="itemName" >{{item.CustomerName}}</view>
  121. </view>
  122. </view>
  123. <nodata v-show="items==''&&isload"></nodata>
  124. </view>
  125. <!-- 筛选弹框 -->
  126. <view class="screenBox" v-if="screenSHow" @click="screenHide">
  127. <view class="screenCont" @click.stop="">
  128. <view class="screenTitle">筛选</view>
  129. <view class="screenBt">门店</view>
  130. <view class="">
  131. <picker @change="bindPickerChange" :value="pickerindex" :range-key="'shopName'" :range="pickerarray">
  132. <view class="uniPicker">
  133. <view class="uniPickerName">
  134. {{shopName}}
  135. </view>
  136. <image src="../../static/img/jt.png" mode=" " class="jtShopImg"></image>
  137. </view>
  138. </picker>
  139. </view>
  140. <view class="screenBt">救援时间</view>
  141. <view class="sdTimeBox">
  142. <picker mode="date" :value="date1" @change="bindDateChange1">
  143. <view class="dateinput">{{date1?date1:'选择日期'}}</view>
  144. </picker>
  145. <view class="timeHx">-</view>
  146. <picker mode="date" :value="date2" @change="bindDateChange2">
  147. <view class="dateinput">{{date2?date2:'选择日期'}}</view>
  148. </picker>
  149. </view>
  150. <view class="screenBt">救援类型</view>
  151. <view class="typelineBox">
  152. <view class="typeLine " v-for="(item,index) in tabList"
  153. :class="{typeactive:index==typeLineIndex}" @click="typeLineCk(index)">{{item.name}}
  154. </view>
  155. <!-- :class="{typeactive:item.ck}"-->
  156. </view>
  157. <view class="screenBottom">
  158. <view class="screenCz" @click="resetting">重置</view>
  159. <view class="screenY" @click="sub">确定</view>
  160. </view>
  161. </view>
  162. </view>
  163. </view>
  164. </template>
  165. <script>
  166. import nodata from '@/components/nodata/nodata.vue'
  167. export default {
  168. components: {
  169. nodata
  170. },
  171. data() {
  172. return {
  173. ms:'',
  174. page: 1,
  175. tabIndex: -1,
  176. items: [],
  177. isload: false,
  178. name:'',
  179. pickerindex:0,
  180. pickerarray: [],
  181. screenSHow:false,
  182. shopName:'',
  183. date1:'',
  184. date2:'',
  185. typeLineIndex:0,
  186. sheetTypeList:'',
  187. shopId:'',
  188. mrshopId:'',
  189. mrshopName:'',
  190. tabList:[
  191. {
  192. name:'全部',ck:true,sheetType:'',
  193. },
  194. {
  195. name:'搭电',ck:false,sheetType:'1',
  196. },
  197. {
  198. name:'拖车',ck:false,sheetType:'2',
  199. },
  200. {
  201. name:'换胎',ck:false,sheetType:'3',
  202. },
  203. {
  204. name:'未知原因',ck:false,sheetType:'4',
  205. }
  206. ],
  207. orderTimesxSHow:false,
  208. typeSHow:false,
  209. iStatusBarHeight:'',
  210. olddate1:'',
  211. olddate2:'',
  212. }
  213. },
  214. onLoad(opt) {
  215. this.date1=this.time(new Date())
  216. this.date2=this.time(new Date())
  217. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  218. //this.getData();
  219. this.getShopinfo();
  220. //app交互
  221. var standalone = window.navigator.standalone
  222. var userAgent = window.navigator.userAgent.toLowerCase()
  223. var safari = /safari/.test(userAgent)
  224. var ios = /iphone|ipod|ipad|mac/.test(userAgent)
  225. var android = /android/.test(userAgent)
  226. if (ios) {
  227. window.shopAppCallbackios=this.shopAppCallbackios;
  228. } else if (android) {
  229. window.shopAppCallback=this.shopAppCallback;
  230. }
  231. },
  232. onShow() {
  233. const onshow = uni.getStorageSync('onshow');
  234. if(onshow==1){
  235. uni.removeStorageSync('onshow');
  236. // this.getShopinfo();
  237. this.getData()
  238. }else{
  239. }
  240. //this.getData();
  241. },
  242. methods: {
  243. cktimeFn(){
  244. this.orderTimesxSHow=true
  245. this.olddate1=this.date1
  246. this.olddate2=this.date2
  247. },
  248. ckShopAppFn(){
  249. var obj={
  250. value:this.mrshopId,
  251. key:this.mrshopName
  252. }
  253. console.log(obj)
  254. //app交互
  255. var standalone = window.navigator.standalone
  256. var userAgent = window.navigator.userAgent.toLowerCase()
  257. var safari = /safari/.test(userAgent)
  258. var ios = /iphone|ipod|ipad|mac/.test(userAgent)
  259. var android = /android/.test(userAgent)
  260. if (ios) {
  261. if ( true) {//!standalone&& !safari
  262. window.webkit.messageHandlers.shopApp.postMessage(JSON.stringify(obj))
  263. }
  264. } else if (android) {
  265. window.android.shopApp(JSON.stringify(obj))
  266. }
  267. },
  268. shopAppCallback(e){
  269. //this.ms=e.key
  270. //this.ms=JSON.parse(e).key
  271. // var obj=JSON.parse(e);
  272. this.shopName=e.key
  273. this.shopId=e.value
  274. this.page=1
  275. this.getData();
  276. },
  277. shopAppCallbackios(e){
  278. var obj=JSON.parse(e);
  279. this.shopName=obj.key
  280. this.shopId=obj.value
  281. this.page=1
  282. this.getData();
  283. },
  284. orderTimesx(){
  285. this.items=[]
  286. this.orderTimesxSHow=false;
  287. this.getData();
  288. },
  289. subhelpType(){
  290. this.typeSHow=false;
  291. /* var arr=[]
  292. this.items=[]
  293. this.tabList.forEach(item=>{
  294. if(item.ck){
  295. arr.push(item.sheetType)
  296. }
  297. })
  298. this.sheetTypeList=arr.join(','); */
  299. this.getData();
  300. },
  301. ssql(){
  302. this.name='';
  303. this.getData();
  304. },
  305. closeTime(){
  306. this.orderTimesxSHow=false
  307. this.date1=this.olddate1
  308. this.date2 =this.olddate2
  309. /* this.date2=''
  310. this.date1='' */
  311. //this.getData();
  312. },
  313. sub(){
  314. this.screenSHow=false;
  315. /* var arr=[]
  316. this.items=[]
  317. this.tabList.forEach(item=>{
  318. if(item.ck){
  319. arr.push(item.sheetType)
  320. }
  321. })
  322. this.sheetTypeList=arr.join(',');*/
  323. //console.log(this.sheetTypeList)
  324. this.getData();
  325. },
  326. resetting(){
  327. this.date1=this.time(new Date())
  328. this.date2=this.time(new Date())
  329. this.typeLineIndex='';
  330. this.shopName=this.mrshopName;
  331. this.shopId=this.mrshopId;
  332. this.sheetTypeList=''
  333. this.tabList[0].ck=true
  334. this.tabList[1].ck=false
  335. this.tabList[2].ck=false
  336. this.tabList[3].ck=false
  337. this.tabList[4].ck=false
  338. this.items=[]
  339. this.getData();
  340. this.typeSHow=false;
  341. },
  342. typeLineCk(num){
  343. this.typeLineIndex=num;
  344. console.log(this.typeLineIndex)
  345. if(num){
  346. this.sheetTypeList=num
  347. }
  348. if(num==0){
  349. this.sheetTypeList=''
  350. }
  351. console.log(this.sheetTypeList)
  352. },
  353. typeLineCk2(item){
  354. /* if(item.name=='全部'){
  355. item.ck=true;
  356. this.tabList[1].ck=false
  357. this.tabList[2].ck=false
  358. this.tabList[3].ck=false
  359. this.tabList[4].ck=false
  360. }else{
  361. this.tabList[0].ck=false
  362. item.ck=!item.ck;
  363. } */
  364. },
  365. screenSHowBtn(){
  366. this.screenSHow=true;
  367. },
  368. screenHide(){
  369. this.screenSHow=false;
  370. },
  371. bindDateChange1(e){
  372. console.log(e)
  373. this.date1=e.detail.value
  374. },
  375. bindDateChange2(e){
  376. this.date2=e.detail.value
  377. },
  378. bindPickerChange(e){
  379. console.log(e)
  380. this.page=1
  381. this.shopName=this.pickerarray[e.detail.value].shopName
  382. this.shopId=this.pickerarray[e.detail.value].id;
  383. this.getData();
  384. },
  385. getShopinfo(){
  386. this.$http('openH5SetTheGuest/getShopInfo',{},'GET').then(res => {
  387. this.shopName=res.data.shopName;
  388. this.mrshopId=res.data.id;
  389. this.mrshopName=res.data.shopName;
  390. this.shopId=this.mrshopId
  391. this.getShopList();
  392. this.getData()
  393. })
  394. },
  395. getShopList(){
  396. this.$http('openH5SetTheGuest/getShopList', {
  397. },'GET').then(res => {
  398. this.pickerarray=res.data;
  399. /* this.pickerarray.forEach((item,index)=>{
  400. if(this.mrshopId==item.id){
  401. this.pickerindex=index;
  402. }
  403. }) */
  404. //console.log(this.pickerarray[this.pickerindex])
  405. })
  406. },
  407. goback(){
  408. //app交互
  409. var standalone = window.navigator.standalone
  410. var userAgent = window.navigator.userAgent.toLowerCase()
  411. var safari = /safari/.test(userAgent)
  412. var ios = /iphone|ipod|ipad|mac/.test(userAgent)
  413. var android = /android/.test(userAgent)
  414. if (ios) {
  415. if ( true) {//!standalone&& !safari
  416. window.webkit.messageHandlers.goMyNav.postMessage(null)
  417. }
  418. } else if (android) {
  419. window.android.postMessage()
  420. }
  421. },
  422. tabClick(num) {
  423. this.tabIndex = num;
  424. this.page = 1;
  425. this.getData()
  426. },
  427. goDetail(item) {
  428. uni.setStorageSync('onshow', '1');
  429. uni.navigateTo({
  430. url: "rescueOrderDetail?id=" + item.ID+'&back=1'
  431. })
  432. },
  433. searchCf(){
  434. this.items=[]
  435. this.getData()
  436. },
  437. getData() {
  438. console.log(this.sheetTypeList)
  439. uni.showLoading({
  440. title: '加载中'
  441. });
  442. this.isload = false;
  443. var createTimeStart='';
  444. var createTimeEnd='';
  445. if(this.date1){
  446. createTimeStart=this.date1+ ' 00:00:00'
  447. }
  448. if(this.date1){
  449. createTimeEnd=this.date2+ ' 23:59:59'
  450. }
  451. var padata = {
  452. page: this.page,
  453. limit: 10,
  454. sheetState: this.tabIndex > -1 ? this.tabIndex : '',
  455. search:this.name,
  456. createTimeStart:createTimeStart,
  457. createTimeEnd:createTimeEnd,
  458. helpType:this.sheetTypeList,
  459. shopID:this.shopId,
  460. }
  461. this.$http('openH5ShopHelpSheetOrder/getOpenShopHelpSheetOrderList', padata, 'GET').then(res => {
  462. uni.hideLoading();
  463. this.isload = true;
  464. var list = res.data.Items;
  465. if (this.page == 1) {
  466. this.items = list
  467. } else {
  468. this.items = this.items.concat(list)
  469. }
  470. })
  471. },
  472. time(time) {
  473. let month = time.getMonth() + 1; // 月
  474. let date = time.getDate(); // 日
  475. let hh = time.getHours(); // 时
  476. let mm = time.getMinutes(); // 分
  477. let ss = time.getSeconds(); // 秒
  478. if (hh >=0 && hh<10){hh= '0' + hh;}
  479. if (mm >=0 && mm<10){mm= '0' + mm;}
  480. if (ss >=0 && ss<10){ss= '0' + ss;}
  481. if (month < 10){month= '0' + month;}
  482. if (date < 10){date= '0' + date;}
  483. return time.getFullYear().toString()+'-' + month.toString()+'-' + date.toString()// + hh.toString() + mm.toString() + ss.toString();
  484. },
  485. },
  486. onReachBottom() {
  487. this.page++;
  488. this.getData()
  489. },
  490. onPullDownRefresh() {
  491. this.page = 1;
  492. this.getData()
  493. setTimeout(function() {
  494. uni.stopPullDownRefresh();
  495. }, 1000);
  496. }
  497. }
  498. </script>
  499. <style scoped>
  500. .screen{
  501. display: flex;justify-content: space-around;
  502. background: #FFFFFF;position: relative;
  503. }
  504. .tuiBtns {
  505. display: flex;justify-content: space-around;
  506. padding: 40rpx 20rpx ;
  507. }
  508. .btn {
  509. width: 288rpx;
  510. height: 70rpx;
  511. background: #F4F5F7;
  512. border-radius: 10rpx;
  513. margin-right: 22rpx;
  514. font-size: 30rpx;
  515. font-weight: 500;
  516. color: #3C3C3C;
  517. line-height: 70rpx;
  518. text-align: center;
  519. }
  520. .btn2 {
  521. width: 288rpx;
  522. height: 70rpx;
  523. background: #3F90F7;
  524. border-radius: 10rpx;
  525. font-size: 30rpx;
  526. font-weight: 500;
  527. color: #FFFFFF;
  528. line-height: 70rpx;
  529. text-align: center;
  530. }
  531. .orderTimesxBox{
  532. position: absolute;
  533. left: 0;
  534. top: 70rpx;
  535. background: #fff;
  536. width: 750rpx;
  537. }
  538. .screenLineSpan{
  539. color: #3C3C3C;font-size: 26rpx;line-height: 70rpx;
  540. }
  541. .screenLine{
  542. display: flex;
  543. }
  544. .screenLineImg{
  545. width: 24rpx;height: 24rpx;margin-top: 23rpx;margin-left: 10rpx;
  546. }
  547. .screenBox{
  548. width: 100%;
  549. height: 100%;
  550. position: fixed;
  551. left: 0;
  552. top: 0;
  553. background: rgba(0 ,0,0,0.5);
  554. z-index: 999;
  555. }
  556. .screenBottom{
  557. width: 750rpx;
  558. height: 120rpx;
  559. background: #FFFFFF;
  560. display: flex;
  561. justify-content: space-around;
  562. }
  563. .screenCz{
  564. width: 291rpx;text-align: center;margin-top: 22rpx;
  565. height: 74rpx;line-height: 74rpx;
  566. background: #F4F5F7;color: #000000;
  567. border-radius: 37rpx;font-size: 28rpx;
  568. }
  569. .screenY{
  570. width: 291rpx;text-align: center;margin-top: 22rpx;
  571. height: 74rpx;line-height: 74rpx;
  572. background: #D53533;color: #FFFFFF;
  573. border-radius: 37rpx;font-size: 28rpx;
  574. }
  575. .screenCont{
  576. width: 650rpx;
  577. height: 100%;
  578. background: #FFFFFF;
  579. margin-left: 100rpx;
  580. }
  581. .screenTitle{
  582. font-weight: 400;font-size: 24rpx;padding-top: 70rpx;padding-left: 20rpx;
  583. color: #333333;
  584. }
  585. .screenBt{
  586. font-weight: 400;font-size: 24rpx;
  587. color: #333333;padding-left: 20rpx;padding-top: 30rpx;
  588. }
  589. .iconShai{
  590. width: 36rpx;height: 39rpx;margin-top: 17rpx;
  591. margin-left: 30rpx;
  592. }
  593. .iconSimg{
  594. width: 40rpx;height: 40rpx;margin-top: 16rpx;margin-left: 20rpx;
  595. }
  596. .searchBox{
  597. display: flex;background: #FFFFFF;padding: 24rpx;
  598. left: 0;padding-bottom: 0rpx;
  599. }
  600. .typeLine{
  601. width: 178rpx;color: #3C3C3C;
  602. height: 64rpx;font-size: 24rpx;
  603. background: #F4F5F7;margin-top: 20rpx;
  604. border-radius: 36rpx;margin-right: 30rpx;
  605. text-align: center;
  606. line-height: 64rpx;
  607. }
  608. .typeactive{
  609. border: 2rpx solid #D53533;height: 60rpx;color: #D53533;background: #FFFFFF;width: 174rpx;
  610. }
  611. .typelineBox{
  612. display: flex;flex-wrap: wrap;padding-left: 20rpx;
  613. }
  614. .uniPicker{
  615. width: 606rpx;
  616. height: 64rpx;
  617. background: #F4F5F7;font-size: 24rpx;
  618. border-radius: 36rpx;color: #3C3C3C;
  619. display: flex;justify-content: space-between;
  620. margin-top: 20rpx;margin-left: 20rpx;
  621. }
  622. .jtShopImg{
  623. width: 24rpx;height: 24rpx;margin-top: 20rpx;margin-right: 26rpx;
  624. }
  625. .uniPickerName{
  626. padding-left: 20rpx;line-height: 64rpx;
  627. overflow:hidden;
  628. white-space: nowrap;
  629. text-overflow: ellipsis;
  630. -o-text-overflow:ellipsis;
  631. width: 500rpx;
  632. }
  633. .dateinput{
  634. width: 305rpx;color: #999999;
  635. height: 64rpx;font-size: 24rpx;line-height: 64rpx;
  636. background: #F4F5F7;padding-left: 20rpx;
  637. border-radius: 36rpx;
  638. }
  639. .sdTimeBox{
  640. display: flex;justify-content: center;
  641. padding-top: 20rpx;
  642. }
  643. .timeHx{
  644. font-weight: 400;line-height: 64rpx;padding: 0 4rpx;
  645. color: #DDDDDD;font-size: 24rpx;
  646. }
  647. .newtop{
  648. position: fixed;z-index: 11;
  649. }
  650. .searchInputBox{
  651. width: 702rpx;
  652. height: 72rpx;
  653. background: #F4F5F7;
  654. border-radius: 36rpx;
  655. display: flex;
  656. }
  657. .searchInput{
  658. font-size: 28rpx;padding-left: 16rpx;height: 72rpx;line-height: 72rpx;
  659. width: 550rpx;
  660. }
  661. .box {
  662. min-height: 100vh;
  663. background: #F4F5F7;
  664. }
  665. .zdyNavBox {
  666. width: 100vw;
  667. background: #FFFFFF;
  668. position: fixed;
  669. top: 0;
  670. left: 0;
  671. z-index: 99;
  672. }
  673. .zdyNav {
  674. height: 44px;
  675. display: flex;
  676. justify-content: space-between;
  677. align-items: center;
  678. }
  679. .backImg {
  680. width: 44rpx;
  681. height: 44rpx;
  682. margin-left: 10rpx;
  683. margin-right: 20rpx;
  684. }
  685. .homeImg {
  686. width: 44rpx;
  687. height: 44rpx;
  688. }
  689. .zdyNavLeft {
  690. display: flex;
  691. align-items: center;
  692. }
  693. .zdyNavTitle {
  694. height: 44px;
  695. background: #FFFFFF;
  696. text-align: center;
  697. font-size: 34rpx;
  698. line-height: 44px;
  699. }
  700. .tab {
  701. background: #FFFFFF;
  702. display: flex;
  703. justify-content: space-between;
  704. line-height: 92rpx;
  705. /* position: fixed; */
  706. width: calc(100vw - 100rpx);
  707. padding-left: 50rpx;
  708. padding-right: 50rpx;
  709. height: 92rpx;
  710. z-index: 11;
  711. border-top: 1px solid #EEEEEE;
  712. }
  713. .tabLine {
  714. font-size: 28rpx;
  715. color: #333333;
  716. text-align: center;
  717. }
  718. .tabActive {
  719. /* color: #FF0000; */
  720. color: #3F90F7;
  721. font-weight: bold;
  722. border-bottom: 4rpx solid #3F90F7;
  723. }
  724. .main {
  725. padding-top: 260rpx;
  726. padding-bottom: 20rpx;
  727. background-color: #F4F5F7;
  728. }
  729. .itemBg {
  730. margin: 20rpx 24rpx;
  731. background-color: #FFFFFF;
  732. border-radius: 10rpx;
  733. padding: 20rpx;
  734. }
  735. .itemTop {
  736. display: flex;
  737. justify-content: space-between;
  738. }
  739. .itemType {
  740. color: #999999;
  741. font-size: 24rpx;
  742. }
  743. .itemSheetState {
  744. font-size: 24rpx;
  745. color: #999999
  746. }
  747. .redColor {
  748. color: #FF0000;
  749. }
  750. .orangeColor {
  751. color: #F19D01;
  752. }
  753. .greenColor {
  754. color: #00A040;
  755. }
  756. .itemShopBg {
  757. display: flex;
  758. justify-content: space-between;
  759. margin-top: 20rpx;
  760. }
  761. .shopName {
  762. color: #333333;
  763. font-size: 30rpx;
  764. font-weight: bold;
  765. /* 隐藏文字显示 ...不换行 */
  766. overflow: hidden;
  767. text-overflow: ellipsis;
  768. white-space: nowrap;
  769. }
  770. .price {
  771. color: #333333;
  772. font-weight: bold;
  773. font-size: 32rpx;
  774. }
  775. .itemName {
  776. color: #666666;
  777. font-size: 24rpx;
  778. padding-top: 16rpx;
  779. height: 30rpx;
  780. /* overflow: hidden; */
  781. text-overflow: ellipsis;
  782. white-space: nowrap;
  783. }
  784. .plateBg {
  785. display: flex;
  786. justify-content: space-between;
  787. align-items: center;
  788. }
  789. .plateNumber {
  790. color: #666666;
  791. font-size: 24rpx;
  792. margin-bottom: 20rpx;
  793. display: flex;
  794. }
  795. .itemLineBottom {
  796. display: flex;
  797. justify-content: flex-end;
  798. }
  799. .itemBtn1 {
  800. width: 150rpx;
  801. height: 56rpx;
  802. border-radius: 36rpx;
  803. border: 2rpx solid #DDDDDD;
  804. text-align: center;
  805. line-height: 56rpx;
  806. font-size: 28rpx;
  807. color: #3C3C3C;
  808. margin-left: 40rpx;
  809. }
  810. .itemBtn2 {
  811. width: 150rpx;
  812. height: 56rpx;
  813. border-radius: 36rpx;
  814. border: 2rpx solid #FF4F00;
  815. text-align: center;
  816. line-height: 56rpx;
  817. font-size: 28rpx;
  818. color: #FF4F00;
  819. margin-left: 40rpx;
  820. }
  821. .orderState {
  822. color: #F19D01;
  823. font-size: 24rpx;
  824. padding-left: 20rpx;
  825. }
  826. .renBox{
  827. color: #1A1A1A;
  828. background: #F7F7F7;
  829. border-radius: 10rpx;
  830. display: flex;
  831. padding: 20rpx;font-size: 24rpx;
  832. line-height: 30rpx;
  833. margin-top: 16rpx;
  834. }
  835. .renimg{
  836. width: 30rpx;height: 30rpx;
  837. }
  838. .renMobilePhone{
  839. padding-left: 13rpx;
  840. }
  841. .itemaddress{
  842. font-size: 24rpx;display: flex;
  843. color: #3C3C3C;padding-top: 16rpx;
  844. line-height: 33rpx;
  845. }
  846. .addressDD{
  847. width: 10rpx;
  848. height: 10rpx;
  849. background: #FF0000;
  850. border-radius: 50%;
  851. margin-top: 10rpx;
  852. margin-right: 5rpx;
  853. }
  854. .sschahao{
  855. width: 40rpx;
  856. height: 40rpx;
  857. padding-top: 16rpx;
  858. }
  859. .screenLine3{
  860. width: 100rpx;
  861. }
  862. .screenLine1{
  863. max-width: 260rpx;
  864. }
  865. .orderTimesxBoxTitle{
  866. padding-left: 24rpx;
  867. color: #666;
  868. font-size: 24rpx;
  869. padding-top: 16rpx;
  870. }
  871. </style>