order-list.vue 20 KB

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