order-list.vue 20 KB

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