account-bean.vue 12 KB

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