prize.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  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. <view style="margin-bottom: 60rpx; ">
  14. <!-- 实物奖品 -->
  15. <view class="prizeList" :style="{'--height':ListHeight+'rpx'}" v-if="isActive == 0">
  16. <view class="ListItem" v-for="(item,index) in PhysicalPrizes" :key="index">
  17. <view class="title"><text>{{item.name}}</text></view>
  18. <view class='data'><text>{{item.created_at}}</text></view>
  19. <view class="alreadyBtn" v-if="false">
  20. <text>已兑换</text>
  21. </view>
  22. <view class="instantBtn" @click="goExchangePhy(item.id)">
  23. <text>立即兑换</text>
  24. </view>
  25. </view>
  26. </view>
  27. <!-- 线下奖品 -->
  28. <view class="prizeList" :style="{'--height':ListHeight+'rpx'}" v-if="isActive == 1">
  29. <view class="ListItem" v-for="(item,index) in VirtualPrizes" :key="index">
  30. <view class="title"><text>{{item.name}}</text></view>
  31. <view class='data'><text>{{item.created_at}}</text></view>
  32. <view class="alreadyBtn" v-if="false">
  33. <text>已兑换</text>
  34. </view>
  35. <view class="instantBtn" @click="goExchangeVir(item.id)">
  36. <text>立即兑换</text>
  37. </view>
  38. </view>
  39. </view>
  40. <!-- 中奖记录 -->
  41. <view class="prizeList" :style="{'--height':ListHeight+'rpx'}" v-if="isActive == 2">
  42. <view class="ListItem" v-for="(item,index) in prizeRecord" :key="index">
  43. <view style="display: flex; justify-content: space-between;">
  44. <view class="title"><text>{{item.name}}</text> </view>
  45. <view class='data'><text>{{item.created_at}}</text></view>
  46. </view>
  47. <view class="content"><text>{{item.remark||'无'}}</text></view>
  48. </view>
  49. </view>
  50. </view>
  51. <!-- 已经到底啦 -->
  52. <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
  53. </view>
  54. </template>
  55. <script>
  56. export default {
  57. data() {
  58. return {
  59. // 分段器标题
  60. items: ['实物奖品', '虚拟奖品', '中奖记录'],
  61. isActive: 0,
  62. // 列表高度
  63. ListHeight: 800,
  64. // 组件uni-load-more
  65. status: 'noMore',
  66. contentText: {
  67. contentdown: '查看更多',
  68. contentrefresh: '加载中',
  69. contentnomore: '—— 已经到底啦 ——'
  70. },
  71. // 实物奖品列表
  72. PhysicalPrizes:[],
  73. // 虚拟奖品列表
  74. VirtualPrizes:[],
  75. // 中奖记录
  76. prizeRecord:[]
  77. }
  78. },
  79. onLoad() {
  80. // 中奖记录
  81. this.getPrizeRecord()
  82. //实物奖品
  83. this.getPrizeList(0)
  84. //虚拟奖品
  85. this.getPrizeList(1)
  86. },
  87. methods: {
  88. // 获取奖品列表
  89. getPrizeList(type){
  90. this.$api.lottery.getDrawRecord({
  91. is_virtual:type,
  92. page:1
  93. }).then(res=>{
  94. //实物奖品
  95. if(type == 0){
  96. this.PhysicalPrizes = res.data.data
  97. }else{
  98. this.VirtualPrizes = res.data.data
  99. }
  100. })
  101. },
  102. // 获取中奖记录
  103. getPrizeRecord(){
  104. this.$api.lottery.getDrawRecord({
  105. page:0
  106. }).then(res=>{
  107. console.log(res,"中奖记录")
  108. if(res.code==0){
  109. this.prizeRecord=res.data.data
  110. }
  111. })
  112. },
  113. //分段器标题切换
  114. checked(index) {
  115. this.isActive = index
  116. },
  117. // 实物立即兑换
  118. goExchangePhy(id) {
  119. uni.navigateTo({
  120. url: '/pages/my/prize/exchangePrize?id='+id
  121. })
  122. },
  123. // 虚拟立即兑换
  124. goExchangeVir(id) {
  125. uni.navigateTo({
  126. url: '/pages/my/prize/exchangePrize?id='+id
  127. })
  128. },
  129. },
  130. }
  131. </script>
  132. <style lang="scss" scoped>
  133. $pageColor:#F9F9F9;
  134. $bgColor:#FFFFFF;
  135. @mixin flexlayout {
  136. display: flex;
  137. align-items: center;
  138. justify-content: center;
  139. }
  140. .prize {
  141. height: 100%;
  142. background: $pageColor;
  143. }
  144. .segmented {
  145. width: 750rpx;
  146. height: 112rpx;
  147. background: $bgColor;
  148. box-shadow: 0px 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
  149. border-radius: 0rpx 0rpx 16rpx 16rpx;
  150. margin-bottom: 24rpx;
  151. padding:0rpx 30rpx;
  152. box-sizing: border-box;
  153. //菜单切换
  154. .tab_nav {
  155. width: 690rpx;
  156. display: flex;
  157. justify-content: space-between;
  158. align-items: center;
  159. font-family: PingFang-SC-Heavy, PingFang-SC;
  160. }
  161. .tab_nav .navTitle {
  162. margin-top: 20rpx;
  163. width: 128rpx;
  164. flex: none;
  165. height: 28rpx;
  166. font-size: 32rpx;
  167. color: #666;
  168. position: relative;
  169. }
  170. .active {
  171. color: #D9A94D;
  172. font-weight: bold;
  173. &::after {
  174. display: inline-block;
  175. content: '';
  176. width: 48rpx;
  177. height: 12rpx;
  178. background: linear-gradient(90deg, #F3D69F 0%, #D9A94D 100%);
  179. border-radius: 6px;
  180. position: absolute;
  181. bottom: -35rpx;
  182. left: 40rpx;
  183. }
  184. }
  185. }
  186. ::v-deep .segmented-control__text {
  187. font-size: 32rpx !important;
  188. font-family: PingFang-SC-Heavy, PingFang-SC;
  189. font-weight: 500 !important;
  190. }
  191. ::v-deep .segmented-control__item--text {
  192. font-size: 32rpx;
  193. font-family: PingFang-SC-Heavy, PingFang-SC;
  194. font-weight: 800 !important;
  195. padding: 10rpx 0 !important;
  196. border-radius: 4rpx !important;
  197. }
  198. .prizeList {
  199. width: 750rpx;
  200. // height: var(--height);
  201. background: $bgColor;
  202. box-shadow: 0px 4rpx 24rpx -10rpx rgba(101, 95, 90, 0.3);
  203. border-radius: 12rpx;
  204. padding: 0rpx 28rpx 0 32rpx;
  205. box-sizing: border-box;
  206. .ListItem {
  207. width: 690rpx;
  208. height: 160rpx;
  209. border-bottom: #F0F0F0 solid 0.5rpx;
  210. position: relative;
  211. padding-top: 35rpx;
  212. box-sizing: border-box;
  213. .title {
  214. margin-bottom: 5rpx;
  215. text {
  216. font-size: 32rpx;
  217. font-family: PingFang-SC-Bold, PingFang-SC;
  218. font-weight: bold;
  219. color: #333333;
  220. }
  221. }
  222. .data {
  223. text {
  224. font-size: 26rpx;
  225. font-family: PingFang-SC-Medium, PingFang-SC;
  226. font-weight: 500;
  227. color: #999999;
  228. }
  229. }
  230. .alreadyBtn {
  231. position: absolute;
  232. top: 50rpx;
  233. right: 0rpx;
  234. width: 148rpx;
  235. height: 60rpx;
  236. background: $bgColor;
  237. border-radius: 30rpx;
  238. border: 2rpx solid #D0D0D0;
  239. @include flexlayout();
  240. text {
  241. font-size: 26rpx;
  242. font-family: PingFang-SC-Medium, PingFang-SC;
  243. font-weight: 500;
  244. color: #D0D0D0;
  245. }
  246. }
  247. .instantBtn {
  248. position: absolute;
  249. top: 50rpx;
  250. right: 0rpx;
  251. width: 148rpx;
  252. height: 60rpx;
  253. background: $bgColor;
  254. border-radius: 30rpx;
  255. border: 2rpx solid #FF6200;
  256. @include flexlayout();
  257. text {
  258. font-size: 26rpx;
  259. font-family: PingFang-SC-Medium, PingFang-SC;
  260. color: #FF6200;
  261. }
  262. }
  263. .content {
  264. text {
  265. font-size: 28rpx;
  266. font-family: PingFang-SC-Medium, PingFang-SC;
  267. font-weight: 500;
  268. color: #333333;
  269. }
  270. }
  271. }
  272. .ListItem:last-child {
  273. width: 690rpx;
  274. height: 160rpx;
  275. border-bottom: #F0F0F0 solid 0rpx;
  276. position: relative;
  277. padding-top: 35rpx;
  278. box-sizing: border-box;
  279. .title {
  280. margin-bottom: 10rpx;
  281. text {
  282. font-size: 32rpx;
  283. font-family: PingFang-SC-Bold, PingFang-SC;
  284. font-weight: bold;
  285. color: #333333;
  286. }
  287. }
  288. .data {
  289. text {
  290. font-size: 26rpx;
  291. font-family: PingFang-SC-Medium, PingFang-SC;
  292. color: #999999;
  293. }
  294. }
  295. .alreadyBtn {
  296. position: absolute;
  297. top: 50rpx;
  298. right: 0rpx;
  299. width: 148rpx;
  300. height: 60rpx;
  301. background: $bgColor;
  302. border-radius: 30rpx;
  303. border: 2rpx solid #D0D0D0;
  304. @include flexlayout();
  305. text {
  306. font-size: 26rpx;
  307. font-family: PingFang-SC-Medium, PingFang-SC;
  308. font-weight: 500;
  309. color: #D0D0D0;
  310. }
  311. }
  312. .instantBtn {
  313. position: absolute;
  314. top: 50rpx;
  315. right: 0rpx;
  316. width: 148rpx;
  317. height: 60rpx;
  318. background: $bgColor;
  319. border-radius: 30rpx;
  320. border: 2rpx solid #FF6200;
  321. @include flexlayout();
  322. text {
  323. font-size: 26rpx;
  324. font-family: PingFang-SC-Medium, PingFang-SC;
  325. font-weight: 500;
  326. color: #FF6200;
  327. }
  328. }
  329. .content {
  330. text {
  331. font-size: 28rpx;
  332. font-family: PingFang-SC-Medium, PingFang-SC;
  333. font-weight: 500;
  334. color: #333333;
  335. }
  336. }
  337. }
  338. }
  339. </style>