index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997
  1. <template>
  2. <view>
  3. <view class="box">
  4. <view class="index" :style="{ top: statusHeight + 'px' }">
  5. <view class="barrage">
  6. <!-- 中奖信息轮播 -->
  7. <swiper class="barrage-swiper" :interval="2000" :autoplay="true" :vertical="true" :circular="true">
  8. <swiper-item v-for="(item, index) in prizeNewsListOne" :key="index">
  9. <view class="barrage-swiper-item flex">
  10. <view class="barrage-swiper-item-content flex">
  11. <image :src="item.avatar" mode="" />
  12. <view class="title ells-one">{{ item.nickName }} {{ item.type == 1 ? '刮出了' : '兑换了' }} {{ item.prizeInfo }}</view>
  13. </view>
  14. </view>
  15. </swiper-item>
  16. </swiper>
  17. </view>
  18. <!-- 查看规则 -->
  19. <view class="rule">
  20. <view class="rule-content flex" @click="toRule">
  21. <image src="../../static/index/index_tip.png" mode=""></image>
  22. <text>查看规则</text>
  23. </view>
  24. </view>
  25. <!-- 盲票轮播 -->
  26. <view class="ticket">
  27. <swiper class="ticket-swiper" :current="ticketIndex" :autoplay="false" :circular="true" @change="changeTicket">
  28. <swiper-item v-for="(item, index) in ticketList" :key="index" @click="toTicketBox(item)">
  29. <view class="ticket-swiper-item flex">
  30. <image class="box" :src="item.picUrl[1]" mode="scaleToFill"></image>
  31. <image class="prize" :src="item.picUrl[0]" mode="scaleToFill"></image>
  32. </view>
  33. </swiper-item>
  34. </swiper>
  35. </view>
  36. <!-- 投诉建议 -->
  37. <view class="proposal flex">
  38. <view class="proposal-time flex" v-show="filterActivityList.length" @click="toActivity">
  39. <image src="../../static/index/index_time_top.png" mode="scaleToFill"></image>
  40. <view class="time">
  41. <u-count-down :time="activityTime" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down>
  42. </view>
  43. </view>
  44. <view class="proposal-progress">
  45. <u-line-progress :percentage="percentage" height="3" :showText="false" inactiveColor="rgba(255, 255, 255, .36)" activeColor="#fff" />
  46. </view>
  47. <view class="proposal-tip" @click="contactService">
  48. <image src="../../static/index/index_tip_bg.png" mode=""></image>
  49. <text>投诉建议</text>
  50. </view>
  51. </view>
  52. <!-- 中奖概率 -->
  53. <view class="chance flex">
  54. <view class="chance-title">中奖概率:</view>
  55. <view class="chance-content flex" v-for="(item, index) in ticketInfo.ticketAwardsLabelList" :key="index">
  56. <image :src="item.picUrl" mode="scaleToFill"></image>
  57. <text>{{ item.hitRate }}%</text>
  58. </view>
  59. </view>
  60. <!-- 盲票名称轮播 -->
  61. <view class="ticket-title" flex>
  62. <swiper class="ticket-title-swiper flex" :current="ticketTitleIndex" previous-margin="110px" next-margin="110px" :autoplay="false" :circular="true" @change="changeTicketTitle">
  63. <swiper-item v-for="(item, index) in ticketList" :key="index">
  64. <view class="ticket-title-swiper-item flex" :class="{ 'action': ticketTitleIndex == index }">
  65. <text>{{ item.title }}</text>
  66. </view>
  67. </swiper-item>
  68. </swiper>
  69. </view>
  70. <!-- 刮开盲票 -->
  71. <view class="ticket-btn flex">
  72. <view class="ticket-btn-left flex">
  73. <image src="../../static/index/index_btn_left.png" mode="scaleToFill"></image>
  74. <view class="ticket-btn-left__title">试玩</view>
  75. </view>
  76. <view class="ticket-btn-center flex" @click="payment">
  77. <view class="image-wrap flex">
  78. <image class="btn" src="../../static/index/index_btn.png" mode="scaleToFill"></image>
  79. <image class="shadow" src="../../static/index/index_btn_shadow.png" mode="scaleToFill"></image>
  80. </view>
  81. <view class="ticket-btn-center-wrap flex">
  82. <view class="ticket-btn-center-wrap__title">刮开<br />盲票</view>
  83. </view>
  84. </view>
  85. <view class="ticket-btn-right flex" @click="toTicket">
  86. <view class="ticket-btn-right__image flex">
  87. <image src="../../static/index/index_btn_right_cir.png" mode="scaleToFill"></image>
  88. <image src="../../static/index/index_btn_cir_center.png" mode="scaleToFill"></image>
  89. </view>
  90. <view class="ticket-btn-right__title">更多盲票</view>
  91. </view>
  92. </view>
  93. <!-- 盲票价格 -->
  94. <view class="ticket-price flex">
  95. <view class="ticket-price-checkbox flex">
  96. <image src="../../static/index/index_price_checkout.png" mode="scaleToFill"></image>
  97. </view>
  98. <view class="ticket-price-amt flex">
  99. <view class="num">{{ $numberFormat(ticketInfo.salePrice) }}</view>
  100. <view class="txt">元/个</view>
  101. </view>
  102. <view class="ticket-price-discount flex">
  103. <view class="num">原价¥{{ $numberFormat(ticketInfo.originPrice) }}</view>
  104. </view>
  105. </view>
  106. </view>
  107. </view>
  108. <!-- tabbar组件 -->
  109. <custom-tab-bar :activeValue="'index'" />
  110. <!-- 支付弹框组件 -->
  111. <pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="toProcess" v-if="payShow" />
  112. <!-- 助力邀请弹框组件 -->
  113. <activity-help :activity-show="activityShow" :inviteCode="inviteCode" :marketingId="marketingId" @close="close" @success="toActivity" v-if="activityShow" />
  114. </view>
  115. </template>
  116. <script>
  117. import env from '../../config/env.js'
  118. import $http from '@/utils/request.js'
  119. import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
  120. import PayPopup from '../../components/pay-popup/pay-popup.vue'
  121. import ActivityHelp from '@/components/activity-help/activity-help.vue'
  122. export default {
  123. components: {
  124. CustomTabBar,
  125. PayPopup,
  126. ActivityHelp
  127. },
  128. data() {
  129. return {
  130. loginState: false, // 登录状态
  131. ticketList: [], // 盲票列表
  132. prizeList: [], // 奖品列表
  133. prizeNewsListOne: [], // 弹幕列表
  134. prizeNewsListTwo: [], // 弹幕列表
  135. payShow: false, // 支付弹框显示
  136. payInfo: {}, // 支付详情
  137. currentIndex: 0, // 盲票选中下标
  138. statusHeight: 20,
  139. ticketIndex: 0, // 盲票选中下标
  140. ticketTitleIndex: 0, // 盲票标题选中下边
  141. list: [1,2,3,4,5],
  142. percentage: 0,
  143. checkStatus: true,
  144. inviteCode: '',//助力邀请码
  145. marketingId: '',//活动id
  146. activityShow: false,//助力邀请弹框
  147. filterActivityList: [],
  148. activityTime: null,
  149. ticketInfo: {}
  150. };
  151. },
  152. onLoad(opthios) {
  153. /**
  154. * 免费活动邀请助力分享跳转接收参数
  155. * inviteCode: 邀请码
  156. * marketingId: 活动id
  157. * */
  158. if (opthios.inviteCode && opthios.marketingId) {
  159. this.inviteCode = opthios.inviteCode
  160. this.marketingId = opthios.marketingId
  161. this.activityShow = true
  162. }
  163. /**
  164. * 票赢天下小程序分享盲票跳转接受的参数
  165. * shareUid: 用户ID
  166. * shareType: 分享类型
  167. * */
  168. if (opthios.scene) {
  169. let sceneStr = decodeURIComponent(opthios.scene)
  170. this.sceneArr = sceneStr.split('&')
  171. uni.setStorageSync('shareUid', this.sceneArr[0])
  172. uni.setStorageSync('shareType', this.sceneArr[1])
  173. }
  174. // #ifdef MP-WEIXIN
  175. const res = uni.getMenuButtonBoundingClientRect()
  176. this.statusHeight = res.top //胶囊距离顶部
  177. // #endif
  178. let num = Math.round(100 / this.list.length)
  179. this.percentage = num
  180. this.getList()
  181. },
  182. onShow(opthios) {
  183. this.loginState = uni.getStorageSync('token') ? true : false
  184. this.getPrizeNews()
  185. this.getActivityList()
  186. },
  187. methods: {
  188. // 切换盲票
  189. changeTicket({ detail }) {
  190. this.ticketIndex = detail.current
  191. this.ticketTitleIndex = detail.current
  192. this.getTicketDetail(this.ticketList[detail.current].boxId)
  193. this.setNum(detail.current)
  194. },
  195. // 切换盲票名称
  196. changeTicketTitle({ detail }) {
  197. this.ticketIndex = detail.current
  198. this.ticketTitleIndex = detail.current
  199. this.getTicketDetail(this.ticketList[detail.current].boxId)
  200. this.setNum(detail.current)
  201. },
  202. setNum(index) {
  203. let num = Math.round(100 / this.list.length)
  204. if (index == 0) {
  205. this.percentage = uni.$u.range(0, 100, num)
  206. } else if (index == this.list.length - 1) {
  207. this.percentage = uni.$u.range(0, 100, 100)
  208. } else {
  209. this.percentage = uni.$u.range(0, 100, num * (index + 1))
  210. }
  211. },
  212. // 投诉建议
  213. contactService() {
  214. // #ifdef MP-WEIXIN
  215. wx.openCustomerServiceChat({
  216. extInfo: {
  217. url: 'https://work.weixin.qq.com/kfid/kfc36c0d90028adbd24'
  218. },
  219. corpId: 'ww02da63d80c66284b',
  220. })
  221. // #endif
  222. },
  223. // 活动
  224. getActivityList() {
  225. $http.post(`/api/v1/mp/user/marketing/list?pageNum=${ this.pageNum }&pageSize=20`, {
  226. triggerStatus: 0,
  227. }).then(res => {
  228. let data = res.rows
  229. this.filterActivityList = data.filter(item=> {
  230. return JSON.parse(item.status).value == 3
  231. })
  232. let activityInfo = this.filterActivityList.length ? this.filterActivityList[0] : {}
  233. let timestamp = parseInt(new Date().getTime())
  234. this.activityTime = activityInfo.endTime - timestamp
  235. })
  236. },
  237. // 获取盲票列表
  238. getList() {
  239. uni.showLoading({
  240. title: '加载中'
  241. });
  242. let data = {
  243. categoryId: '',
  244. tagId: '',
  245. type: 'online',
  246. noToken: true
  247. }
  248. $http.post(`/api/v1/mp/user/mall/ticket/list?pageNum=${this.pageNum}&pageSize=100`, data).then(
  249. res => {
  250. uni.hideLoading();
  251. if (res.code == 0) {
  252. res.rows.forEach(item => item.picUrl = item.picUrl.split(',').map(item => env.filePublic + item + '?imageView2/2/w/375'))
  253. this.ticketList = res.rows
  254. this.getTicketDetail(this.ticketList[0].boxId)
  255. }
  256. }).catch(() => {
  257. uni.hideLoading();
  258. })
  259. },
  260. // 获取弹幕列表
  261. getPrizeNews() {
  262. $http.post('/api/v1/mp/user/ticket/hitPrizeBarrage', {}).then(res => {
  263. const {
  264. listOne,
  265. listTwo
  266. } = res && res.data
  267. listOne.forEach(item => {
  268. item.avatar = item.avatar ? env.filePublic + item.avatar : env.filePublic +
  269. '70/EJ305PQR2IBE45O9AFAI'
  270. item.prizeInfo = item.prizeInfo && (item.prizeInfo.length > 14) ? item.prizeInfo
  271. .substring(0, 15) + '...' : item.prizeInfo
  272. })
  273. listTwo.forEach(item => {
  274. item.avatar = item.avatar ? env.filePublic + item.avatar : env.filePublic +
  275. '70/EJ305PQR2IBE45O9AFAI'
  276. item.prizeInfo = item.prizeInfo && (item.prizeInfo.length > 14) ? item.prizeInfo
  277. .substring(0, 15) + '...' : item.prizeInfo
  278. })
  279. this.prizeNewsListOne = listOne
  280. this.prizeNewsListTwo = listTwo
  281. })
  282. },
  283. // 获取当前盲票的详情
  284. getTicketDetail(id) {
  285. this.prizeList = []
  286. $http.post('/api/v1/mp/user/mall/ticket/detail', {
  287. boxId: id,
  288. noToken: true
  289. }).then(res => {
  290. uni.hideLoading();
  291. if (res.code == 0) {
  292. this.ticketInfo = {
  293. ...res.data,
  294. ticketAwardsLabelList: res.data.ticketAwardsLabelList.map(item => {
  295. return { ...item, picUrl: env.filePublic + item.picUrl }
  296. })
  297. }
  298. this.payInfo = this.ticketList[this.ticketIndex]
  299. }
  300. }).catch(() => {
  301. uni.hideLoading();
  302. })
  303. },
  304. // 立即开刮
  305. payment() {
  306. this.payInfo = this.ticketList[this.ticketIndex]
  307. let data = {
  308. userCouponIds: [],
  309. autoCoupon: 1,
  310. boxId: this.payInfo.boxId,
  311. orderNum: 1
  312. }
  313. $http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
  314. if (res.code == 0) {
  315. let info = {
  316. ...res.data,
  317. ...this.payInfo,
  318. picUrl: this.payInfo.picUrl[2],
  319. couponTitle: res.data && res.data.couponList && res.data.couponList.length && res
  320. .data.couponList[0].title,
  321. couponId: res.data && res.data.couponList && res.data.couponList.length && res.data
  322. .couponList[0].id
  323. }
  324. this.payInfo = info
  325. this.payShow = true
  326. }
  327. }).catch(() => {
  328. uni.$u.toast('开刮失败,请重试!');
  329. })
  330. },
  331. // 关闭支付弹框
  332. close() {
  333. this.payShow = false
  334. this.activityShow = false
  335. },
  336. changeList() {
  337. let data = {
  338. categoryId: '',
  339. tagId: '',
  340. type: 'online',
  341. noToken: true
  342. }
  343. $http.post(`/api/v1/mp/user/mall/ticket/list?pageNum=${this.pageNum}&pageSize=100`, data).then(
  344. res => {
  345. const boxIdStr = this.ticketList.map(item => item.boxId).join()
  346. let boxIdStrNew = res && res.rows && res.rows.map(item => item.boxId).join()
  347. if (boxIdStr != boxIdStrNew) {
  348. this.currentIndex = 0
  349. this.getList()
  350. }
  351. })
  352. },
  353. // 盲票向左箭头
  354. ticketLeft() {
  355. if ((this.currentIndex >= 0) && (this.currentIndex < (this.ticketList.length - 1))) {
  356. this.currentIndex++
  357. } else if (this.currentIndex == (this.ticketList.length - 1)) {
  358. this.currentIndex = 0
  359. }
  360. this.changeList()
  361. },
  362. // 盲票向右箭头
  363. ticketRight() {
  364. if (this.currentIndex > 0) {
  365. this.currentIndex--
  366. } else if (this.currentIndex == 0) {
  367. this.currentIndex = this.ticketList.length - 1
  368. }
  369. this.changeList()
  370. },
  371. // 线上立即刮票成功,跳转到刮奖过程
  372. toProcess(id) {
  373. this.payShow = false
  374. uni.navigateTo({
  375. url: `/packageOperate/process/index?id=${ id }`
  376. })
  377. },
  378. // 点击盲票,跳转盲票详情
  379. toTicketBox(item) {
  380. uni.navigateTo({
  381. url: `/pages/ticketBox/detail?boxId=${ item.boxId }`
  382. })
  383. },
  384. // 点击奖品,跳转到奖品详情
  385. toPrizeGoods(item) {
  386. if (item.prizeType == "goods") {
  387. uni.navigateTo({
  388. url: `/packagePrize/goods/detail?id=${ item.refId }`
  389. })
  390. }
  391. //门店优惠券
  392. if (item.prizeType == "coupon") {
  393. // if (item.couponType == "1") {
  394. // uni.navigateTo({
  395. // url: `/packagePrize/goods/detail?id=426`
  396. // })
  397. // }
  398. // if (item.couponType == "2") {
  399. // uni.navigateTo({
  400. // url: `/packagePrize/goods/detail?id=425`
  401. // })
  402. // }
  403. uni.navigateTo({
  404. url: `/packagePrize/goods/detail?id=425`
  405. })
  406. }
  407. // 盲豆
  408. if (item.prizeType == "coin") {
  409. uni.navigateTo({
  410. url: `/packagePrize/goods/detail?id=424`
  411. })
  412. }
  413. },
  414. toActivity() {
  415. uni.switchTab({
  416. url: '/pages/activity/index'
  417. })
  418. },
  419. // 点击所有盲票
  420. toTicket() {
  421. uni.navigateTo({
  422. url: '/packageGoods/ticket/index'
  423. })
  424. },
  425. // 点击奖品库
  426. toPrize() {
  427. if (!this.loginState) {
  428. uni.navigateTo({
  429. url: "/pages/login/index"
  430. })
  431. return
  432. }
  433. uni.navigateTo({
  434. url: '/packagePrize/prize/index'
  435. })
  436. },
  437. // 点击规则说明
  438. toRule() {
  439. uni.navigateTo({
  440. url: '/packageOther/rule/index'
  441. })
  442. }
  443. },
  444. onShareAppMessage(res) {
  445. return {
  446. title: '盲票,玩的就是有趣',
  447. path: '/pages/index/index'
  448. }
  449. }
  450. }
  451. </script>
  452. <style lang="scss" scoped>
  453. .status_bar {
  454. width: 100%;
  455. height: var(--status-bar-height);
  456. }
  457. /deep/ .u-tabbar__placeholder {
  458. display: none;
  459. }
  460. </style>
  461. <style lang="scss" scoped>
  462. .box {
  463. position: relative;
  464. width: 100%;
  465. height: calc(100vh - 50px);
  466. background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/front_bk.png) center center no-repeat;
  467. background-size: 100vw calc(100vh - 50px);
  468. .index {
  469. position: absolute;
  470. width: 100%;
  471. }
  472. }
  473. // 中奖信息
  474. .barrage {
  475. width: 518rpx;
  476. height: 84rpx;
  477. background: linear-gradient(90deg, #FFD220, #FFF7A2);
  478. border-radius: 42rpx;
  479. margin-bottom: 16rpx;
  480. margin-left: 34rpx;
  481. &-swiper {
  482. width: 100%;
  483. height: 100%;
  484. border-radius: 42rpx;
  485. overflow: hidden;
  486. &-item {
  487. width: 100%;
  488. height: 100%;
  489. &-content {
  490. display: flex;
  491. align-items: center;
  492. width: 510rpx;
  493. height: 76rpx;
  494. image {
  495. width: 66rpx;
  496. height: 66rpx;
  497. border-radius: 50%;
  498. margin-right: 14rpx;
  499. }
  500. .title {
  501. flex: 1;
  502. font-size: 26rpx;
  503. font-family: PingFang SC;
  504. font-weight: 500;
  505. color: #333333;
  506. }
  507. }
  508. }
  509. }
  510. }
  511. // 查看规则
  512. .rule {
  513. display: flex;
  514. align-items: center;
  515. justify-content: flex-end;
  516. height: 34rpx;
  517. padding-right: 34rpx;
  518. margin-bottom: 24rpx;
  519. &-content {
  520. image {
  521. width: 34rpx;
  522. height: 34rpx;
  523. margin-right: 14rpx;
  524. }
  525. text {
  526. font-size: 40rpx;
  527. font-family: 'YouSheBiaoTiHei';
  528. font-weight: 400;
  529. color: #FFFFFF;
  530. }
  531. }
  532. }
  533. // 盲票
  534. .ticket {
  535. height: 36vh;
  536. &-swiper {
  537. height: 100%;
  538. &-item {
  539. position: relative;
  540. height: 100%;
  541. .box {
  542. position: absolute;
  543. bottom: 0;
  544. width: 75vw;
  545. height: 75%;
  546. }
  547. .prize {
  548. position: absolute;
  549. top: 0;
  550. width: 85vw;
  551. height: 75%;
  552. animation: movePrize 2s linear infinite;
  553. }
  554. }
  555. }
  556. }
  557. // 投诉建议
  558. .proposal {
  559. position: relative;
  560. height: 66rpx;
  561. margin-bottom: 30rpx;
  562. &-time {
  563. position: absolute;
  564. left: 30rpx;
  565. bottom: 0;
  566. flex-direction: column;
  567. align-items: flex-start;
  568. image {
  569. width: 140rpx;
  570. height: 78rpx;
  571. margin-bottom: 12rpx;
  572. animation: scaleTime 3s linear infinite;
  573. }
  574. .time {
  575. animation: moveTime 0.5s linear infinite;
  576. /deep/ .u-count-down__text {
  577. line-height: 30rpx;
  578. font-size: 30rpx;
  579. font-family: YouSheBiaoTiHei;
  580. font-weight: 400;
  581. color: #FFFFFF;
  582. }
  583. }
  584. }
  585. &-progress {
  586. position: absolute;
  587. bottom: 0;
  588. width: 140rpx;
  589. }
  590. &-tip {
  591. display: flex;
  592. align-items: center;
  593. position: absolute;
  594. right: 0;
  595. bottom: 0;
  596. width: 212rpx;
  597. height: 66rpx;
  598. image {
  599. position: absolute;
  600. right: 0;
  601. bottom: 0;
  602. width: 212rpx;
  603. height: 66rpx;
  604. }
  605. text {
  606. position: absolute;
  607. right: 16rpx;
  608. font-size: 40rpx;
  609. font-family: YouSheBiaoTiHei;
  610. font-weight: 400;
  611. color: #FFFFFF;
  612. }
  613. }
  614. }
  615. // 中奖概率
  616. .chance {
  617. justify-content: space-evenly;
  618. height: 44rpx;
  619. margin: 0 34rpx 26rpx;
  620. background-color: rgba(000, 000, 000, .36);
  621. border-radius: 22rpx;
  622. color: #FFFFFF;
  623. font-family: YouSheBiaoTiHei;
  624. font-size: 14px;
  625. &-content {
  626. image {
  627. width: 56rpx;
  628. height: 50rpx;
  629. }
  630. }
  631. }
  632. // 盲票名称轮播
  633. .ticket-title {
  634. height: 66rpx;
  635. padding: 0 34rpx;
  636. &-swiper {
  637. width: calc(100vw - 34px);
  638. height: 100%;
  639. &-item {
  640. height: 100%;
  641. background: rgba(255, 255, 255, .16);
  642. margin: 0 17rpx;
  643. color: #fff;
  644. font-size: 34rpx;
  645. }
  646. .action {
  647. background: #FFAE00;
  648. box-shadow: 0px 3px 3px 0px rgba(220, 145, 107, 0.57);
  649. }
  650. }
  651. }
  652. // 刮开盲票
  653. .ticket-btn {
  654. justify-content: space-between;
  655. height: 20vh;
  656. padding: 0 30rpx;
  657. &-left {
  658. flex-direction: column;
  659. image {
  660. width: 142rpx;
  661. height: 142rpx;
  662. margin-bottom: 16rpx;
  663. }
  664. &__title {
  665. line-height: 30rpx;
  666. font-size: 30rpx;
  667. font-family: YouSheBiaoTiHei;
  668. font-weight: 400;
  669. color: #FFFFFF;
  670. }
  671. }
  672. &-center {
  673. position: relative;
  674. flex-direction: column;
  675. height: 100%;
  676. .image-wrap {
  677. position: absolute;
  678. width: 310rpx;
  679. height: 90%;
  680. border-radius: 50%;
  681. overflow: hidden;
  682. box-shadow: 2px 2px 10px rgba(255, 189, 24, .8), -2px -2px 10px rgba(255, 189, 24, .8), 2px -2px 10px rgba(255, 189, 24, .8), -2px 2px 10px rgba(255, 189, 24, .8);
  683. .btn {
  684. width: 310rpx;
  685. height: 100%;
  686. }
  687. .shadow {
  688. position: absolute;
  689. width: 310rpx;
  690. height: 130%;
  691. left: 0;
  692. animation: shadowMove 1.5s linear infinite;
  693. }
  694. }
  695. &-wrap {
  696. width: 300rpx;
  697. position: absolute;
  698. animation: scaleBtn 1.5s linear infinite;
  699. &__title {
  700. width: 300rpx;
  701. text-align: center;
  702. font-size: 84rpx;
  703. font-family: YouSheBiaoTiHei;
  704. font-weight: 400;
  705. color: #FFFFFF;
  706. line-height: 72rpx;
  707. animation: shadowBtn 1.5s linear infinite;
  708. }
  709. }
  710. }
  711. &-right {
  712. flex-direction: column;
  713. &__image {
  714. position: relative;
  715. width: 142rpx;
  716. height: 142rpx;
  717. margin-bottom: 16rpx;
  718. image:first-child {
  719. width: 142rpx;
  720. height: 142rpx;
  721. margin-bottom: 16rpx;
  722. }
  723. image:last-child {
  724. position: absolute;
  725. width: 60rpx;
  726. height: 60rpx;
  727. margin-bottom: 16rpx;
  728. }
  729. }
  730. &__title {
  731. line-height: 30rpx;
  732. font-size: 30rpx;
  733. font-family: YouSheBiaoTiHei;
  734. font-weight: 400;
  735. color: #FFFFFF;
  736. }
  737. }
  738. }
  739. // 盲票价格
  740. .ticket-price {
  741. height: 44rpx;
  742. &-checkbox {
  743. width: 44rpx;
  744. height: 44rpx;
  745. background-color: #fff;
  746. border-radius: 50%;
  747. overflow: hidden;
  748. margin-right: 20rpx;
  749. image {
  750. width: 44rpx;
  751. height: 44rpx;
  752. }
  753. }
  754. &-amt {
  755. height: 44rpx;
  756. font-family: YouSheBiaoTiHei;
  757. font-weight: 400;
  758. align-items: flex-end;
  759. color: #FFFFFF;
  760. margin-right: 20rpx;
  761. .num {
  762. font-size: 56rpx;
  763. line-height: 40rpx;
  764. }
  765. .txt {
  766. line-height: 36rpx;
  767. font-size: 40rpx;
  768. }
  769. }
  770. &-discount {
  771. height: 44rpx;
  772. align-items: flex-end;
  773. .num {
  774. line-height: 24rpx;
  775. font-size: 24rpx;
  776. text-decoration: line-through;
  777. }
  778. }
  779. }
  780. // 奖品移动动画
  781. @keyframes movePrize {
  782. 0% {
  783. transform: translate(0, 10px)
  784. }
  785. 25% {
  786. transform: translate(0, 5px)
  787. }
  788. 50% {
  789. transform: translate(0, 0px)
  790. }
  791. 75% {
  792. transform: translate(0, 5px)
  793. }
  794. 100% {
  795. transform: translate(0, 10px)
  796. }
  797. }
  798. // 倒计时移动动画
  799. @keyframes moveTime {
  800. 0% {
  801. transform: translate(2px, 0)
  802. }
  803. 25% {
  804. transform: translate(0, 0)
  805. }
  806. 50% {
  807. transform: translate(1px, 0)
  808. }
  809. 75% {
  810. transform: translate(0, 0)
  811. }
  812. 100% {
  813. transform: translate(2px, 0)
  814. }
  815. }
  816. // 放大缩小动画
  817. @keyframes scaleTime {
  818. 0% {
  819. transform: scale(1.05)
  820. }
  821. 25% {
  822. transform: scale(1.02)
  823. }
  824. 50% {
  825. transform: scale(0.9)
  826. }
  827. 75% {
  828. transform: scale(1.02)
  829. }
  830. 100% {
  831. transform: scale(1.05)
  832. }
  833. }
  834. // 刮开刮票呼吸动画
  835. @keyframes scaleBtn {
  836. 0% {
  837. transform: scale(1.04)
  838. }
  839. 25% {
  840. transform: scale(1.02)
  841. }
  842. 50% {
  843. transform: scale(1)
  844. }
  845. 75% {
  846. transform: scale(1.02)
  847. }
  848. 100% {
  849. transform: scale(1.04)
  850. }
  851. }
  852. // 刮开刮票阴影动画
  853. @keyframes shadowBtn {
  854. 0% {
  855. text-shadow: 2px -2px 3px #fff;
  856. }
  857. 25% {
  858. text-shadow: none;
  859. }
  860. 50% {
  861. text-shadow: none;
  862. }
  863. 75% {
  864. text-shadow: none;
  865. }
  866. 100% {
  867. text-shadow: 2px -2px 3px #fff;
  868. }
  869. }
  870. // 刮开盲票光影移动动画
  871. @keyframes shadowMove {
  872. 0% {
  873. left: -100%;
  874. }
  875. 100% {
  876. left: 110%;
  877. }
  878. }
  879. </style>