index.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872
  1. <template>
  2. <view>
  3. <u-popup :show="tipShow" :round="10" mode="center" :safeAreaInsetBottom="false">
  4. <view class="null-prize">
  5. <view class="title">该盲票已被他人买走了</view>
  6. <!-- <navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator> -->
  7. <view class="btn" @click="toUser">确认</view>
  8. </view>
  9. </u-popup>
  10. <view class="choice" v-if="comfirmShow1">
  11. <!-- 返回 -->
  12. <!-- #ifndef MP-ALIPAY -->
  13. <!-- <view class="choice-navLeft flex" :style="{ top: statusHeight + 'px' }" @click="back">
  14. <u-icon size="19" color="#fff" name="arrow-left"></u-icon>
  15. </view> -->
  16. <!-- #endif -->
  17. <!-- 标题 -->
  18. <view class="choice-title flex">
  19. <image src="../../packagePrize/static/rolling_title.png" mode="scaleToFill" v-if="!comfirmShow">
  20. </image>
  21. <image src="../../packagePrize/static/choice_title.png" mode="scaleToFill" v-else></image>
  22. </view>
  23. <!-- 提示 -->
  24. <view class="choice-tip flex" v-if="!comfirmShow">
  25. <view class="choice-tip-content">以下奖品任选一件</view>
  26. </view>
  27. <!-- 奖品列表 -->
  28. <view class="choice-list" v-if="!comfirmShow">
  29. <view class="choice-list-item flex" v-for="(item, index) in prizeList" :key="index">
  30. <view class="checkbox flex" :class="{ 'checkbox-action': actionIndex == index }"
  31. @click="selectPrize(index)">
  32. <u-icon name="checkmark" color="#fff" size="14"></u-icon>
  33. </view>
  34. <view class="info flex" @click="selectPrize(index)">
  35. <image :src="item.picUrl" mode="aspectFill"></image>
  36. <view class="info-content flex">
  37. <!-- #ifdef MP-ALIPAY -->
  38. <view class="info-content__titletwo ells"
  39. v-if="item.prizeType && item.prizeType.value != 'coin'">{{ item.title }}</view>
  40. <view class="info-content__titletwo ells" v-else>盲豆</view>
  41. <!-- #endif -->
  42. <!-- #ifndef MP-ALIPAY -->
  43. <view class="info-content__title ells"
  44. v-if="item.prizeType && item.prizeType.value != 'coin'">{{ item.title }}</view>
  45. <view class="info-content__title ells" v-else>盲豆</view>
  46. <!-- #endif -->
  47. <view class="info-content__price" v-if="item.prizeType && item.prizeType.value != 'coin'">
  48. ¥{{ $numberFormat(item.value) }}</view>
  49. <view class="info-content__price" v-else>{{ item.value }}个</view>
  50. </view>
  51. </view>
  52. <view class="detail" @click="toPrizeGoods(item)">查看</view>
  53. </view>
  54. </view>
  55. <!-- 按钮 -->
  56. <view class="footer-fixed flex" v-if="!comfirmShow">
  57. <view class="footer-fixed-btn flex" @click="confirmPrize">
  58. <image src="../../packagePrize/static/rolling_btn.png" mode="aspectFit"></image>
  59. <view class="footer-fixed-btn-txt">确认</view>
  60. </view>
  61. </view>
  62. <view class="choice-box flex" v-if="comfirmShow">
  63. <view class="choice-box-popup flex">
  64. <view class="choice-box-popup__image flex">
  65. <image :src="actionInfo.picUrl" mode="aspectFit"></image>
  66. </view>
  67. </view>
  68. </view>
  69. <view class="choice-info flex" v-if="comfirmShow">
  70. <view class="choice-info-content">
  71. <view class="choice-info-content-price"
  72. v-if="actionInfo.prizeType && actionInfo.prizeType.value != 'coin'">
  73. <text>¥</text>{{ $numberFormat(actionInfo.value) }}
  74. </view>
  75. <view class="choice-info-content-price" v-else>{{ actionInfo.value }}个</view>
  76. <view class="choice-info-content-title ells"
  77. v-if="actionInfo.prizeType && actionInfo.prizeType.value != 'coin'">{{ actionInfo.title }}
  78. </view>
  79. <view class="choice-info-content-title" v-else>盲豆</view>
  80. <view class="choice-info-content-btn flex">
  81. <view class="choice-info-content-btn-content flex" @click="toPrize(actionInfo.prizeType)">
  82. <image src="../../packagePrize/static/rolling_btn.png" mode="aspectFit"></image>
  83. <view class="choice-info-content-btn-content-txt"
  84. v-if="actionInfo.prizeType && actionInfo.prizeType.value != 'coin'">去查看我的奖品</view>
  85. <view class="choice-info-content-btn-content-txt" v-else>去商城兑换商品</view>
  86. </view>
  87. </view>
  88. </view>
  89. </view>
  90. <view class="choice-tip flex" @click="again" v-if="comfirmShow && type == 'offline'">
  91. <view class="txt">再来一张</view>
  92. </view>
  93. <view class="choice-tip flex" @click="again" v-if="comfirmShow && type == 'online'">
  94. <view class="txt">再买一个</view>
  95. </view>
  96. <!-- #ifdef MP-WEIXIN -->
  97. <view class="choice-download flex" @click="saveImg" v-if="comfirmShow">
  98. <image src="../../packagePrize/static/download1.png" mode="aspectFit"></image>
  99. <view>下载海报</view>
  100. </view>
  101. <!-- #endif -->
  102. </view>
  103. <view v-else class="poster">
  104. </view>
  105. <!-- 详情 -->
  106. <u-popup :show="detailShow" :round="11" mode="bottom" @close="detailShow = false" :closeable="true">
  107. <view class="prize-detail flex">
  108. <view class="prize-detail-title">奖品详情</view>
  109. <view class="prize-detail-content">
  110. <u-parse :content="description" :selectable="true"></u-parse>
  111. </view>
  112. </view>
  113. </u-popup>
  114. <!-- 海报 -->
  115. <share-code ref="shareCode" :posterData.sync="posterData" />
  116. </view>
  117. </template>
  118. <script>
  119. import env from '../../config/env.js'
  120. import $http from '@/utils/request.js'
  121. import { formatRichText, urlParameter } from '@/utils/util.js'
  122. import ShareCode from "../components/hch-poster/hch-poster.vue"
  123. export default {
  124. components: {
  125. ShareCode
  126. },
  127. data() {
  128. return {
  129. ticketId: '',
  130. prizeList: [],
  131. total: 0,
  132. actionIndex: 0,
  133. tipShow: false,
  134. comfirmShow: false,
  135. comfirmShow1: false,
  136. actionInfo: {},
  137. type: '',
  138. statusHeight: 30,
  139. detailShow: false,
  140. description: '',
  141. // 图片数据
  142. // #ifdef H5
  143. posterData: {
  144. poster: {
  145. //根据屏幕大小自动生成图片背景大小
  146. url: "https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/prizeBackground.png", //图片地址
  147. r: 15, //圆角半径
  148. w: 350, //图片宽度
  149. h: 600, //图片高度
  150. p: 20 //图片内边距padding
  151. },
  152. title: {
  153. // 商品名称
  154. text: "", //文本
  155. fontSize: 26, //字体大小
  156. color: "#fff", //颜色
  157. lineHeight: 44, //行高#4F4F4F 100%
  158. mt: 90, //margin-top
  159. w: 310,
  160. align: "left"
  161. },
  162. mainImg: {
  163. // 商品图
  164. url: "", //图片地址
  165. r: 5, //圆角半径
  166. w: 160, //宽度
  167. h: 160, //高度
  168. mt: 270
  169. },
  170. codeImg: {
  171. // 小程序码
  172. url: "", //图片地址
  173. w: 60, //宽度
  174. h: 60, //高度
  175. r: 2, //圆角半径
  176. mt: 475
  177. },
  178. tips: []
  179. },
  180. // #endif
  181. // #ifndef H5
  182. posterData: {
  183. poster: {
  184. //根据屏幕大小自动生成图片背景大小
  185. url: "https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/prizeBackground.png", //图片地址
  186. r: 15, //圆角半径
  187. w: 350, //图片宽度
  188. h: 600, //图片高度
  189. p: 20 //图片内边距padding
  190. },
  191. title: {
  192. // 商品名称
  193. text: "", //文本
  194. fontSize: 26, //字体大小
  195. color: "#fff", //颜色
  196. lineHeight: 44, //行高#4F4F4F 100%
  197. mt: 90, //margin-top
  198. w: 310,
  199. align: "left"
  200. },
  201. mainImg: {
  202. // 商品图
  203. url: "", //图片地址
  204. r: 5, //圆角半径
  205. w: 160, //宽度
  206. h: 160, //高度
  207. mt: 270
  208. },
  209. codeImg: {
  210. // 小程序码
  211. url: "", //图片地址
  212. w: 60, //宽度
  213. h: 60, //高度
  214. r: 2, //圆角半径
  215. mt: 475
  216. },
  217. tips: []
  218. },
  219. // #endif
  220. };
  221. },
  222. onLoad(options) {
  223. if(options.toIndex) {
  224. this.toIndex()
  225. return
  226. }else {
  227. this.comfirmShow1 = true
  228. }
  229. this.ticketId = options.id
  230. // #ifdef MP-WEIXIN
  231. const res = uni.getMenuButtonBoundingClientRect()
  232. this.statusHeight = res.top //胶囊距离顶部
  233. // #endif
  234. this.getPrizeList()
  235. },
  236. onShow() {
  237. this.getUrl()
  238. },
  239. methods: {
  240. getPrizeList() {
  241. uni.showLoading({
  242. title: '加载中'
  243. });
  244. let data = {
  245. ticketId: this.ticketId
  246. }
  247. $http.post('/api/v1/mp/user/ticket/queryHitPrizeList', data).then(res => {
  248. uni.hideLoading();
  249. if (res.code == 0) {
  250. this.type = res.data.type
  251. res.data.prizeList.forEach(item => {
  252. let picUrlArr = item.picUrl.split(',')
  253. item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/340'
  254. item.prizeType = JSON.parse(item.prizeType)
  255. })
  256. if (res.data.prizeList.length == 1) {
  257. let item = res.data.prizeList[this.actionIndex]
  258. // this.posterData.title.text = item.title || ''
  259. this.posterData.title.text = item.title.length > 11 ? item.title.slice(0, 11).concat("...") : item.title ;
  260. this.posterData.mainImg.url = item.picUrl
  261. this.actionInfo = item
  262. $http.post('/api/v1/mp/user/ticket/cashPrize', {
  263. ticketId: this.ticketId,
  264. awardsId: item.awardsId,
  265. prizeId: item.prizeId
  266. }).then(res => {
  267. if (res.code == 0) {
  268. this.comfirmShow = true
  269. }
  270. })
  271. return
  272. }
  273. this.ticketId = res.data.ticketId
  274. this.total = this.prizeList.length
  275. this.prizeList = res.data.prizeList
  276. } else if (res.code == 1018) {
  277. this.tipShow = true
  278. } else {
  279. this.tipShow = true
  280. }
  281. }).catch(() => {
  282. uni.hideLoading();
  283. })
  284. },
  285. selectPrize(index) {
  286. this.actionIndex = index
  287. },
  288. confirmPrize() {
  289. let _this = this
  290. let item = _this.prizeList[_this.actionIndex]
  291. // this.posterData.title.text = item.title || ''
  292. this.posterData.title.text = item.title.length > 11 ? item.title.slice(0, 11).concat("...") : item.title ;
  293. this.posterData.mainImg.url = item.picUrl
  294. _this.actionInfo = item
  295. if (_this.prizeList.length > 1) {
  296. uni.showModal({
  297. title: '提示',
  298. content: '确定选择该奖品吗?',
  299. success(res) {
  300. if (res.confirm) {
  301. $http.post('/api/v1/mp/user/ticket/cashPrize', {
  302. ticketId: _this.ticketId,
  303. awardsId: item.awardsId,
  304. prizeId: item.prizeId
  305. }).then(res => {
  306. if (res.code == 0) {
  307. _this.comfirmShow = true
  308. }
  309. })
  310. }
  311. }
  312. })
  313. } else {
  314. $http.post('/api/v1/mp/user/ticket/cashPrize', {
  315. ticketId: _this.ticketId,
  316. awardsId: item.awardsId,
  317. prizeId: item.prizeId
  318. }).then(res => {
  319. if (res.code == 0) {
  320. _this.comfirmShow = true
  321. }
  322. })
  323. }
  324. },
  325. toIndex() {
  326. uni.switchTab({
  327. url: '/pages/index/index'
  328. })
  329. },
  330. back() {
  331. let pages = getCurrentPages();
  332. if (pages.length > 1) {
  333. uni.navigateBack({
  334. delta: 1
  335. })
  336. } else {
  337. uni.switchTab({
  338. url: '/pages/core/index'
  339. })
  340. }
  341. },
  342. toPrize(data) {
  343. if (data.value == 'goods') {
  344. uni.redirectTo({
  345. url: '/packagePrize/prize/index'
  346. })
  347. }
  348. if (data.value == 'coupon') {
  349. uni.redirectTo({
  350. url: '/packagePrize/prize/index?coupon=1'
  351. })
  352. }
  353. if (data.value == 'coupon_pkg') {
  354. uni.redirectTo({
  355. url: '/packagePrize/prize/index?coupon=1'
  356. })
  357. }
  358. if (data.value == 'coin') {
  359. uni.switchTab({
  360. url: '/pages/core/index'
  361. })
  362. }
  363. },
  364. toPrizeGoods(item) {
  365. if (item.prizeType.value == "goods") {
  366. this.getGoodsDetail(item.refId)
  367. }
  368. //门店优惠券
  369. if (item.prizeType.value == "coupon" || item.prizeType.value == "coupon_pkg") {
  370. this.getGoodsDetail(425)
  371. }
  372. // 盲豆
  373. if (item.prizeType.value == "coin") {
  374. this.getGoodsDetail(424)
  375. }
  376. },
  377. toUser() {
  378. uni.switchTab({
  379. url: '/pages/user/index'
  380. })
  381. },
  382. getGoodsDetail(id) {
  383. uni.showLoading({
  384. title: '加载中'
  385. });
  386. $http.post('/api/v1/mp/user/exchange/goods/detail', {
  387. noToken: true,
  388. goodsId: id
  389. }).then(res => {
  390. uni.hideLoading();
  391. if (res.code == 0) {
  392. this.detailShow = true
  393. // 处理富文本
  394. // #ifndef MP-ALIPAY
  395. const description = res.data.description.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"")
  396. .replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",
  397. ".png?imageView2/2/w/750\"");
  398. this.description = formatRichText(description);
  399. // #endif
  400. // #ifdef MP-ALIPAY
  401. res.data.description.split(".jpg\"").join(".jpg?imageView2/2/w/750\"")
  402. res.data.description.split(".jpeg\"").join(".jpeg?imageView2/2/w/750\"")
  403. res.data.description.split(".png\"").join(".png?imageView2/2/w/750\"")
  404. this.description = formatRichText(res.data.description);
  405. // #endif
  406. }
  407. }).catch(() => {
  408. uni.hideLoading();
  409. })
  410. },
  411. again() {
  412. let _this = this
  413. if (this.type == 'online') {
  414. uni.switchTab({
  415. url: '/pages/index/index'
  416. })
  417. } else {
  418. uni.scanCode({
  419. scanType: ['qrCode'],
  420. success(res) {
  421. const url = res.result
  422. let serialNo = urlParameter(url).id
  423. uni.redirectTo({
  424. url: `/pages/lucky/index?id=${ serialNo }&type=offline`
  425. })
  426. },
  427. fail() {
  428. uni.$u.toast('请扫二维码');
  429. }
  430. });
  431. }
  432. },
  433. getUrl() {
  434. //获取二维码
  435. $http.post('/api/v1/mp/user/share/code/generate', {
  436. boxId: this.boxId,
  437. type: "1",
  438. poster: "1",
  439. }).then(res => {
  440. this.posterData.codeImg.url = env.filePublic + res.data
  441. })
  442. },
  443. saveImg() {
  444. //下载海报
  445. this.$refs.shareCode.posterShow()
  446. },
  447. },
  448. onShareAppMessage(res) {
  449. return {
  450. title: '分享奖品',
  451. path: `/pages/index/index`,
  452. imageUrl: 'https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/sharePosterCover.png',
  453. }
  454. },
  455. //分享朋友圈
  456. onShareTimeline() {
  457. return {
  458. title: '分享奖品',
  459. query: `toIndex=true`,
  460. imageUrl: 'https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/sharePosterCover.png',
  461. }
  462. }
  463. }
  464. </script>
  465. <style lang="scss" scoped>
  466. .poster {
  467. display: flex;
  468. flex-direction: column;
  469. position: relative;
  470. width: 100%;
  471. height: 100vh;
  472. background: url(https://mp-public-test-1309783959.cos.ap-shanghai.myqcloud.com/EQCE9TSY4VTY2C4RCTPW.jpg) center center no-repeat;
  473. background-size: 100vw 100vh;
  474. overflow: hidden;
  475. }
  476. .choice {
  477. display: flex;
  478. flex-direction: column;
  479. position: relative;
  480. width: 100%;
  481. height: 100vh;
  482. background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/offline_prize_bkg.png) center center no-repeat;
  483. background-size: 100vw 100vh;
  484. overflow: hidden;
  485. // 返回
  486. &-navLeft {
  487. position: absolute;
  488. left: 34rpx;
  489. width: 66rpx;
  490. height: 66rpx;
  491. background-color: rgba(255, 255, 255, .36);
  492. border-radius: 50%;
  493. }
  494. // 标题
  495. &-title {
  496. padding-top: 12vh;
  497. margin-bottom: 72rpx;
  498. image {
  499. width: 484rpx;
  500. height: 108rpx;
  501. }
  502. }
  503. // 提示
  504. &-tip {
  505. &-content {
  506. width: 50vw;
  507. height: 56rpx;
  508. line-height: 56rpx;
  509. background: rgba(255, 211, 157, .44);
  510. border-radius: 24rpx;
  511. color: #FB900B;
  512. font-size: 30rpx;
  513. text-align: center;
  514. }
  515. }
  516. //下载海报
  517. &-download {
  518. margin-top: 50rpx;
  519. >image {
  520. width: 40rpx;
  521. height: 40rpx;
  522. }
  523. >view {
  524. font-size: 30rpx;
  525. font-weight: 500;
  526. color: #fff;
  527. }
  528. }
  529. // 奖品列表
  530. &-list {
  531. flex: 1;
  532. margin: 72rpx 48rpx 0;
  533. padding-bottom: 200rpx;
  534. overflow-y: auto;
  535. &-item {
  536. justify-content: space-between;
  537. background-color: #fff;
  538. border-radius: 12rpx;
  539. padding: 38rpx 24rpx;
  540. margin-bottom: 54rpx;
  541. .checkbox {
  542. width: 46rpx;
  543. height: 46rpx;
  544. border: 1px solid #F56D1B;
  545. border-radius: 50%;
  546. }
  547. .checkbox-action {
  548. background: #F56D1B;
  549. }
  550. .info {
  551. margin: 0 30rpx;
  552. flex: 1;
  553. justify-content: flex-start;
  554. image {
  555. width: 120rpx;
  556. height: 120rpx;
  557. margin-right: 34rpx;
  558. }
  559. &-content {
  560. height: 120rpx;
  561. flex: 1;
  562. align-items: flex-start;
  563. flex-direction: column;
  564. justify-content: space-between;
  565. &__title {
  566. width: 100%;
  567. height: 70rpx;
  568. font-size: 30rpx;
  569. line-height: 35rpx;
  570. }
  571. &__titletwo {
  572. width: 100%;
  573. height: 67rpx;
  574. font-size: 30rpx;
  575. line-height: 35rpx;
  576. overflow: hidden;
  577. }
  578. &__price {
  579. font-weight: bold;
  580. }
  581. }
  582. }
  583. .detail {
  584. color: #F56D1B;
  585. }
  586. }
  587. }
  588. &-box {
  589. margin-bottom: 34rpx;
  590. &-popup {
  591. flex-direction: column;
  592. width: 75vw;
  593. height: 38vh;
  594. background-color: #FFFFFF;
  595. border-radius: 22rpx;
  596. &__image {
  597. width: 65%;
  598. height: 65%;
  599. image {
  600. width: 100%;
  601. height: 100%;
  602. }
  603. }
  604. }
  605. }
  606. &-info {
  607. margin-bottom: 40rpx;
  608. &-content {
  609. width: 70vw;
  610. &-price {
  611. text-align: center;
  612. font-size: 40rpx;
  613. line-height: 40rpx;
  614. font-family: PingFang SC;
  615. font-weight: bold;
  616. color: #FFFFFF;
  617. margin-bottom: 20rpx;
  618. text {
  619. font-size: 28rpx;
  620. }
  621. }
  622. &-title {
  623. height: 36rpx;
  624. overflow: hidden;
  625. text-align: center;
  626. font-size: 36rpx;
  627. line-height: 36rpx;
  628. color: #FFFFFF;
  629. margin-bottom: 40rpx;
  630. }
  631. &-btn {
  632. &-content {
  633. position: relative;
  634. width: 70vw;
  635. image {
  636. width: 70vw;
  637. height: 112rpx;
  638. }
  639. &-txt {
  640. position: absolute;
  641. top: 0;
  642. height: 112rpx;
  643. line-height: 112rpx;
  644. font-size: 30rpx;
  645. text-align: center;
  646. color: #FFFFFF;
  647. }
  648. }
  649. }
  650. }
  651. }
  652. &-tip {
  653. .txt {
  654. width: 332rpx;
  655. height: 66rpx;
  656. line-height: 66rpx;
  657. text-align: center;
  658. background: rgba(255, 211, 157, .3);
  659. border-radius: 34rpx;
  660. font-size: 34rpx;
  661. font-weight: 500;
  662. color: #FB930D;
  663. }
  664. }
  665. }
  666. // 按钮
  667. .footer-fixed {
  668. position: fixed;
  669. bottom: var(--window-bottom);
  670. left: 0;
  671. right: 0;
  672. z-index: 11;
  673. // 设置ios刘海屏底部横线安全区域
  674. padding-bottom: constant(safe-area-inset-bottom);
  675. padding-bottom: env(safe-area-inset-bottom);
  676. &-btn {
  677. padding: 0 0 20rpx;
  678. position: relative;
  679. width: 70vw;
  680. image {
  681. width: 70vw;
  682. height: 112rpx;
  683. }
  684. &-txt {
  685. position: absolute;
  686. top: 0;
  687. height: 112rpx;
  688. line-height: 112rpx;
  689. font-size: 30rpx;
  690. text-align: center;
  691. color: #FFFFFF;
  692. }
  693. }
  694. .btn {
  695. padding: 20rpx 0;
  696. ::v-deep button {
  697. width: 640rpx;
  698. height: 90rpx;
  699. line-height: 90rpx;
  700. font-size: 36rpx;
  701. color: #fff;
  702. background-color: $uni-bg-color;
  703. border: none;
  704. border-radius: 20rpx;
  705. }
  706. }
  707. }
  708. .prize-detail {
  709. flex-direction: column;
  710. height: 60vh;
  711. &-title {
  712. padding: 40rpx 0;
  713. text-align: center;
  714. font-size: 34rpx;
  715. line-height: 34rpx;
  716. font-weight: bold;
  717. }
  718. &-content {
  719. width: 100vw;
  720. flex: 1;
  721. overflow-y: auto;
  722. }
  723. }
  724. .null-prize {
  725. display: flex;
  726. flex-direction: column;
  727. align-items: center;
  728. justify-content: center;
  729. width: 80vw;
  730. height: 320rpx;
  731. background-color: #FFFFFF;
  732. border: 1px solid rgba(187, 187, 187, 100);
  733. .btn {
  734. margin-top: 60rpx;
  735. width: 160rpx;
  736. height: 60rpx;
  737. line-height: 60rpx;
  738. border-radius: 8rpx;
  739. background-color: rgba(235, 112, 9, 100);
  740. color: rgba(255, 255, 255, 100);
  741. font-size: 28rpx;
  742. text-align: center;
  743. }
  744. }
  745. .confirm-prize {
  746. display: flex;
  747. flex-direction: column;
  748. align-items: center;
  749. justify-content: center;
  750. width: 80vw;
  751. padding: 40rpx 0;
  752. &-info {
  753. width: 80%;
  754. margin-bottom: 60rpx;
  755. justify-content: space-around;
  756. image {
  757. width: 150rpx;
  758. height: 200rpx;
  759. }
  760. .title {
  761. flex: 1;
  762. padding-left: 40rpx;
  763. }
  764. }
  765. &-tip {
  766. text-align: center;
  767. margin-bottom: 60rpx;
  768. text {
  769. padding-left: 24rpx;
  770. color: rgba(32, 163, 242, 100);
  771. }
  772. }
  773. &-btn {
  774. width: 80%;
  775. justify-content: space-around;
  776. .back {
  777. width: 160rpx;
  778. height: 60rpx;
  779. line-height: 60rpx;
  780. border-radius: 8rpx;
  781. color: rgba(235, 112, 9, 100);
  782. font-size: 28rpx;
  783. text-align: center;
  784. font-family: Microsoft Yahei;
  785. border: 1px solid rgba(235, 112, 9, 100);
  786. }
  787. .confirm {
  788. width: 160rpx;
  789. height: 60rpx;
  790. line-height: 60rpx;
  791. border-radius: 8rpx;
  792. background-color: rgba(235, 112, 9, 100);
  793. color: rgba(253, 253, 253, 100);
  794. font-size: 28rpx;
  795. text-align: center;
  796. }
  797. }
  798. }
  799. </style>