index.vue 25 KB

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