order-list.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911
  1. <template>
  2. <view class="container" :style="{ paddingTop: navbarHeight + 'px' }">
  3. <!-- 自定义返回 -->
  4. <header-back
  5. :systeminfo="systeminfo"
  6. :navbar-data="nvabarData"
  7. :headerBtnPosi="headerBtnPosi"
  8. :isDelete="isDelete"
  9. @goSearchPath="handlSearchPath"
  10. ></header-back>
  11. <tui-skeleton
  12. v-if="skeletonShow"
  13. backgroundColor="#fafafa"
  14. borderRadius="10rpx"
  15. :isLoading="true"
  16. :loadingType="5"
  17. ></tui-skeleton>
  18. <template v-else>
  19. <view class="order-section-top" :style="{ marginTop: navbarHeight + 'px' }">
  20. <scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
  21. <view
  22. v-for="(item, index) in orderTabBar"
  23. :key="index"
  24. class="tab-bar-item"
  25. :class="[currentTab == index ? 'active' : '']"
  26. :data-current="index"
  27. @tap.stop="onClickTab"
  28. >
  29. <text class="tab-bar-title">{{ item.text }}</text>
  30. </view>
  31. </scroll-view>
  32. </view>
  33. <swiper
  34. class="tab-content"
  35. :current="currentTab"
  36. duration="80"
  37. @animationfinish="onChange"
  38. :style="{ height: winHeight + 'px' }"
  39. >
  40. <swiper-item v-for="(tabItem, index) in orderTabBar" :key="index" @touchmove.stop="">
  41. <scroll-view scroll-y class="scoll-y tui-skeleton" @scrolltolower="scrolltolower">
  42. <view :class="{ 'tui-order-list': scrollTop >= 0 }" class="tui-skeleton clearfix">
  43. <!-- 空白页 -->
  44. <empty
  45. v-if="tabItem.loaded === true && tabItem.orderList.length === 0"
  46. :typeIndex="currentTab"
  47. :navbarHeight="navbarHeight"
  48. ></empty>
  49. <!-- 列表 -->
  50. <view v-else class="tui-order-content">
  51. <view
  52. class="tui-order-item"
  53. v-for="(order, orderIndex) in tabItem.orderList"
  54. :key="orderIndex"
  55. >
  56. <view class="order-title">
  57. <view class="order-title-t">
  58. <text class="bage-text tui-skeleton-fillet">订单编号:{{ order.orderNo }}</text>
  59. </view>
  60. <view class="order-title-b">
  61. <view class="order-title-btxt tui-skeleton-fillet"
  62. >下单时间:{{ order.orderTime }}</view
  63. >
  64. <view class="order-title-tip tui-skeleton-fillet">{{
  65. StateExpFormat(order.status)
  66. }}</view>
  67. </view>
  68. </view>
  69. <block v-for="(shop, sindex) in order.shopOrderList" :key="sindex">
  70. <view class="goods-title">
  71. <view v-if="shop.shopPromotion" class="floor-item-act">
  72. <view class="floor-tags">{{ shop.shopPromotion.name }}</view>
  73. </view>
  74. <view class="title-text" v-if="order.secondHandOrderFlag == 1"
  75. >{{ shop.shopName }}
  76. <label class="paymenttext" v-if="order.affirmPaymentFlag == 1"
  77. >已确认打款供应商</label
  78. >
  79. </view>
  80. <view
  81. class="title-text tui-skeleton-fillet"
  82. v-else
  83. >{{ shop.shopName }}<label class="iconfont icon-jinrudianpu"></label
  84. ></view>
  85. </view>
  86. <view
  87. class="goods-item"
  88. v-for="(pros, prosIndex) in shop.orderProductList"
  89. :key="prosIndex"
  90. @click.stop="detail(order.orderId)"
  91. >
  92. <view class="goods-pros-t">
  93. <view class="pros-img tui-skeleton-fillet">
  94. <image :src="pros.image" alt="" />
  95. </view>
  96. <view class="pros-product clearfix">
  97. <view class="producttitle tui-skeleton-fillet">{{ pros.name }}</view>
  98. <view
  99. class="productspec tui-skeleton-fillet"
  100. v-if="pros.productCategory != 2"
  101. >规格:{{ pros.productUnit }}</view
  102. >
  103. <view class="productprice">
  104. <view class="price tui-skeleton-fillet">
  105. <text>¥{{ pros.price | NumFormat }}</text>
  106. </view>
  107. <view class="count tui-skeleton-fillet">
  108. <text class="small">x</text>{{ pros.num }}
  109. </view>
  110. </view>
  111. </view>
  112. </view>
  113. </view>
  114. </block>
  115. <view class="order-footer">
  116. <view class="order-footer-bot">
  117. <view class="count tui-skeleton-fillet">共{{ order.productCount }}件商品</view>
  118. <view
  119. class="money tui-skeleton-fillet"
  120. v-if="order.status == 31 || order.status == 32 || order.status == 33"
  121. >
  122. 已支付:<label style="color:#f94b4b ;"
  123. >¥{{ order.receiptAmount | NumFormat }}</label
  124. >
  125. </view>
  126. <view class="money tui-skeleton-fillet" v-else>
  127. 待付总额:<label style="color:#f94b4b ;"
  128. >¥{{ order.pendingPayments | NumFormat }}</label
  129. >
  130. </view>
  131. </view>
  132. </view>
  133. <!-- 底部button -->
  134. <order-button
  135. ref="orderButton"
  136. :status="order.status"
  137. :order="order"
  138. @buttonConfirm="handButtonConfirm"
  139. >
  140. </order-button>
  141. </view>
  142. <!--加载loadding-->
  143. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  144. <tui-nomore
  145. :visible="!pullUpOn"
  146. :backgroundColor="'#ffffff'"
  147. :text="nomoreText"
  148. ></tui-nomore>
  149. <!--加载loadding-->
  150. </view>
  151. </view>
  152. </scroll-view>
  153. </swiper-item>
  154. </swiper>
  155. </template>
  156. <!-- 分享弹窗 -->
  157. <share-alert v-if="isShareModal" :orderId="handleOrderId" @shareConfirm="onShareAppMessage" />
  158. <!-- 提示弹窗 -->
  159. <tui-modal
  160. :show="modal"
  161. @click="handleClick"
  162. :content="contentModalText"
  163. :button="modalButton"
  164. color="#333"
  165. :size="32"
  166. shape="circle"
  167. :maskClosable="false"
  168. >
  169. </tui-modal>
  170. <!-- 透明模态层 -->
  171. <modal-layer v-if="isModalLayer"></modal-layer>
  172. </view>
  173. </template>
  174. <script>
  175. import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
  176. import btSearch from '@/components/uni-search/bt-search.vue' //搜索
  177. import orderButton from './components/details/orderListButton' //按钮
  178. import modalLayer from '@/components/modal-layer'
  179. import empty from './components/empty'
  180. import shareAlert from '@/components/cm-module/modelAlert/shareAlert' //分享弹窗
  181. export default {
  182. components: {
  183. headerBack,
  184. empty,
  185. btSearch,
  186. orderButton,
  187. modalLayer,
  188. shareAlert,
  189. },
  190. data() {
  191. return {
  192. CustomBar: this.CustomBar, // 顶部导航栏高度
  193. headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
  194. systeminfo: this.setSysteminfo(), //获取设备信息
  195. winHeight: '', //窗口高度
  196. nvabarData: {
  197. //顶部自定义导航
  198. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  199. showSearch: 1,
  200. title: '我的订单' // 导航栏 中间的标题
  201. },
  202. orderTabBar: [
  203. { state: 0, text: '全部订单', orderList: [] },
  204. { state: 1, text: '待确认', orderList: [] },
  205. { state: 2, text: '待付款', orderList: [] },
  206. { state: 3, text: '待发货', orderList: [] },
  207. { state: 4, text: '已发货', orderList: [] },
  208. { state: 5, text: '退货/款', orderList: [] }
  209. ],
  210. currentTab: 0, //预设当前项的值
  211. scrollLeft: 0, //tab标题的滚动条位置
  212. listQuery:{
  213. orderState: 0,
  214. userId:0,
  215. pageNum: 1,
  216. pageSize: 10
  217. },
  218. orderData: [],
  219. scrollTop: 0,
  220. skeletonShow: true,
  221. isDelete: false,
  222. isClickChange: false,
  223. isShareModal: false, //控制分享弹窗
  224. isModalLayer: false,
  225. loadding: false,
  226. pullUpOn: true,
  227. hasNextPage: false,
  228. pullFlag: true,
  229. navbarHeight: '',
  230. modelType: 0,
  231. nomoreText: '上拉显示更多',
  232. isOnloadFlag: false,
  233. handleOrderId: 0, //点击按钮传入的的订单ID
  234. handleModelEven:0,
  235. modal:false,
  236. contentModalText: '订单查询失败,请稍候重试~', //操作文字提示语句
  237. modalButton: [
  238. {
  239. text: '取消',
  240. type: 'gray',
  241. plain: true //是否空心
  242. },
  243. {
  244. text: '确定',
  245. customStyle: {
  246. color: '#fff',
  247. bgColor: '#F3B574'
  248. },
  249. plain: false
  250. }
  251. ]
  252. }
  253. },
  254. onLoad(e) {
  255. if (e.type === 'detele') {
  256. this.isDelete = true
  257. }
  258. this.currentTab = e.state
  259. this.isOnloadFlag = true
  260. this.getHeaderTopHeight() //设置自定义导航高度
  261. this.initStorage()
  262. },
  263. filters: {
  264. NumFormat(value) {
  265. //处理金额
  266. return Number(value).toFixed(2)
  267. }
  268. },
  269. methods: {
  270. async initStorage(){
  271. //初始化
  272. const usrInfo = await this.$api.getStorage()
  273. this.listQuery.userId = usrInfo.userId ? usrInfo.userId : 0
  274. this.getOrderDatainit(this.currentTab)
  275. },
  276. // 滚动切换标签样式
  277. onChange: function(e) {
  278. let tabIndex = e.target.current || e.detail.current
  279. if (this.isClickChange) {
  280. this.currentTab = tabIndex
  281. this.isClickChange = false
  282. return
  283. }
  284. this.isClickChange = false
  285. this.currentTab = tabIndex
  286. this.checkCor()
  287. this.pageNum = 1
  288. this.pullUpOn = true //切换时隐藏
  289. this.loadding = false //切换时隐藏
  290. this.nomoreText = ''
  291. if (!this.isOnloadFlag) {
  292. this.getOrderDatainit(this.currentTab, 'tabChange')
  293. }
  294. },
  295. // 点击标题切换当前页时改变样式
  296. onClickTab: function(e) {
  297. let tabIndex = e.target.dataset.current || e.currentTarget.dataset.current
  298. if (this.currentTab === tabIndex) {
  299. return false
  300. } else {
  301. this.isClickChange = true
  302. this.currentTab = tabIndex
  303. this.pageNum = 1
  304. this.pullUpOn = true //切换时隐藏
  305. this.loadding = false //切换时隐藏
  306. this.getOrderDatainit(this.currentTab)
  307. }
  308. },
  309. //判断当前滚动超过一屏时,设置tab标题滚动条。
  310. checkCor: function() {
  311. if (this.currentTab > 3) {
  312. //这里距离按实际计算
  313. this.scrollLeft = 300
  314. } else {
  315. this.scrollLeft = 0
  316. }
  317. },
  318. async getOrderDatainit(index, source) {
  319. let orderItem = this.orderTabBar[index]
  320. if (source === 'tabChange' && orderItem.loaded === true) {
  321. //tab切换只有第一次需要加载数据
  322. return
  323. }
  324. try{
  325. this.listQuery.orderState = index
  326. const res = await this.OrderService.QueryOrderList(this.listQuery)
  327. const data = res.data
  328. const orderList = data.list.filter(item => {
  329. //添加不同状态下订单的表现形式
  330. item = Object.assign(item, this.StateExpFormat(item.status))
  331. return item
  332. })
  333. orderItem.orderList = []
  334. orderList.forEach(item => {
  335. orderItem.orderList.push(item)
  336. })
  337. //loaded新字段用于表示数据加载完毕,如果为空可以显示空白页
  338. this.$set(orderItem, 'loaded', true)
  339. this.hasNextPage = data.hasNextPage
  340. if (this.hasNextPage) {
  341. this.pullUpOn = false
  342. this.nomoreText = '上拉显示更多'
  343. } else {
  344. if (orderItem.orderList.length < 2) {
  345. this.pullUpOn = true
  346. } else {
  347. this.pullUpOn = false
  348. this.nomoreText = '已至底部'
  349. }
  350. }
  351. this.skeletonShow = false
  352. this.isOnloadFlag = false
  353. }catch(error){
  354. this.$util.msg(error.msg, 2000)
  355. }
  356. },
  357. async getOnReachBottomData(index) {
  358. //上拉加载
  359. try{
  360. this.listQuery.pageNum += 1
  361. this.listQuery.orderState = this.orderTabBar[index].state
  362. const res = await this.OrderService.QueryOrderList(this.listQuery)
  363. const data = res.data
  364. const orderItem = this.orderTabBar[index]
  365. this.hasNextPage = data.hasNextPage
  366. orderItem.orderList = orderItem.orderList.concat(data.list)
  367. this.pullFlag = false // 防上拉暴滑
  368. setTimeout(() => {
  369. this.pullFlag = true
  370. }, 500)
  371. if (this.hasNextPage) {
  372. this.pullUpOn = false
  373. this.nomoreText = '上拉显示更多'
  374. } else {
  375. this.loadding = false
  376. this.pullUpOn = false
  377. this.nomoreText = '已至底部'
  378. }
  379. }catch(error){
  380. this.$util.msg(error.msg, 2000)
  381. }
  382. },
  383. scrolltolower() {
  384. if (this.hasNextPage) {
  385. this.loadding = true
  386. this.pullUpOn = true
  387. this.getOnReachBottomData(this.currentTab)
  388. }
  389. },
  390. detail(orderId) {
  391. //订单详情跳转
  392. this.isModalLayer = true
  393. this.$api.navigateTo(`/pages/user/order/order-details?state=${this.currentTab}&orderId=${orderId}`)
  394. },
  395. handButtonConfirm(data) {
  396. //获取点击
  397. this.handleOrderId = data.orderId
  398. switch (data.type) {
  399. case 'cancel':
  400. //取消订单
  401. this.modal = true
  402. this.contentModalText = '确认取消该订单吗?'
  403. this.handleModelEven = 1
  404. break
  405. case 'query':
  406. this.$api.navigateTo('/pages/user/order/order-logistics?orderId=' + this.handleOrderId)
  407. break
  408. case 'upload':
  409. this.$api.navigateTo('/pages/user/order/order-addpay?orderId=' + this.handleOrderId)
  410. break
  411. case 'confirm':
  412. //确认收货
  413. this.modal = true
  414. this.contentModalText = '确认收货吗?'
  415. this.handleModelEven = 2
  416. break
  417. case 'pay':
  418. this.orderPaymentValidation()
  419. break
  420. }
  421. },
  422. async orderPaymentValidation(){
  423. //监听根据付款状态做操作
  424. try{
  425. const res = await this.OrderService.OrderPaymentValidation({ orderId: this.handleOrderId })
  426. if (res.data.onlinePayFlag == 1) {// 只能线下
  427. this.$api.navigateTo(`/pages/user/pay/card-under?orderId=${this.handleOrderId}`)
  428. } else {
  429. this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${this.handleOrderId}`)
  430. }
  431. }catch(error){
  432. this.$util.msg(error.msg, 2000)
  433. }
  434. },
  435. handleClick(e){
  436. //确认操作
  437. if (e.index == 1) {
  438. switch(this.handleModelEven){
  439. case 1://取消订单
  440. this.cancelOrder()
  441. break
  442. case 2://确认收货
  443. this.confirmReceipt()
  444. break
  445. }
  446. }
  447. this.modal = false
  448. },
  449. async confirmReceipt(){
  450. //确认收货
  451. try{
  452. const res = await this.OrderService.ConfirmReceipt({ orderId: this.handleOrderId })
  453. this.$util.msg(res.msg, 2000, true, 'success')
  454. setTimeout(() => {
  455. this.getOrderDatainit(this.currentTab)
  456. }, 2000)
  457. }catch(error){
  458. this.$util.msg(error.msg, 2000)
  459. }
  460. },
  461. async cancelOrder(){
  462. //取消订单
  463. try{
  464. const res = await this.OrderService.CancelOrder({ orderId: this.handleOrderId, userIdentity : 0 })
  465. this.$util.msg(res.msg, 2000, true, 'success')
  466. setTimeout(() => {
  467. this.getOrderDatainit(this.currentTab)
  468. }, 2000)
  469. }catch(error){
  470. this.$util.msg(error.msg, 2000)
  471. }
  472. },
  473. handlSearchPath() {
  474. this.$api.navigateTo('/pages/search/search-order')
  475. },
  476. onShareAppMessage(res) {
  477. //分享转发
  478. this.isShareModal = false
  479. if (res.from === 'button') {
  480. // 来自页面内转发按钮
  481. }
  482. return {
  483. title: '您有新的分享订单,快来查看吧~',
  484. path: `/pages/user/order/order-sharelogin?orderId=${this.handleOrderId}&userId=${this.listQuery.userId}`,
  485. imageUrl: 'https://static.caimei365.com/app/mini-mcare/icon/icon_shareOrder@2x.png'
  486. }
  487. },
  488. orderPriceToFixed(n) {
  489. let price = ''
  490. price = n.toFixed(2)
  491. return price
  492. },
  493. getHeaderTopHeight() {
  494. // 状态栏高度
  495. let self = this
  496. let statusBarHeight = this.systeminfo.statusBarHeight
  497. let headerPosi = this.headerBtnPosi
  498. let btnPosi = {
  499. // 胶囊实际位置,坐标信息不是左上角原点
  500. height: headerPosi.height,
  501. width: headerPosi.width,
  502. // 胶囊top - 状态栏高度
  503. top: headerPosi.top - statusBarHeight,
  504. // 胶囊bottom - 胶囊height - 状态栏height (现胶囊bottom 为距离导航栏底部的长度)
  505. bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
  506. // 屏幕宽度 - 胶囊right
  507. right: this.systeminfo.screenWidth - headerPosi.right
  508. }
  509. this.navbarHeight = headerPosi.bottom + btnPosi.bottom // 原胶囊bottom + 现胶囊bottom
  510. // 高度自适应
  511. uni.getSystemInfo({
  512. success: function(res) {
  513. let calc = res.windowHeight
  514. self.winHeight = calc - self.CustomBar
  515. }
  516. })
  517. },
  518. setHeaderBtnPosi() {
  519. // 获得胶囊按钮位置信息
  520. let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
  521. return headerBtnPosi
  522. },
  523. setSysteminfo() {
  524. let systeminfo
  525. uni.getSystemInfo({
  526. // 获取设备信息
  527. success: res => {
  528. systeminfo = res
  529. }
  530. })
  531. return systeminfo
  532. },
  533. PromotionsFormat(promo) {
  534. //促销活动类型数据处理
  535. if (promo != null) {
  536. if (promo.type == 1 && promo.mode == 1) {
  537. return true
  538. } else {
  539. return false
  540. }
  541. }
  542. return false
  543. },
  544. StateExpFormat(state) {
  545. //订单状态文字和颜色
  546. var HtmlStateText = '',
  547. stateTextObject = {
  548. 0: '待确认',
  549. 4: '交易完成',
  550. 5: '订单完成',
  551. 6: '已关闭',
  552. 7: '交易全退',
  553. 77: '交易全退',
  554. 11: '待付款待发货',
  555. 12: '待付款部分发货',
  556. 13: '待付款已发货',
  557. 21: '部分付款待发货',
  558. 22: '部分付款部分发货',
  559. 23: '部分付款已发货',
  560. 31: '已付款待发货',
  561. 32: '已付款部分发货',
  562. 33: '已付款已发货',
  563. 111: '待付款待发货'
  564. }
  565. Object.keys(stateTextObject).forEach(function(key) {
  566. if (key == state) {
  567. HtmlStateText = stateTextObject[key]
  568. }
  569. })
  570. return HtmlStateText
  571. },
  572. handleBeanlClick() {
  573. //关闭采美豆弹窗
  574. this.isActivityBean = false
  575. this.getOrderDatainit(this.currentTab)
  576. }
  577. },
  578. onPageScroll(e) {
  579. this.scrollTop = e.scrollTop
  580. },
  581. onShow() {
  582. this.isModalLayer = false
  583. }
  584. }
  585. </script>
  586. <style lang="scss">
  587. /*tabbar start*/
  588. ::-webkit-scrollbar {
  589. width: 0;
  590. height: 0;
  591. color: transparent;
  592. }
  593. .order-section-top {
  594. width: 100%;
  595. position: fixed;
  596. top: 0;
  597. left: 0;
  598. z-index: 99;
  599. background: #ffffff;
  600. }
  601. .tab-view::before {
  602. content: '';
  603. position: absolute;
  604. border-bottom: 1rpx solid #eaeef1;
  605. -webkit-transform: scaleY(0.5);
  606. transform: scaleY(0.5);
  607. bottom: 0;
  608. right: 0;
  609. left: 0;
  610. }
  611. .tab-view {
  612. width: 100%;
  613. height: 80rpx;
  614. overflow: hidden;
  615. box-sizing: border-box;
  616. background: #fff;
  617. white-space: nowrap;
  618. border-top: 1px solid #f7f7f7;
  619. }
  620. .tab-bar-item {
  621. padding: 0;
  622. height: 80rpx;
  623. min-width: 80rpx;
  624. line-height: 80rpx;
  625. margin: 0 28rpx;
  626. display: inline-block;
  627. text-align: center;
  628. box-sizing: border-box;
  629. }
  630. .tab-bar-title {
  631. height: 80rpx;
  632. line-height: 80rpx;
  633. font-size: $font-size-28;
  634. color: $text-color;
  635. }
  636. .active {
  637. border-bottom: 6rpx solid $color-system;
  638. }
  639. .active .tab-bar-title {
  640. color: $color-system !important;
  641. }
  642. /*tabbar end*/
  643. .scoll-y {
  644. height: 100%;
  645. }
  646. page {
  647. background: #f7f7f7;
  648. }
  649. .container {
  650. padding-bottom: env(safe-area-inset-bottom);
  651. height: auto;
  652. position: relative;
  653. }
  654. .tui-order-content {
  655. width: 100%;
  656. height: auto;
  657. }
  658. .tui-order-list {
  659. margin-top: 90rpx;
  660. width: 100%;
  661. position: relative;
  662. }
  663. .tui-order-item {
  664. display: flex;
  665. flex-direction: column;
  666. width: 702rpx;
  667. padding: 20rpx 24rpx 0 24rpx;
  668. background: #fff;
  669. border-bottom: 20rpx solid #f7f7f7;
  670. }
  671. .order-title {
  672. width: 100%;
  673. height: auto;
  674. .order-title-t {
  675. width: 100%;
  676. height: 68rpx;
  677. float: left;
  678. line-height: 68rpx;
  679. position: relative;
  680. .bage-icon {
  681. width: 50rpx;
  682. height: 50rpx;
  683. display: block;
  684. position: absolute;
  685. right: 0;
  686. top: 9rpx;
  687. }
  688. .bage-buss {
  689. display: inline-block;
  690. width: 72rpx;
  691. height: 30rpx;
  692. background: radial-gradient(circle, rgba(255, 39, 180, 1) 0%, rgba(193, 77, 245, 1) 100%);
  693. border-radius: 4rpx;
  694. line-height: 30rpx;
  695. font-size: $font-size-22;
  696. text-align: center;
  697. color: #ffffff;
  698. }
  699. .bage-auto {
  700. display: inline-block;
  701. width: 72rpx;
  702. height: 30rpx;
  703. background: radial-gradient(circle, rgba(255, 180, 39, 1) 0%, rgba(245, 142, 77, 1) 100%);
  704. border-radius: 4rpx;
  705. line-height: 30rpx;
  706. font-size: $font-size-22;
  707. text-align: center;
  708. color: #ffffff;
  709. }
  710. .bage-text {
  711. display: inline-block;
  712. font-size: $font-size-28;
  713. line-height: 68rpx;
  714. text-align: left;
  715. color: $text-color;
  716. margin-left: 10rpx;
  717. }
  718. }
  719. .order-title-b {
  720. width: 100%;
  721. height: 40rpx;
  722. float: left;
  723. margin-top: 8rpx;
  724. .order-title-btxt {
  725. float: left;
  726. font-size: $font-size-28;
  727. line-height: 40rpx;
  728. color: #999999;
  729. text-align: lef;
  730. }
  731. .order-title-tip {
  732. float: right;
  733. font-size: $font-size-28;
  734. line-height: 40rpx;
  735. text-align: right;
  736. color: #ff2a2a;
  737. }
  738. }
  739. }
  740. .goods-title {
  741. width: 100%;
  742. height: 56rpx;
  743. float: left;
  744. margin-top: 10rpx;
  745. .floor-item-act {
  746. height: 56rpx;
  747. text-align: center;
  748. box-sizing: border-box;
  749. float: left;
  750. padding: 10rpx 0;
  751. margin-right: 12rpx;
  752. }
  753. .title-text {
  754. width: 400rpx;
  755. overflow: hidden;
  756. text-overflow: ellipsis;
  757. white-space: nowrap;
  758. float: left;
  759. font-size: $font-size-28;
  760. color: $text-color;
  761. text-align: left;
  762. line-height: 56rpx;
  763. font-weight: bold;
  764. .iconfont {
  765. color: #999999;
  766. font-size: 28rpx;
  767. margin-left: 10rpx;
  768. }
  769. .paymenttext {
  770. color: #f9a94b;
  771. font-size: $font-size-22;
  772. margin-left: 20rpx;
  773. }
  774. }
  775. }
  776. .goods-item {
  777. width: 100%;
  778. height: auto;
  779. }
  780. .goods-pros-t {
  781. width: 100%;
  782. height: auto;
  783. padding: 24rpx 0;
  784. .pros-img {
  785. float: left;
  786. width: 210rpx;
  787. height: 100%;
  788. border-radius: 10rpx;
  789. margin: 0 26rpx 0 0;
  790. position: relative;
  791. .tips {
  792. display: inline-block;
  793. width: 80rpx;
  794. height: 40rpx;
  795. background-image: linear-gradient(214deg, #ff4500 0%, #ff5800 53%, #ff4367 100%);
  796. line-height: 40rpx;
  797. text-align: center;
  798. font-size: $font-size-24;
  799. color: #ffffff;
  800. border-radius: 10rpx 0 10rpx 0;
  801. position: absolute;
  802. top: 0;
  803. left: 0;
  804. }
  805. image {
  806. width: 210rpx;
  807. height: 210rpx;
  808. border-radius: 10rpx;
  809. border: 1px solid #f3f3f3;
  810. }
  811. }
  812. }
  813. .pros-product {
  814. width: 460rpx;
  815. height: 100%;
  816. line-height: 36rpx;
  817. font-size: $font-size-26;
  818. position: relative;
  819. float: left;
  820. .producttitle {
  821. width: 100%;
  822. display: inline-block;
  823. height: auto;
  824. text-overflow: ellipsis;
  825. display: -webkit-box;
  826. word-break: break-all;
  827. -webkit-box-orient: vertical;
  828. -webkit-line-clamp: 2;
  829. overflow: hidden;
  830. margin-bottom: 8rpx;
  831. }
  832. .productspec {
  833. height: 36rpx;
  834. color: #999999;
  835. margin: 30rpx 0;
  836. }
  837. .productprice {
  838. height: 48rpx;
  839. width: 100%;
  840. float: left;
  841. .price {
  842. line-height: 48rpx;
  843. font-size: $font-size-28;
  844. width: 48%;
  845. color: #ff2a2a;
  846. float: left;
  847. font-weight: bold;
  848. &.none {
  849. text-decoration: line-through;
  850. color: #999999;
  851. }
  852. }
  853. .count {
  854. height: 100%;
  855. float: right;
  856. position: relative;
  857. .small {
  858. color: #666666;
  859. }
  860. }
  861. }
  862. .floor-item-act {
  863. width: 100%;
  864. height: 56rpx;
  865. text-align: center;
  866. box-sizing: border-box;
  867. float: left;
  868. padding: 0 0 10rpx 0;
  869. }
  870. }
  871. .order-footer {
  872. width: 100%;
  873. height: 78rpx;
  874. float: left;
  875. margin-top: 20rpx;
  876. .order-footer-top {
  877. width: 100%;
  878. height: 34rpx;
  879. line-height: 34rpx;
  880. font-size: $font-size-24;
  881. color: #999999;
  882. text-align: right;
  883. }
  884. .order-footer-bot {
  885. width: 100%;
  886. float: left;
  887. height: 48rpx;
  888. line-height: 48rpx;
  889. font-size: $font-size-28;
  890. color: $text-color;
  891. .count {
  892. width: 50%;
  893. float: left;
  894. text-align: left;
  895. font-weight: bold;
  896. }
  897. .money {
  898. width: 50%;
  899. float: right;
  900. text-align: right;
  901. }
  902. }
  903. }
  904. </style>