index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. <template>
  2. <view>
  3. <view class="lucky"></view>
  4. <u-overlay :show="luckyShow" :opacity="0.8" zIndex="100">
  5. <view class="flex luck-warp" @touchmove.prevent.stop>
  6. <view class="luck-info">
  7. <!-- <view class="flex luck-info-image">
  8. <image class="image1" src="../../static/icon/lucky_bg.png" mode="" v-if="info.status == 1">
  9. </image>
  10. <image class="image2" src="../../static/icon/lucky_bg2.png" mode="" v-else></image>
  11. </view>
  12. <view
  13. :class="{ 'flex luck-info-content mat': info.status == 1, 'flex luck-info-content mat2': info.status != 1 }">
  14. <view class="title">幸运数字</view>
  15. <view class="name">{{ info.title }}</view>
  16. <view class="num">盲票序列号:{{ info.serialNo }}</view>
  17. </view>
  18. <view class="flex luck-info-tip" v-if="info.status == 2">
  19. <view class="tip">请刮开纸质票面的数字,与此幸运数字相同的就是所中奖项</view>
  20. </view>
  21. <view class="flex luck-info-btn">
  22. <view class="btn" @click="pay" v-if="info.status == 1">支付{{ info.salePrice / 100 }}元 立即查看</view>
  23. <view class="btn" @click="scanCode" v-else>扫码兑奖</view>
  24. </view>
  25. <view class="flex luck-info-num" v-if="info.status == 2">{{ info.plainLuckyNum }}</view>
  26. <view class="flex luck-info-close">
  27. <navigator open-type="exit" target="miniProgram" hover-class="none" class="flex">
  28. <u-icon name="close" color="#333" size="20"></u-icon>
  29. </navigator>
  30. </view> -->
  31. <view class="luck-info-bg">
  32. <image src="../../static/lucky/lucky_bg.png" mode=""></image>
  33. </view>
  34. <view class="luck-info-content flex">
  35. <view class="luck-info-content-num">
  36. <image src="../../static/lucky/lucky_not_num.png" mode="" v-if="info.status == 1"></image>
  37. <image src="../../static/lucky/lucky_ok_num.png" mode="" v-else></image>
  38. <view class="luck-info-content-num__content flex" v-if="info.status == 2">
  39. <text>{{ info.plainLuckyNum }}</text>
  40. </view>
  41. </view>
  42. <view class="luck-info-content-title" v-if="info.status == 1">- 幸运数字 -</view>
  43. <view class="luck-info-content-tip" v-else>请刮开纸质票面的数字,与此幸运数字相同的就是所中奖项</view>
  44. <view class="luck-info-content-ticket">
  45. <image src="../../static/lucky/lucky_not.png" mode="" v-if="info.status == 1"></image>
  46. <image src="../../static/lucky/lucky_ok.png" mode="" v-else></image>
  47. <view class="luck-info-content-ticket-info flex">
  48. <view class="title" :class="{ 'action': info.status == 2 }">{{ info.title }}</view>
  49. <view class="serialNo" :class="{ 'action': info.status == 2 }">盲票序列号:{{ info.serialNo }}</view>
  50. </view>
  51. </view>
  52. <view class="luck-info-content-btn" @click="pay" v-if="info.status == 1">支付{{ info.salePrice / 100 }}元 立即查看</view>
  53. <view class="luck-info-content-btn code" @click="scanCode" v-else>扫码兑奖</view>
  54. </view>
  55. <view class="luck-info-close flex">
  56. <navigator open-type="exit" target="miniProgram" hover-class="none" class="luck-info-close-content flex">
  57. <u-icon name="close" color="#fff" size="20"></u-icon>
  58. </navigator>
  59. </view>
  60. </view>
  61. </view>
  62. </u-overlay>
  63. <pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="getDetailInfo" v-if="payShow" />
  64. <u-popup :show="showNull" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
  65. @touchmove.prevent.stop>
  66. <view class="null-prize">
  67. <view class="title">该盲票已兑奖</view>
  68. <navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator>
  69. </view>
  70. </u-popup>
  71. <u-popup :show="showAction" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
  72. @touchmove.prevent.stop>
  73. <view class="null-prize">
  74. <view class="title">该盲票未激活</view>
  75. <navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator>
  76. </view>
  77. </u-popup>
  78. </view>
  79. </template>
  80. <script>
  81. import env from '../../config/env.js'
  82. import $http from '@/utils/request.js'
  83. import PayPopup from '../../components/pay-popup/pay-popup.vue'
  84. export default {
  85. components: {
  86. PayPopup
  87. },
  88. data() {
  89. return {
  90. serialNo: '',
  91. info: '',
  92. payInfo: {},
  93. payShow: false,
  94. payLookFlag: true,
  95. showNull: false,
  96. luckyShow: false,
  97. status: 2,
  98. showAction: false,
  99. };
  100. },
  101. onLoad(options) {
  102. if (options.id) {
  103. this.serialNo = options.id
  104. this.getDetail()
  105. }
  106. if (options.q) {
  107. let url = JSON.stringify(options.q)
  108. this.serialNo = url.substring(url.length - 22, url.length - 1)
  109. this.getDetail()
  110. }
  111. },
  112. onShow() {
  113. },
  114. methods: {
  115. scanCode() {
  116. let _this = this
  117. uni.scanCode({
  118. scanType: ['qrCode'],
  119. success(res) {
  120. let url = res.result
  121. _this.serialNo = url.substring(url.length - 21, url.length)
  122. _this.getDetail()
  123. },
  124. fail() {
  125. uni.$u.toast('请扫二维码');
  126. }
  127. });
  128. },
  129. getDetail() {
  130. uni.showLoading({
  131. title: '加载中'
  132. });
  133. $http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
  134. serialNo: this.serialNo,
  135. noToken: true
  136. }).then(res => {
  137. uni.hideLoading();
  138. if (res.code == 0) {
  139. if (res.data.status == 1) {
  140. this.info = res.data
  141. this.luckyShow = true
  142. } else if (res.data.status == 2) {
  143. this.info = res.data
  144. if (uni.getStorageSync('token')) {
  145. uni.redirectTo({
  146. url: `/packagePrize/choice/index?id=${ res.data.ticketId }&type=offLine`
  147. })
  148. } else {
  149. this.luckyShow = true
  150. uni.showModal({
  151. title: '提示',
  152. content: '您未登录或登录失效!',
  153. confirmText: '去登录',
  154. showCancel: false,
  155. success(res) {
  156. if (res.confirm) {
  157. uni.navigateTo({
  158. url: "/pages/login/index"
  159. })
  160. }
  161. }
  162. })
  163. }
  164. } else {
  165. this.showNull = true
  166. this.luckyShow = false
  167. }
  168. } else if (res.code == 1023) {
  169. this.showAction = true
  170. this.luckyShow = false
  171. } else {
  172. uni.$u.toast('该盲票不存在!');
  173. setTimeout(() => {
  174. uni.switchTab({
  175. url: '/pages/index/index'
  176. })
  177. }, 1000)
  178. }
  179. }).catch(() => {
  180. uni.hideLoading();
  181. })
  182. },
  183. getDetailInfo() {
  184. let _this = this
  185. _this.payShow = false
  186. uni.showLoading({
  187. title: '加载中'
  188. });
  189. $http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
  190. serialNo: _this.serialNo,
  191. noToken: true
  192. }).then(res => {
  193. uni.hideLoading();
  194. if (res.code == 0) {
  195. if (res.data.status == 2) {
  196. _this.info = res.data
  197. let num = res.data.plainLuckyNum
  198. } else {
  199. let num = 0
  200. let time = setInterval(() => {
  201. num++
  202. uni.showLoading({
  203. title: '加载中'
  204. });
  205. $http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
  206. serialNo: _this.serialNo,
  207. noToken: true
  208. }).then(ele => {
  209. if (ele.data.status == 2) {
  210. uni.hideLoading();
  211. clearInterval(time)
  212. _this.info = res.data
  213. let num = res.data.plainLuckyNum
  214. }
  215. })
  216. if (num == 10) {
  217. uni.hideLoading();
  218. clearInterval(time)
  219. }
  220. }, 1000)
  221. }
  222. }
  223. }).catch(() => {
  224. uni.hideLoading();
  225. })
  226. },
  227. close() {
  228. this.payShow = false
  229. },
  230. pay() {
  231. let data = {
  232. ticketId: this.info.ticketId,
  233. autoCoupon: 1,
  234. userCouponIds: [],
  235. orderNum: 1
  236. }
  237. this.payLookFlag = false
  238. uni.showLoading({
  239. title: '加载中'
  240. });
  241. $http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
  242. uni.hideLoading();
  243. if (res.code == 0) {
  244. let info = {
  245. ...res.data,
  246. ...this.info,
  247. picUrl: env.filePublic + res.data.picUrl,
  248. couponTitle: res.data && res.data.couponList && res.data.couponList.length && res
  249. .data.couponList[0].title,
  250. couponId: res.data && res.data.couponList && res.data.couponList.length && res.data
  251. .couponList[0].id,
  252. }
  253. this.payInfo = info
  254. this.payShow = true
  255. }
  256. }).catch(() => {
  257. uni.hideLoading();
  258. })
  259. },
  260. saveImg() {
  261. this.$refs.hchPoster.posterShow()
  262. },
  263. }
  264. }
  265. </script>
  266. <style lang="scss" scoped>
  267. .luck-warp {
  268. height: 100%;
  269. .luck-info {
  270. position: relative;
  271. width: 87vw;
  272. height: 60vh;
  273. // background-color: #fff;
  274. &-bg {
  275. position: absolute;
  276. top: 0;
  277. image {
  278. width: 87vw;
  279. height: 60vh;
  280. }
  281. }
  282. &-content {
  283. flex-direction: column;
  284. justify-content: flex-start;
  285. position: absolute;
  286. top: 0;
  287. z-index: 10;
  288. width: 100%;
  289. height: 100%;
  290. &-num {
  291. position: relative;
  292. width: 60%;
  293. height: 10vh;
  294. margin-top: 17vh;
  295. margin-bottom: 2vh;
  296. image {
  297. position: absolute;
  298. top: 0;
  299. width: 100%;
  300. height: 100%;
  301. }
  302. &__content {
  303. position: absolute;
  304. top: 0;
  305. width: 100%;
  306. height: 100%;
  307. z-index: 5;
  308. font-size: 120rpx;
  309. font-family: YouSheBiaoTiHei;
  310. font-weight: 400;
  311. color: #FD3331;
  312. }
  313. }
  314. &-title {
  315. font-size: 40rpx;
  316. line-height: 40rpx;
  317. color: #FEFEFE;
  318. margin-bottom: 1vh;
  319. }
  320. &-tip {
  321. width: 80%;
  322. font-size: 26rpx;
  323. line-height: 35rpx;
  324. text-align: center;
  325. color: #fff;
  326. }
  327. &-ticket {
  328. position: relative;
  329. width: 96%;
  330. height: 14vh;
  331. margin-bottom: 2vh;
  332. image {
  333. position: absolute;
  334. top: 0;
  335. width: 100%;
  336. height: 100%;
  337. }
  338. &-info {
  339. width: 100%;
  340. height: 100%;
  341. position: absolute;
  342. top: 0;
  343. z-index: 5;
  344. flex-direction: column;
  345. .title {
  346. font-size: 36rpx;
  347. line-height: 36rpx;
  348. font-weight: bold;
  349. color: #FF6D2C;
  350. margin-bottom: 2vh;
  351. }
  352. .serialNo {
  353. font-size: 26rpx;
  354. color: #FF6D2C;
  355. }
  356. .action {
  357. color: #FFCBAA;
  358. }
  359. }
  360. }
  361. &-btn {
  362. // width: 80%;
  363. padding: 0 13%;
  364. height: 8vh;
  365. line-height: 8vh;
  366. background: linear-gradient(0deg, #F9D448, #FF4924);
  367. box-shadow: 0px 6px 9px 0px rgba(135, 19, 3, 0.49);
  368. border-radius: 4vh;
  369. text-align: center;
  370. color: #FEFEFE;
  371. font-size: 40rpx;
  372. }
  373. .code {
  374. padding: 0 20%;
  375. }
  376. }
  377. &-close {
  378. width: 100%;
  379. position: absolute;
  380. bottom: -140rpx;
  381. &-content {
  382. width: 70rpx;
  383. height: 70rpx;
  384. border-radius: 50%;
  385. border: 1px solid #fff;
  386. }
  387. }
  388. }
  389. }
  390. .lucky {
  391. width: 100%;
  392. height: 100vh;
  393. background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/hit_bkg.png) center center no-repeat;
  394. background-size: 100vw 100vh;
  395. }
  396. .null-prize {
  397. display: flex;
  398. flex-direction: column;
  399. align-items: center;
  400. justify-content: center;
  401. width: 80vw;
  402. height: 320rpx;
  403. background-color: #FFFFFF;
  404. border: 1px solid rgba(187, 187, 187, 100);
  405. .btn {
  406. margin-top: 60rpx;
  407. width: 160rpx;
  408. height: 60rpx;
  409. line-height: 60rpx;
  410. border-radius: 8rpx;
  411. background-color: rgba(235, 112, 9, 100);
  412. color: rgba(255, 255, 255, 100);
  413. font-size: 28rpx;
  414. text-align: center;
  415. }
  416. }
  417. </style>