order-list.vue 24 KB

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