prize.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547
  1. <template>
  2. <view class="prize">
  3. <!-- 分段器 -->
  4. <view class="segmented">
  5. <view class="tab_nav">
  6. <view class="navTitle" v-for="(item,index) in items" :key="index">
  7. <view :class="{'active':isActive == index}" @click="checked(index)">
  8. {{item}}
  9. </view>
  10. </view>
  11. </view>
  12. </view>
  13. <!-- 占位 -->
  14. <view style="width: 100%;height: 112rpx;"></view>
  15. <view class="msg-null" v-if="isActive == 0 && PhysicalPrizes.length == 0 ">
  16. <image src="https://t9.9026.com/imgs/dataNull.png" style="width: 394rpx;height: 396rpx;" mode=""></image>
  17. <view class="msg-null-text">
  18. <text>暂无数据</text>
  19. </view>
  20. </view>
  21. <view class="msg-null" v-if="isActive == 1 && VirtualPrizes.length == 0 ">
  22. <image src="https://t9.9026.com/imgs/dataNull.png" style="width: 394rpx;height: 396rpx;" mode=""></image>
  23. <view class="msg-null-text">
  24. <text>暂无数据</text>
  25. </view>
  26. </view>
  27. <view class="msg-null" v-if="isActive == 2 && prizeRecord.length == 0 ">
  28. <image src="https://t9.9026.com/imgs/dataNull.png" style="width: 394rpx;height: 396rpx;" mode=""></image>
  29. <view class="msg-null-text">
  30. <text>暂无数据</text>
  31. </view>
  32. </view>
  33. <view style="margin-top: 24rpx; background-color: #f9f9f9; ">
  34. <!-- 实物奖品 -->
  35. <view class="prizeList" :style="{'--height':ListHeight+'rpx'}"
  36. v-if="isActive == 0 && PhysicalPrizes.length > 0 ">
  37. <view class="ListItem" v-for="(item,index) in PhysicalPrizes" :key="index">
  38. <view class="title"><text>{{item.name}}</text></view>
  39. <view class='data'><text>{{item.exchange_start_time}}--{{item.exchange_end_time}}</text></view>
  40. <view class="alreadyBtn" v-if="item.status == 2">
  41. <text>已兑换</text>
  42. </view>
  43. <view class="instantBtn" v-if="item.status == 1" @click="goExchangePhy(item.id,item.product_id)">
  44. <text>立即兑换</text>
  45. </view>
  46. <view class="alreadyBtn" v-if="item.status == 3">
  47. <text>已过期</text>
  48. </view>
  49. </view>
  50. </view>
  51. <!-- 线下奖品 -->
  52. <view class="prizeList" :style="{'--height':ListHeight+'rpx'}"
  53. v-if="isActive == 1 && VirtualPrizes.length > 0 ">
  54. <view class="ListItem" v-for="(item,index) in VirtualPrizes" :key="index">
  55. <view class="title"><text>{{item.name}}</text></view>
  56. <view class='data'><text>{{item.exchange_start_time}}--{{item.exchange_end_time}}</text></view>
  57. <view class="instantBtn" v-if="item.status == 1" @click="goExchangeVir(item.id,item.product_id)">
  58. <text>立即兑换</text>
  59. </view>
  60. <view class="alreadyBtn" v-if="item.status == 2">
  61. <text>已兑换</text>
  62. </view>
  63. <view class="alreadyBtn" v-if="item.status == 3">
  64. <text>已过期</text>
  65. </view>
  66. <view class="alreadyBtn" v-if="item.status == 4">
  67. <text>未开始</text>
  68. </view>
  69. </view>
  70. </view>
  71. <!-- 中奖记录 -->
  72. <view class="prizeList" :style="{'--height':ListHeight+'rpx'}" style="padding-bottom: 40rpx;"
  73. v-if="isActive == 2 && prizeRecord.length > 0 ">
  74. <view class="ListItem" v-for="(item,index) in prizeRecord" :key="index">
  75. <view style="display: flex; justify-content: space-between;">
  76. <view class="title"><text>{{item.name || '积分奖品'}}</text> </view>
  77. </view>
  78. <view class="content"><text>{{item.remark||'无'}}</text></view>
  79. <view class='data'>
  80. <text>{{item.created_at}}</text>
  81. </view>
  82. </view>
  83. </view>
  84. </view>
  85. <!-- 已经到底啦 -->
  86. <view class="home-bottom" style="margin-top: 88rpx;padding-bottom: 60rpx;"
  87. v-if="isActive == 0 && PhysicalPrizes.length > 0 ">
  88. <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
  89. </view>
  90. <view class="home-bottom" style="margin-top: 88rpx;padding-bottom: 60rpx;"
  91. v-if="isActive == 1 && VirtualPrizes.length > 0 ">
  92. <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
  93. </view>
  94. <view class="home-bottom" style="margin-top: 88rpx;padding-bottom: 60rpx;"
  95. v-if="isActive == 2 && prizeRecord.length > 0 ">
  96. <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
  97. </view>
  98. </view>
  99. </template>
  100. <script>
  101. export default {
  102. data() {
  103. return {
  104. // 分段器标题
  105. items: ['实物奖品', '虚拟奖品', '中奖记录'],
  106. isActive: 0,
  107. // 列表高度
  108. ListHeight: 800,
  109. contentText: {
  110. contentdown: '查看更多',
  111. contentrefresh: '加载中',
  112. contentnomore: '—— 已经到底啦 ——'
  113. },
  114. // 实物奖品列表
  115. PhysicalPrizes: [],
  116. // 虚拟奖品列表
  117. VirtualPrizes: [],
  118. // 中奖记录
  119. prizeRecord: [],
  120. // 分页
  121. page: 1,
  122. pagesize: 15,
  123. totalElements: '',
  124. allListItem: '',
  125. // 组件uni-load-more
  126. status: 'noMore',
  127. totalElementsPhy: '',
  128. totalElementsVir: '',
  129. }
  130. },
  131. onLoad(o) {
  132. if (o.product_type == 2) {
  133. //分段器标题切换
  134. this.checked(o.product_type - 1)
  135. } else {
  136. //实物奖品
  137. this.getPrizeList(0)
  138. }
  139. uni.$on('refreshPrizeData', () => {
  140. // 中奖记录
  141. this.getPrizeRecord()
  142. //实物奖品
  143. this.getPrizeList(0)
  144. //虚拟奖品
  145. this.getPrizeList(1)
  146. })
  147. },
  148. onUnload() {
  149. uni.$emit('refreshOrderNum')
  150. },
  151. onReachBottom() {
  152. // 触底的时候请求数据,即为上拉加载更多
  153. var allTotal = this.page * this.pagesize
  154. //this.page为加载次数,this.pagesize为每一次加载的数据条数
  155. if (this.isActive == 1) {
  156. console.log('虚拟')
  157. if (allTotal < this.totalElementsVir) {
  158. //this.totalElements为请求数据的总条数。只要现有条数小于总条数就就执行一下代码
  159. this.allListItem = false;
  160. this.page++;
  161. //加载次数递加
  162. this.status = "loading"
  163. this.$api.lottery.getDrawRecord({ //请求更多数据列表
  164. page: this.page,
  165. is_virtual: this.isActive,
  166. }).then(res => {
  167. let ret = [...this.VirtualPrizes, ...res.data.data]
  168. this.VirtualPrizes = ret
  169. console.log(ret)
  170. })
  171. } else {
  172. this.allListItem = true;
  173. console.log('已加载全部数据')
  174. this.status = "noMore"
  175. }
  176. } else if (this.isActive == 2) {
  177. if (allTotal < this.totalElements) {
  178. //this.totalElements为请求数据的总条数。只要现有条数小于总条数就就执行一下代码
  179. this.allListItem = false;
  180. this.page++;
  181. //加载次数递加
  182. this.status = "loading"
  183. this.$api.lottery.getDrawRecord({ //请求更多数据列表
  184. page: this.page,
  185. }).then(res => {
  186. let ret = [...this.prizeRecord, ...res.data.data]
  187. this.prizeRecord = ret
  188. console.log(ret)
  189. })
  190. } else {
  191. this.allListItem = true;
  192. console.log('已加载全部数据')
  193. this.status = "noMore"
  194. }
  195. } else if (this.isActive == 0) {
  196. console.log(allTotal, '实物');
  197. if (allTotal < this.totalElementsPhy) {
  198. //this.totalElements为请求数据的总条数。只要现有条数小于总条数就就执行一下代码
  199. this.allListItem = false;
  200. this.page++;
  201. //加载次数递加
  202. this.status = "loading"
  203. this.$api.lottery.getDrawRecord({ //请求更多数据列表
  204. page: this.page,
  205. is_virtual: this.isActive,
  206. }).then(res => {
  207. let ret = [...this.PhysicalPrizes, ...res.data.data]
  208. this.PhysicalPrizes = ret
  209. console.log(ret)
  210. })
  211. } else {
  212. this.allListItem = true;
  213. console.log('已加载全部数据')
  214. this.status = "noMore"
  215. }
  216. }
  217. },
  218. methods: {
  219. // 获取奖品列表
  220. getPrizeList(type) {
  221. this.$api.lottery.getDrawRecord({
  222. is_virtual: type,
  223. page: 0
  224. }).then(res => {
  225. //实物奖品
  226. if (type == 0) {
  227. this.PhysicalPrizes = res.data.data
  228. this.totalElementsPhy = res.data.total
  229. this.pagesize = res.data.per_page
  230. } else {
  231. this.VirtualPrizes = res.data.data
  232. this.totalElementsVir = res.data.total
  233. this.pagesize = res.data.per_page
  234. console.log(this.totalElementsVir, '虚拟');
  235. }
  236. })
  237. },
  238. // 获取中奖记录
  239. getPrizeRecord() {
  240. this.$api.lottery.getDrawRecord({
  241. page: 0
  242. }).then(res => {
  243. console.log(res, "中奖记录")
  244. if (res.code == 0) {
  245. this.prizeRecord = res.data.data
  246. this.totalElements = res.data.total
  247. this.pagesize = res.data.per_page
  248. }
  249. })
  250. },
  251. //分段器标题切换
  252. checked(index) {
  253. if (index <= 1) {
  254. this.page = 1
  255. this.isActive = index
  256. console.log(this.isActive, '------->this.isActive');
  257. this.getPrizeList(index)
  258. } else {
  259. this.page = 1
  260. this.isActive = index
  261. this.getPrizeRecord()
  262. }
  263. },
  264. // 实物立即兑换
  265. goExchangePhy(id, product_id) {
  266. uni.navigateTo({
  267. url: `/pages/my/prize/exchangePrize?id=${id}&isPhy=1&product_id=${product_id}`
  268. })
  269. },
  270. // 虚拟立即兑换
  271. goExchangeVir(id, product_id) {
  272. uni.navigateTo({
  273. url: `/pages/my/prize/exchangePrize?id=${id}&isPhy=2&product_id=${product_id}`
  274. })
  275. },
  276. },
  277. }
  278. </script>
  279. <style lang="scss" scoped>
  280. $pageColor:#F9F9F9;
  281. $bgColor:#FFFFFF;
  282. @mixin flexlayout {
  283. display: flex;
  284. align-items: center;
  285. justify-content: center;
  286. }
  287. .prize {
  288. height: 100%;
  289. background: $pageColor;
  290. }
  291. .msg-null {
  292. padding-top: 60rpx;
  293. display: flex;
  294. flex-direction: column;
  295. align-items: center;
  296. justify-content: center;
  297. .msg-null-text {
  298. margin-top: 40rpx;
  299. font-size: 28rpx;
  300. color: #333;
  301. }
  302. }
  303. .segmented {
  304. position: fixed;
  305. top: 0;
  306. z-index: 999;
  307. width: 750rpx;
  308. height: 112rpx;
  309. background: $bgColor;
  310. box-shadow: 0px 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
  311. border-radius: 0rpx 0rpx 16rpx 16rpx;
  312. margin-bottom: 24rpx;
  313. padding: 0rpx 30rpx;
  314. box-sizing: border-box;
  315. //菜单切换
  316. .tab_nav {
  317. width: 690rpx;
  318. display: flex;
  319. justify-content: space-between;
  320. align-items: center;
  321. font-family: PingFang-SC-Heavy, PingFang-SC;
  322. }
  323. .tab_nav .navTitle {
  324. margin-top: 20rpx;
  325. width: 128rpx;
  326. flex: none;
  327. height: 28rpx;
  328. font-size: 32rpx;
  329. color: #666;
  330. position: relative;
  331. }
  332. .active {
  333. color: #D9A94D;
  334. font-weight: bold;
  335. &::after {
  336. display: inline-block;
  337. content: '';
  338. width: 48rpx;
  339. height: 12rpx;
  340. background: linear-gradient(90deg, #F3D69F 0%, #D9A94D 100%);
  341. border-radius: 6px;
  342. position: absolute;
  343. bottom: -30rpx;
  344. left: 40rpx;
  345. }
  346. }
  347. }
  348. ::v-deep .segmented-control__text {
  349. font-size: 32rpx !important;
  350. font-family: PingFang-SC-Heavy, PingFang-SC;
  351. font-weight: 500 !important;
  352. }
  353. ::v-deep .segmented-control__item--text {
  354. font-size: 32rpx;
  355. font-family: PingFang-SC-Heavy, PingFang-SC;
  356. font-weight: 800 !important;
  357. padding: 10rpx 0 !important;
  358. border-radius: 4rpx !important;
  359. }
  360. .prizeList {
  361. width: 750rpx;
  362. // height: var(--height);
  363. background: $bgColor;
  364. box-shadow: 0px 4rpx 24rpx -10rpx rgba(101, 95, 90, 0.3);
  365. border-radius: 12rpx;
  366. padding: 0rpx 30rpx 0rpx;
  367. box-sizing: border-box;
  368. .ListItem {
  369. width: 690rpx;
  370. border-bottom: #F0F0F0 solid 0.5rpx;
  371. position: relative;
  372. padding-top: 35rpx;
  373. padding-bottom: 35rpx;
  374. box-sizing: border-box;
  375. .title {
  376. margin-bottom: 5rpx;
  377. text {
  378. font-size: 32rpx;
  379. font-family: PingFang-SC-Bold, PingFang-SC;
  380. font-weight: bold;
  381. color: #333333;
  382. }
  383. }
  384. .data {
  385. text {
  386. font-size: 26rpx;
  387. font-family: PingFang-SC-Medium, PingFang-SC;
  388. font-weight: 500;
  389. color: #999999;
  390. }
  391. }
  392. .alreadyBtn {
  393. position: absolute;
  394. top: 50rpx;
  395. right: 0rpx;
  396. width: 148rpx;
  397. height: 60rpx;
  398. background: $bgColor;
  399. border-radius: 30rpx;
  400. border: 2rpx solid #D0D0D0;
  401. @include flexlayout();
  402. text {
  403. font-size: 26rpx;
  404. font-family: PingFang-SC-Medium, PingFang-SC;
  405. font-weight: 500;
  406. color: #D0D0D0;
  407. }
  408. }
  409. .instantBtn {
  410. position: absolute;
  411. top: 50rpx;
  412. right: 0rpx;
  413. width: 148rpx;
  414. height: 60rpx;
  415. background: $bgColor;
  416. border-radius: 30rpx;
  417. border: 2rpx solid #FF6200;
  418. @include flexlayout();
  419. text {
  420. font-size: 26rpx;
  421. font-family: PingFang-SC-Medium, PingFang-SC;
  422. color: #FF6200;
  423. }
  424. }
  425. .content {
  426. text {
  427. font-size: 28rpx;
  428. font-family: PingFang-SC-Medium, PingFang-SC;
  429. font-weight: 500;
  430. color: #333333;
  431. }
  432. }
  433. }
  434. .ListItem:last-child {
  435. width: 690rpx;
  436. height: 160rpx;
  437. border-bottom: #F0F0F0 solid 0rpx;
  438. position: relative;
  439. padding-top: 35rpx;
  440. box-sizing: border-box;
  441. .title {
  442. margin-bottom: 10rpx;
  443. text {
  444. font-size: 32rpx;
  445. font-family: PingFang-SC-Bold, PingFang-SC;
  446. font-weight: bold;
  447. color: #333333;
  448. }
  449. }
  450. .data {
  451. text {
  452. font-size: 26rpx;
  453. font-family: PingFang-SC-Medium, PingFang-SC;
  454. color: #999999;
  455. }
  456. }
  457. .alreadyBtn {
  458. position: absolute;
  459. top: 50rpx;
  460. right: 0rpx;
  461. width: 148rpx;
  462. height: 60rpx;
  463. background: $bgColor;
  464. border-radius: 30rpx;
  465. border: 2rpx solid #D0D0D0;
  466. @include flexlayout();
  467. text {
  468. font-size: 26rpx;
  469. font-family: PingFang-SC-Medium, PingFang-SC;
  470. font-weight: 500;
  471. color: #D0D0D0;
  472. }
  473. }
  474. .instantBtn {
  475. position: absolute;
  476. top: 50rpx;
  477. right: 0rpx;
  478. width: 148rpx;
  479. height: 60rpx;
  480. background: $bgColor;
  481. border-radius: 30rpx;
  482. border: 2rpx solid #FF6200;
  483. @include flexlayout();
  484. text {
  485. font-size: 26rpx;
  486. font-family: PingFang-SC-Medium, PingFang-SC;
  487. font-weight: 500;
  488. color: #FF6200;
  489. }
  490. }
  491. .content {
  492. text {
  493. font-size: 28rpx;
  494. font-family: PingFang-SC-Medium, PingFang-SC;
  495. font-weight: 500;
  496. color: #333333;
  497. }
  498. }
  499. }
  500. }
  501. </style>