order-list.vue 27 KB

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