exchange.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <view class="exchange">
  3. <view class="bg">
  4. </view>
  5. <view class="header">
  6. <view class="data">
  7. <view class="title">
  8. 我的金券
  9. </view>
  10. <view class="quantity">
  11. {{ userInfo.integral }}
  12. </view>
  13. <view class="button" @click="navto('/pages/user/jinquan')">
  14. 查看明细
  15. </view>
  16. </view>
  17. </view>
  18. <view class="line">
  19. 热门兑换
  20. </view>
  21. <view class="dataList">
  22. <data-list :data='data'></data-list>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import { getProducts } from '@/api/product.js';
  28. import dataList from '@/components/datalist.vue';
  29. import { mapState, mapMutations } from 'vuex';
  30. import { getUserInfo } from '@/api/user.js';
  31. export default {
  32. data() {
  33. return {
  34. page: 1,
  35. limit: 1000,
  36. loadingType: 'loadmore',
  37. data: []
  38. }
  39. },
  40. components: {
  41. dataList
  42. },
  43. computed: {
  44. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
  45. },
  46. onLoad() {
  47. this.loadData();
  48. this.getData()
  49. },
  50. // onReachBottom() {
  51. // this.loadData()
  52. // },
  53. methods: {
  54. ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
  55. navto(url) {
  56. uni.navigateTo({
  57. url:url
  58. })
  59. },
  60. // 點擊搜索框
  61. clickSearch() {
  62. uni.navigateTo({
  63. url: '/pages/product/search'
  64. });
  65. },
  66. loadData() {
  67. getUserInfo({})
  68. .then(({ data }) => {
  69. this.setUserInfo(data);
  70. // 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
  71. })
  72. .catch(e => {
  73. console.log(e);
  74. });
  75. },
  76. getData() {
  77. const obj = this
  78. getProducts({
  79. page: this.page,
  80. limit: this.limit,
  81. is_integral: 1
  82. })
  83. .then(function(res) {
  84. obj.data = res.data
  85. })
  86. .catch(res => {
  87. });
  88. }
  89. }
  90. }
  91. </script>
  92. <style lang="scss" scoped>
  93. $grey: #95A0B1;
  94. $text: #333333;
  95. $red: #FF4C4C;
  96. .exchange {
  97. .bg {
  98. width: 100%;
  99. height: 400rpx;
  100. background-color: $red;
  101. image {
  102. width: 100%;
  103. }
  104. }
  105. .header {
  106. .data {
  107. padding-top: 120rpx;
  108. width: 100%;
  109. text-align: center;
  110. position: absolute;
  111. top: 0;
  112. color: #fff;
  113. height: 400rpx;
  114. .quantity,.title,.button {
  115. margin: 10rpx auto;
  116. }
  117. .title {
  118. font-size: 24rpx;
  119. }
  120. .quantity {
  121. font-size: 54rpx;
  122. font-weight: bold;
  123. }
  124. .button {
  125. padding: 10rpx;
  126. border: solid 1rpx #fff;
  127. border-radius: 40rpx;
  128. font-size: 24rpx;
  129. width: 160rpx;
  130. }
  131. }
  132. }
  133. .line {
  134. background-color: #fff;
  135. font-size: 28rpx;
  136. padding: 30rpx;
  137. color: $red;
  138. font-weight: bold;
  139. text-align: center;
  140. }
  141. .dataList {
  142. background-color: #fff;
  143. }
  144. }
  145. </style>