account-bean.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597
  1. <template>
  2. <view class="container account clearfix">
  3. <au-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></au-custom>
  4. <view class="account-header">
  5. <view class="h-account" :style="{paddingTop:CustomBar+'px',backgroundImage: 'url('+account_bg+')'}">
  6. <view class="m-account">
  7. <view class="m-m money">
  8. <text class="m-t b">{{ userBeans }}</text>
  9. </view>
  10. <view class="m-m title">
  11. <text class="m-p">可用数量</text>
  12. </view>
  13. <text class="iconfont icon-tishi" @click.stop="this.$api.navigateTo('/pages/service/service?id=1031&title=采美豆说明')"></text>
  14. </view>
  15. </view>
  16. <view class="h-calendar">
  17. <!-- 插入模式 切换年月-->
  18. <uni-calendar :selected="infoData.selected" @monthSwitch="monthSwitch" />
  19. </view>
  20. <view class="h-typeTab clearfix">
  21. <view
  22. v-for="(item, index) in navList" :key="index"
  23. class="nav-item"
  24. :class="{current: tabCurrentIndex === index}"
  25. @click="tabClick(index)"
  26. >
  27. {{item.text}}
  28. <view class="line"></view>
  29. </view>
  30. </view>
  31. </view>
  32. <!-- @scrolltolower="toLower" -->
  33. <scroll-view class="h-swiper-content" scroll-y :style="{paddingTop:CustomBar+234+'px'}">
  34. <!-- 空白页 -->
  35. <view v-if="isEmpty" class="empty-account">
  36. <image class="empty-account-image" :src="StaticUrl+'icon/icon-emptybeans@2x.png'" mode="aspectFit"></image>
  37. <text class="error-text">{{errorText}}</text>
  38. </view>
  39. <!-- 余额明细列表 -->
  40. <view v-else class="list-account">
  41. <view v-for="(item,index) in beansList" :key="index" class="list-item">
  42. <view class="list-t">
  43. <view class="t-t">{{ item.beansType | BeansStatusFilter }}</view>
  44. <view class="t-t bold" :style="{color:item.type == '1' ? '#ff2a2a' : '#15C47A'}">
  45. <text class="txt">{{ item.type == 1 ? '+' : '-' }}</text>
  46. <text class="txt">{{ item.num }}</text>
  47. </view>
  48. </view>
  49. <view class="list-b">
  50. <view class="t-t">{{ item.addTime }}</view>
  51. <view class="t-t">{{ item.type =='1'? '获取' : '消耗' }}</view>
  52. </view>
  53. </view>
  54. <!--加载loadding-->
  55. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  56. <tui-nomore :visible="!pullUpOn" bgcolor="#FFFFFF" :text='nomoreText'></tui-nomore>
  57. <!--加载loadding-->
  58. </view>
  59. </scroll-view>
  60. </view>
  61. </template>
  62. <script>
  63. import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
  64. import tuiNomore from '@/components/tui-components/nomore/nomore'
  65. import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
  66. var date = new Date()
  67. export default{
  68. components: {
  69. uniCalendar,
  70. tuiLoadmore,
  71. tuiNomore
  72. },
  73. data() {
  74. return{
  75. StaticUrl:this.$Static,
  76. nvabarData: { // 顶部自定义导航
  77. showCapsule:1, // 是否显示左上角图标 1表示显示 0表示不显示,
  78. showSearch: 0,
  79. title: '采美豆明细', // 导航栏 中间的标题
  80. haveBack:true,
  81. textColor:'#ffffff',
  82. textLeft:this.$store.state.isIphone,
  83. },
  84. account_bg:'https://img.caimei365.com/group1/M00/03/D0/Cmis21-PpUqAbubBAADf1kTyhjs098.png',
  85. isIphoneX:this.$store.state.isIphoneX,
  86. CustomBar:this.CustomBar, // 顶部导航栏高度
  87. listQuery:{
  88. year: date.getFullYear(), // 年
  89. month: date.getMonth()+1, // 月
  90. userId: '', // 用户ID
  91. pageNum:1, // 页数
  92. pageSize:10, // 加载条数
  93. type: 0, // 查询余额类型
  94. },
  95. userBeans:0,
  96. tabCurrentIndex: 0, // 标签选择索引
  97. infoData: {selected: []}, // 日期选择
  98. beansList: [], // 余额列表
  99. isRefreshing:false,
  100. isNomore:false,
  101. isEmpty:false,
  102. loadding: false,
  103. pullUpOn: true,
  104. hasNextPage: false,
  105. pullFlag: true,
  106. nomoreText: '上拉显示更多',
  107. errorText:'本月没有任何采美豆记录',
  108. navList: [
  109. {state: 0,text: '全部'},
  110. {state: 1,text: '获取'},
  111. {state: 2,text: '消耗'},
  112. ],
  113. isCheckObject:{
  114. 0:['','本月没有采美豆记录'],
  115. 1:[1, '本月没有采美豆获取记录!'],
  116. 2:[2, '本月没有采美豆消耗记录!'],
  117. },
  118. }
  119. },
  120. onLoad() {
  121. this.$api.getStorage().then((resolve) =>{
  122. this.listQuery.userId =resolve.userId ? resolve.userId : 0
  123. this.GetAccountInitData()
  124. })
  125. },
  126. filters: {
  127. BeansStatusFilter: function(state){
  128. let stateText = ''
  129. let stateTextObject={
  130. 1:'注册机构',
  131. 2:'升级资质机构',
  132. 3:'完善资料',
  133. 4:'完善资料',
  134. 5:'下单',
  135. 6:'线上支付订单',
  136. 7:'确认收货',
  137. 8:'系统发放',
  138. 9:'抵用退回',
  139. 10:'抵用运费',
  140. 11:'退款回收',
  141. 12:'登录奖励',
  142. 13:'查看商品资料',
  143. 14:'购买超级会员',
  144. 15:'系统扣除',
  145. 16:'系统退回',
  146. 17:'抵扣优惠券',
  147. 18:'优惠券退款',
  148. }
  149. Object.keys(stateTextObject).forEach(function(key){
  150. if(key == state){
  151. stateText = stateTextObject[key]
  152. }
  153. })
  154. return stateText
  155. },
  156. },
  157. methods: {
  158. GetAccountInitData(index){//获取余额明细数据列表
  159. Object.keys(this.isCheckObject).forEach(key => {
  160. if (+key === +index) {
  161. this.listQuery.type = this.isCheckObject[key][0]
  162. this.errorText = this.isCheckObject[key][1]
  163. }
  164. })
  165. this.UserService.GetUserClubBeansList(this.listQuery).then(response =>{
  166. let data = response.data
  167. let list = data.pageInfo.list
  168. this.userBeans = data.userBeans
  169. this.hasNextPage = data.pageInfo.hasNextPage
  170. if(list && list.length > 0){
  171. this.isEmpty = false
  172. this.beansList = [...list]
  173. }else{
  174. this.isEmpty = true
  175. }
  176. if(this.hasNextPage){
  177. this.pullUpOn = false
  178. this.nomoreText = '上拉显示更多'
  179. }else{
  180. if(this.beansList.length < 10){
  181. this.pullUpOn = true
  182. }else{
  183. this.pullUpOn = false
  184. this.nomoreText = '已至底部'
  185. }
  186. }
  187. }).catch(error =>{
  188. this.$util.msg(error.msg,2000)
  189. })
  190. },
  191. GetOnReachBottomData(index){//上拉加载
  192. this.listQuery.pageNum += 1
  193. this.UserService.GetUserClubBeansList(this.listQuery).then(response =>{
  194. let data = response.data
  195. let list = data.pageInfo.list
  196. this.userBeans = data.userBeans
  197. this.hasNextPage = data.pageInfo.hasNextPage
  198. this.beansList = this.beansList.concat(list)
  199. this.pullFlag = false// 防上拉暴滑
  200. setTimeout(()=>{this.pullFlag = true},500)
  201. if(this.hasNextPage){
  202. this.pullUpOn = false
  203. this.nomoreText = '上拉显示更多'
  204. }else{
  205. this.loadding = false
  206. this.pullUpOn = false
  207. this.nomoreText = '已至底部'
  208. }
  209. }).catch(error =>{
  210. this.$util.msg(error.msg,2000)
  211. })
  212. },
  213. tabClick(index){//tab点击
  214. this.tabCurrentIndex = index
  215. this.listQuery.type = index
  216. this.listQuery.pageNum = 1
  217. this.beansList = []
  218. this.pullUpOn = true //隐藏
  219. this.GetAccountInitData()
  220. },
  221. monthSwitch(e) {
  222. this.listQuery.year = e.year
  223. this.listQuery.month = e.month
  224. this.GetAccountInitData()
  225. },
  226. cheakType(type){
  227. let typeTextHtml,
  228. typeObject={
  229. 1:'余额抵扣',
  230. 2:'多收退款到余额',
  231. 3:'申请退款',
  232. 4:'余额充值',
  233. 5:'余额提现',
  234. 6:'订金订单充值',
  235. 7:'余额订单充值',
  236. 8:'订金订单退款',
  237. 9:'余额订单退款'
  238. }
  239. Object.keys(typeObject).forEach(function(key){
  240. if(key == type){
  241. typeTextHtml = typeObject[key]
  242. }
  243. })
  244. return typeTextHtml
  245. },
  246. hanldNavigateBack(){
  247. uni.navigateBack({
  248. delta: 1
  249. })
  250. },
  251. },
  252. onReachBottom() {
  253. if(this.hasNextPage){
  254. this.loadding = true
  255. this.pullUpOn = true
  256. this.GetOnReachBottomData()
  257. }
  258. },
  259. onPullDownRefresh() {//下拉刷新
  260. this.listQuery.pageNum = 1
  261. this.GetAccountInitData()
  262. uni.stopPullDownRefresh()
  263. },
  264. onShow() {
  265. // this.beansList = []
  266. }
  267. }
  268. </script>
  269. <style lang="scss">
  270. page, .container{
  271. background: #FFFFFF;
  272. height: 100%;
  273. }
  274. .account{
  275. width: 100%;
  276. height: auto;
  277. position: relative;
  278. }
  279. .account-header{
  280. width: 100%;
  281. height: auto;
  282. position: fixed;
  283. top: 0;
  284. left: 0;
  285. z-index: 998;
  286. }
  287. .h-account{
  288. width: 100%;
  289. height: 258rpx;
  290. position: relative;
  291. background-size: cover;
  292. }
  293. .h-calendar{
  294. width: 100%;
  295. height: auto;
  296. }
  297. .m-account{
  298. width: 100%;
  299. height: 258rpx;
  300. padding:50rpx 24rpx;
  301. box-sizing: border-box;
  302. position: relative;
  303. .icon-tishi{
  304. position: absolute;
  305. right: 30rpx;
  306. top: 20rpx;
  307. font-size: 44rpx;
  308. color: #FFFFFF;
  309. text-align: right;
  310. line-height: 74rpx;
  311. }
  312. .m-m{
  313. width: 100%;
  314. }
  315. .title{
  316. height: 48rpx;
  317. text-align: center;
  318. .m-p{
  319. width: 100%;
  320. font-size: 28rpx;
  321. color: #FFFFFF;
  322. line-height: 40rpx;
  323. }
  324. }
  325. .money{
  326. height: 90rpx;
  327. text-align: center;
  328. .m-t{
  329. font-size:58rpx;
  330. color: #FFFFFF;
  331. line-height: 90rpx;
  332. &.b{
  333. font-weight: bold;
  334. }
  335. &.s{
  336. font-size: 40rpx;
  337. }
  338. }
  339. }
  340. }
  341. .h-swiper{
  342. width: 702rpx;
  343. height: 40rpx;
  344. padding: 24rpx;
  345. display: flex;
  346. .uni-input{
  347. flex: 8;
  348. font-size: $font-size-28;
  349. color: $text-color;
  350. text-align: center;
  351. line-height: 40rpx;
  352. }
  353. .iconfont{
  354. flex: 1;
  355. text-align: center;
  356. }
  357. }
  358. .h-typeTab{
  359. width: 702rpx;
  360. padding:0 24rpx;
  361. background: #fff;
  362. position: relative;
  363. z-index: 10;
  364. .nav-item{
  365. width: 33.3%;
  366. height: 40rpx;
  367. line-height:40rpx;
  368. padding: 26rpx 0 22rpx 0;
  369. font-size: $font-size-28;
  370. float: left;
  371. color: $text-color;
  372. text-align: center;
  373. position: relative;
  374. .line{
  375. width: 70rpx;
  376. height: 4rpx;
  377. background-color: #FFFFFF;
  378. position: absolute;
  379. bottom: 10rpx;
  380. left: 50%;
  381. margin-left: -35rpx;
  382. }
  383. &.current{
  384. color: $color-system;
  385. .line{
  386. background-color: $color-system;
  387. }
  388. }
  389. }
  390. }
  391. .h-swiper-content{
  392. width: 100%;
  393. height: calc(100% - 478rpx);
  394. position: relative;
  395. background: #FFFFFF;
  396. box-sizing: border-box;
  397. .list-account{
  398. width: 100%;
  399. height: auto;
  400. box-sizing: border-box;
  401. padding: 0 24rpx;
  402. background: #FFFFFF;
  403. }
  404. .icon-jiazai{
  405. color: #666666;
  406. font-size: 36rpx;
  407. }
  408. .loading {
  409. width: 100%;
  410. font-size: 28rpx;
  411. color: #999999;
  412. line-height: 36rpx;
  413. text-align: center;
  414. padding: 20rpx 0;
  415. &-no .line{
  416. width: 30%;
  417. margin: 0 auto;
  418. position: relative;
  419. &:before{
  420. content: "";
  421. width: 80rpx;
  422. height: 1px;
  423. background: #999999;
  424. position: absolute;
  425. left: -50rpx;
  426. top: 18rpx;
  427. }
  428. &:after{
  429. content: "";
  430. width: 80rpx;
  431. height: 1px;
  432. background: #999999;
  433. position: absolute;
  434. right: -50rpx;
  435. top: 18rpx;
  436. }
  437. }
  438. }
  439. .list-item{
  440. width: 100%;
  441. height: 140rpx;
  442. padding: 20rpx 0;
  443. border-bottom: 1px solid #EBEBEB;
  444. box-sizing: border-box;
  445. background: #FFFFFF;
  446. &:last-child{
  447. border-bottom: none;
  448. }
  449. .list-t{
  450. height: 54rpx;
  451. line-height: 54rpx;
  452. font-size: $font-size-32;
  453. color: #333333;
  454. display: flex;
  455. .t-t{
  456. flex: 1;
  457. &:nth-child(1){
  458. text-align: left;
  459. }
  460. &:nth-child(2){
  461. text-align: right;
  462. }
  463. &.bold{
  464. font-weight: bold;
  465. }
  466. }
  467. }
  468. .list-b{
  469. height: 46rpx;
  470. line-height: 46rpx;
  471. font-size:$font-size-28;;
  472. color: $text-color;
  473. display: flex;
  474. .t-t{
  475. flex: 1;
  476. color: #999999;
  477. &:nth-child(1){
  478. text-align: left;
  479. }
  480. &:nth-child(2){
  481. text-align: right;
  482. }
  483. .txt{
  484. color: #FF2A2A;
  485. }
  486. &.bold{
  487. font-weight: bold;
  488. }
  489. }
  490. }
  491. }
  492. }
  493. /*空列表显示样式*/
  494. .empty-account {
  495. display: flex;
  496. align-items: center;
  497. justify-content: center;
  498. flex-direction: column;
  499. background: $bg-color;
  500. min-height: 800rpx;
  501. &-image {
  502. width: 260rpx;
  503. height: 260rpx;
  504. }
  505. .error-text{
  506. font-size: $font-size-28;
  507. color: $text-color;
  508. line-height: 88rpx;
  509. }
  510. }
  511. .swiper-box{
  512. min-height: 750rpx;
  513. }
  514. .list-scroll-content{
  515. height: 100%;
  516. }
  517. .uni-swiper-item{
  518. height: auto;
  519. }
  520. .load1,
  521. .load2,
  522. .load3 {
  523. height: 24px;
  524. width: 24px
  525. }
  526. .load2 {
  527. transform: rotate(30deg)
  528. }
  529. .load3 {
  530. transform: rotate(60deg)
  531. }
  532. .load1 view:nth-child(1) {
  533. animation-delay: 0s
  534. }
  535. .load2 view:nth-child(1) {
  536. animation-delay: .13s
  537. }
  538. .load3 view:nth-child(1) {
  539. animation-delay: .26s
  540. }
  541. .load1 view:nth-child(2) {
  542. animation-delay: .39s
  543. }
  544. .load2 view:nth-child(2) {
  545. animation-delay: .52s
  546. }
  547. .load3 view:nth-child(2) {
  548. animation-delay: .65s
  549. }
  550. .load1 view:nth-child(3) {
  551. animation-delay: .78s
  552. }
  553. .load2 view:nth-child(3) {
  554. animation-delay: .91s
  555. }
  556. .load3 view:nth-child(3) {
  557. animation-delay: 1.04s
  558. }
  559. .load1 view:nth-child(4) {
  560. animation-delay: 1.17s
  561. }
  562. .load2 view:nth-child(4) {
  563. animation-delay: 1.3s
  564. }
  565. .load3 view:nth-child(4) {
  566. animation-delay: 1.43s
  567. }
  568. @-webkit-keyframes load {
  569. 0% {
  570. opacity: 1
  571. }
  572. 100% {
  573. opacity: .2
  574. }
  575. }
  576. </style>