myOrder.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826
  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. <view class="tab">
  28. <view class="tabLine" :class="{tabActive:tabIndex==0}" @click="tabClick(0)">全部</view>
  29. <view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">待付款</view>
  30. <view class="tabLine" :class="{tabActive:tabIndex==5}" @click="tabClick(5)">待成团</view>
  31. <view class="tabLine" :class="{tabActive:tabIndex==2}" @click="tabClick(2)">待服务</view>
  32. <view class="tabLine" :class="{tabActive:tabIndex==3}" @click="tabClick(3)">已完成</view>
  33. </view>
  34. </view>
  35. <view class="main">
  36. <view class="itemBg" v-for="(item,index) in items" @click="goDetail(item)">
  37. <view class="itemTop">
  38. <view class="itemType" v-if="item.SheetType==1">商城-商品订单</view>
  39. <view class="itemType" v-if="item.SheetType==2">商城-项目订单</view>
  40. <view class="itemType" v-if="item.SheetType==3">商城-套餐订单</view>
  41. <view class="itemType" v-if="item.SheetType==4">救援订单</view>
  42. <view class="itemType" v-if="item.SheetType==5">钣喷订单</view>
  43. <view class="itemType" v-if="item.SheetType==6">集客订单</view>
  44. <view class="itemSheetState redColor" v-if="item.SheetState==1">待付款</view>
  45. <view class="itemSheetState orangeColor" v-if="item.SheetState==2">待服务</view>
  46. <view class="itemSheetState greenColor" v-if="item.SheetState==3">已完成</view>
  47. <view class="itemSheetState" v-if="item.SheetState==4">已取消</view>
  48. <view class="itemSheetState redColor" v-if="item.SheetState==5">待成团</view>
  49. </view>
  50. <view class="itemShopBg">
  51. <view class="shopName">{{item.SheetContent}}</view>
  52. <view style="color: #333333;font-size: 22rpx;">¥<span class="price">{{item.RealMoney}}</span></view>
  53. </view>
  54. <view class="renBox" v-if="item.SheetType==6">
  55. <image src="../../static/img/icon_ren2.png" mode="" class="renimg"></image>
  56. <view class="renMobilePhone">{{item.MobilePhone}}</view>
  57. <view class="renNickName">{{item.NickName?item.NickName:''}}</view>
  58. </view>
  59. <view class="itemName">{{item.CreateTime}}</view>
  60. <view class="itemName" style="padding-top: 2rpx;padding-bottom: 0;">{{item.ShopName}}</view>
  61. </view>
  62. <nodata v-show="items==''&&isload"></nodata>
  63. </view>
  64. <!-- 筛选弹框 -->
  65. <view class="screenBox" v-if="screenSHow" @click="screenHide">
  66. <view class="screenCont" @click.stop="">
  67. <view class="screenTitle">筛选</view>
  68. <view class="screenBt">订单类型</view>
  69. <!-- <view class="typelineBox">
  70. <view class="typeLine " :class="{typeactive:typeLineIndex==0}" @click="typeLineCk(0)">全部</view>
  71. <view class="typeLine" :class="{typeactive:typeLineIndex==1}" @click="typeLineCk(1)">商城订单</view>
  72. <view class="typeLine" :class="{typeactive:typeLineIndex==6}" @click="typeLineCk(6)">集客订单</view>
  73. <view class="typeLine" :class="{typeactive:typeLineIndex==4}" @click="typeLineCk(4)">救援订单</view>
  74. <view class="typeLine":class="{typeactive:typeLineIndex==5}" @click="typeLineCk(5)">钣喷订单</view>
  75. </view> -->
  76. <view class="typelineBox">
  77. <view class="typeLine " v-for="(item,index) in tabList"
  78. :class="{typeactive:item.ck}" @click="typeLineCk2(item)">{{item.name}}
  79. </view>
  80. </view>
  81. <view class="screenBt">门店</view>
  82. <view class="">
  83. <!-- <picker @change="bindPickerChange" :value="pickerindex" :range-key="'shopName'" :range="pickerarray">
  84. <view class="uniPicker" @click="ckShopAppFn">
  85. <view class="uniPickerName">
  86. {{shopName}}
  87. </view>
  88. <image src="../../static/img/jt.png" mode=" " class="jtShopImg"></image>
  89. </view>
  90. </picker> -->
  91. <view class="uniPicker" @click="ckShopAppFn">
  92. <view class="uniPickerName">
  93. {{shopName?shopName:'请选择门店'}}
  94. </view>
  95. <image src="../../static/img/jt.png" mode=" " class="jtShopImg"></image>
  96. </view>
  97. </view>
  98. <view class="screenBt">下单时间</view>
  99. <view class="sdTimeBox">
  100. <picker mode="date" :value="date1" @change="bindDateChange1">
  101. <view class="dateinput">{{date1?date1:'选择日期'}}</view>
  102. </picker>
  103. <view class="timeHx">-</view>
  104. <picker mode="date" :value="date2" @change="bindDateChange2">
  105. <view class="dateinput">{{date2?date2:'选择日期'}}</view>
  106. </picker>
  107. </view>
  108. <view class="screenBottom">
  109. <view class="screenCz" @click="resetting">重置</view>
  110. <view class="screenY" @click="sub">确定</view>
  111. </view>
  112. </view>
  113. </view>
  114. </view>
  115. </template>
  116. <script>
  117. import nodata from '@/components/nodata/nodata.vue'
  118. export default {
  119. components: {
  120. nodata
  121. },
  122. data() {
  123. return {
  124. page: 1,
  125. tabIndex: 0,
  126. items: [],
  127. isload: false,
  128. name:'',
  129. pickerindex:0,
  130. pickerarray: [],
  131. screenSHow:false,
  132. shopName:'',
  133. date1:'',
  134. date2:'',
  135. typeLineIndex:0,
  136. sheetTypeList:'',
  137. shopId:'',
  138. mrshopId:'',
  139. mrshopName:'',
  140. tabList:[
  141. {
  142. name:'全部',ck:true,sheetType:'',
  143. },
  144. {
  145. name:'商城订单',ck:false,sheetType:'1,2,3',
  146. },
  147. {
  148. name:'集客订单',ck:false,sheetType:'6',
  149. },
  150. {
  151. name:'救援订单',ck:false,sheetType:'4',
  152. },
  153. {
  154. name:'钣喷订单',ck:false,sheetType:'5',
  155. }
  156. ],
  157. androidE:'',
  158. iosE:'',
  159. iStatusBarHeight:'',
  160. }
  161. },
  162. onLoad(opt) {
  163. //this.getData();
  164. this.getShopinfo();
  165. //app交互
  166. var standalone = window.navigator.standalone
  167. var userAgent = window.navigator.userAgent.toLowerCase()
  168. var safari = /safari/.test(userAgent)
  169. var ios = /iphone|ipod|ipad|mac/.test(userAgent)
  170. var android = /android/.test(userAgent)
  171. if (ios) {
  172. window.shopAppCallbackios=this.shopAppCallbackios;
  173. } else if (android) {
  174. window.shopAppCallback=this.shopAppCallback;
  175. }
  176. },
  177. onShow() {
  178. /* console.log(this.tabIndex)
  179. this.getShopinfo(); */
  180. //this.getData();
  181. const onshow = uni.getStorageSync('onshow');
  182. if(onshow==1){
  183. uni.removeStorageSync('onshow');
  184. // this.getShopinfo();
  185. this.getData()
  186. }else{
  187. }
  188. },
  189. methods: {
  190. ckShopAppFn(){
  191. /* this.shopAppCallbackios('{"value":"0DA5DE64-36B8-4F21-A624-72C24F4F3E5A","key":"测试开店申请"}')
  192. return false */
  193. //this.shopAppCallback()
  194. var obj={
  195. value:this.mrshopId,
  196. key:this.mrshopName
  197. }
  198. console.log(obj)
  199. //app交互
  200. var standalone = window.navigator.standalone
  201. var userAgent = window.navigator.userAgent.toLowerCase()
  202. var safari = /safari/.test(userAgent)
  203. var ios = /iphone|ipod|ipad|mac/.test(userAgent)
  204. var android = /android/.test(userAgent)
  205. if (ios) {
  206. if ( true) {//!standalone&& !safari
  207. if(this.iosE){
  208. window.webkit.messageHandlers.shopApp.postMessage(this.iosE)
  209. }else{
  210. window.webkit.messageHandlers.shopApp.postMessage(JSON.stringify(obj))
  211. }
  212. }
  213. } else if (android) {
  214. if(this.androidE){
  215. window.android.shopApp(JSON.stringify(this.androidE))
  216. }else{
  217. var arr =[]
  218. arr.push(obj)
  219. window.android.shopApp(JSON.stringify(arr))
  220. }
  221. }
  222. },
  223. shopAppCallback(e){
  224. //e=[{"isDefault":false,"isLogin":false,"isSelected":false,"isShow":false,"key":"连锁一号测试店铺","value":"1B43BADD-B670-4B27-B6C1-604523287EAF"},{"isDefault":false,"isLogin":false,"isSelected":true,"isShow":false,"key":"JM-乌海市昱盛汽贸有限公司Q","suggest":"JM-乌海市昱盛汽贸有限公司Q|JM-wuhaishizuoshengqimaoyouxiangongsiQ|jm-whs昱sqmyxgsq|JM-WHS昱SQMYXGSQ","value":"95FC6989-644F-491F-B5B3-F9F0995C1694"}]
  225. //this.ms=e.key
  226. //this.ms=JSON.parse(e).key
  227. this.androidE=e
  228. var obj=e;
  229. // var obj=JSON.parse(e);
  230. var length= obj.length
  231. console.log(obj)
  232. if(length==1){
  233. this.shopName=obj[0].key
  234. this.shopId=obj[0].value
  235. }else{
  236. var idarr=[]
  237. obj.forEach(item=>{
  238. idarr.push(item.value)
  239. })
  240. //var num = length -1
  241. // this.shopName=obj[0].key+"+"+ num
  242. this.shopName='已选('+length+')个门店'
  243. this.shopId=idarr.join(',')
  244. }
  245. this.page=1
  246. this.getData();
  247. },
  248. shopAppCallbackios(e){
  249. this.iosE=e
  250. var obj=JSON.parse(e);
  251. var names=obj.key.split(',')
  252. var length= names.length
  253. if(length==1){
  254. this.shopName=obj.key
  255. }else{
  256. this.shopName='已选('+length+')个门店'
  257. }
  258. //this.shopName=obj.key
  259. this.shopId=obj.value
  260. this.page=1
  261. this.getData();
  262. },
  263. ssql(){
  264. this.name='';
  265. this.getData();
  266. },
  267. sub(){
  268. this.page=1
  269. this.screenSHow=false;
  270. var arr=[]
  271. this.items=[]
  272. this.tabList.forEach(item=>{
  273. if(item.ck){
  274. arr.push(item.sheetType)
  275. }
  276. })
  277. this.sheetTypeList=arr.join(',');
  278. console.log(this.sheetTypeList)
  279. this.getData();
  280. },
  281. resetting(){
  282. this.date1='';
  283. this.date2='';
  284. this.typeLineIndex='';
  285. this.shopName=this.mrshopName;
  286. this.shopId=this.mrshopId;
  287. this.sheetTypeList=''
  288. this.tabList[0].ck=true
  289. this.tabList[1].ck=false
  290. this.tabList[2].ck=false
  291. this.tabList[3].ck=false
  292. this.tabList[4].ck=false
  293. this.androidE=''
  294. this.iosE=''
  295. },
  296. typeLineCk(num){
  297. this.typeLineIndex=num;
  298. if(num==1){
  299. this.sheetTypeList='1,2,3'
  300. }else{
  301. this.sheetTypeList=num
  302. }
  303. if(num==0){
  304. this.sheetTypeList=''
  305. }
  306. },
  307. typeLineCk2(item){
  308. if(item.name=='全部'){
  309. item.ck=true;
  310. this.tabList[1].ck=false
  311. this.tabList[2].ck=false
  312. this.tabList[3].ck=false
  313. this.tabList[4].ck=false
  314. }else{
  315. this.tabList[0].ck=false
  316. item.ck=!item.ck;
  317. }
  318. },
  319. screenSHowBtn(){
  320. this.screenSHow=true;
  321. },
  322. screenHide(){
  323. this.screenSHow=false;
  324. },
  325. bindDateChange1(e){
  326. console.log(e)
  327. this.date1=e.detail.value
  328. },
  329. bindDateChange2(e){
  330. this.date2=e.detail.value
  331. },
  332. bindPickerChange(e){
  333. console.log(e)
  334. this.shopName=this.pickerarray[e.detail.value].shopName
  335. this.shopId=this.pickerarray[e.detail.value].id
  336. },
  337. getShopinfo(){
  338. this.$http('openH5SetTheGuest/getShopInfo',{},'GET').then(res => {
  339. this.shopName=res.data.shopName;
  340. this.mrshopId=res.data.id;
  341. this.mrshopName=res.data.shopName;
  342. this.shopId=this.mrshopId
  343. this.getShopList();
  344. this.getData()
  345. })
  346. },
  347. getShopList(){
  348. this.$http('openH5SetTheGuest/getShopList', {
  349. },'GET').then(res => {
  350. this.pickerarray=res.data;
  351. /* this.pickerarray.forEach((item,index)=>{
  352. if(this.mrshopId==item.id){
  353. this.pickerindex=index;
  354. }
  355. }) */
  356. //console.log(this.pickerarray[this.pickerindex])
  357. })
  358. },
  359. goback(){
  360. //app交互
  361. var standalone = window.navigator.standalone
  362. var userAgent = window.navigator.userAgent.toLowerCase()
  363. var safari = /safari/.test(userAgent)
  364. var ios = /iphone|ipod|ipad|mac/.test(userAgent)
  365. var android = /android/.test(userAgent)
  366. if (ios) {
  367. if ( true) {//!standalone&& !safari
  368. window.webkit.messageHandlers.goMyNav.postMessage(null)
  369. }
  370. } else if (android) {
  371. window.android.postMessage()
  372. }
  373. },
  374. tabClick(num) {
  375. this.tabIndex = num;
  376. this.page = 1;
  377. this.getData()
  378. },
  379. goDetail(item) {
  380. uni.setStorageSync('onshow', '1');
  381. //SheetType 1 商品2项目3套餐4救援5钣喷6集客
  382. if((item.SheetType==1)||(item.SheetType==2)||(item.SheetType==3)){
  383. uni.navigateTo({
  384. url: "mallOrderDetail?id=" + item.ID +"&SheetType=" + item.SheetType+'&back=1'
  385. })
  386. }
  387. else if (item.SheetType==5){
  388. uni.navigateTo({
  389. url: "paintOrderDetail?id=" + item.ID+'&back=1'
  390. })
  391. }
  392. else if (item.SheetType==6){
  393. uni.navigateTo({
  394. url: "activityOrderDetail?id=" + item.ID+'&back=1'
  395. })
  396. }
  397. },
  398. searchCf(){
  399. this.items=[]
  400. this.getData()
  401. },
  402. getData() {
  403. //this.shopId='95FC6989-644F-491F-B5B3-F9F0995C1694'
  404. uni.showLoading({
  405. title: '加载中'
  406. });
  407. this.isload = false;
  408. var padata = {
  409. page: this.page,
  410. limit: 10,
  411. sheetState: this.tabIndex > 0 ? this.tabIndex : '',
  412. name:this.name,
  413. starCreateTime:this.date1+ ' 00:00:00',
  414. endCreateTime:this.date2+ ' 23:59:59',
  415. sheetType:this.sheetTypeList,
  416. shopName:this.shopId,
  417. }
  418. this.$http('openH5Indent/getOpenSheetList', padata, 'GET').then(res => {
  419. uni.hideLoading();
  420. this.isload = true;
  421. var list = res.data.Items;
  422. if (this.page == 1) {
  423. this.items = list
  424. } else {
  425. this.items = this.items.concat(list)
  426. }
  427. })
  428. },
  429. },
  430. onReachBottom() {
  431. this.page++;
  432. this.getData()
  433. },
  434. onPullDownRefresh() {
  435. this.page = 1;
  436. this.getData()
  437. setTimeout(function() {
  438. uni.stopPullDownRefresh();
  439. }, 1000);
  440. }
  441. }
  442. </script>
  443. <style scoped>
  444. .screenBox{
  445. width: 100%;
  446. height: 100%;
  447. position: fixed;
  448. left: 0;
  449. top: 0;
  450. background: rgba(0 ,0,0,0.5);
  451. z-index: 999;
  452. }
  453. .screenBottom{
  454. width: 649rpx;
  455. height: 120rpx;
  456. background: #FFFFFF;
  457. box-shadow: 0rpx -2rpx 10rpx 0rpx rgba(153,153,153,0.2);
  458. position: absolute;
  459. bottom: 0;
  460. right: 0;
  461. display: flex;
  462. justify-content: space-around;
  463. }
  464. .screenCz{
  465. width: 291rpx;text-align: center;margin-top: 22rpx;
  466. height: 74rpx;line-height: 74rpx;
  467. background: #F4F5F7;color: #000000;
  468. border-radius: 37rpx;font-size: 28rpx;
  469. }
  470. .screenY{
  471. width: 291rpx;text-align: center;margin-top: 22rpx;
  472. height: 74rpx;line-height: 74rpx;
  473. background: #D53533;color: #FFFFFF;
  474. border-radius: 37rpx;font-size: 28rpx;
  475. }
  476. .screenCont{
  477. width: 650rpx;
  478. height: 100%;
  479. background: #FFFFFF;
  480. margin-left: 100rpx;
  481. }
  482. .screenTitle{
  483. font-weight: 400;font-size: 24rpx;padding-top: 70rpx;padding-left: 20rpx;
  484. color: #333333;
  485. }
  486. .screenBt{
  487. font-weight: 400;font-size: 24rpx;
  488. color: #333333;padding-left: 20rpx;padding-top: 30rpx;
  489. }
  490. .iconShai{
  491. width: 36rpx;height: 39rpx;margin-top: 17rpx;
  492. margin-left: 30rpx;
  493. }
  494. .iconSimg{
  495. width: 40rpx;height: 40rpx;margin-top: 16rpx;margin-left: 20rpx;
  496. }
  497. .searchBox{
  498. display: flex;background: #FFFFFF;padding: 24rpx;
  499. left: 0;
  500. }
  501. .typeLine{
  502. width: 178rpx;color: #3C3C3C;
  503. height: 64rpx;font-size: 24rpx;
  504. background: #F4F5F7;margin-top: 20rpx;
  505. border-radius: 36rpx;margin-right: 30rpx;
  506. text-align: center;
  507. line-height: 64rpx;
  508. }
  509. .typeactive{
  510. border: 2rpx solid #D53533;height: 60rpx;color: #D53533;background: #FFFFFF;width: 174rpx;
  511. }
  512. .typelineBox{
  513. display: flex;flex-wrap: wrap;padding-left: 20rpx;
  514. }
  515. .uniPicker{
  516. width: 606rpx;
  517. height: 64rpx;
  518. background: #F4F5F7;font-size: 24rpx;
  519. border-radius: 36rpx;color: #3C3C3C;
  520. display: flex;justify-content: space-between;
  521. margin-top: 20rpx;margin-left: 20rpx;
  522. }
  523. .jtShopImg{
  524. width: 24rpx;height: 24rpx;margin-top: 20rpx;margin-right: 26rpx;
  525. }
  526. .uniPickerName{
  527. padding-left: 20rpx;line-height: 64rpx;
  528. overflow:hidden;
  529. white-space: nowrap;
  530. text-overflow: ellipsis;
  531. -o-text-overflow:ellipsis;
  532. width: 500rpx;
  533. }
  534. .dateinput{
  535. width: 270rpx;color: #999999;
  536. height: 64rpx;font-size: 24rpx;line-height: 64rpx;
  537. background: #F4F5F7;padding-left: 20rpx;
  538. border-radius: 36rpx;
  539. }
  540. .sdTimeBox{
  541. display: flex;
  542. padding-top: 20rpx;padding-left: 20rpx;
  543. }
  544. .timeHx{
  545. font-weight: 400;line-height: 64rpx;padding: 0 4rpx;
  546. color: #DDDDDD;font-size: 24rpx;
  547. }
  548. .newtop{
  549. position: fixed;z-index: 11;
  550. }
  551. .searchInputBox{
  552. width: 630rpx;
  553. height: 72rpx;
  554. background: #F4F5F7;
  555. border-radius: 36rpx;
  556. display: flex;
  557. }
  558. .searchInput{
  559. font-size: 28rpx;padding-left: 16rpx;height: 72rpx;line-height: 72rpx;
  560. width: 500rpx;
  561. }
  562. .box {
  563. min-height: 100vh;
  564. background: #F4F5F7;
  565. }
  566. .zdyNavBox {
  567. width: 100vw;
  568. background: #FFFFFF;
  569. position: fixed;
  570. top: 0;
  571. left: 0;
  572. z-index: 99;
  573. }
  574. .zdyNav {
  575. height: 44px;
  576. display: flex;
  577. justify-content: space-between;
  578. align-items: center;
  579. }
  580. .backImg {
  581. width: 44rpx;
  582. height: 44rpx;
  583. margin-left: 10rpx;
  584. margin-right: 20rpx;
  585. }
  586. .homeImg {
  587. width: 44rpx;
  588. height: 44rpx;
  589. }
  590. .zdyNavLeft {
  591. display: flex;
  592. align-items: center;
  593. }
  594. .zdyNavTitle {
  595. height: 44px;
  596. background: #FFFFFF;
  597. text-align: center;
  598. font-size: 34rpx;
  599. line-height: 44px;
  600. }
  601. .tab {
  602. background: #FFFFFF;
  603. display: flex;
  604. justify-content: space-between;
  605. line-height: 92rpx;
  606. /* position: fixed; */
  607. width: calc(100vw - 100rpx);
  608. padding-left: 50rpx;
  609. padding-right: 50rpx;
  610. height: 92rpx;
  611. z-index: 11;
  612. }
  613. .tabLine {
  614. font-size: 28rpx;
  615. color: #333333;
  616. text-align: center;
  617. }
  618. .tabActive {
  619. color: #3F90F7;
  620. font-weight: bold;
  621. border-bottom: 4rpx solid #3F90F7;
  622. }
  623. .main {
  624. padding-top: 210rpx;
  625. padding-bottom: 20rpx;
  626. background-color: #F4F5F7;
  627. }
  628. .itemBg {
  629. margin: 20rpx 24rpx;
  630. background-color: #FFFFFF;
  631. border-radius: 10rpx;
  632. padding: 20rpx;
  633. }
  634. .itemTop {
  635. display: flex;
  636. justify-content: space-between;
  637. }
  638. .itemType {
  639. color: #999999;
  640. font-size: 24rpx;
  641. }
  642. .itemSheetState {
  643. font-size: 24rpx;
  644. color: #999999
  645. }
  646. .redColor {
  647. color: #FF0000;
  648. }
  649. .orangeColor {
  650. color: #F19D01;
  651. }
  652. .greenColor {
  653. color: #00A040;
  654. }
  655. .itemShopBg {
  656. display: flex;
  657. justify-content: space-between;
  658. margin-top: 20rpx;
  659. }
  660. .shopName {
  661. color: #333333;
  662. font-size: 30rpx;
  663. font-weight: bold;
  664. /* 隐藏文字显示 ...不换行 */
  665. overflow: hidden;
  666. text-overflow: ellipsis;
  667. white-space: nowrap;
  668. }
  669. .price {
  670. color: #333333;
  671. font-weight: bold;
  672. font-size: 32rpx;
  673. }
  674. .itemName {
  675. color: #666666;
  676. font-size: 24rpx;
  677. padding: 16rpx 0;
  678. height: 30rpx;
  679. overflow: hidden;
  680. text-overflow: ellipsis;
  681. white-space: nowrap;
  682. }
  683. .plateBg {
  684. display: flex;
  685. justify-content: space-between;
  686. align-items: center;
  687. }
  688. .plateNumber {
  689. color: #666666;
  690. font-size: 24rpx;
  691. margin-bottom: 20rpx;
  692. display: flex;
  693. }
  694. .itemLineBottom {
  695. display: flex;
  696. justify-content: flex-end;
  697. }
  698. .itemBtn1 {
  699. width: 150rpx;
  700. height: 56rpx;
  701. border-radius: 36rpx;
  702. border: 2rpx solid #DDDDDD;
  703. text-align: center;
  704. line-height: 56rpx;
  705. font-size: 28rpx;
  706. color: #3C3C3C;
  707. margin-left: 40rpx;
  708. }
  709. .itemBtn2 {
  710. width: 150rpx;
  711. height: 56rpx;
  712. border-radius: 36rpx;
  713. border: 2rpx solid #FF4F00;
  714. text-align: center;
  715. line-height: 56rpx;
  716. font-size: 28rpx;
  717. color: #FF4F00;
  718. margin-left: 40rpx;
  719. }
  720. .orderState {
  721. color: #F19D01;
  722. font-size: 24rpx;
  723. padding-left: 20rpx;
  724. }
  725. .renBox{
  726. color: #1A1A1A;
  727. background: #F7F7F7;
  728. border-radius: 10rpx;
  729. display: flex;
  730. padding: 20rpx;font-size: 24rpx;
  731. line-height: 30rpx;
  732. margin-top: 16rpx;
  733. }
  734. .renimg{
  735. width: 30rpx;height: 30rpx;
  736. }
  737. .renMobilePhone{
  738. padding-left: 13rpx;
  739. }
  740. .renNickName{
  741. padding-left: 20rpx;
  742. }
  743. .sschahao{
  744. width: 40rpx;
  745. height: 40rpx;
  746. padding-top: 16rpx;
  747. }
  748. </style>