my_tran.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
  1. <template>
  2. <view class="content">
  3. <scroll-view scroll-x class="bg-white nav">
  4. <view class="flex text-center">
  5. <view class="cu-item flex-sub" :class="0==TabCur?'text-orange cur':''" @tap="tabSelect" data-id="0">
  6. <text class="cuIcon-deliver"></text> 货源信息
  7. </view>
  8. <view class="cu-item flex-sub" :class="1==TabCur?'text-orange cur':''" @tap="tabSelect" data-id="1">
  9. <text class="cuIcon-group"></text> 承运信息
  10. </view>
  11. </view>
  12. </scroll-view>
  13. <swiper :current="TabCur" class="swiper-box" duration="300" @change="tabSelect">
  14. <swiper-item class="tab-content" data-id="1">
  15. <scroll-view class="list-scroll-content" scroll-y @scrolltolower="onReachBottomTmp">
  16. <block v-if="TabCur==0">
  17. <view class="guess-section">
  18. <view v-for="(item, index) in tranInfo" :key="index" class="guess-item"
  19. @click="navToDetailPage(item)">
  20. <view class="flex justify-between padding-xs ">
  21. <view class="flex-sub padding-xs">
  22. <view class="cu-capsule radius">
  23. <view class="cu-tag bg-blue">
  24. {{item.startPlace }}
  25. </view>
  26. <view class="cu-tag line-blue">
  27. {{item.endPlace }}
  28. </view>
  29. </view>
  30. </view>
  31. <view class=" padding-xs">
  32. <view v-if="item.status == 30" class="cu-capsule radius">
  33. <view class="cu-tag bg-green">
  34. 可承运
  35. </view>
  36. <view class="cu-tag line-green">
  37. <text class="text-price">{{item.price }}</text>
  38. </view>
  39. </view>
  40. <view v-else class="cu-capsule radius">
  41. <view class="cu-tag bg-red">
  42. 已结束
  43. </view>
  44. <view class="cu-tag line-red">
  45. <text class="text-price">{{item.price }}</text>
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. <view class="flex justify-between padding-xs">
  51. <view class="flex-sub padding-xs">
  52. <view class="cu-capsule radius">
  53. <view class="cu-tag bg-orange">
  54. {{item.goodsName}}
  55. </view>
  56. <view v-if='item.total' class="cu-tag line-orange">
  57. {{item.total - item.tranCount }}吨
  58. </view>
  59. </view>
  60. </view>
  61. <view class=" text-sm padding-xs">
  62. <view class=" text-sm padding-xs">
  63. <text
  64. class="text-gray text-sm text-right padding-xs-tmp ">{{item.gmtUpdate}}</text>
  65. </view>
  66. </view>
  67. </view>
  68. </view>
  69. <view v-show="isLoadMore">
  70. <uni-load-more :status="loadStatus"></uni-load-more>
  71. </view>
  72. </view>
  73. </block>
  74. </scroll-view>
  75. </swiper-item>
  76. <swiper-item class="tab-content" data-id="0">
  77. <scroll-view class="list-scroll-content" scroll-y @scrolltolower="onReachBottomTmp">
  78. <block v-if="TabCur==1">
  79. <view class="guess-section">
  80. <view v-for="(item, index) in carInfo" :key="index" class="guess-item"
  81. @click="navToDetailPage(item)">
  82. <view class="flex justify-between padding-xs ">
  83. <view class="flex-sub padding-xs">
  84. <view class="cu-capsule radius">
  85. <view class="cu-tag bg-blue">
  86. {{item.startPlace }}
  87. </view>
  88. <view class="cu-tag line-blue">
  89. {{item.endPlace }}
  90. </view>
  91. </view>
  92. </view>
  93. <view class=" padding-xs">
  94. <view v-if="item.carStatus" class="cu-capsule radius">
  95. <view class="cu-tag bg-green">
  96. {{item.carStatus}}
  97. </view>
  98. <view class="cu-tag line-green">
  99. <text class="text-price">{{item.price }}</text>
  100. </view>
  101. </view>
  102. </view>
  103. </view>
  104. <view class="flex justify-between padding-xs">
  105. <view class="flex-sub padding-xs">
  106. <view class="cu-capsule radius">
  107. <view class="cu-tag bg-orange">
  108. {{item.carNo}}
  109. </view>
  110. <view v-if='item.driver' class="cu-tag line-orange">
  111. {{item.driver}}
  112. </view>
  113. </view>
  114. </view>
  115. <view class=" text-sm padding-xs">
  116. <view class=" text-sm padding-xs">
  117. <text
  118. class="text-gray text-sm text-right padding-xs-tmp ">{{item.gmtUpdate}}</text>
  119. </view>
  120. </view>
  121. </view>
  122. </view>
  123. <view v-show="isLoadMore">
  124. <uni-load-more :status="loadStatus"></uni-load-more>
  125. </view>
  126. </view>
  127. </block>
  128. </scroll-view>
  129. </swiper-item>
  130. </swiper>
  131. <u-modal v-model="isShowAlert" :title-style="{fontSize: '18px',fontWeight:'500'}"
  132. :content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='提示'
  133. showCancelButton='false' :content="content" @confirm="alertBtn" @cancel="cancelClick"></u-modal>
  134. </view>
  135. </template>
  136. <script>
  137. import {
  138. mapState
  139. } from 'vuex';
  140. export default {
  141. name: "my",
  142. data() {
  143. return {
  144. tranInfo: [],
  145. carInfo: [],
  146. pages: 1, //页数
  147. limit: 10, //每次取条目数
  148. loadStatus: 'loading', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式
  149. isLoadMore: false, //是否加载中
  150. PageCur: "tran",
  151. TabCur: 0
  152. };
  153. },
  154. computed: {
  155. ...mapState(['hasLogin', 'userInfo'])
  156. },
  157. onShow() {
  158. this.PageCur = "my"
  159. uni.setStorageSync('PageCur', this.PageCur);
  160. this.loadData()
  161. },
  162. //下拉刷新
  163. onPullDownRefresh() {
  164. this.pages = 1
  165. this.isLoadMore = false
  166. this.loadStatus = 'loading'
  167. this.loadData()
  168. },
  169. onLoad(options) {
  170. this.TabCur = options.TabCur
  171. },
  172. // onPageScroll(e) {
  173. // //兼容iOS端下拉时顶部漂移
  174. // if (e.scrollTop >= 0) {
  175. // this.headerPosition = "fixed";
  176. // } else {
  177. // this.headerPosition = "absolute";
  178. // }
  179. // },
  180. onReachBottom() { //上拉触底函数
  181. if (!this.isLoadMore) { //此处判断,上锁,防止重复请求
  182. this.isLoadMore = true
  183. this.pages += 1
  184. if (this.TabCur == 0) {
  185. this.getIndexTranData()
  186. } else {
  187. this.getIndexCarData()
  188. }
  189. }
  190. },
  191. methods: {
  192. isShowAlert: false,
  193. content: '您尚未登录,是否立即登录?',
  194. async loadData() {
  195. const that = this
  196. uni.showLoading({
  197. title: '正在加载',
  198. mask: true
  199. })
  200. if (this.TabCur == 0) {
  201. that.$api.request('tran', 'getMyTranListInfo', {
  202. page: this.pages,
  203. limit: this.limit,
  204. phone: this.userInfo.phone
  205. }, failres => {
  206. that.$api.msg(failres.errmsg)
  207. this.isLoadMore = false
  208. this.loadStatus = 'nomore'
  209. if (this.pages > 1) {
  210. this.pages = 1
  211. }
  212. uni.hideLoading()
  213. uni.stopPullDownRefresh()
  214. }).then(res => {
  215. let data = res.data
  216. console.log(data.tranInfo)
  217. //销售信息
  218. if (data.tranInfo) {
  219. that.tranInfo = data.tranInfo
  220. }
  221. uni.hideLoading()
  222. uni.stopPullDownRefresh()
  223. })
  224. } else {
  225. that.$api.request('tran', 'getMyCarListInfo', {
  226. page: this.pages,
  227. limit: this.limit,
  228. phone: this.userInfo.phone
  229. }, failres => {
  230. that.$api.msg(failres.errmsg)
  231. this.isLoadMore = false
  232. this.loadStatus = 'nomore'
  233. if (this.pages > 1) {
  234. this.pages = 1
  235. }
  236. uni.hideLoading()
  237. uni.stopPullDownRefresh()
  238. }).then(res => {
  239. let data = res.data
  240. //销售信息
  241. if (data.carInfo) {
  242. that.carInfo = data.carInfo
  243. }
  244. uni.hideLoading()
  245. uni.stopPullDownRefresh()
  246. })
  247. }
  248. if (!this.hasLogin || this.userInfo.phone == undefined) {
  249. this.isShowAlert = true;
  250. // uni.showModal({
  251. // title: '提示',
  252. // content: '您尚未登录,是否立即登录?',
  253. // showCancel: true,
  254. // confirmText: '登录',
  255. // success: (e) => {
  256. // if (e.confirm) {
  257. // uni.navigateTo({
  258. // url: '/pages/public/login'
  259. // })
  260. // }
  261. // },
  262. // fail: () => {},
  263. // complete: () => {}
  264. // })
  265. }
  266. },
  267. alertBtn() {
  268. uni.navigateTo({
  269. url: '/pages/public/login'
  270. })
  271. },
  272. cancelClick() {
  273. this.isShowAlert = false
  274. },
  275. tabSelect(e) {
  276. if (e.currentTarget.dataset.id) {
  277. this.TabCur = e.currentTarget.dataset.id;
  278. } else {
  279. this.TabCur = e.target.current;
  280. }
  281. this.pages = 1
  282. this.loadData()
  283. },
  284. //详情
  285. navToDetailPage(item) {
  286. let id = item.id;
  287. let sendCarNo = item.sendCarNo;
  288. if (this.TabCur == 0) {
  289. uni.navigateTo({
  290. url: `/pages/tran/my_tran_detail?id=${id}`
  291. })
  292. } else {
  293. uni.navigateTo({
  294. url: `/pages/tran/my_car_detail?sendCarNo=${sendCarNo}`
  295. })
  296. }
  297. },
  298. onReachBottomTmp() { //上拉触底函数
  299. if (!this.isLoadMore) { //此处判断,上锁,防止重复请求
  300. this.isLoadMore = true
  301. this.pages += 1
  302. if (this.TabCur == 0) {
  303. this.getIndexTranData()
  304. } else {
  305. this.getIndexCarData()
  306. }
  307. }
  308. },
  309. getIndexTranData() {
  310. const that = this
  311. var pages = that.pages
  312. var limit = that.limit
  313. uni.showLoading({
  314. title: '正在加载',
  315. mask: true
  316. })
  317. that.$api.request('tran', 'getMyTranListInfo', {
  318. page: pages,
  319. limit: limit,
  320. phone: this.userInfo.phone
  321. }, failres => {
  322. that.$api.msg(failres.errmsg)
  323. that.isLoadMore = false
  324. that.loadStatus = 'nomore'
  325. if (that.pages > 1) {
  326. that.pages -= 1
  327. }
  328. uni.hideLoading()
  329. }).then(res => {
  330. let data = res.data
  331. //销售信息
  332. if (data.tranInfo.length > 0) {
  333. that.tranInfo = that.tranInfo.concat(data.tranInfo)
  334. that.isLoadMore = false
  335. } else {
  336. if (that.pages > 1) {
  337. that.pages -= 1
  338. }
  339. that.isLoadMore = true
  340. that.loadStatus = 'nomore'
  341. }
  342. uni.hideLoading()
  343. })
  344. },
  345. getIndexCarData() {
  346. const that = this
  347. var pages = that.pages
  348. var limit = that.limit
  349. uni.showLoading({
  350. title: '正在加载',
  351. mask: true
  352. })
  353. that.$api.request('tran', 'getMyCarListInfo', {
  354. page: pages,
  355. limit: limit,
  356. phone: this.userInfo.phone
  357. }, failres => {
  358. that.$api.msg(failres.errmsg)
  359. that.isLoadMore = false
  360. that.loadStatus = 'nomore'
  361. if (that.pages > 1) {
  362. that.pages -= 1
  363. }
  364. uni.hideLoading()
  365. }).then(res => {
  366. let data = res.data
  367. //销售信息
  368. if (data.carInfo.length > 0) {
  369. that.carInfo = that.carInfo.concat(data.carInfo)
  370. that.isLoadMore = false
  371. } else {
  372. if (that.pages > 1) {
  373. that.pages -= 1
  374. }
  375. that.isLoadMore = true
  376. that.loadStatus = 'nomore'
  377. }
  378. uni.hideLoading()
  379. })
  380. }
  381. },
  382. }
  383. </script>
  384. <style lang='scss' scoped>
  385. page,
  386. .content {
  387. background: $page-color-base;
  388. height: 100%;
  389. }
  390. .container {
  391. padding-bottom: 100upx;
  392. }
  393. .cu-form-group input {
  394. text-align: right;
  395. }
  396. .cu-form-group textarea {
  397. text-align: right;
  398. }
  399. .place {
  400. font-size: 40rpx;
  401. line-height: 1;
  402. padding-right: 10upx;
  403. }
  404. .place-center {
  405. font-size: 28rpx;
  406. }
  407. .guess-item {
  408. /* margin-top: 50rpx; */
  409. }
  410. .btn-size {
  411. font-size: 28rpx;
  412. }
  413. .place-bottom {
  414. margin-top: 20rpx;
  415. }
  416. .swiper-box {
  417. height: 94vh;
  418. }
  419. .list-scroll-content {
  420. height: 100%;
  421. }
  422. .uni-swiper-item {
  423. height: auto;
  424. }
  425. </style>