index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618
  1. <template>
  2. <view>
  3. <u-navbar leftIconSize="0" title="盲票详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
  4. <view class="detail">
  5. <view class="detail-top">
  6. <u-swiper :list="picUrlArr" height="375" imgMode="aspectFit" bgColor="#fff" radius="0" :indicator="true"
  7. :circular="true"></u-swiper>
  8. </view>
  9. <view class="flex detail-info">
  10. <view class="detail-info__left">
  11. <text class="title">{{ boxInfo.title }}</text>
  12. <view class="flex num">
  13. <u-icon name="gift" size="25" color="#EB7009"></u-icon>
  14. <text>100%抽中,奖品多多</text>
  15. </view>
  16. <view class="tip">图片仅供参考,请以实物为准</view>
  17. </view>
  18. <view class="detail-info__right">
  19. <text class="money">¥{{ $numberFormat(boxInfo.salePrice) }}</text>
  20. <text>销量 {{ boxInfo.saleQty }}</text>
  21. </view>
  22. </view>
  23. <view class="detail-goods">
  24. <view class="detail-goods-title">可获得奖品</view>
  25. <view class="detail-goods-list">
  26. <!-- <navigator :url="`/pages/prizeGoods/detail?id=${ item.prizeId }`" class="detail-goods-list-item"
  27. hover-class="navigator-hover" v-for="(item, index) in prizeList" :key="index"> -->
  28. <view class="detail-goods-list-item" v-for="(item, index) in prizeList" :key="index">
  29. <view class="detail-goods-list-item__value">
  30. <view class="flex image-wrap">
  31. <image :src="item.picUrl" mode="scaleToFill"></image>
  32. </view>
  33. <view class="info">
  34. <text class="title">{{ item.title }}</text>
  35. <text class="num"
  36. v-if="item.prizeType != 'coin'">价值:¥{{ $numberFormat(item.value) }}</text>
  37. <text class="num" v-else>数量:{{ item.value }}个</text>
  38. <text class="num">概率:{{ item.hitRate }}%</text>
  39. </view>
  40. <view class="name">{{ item.name }}</view>
  41. </view>
  42. </view>
  43. <!-- </navigator> -->
  44. </view>
  45. </view>
  46. </view>
  47. <u-overlay :show="luckyShow" :opacity="0.8" zIndex="100">
  48. <view class="flex luck-warp" @touchmove.prevent.stop>
  49. <view class="luck-info">
  50. <view class="flex luck-info-image">
  51. <image class="image1" src="../../static/icon/lucky_bg.png" mode="" v-if="info.status == 1">
  52. </image>
  53. <image class="image2" src="../../static/icon/lucky_bg2.png" mode="" v-else></image>
  54. </view>
  55. <view
  56. :class="{ 'flex luck-info-content mat': info.status == 1, 'flex luck-info-content mat2': info.status != 1 }">
  57. <view class="title">幸运数字</view>
  58. <view class="name">{{ info.title }}</view>
  59. <view class="num">盲票序列号:{{ info.serialNo }}</view>
  60. </view>
  61. <view class="flex luck-info-tip" v-if="info.status == 2">
  62. <view class="tip">请刮开纸质票面的数字,与此幸运数字相同的就是所中奖项</view>
  63. </view>
  64. <view class="flex luck-info-btn">
  65. <view class="btn" @click="pay" v-if="info.status == 1">支付{{ info.salePrice / 100 }}元 立即查看</view>
  66. <view class="btn" @click="scanCode" v-else>扫码兑奖</view>
  67. </view>
  68. <view class="flex luck-info-num" v-if="info.status == 2">{{ info.plainLuckyNum }}</view>
  69. <view class="flex luck-info-close">
  70. <navigator open-type="exit" target="miniProgram" hover-class="none" class="flex">
  71. <u-icon name="close" color="#333" size="20"></u-icon>
  72. </navigator>
  73. </view>
  74. </view>
  75. </view>
  76. </u-overlay>
  77. <pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="getDetailInfo" v-if="payShow" />
  78. <u-popup :show="showNull" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
  79. @touchmove.prevent.stop>
  80. <view class="null-prize">
  81. <view class="title">该盲票已兑奖</view>
  82. <navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator>
  83. </view>
  84. </u-popup>
  85. <u-popup :show="showAction" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
  86. @touchmove.prevent.stop>
  87. <view class="null-prize">
  88. <view class="title">该盲票未激活</view>
  89. <navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator>
  90. </view>
  91. </u-popup>
  92. <hch-poster ref="hchPoster" :posterData.sync="posterData" />
  93. </view>
  94. </template>
  95. <script>
  96. import env from '../../config/env.js'
  97. import $http from '@/utils/request.js'
  98. import PayPopup from '../../components/pay-popup/pay-popup.vue'
  99. import HchPoster from "../../components/hch-poster/hch-poster.vue"
  100. export default {
  101. components: {
  102. PayPopup,
  103. HchPoster
  104. },
  105. data() {
  106. return {
  107. serialNo: '',
  108. info: '',
  109. payInfo: {},
  110. payShow: false,
  111. payLookFlag: true,
  112. showNull: false,
  113. posterData: {},
  114. luckyShow: true,
  115. status: 2,
  116. boxId: '',
  117. picUrlArr: [],
  118. boxInfo: {},
  119. prizeList: [],
  120. showAction: false,
  121. };
  122. },
  123. onLoad(options) {
  124. if (options.id) {
  125. this.serialNo = options.id
  126. }
  127. if (options.q) {
  128. let url = JSON.stringify(options.q)
  129. this.serialNo = url.substring(url.length - 22, url.length - 1)
  130. }
  131. },
  132. onShow() {
  133. if (this.serialNo && this.payLookFlag) {
  134. this.getDetail()
  135. }
  136. },
  137. methods: {
  138. scanCode() {
  139. let _this = this
  140. uni.scanCode({
  141. scanType: ['qrCode'],
  142. success(res) {
  143. let url = res.result
  144. _this.serialNo = url.substring(url.length - 21, url.length)
  145. _this.getDetail()
  146. },
  147. fail() {
  148. uni.$u.toast('请扫二维码');
  149. }
  150. });
  151. },
  152. getDetail() {
  153. uni.showLoading({
  154. title: '加载中'
  155. });
  156. $http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
  157. serialNo: this.serialNo,
  158. noToken: true
  159. }).then(res => {
  160. uni.hideLoading();
  161. if (res.code == 0) {
  162. this.getBoxDetail(res.data.boxId)
  163. if (res.data.status == 1) {
  164. this.info = res.data
  165. } else if (res.data.status == 2) {
  166. this.info = res.data
  167. if (uni.getStorageSync('token')) {
  168. uni.redirectTo({
  169. url: `/pages/choice/index?id=${ res.data.ticketId }&type=offLine`
  170. })
  171. } else {
  172. uni.showModal({
  173. title: '提示',
  174. content: '您未登录或登录失效!',
  175. confirmText: '去登录',
  176. showCancel: false,
  177. success(res) {
  178. if (res.confirm) {
  179. uni.navigateTo({
  180. url: "/pages/login/index"
  181. })
  182. }
  183. }
  184. })
  185. }
  186. } else {
  187. this.showNull = true
  188. this.luckyShow = false
  189. }
  190. } else if (res.code == 1023) {
  191. this.showAction = true
  192. this.luckyShow = false
  193. } else {
  194. uni.$u.toast('该盲票不存在!');
  195. setTimeout(() => {
  196. uni.switchTab({
  197. url: '/pages/index/index'
  198. })
  199. }, 1000)
  200. }
  201. }).catch(() => {
  202. uni.hideLoading();
  203. })
  204. },
  205. getDetailInfo() {
  206. let _this = this
  207. _this.payShow = false
  208. uni.showLoading({
  209. title: '加载中'
  210. });
  211. $http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
  212. serialNo: _this.serialNo,
  213. noToken: true
  214. }).then(res => {
  215. uni.hideLoading();
  216. if (res.code == 0) {
  217. if (res.data.status == 2) {
  218. _this.info = res.data
  219. let num = res.data.plainLuckyNum
  220. } else {
  221. let num = 0
  222. let time = setInterval(() => {
  223. num++
  224. uni.showLoading({
  225. title: '加载中'
  226. });
  227. $http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
  228. serialNo: _this.serialNo,
  229. noToken: true
  230. }).then(ele => {
  231. if (ele.data.status == 2) {
  232. uni.hideLoading();
  233. clearInterval(time)
  234. _this.info = res.data
  235. let num = res.data.plainLuckyNum
  236. }
  237. })
  238. if (num == 10) {
  239. uni.hideLoading();
  240. clearInterval(time)
  241. }
  242. }, 1000)
  243. }
  244. }
  245. }).catch(() => {
  246. uni.hideLoading();
  247. })
  248. },
  249. getBoxDetail(id) {
  250. uni.showLoading({
  251. title: '加载中'
  252. });
  253. $http.post('/api/v1/mp/user/mall/ticket/detail', {
  254. boxId: id,
  255. noToken: true
  256. }).then(res => {
  257. uni.hideLoading();
  258. if (res.code == 0) {
  259. this.boxInfo = res.data
  260. let picUrlArr = res.data.picUrl.split(',')
  261. picUrlArr.forEach(item => {
  262. this.picUrlArr.push(env.filePublic + item + '?imageView2/2/w/750')
  263. })
  264. let prizeList = res.data.prizeList
  265. prizeList.forEach(item => {
  266. let picUrlArr = item.picUrl.split(',')
  267. item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
  268. })
  269. this.prizeList = prizeList
  270. }
  271. }).catch(() => {
  272. uni.hideLoading();
  273. })
  274. },
  275. close() {
  276. this.payShow = false
  277. },
  278. pay() {
  279. let data = {
  280. ticketId: this.info.ticketId,
  281. autoCoupon: 1,
  282. userCouponIds: [],
  283. orderNum: 1
  284. }
  285. this.payLookFlag = false
  286. uni.showLoading({
  287. title: '加载中'
  288. });
  289. $http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
  290. uni.hideLoading();
  291. if (res.code == 0) {
  292. let info = {
  293. ...res.data,
  294. ...this.info,
  295. picUrl: env.filePublic + res.data.picUrl,
  296. couponTitle: res.data && res.data.couponList && res.data.couponList.length && res
  297. .data.couponList[0].title,
  298. couponId: res.data && res.data.couponList && res.data.couponList.length && res.data
  299. .couponList[0].id,
  300. }
  301. this.payInfo = info
  302. this.payShow = true
  303. }
  304. }).catch(() => {
  305. uni.hideLoading();
  306. })
  307. },
  308. saveImg() {
  309. this.$refs.hchPoster.posterShow()
  310. },
  311. }
  312. }
  313. </script>
  314. <style lang="scss" scoped>
  315. .luck-warp {
  316. height: 100%;
  317. .luck-info {
  318. position: relative;
  319. width: 85%;
  320. border-radius: 40rpx;
  321. background-color: #fff;
  322. .luck-info-image {
  323. // margin-bottom: 30rpx;
  324. .image1 {
  325. width: 400rpx;
  326. height: 400rpx;
  327. margin-top: -200rpx;
  328. }
  329. .image2 {
  330. width: 700rpx;
  331. height: 700rpx;
  332. margin-top: -446rpx;
  333. // padding-bottom: 50rpx;
  334. }
  335. }
  336. .luck-info-tip {
  337. .tip {
  338. width: 460rpx;
  339. height: 100rpx;
  340. line-height: 50rpx;
  341. font-size: 24rpx;
  342. padding: 0 26rpx;
  343. color: #666666;
  344. text-align: center;
  345. border-radius: 10rpx;
  346. background: rgba(255, 109, 28, 0.2);
  347. }
  348. }
  349. .luck-info-content {
  350. flex-direction: column;
  351. .title {
  352. line-height: 68rpx;
  353. font-size: 48rpx;
  354. color: #FA6401;
  355. font-size: 60rpx;
  356. font-weight: bold;
  357. margin-bottom: 72rpx;
  358. }
  359. .name {
  360. font-size: 40rpx;
  361. line-height: 56rpx;
  362. margin-bottom: 20rpx;
  363. }
  364. .num {
  365. font-size: 32rpx;
  366. color: #666666;
  367. line-height: 44rpx;
  368. }
  369. }
  370. .mat {
  371. margin-bottom: 140rpx;
  372. }
  373. .mat2 {
  374. margin-bottom: 20rpx;
  375. }
  376. .luck-info-btn {
  377. margin-top: 20rpx;
  378. .btn {
  379. width: 530rpx;
  380. height: 100rpx;
  381. line-height: 100rpx;
  382. color: #FFFFFF;
  383. font-size: 48rpx;
  384. text-align: center;
  385. border-radius: 200rpx;
  386. background: linear-gradient(180deg, #FFB266 0%, #FFB266 0%, #FF843A 100%, #FF843A 100%);
  387. box-shadow: 0px 4px 10px 0px rgba(182, 85, 24, 0.6);
  388. margin-bottom: 72rpx;
  389. }
  390. }
  391. .luck-info-num {
  392. position: absolute;
  393. top: -280rpx;
  394. width: 100%;
  395. font-size: 260rpx;
  396. font-family: LucidaSans-Demi, LucidaSans;
  397. color: #FFBD4E;
  398. text-shadow: 1px 1px rgba(255, 255, 255, .7);
  399. font-weight: bold;
  400. }
  401. .luck-info-close {
  402. position: absolute;
  403. width: 70rpx;
  404. height: 70rpx;
  405. background-color: #b9b9b9;
  406. border-radius: 50%;
  407. right: 10rpx;
  408. top: -80rpx;
  409. }
  410. }
  411. }
  412. .detail {
  413. padding-bottom: 100rpx;
  414. &-top {
  415. margin-bottom: 20rpx;
  416. }
  417. &-info {
  418. justify-content: space-between;
  419. box-sizing: border-box;
  420. padding: 24rpx 16rpx;
  421. background-color: #fff;
  422. margin: 10rpx 10rpx 20rpx;
  423. border-radius: 10rpx;
  424. &__left {
  425. display: flex;
  426. flex-direction: column;
  427. justify-content: space-between;
  428. text {
  429. line-height: 24rpx;
  430. display: inline-block;
  431. }
  432. .title {
  433. color: rgba(16, 16, 16, 100);
  434. font-size: 32rpx;
  435. line-height: 32rpx;
  436. font-weight: bold;
  437. }
  438. .num {
  439. color: $uni-text-color;
  440. font-size: 28rpx;
  441. justify-content: flex-start;
  442. margin: 20rpx 0;
  443. }
  444. .tip {
  445. font-size: 24rpx;
  446. }
  447. }
  448. &__right {
  449. display: flex;
  450. flex-direction: column;
  451. align-items: flex-end;
  452. justify-content: space-between;
  453. height: 162rpx;
  454. text {
  455. color: rgba(157, 157, 157, 100);
  456. font-size: 14px;
  457. }
  458. .money {
  459. font-size: 40rpx;
  460. font-weight: bold;
  461. line-height: 40rpx;
  462. font-weight: bold;
  463. color: $uni-text-color;
  464. margin-bottom: 40rpx;
  465. }
  466. }
  467. }
  468. &-sku {
  469. background-color: #fff;
  470. border-radius: 10rpx;
  471. margin: 10rpx 10rpx 20rpx;
  472. &-title {
  473. padding: 24rpx 16rpx 12rpx;
  474. }
  475. &-item {
  476. padding-bottom: 10rpx;
  477. view {
  478. padding-left: 50rpx;
  479. line-height: 50rpx;
  480. }
  481. }
  482. }
  483. &-goods {
  484. margin: 10rpx 10rpx 20rpx;
  485. &-title {
  486. margin-bottom: 20rpx;
  487. }
  488. &-list {
  489. padding-bottom: 100rpx;
  490. &-item {
  491. position: relative;
  492. background-color: #FFFFFF;
  493. margin-bottom: 30rpx;
  494. border-radius: 10rpx;
  495. padding: 30rpx 20rpx;
  496. &__value {
  497. display: flex;
  498. }
  499. image {
  500. width: 200rpx;
  501. height: 200rpx;
  502. }
  503. .name {
  504. position: absolute;
  505. left: 0rpx;
  506. top: 0rpx;
  507. line-height: 28rpx;
  508. padding: 10rpx 40rpx;
  509. color: #FFFFFF;
  510. border-top-left-radius: 10rpx;
  511. border-bottom-right-radius: 40rpx;
  512. background-color: $uni-bg-color;
  513. }
  514. .info {
  515. display: flex;
  516. flex-direction: column;
  517. justify-content: space-between;
  518. font-size: 30rpx;
  519. padding-left: 50rpx;
  520. .title {
  521. font-weight: bold;
  522. }
  523. .num {
  524. color: #848484;
  525. }
  526. }
  527. }
  528. &-item:last-child {
  529. border: none;
  530. }
  531. }
  532. }
  533. }
  534. .null-prize {
  535. display: flex;
  536. flex-direction: column;
  537. align-items: center;
  538. justify-content: center;
  539. width: 80vw;
  540. height: 320rpx;
  541. background-color: #FFFFFF;
  542. border: 1px solid rgba(187, 187, 187, 100);
  543. .btn {
  544. margin-top: 60rpx;
  545. width: 160rpx;
  546. height: 60rpx;
  547. line-height: 60rpx;
  548. border-radius: 8rpx;
  549. background-color: rgba(235, 112, 9, 100);
  550. color: rgba(255, 255, 255, 100);
  551. font-size: 28rpx;
  552. text-align: center;
  553. }
  554. }
  555. </style>