detail.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. <template>
  2. <view class="container">
  3. <view class="my-point">
  4. <view class="my-tip"><text class="iconfont icon-jifen"></text>我的积分余额</view>
  5. <view class="my-account">{{ userInfo.point ? userInfo.point : 0 }}</view>
  6. <view class="my-gift">
  7. <view class="gift" @click="toGive()">转赠好友</view>
  8. <view class="gift" @click="toUsePoint()">兑换积分</view>
  9. </view>
  10. </view>
  11. <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption"
  12. @up="upCallback">
  13. <view class="log-list">
  14. <view v-for="(item, index) in list.content" :key="index" class="log-item">
  15. <view class="item-left flex-box">
  16. <view class="rec-status">
  17. <text>{{ item.description }}</text>
  18. </view>
  19. <view class="rec-time">
  20. <text>{{ timeStamp(item.createTime) }}</text>
  21. </view>
  22. </view>
  23. <view class="item-right" :class="[item.amount > 0 ? 'col-green' : 'col-6']">
  24. <text>{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}</text>
  25. </view>
  26. </view>
  27. </view>
  28. </mescroll-body>
  29. </view>
  30. </template>
  31. <script>
  32. import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
  33. import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
  34. import * as LogApi from '@/api/points/log'
  35. import * as UserApi from '@/api/user'
  36. import { getEmptyPaginateObj, getMoreListData } from '@/utils/app'
  37. import Empty from '@/components/empty'
  38. const pageSize = 10
  39. export default {
  40. components: {
  41. MescrollBody,
  42. Empty
  43. },
  44. mixins: [MescrollMixin],
  45. data() {
  46. return {
  47. userInfo: {},
  48. // 数据记录
  49. list: getEmptyPaginateObj(),
  50. // 正在加载
  51. isLoading: false,
  52. // 上拉加载配置
  53. upOption: {
  54. // 首次自动执行
  55. auto: true,
  56. // 每页数据的数量; 默认10
  57. page: { size: pageSize },
  58. // 数量要大于12条才显示无更多数据
  59. noMoreSize: 12,
  60. // 空布局
  61. empty: {
  62. tip: '亲,暂无相关数据'
  63. }
  64. }
  65. }
  66. },
  67. /**
  68. * 生命周期函数--监听页面加载
  69. */
  70. onShow(options) {
  71. this.getUserInfo()
  72. this.getLogList(1)
  73. },
  74. methods: {
  75. /**
  76. * 上拉加载的回调 (页面初始化时也会执行一次)
  77. * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
  78. * @param {Object} page
  79. */
  80. upCallback(page) {
  81. const app = this
  82. // 设置列表数据
  83. app.getLogList(page.num)
  84. .then(list => {
  85. const curPageLen = list.content.length
  86. const totalSize = list.totalElements
  87. app.mescroll.endBySize(curPageLen, totalSize)
  88. })
  89. .catch(() => app.mescroll.endErr())
  90. },
  91. toUsePoint() {
  92. this.$navTo('pages/coupon/list?type=C&needPoint=1')
  93. },
  94. toGive() {
  95. this.$navTo('pages/points/gift')
  96. },
  97. // 获取当前用户信息
  98. getUserInfo() {
  99. const app = this
  100. return new Promise((resolve, reject) => {
  101. UserApi.info()
  102. .then(result => {
  103. app.userInfo = result.data.userInfo
  104. resolve(app.userInfo)
  105. })
  106. .catch(err => {
  107. if (err.result && err.result.status == 1001) {
  108. app.isLogin = false
  109. resolve(null)
  110. } else {
  111. reject(err)
  112. }
  113. })
  114. })
  115. },
  116. // 获取积分明细列表
  117. getLogList(pageNo = 1) {
  118. const app = this
  119. return new Promise((resolve, reject) => {
  120. LogApi.list({ page: pageNo })
  121. .then(result => {
  122. // 合并新数据
  123. const newList = result.data
  124. app.list.content = getMoreListData(newList, app.list, pageNo)
  125. resolve(newList)
  126. })
  127. })
  128. },
  129. timeStamp: function(value) {
  130. var date = new Date(value);
  131. var year = date.getFullYear();
  132. var month = ("0" + (date.getMonth() + 1)).slice(-2);
  133. var sdate = ("0" + date.getDate()).slice(-2);
  134. var hour = ("0" + date.getHours()).slice(-2);
  135. var minute = ("0" + date.getMinutes()).slice(-2);
  136. var second = ("0" + date.getSeconds()).slice(-2);
  137. // 拼接
  138. var result = year + "." + month + "." + sdate + " " + hour + ":" + minute //+ ":" + second;
  139. // 返回
  140. return result;
  141. }
  142. }
  143. }
  144. </script>
  145. <style lang="scss" scoped>
  146. .container {
  147. background: #FFFFFF;
  148. }
  149. .my-point {
  150. height: 320rpx;
  151. color: #FFFFFF;
  152. background: $fuint-theme;
  153. padding-top: 80rpx;
  154. text-align: center;
  155. .my-tip {
  156. text-align: center;
  157. }
  158. .my-account {
  159. text-align: center;
  160. font-size: 45rpx;
  161. font-weight: bold;
  162. margin-top: 14rpx;
  163. }
  164. .iconfont {
  165. height: 30rpx;
  166. width: 30rpx;
  167. margin-right: 5rpx;
  168. }
  169. .my-gift {
  170. text-align: center;
  171. display: inline-block;
  172. .gift {
  173. height: 60rpx;
  174. width: 140rpx;
  175. margin-top: 20rpx;
  176. line-height: 60rpx;
  177. text-align: center;
  178. align-items: center;
  179. justify-content: center;
  180. float: left;
  181. margin-right: 40rpx;
  182. margin-left: 40rpx;
  183. border-radius: 6rpx;
  184. color: #f86d48;
  185. background: #f8df98;
  186. font-size: 22rpx;
  187. }
  188. }
  189. }
  190. .log-list {
  191. padding: 0 30rpx;
  192. background: #FFFFFF;
  193. border-radius: 20rpx;
  194. }
  195. .log-item {
  196. font-size: 32rpx;
  197. padding: 20rpx 20rpx;
  198. line-height: 1.8;
  199. border-bottom: 1rpx solid rgb(238, 238, 238);
  200. display: flex;
  201. justify-content: center;
  202. align-items: center;
  203. }
  204. .rec-time {
  205. color: #888888;
  206. font-size: 24rpx;
  207. }
  208. // 空数据按钮
  209. .empty-ipt {
  210. width: 220rpx;
  211. margin: 10rpx auto;
  212. font-size: 28rpx;
  213. height: 64rpx;
  214. line-height: 64rpx;
  215. text-align: center;
  216. color: #fff;
  217. border-radius: 5rpx;
  218. background: linear-gradient(to right, $fuint-theme, $fuint-theme);
  219. }
  220. </style>