index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
  1. <template>
  2. <view class="pagesCons">
  3. <view class="tab-body">
  4. <view class="uTabs">
  5. <u-tabs-swiper ref="uTabs" bar-width="80" :list="tabList" inactive-color="#9DA8B5" name="dispName" active-color="#4F88F7" :current="current" @change="tabsChange" :is-scroll="false"
  6. swiperWidth="750"></u-tabs-swiper>
  7. </view>
  8. <swiper class="check-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
  9. <swiper-item class="swiper-item flex" v-for="(tabs, index) in tabList" :key="index">
  10. <!-- 左侧 -->
  11. <scroll-view scroll-y v-if="index==current" class="nav-left">
  12. <view :class="['nav-left-item', curType == item.id ? 'active' : '']" v-for="(item, index) in typeData" :key="index" @click="selType(item.id)">
  13. {{item.label}}
  14. </view>
  15. </scroll-view>
  16. <!-- 右侧 -->
  17. <scroll-view scroll-y class="nav-right flex_1" v-if="index==current" @scrolltolower="onreachBottom">
  18. <!-- 纸质 -->
  19. <view class="check-order-list"
  20. >
  21. <view class="list-item flex align_center">
  22. <u-image width="36" height="36" src="/static/price/icon_aper_yellow.png" ></u-image>
  23. <view class="item-cont">
  24. <view>黄纸</view>
  25. <view>1.24元/kg</view>
  26. </view>
  27. </view>
  28. <view class="list-item flex align_center">
  29. <u-image width="36" height="36" src="/static/price/icon_aper_flower.png" ></u-image>
  30. <view class="item-cont">
  31. <view>花纸</view>
  32. <view>1.24元/kg</view>
  33. </view>
  34. </view>
  35. <view class="list-item flex align_center">
  36. <u-image width="36" height="36" src="/static/price/icon_book.png" ></u-image>
  37. <view class="item-cont">
  38. <view>书纸</view>
  39. <view>1.24元/kg</view>
  40. </view>
  41. </view>
  42. <view class="list-item flex align_center">
  43. <u-image width="36" height="36" src="/static/price/icon_magazine.png" ></u-image>
  44. <view class="item-cont">
  45. <view>杂志</view>
  46. <view>1.24元/kg</view>
  47. </view>
  48. </view>
  49. <view class="list-item flex align_center">
  50. <u-image width="36" height="36" src="/static/price/icon_newspaper.png" ></u-image>
  51. <view class="item-cont">
  52. <view>报纸</view>
  53. <view>1.24元/kg</view>
  54. </view>
  55. </view>
  56. <view class="list-item flex align_center">
  57. <u-image width="36" height="36" src="/static/price/icon_aper_miscellaneous.png" ></u-image>
  58. <view class="item-cont">
  59. <view>杂纸</view>
  60. <view>1.24元/kg</view>
  61. </view>
  62. </view>
  63. </view>
  64. <u-empty style="padding-top: 10vh;height: auto;" src="/static/img/def_result.png" :text="noDataText" img-width="252" img-height="176" v-if="list.length==0 && status!='loading'"
  65. mode="list"></u-empty>
  66. <view v-if="index==current" style="padding: 20upx;">
  67. <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
  68. </view>
  69. </scroll-view>
  70. </swiper-item>
  71. </swiper>
  72. </view>
  73. </view>
  74. </template>
  75. <script>
  76. // import md5 from 'md5'
  77. export default {
  78. data() {
  79. return {
  80. status: 'loadmore',
  81. noDataText: '暂无数据',
  82. tabList: [
  83. {
  84. dispName: '上门回收价格',
  85. typeId: 1,
  86. queryLabel: ['WAIT_PAY'] // tab参数
  87. },
  88. {
  89. dispName: '工厂回收价格',
  90. typeId: 3,
  91. queryLabel: ['WAIT_SEND'] // tab参数
  92. },
  93. ],
  94. typeData: [
  95. {
  96. id: '1',
  97. label: '纸品类',
  98. },
  99. {
  100. id: '12',
  101. label: '衣物类',
  102. },
  103. {
  104. id: '13',
  105. label: '金属类',
  106. },
  107. {
  108. id: '16',
  109. label: '塑料类',
  110. }
  111. ], // 左侧类型数据
  112. curType: '', // 当前类型
  113. current: 0,
  114. swiperCurrent: 0,
  115. pageNo: 1,
  116. pageSize: 10,
  117. typeList: [{
  118. id: '122',
  119. createDate: '2021-05-10 15:22',
  120. orderStateDictValue: '待付款',
  121. storeName: '昆仑润滑·车领主 (西咸新区-...',
  122. location: '2.9km',
  123. orderState:'WAIT_PAY',
  124. isUp: true,
  125. orderGoodsList: [
  126. {
  127. id: '1',
  128. goodsImages: '',
  129. goodsName: '水蜡免擦洗车(轿车)',
  130. payGold: 200,
  131. buyQty: 2,
  132. goodsNum: 5,
  133. checked: false
  134. },
  135. {
  136. id: '12',
  137. goodsImages: '',
  138. goodsName: '水蜡免擦洗车(轿车)',
  139. payGold: 200,
  140. buyQty: 2,
  141. goodsNum: 5,
  142. checked: false
  143. },
  144. ],
  145. payGold: 450
  146. },{
  147. id: '156',
  148. createDate: '2021-05-10 15:22',
  149. orderStateDictValue: '待付款',
  150. storeName: '昆仑润滑·车领主 (西咸新区-...',
  151. location: '2.9km',
  152. orderState:'WAIT_PAY',
  153. isUp: false,
  154. orderGoodsList: [
  155. {
  156. id: '13',
  157. goodsImages: '',
  158. goodsName: '水蜡免擦洗车(轿车)',
  159. payGold: 200,
  160. buyQty: 2,
  161. goodsNum: 5,
  162. checked: false
  163. },
  164. {
  165. id: '15',
  166. goodsImages: '',
  167. goodsName: '水蜡免擦洗车(轿车)',
  168. payGold: 200,
  169. buyQty: 2,
  170. goodsNum: 5,
  171. checked: false
  172. },
  173. ],
  174. payGold: 450
  175. }],
  176. }
  177. },
  178. onLoad() {
  179. // this.pageInit()
  180. // 开启分享
  181. uni.showShareMenu({
  182. withShareTicket: true,
  183. menus: ['shareAppMessage', 'shareTimeline']
  184. })
  185. },
  186. onUnload() {
  187. },
  188. onShow() {
  189. },
  190. // 下拉刷新
  191. onPullDownRefresh() {
  192. console.log('refresh')
  193. this.pageNo = 1
  194. this.getRow()
  195. setTimeout(function () {
  196. uni.stopPullDownRefresh()
  197. }, 200)
  198. },
  199. methods: {
  200. pageInit() {
  201. this.sortIndex = 1
  202. this.pageNo = 1
  203. this.getRow()
  204. },
  205. handleRefresh() {
  206. this.getRow()
  207. },
  208. // tabs通知swiper切换
  209. tabsChange(index) {
  210. this.swiperCurrent = index;
  211. },
  212. swiperChange(event) {
  213. this.action = 'swiperChange'
  214. this.status = 'loading'
  215. },
  216. // swiper-item左右移动,通知tabs的滑块跟随移动
  217. transition(e) {
  218. let dx = e.detail.dx;
  219. this.$refs.uTabs.setDx(dx);
  220. },
  221. // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
  222. // swiper滑动结束,分别设置tabs和swiper的状态
  223. animationfinish(e) {
  224. let current = e.detail.current;
  225. let isCurtab = this.current == current
  226. if (this.status != "nomore") {
  227. let loadData = this.action == 'swiperChange' ? !isCurtab : isCurtab;
  228. if (loadData) {
  229. this.$refs.uTabs.setFinishCurrent(current);
  230. this.swiperCurrent = current;
  231. this.current = current;
  232. this.resetPage();
  233. }
  234. }
  235. },
  236. // 单击左侧菜单
  237. selType (v) {
  238. this.partList = []
  239. this.curType = v
  240. },
  241. // scroll-view到底部加载更多
  242. onreachBottom() {
  243. this.action = 'onreachBottom'
  244. if (this.list.length < this.total) {
  245. this.pageNo += 1
  246. this.getRow()
  247. } else {
  248. if(this.list.length) {
  249. uni.showToast({
  250. title: '已经到底了',
  251. icon: 'none'
  252. });
  253. }
  254. this.status = "nomore"
  255. }
  256. },
  257. // 查询列表
  258. getRow(pageNo) {
  259. this.status = "loadmore"
  260. if (pageNo) {
  261. this.pageNo = pageNo
  262. }
  263. let params = {
  264. pageNo: this.pageNo,
  265. pageSize: this.pageSize,
  266. orderStateList: this.tabList[this.current].queryLabel, // tab分类
  267. }
  268. this.noDataText = '暂无数据'
  269. this.status = "loading"
  270. getOrderList(params).then(res => {
  271. if (res.status == 200) {
  272. if (this.pageNo > 1) {
  273. this.list = this.list.concat(res.data.list || [])
  274. } else {
  275. this.list = res.data.list || []
  276. }
  277. const date1 = moment().toArray() // 当前时间 数组形式
  278. this.list.map(item=>{
  279. const date2 = moment(item.orderTime).toDate() // 下单时间 日期格式
  280. const date3 = moment(date2).toArray() // 下单时间 数组形式
  281. const tt = 1800 - moment(date1).diff(moment(date3), 'seconds')// 距离30分钟支付 当前剩余秒数 = 1800秒 - 计算相差的秒数(当前时间-支付时间)
  282. item.leftTimeT = tt > 0 ? tt : 0
  283. })
  284. this.total = res.data.count || 0
  285. } else {
  286. this.list = []
  287. this.total = 0
  288. this.noDataText = res.message
  289. }
  290. this.status = "loadmore"
  291. })
  292. },
  293. resetPage() {
  294. this.status = 'loading';
  295. // 上划分页
  296. if (this.action == 'onreachBottom') {
  297. // this.getRow();
  298. }
  299. // 左右切换tab
  300. if (this.action == 'swiperChange') {
  301. this.list = [];
  302. // this.getRow(1);
  303. }
  304. },
  305. itemChange(item) {
  306. // item.isUp = !item.isUp
  307. this.$nextTick(function(){
  308. item.isUp = !item.isUp
  309. })
  310. },
  311. // 详细页
  312. viewRow(item) {
  313. console.log(item, '111111')
  314. // 已完成的
  315. uni.navigateTo({
  316. url: "/pages/order/orderDetail?id=" + item.id
  317. })
  318. },
  319. }
  320. }
  321. </script>
  322. <style lang="scss">
  323. .pagesCons {
  324. height: 100vh;
  325. width: 100%;
  326. background: #fff;
  327. display: flex;
  328. flex-direction: column;
  329. .text-right {
  330. float: right;
  331. }
  332. .tab-body {
  333. flex: 1;
  334. display: flex;
  335. flex-direction: column;
  336. .uTabs {
  337. border-bottom: 1px solid #EEEEEE;
  338. box-shadow: 1px 1px 3px #eeeeee;
  339. }
  340. .check-list {
  341. flex: 1;
  342. overflow-y: scroll;
  343. .swiper-item {
  344. width: 100%;
  345. height: 100%;
  346. overflow: hidden;
  347. .scroll-view {
  348. width: 100%;
  349. height: 100%;
  350. overflow: auto;
  351. }
  352. .nav-left{
  353. width: 220rpx;
  354. height: 100%;
  355. background-color: #F5F6F7;
  356. .nav-left-item{
  357. color: #303133;
  358. padding: 26upx 32upx;
  359. position: relative;
  360. font-size: 34rpx;
  361. color: #666E75;
  362. }
  363. .nav-left-item.active{
  364. color: #4F88F7;
  365. background: #fff;
  366. }
  367. .nav-left-item.active:after{
  368. content: '';
  369. display: block;
  370. width: 2px;
  371. position: absolute;
  372. top: 0;
  373. bottom: 0;
  374. left: 0;
  375. background: #4F88F7;
  376. }
  377. }
  378. .nav-right{
  379. .check-order-list{
  380. width: 100%;
  381. height: 100%;
  382. padding: 30rpx 10rpx 30rpx 32rpx;
  383. .list-item{
  384. float: left;
  385. margin-right: 20rpx;
  386. margin-bottom: 20rpx;
  387. width: 45%;
  388. height: 120rpx;
  389. border-radius: 12rpx;
  390. background-image: url(../../static/price/bg__book.png);
  391. background-repeat: no-repeat;
  392. padding-left: 20rpx;
  393. color: #fff;
  394. font-size: 24rpx;
  395. .item-cont{
  396. margin-left: 12rpx;
  397. view{
  398. line-height: 32rpx;
  399. }
  400. }
  401. }
  402. }
  403. }
  404. }
  405. }
  406. }
  407. }
  408. </style>