index.vue 25 KB

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