myyhq.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <template>
  2. <view class="content">
  3. <view class="navbar">
  4. <view v-for="(itemn, index) in navList" :key="index" class="nav-item"
  5. :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ itemn.text }}</view>
  6. </view>
  7. <swiper :current="tabCurrentIndex" class="swiper-box" duration="300" :style="{ height: height}"
  8. @change="changeTab">
  9. <swiper-item v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
  10. <scroll-view scroll-y="true" :style="{ height: height}" style="padding-top: 20rpx;"
  11. @scrolltolower="getMyex()">
  12. <empty v-if="tabItem.loaded && tabItem.list.length === 0"></empty>
  13. <view class="shop-dhq flex" v-for="qitem in tabItem.list">
  14. <view class="dhq-left flex f-d-c f-j-c fg1 f-ai-s">
  15. <view class="dhq-name">
  16. {{qitem.coupon_title}}
  17. </view>
  18. <view class="dhq-price flex">
  19. <view class="j-price">
  20. {{qitem.coupon_price}}
  21. </view>
  22. </view>
  23. </view>
  24. <view class="dhq-right fs0 flex f-d-c f-j-sa">
  25. <view class="right-btn" @click.stop="userNow(qitem)" v-if="tabCurrentIndex == 0">
  26. 立即使用
  27. </view>
  28. <view class="right-btn" @click.stop="shareF(qitem)" v-if="tabCurrentIndex == 0">
  29. 分享好友
  30. </view>
  31. <view class="right-btn ysy" v-if="tabCurrentIndex == 1">
  32. 已使用
  33. </view>
  34. <view class="right-btn ysy" v-if="tabCurrentIndex == 2">
  35. 已过期
  36. </view>
  37. </view>
  38. </view>
  39. </scroll-view>
  40. </swiper-item>
  41. </swiper>
  42. </view>
  43. </template>
  44. <script>
  45. import {
  46. mapState,
  47. mapMutations
  48. } from 'vuex';
  49. import {
  50. getMyYhq
  51. } from '@/api/user.js'
  52. export default {
  53. data() {
  54. return {
  55. height: '',
  56. tabCurrentIndex: 0,
  57. navList: [{
  58. type: 0,
  59. text: '未使用',
  60. list: [],
  61. page: 1,
  62. limit: 10,
  63. loadingType: 'more',
  64. loaded: false,
  65. },
  66. {
  67. type: 1,
  68. text: '已使用',
  69. list: [],
  70. page: 1,
  71. limit: 10,
  72. loadingType: 'more',
  73. loaded: false,
  74. },
  75. {
  76. type: 2,
  77. text: '已过期',
  78. list: [],
  79. page: 1,
  80. limit: 10,
  81. loadingType: 'more',
  82. loaded: false,
  83. }
  84. ],
  85. }
  86. },
  87. onLoad() {
  88. },
  89. onShow() {
  90. this.getMyex()
  91. },
  92. onReachBottom() {
  93. },
  94. computed: {
  95. ...mapState('user', ['hasLogin', 'userInfo'])
  96. },
  97. onReady() {
  98. var obj = this;
  99. uni.getSystemInfo({
  100. success: resu => {
  101. const query = uni.createSelectorQuery();
  102. query.select('.swiper-box').boundingClientRect();
  103. query.exec(function(res) {
  104. console.log(res, 'ddddddddddddd');
  105. obj.height = resu.windowHeight - res[0].top + 'px';
  106. console.log('打印页面的剩余高度', obj.height);
  107. });
  108. },
  109. fail: res => {}
  110. });
  111. },
  112. methods: {
  113. // 立即使用
  114. userNow(item) {
  115. uni.navigateTo({
  116. url: '/pages/shop/djqQm?code=' + item.code
  117. })
  118. },
  119. // 分享好友
  120. shareF(item) {
  121. uni.navigateTo({
  122. url: '/pages/shop/shareF?code=' + item.code + '&type=1' + '&logo=' + this.userInfo.avatar +
  123. '&nickname=' + encodeURI(this.userInfo.nickname) + '&goodname=' + encodeURI(item
  124. .coupon_title)
  125. })
  126. },
  127. //swiper 切换
  128. changeTab(e) {
  129. this.tabCurrentIndex = e.target.current;
  130. this.getMyex('tab');
  131. },
  132. //顶部tab点击
  133. tabClick(index) {
  134. this.tabCurrentIndex = index;
  135. this.getMyex('tab');
  136. },
  137. getMyex(tab) {
  138. let obj = this
  139. let index = obj.tabCurrentIndex
  140. let navItem = obj.navList[index]
  141. if (navItem.loadingType == 'loading' || navItem.loadingType == 'noMore') {
  142. return
  143. }
  144. if (tab == 'tab' && navItem.loaded) {
  145. return
  146. }
  147. navItem.loadingType = 'loading'
  148. getMyYhq({
  149. page: navItem.page,
  150. limit: navItem.limit,
  151. status: navItem.type
  152. }).then(({
  153. data
  154. }) => {
  155. navItem.list = navItem.list.concat(data)
  156. navItem.page++
  157. if (data.length == navItem.limit) {
  158. navItem.loadingType = 'more'
  159. return
  160. } else {
  161. navItem.loadingType = 'noMore'
  162. }
  163. obj.$set(navItem, 'loaded', true)
  164. })
  165. },
  166. }
  167. }
  168. </script>
  169. <style lang="scss" scoped>
  170. .navbar {
  171. display: flex;
  172. height: 40px;
  173. padding: 0 5px;
  174. background: #fff;
  175. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  176. position: relative;
  177. z-index: 10;
  178. .nav-item {
  179. flex: 1;
  180. display: flex;
  181. justify-content: center;
  182. align-items: center;
  183. height: 100%;
  184. font-size: 15px;
  185. color: $font-color-dark;
  186. position: relative;
  187. &.current {
  188. color: $base-color;
  189. &:after {
  190. content: '';
  191. position: absolute;
  192. left: 50%;
  193. bottom: 0;
  194. transform: translateX(-50%);
  195. width: 44px;
  196. height: 0;
  197. border-bottom: 2px solid $base-color;
  198. }
  199. }
  200. }
  201. }
  202. .shop-dhq {
  203. width: 702rpx;
  204. height: 171rpx;
  205. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.15);
  206. margin: auto;
  207. border-radius: 20rpx;
  208. background-color: #fff;
  209. padding: 0 20rpx 0 26rpx;
  210. margin-bottom: 20rpx;
  211. .dhq-left {
  212. .dhq-name {
  213. font-size: 33rpx;
  214. font-weight: bold;
  215. color: #333333;
  216. }
  217. .dhq-price {
  218. padding-top: 20rpx;
  219. .j-price {
  220. font-size: 38rpx;
  221. font-weight: bold;
  222. color: #FF4C4C;
  223. &::before {
  224. content: '¥';
  225. font-size: 24rpx;
  226. color: #FF4C4C;
  227. }
  228. }
  229. .j-zk {
  230. display: inline-block;
  231. margin-left: 10rpx;
  232. line-height: 32rpx;
  233. height: 32rpx;
  234. border: 1px solid #FF4C4C;
  235. border-radius: 5rpx;
  236. font-size: 22rpx;
  237. font-weight: 500;
  238. color: #FF4C4C;
  239. padding: 0 8rpx;
  240. }
  241. }
  242. }
  243. .dhq-right {
  244. height: 80%;
  245. .right-btn {
  246. // width: 105rpx;
  247. display: inline-block;
  248. padding: 0 10rpx;
  249. line-height: 56rpx;
  250. background: linear-gradient(143.2747deg, #FF6A00, #EE0979);
  251. border: 1rpx solid #FF4C4C;
  252. border-radius: 27rpx;
  253. text-align: center;
  254. color: #fff;
  255. font-size: 28rpx;
  256. font-weight: bold;
  257. }
  258. .ysy {
  259. background: #999;
  260. border: none;
  261. padding: 0 20rpx;
  262. }
  263. }
  264. }
  265. </style>