index.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. <template>
  2. <view>
  3. <u-navbar title="选择奖品" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
  4. <view class="choice">
  5. <view class="choice-title" v-if="!tipShow">恭喜你获得</view>
  6. <view class="choice-all" v-if="total > 1 && !tipShow">以下奖品任选其一</view>
  7. <view class="flex choice-list">
  8. <view class="choice-list-item" v-for="(item, index) in prizeList" :key="index"
  9. @click="selectPrize(item, index)">
  10. <view
  11. :class="{'item-info action': actionIndex == index, 'item-info confirm': actionIndex != index, 'item-info null': item.remainQty == 0}">
  12. <view class="flex info-image">
  13. <image :src="item.picUrl" mode="aspectFill"></image>
  14. </view>
  15. <view class="title" v-if="item.prizeType && item.prizeType.value != 'coin'">{{ item.title }}
  16. </view>
  17. <view class="title" v-else>盲豆x {{ item.value }}</view>
  18. <view class="tip" v-if="item.remainQty == 0">已兑完</view>
  19. <view class="flex action-icon" v-if="actionIndex == index">
  20. <u-icon name="checkmark" color="#fff" size="24"></u-icon>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. <!-- <view class="flex btn">
  26. <view class="confirm" @click="confirmPrize" v-if="!tipShow">确认</view>
  27. </view> -->
  28. </view>
  29. <view class="footer-fixed" v-if="!tipShow">
  30. <view class="flex btn">
  31. <button type="default" @click="confirmPrize">确认</button>
  32. </view>
  33. </view>
  34. <u-popup :show="tipShow" :round="10" mode="center" :safeAreaInsetBottom="false">
  35. <view class="null-prize">
  36. <view class="title">该盲票已被他人买走了</view>
  37. <navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator>
  38. </view>
  39. </u-popup>
  40. <u-popup :show="comfirmShow" :round="10" mode="center" :safeAreaInsetBottom="false">
  41. <view class="confirm-prize">
  42. <view class="flex confirm-prize-info">
  43. <image :src="actionInfo.picUrl" mode="aspectFill"></image>
  44. <view class="title" v-if="actionInfo.prizeType && actionInfo.prizeType.value != 'coin'">
  45. {{ actionInfo.title }}
  46. </view>
  47. <view class="title" v-else>盲豆x {{ actionInfo.value }}</view>
  48. </view>
  49. <view class="confirm-prize-tip" v-if="actionInfo.prizeType && actionInfo.prizeType.value != 'coin'">
  50. 已放入我的奖品库<text @click="toPrize">前往查看</text></view>
  51. <view class="confirm-prize-tip" v-else>已放入“我的盲豆”<text @click="toPrize">前往查看</text></view>
  52. <view class="flex confirm-prize-btn">
  53. <view class="back" @click="back">返回</view>
  54. <view class="confirm" @click="again">再来一张</view>
  55. </view>
  56. </view>
  57. </u-popup>
  58. </view>
  59. </template>
  60. <script>
  61. import env from '../../config/env.js'
  62. import $http from '@/utils/request.js'
  63. export default {
  64. data() {
  65. return {
  66. ticketId: '',
  67. prizeList: [],
  68. total: 0,
  69. actionIndex: 0,
  70. tipShow: false,
  71. comfirmShow: false,
  72. actionInfo: {},
  73. type: ''
  74. };
  75. },
  76. onLoad(options) {
  77. this.ticketId = options.id
  78. this.type = options.type
  79. },
  80. onShow() {
  81. this.getPrizeList()
  82. },
  83. methods: {
  84. getPrizeList() {
  85. uni.showLoading({
  86. title: '加载中'
  87. });
  88. let data = {
  89. ticketId: this.ticketId
  90. }
  91. $http.post('/api/v1/mp/user/ticket/queryHitPrizeList', data).then(res => {
  92. uni.hideLoading();
  93. if (res.code == 0) {
  94. res.data.prizeList.forEach(item => {
  95. let picUrlArr = item.picUrl.split(',')
  96. item.picUrl = env.filePublic + picUrlArr[0]
  97. item.prizeType = JSON.parse(item.prizeType)
  98. })
  99. this.prizeList = res.data.prizeList
  100. this.ticketId = res.data.ticketId
  101. this.total = this.prizeList.length
  102. } else if (res.code == 1018) {
  103. this.tipShow = true
  104. } else {
  105. this.tipShow = true
  106. }
  107. }).catch(() => {
  108. uni.hideLoading();
  109. })
  110. },
  111. selectPrize(item, index) {
  112. if (item.remainQty == 0) {
  113. uni.$u.toast('该奖品已兑完!');
  114. return
  115. }
  116. this.actionIndex = index
  117. },
  118. confirmPrize() {
  119. let _this = this
  120. let item = _this.prizeList[_this.actionIndex]
  121. _this.actionInfo = item
  122. if (_this.prizeList.length > 1) {
  123. uni.showModal({
  124. title: '提示',
  125. content: '确定选择该奖品吗?',
  126. success(res) {
  127. if (res.confirm) {
  128. $http.post('/api/v1/mp/user/ticket/cashPrize', {
  129. ticketId: _this.ticketId,
  130. awardsId: item.awardsId,
  131. prizeId: item.prizeId
  132. }).then(res => {
  133. if (res.code == 0) {
  134. _this.comfirmShow = true
  135. }
  136. })
  137. }
  138. }
  139. })
  140. } else {
  141. $http.post('/api/v1/mp/user/ticket/cashPrize', {
  142. ticketId: _this.ticketId,
  143. awardsId: item.awardsId,
  144. prizeId: item.prizeId
  145. }).then(res => {
  146. if (res.code == 0) {
  147. _this.comfirmShow = true
  148. }
  149. })
  150. }
  151. },
  152. toIndex() {
  153. uni.switchTab({
  154. url: '/pages/index/index'
  155. })
  156. },
  157. back() {
  158. let pages = getCurrentPages();
  159. if (pages.length > 1) {
  160. uni.navigateBack({
  161. delta: 1
  162. })
  163. } else {
  164. uni.switchTab({
  165. url: '/pages/core/index'
  166. })
  167. }
  168. },
  169. toPrize() {
  170. uni.switchTab({
  171. url: '/pages/user/index'
  172. })
  173. },
  174. again() {
  175. let _this = this
  176. if (_this.type == 'onLine') {
  177. uni.navigateBack({
  178. delta: 1
  179. })
  180. } else if (_this.type == 'offLine') {
  181. uni.scanCode({
  182. scanType: ['qrCode'],
  183. success(res) {
  184. const url = res.result
  185. let serialNo = url.substring(url.length - 21, url.length)
  186. uni.redirectTo({
  187. url: `/pages/lucky/index?id=${ serialNo }&type=offLine`
  188. })
  189. },
  190. fail(){
  191. uni.$u.toast('请扫二维码');
  192. }
  193. });
  194. } else {
  195. _this.toIndex()
  196. }
  197. },
  198. }
  199. }
  200. </script>
  201. <style lang="scss" scoped>
  202. .choice {
  203. width: 100%;
  204. min-height: calc(100vh - 44px - var(--status-bar-height));
  205. background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/background.png) center center;
  206. padding-bottom: 150rpx;
  207. &-title {
  208. padding-top: 100rpx;
  209. font-size: 56rpx;
  210. font-weight: bold;
  211. text-align: center;
  212. line-height: 84rpx;
  213. margin-bottom: 12rpx;
  214. }
  215. &-all {
  216. text-align: center;
  217. line-height: 40rpx;
  218. }
  219. &-list {
  220. justify-content: space-around;
  221. flex-wrap: wrap;
  222. padding: 60rpx;
  223. &-item {
  224. position: relative;
  225. width: 43%;
  226. height: 440rpx;
  227. margin-bottom: 40rpx;
  228. background-color: #FFFFFF;
  229. border-radius: 10rpx;
  230. .item-info {
  231. height: 100%;
  232. display: flex;
  233. flex-direction: column;
  234. align-items: center;
  235. border: 2px solid #FFFFFF;
  236. border-radius: 10rpx;
  237. }
  238. .confirm {
  239. background: none;
  240. box-shadow: none;
  241. }
  242. .action-icon {
  243. position: absolute;
  244. bottom: -15rpx;
  245. right: -15rpx;
  246. width: 82rpx;
  247. height: 82rpx;
  248. line-height: 82rpx;
  249. background-color: rgba(236, 122, 61, 100);
  250. text-align: center;
  251. box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.4);
  252. border-radius: 50%;
  253. }
  254. .action {
  255. box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  256. border: 2px solid rgba(236, 122, 61, 100);
  257. }
  258. .null {
  259. box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  260. border: 2px solid rgba(187, 187, 187, 54);
  261. }
  262. .info-image {
  263. width: 100%;
  264. min-height: 75%;
  265. background-color: #F8F8F8;
  266. border-top-left-radius: 10rpx;
  267. border-top-right-radius: 10rpx;
  268. }
  269. image {
  270. width: 100%;
  271. height: 80%;
  272. }
  273. .title {
  274. width: 100%;
  275. font-size: 24rpx;
  276. margin: 16rpx 0 0 10rpx;
  277. color: #333;
  278. }
  279. .tip {
  280. margin: 16rpx 0 0 10rpx;
  281. font-size: 24rpx;
  282. color: red;
  283. }
  284. }
  285. }
  286. .btn {
  287. margin-top: 200rpx;
  288. .confirm {
  289. width: 400rpx;
  290. height: 80rpx;
  291. font-size: 36rpx;
  292. line-height: 80rpx;
  293. border-radius: 20rpx;
  294. background-color: rgba(235, 112, 9, 100);
  295. color: rgba(255, 255, 255, 100);
  296. text-align: center;
  297. }
  298. }
  299. }
  300. .footer-fixed {
  301. position: fixed;
  302. bottom: var(--window-bottom);
  303. left: 0;
  304. right: 0;
  305. z-index: 11;
  306. box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
  307. background: #fff;
  308. // 设置ios刘海屏底部横线安全区域
  309. padding-bottom: constant(safe-area-inset-bottom);
  310. padding-bottom: env(safe-area-inset-bottom);
  311. .btn {
  312. padding: 20rpx 0;
  313. /deep/ button {
  314. width: 640rpx;
  315. height: 90rpx;
  316. line-height: 90rpx;
  317. font-size: 36rpx;
  318. color: #fff;
  319. background-color: $uni-bg-color;
  320. border: none;
  321. border-radius: 20rpx;
  322. }
  323. }
  324. }
  325. .null-prize {
  326. display: flex;
  327. flex-direction: column;
  328. align-items: center;
  329. justify-content: center;
  330. width: 80vw;
  331. height: 320rpx;
  332. background-color: #FFFFFF;
  333. border: 1px solid rgba(187, 187, 187, 100);
  334. .btn {
  335. margin-top: 60rpx;
  336. width: 160rpx;
  337. height: 60rpx;
  338. line-height: 60rpx;
  339. border-radius: 8rpx;
  340. background-color: rgba(235, 112, 9, 100);
  341. color: rgba(255, 255, 255, 100);
  342. font-size: 28rpx;
  343. text-align: center;
  344. }
  345. }
  346. .confirm-prize {
  347. display: flex;
  348. flex-direction: column;
  349. align-items: center;
  350. justify-content: center;
  351. width: 80vw;
  352. padding: 40rpx 0;
  353. &-info {
  354. width: 80%;
  355. margin-bottom: 60rpx;
  356. justify-content: space-around;
  357. image {
  358. width: 150rpx;
  359. height: 200rpx;
  360. }
  361. .title {
  362. flex: 1;
  363. padding-left: 40rpx;
  364. }
  365. }
  366. &-tip {
  367. text-align: center;
  368. margin-bottom: 60rpx;
  369. text {
  370. padding-left: 24rpx;
  371. color: rgba(32, 163, 242, 100);
  372. }
  373. }
  374. &-btn {
  375. width: 80%;
  376. justify-content: space-around;
  377. .back {
  378. width: 160rpx;
  379. height: 60rpx;
  380. line-height: 60rpx;
  381. border-radius: 8rpx;
  382. color: rgba(235, 112, 9, 100);
  383. font-size: 28rpx;
  384. text-align: center;
  385. font-family: Microsoft Yahei;
  386. border: 1px solid rgba(235, 112, 9, 100);
  387. }
  388. .confirm {
  389. width: 160rpx;
  390. height: 60rpx;
  391. line-height: 60rpx;
  392. border-radius: 8rpx;
  393. background-color: rgba(235, 112, 9, 100);
  394. color: rgba(253, 253, 253, 100);
  395. font-size: 28rpx;
  396. text-align: center;
  397. }
  398. }
  399. }
  400. </style>