index.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  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.code ? 'active' : '']" v-for="(item, index) in typeData" :key="index" @click="selType(item.code)">
  13. {{item.dispName}}
  14. </view>
  15. </scroll-view>
  16. <!-- 右侧 -->
  17. <scroll-view scroll-y class="nav-right flex_1" v-if="index==current" >
  18. <view class="check-order-list"
  19. >
  20. <view v-for="item in list" :key="item.id" class="list-item flex align_center">
  21. <u-image width="36" height="36" :src="item.icon" ></u-image>
  22. <view class="item-cont">
  23. <view>{{item.name}}</view>
  24. <view>{{index==0?item.customerPrice:item.factoryPrice}}元/kg</view>
  25. </view>
  26. </view>
  27. </view>
  28. <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'"
  29. mode="list"></u-empty>
  30. <view v-if="index==current" style="padding: 20upx;">
  31. <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
  32. </view>
  33. </scroll-view>
  34. </swiper-item>
  35. </swiper>
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. // import md5 from 'md5'
  41. import { getLookUpDatas } from '@/api/data.js'
  42. import { reservePriceFind } from '@/api/index.js'
  43. export default {
  44. data() {
  45. return {
  46. status: 'loadmore',
  47. noDataText: '暂无数据',
  48. tabList: [
  49. {
  50. dispName: '上门回收价格',
  51. typeId: 1,
  52. queryLabel: ['WAIT_PAY'] // tab参数
  53. },
  54. {
  55. dispName: '工厂回收价格',
  56. typeId: 3,
  57. queryLabel: ['WAIT_SEND'] // tab参数
  58. },
  59. ],
  60. typeData: [], // 左侧类型数据
  61. curType: '', // 当前类型
  62. current: 0,
  63. swiperCurrent: 0,
  64. pageNo: 1,
  65. pageSize: 10,
  66. list: [], // 类型list
  67. }
  68. },
  69. onLoad() {
  70. // this.pageInit()
  71. // 开启分享
  72. uni.showShareMenu({
  73. withShareTicket: true,
  74. menus: ['shareAppMessage', 'shareTimeline']
  75. })
  76. // 获取垃圾类型
  77. this.getRubbishType()
  78. },
  79. onUnload() {
  80. },
  81. onShow() {
  82. },
  83. // 下拉刷新
  84. onPullDownRefresh() {
  85. console.log('refresh')
  86. this.pageNo = 1
  87. this.getRow()
  88. setTimeout(function () {
  89. uni.stopPullDownRefresh()
  90. }, 200)
  91. },
  92. methods: {
  93. pageInit() {
  94. this.sortIndex = 1
  95. this.pageNo = 1
  96. this.getRow()
  97. },
  98. // 获取垃圾类型数据
  99. getRubbishType() {
  100. getLookUpDatas({type:'RESERVE_RUBBISH_TYPE'}).then(res=>{
  101. console.log(res,'------rrrrrr')
  102. if(res.status == 200) {
  103. this.typeData = res.data || []
  104. this.curType = this.typeData.length ? this.typeData[0].code : ''
  105. this.getRow()
  106. } else {
  107. this.typeData = []
  108. }
  109. })
  110. },
  111. handleRefresh() {
  112. this.getRow()
  113. },
  114. // tabs通知swiper切换
  115. tabsChange(index) {
  116. this.swiperCurrent = index;
  117. },
  118. swiperChange(event) {
  119. this.action = 'swiperChange'
  120. this.status = 'loading'
  121. },
  122. // swiper-item左右移动,通知tabs的滑块跟随移动
  123. transition(e) {
  124. let dx = e.detail.dx;
  125. this.$refs.uTabs.setDx(dx);
  126. },
  127. // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
  128. // swiper滑动结束,分别设置tabs和swiper的状态
  129. animationfinish(e) {
  130. let current = e.detail.current;
  131. let isCurtab = this.current == current
  132. if (this.status != "nomore") {
  133. let loadData = this.action == 'swiperChange' ? !isCurtab : isCurtab;
  134. if (loadData) {
  135. this.$refs.uTabs.setFinishCurrent(current);
  136. this.swiperCurrent = current;
  137. this.current = current;
  138. this.resetPage();
  139. }
  140. }
  141. },
  142. // 单击左侧菜单
  143. selType (v) {
  144. this.typeList = []
  145. this.curType = v
  146. this.getRow()
  147. },
  148. // scroll-view到底部加载更多
  149. // onreachBottom() {
  150. // this.action = 'onreachBottom'
  151. // if (this.list.length < this.total) {
  152. // this.pageNo += 1
  153. // this.getRow()
  154. // } else {
  155. // if(this.list.length) {
  156. // uni.showToast({
  157. // title: '已经到底了',
  158. // icon: 'none'
  159. // });
  160. // }
  161. // this.status = "nomore"
  162. // }
  163. // },
  164. // 查询列表
  165. getRow() {
  166. this.status = "loading"
  167. reservePriceFind({code:this.curType}).then(res => {
  168. if (res.status == 200) {
  169. this.list = res.data
  170. // 纸质
  171. if(this.curType == 'PAPER'){
  172. this.list[0].icon = '/static/price/icon_aper_yellow.png'
  173. this.list[1].icon = '/static/price/icon_aper_flower.png'
  174. this.list[2].icon = '/static/price/icon_book.png'
  175. this.list[3].icon = '/static/price/icon_magazine.png'
  176. this.list[4].icon = '/static/price/icon_aper_miscellaneous.png'
  177. this.list[5].icon = '/static/price/icon_newspaper.png'
  178. }
  179. // 衣物
  180. if(this.curType == 'CLOTHES'){
  181. this.list[0].icon = '/static/price/icon_clothes.png'
  182. }
  183. // 金属
  184. if(this.curType == 'METAL'){
  185. this.list[0].icon = '/static/price/icon_iron_thin.png'
  186. this.list[1].icon = '/static/price/icon_iron_thick.png'
  187. this.list[2].icon = '/static/price/icon_steel.png'
  188. }
  189. // 塑料类
  190. if(this.curType == 'PLASTIC'){
  191. this.list[0].icon = '/static/price/icon_frame_white.png'
  192. this.list[1].icon = '/static/price/icon_frame_black.png'
  193. this.list[2].icon = '/static/price/icon_acrylic.png'
  194. this.list[3].icon = '/static/price/icon_bottle.png'
  195. }
  196. } else {
  197. this.list = []
  198. this.total = 0
  199. this.noDataText = res.message
  200. }
  201. this.status = "loadmore"
  202. })
  203. },
  204. resetPage() {
  205. this.status = 'loading';
  206. this.curType = this.typeData[0].code
  207. // 上划分页
  208. if (this.action == 'onreachBottom') {
  209. this.getRow();
  210. }
  211. // 左右切换tab
  212. if (this.action == 'swiperChange') {
  213. this.list = [];
  214. this.getRow();
  215. }
  216. },
  217. }
  218. }
  219. </script>
  220. <style lang="scss">
  221. .pagesCons {
  222. height: 100vh;
  223. width: 100%;
  224. background: #fff;
  225. display: flex;
  226. flex-direction: column;
  227. .text-right {
  228. float: right;
  229. }
  230. .tab-body {
  231. flex: 1;
  232. display: flex;
  233. flex-direction: column;
  234. .uTabs {
  235. border-bottom: 1px solid #EEEEEE;
  236. box-shadow: 1px 1px 3px #eeeeee;
  237. }
  238. .check-list {
  239. flex: 1;
  240. overflow-y: scroll;
  241. .swiper-item {
  242. width: 100%;
  243. height: 100%;
  244. overflow: hidden;
  245. .scroll-view {
  246. width: 100%;
  247. height: 100%;
  248. overflow: auto;
  249. }
  250. .nav-left{
  251. width: 220rpx;
  252. height: 100%;
  253. background-color: #F5F6F7;
  254. .nav-left-item{
  255. color: #303133;
  256. padding: 26upx 32upx;
  257. position: relative;
  258. font-size: 34rpx;
  259. color: #666E75;
  260. }
  261. .nav-left-item.active{
  262. color: #4F88F7;
  263. background: #fff;
  264. }
  265. .nav-left-item.active:after{
  266. content: '';
  267. display: block;
  268. width: 2px;
  269. position: absolute;
  270. top: 0;
  271. bottom: 0;
  272. left: 0;
  273. background: #4F88F7;
  274. }
  275. }
  276. .nav-right{
  277. .check-order-list{
  278. width: 100%;
  279. height: 100%;
  280. padding: 30rpx 10rpx 30rpx 32rpx;
  281. .list-item{
  282. float: left;
  283. margin-right: 20rpx;
  284. margin-bottom: 20rpx;
  285. width: 45%;
  286. height: 120rpx;
  287. border-radius: 12rpx;
  288. background-image: url(../../static/price/bg__book.png);
  289. background-repeat: no-repeat;
  290. padding-left: 20rpx;
  291. color: #fff;
  292. font-size: 24rpx;
  293. .item-cont{
  294. margin-left: 12rpx;
  295. view{
  296. line-height: 32rpx;
  297. }
  298. }
  299. }
  300. }
  301. }
  302. }
  303. }
  304. }
  305. }
  306. </style>