detail.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. <template>
  2. <view>
  3. <view class="app-bg">
  4. <image src="/static/img/detail_bg.png"></image>
  5. <view class="body fx-h fx-bc fx-ac">
  6. <view class="count">{{ user.good_integral || 0 }}</view>
  7. <view class="label">我的余额</view>
  8. </view>
  9. </view>
  10. <uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" left-icon="left"
  11. @clickLeft="utils.navigateBack()" fixed title="提货积分"></uni-nav-bar>
  12. <view class="htop" :style="'height:calc(61vw - ' + statusBarHeight + 'px - 44px);'"></view>
  13. <view class="app-body">
  14. <!--列表数据-->
  15. <view class="nav-list fx-r fx-bc">
  16. <view class="item fx-h fx-bc" @tap="tapNav(item.code)" :class="form.type == item.code ? 'active' : ''"
  17. v-for="(item,index) in navList">
  18. <view class="label">{{ item.name }}</view>
  19. <image class="icon" v-if="form.type == item.code" src="/static/img/detail_d.png"></image>
  20. </view>
  21. <view class="fx-g1"></view>
  22. <view class="time fx-r fx-bc" @tap="opendetailDateTime()">
  23. <view class="count">{{ form.dateStr || "" }}</view>
  24. <image class="icon" src="/static/img/detail_next.png"></image>
  25. </view>
  26. </view>
  27. <scroll-view scroll-y class="scroll" :style="'height: calc(100vh - 61vw - 100rpx);'"
  28. @scrolltolower="loadMoreData">
  29. <view class="sc-body">
  30. <view class="detail-list" v-if="data.length > 0">
  31. <view class="top fx-r">
  32. <view class="label">{{ this.form.dateStr }}</view>
  33. <view class="fx-g1"></view>
  34. <view class="label">收入:{{ this.total.inMoney || '0.00' }}
  35. 支出:{{ this.total.outMoney || '0.00' }}</view>
  36. </view>
  37. <view class="item fx-r fx-bc" v-for="(item,index) in data">
  38. <image class="icon" v-if="item.type == 0" src="/static/img/detail_in.png"></image>
  39. <image class="icon" v-if="item.type == 1" src="/static/img/detail_in.png"></image>
  40. <image class="icon" v-if="item.type == 2" src="/static/img/detail_out.png"></image>
  41. <view class="info">
  42. <view class="title">{{ item.title }}</view>
  43. <view class="tag">{{ item.content }}</view>
  44. <view class="time">{{ item.title }}</view>
  45. </view>
  46. <view class="fx-g1"></view>
  47. <view class="right fx-h">
  48. <view class="money" style="color:#e2a622;" v-if="item.type == 1">+{{item.v}}</view>
  49. <view class="money" v-if="item.type == 2">-{{item.v}}</view>
  50. <view class="fx-g1"></view>
  51. <view class="balance">余额:{{ item.money }}</view>
  52. </view>
  53. </view>
  54. </view>
  55. <view v-if="data.length > 0">
  56. <view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
  57. <image src="/static/img/xloading.png"></image>
  58. <text>正在载入更多...</text>
  59. </view>
  60. <view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
  61. </view>
  62. <uv-empty v-if="data.length == 0 && isFirst" mode="data" icon="/static/img/no-empty.png"></uv-empty>
  63. </view>
  64. </scroll-view>
  65. </view>
  66. <uv-datetime-picker ref='detailDateTime' v-model="datetime" @confirm="tapConfirm" @cancel="closedetailDateTime()"
  67. @close="closedetailDateTime()" mode="year-month"></uv-datetime-picker>
  68. </view>
  69. </view>
  70. </template>
  71. <style lang="scss">
  72. .app-bg {
  73. position: absolute;
  74. image {
  75. width: 100vw;
  76. height: 61vw;
  77. }
  78. .body {
  79. position: absolute;
  80. height: 61vw;
  81. width: 100vw;
  82. top: 0;
  83. .count {
  84. font-weight: 500;
  85. font-size: 64rpx;
  86. color: #fff;
  87. }
  88. .label {
  89. margin-top: 4px;
  90. color: #fff;
  91. }
  92. }
  93. }
  94. .app-body {
  95. padding: 0px 20rpx;
  96. }
  97. .nav-list {
  98. height: 100rpx;
  99. .item {
  100. margin-right: 50rpx;
  101. .label {
  102. font-weight: bold;
  103. font-size: 30rpx;
  104. color: #5C5C5C;
  105. }
  106. &.active {
  107. .label {
  108. font-weight: bold;
  109. font-size: 36rpx;
  110. color: #2C2C2C;
  111. }
  112. .icon {
  113. width: 36rpx;
  114. height: 14rpx;
  115. margin-top: 4rpx;
  116. }
  117. }
  118. }
  119. .time {
  120. .count {
  121. font-weight: bold;
  122. font-size: 28rpx;
  123. color: #2C2C2C;
  124. }
  125. .label {
  126. font-weight: bold;
  127. font-size: 30rpx;
  128. color: #2C2C2C;
  129. margin-left: 6rpx;
  130. }
  131. .icon {
  132. margin-left: 10rpx;
  133. width: 20rpx;
  134. height: 12rpx;
  135. }
  136. }
  137. }
  138. .detail-list {
  139. background: #FFFFFF;
  140. border-radius: 20rpx;
  141. padding: 40rpx 30rpx;
  142. .top {
  143. margin-bottom: 40rpx;
  144. .label {
  145. font-weight: 500;
  146. font-size: 25rpx;
  147. color: #979797;
  148. }
  149. }
  150. .item {
  151. margin-bottom: 40rpx;
  152. .icon {
  153. width: 84rpx;
  154. height: 84rpx;
  155. }
  156. .info {
  157. width: calc(100% - 280rpx);
  158. margin-left: 16rpx;
  159. .title {
  160. font-weight: bold;
  161. font-size: 28rpx;
  162. color: #333333;
  163. }
  164. .tag {
  165. font-size: 24rpx;
  166. color: #979797;
  167. margin-top: 6rpx;
  168. }
  169. .time {
  170. font-size: 24rpx;
  171. color: #979797;
  172. }
  173. }
  174. .right {
  175. text-align: right;
  176. width: 160rpx;
  177. .money {
  178. font-weight: bold;
  179. font-size: 34rpx;
  180. color: #FF4C4C;
  181. }
  182. .balance {
  183. font-weight: 500;
  184. font-size: 24rpx;
  185. color: #979797;
  186. }
  187. }
  188. }
  189. }
  190. </style>
  191. <script>
  192. import {
  193. mapState,
  194. mapMutations
  195. } from 'vuex';
  196. export default {
  197. computed: mapState(['user']),
  198. data() {
  199. return {
  200. statusBarHeight: 20,
  201. isFirst: false,
  202. datetime: "",
  203. total: {},
  204. data: [],
  205. page: {
  206. isFirst: false,
  207. isLoad: false,
  208. isFoot: false,
  209. page: 1
  210. },
  211. form: {
  212. dateStr: "",
  213. date: "",
  214. type: "all"
  215. },
  216. navList: [{
  217. "name": "全部",
  218. "code": "all"
  219. },
  220. {
  221. "name": "收入",
  222. "code": "income"
  223. },
  224. {
  225. "name": "支出",
  226. "code": "disburse"
  227. }
  228. ]
  229. }
  230. },
  231. onLoad(options) {
  232. this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  233. this.form.dateStr = this.utils.date('Y年m月');
  234. this.form.date = this.utils.date('Y-m');
  235. this.datetime = this.utils.strtotime() * 1000;
  236. this.initView();
  237. },
  238. methods: {
  239. ...mapMutations(['checkUserLogin']),
  240. /**
  241. * 加载基础配置
  242. */
  243. initView: function() {
  244. this.totalData();
  245. this.getData(true);
  246. },
  247. /**
  248. * 获取数据
  249. */
  250. getData: function(isPull = false) {
  251. if (this.page.isLoad) return;
  252. this.page.isLoad = true;
  253. if (isPull) {
  254. this.page.page = 1;
  255. this.page.isLoad = false;
  256. this.page.isFoot = false;
  257. }
  258. uni.showLoading({
  259. title: '获取数据中..'
  260. });
  261. var post = {};
  262. post.page = this.page.page;
  263. this
  264. .request
  265. .post("userDetail", {
  266. ...this.form,
  267. page: this.page.page
  268. })
  269. .then(res => {
  270. uni.hideLoading();
  271. this.page.isFirst = true;
  272. this.page.isLoad = false;
  273. this.isFirst = true;
  274. if (isPull) {
  275. this.data = res.data.list;
  276. } else {
  277. this.data = this.data.concat(res.data.list);
  278. }
  279. //是否到底
  280. if (res.data.list.length != res.data.pageSize) {
  281. this.page.isFoot = true;
  282. }
  283. })
  284. .catch((res) => {
  285. console.log(res);
  286. uni.hideLoading();
  287. uni.showModal({
  288. title: '系统提示',
  289. content: '加载失败,返回在尝试',
  290. showCancel: false
  291. });
  292. });
  293. },
  294. totalData: function() {
  295. this
  296. .request
  297. .post("userDetailTotal", {
  298. ...this.form
  299. })
  300. .then(res => {
  301. if (res.code == 200) {
  302. this.total = res.data;
  303. }
  304. })
  305. },
  306. loadMoreData: function() {
  307. if (this.page.isFoot || this.page.isLoad) {
  308. return;
  309. }
  310. this.page.page++;
  311. this.getData();
  312. },
  313. tapNav: function(ev) {
  314. this.form.type = ev;
  315. this.getData(true);
  316. },
  317. tapConfirm: function(ev) {
  318. this.form.dateStr = this.utils.date('Y年m月', ev.value / 1000);
  319. this.form.date = this.utils.date('Y-m', ev.value / 1000);
  320. this.closedetailDateTime();
  321. this.totalData();
  322. this.getData(true);
  323. },
  324. closedetailDateTime(){
  325. this.$refs.detailDateTime.close()
  326. },
  327. opendetailDateTime(){
  328. this.$refs.detailDateTime.open()
  329. }
  330. },
  331. }
  332. </script>
  333. <style>
  334. </style>