order-list.vue 28 KB

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