index.vue 11 KB

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