order-list.vue 28 KB

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