DOrder.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  1. <template>
  2. <view style="height: 100vh">
  3. <view class="content">
  4. <view class="navbar">
  5. <view
  6. v-for="(item, index) in navList"
  7. :key="index"
  8. class="nav-item"
  9. :class="[ tabCurrentIndex === index?'current primary-color':'']"
  10. @click="tabClick(item, index)"
  11. >
  12. {{ item.text }}
  13. <view class="current-line primary-btn"></view>
  14. </view>
  15. </view>
  16. <swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
  17. <swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
  18. <scroll-view @scrolltolower="scrollBootom" scroll-y="true" style="height:100%">
  19. <Aempty text="您还没有相关订单" src="https://onlineimg.qianniao.vip/order.png" v-if="orderList.length === 0"></Aempty>
  20. <view v-for="(item, index) in orderList" :key="index" class="order-item">
  21. <view class="clearfix order-no-view" @click="goPage(`/pagesT/Distribution/DorderDetail?id=` + item.id)">
  22. <text class="float_left order-no-text">{{ $_utils.formatDate(item.createTime) }}</text>
  23. <text class="float_right order-status-text">
  24. {{
  25. item.orderStatus === 1
  26. ? '待付款'
  27. : item.orderStatus === 2
  28. ? '待付款'
  29. : item.orderStatus === 3
  30. ? '待发货'
  31. : item.orderStatus === 4
  32. ? '待收货'
  33. : item.orderStatus === 5
  34. ? '已完成'
  35. : item.orderStatus === 6
  36. ? '已关闭'
  37. : ''
  38. }}
  39. </text>
  40. </view>
  41. <view class="goods-ul">
  42. <view
  43. class="goods-li clearfix"
  44. v-for="(it, gindex) in item.orderGoods"
  45. :key="gindex"
  46. @click="goPage(`/pagesT/Distribution/DorderDetail?id=` + item.id)"
  47. >
  48. <image class="goods-img float_left" :src="it.goodsImages" mode="aspectFit"></image>
  49. <view class="float_right goods-right">
  50. <view class="goods-name">{{ it.goodsName }}</view>
  51. <view class="goods-descrip">
  52. 规格:
  53. <text style="padding-right: 6upx;">{{ it.unitName }}</text>
  54. <block v-for="(ip, indexSp) in it.specGroup" :key="indexSp">
  55. <text v-if="indexSp > 0">-</text>
  56. <text>{{ ip.specValueName }}</text>
  57. </block>
  58. </view>
  59. <view class="goods-price clearfix">
  60. <view class="float_left">
  61. <text class="price primary-color">¥{{ it.price }}</text>
  62. <!-- <text class="sku">/{{ it.unitName }}</text> -->
  63. </view>
  64. <view class="float_right">
  65. <text class="icon-jia">*</text>
  66. <text class="goods-num">{{ it.buyNum }}</text>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. </view>
  72. <view class="middle clearfix">
  73. <view class="float_left money-view">
  74. {{ text_set.commission || '佣金' }}:
  75. <text class="primary-color">¥{{ item.retMoney }}</text>
  76. </view>
  77. <view class="float_right">
  78. 实付:
  79. <text class="price primary-color">¥{{ item.payAmount }}</text>
  80. </view>
  81. </view>
  82. </view>
  83. <u-loadmore margin-top="20" v-if="orderList.length" :status="loading_status" />
  84. </scroll-view>
  85. </swiper-item>
  86. </swiper>
  87. </view>
  88. </view>
  89. </template>
  90. <script>
  91. export default {
  92. data() {
  93. return {
  94. orderList: [],
  95. tabCurrentIndex: 0,
  96. state: 1,
  97. loading_status: 'loadmore',
  98. navList: [
  99. {
  100. state: 0,
  101. text: '全部',
  102. loadingType: 'more',
  103. orderList: []
  104. },
  105. {
  106. state: 2,
  107. text: '待付款',
  108. loadingType: 'more',
  109. orderList: []
  110. },
  111. {
  112. state: 3,
  113. text: '待发货',
  114. loadingType: 'more',
  115. orderList: []
  116. },
  117. {
  118. state: 4,
  119. text: '待收货',
  120. loadingType: 'more',
  121. orderList: []
  122. },
  123. {
  124. state: 5,
  125. text: '已完成',
  126. loadingType: 'more',
  127. orderList: []
  128. }
  129. ],
  130. page: 1,
  131. pageSize: 10,
  132. pageTotal: 0,
  133. text_set: {}
  134. };
  135. },
  136. onLoad(options) {
  137. this.state = 0;
  138. this.text_set = this.$store.state.distributionTextSet;
  139. if (this.text_set.commission_r) {
  140. uni.setNavigationBarTitle({
  141. title: this.text_set.distribution_order || '分销订单'
  142. });
  143. }
  144. },
  145. onShow() {
  146. this.getOrderSelect();
  147. },
  148. methods: {
  149. scrollBootom() {
  150. if (this.pageTotal / this.pageSize > this.page) {
  151. this.page += 1;
  152. this.getOrderSelect();
  153. }
  154. },
  155. // 获取订单列表
  156. getOrderSelect() {
  157. // this.orderList = [];
  158. const params = {
  159. page: this.page,
  160. pageSize: this.pageSize
  161. };
  162. if (this.state) {
  163. params.orderStatus = this.state;
  164. }
  165. this.loading_status = 'loading';
  166. this.$u.api
  167. .getCommissionOrder({
  168. ...params
  169. })
  170. .then(data => {
  171. if (this.page === 1) {
  172. this.orderList = data.data;
  173. } else {
  174. this.orderList = this.orderList.concat(data.data);
  175. }
  176. this.pageTotal = data.pageTotal;
  177. this.loading_status = this.$_utils.loadStatus(this.page, this.pageSize, this.pageTotal);
  178. });
  179. },
  180. //swiper 切换
  181. changeTab(e) {
  182. this.tabCurrentIndex = e.target.current;
  183. this.page = 1;
  184. switch (this.tabCurrentIndex) {
  185. case 0:
  186. this.state = 0;
  187. break;
  188. case 1:
  189. this.state = 2;
  190. break;
  191. case 2:
  192. this.state = 3;
  193. break;
  194. case 3:
  195. this.state = 4;
  196. break;
  197. }
  198. this.orderList = [];
  199. this.getOrderSelect();
  200. },
  201. //顶部tab点击
  202. tabClick(item, index) {
  203. this.tabCurrentIndex = index;
  204. this.state = item.state;
  205. // this.getOrderSelect()
  206. }
  207. }
  208. };
  209. </script>
  210. <style lang="scss">
  211. .order-item {
  212. margin: 24upx 0;
  213. // padding: 0 30upx;
  214. background-color: #fff;
  215. .order-no-view {
  216. font-size: 24upx;
  217. padding: 24upx 30upx;
  218. color: #666;
  219. font-weight: 300;
  220. border-bottom: 1upx solid #eee;
  221. .order-status-text {
  222. font-weight: 500;
  223. }
  224. }
  225. .goods-li:last-child {
  226. margin-bottom: 0;
  227. }
  228. .goods-li {
  229. background: #fafafa;
  230. padding: 30upx 20upx;
  231. margin-bottom: 20upx;
  232. .goods-img {
  233. width: 180upx;
  234. height: 180upx;
  235. }
  236. .goods-right {
  237. width: 500upx;
  238. margin-left: 20upx;
  239. .goods-name {
  240. color: #333;
  241. font-size: 32upx;
  242. margin-bottom: 19upx;
  243. text-overflow: -o-ellipsis-lastline;
  244. overflow: hidden;
  245. text-overflow: ellipsis;
  246. display: -webkit-box;
  247. -webkit-line-clamp: 1;
  248. line-clamp: 1;
  249. -webkit-box-orient: vertical;
  250. }
  251. .goods-descrip {
  252. font-size: 22upx;
  253. color: #999;
  254. margin-bottom: 28upx;
  255. // font-weight: 300;
  256. text-overflow: -o-ellipsis-lastline;
  257. overflow: hidden;
  258. text-overflow: ellipsis;
  259. display: -webkit-box;
  260. -webkit-line-clamp: 1;
  261. line-clamp: 1;
  262. -webkit-box-orient: vertical;
  263. }
  264. .goods-price {
  265. .price {
  266. color: $price-color;
  267. font-size: 40upx;
  268. }
  269. .sku {
  270. font-size: 22upx;
  271. font-weight: 300;
  272. color: #666;
  273. }
  274. .icon-jia {
  275. color: #666;
  276. font-size: 24upx;
  277. }
  278. .goods-num {
  279. font-size: 24upx;
  280. }
  281. }
  282. }
  283. }
  284. }
  285. .middle {
  286. font-size: 24upx;
  287. position: relative;
  288. padding: 24upx 30upx;
  289. .money-view {
  290. color: #444;
  291. .price {
  292. font-size: 32upx;
  293. font-weight: bold;
  294. color: $price-color;
  295. }
  296. }
  297. }
  298. .btnS {
  299. padding: 0 28upx;
  300. line-height: 60upx;
  301. color: #6e6e6e;
  302. font-size: 24upx;
  303. text-align: center;
  304. margin-right: 10upx;
  305. height: 60upx;
  306. background: rgba(241, 241, 241, 1);
  307. // box-shadow: 0px 2upx 14upx 0px rgba(0, 0, 0, 0.1);
  308. border-radius: 40upx;
  309. }
  310. .btnSAdd {
  311. padding: 0 28upx;
  312. line-height: 60upx;
  313. color: #ffffff;
  314. font-size: 24upx;
  315. text-align: center;
  316. height: 60upx;
  317. border-radius: 40upx;
  318. }
  319. .content {
  320. background: $page-color-base;
  321. height: 100vh;
  322. }
  323. .swiper-box {
  324. height: calc(100% - 80upx);
  325. }
  326. .list-scroll-content {
  327. height: 100%;
  328. }
  329. .navbar {
  330. display: flex;
  331. height: 88upx;
  332. background: #fff;
  333. position: relative;
  334. z-index: 10;
  335. border-bottom: 1upx solid #eee;
  336. .nav-item {
  337. flex: 1;
  338. display: flex;
  339. justify-content: center;
  340. align-items: center;
  341. height: 100%;
  342. font-size: 28upx;
  343. color: #666666;
  344. position: relative;
  345. font-weight: 300;
  346. &.current {
  347. // color: $uni-color-primary;
  348. font-weight: 500;
  349. font-size: 32upx;
  350. .current-line {
  351. content: '';
  352. position: absolute;
  353. left: 50%;
  354. bottom: 10upx;
  355. transform: translateX(-50%);
  356. width: 40upx;
  357. height: 6upx;
  358. background: $base-btn-bg;
  359. border-radius: 6upx;
  360. /*border-bottom: 2px solid #F53C28;*/
  361. }
  362. }
  363. }
  364. }
  365. </style>