Winning.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. <template>
  2. <view class="">
  3. <uni-popup ref="WinningRef" :maskClick="false" maskBg="rgba(0, 0, 0,.7)">
  4. <view class="winning-box" :style="{height:showBtn ? '720rpx' : '644rpx'}" v-if="prizeInfo">
  5. <view class="close-winning-icon" @click.stop="onClose()">
  6. <image src="@/static/Lottery/close.png" mode="aspectFit"></image>
  7. </view>
  8. <view class="winning-title">
  9. <template v-if="prizeInfo.prizeGrade === 20">
  10. <image class="regret" src="@/static/Lottery/regret.png" mode="aspectFit"></image>
  11. </template>
  12. <template v-else>
  13. <image class="success" src="@/static/Lottery/Winning-title.png" mode="aspectFit"></image>
  14. </template>
  15. </view>
  16. <view class="winning-level">
  17. {{prizeInfo.prizeChinese}}
  18. </view>
  19. <view class="winning-img">
  20. <image :src="prizeInfo.imageUrl" mode="aspectFit"></image>
  21. </view>
  22. <view class="winning-btn">
  23. <text @click.stop="onClose()">知道了</text>
  24. <text v-if="showBtn" @click.stop="setAwardInformation()">填写领奖信息</text>
  25. </view>
  26. </view>
  27. </uni-popup>
  28. </view>
  29. </template>
  30. <script>
  31. export default {
  32. props: {
  33. activityJoinRecordId: {
  34. type: Number,
  35. default: null
  36. }
  37. },
  38. data() {
  39. return {
  40. prizeInfo: null,
  41. showBtn: false
  42. }
  43. },
  44. created() {
  45. // console.log('111')
  46. },
  47. mounted() {
  48. // this.onWinning()
  49. // this.$refs.WinningRef.open()
  50. },
  51. methods: {
  52. onWinning(prizeVal) {
  53. this.prizeInfo = prizeVal;
  54. this.$refs.WinningRef.open();
  55. this.showBtn = [3, 4].includes(prizeVal.prizeType);
  56. },
  57. onClose() {
  58. this.$refs.WinningRef.close();
  59. },
  60. setAwardInformation(item) {
  61. this.onClose()
  62. uni.navigateTo({
  63. url: `/pages/game/award-information?activityJoinRecordId=${this.activityJoinRecordId}&prizeType=${this.prizeInfo.prizeType}`
  64. })
  65. }
  66. }
  67. }
  68. </script>
  69. <style lang="scss" scoped>
  70. .winning-box {
  71. width: 633rpx;
  72. // height: 644rpx;
  73. // height: 720rpx;
  74. padding: 94rpx 40rpx 0;
  75. background-color: #fff;
  76. display: flex;
  77. flex-direction: column;
  78. // justify-content: center;
  79. align-items: center;
  80. background: url("@/static/Lottery/Winning.png") no-repeat top center;
  81. background-size: 633rpx 720rpx;
  82. position: relative;
  83. .close-winning-icon {
  84. position: absolute;
  85. left: 50%;
  86. top: -65rpx;
  87. width: 65rpx;
  88. height: 65rpx;
  89. transform: translateX(-50%);
  90. image {
  91. width: 65rpx;
  92. height: 65rpx;
  93. }
  94. }
  95. .winning-title {
  96. width: 302rpx;
  97. height: 80rpx;
  98. display: flex;
  99. flex-direction: row;
  100. justify-content: center;
  101. .success {
  102. width: 302rpx;
  103. height: 80rpx;
  104. }
  105. .regret{
  106. width: 188rpx;
  107. height: 80rpx;
  108. }
  109. }
  110. .winning-level {
  111. width: 334rpx;
  112. height: 50rpx;
  113. background: linear-gradient(90deg, rgba(222, 28, 64, 0.00) 11%, #b10424 48%, rgba(222, 28, 64, 0.00) 89%);
  114. text-align: center;
  115. font-size: 38rpx;
  116. // font-family: .PingFang SC, .PingFang SC-Light;
  117. font-weight: 300;
  118. color: #ffffff;
  119. line-height: 50rpx;
  120. letter-spacing: 5.32rpx;
  121. margin: 10rpx 0 20rpx;
  122. }
  123. .winning-img {
  124. width: 188rpx;
  125. height: 188rpx;
  126. image {
  127. width: 100%;
  128. height: 100%;
  129. }
  130. }
  131. .winning-btn {
  132. width: 345rpx;
  133. // padding-top: 36rpx;
  134. margin: 36rpx auto;
  135. text {
  136. display: block;
  137. width: 345rpx;
  138. height: 60rpx;
  139. background: linear-gradient(180deg, #f7dea4, #d8a759);
  140. border-radius: 30rpx;
  141. margin-bottom: 15rpx;
  142. font-size: 28rpx;
  143. font-weight: 400;
  144. text-align: center;
  145. color: #721202;
  146. line-height: 60rpx;
  147. }
  148. }
  149. // .winning-title {
  150. // padding: 20rpx;
  151. // font-weight: 600;
  152. // font-size: 32rpx;
  153. // }
  154. // .winning-level {
  155. // padding-bottom: 30rpx;
  156. // }
  157. // .winning-img {
  158. // width: 300rpx;
  159. // height: 300rpx;
  160. // image {
  161. // width: 100%;
  162. // height: 100%;
  163. // }
  164. // }
  165. // .winning-name {
  166. // padding: 30rpx;
  167. // }
  168. // .winning-btn {
  169. // width: 100%;
  170. // display: flex;
  171. // flex-direction: column;
  172. // justify-content: center;
  173. // align-items: center;
  174. // text {
  175. // width: 70%;
  176. // height: 60rpx;
  177. // text-align: center;
  178. // line-height: 60rpx;
  179. // margin-bottom: 40rpx;
  180. // }
  181. // }
  182. }
  183. </style>