order.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844
  1. <template>
  2. <app-layout>
  3. <view class="order">
  4. <view class="top dir-left-nowrap main-between cross-center">
  5. <view class="top-input cross-center" @click="go_search()" v-if="!search">
  6. <view class="input main-center cross-center">
  7. <image src="/static/image/icon/icon-search.png"></image>
  8. <text>搜索</text>
  9. </view>
  10. </view>
  11. <view class="to-top dir-left-nowrap main-center cross-center" v-if="!search" @click="active = true">
  12. <text :class="getTheme + '-m-text ' + getTheme">{{active_item}}</text>
  13. <image v-if="!active" :class="getTheme + '-m-back ' + getTheme" class="icon" src="../image/open.png"></image>
  14. <image v-else class="icon icon-active" :class="getTheme + '-m-back ' + getTheme" src="../image/open.png"></image>
  15. </view>
  16. <view class="search dir-left-nowrap cross-center main-between" v-if="search">
  17. <input type="text" class="input" :focus="true" v-model="search_text" @blur="blur_request" @confirm="set_search">
  18. <image class="delete" v-show="search_text.length>0" @click="empyt_search" src="../image/delete.png"></image>
  19. <text style="color:#666666;font-size: 32rpx;" @click="set_search">搜索</text>
  20. </view>
  21. </view>
  22. <view class="do-top" v-if="active" @click.stop="active = false">
  23. <view class="do-top-item"
  24. v-for="(item, index) in select_list"
  25. :key="index"
  26. :class="item.active ? getTheme + '-m-text ' + getTheme : 'default-text'"
  27. @click="set_active(item)"
  28. >
  29. {{item.text}}
  30. </view>
  31. </view>
  32. <view style="margin-top: 108rpx;"></view>
  33. <view class="item" v-for="(item, index) in order_list" :key="index">
  34. <view class="item-top dir-left-wrap main-between cross-center" >
  35. <text class="order-number" style="color: #999999;">订单号{{item.advance_no}}</text>
  36. <text>{{item.status_num | orderStatus}}</text>
  37. </view>
  38. <view class="item-center dir-left-nowrap" @click="route_go(item)">
  39. <image class="image" :src="item.goods.goodsWarehouse.cover_pic"></image>
  40. <view class="content">
  41. <view class="name">{{item.goods.goodsWarehouse.name}}</view>
  42. <view class="attr">
  43. <text>{{item.attr_name}}</text>
  44. </view>
  45. <view class="num-price dir-left-nowrap main-between cross-center">
  46. <text>×{{item.goods_num}}</text>
  47. <text>¥{{item.goodsAttr.price}}</text>
  48. </view>
  49. <view class="des-price dir-left-wrap main-right cross-center">
  50. <text>定金</text>
  51. <text :style="{color: item.is_pay == 0 ? '#ff4544' : '#353535'}">¥{{item.deposit}}</text>
  52. <text>抵¥{{item.swell_deposit}}</text>
  53. <text style="color: #ff4544;" v-if="item.status_num == 9">(定金不退)</text>
  54. </view>
  55. </view>
  56. </view>
  57. <view class="item-bottom">
  58. <view class="swell-price main-right cross-center" v-if="item.status_num == 2 || item.status_num == 3 || item.status_num == 4 || item.status_num == 9 ">
  59. <text>尾款</text>
  60. <text style="color: #ff4544;">¥{{item.tail_money}}</text>
  61. </view>
  62. <view v-if="item.status_num == 1" class="text-time">
  63. <text>距截止</text>
  64. <text style="color: #ff4544">{{item.html}}</text>
  65. </view>
  66. <view v-if="item.status_num == 3 && item.pay_limit != -1" class="text-time">
  67. <text>距截止</text>
  68. <text style="color: #ff4544">{{item.html}}</text>
  69. </view>
  70. <view class="filal-payment-time" v-if="item.status_num == 2">
  71. 支付尾款时间:{{set_time(item.pay_limit, item.end_prepayment_at)}}
  72. </view>
  73. <view class="button" :class="getTheme + '-m-back ' + getTheme" @click="payFinalPayment(item)" v-if="item.status_num == 3 && item.order_id == 0">
  74. <app-form-id>
  75. <text>
  76. 去支付尾款
  77. </text>
  78. </app-form-id>
  79. </view>
  80. <view class="button" :class="getTheme + '-m-back ' + getTheme" @click="payPayment(item, index)" v-else-if="item.status_num == 3 && item.order_id != 0 && item.pay_type != 2">
  81. <app-form-id>
  82. <text>
  83. 付款
  84. </text>
  85. </app-form-id>
  86. </view>
  87. <view class="button" :class="getTheme + '-m-back ' + getTheme" @click="payDeposit(item, index)" v-else-if="item.status_num == 1">
  88. <app-form-id>
  89. <text>
  90. 去支付定金
  91. </text>
  92. </app-form-id>
  93. </view>
  94. </view>
  95. </view>
  96. <view class="order-empty" v-if="order_list.length === 0">
  97. <image src="../image/order.png"></image>
  98. <text>没有任何订单哦~</text>
  99. </view>
  100. </view>
  101. </app-layout>
  102. </template>
  103. <script>
  104. import {mapGetters} from "vuex";
  105. export default {
  106. name: 'order',
  107. data() {
  108. return {
  109. active: false,
  110. active_item: '全部预定',
  111. select_list: [
  112. {
  113. id: -1,
  114. active: true,
  115. text: '全部预定',
  116. },
  117. {
  118. id: 1,
  119. active: false,
  120. text: '定金待支付',
  121. },
  122. {
  123. id: 2,
  124. active: false,
  125. text: '尾款支付未开始',
  126. },
  127. {
  128. id: 3,
  129. active: false,
  130. text: '尾款待支付',
  131. },
  132. {
  133. id: 4,
  134. active: false,
  135. text: '购买成功',
  136. },
  137. {
  138. id: 5,
  139. active: false,
  140. text: '购买失败',
  141. }
  142. ],
  143. order_list: [],
  144. page: 1,
  145. keyword: -1,
  146. over: false,
  147. interval: null,
  148. search: false,
  149. search_text: '',
  150. oldOrder: [],
  151. template_message: []
  152. }
  153. },
  154. onShow() {
  155. this.order_list = [];
  156. this.page = 1;
  157. this.request(1).then(() => {
  158. this.get_time();
  159. });
  160. },
  161. onHide() {
  162. clearInterval(this.interval);
  163. },
  164. onUnload() {
  165. clearInterval(this.interval);
  166. },
  167. methods: {
  168. empyt_search() {
  169. this.search = false;
  170. this.search_text = '';
  171. this.set_active({id: -1});
  172. this.active_item = '全部预定';
  173. },
  174. set_active(data) {
  175. clearInterval(this.interval);
  176. this.order_list = [];
  177. this.keyword = data.id;
  178. this.over = false;
  179. this.page = 1;
  180. this.request().then(() => {
  181. if (data.id === 1 || data.id === -1 || data.id === 3) this.get_time();
  182. });
  183. for (let i = 0; i < this.select_list.length; i++) {
  184. if (this.select_list[i].id === data.id) {
  185. this.select_list[i].active = true;
  186. } else {
  187. this.select_list[i].active = false;
  188. }
  189. }
  190. this.active = false;
  191. this.active_item = data.text;
  192. },
  193. route_go(data) {
  194. if (data.status_num == 4) {
  195. uni.navigateTo({
  196. url: `/pages/order/order-detail/order-detail?id=${data.order_id}&sign=advance`
  197. })
  198. }
  199. },
  200. // 支付尾款
  201. payFinalPayment(item) {
  202. let data = [
  203. {
  204. "mch_id": item.goods.mch_id,
  205. "goods_list": [
  206. {
  207. "id":item.goods_id,
  208. "attr": JSON.parse(item.goods_info).attr_list,
  209. "num":item.goods_num,
  210. "cat_id":0,
  211. "goods_attr_id":item.goodsAttr.id,
  212. "advance_id": item.id,
  213. }
  214. ]
  215. }
  216. ];
  217. this.$jump({
  218. open_type: 'navigate',
  219. url: `/pages/order-submit/order-submit?mch_list=${JSON.stringify(data)}&preview_url=${encodeURIComponent(this.$api.advance.order_preview)}&submit_url=${encodeURIComponent(this.$api.advance.order_sub)}&order_page_url=/plugins/advance/order/order&plugin=advance&total_title=尾款`
  220. });
  221. },
  222. payPayment(item, index) {
  223. this.$request({
  224. url: this.$api.order.list_pay_data,
  225. data: {
  226. id: item.order_id,
  227. },
  228. method: 'get'
  229. }).then(res => {
  230. if (res.code === 0) {
  231. this.$payment.pay(res.data.id).then(() => {
  232. // 支付成功
  233. if (this.keyword === -1) {
  234. this.order_list[index].status_num = '4';
  235. } else {
  236. this.$delete(this.order_list, index);
  237. }
  238. }).catch(() => {
  239. // 支付失败
  240. });
  241. }
  242. })
  243. },
  244. // 去支付定金
  245. payDeposit(data, index) {
  246. this.$subscribe(this.template_message).then(() => {
  247. this.submit(data, index);
  248. }).catch(() => {
  249. this.submit(data, index);
  250. });
  251. },
  252. submit(data, index) {
  253. let body = {
  254. id: data.id,
  255. goods_id: data.goods_id,
  256. goods_num: data.goods_num,
  257. goods_attr_id:data.goodsAttr.id,
  258. };
  259. this.get_submit(body).then(response => {
  260. this.$payment.pay(response.data.id).then((res) => {
  261. this.$request({
  262. url: this.$api.advance.order,
  263. method: 'get',
  264. data: {
  265. id: data.id,
  266. }
  267. }).then(response => {
  268. if (response.code === 0) {
  269. this.$set(this.order_list, index, response.data.list[0]);
  270. let attr_name = '';
  271. let attr_groups = JSON.parse(this.order_list[index].goods_info);
  272. for (let j = 0; j < attr_groups.attr_list.length; j++) {
  273. attr_name+= ` ${attr_groups.attr_list[j].attr_group_name}:${attr_groups.attr_list[j].attr_name}`
  274. }
  275. this.$set(this.order_list[index], 'attr_name', attr_name);
  276. } else if (response.code === 1) {
  277. uni.showModal({
  278. title: '提示',
  279. content: res.msg,
  280. success(res) {
  281. if (res.cancel) {
  282. uni.navigateBack();
  283. } else if (res.confirm) {
  284. uni.navigateBack();
  285. }
  286. }
  287. })
  288. }
  289. });
  290. }).catch(() => {
  291. });
  292. });
  293. },
  294. addDate(date, days) {
  295. if(days == undefined || days == '') {
  296. days = 1;
  297. }
  298. let newDate = new Date(date.replace(/-/g, '/'));
  299. newDate.setDate(newDate.getDate() + days);
  300. let month = newDate.getMonth() + 1;
  301. let day = newDate.getDate();
  302. let mm = "'" + month + "'";
  303. let dd = "'" + day + "'";
  304. if(mm.length == 3) {
  305. month = "0" + month;
  306. }
  307. if(dd.length == 3) {
  308. day = "0" + day;
  309. }
  310. let hour = newDate.getHours();//得到小时
  311. let minu = newDate.getMinutes();//得到分钟
  312. let sec = newDate.getSeconds();//得到秒
  313. if (sec === 0) {
  314. sec = 59;
  315. if (minu === 0) {
  316. minu = 59;
  317. if (hour === 0) {
  318. hour = 23;
  319. day = '0' + Number(day) -1;
  320. } else {
  321. hour = hour -1;
  322. }
  323. } else {
  324. minu = minu - 1;
  325. }
  326. } else {
  327. sec = sec -1;
  328. }
  329. sec = `${sec}`;
  330. minu = `${minu}`;
  331. hour = `${hour}`;
  332. if (hour.length === 1) {
  333. hour = `0${hour}`
  334. }
  335. if (minu.length === 1) {
  336. minu = `0${minu}`
  337. }
  338. if (sec.length === 1) {
  339. sec = `0${sec}`
  340. }
  341. return newDate.getFullYear() + "." + month + "." + day + ' ' + hour +':' + minu + ':' + sec;
  342. },
  343. getDate(end_prepayment_at) {
  344. let newDate = new Date(end_prepayment_at.replace(/-/g, '/'));
  345. newDate.setDate(newDate.getDate());
  346. let month = newDate.getMonth() + 1;
  347. let day = newDate.getDate();
  348. let mm = "'" + month + "'";
  349. let dd = "'" + day + "'";
  350. if(mm.length == 3) {
  351. month = "0" + month;
  352. }
  353. if(dd.length == 3) {
  354. day = "0" + day;
  355. }
  356. let hour = newDate.getHours();//得到小时
  357. let minu = newDate.getMinutes();//得到分钟
  358. let sec = newDate.getSeconds();//得到秒
  359. sec = `${sec}`;
  360. minu = `${minu}`;
  361. hour = `${hour}`;
  362. if (hour.length === 1) {
  363. hour = `0${hour}`
  364. }
  365. if (minu.length === 1) {
  366. minu = `0${minu}`
  367. }
  368. if (sec.length === 1) {
  369. sec = `0${sec}`
  370. }
  371. return newDate.getFullYear() + "." + month + "." + day + ' ' + hour +':' + minu + ':' + sec;
  372. },
  373. async request(data) {
  374. uni.showLoading({
  375. title: '加载中'
  376. });
  377. try {
  378. const response = await this.$request({
  379. url: this.$api.advance.order,
  380. method: 'get',
  381. data: {
  382. keyword: this.keyword,
  383. page: this.page,
  384. name: this.search_text,
  385. }
  386. });
  387. uni.hideLoading();
  388. if (response.code === 0) {
  389. if (data === 1) {
  390. this.order_list = response.data.list;
  391. } else {
  392. this.order_list.push(...response.data.list);
  393. }
  394. this.template_message = response.data.template_message;
  395. for (let i = 0; i < this.order_list.length; i++) {
  396. let attr_name = '';
  397. let attr_groups = JSON.parse(this.order_list[i].goods_info);
  398. for (let j = 0; j < attr_groups.attr_list.length; j++) {
  399. attr_name+= ` ${attr_groups.attr_list[j].attr_group_name}:${attr_groups.attr_list[j].attr_name}`
  400. }
  401. this.$set(this.order_list[i], 'attr_name', attr_name);
  402. }
  403. }
  404. } catch (e) {
  405. uni.hideLoading();
  406. uni.navigateTo({
  407. url: `/plugins/advance/index/index`
  408. });
  409. }
  410. },
  411. set_time(pay_limit, end_prepayment_at) {
  412. if (pay_limit == -1) {
  413. return `${this.getDate(end_prepayment_at)} ~ 无期限`
  414. } else {
  415. return `${this.getDate(end_prepayment_at)} ~ ${this.addDate(end_prepayment_at, Number(pay_limit))}`
  416. }
  417. },
  418. async get_submit(body) {
  419. const response = await this.$request({
  420. url: this.$api.advance.order_submit,
  421. method: 'post',
  422. data: {
  423. ...body,
  424. }
  425. });
  426. if (response.code === 0) {
  427. return response;
  428. } else if (response.code === 1) {
  429. uni.showModal({
  430. title: '提示',
  431. content: response.msg,
  432. success(res) {
  433. if (res.cancel) {
  434. uni.navigateBack();
  435. } else if (res.confirm) {
  436. uni.navigateBack();
  437. }
  438. }
  439. })
  440. }
  441. },
  442. get_time() {
  443. clearInterval(this.interval);
  444. let now = new Date().getTime();
  445. for (let i = 0; i < this.order_list.length; i++) {
  446. if (this.order_list[i].status_num == 1) {
  447. let timelog = new Date(this.order_list[i].end_prepayment_at.replace(/-/g, '/')).getTime();
  448. let time = timelog - now;
  449. if (time > 0) {
  450. let day = parseInt((time/1000/60/60/24)%30);
  451. let hou = parseInt((time/1000/60/60)%24);
  452. let min = parseInt((time/1000/60)%60);
  453. let sec = parseInt((time/1000)%60);
  454. if (day > 0) {
  455. this.$set(this.order_list[i], 'html', day+"天"+hou+":"+(min<10?"0"+min:min) + ":"+(sec<10?"0"+sec:sec));
  456. } else {
  457. this.$set(this.order_list[i], 'html', hou+":"+(min<10?"0"+min:min) + ":"+(sec<10?"0"+sec:sec));
  458. }
  459. }
  460. } else if (this.order_list[i].status_num == 3) {
  461. if (this.order_list[i].pay_limit == -1) {
  462. this.$set(this.order_list[i], 'html', '不显示');
  463. } else {
  464. let newDate = new Date(this.order_list[i].end_prepayment_at.replace(/-/g, '/'));
  465. let timelog = newDate.setDate(newDate.getDate() + Number(this.order_list[i].pay_limit));
  466. let time = new Date(timelog).getTime() - now;
  467. if (time > 0) {
  468. let day = parseInt((time/1000/60/60/24)%30);
  469. let hou = parseInt((time/1000/60/60)%24);
  470. let min = parseInt((time/1000/60)%60);
  471. let sec = parseInt((time/1000)%60);
  472. if (day > 0) {
  473. this.$set(this.order_list[i], 'html', day+"天"+hou+":"+(min<10?"0"+min:min) + ":"+(sec<10?"0"+sec:sec));
  474. } else {
  475. this.$set(this.order_list[i], 'html', hou+":"+(min<10?"0"+min:min) + ":"+(sec<10?"0"+sec:sec));
  476. }
  477. }
  478. }
  479. }
  480. }
  481. this.interval = setInterval(() => {
  482. let now = new Date().getTime();
  483. if (this.order_list.length === 0) clearInterval(this.interval);
  484. for (let i = 0; i < this.order_list.length; i++) {
  485. if (this.order_list[i].status_num == 1) {
  486. let timelog = new Date(this.order_list[i].end_prepayment_at.replace(/-/g, '/')).getTime();
  487. let time = timelog - now;
  488. if (time > 0) {
  489. let day = parseInt((time/1000/60/60/24)%30);
  490. let hou = parseInt((time/1000/60/60)%24);
  491. let min = parseInt((time/1000/60)%60);
  492. let sec = parseInt((time/1000)%60);
  493. if (day > 0) {
  494. this.$set(this.order_list[i], 'html', day+"天"+hou+":"+(min<10?"0"+min:min) + ":"+(sec<10?"0"+sec:sec));
  495. } else {
  496. this.$set(this.order_list[i], 'html', hou+":"+(min<10?"0"+min:min) + ":"+(sec<10?"0"+sec:sec));
  497. }
  498. }
  499. } else if (this.order_list[i].status_num == 3) {
  500. if (this.order_list[i].pay_limit == -1) {
  501. this.$set(this.order_list[i], 'html', '不显示');
  502. } else {
  503. let newDate = new Date(this.order_list[i].end_prepayment_at.replace(/-/g, '/'));
  504. let timelog = newDate.setDate(newDate.getDate() + Number(this.order_list[i].pay_limit));
  505. let time = new Date(timelog).getTime() - now;
  506. if (time > 0) {
  507. let day = parseInt((time/1000/60/60/24)%30);
  508. let hou = parseInt((time/1000/60/60)%24);
  509. let min = parseInt((time/1000/60)%60);
  510. let sec = parseInt((time/1000)%60);
  511. if (day > 0) {
  512. this.$set(this.order_list[i], 'html', day+"天"+hou+":"+(min<10?"0"+min:min) + ":"+(sec<10?"0"+sec:sec));
  513. } else {
  514. this.$set(this.order_list[i], 'html', hou+":"+(min<10?"0"+min:min) + ":"+(sec<10?"0"+sec:sec));
  515. }
  516. }
  517. }
  518. }
  519. }
  520. }, 1000);
  521. },
  522. async set_search() {
  523. this.page = 1;
  524. this.keyword = -1;
  525. uni.showLoading({
  526. title: '加载中'
  527. });
  528. const response = await this.$request({
  529. url: this.$api.advance.order,
  530. method: 'get',
  531. data: {
  532. keyword: this.keyword,
  533. page: this.page,
  534. name: this.search_text,
  535. }
  536. });
  537. if (response.code === 0) {
  538. this.order_list = response.data.list;
  539. for (let i = 0; i < this.order_list.length; i++) {
  540. let attr_name = '';
  541. let attr_groups = JSON.parse(this.order_list[i].goods_info);
  542. for (let j = 0; j < attr_groups.attr_list.length; j++) {
  543. attr_name+= ` ${attr_groups.attr_list[j].attr_group_name}:${attr_groups.attr_list[j].attr_name}`
  544. }
  545. this.$set(this.order_list[i], 'attr_name', attr_name);
  546. }
  547. }
  548. uni.hideLoading();
  549. this.get_time();
  550. },
  551. blur_request() {
  552. // this.order_list = this.oldOrder;
  553. },
  554. go_search() {
  555. this.search = true;
  556. this.active = false;
  557. this.oldOrder = this.order_list;
  558. this.order_list = [];
  559. }
  560. },
  561. onReachBottom() {
  562. if (!this.over) {
  563. this.page+=1;
  564. this.$request({
  565. url: this.$api.advance.order,
  566. method: 'get',
  567. data: {
  568. keyword: this.keyword,
  569. page: this.page,
  570. name: this.search_text,
  571. }
  572. }).then(res => {
  573. if (res.code === 0) {
  574. if (res.data.list.length > 0) {
  575. this.order_list = [...this.order_list, ...res.data.list];
  576. for (let i = 0; i < this.order_list.length; i++) {
  577. let attr_name = '';
  578. let attr_groups = JSON.parse(this.order_list[i].goods_info);
  579. for (let j = 0; j < attr_groups.attr_list.length; j++) {
  580. attr_name+= ` ${attr_groups.attr_list[j].attr_group_name}:${attr_groups.attr_list[j].attr_name}`
  581. }
  582. this.$set(this.order_list[i], 'attr_name', attr_name);
  583. }
  584. this.get_time();
  585. } else {
  586. this.over = true;
  587. }
  588. }
  589. })
  590. }
  591. },
  592. computed: {
  593. ...mapGetters('mallConfig',{
  594. getTheme: 'getTheme'
  595. })
  596. },
  597. filters: {
  598. orderStatus:function(status) {
  599. if (status == 1) {
  600. return '定金待支付';
  601. } else if (status == 2) {
  602. return '尾款支付未开始';
  603. } else if (status == 3) {
  604. return '尾款待支付';
  605. } else if (status == 4) {
  606. return '购买成功';
  607. } else if (status == 5) {
  608. return '订单已取消';
  609. } else if (status == 6) {
  610. return '订单已售后';
  611. } else if (status == 7) {
  612. return '购买失败 定金支付超时';
  613. } else if (status == 8) {
  614. return '购买失败 定金已退款';
  615. } else if (status == 9) {
  616. return '购买失败 尾款支付超时';
  617. }
  618. }
  619. }
  620. }
  621. </script>
  622. <style lang="scss" scoped>
  623. .order {
  624. position: absolute;
  625. width: #{750rpx};
  626. top: 0;
  627. left: 0;
  628. height: 100%;
  629. z-index: 1500;
  630. background-color: #f7f7f7;
  631. .top {
  632. position: fixed;
  633. top: 0;
  634. left: 0;
  635. background-color: #efeff4;
  636. font-size: #{32rpx};
  637. z-index: 1500;
  638. width: #{750upx};
  639. .to-top {
  640. width: #{280rpx};
  641. height: #{88rpx};
  642. .icon {
  643. width: #{22rpx};
  644. height: #{12rpx};
  645. margin-left: #{16rpx};
  646. }
  647. text {
  648. width: #{145rpx};
  649. text-align: center;
  650. word-break: break-all;
  651. text-overflow: ellipsis;
  652. display: -webkit-box;
  653. -webkit-box-orient: vertical;
  654. -webkit-line-clamp: 1;
  655. overflow: hidden;
  656. font-size: #{26rpx};
  657. }
  658. .icon-active {
  659. transform:rotate(180deg);
  660. }
  661. }
  662. .top-input {
  663. height: #{88rpx};
  664. width: #{750-280rpx};
  665. .input {
  666. width: #{570upx};
  667. height: #{56upx};
  668. background-color: white;
  669. border-radius: #{30upx};
  670. margin-left: #{28upx};
  671. >image {
  672. width: #{26upx};
  673. height: #{26upx};
  674. margin-right: #{13upx};
  675. }
  676. >text {
  677. font-size: #{26rpx};
  678. color: #b2b2b2;
  679. }
  680. }
  681. }
  682. }
  683. .do-top {
  684. position: fixed;
  685. top: #{88rpx};
  686. width: 100%;
  687. height: 100%;
  688. z-index: 1500;
  689. background-color: rgba(0,0,0,.3);
  690. .do-top-item {
  691. width: 100%;
  692. height: #{88rpx};
  693. background-color: #ffffff;
  694. font-size: #{32rpx};
  695. border-top: #{1rpx} solid #e2e2e2;
  696. text-align: center;
  697. line-height: #{88rpx};
  698. }
  699. }
  700. .item {
  701. width: #{750rpx};
  702. margin-bottom: #{20rpx};
  703. background-color: #ffffff;
  704. .item-top {
  705. width: 100%;
  706. line-height: #{80rpx};
  707. background-color: #ffffff;
  708. border-bottom: #{1rpx} solid #e2e2e2;
  709. font-size: #{26rpx};
  710. color: #ff4544;
  711. padding: 0 #{24rpx};
  712. }
  713. .item-center {
  714. width: 100%;
  715. padding: #{24rpx 24rpx 0 24rpx};
  716. .image {
  717. width: #{220rpx};
  718. height: #{220rpx};
  719. border-radius: #{16rpx};
  720. }
  721. .content {
  722. width: #{530-48rpx};
  723. min-height: #{220rpx};
  724. padding-left: #{24rpx};
  725. .name {
  726. margin-top: #{12rpx};
  727. word-break: break-all;
  728. text-overflow: ellipsis;
  729. display: -webkit-box;
  730. -webkit-box-orient: vertical;
  731. -webkit-line-clamp: 2;
  732. overflow: hidden;
  733. font-size: #{28rpx};
  734. color:#353535;
  735. }
  736. .attr {
  737. margin-top: #{16rpx};
  738. >text {
  739. font-size: #{26rpx};
  740. color:#999999;
  741. margin-right: #{16rpx};
  742. }
  743. }
  744. .num-price {
  745. font-size: #{28rpx};
  746. color: #353535;
  747. margin-top: #{24rpx};
  748. }
  749. .des-price {
  750. font-size: #{28rpx};
  751. color: #353535;
  752. margin-top: #{24rpx};
  753. }
  754. }
  755. }
  756. .item-bottom {
  757. width: #{750rpx};
  758. background-color: #ffffff;
  759. padding: #{0 24rpx 32rpx 24rpx};
  760. overflow: hidden;
  761. .swell-price {
  762. font-size: #{28rpx};
  763. color: #353535;
  764. margin-top: #{24rpx};
  765. }
  766. .button {
  767. // display: inline-block;
  768. float: right;
  769. height: #{56rpx};
  770. line-height: #{56rpx};
  771. font-size: #{28rpx};
  772. color: #ffffff;
  773. padding: 0 #{24rpx};
  774. border-radius: #{28rpx};
  775. margin-top: #{32rpx};
  776. }
  777. }
  778. }
  779. }
  780. .order-empty {
  781. position: absolute;
  782. top: #{555rpx};
  783. left: 50%;
  784. transform: translate(-50%, -50%);
  785. width: #{240rpx};
  786. text-align: center;
  787. >image {
  788. height: #{240rpx};
  789. width: #{240rpx};
  790. }
  791. >text {
  792. font-size: #{24rpx};
  793. color: #666666;
  794. }
  795. }
  796. .text-time {
  797. text-align: right;font-size: #{26upx};color: #999999;
  798. margin-top: #{16upx};
  799. }
  800. .search {
  801. height: #{104rpx};
  802. width: 100%;
  803. background-color: #efeff4;
  804. padding: #{20rpx 24rpx};
  805. position: relative;
  806. overflow: hidden;
  807. .delete {
  808. width: #{32rpx};
  809. height: #{32rpx};
  810. }
  811. .input {
  812. height: #{64rpx};
  813. width: #{620rpx};
  814. border-radius: #{50rpx};
  815. background-color: #ffffff;
  816. padding-left: #{32rpx};
  817. font-size: #{26rpx};
  818. color: #353535;
  819. }
  820. .delete {
  821. position: absolute;
  822. right: #{125rpx};
  823. z-index: 1600;
  824. }
  825. }
  826. .order-number {
  827. }
  828. .filal-payment-time {
  829. font-size:#{22upx};
  830. color: #ff4544;
  831. text-align: right;
  832. margin-top: #{14upx};
  833. }
  834. .default-text {
  835. color: #353535;
  836. }
  837. </style>