order-list.vue 22 KB

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