Lottery - 副本.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896
  1. <template>
  2. <view class="pages">
  3. <navbar ref="navbarRef" :config="config" :backColor="backColor"></navbar>
  4. <view class="page-content" :style="{backgroundImage: 'url('+activityInfo.imageUrl+')'}">
  5. <!-- <view class="Lottery-title">
  6. {{activityInfo.activityName}}
  7. </view> -->
  8. <view class="winning-c">
  9. <view class="winning-user" v-if="WinningUserList && WinningUserList.length > 0">
  10. <!-- 第一次进入,有数据, ,到最后一页替换数据之后在请求下一次数据,无数据时做30s轮询查询 -->
  11. <swiper class="winning-list" :disable-touch="true" circular="true" vertical="true" autoplay
  12. interval="3000" duration="1000" @change="WinningCurrent">
  13. <swiper-item class="winning-item-box" v-for="item in WinningUserList">
  14. <view class="winning-item zw-one-row">
  15. *恭喜用户:{{item.userName}}, 获得{{item.prizeName}}
  16. </view>
  17. <!-- <text>恭喜用户</text>
  18. <text>{{item.userName}}</text>
  19. <text>获得{{current}}</text>
  20. <text>{{item.prizeName}}</text> -->
  21. </swiper-item>
  22. </swiper>
  23. </view>
  24. </view>
  25. <!-- strDirection="vertical" -->
  26. <view class="pedestal-bg">
  27. <template v-if="prizeList.length">
  28. <almost-lottery :lotteryBg="lotteryBg" :actionBg="pointerBg" :strFontColors="['#542f10']"
  29. :strFontSize="28" :strMarginOutside="40" :imgMarginStr="40" :colors="colors"
  30. :canvasMarginOutside="100" :lottery-size="673" pointerPosition="middle" :ring-count="8"
  31. :duration="5" :imgDrawed="true" :imgWidth="imgSize" :imgHeight="imgSize" :canvasCached="false"
  32. :prize-list="prizeList" :prize-index="prizeIndex" @draw-before="handleDrawBefore"
  33. @reset-index="prizeIndex = -1" @draw-start="handleDrawStart" @draw-end="handleDrawEnd"
  34. @finish="handleDrawFinish" />
  35. </template>
  36. <!-- <image src="@/static/Lottery/pedestal.png" mode=""></image> -->
  37. <view class="share-btn" @click.stop="onShare()">
  38. 分享
  39. </view>
  40. </view>
  41. <view class="Lottery-info">
  42. <view class="Lottery-info-item zw-one-row">
  43. 次数:{{freeResidueNum}}
  44. </view>
  45. <view class="Lottery-info-item zw-one-row" v-if="activityInfo.pointExchangeLottery">
  46. 积分:{{integral}}
  47. </view>
  48. <!-- <view class="Lottery-info-item zw-one-row" @click="onWinningList()">
  49. 中奖记录
  50. </view> -->
  51. </view>
  52. <view class="winning-record">
  53. <text @click.stop="onWinningList()" class="record-text">中奖记录 <text class="iconfont_yige">&#xe65f;</text>
  54. </text>
  55. </view>
  56. <view class="activity-rule-box">
  57. <view class="activity-rule-top" />
  58. <view class="activity-rule">
  59. <view class="rule-title">
  60. 活动规则
  61. </view>
  62. <view class="rule-list" v-html="activityInfo.ruleExplain" />
  63. </view>
  64. <view class="activity-rule-boot" />
  65. </view>
  66. </view>
  67. <!-- 商品 -->
  68. <view class="goods-boxs">
  69. <view class="goods-box" v-if="goodsList && goodsList.length > 0">
  70. <view class="goods-module-title">
  71. 推荐商品
  72. </view>
  73. <view class="goods-item" v-for="item in goodsList"
  74. @click="goProductDetails('/pages/product/goods/goods?id=' + item.goodsId)">
  75. <!-- <image :src="item.cover" mode="aspectFill"></image> -->
  76. <view class="goods-img lazy-img">
  77. <u-image class="service-img" :src="item.goodsCover" mode="aspectFit" :lazy-load="true" />
  78. </view>
  79. <view class="goods-info">
  80. <view class="goods-title">{{item.goodsTitle}}</view>
  81. <view class="goods-price">
  82. <rich-text :nodes="$mUtil.priceBigSmall(item.goodsSalePrice)"></rich-text>
  83. <text class="line-price">¥ {{ item.goodsMarketPrice }}</text>
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. <EmptyDate v-else-if="status !== 'loading' && status" />
  89. </view>
  90. <!-- <loadMore
  91. posterUrl: {
  92. type: String,
  93. default: null
  94. },
  95. codeUrl: {
  96. type: String,
  97. default: null
  98. },v-if="goodsList.length > 0 || status === 'loading'" :status="status"></loadMore> -->
  99. <Winning ref="WinningRef" :activityJoinRecordId="activityJoinRecordId" />
  100. <sharePoster ref="sharePosterRef" :posterUrl="activityInfo.posterUrl" :codeUrl="codeurl"
  101. @onShareSuccess="onShareSuccess" />
  102. <!-- <template v-if="activityInfo.posterUrl">
  103. <share ref="shareRef" :posterUrl="activityInfo.posterUrl" :activityId="activityId" />
  104. </template> -->
  105. <!-- <jifenhint ref="jifenhintRef" :singleExchangePoints="activityInfo.singleExchangePoints"/> -->
  106. </view>
  107. </template>
  108. <script>
  109. import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue';
  110. // https://github.com/ialmost/almost-components_uniapp/blob/dev/Lottery/almost-lottery_sample/pages/index/index.vue
  111. // https://ext.dcloud.net.cn/plugin?id=1030
  112. import Winning from "./popup/Winning.vue"
  113. import CONFIG from "@/config/global.config.js"
  114. // import jifenhint from "./popup/jifenhint.vue"
  115. import {
  116. setPrizeLevel
  117. } from "./common.js"
  118. import {
  119. myUserInfo
  120. } from "@/api/government.js"
  121. import {
  122. getActivity,
  123. getActivityPrize,
  124. getActivityLottery,
  125. getActivityUserInfo,
  126. getWinningRecords,
  127. setActivityViewVolume,
  128. getActivityGoods,
  129. setShareRecord
  130. // getActivityUvRecord,
  131. // getActivityViewVolume_pv,
  132. // getActivityViewVolume_uv
  133. } from "@/api/Lottery.js"
  134. const app = getApp();
  135. export default {
  136. components: {
  137. AlmostLottery,
  138. Winning,
  139. // share,
  140. // jifenhint
  141. },
  142. data() {
  143. return {
  144. codeurl: null,
  145. location: null,
  146. config: {
  147. back: true,
  148. title: '转盘抽奖',
  149. color: 'white',
  150. backgroundColor: [0, '#fff'],
  151. statusBarFontColor: 'transparent',
  152. barPlaceholder: false
  153. },
  154. backColor: '',
  155. activityId: null, // 活动ID
  156. activityInfo: {},
  157. // 转盘
  158. lotteryBg: require("@/static/Lottery/circle.png"),
  159. pedestalBg: require("@/static/Lottery/pedestal.png"),
  160. pointerBg: require("@/static/Lottery/pointer.png"),
  161. colors: ["#F0DDAE", "#F6F0E7"],
  162. // 以下是奖品配置数据
  163. // 奖品数据
  164. prizeList: [],
  165. // 中奖下标
  166. prizeIndex: -1,
  167. prizeThanks: -1,
  168. activityJoinRecordId: null,
  169. // 抽奖次数
  170. freeResidueNum: 0,
  171. integral: 0,
  172. // 中奖用户
  173. current: 0,
  174. WinningUserList: [],
  175. cacheWinningUser: [],
  176. clearWinningTime: null,
  177. // 是否在抽奖
  178. isRotate: false,
  179. // ----商品----
  180. status: '',
  181. params: {
  182. page: 1,
  183. limit: 6
  184. },
  185. imgSize: 60,
  186. goodsList: [],
  187. Volume_Timeout: null
  188. };
  189. },
  190. onPageScroll(e) {
  191. // config: {
  192. // back: true,
  193. // title: '关注',
  194. // color: 'black',
  195. // backgroundColor: [1, '#fff'],
  196. // statusBarFontColor: 'black'
  197. // },
  198. if (e.scrollTop >= 50 && this.config.color === 'white') {
  199. this.config.color = 'black'
  200. this.config.backgroundColor = [1, '#fff']
  201. this.config.statusBarFontColor = 'black'
  202. this.backColor = '#999';
  203. this.$refs.navbarRef.init();
  204. } else if (e.scrollTop < 50 && this.config.color === 'black') {
  205. this.config.color = 'white'
  206. this.config.backgroundColor = [0, '#fff']
  207. this.config.statusBarFontColor = 'transparent';
  208. this.backColor = '';
  209. console.log('this.config = ', this.config)
  210. this.$refs.navbarRef.init();
  211. }
  212. },
  213. onLoad(opt) {
  214. this.location = app.globalData.location || null;
  215. this.activityId = opt.activityId || null
  216. this.codeurl = `${CONFIG.hostUrl}?URLType=BigTurnplate&activityId=${this.activityId}`
  217. // /api/activity/info/{activityId}
  218. this.Volume_Timeout = setTimeout(() => {
  219. if (this.Volume_Timeout) {
  220. this.setActivityViewVolume_();
  221. clearTimeout(this.Volume_Timeout);
  222. this.Volume_Timeout = null;
  223. }
  224. }, 3000)
  225. this.getActivityInfo()
  226. this.guessLike()
  227. },
  228. // onReachBottom() {
  229. // if (this.status == 'more') {
  230. // this.params.page++;
  231. // this.guessLike();
  232. // }
  233. // },
  234. onUnload() {
  235. clearTimeout(this.Volume_Timeout);
  236. this.Volume_Timeout = null;
  237. },
  238. methods: {
  239. // PV,PU记录
  240. setActivityViewVolume_() {
  241. setActivityViewVolume({
  242. activityId: this.activityId
  243. }).then(res => {})
  244. },
  245. onShare() {
  246. myUserInfo().then(res => {
  247. const data = res.data || null;
  248. if (!data) {
  249. uni.showToast({
  250. title: '请先登录',
  251. icon: 'none'
  252. })
  253. setTimeout(() => {
  254. uni.redirectTo({
  255. url: '/pages/login/index'
  256. })
  257. }, 1000)
  258. } else if (!this.activityInfo.posterUrl) {
  259. uni.showToast({
  260. title: '暂未配置分享内容',
  261. icon: 'none'
  262. });
  263. return
  264. } else {
  265. // this.$refs.shareRef.open()
  266. this.$refs.sharePosterRef.open();
  267. }
  268. })
  269. },
  270. // 获取活动详情
  271. getActivityInfo() {
  272. getActivity(this.activityId).then(res => {
  273. this.activityInfo = res.data || {};
  274. let list = this.activityInfo.prizes || [];
  275. const list_l = list.length;
  276. if (list_l < 8) {
  277. this.imgSize = 80
  278. } else {
  279. this.imgSize = 100
  280. }
  281. list.map((el, index) => {
  282. el.prizeId = el.activityPrizeId;
  283. el.prizeName = el.prizeName;
  284. el.prizeImage = el.imageUrl + '?x-oss-process=style/game_w_50';
  285. el.prizeChinese = setPrizeLevel(el.prizeGrade);
  286. // if (el.prizeGrade === 20) {
  287. // // 记录谢谢惠顾的下标,网络失败之后弹窗
  288. // this.prizeThanks = index
  289. // }
  290. return el
  291. });
  292. this.prizeList = list;
  293. // this.getActivityPrizeList();
  294. this.getActivityUserInfo_();
  295. this.getWinningRecords_();
  296. })
  297. },
  298. // 最新中奖记录
  299. getWinningRecords_(_cache = false) {
  300. try {
  301. clearTimeout(this.clearWinningTime)
  302. } catch (e) {};
  303. this.clearWinningTime = null;
  304. getWinningRecords(this.activityId).then(res => {
  305. const data = res.data
  306. if (data && data.length > 0) {
  307. if (_cache) {
  308. this.cacheWinningUser = data;
  309. } else {
  310. this.WinningUserList = data;
  311. };
  312. } else {
  313. this.clearWinningTime = setTimeout(() => {
  314. this.getWinningRecords_()
  315. }, 30000)
  316. }
  317. })
  318. },
  319. // 获取活动的用户信息
  320. getActivityUserInfo_() {
  321. getActivityUserInfo(this.activityId).then(res => {
  322. const val = res.data || {};
  323. this.freeResidueNum = val?.freeResidueNum || 0;
  324. this.integral = val?.integral || 0;
  325. })
  326. },
  327. // 获取奖品信息
  328. getActivityPrizeList() {
  329. getActivityPrize(this.activityId).then(res => {
  330. // prizeId 奖品对应 ID Number
  331. // prizeName 奖品名称 String
  332. // prizeStock 奖品库存 Number
  333. // prizeWeight 奖品权重 Number
  334. // prizeImage 奖品图片地址,网络图片仅支持http和https协议 String
  335. let list = res.data || [];
  336. list.map((el, index) => {
  337. // prizes
  338. el.prizeId = el.activityPrizeId;
  339. el.prizeName = el.prizeName;
  340. el.prizeImage = el.imageUrl + '?x-oss-process=style/game_w_50';
  341. console.log('el.prizeImage = ', el.prizeImage)
  342. el.prizeChinese = setPrizeLevel(el.prizeGrade);
  343. // if (el.prizeGrade === 20) {
  344. // // 记录谢谢惠顾的下标,网络失败之后弹窗
  345. // this.prizeThanks = index
  346. // }
  347. return el
  348. });
  349. this.prizeList = list;
  350. })
  351. },
  352. WinningCurrent(event) {
  353. const index = event.detail.current + 1;
  354. if (index >= this.WinningUserList.length) {
  355. if (this.cacheWinningUser.length > 0) {
  356. this.WinningUserList = this.cacheWinningUser;
  357. this.cacheWinningUser = [];
  358. }
  359. this.getWinningRecords_(true)
  360. }
  361. },
  362. // 本次抽奖开始之前
  363. async handleDrawBefore(callback) {
  364. // 当前正在抽奖
  365. if (this.isRotate) callback(false)
  366. this.isRotate = true
  367. // 这里需要处理你抽奖之前的逻辑
  368. // 请查看示例项目中的代码
  369. // 必须调用 callback 并传递一个布尔值,布尔值为 true 时,转盘才会开始旋转
  370. let flag = false
  371. try {
  372. if (this.activityInfo.areaLimit) {
  373. // 抽奖限制地区 - 检查是否定位
  374. if (!this.location || !this.location.city) {
  375. flag = false;
  376. uni.showModal({
  377. title: '提示',
  378. content: '当前抽奖需要定位信息,是否获取定位',
  379. confirmText: '获取定位信息',
  380. success: res => {
  381. if (res.confirm) {
  382. uni.showLoading({
  383. title: '获取中'
  384. })
  385. uni.getLocation({
  386. type: 'gcj02',
  387. geocode: true,
  388. cacheTimeout: 30 * 60,
  389. success: Location => {
  390. const address = Location.address;
  391. // 缓存全局的定位信息
  392. app.globalData.location = address;
  393. this.location = address;
  394. if (!address.city) {
  395. uni.showToast({
  396. title: '获取定位失败',
  397. icon: 'none'
  398. })
  399. } else {
  400. uni.showToast({
  401. title: '获取定位成功,请开始抽奖',
  402. icon: 'none'
  403. })
  404. }
  405. },
  406. fail: LocationErr => {
  407. uni.showToast({
  408. title: '获取定位失败',
  409. icon: 'none'
  410. })
  411. },
  412. complete: () => {
  413. uni.hideLoading()
  414. // console.log('145')
  415. }
  416. })
  417. } else if (res.cancel) {
  418. console.log('用户点击取消');
  419. }
  420. }
  421. });
  422. throw new Error('')
  423. };
  424. };
  425. if (this.freeResidueNum > 0) {
  426. flag = true
  427. } else if (this.activityInfo.pointExchangeLottery) {
  428. flag = false
  429. // 当允许积分抽奖的时候
  430. // if (this.integral >= this.activityInfo.singleExchangePoints) {
  431. // const Modal = await uni.showModal({
  432. // content: `是否消耗${this.activityInfo.singleExchangePoints}抽一次奖`,
  433. // });
  434. // flag = Modal[1].confirm || false;
  435. // } else {
  436. // uni.showToast({
  437. // title: '当前积分不够抽一次',
  438. // icon: 'none'
  439. // })
  440. // }
  441. const Modal = await uni.showModal({
  442. content: `是否消耗${this.activityInfo.singleExchangePoints}抽一次奖`,
  443. });
  444. flag = Modal[1].confirm || false;
  445. } else {
  446. // flag = false
  447. flag = true
  448. // uni.showToast({
  449. // title: '当前抽奖次数已用完',
  450. // icon: 'none'
  451. // })
  452. };
  453. } catch (e) {
  454. //TODO handle the exception
  455. }
  456. this.isRotate = flag
  457. callback(flag)
  458. },
  459. // 本次抽奖开始
  460. handleDrawStart() {
  461. console.log('this.activityInfo.areaLimit = ', this.activityInfo.areaLimit)
  462. const c_y = this.location?.city || undefined
  463. // console.log('本次抽奖开始')
  464. // 这里需要处理你的抽奖逻辑,并得出中奖物品的 prizeIndex
  465. // 请查看示例项目中的代码
  466. this.activityJoinRecordId = null;
  467. getActivityLottery({
  468. activityId: this.activityId,
  469. cityName: c_y
  470. }).then(res => {
  471. const val = res.data;
  472. try {
  473. this.prizeList.forEach((el, index) => {
  474. if (el.activityPrizeId === val.prizeId) {
  475. // console.log('抽奖成功 = ', index)
  476. this.prizeIndex = index;
  477. this.activityJoinRecordId = val.activityJoinRecordId;
  478. throw new Error('')
  479. }
  480. })
  481. } catch (e) {
  482. //TODO handle the exception
  483. }
  484. }).catch(err =>
  485. this.isRotate = false)
  486. },
  487. // 本次抽奖结束
  488. handleDrawEnd() {
  489. // console.log('handleDrawEnd =旋转结束,执行拿到结果后到逻辑')
  490. this.getActivityUserInfo_();
  491. // 完成抽奖后,这里处理你拿到结果后的逻辑
  492. const prizeVal = this.prizeList[this.prizeIndex];
  493. this.isRotate = false
  494. this.$refs.WinningRef.onWinning(prizeVal)
  495. },
  496. // 抽奖转盘绘制完成
  497. handleDrawFinish(res) {
  498. // 抽奖转盘准备就绪后,这里处理你的逻辑
  499. // 请查看示例项目中的代码
  500. // console.log('抽奖转盘绘制完成')
  501. },
  502. // 查看自己得中奖信息
  503. onWinningList() {
  504. uni.navigateTo({
  505. url: '/pages/game/winning-list'
  506. })
  507. },
  508. // --------商品---------------
  509. /**猜你喜欢 */
  510. guessLike() {
  511. this.status = 'loading';
  512. getActivityGoods({
  513. page: this.params.page,
  514. limit: this.params.limit,
  515. activityId: this.activityId
  516. }).then(res => {
  517. this.goodsList = res.rows
  518. // if (res && res.code == 200) {
  519. // this.goodsList = this.params.page == 1 ? res.rows : this.goodsList.concat(res.rows);
  520. // if (res.total <= res.page.currPage) {
  521. // this.status = "noMore";
  522. // } else {
  523. // this.status = "more";
  524. // }
  525. // // console.log(this.goodsList)
  526. // }
  527. }).catch(err => {
  528. // this.status = "noMore";
  529. })
  530. // this.$http.get(`/goods/smart`, {
  531. // page: this.params.page,
  532. // limit: this.params.limit,
  533. // }).then((res) => {
  534. // if (res && res.code == 200) {
  535. // this.goodsList = this.params.page == 1 ? res.page.list : this.goodsList.concat(res.page
  536. // .list);
  537. // if (res.page.totalPage <= res.page.currPage) {
  538. // this.status = "noMore";
  539. // } else {
  540. // this.status = "more";
  541. // }
  542. // // console.log(this.goodsList)
  543. // }
  544. // }).catch(err => {
  545. // this.status = "noMore";
  546. // })
  547. },
  548. goProductDetails(path) {
  549. uni.navigateTo({
  550. url: path
  551. })
  552. },
  553. //分享成功
  554. onShareSuccess(type) {
  555. // this.$emit('onShareSuccess', "WeChat")download
  556. let shareMode = null;
  557. switch (type) {
  558. case 'download':
  559. shareMode = 0;
  560. break;
  561. case 'WeChat':
  562. shareMode = 1;
  563. break;
  564. }
  565. setShareRecord({
  566. activityId: _this.activityId,
  567. shareMode: shareMode
  568. }).then(res => {
  569. console.log("success:1 图片已成功保存到相册");
  570. })
  571. }
  572. },
  573. watch: {
  574. // cacheWinningUser: {
  575. // handler(newV, oldA) {
  576. // if(newV)
  577. // },
  578. // immediate: true
  579. // }
  580. }
  581. }
  582. </script>
  583. <style lang="scss" scoped>
  584. $padd_: 28rpx;
  585. .pages {
  586. width: 750rpx;
  587. overflow: hidden;
  588. background-color: #C90700;
  589. }
  590. .page-content {
  591. width: 100%;
  592. // height: 1432rpx;
  593. background-color: #fff;
  594. padding-top: 353rpx;
  595. // min-height: 100vh;
  596. background-size: 100% 1432rpx;
  597. background-repeat: no-repeat;
  598. }
  599. .winning-c {
  600. width: 100%;
  601. height: 163rpx;
  602. padding: 40rpx 0;
  603. }
  604. .Lottery-title {
  605. width: 100%;
  606. font-size: 40rpx;
  607. color: #fff;
  608. font-weight: 600;
  609. text-align: center;
  610. padding: 80rpx;
  611. }
  612. .winning-user {
  613. width: 100%;
  614. height: 83rpx;
  615. // padding: 0 20rpx 60rpx;
  616. box-sizing: border-box;
  617. background: linear-gradient(90deg, rgba(222, 28, 64, 0.00) 11%, #b10424 48%, rgba(222, 28, 64, 0.00) 89%);
  618. .winning-list {
  619. // width: 100%;
  620. height: 83rpx;
  621. padding: 0 80rpx;
  622. // background-color: red;
  623. border-radius: 40rpx;
  624. .winning-item-box {
  625. width: 100%;
  626. display: flex;
  627. align-items: center;
  628. font-size: 26rpx;
  629. font-family: PingFang SC, PingFang SC-Light;
  630. font-weight: 300;
  631. color: #ffffff;
  632. .winning-item {
  633. width: 100%;
  634. text-align: center;
  635. }
  636. }
  637. }
  638. }
  639. .pedestal-bg {
  640. position: relative;
  641. width: 100%;
  642. // height: 673rpx; + 217
  643. height: 875rpx;
  644. background: url("@/static/Lottery/pedestal.png") no-repeat center bottom;
  645. background-size: 429rpx 217rpx;
  646. .share-btn {
  647. position: absolute;
  648. right: 30rpx;
  649. bottom: 20rpx;
  650. width: 120rpx;
  651. height: 120rpx;
  652. background: linear-gradient(180deg, #c90700, #981a15);
  653. // border: 1rpx solid rgba(255, 255, 255, 0.12);
  654. border-radius: 60rpx;
  655. box-shadow: 0px -1rpx 34rpx 0px rgba(255, 199, 199, 0.16) inset;
  656. text-align: center;
  657. line-height: 119rpx;
  658. font-size: 36rpx;
  659. font-family: PingFang SC, PingFang SC-Bold;
  660. font-weight: 700;
  661. color: #ffffff;
  662. }
  663. }
  664. .Lottery-info {
  665. display: flex;
  666. justify-content: center;
  667. align-items: center;
  668. padding: 13rpx $padd_ 14rpx;
  669. .Lottery-info-item {
  670. width: calc(50% - 10rpx);
  671. flex-shrink: 0;
  672. height: 64rpx;
  673. line-height: 64rpx;
  674. text-align: center;
  675. padding: 0 20rpx;
  676. background: url("@/static/Lottery/bg_2.png") no-repeat center center;
  677. background-size: 100% 100%;
  678. font-size: 28rpx;
  679. // font-family: .PingFang SC, .PingFang SC-Light;
  680. // font-weight: 300;
  681. color: #542f10;
  682. margin-right: 20rpx;
  683. &:last-child {
  684. margin-right: 0;
  685. }
  686. }
  687. }
  688. // <view class="winning-record">
  689. // <text class="record-text">中奖记录</text>
  690. // </view>
  691. .winning-record {
  692. padding: 20rpx $padd_;
  693. text-align: right;
  694. font-weight: 600;
  695. font-size: 28rpx;
  696. font-weight: 500;
  697. color: #fff;
  698. .iconfont_yige {
  699. font-size: 26rpx;
  700. color: #fff;
  701. }
  702. }
  703. .activity-rule-box {
  704. padding: 0 $padd_;
  705. }
  706. .activity-rule-top {
  707. width: 100%;
  708. height: 40rpx;
  709. background: url("@/static/Lottery/bg_1.png") no-repeat top center;
  710. background-size: 100% 398rpx;
  711. }
  712. .activity-rule-boot {
  713. width: 100%;
  714. height: 40rpx;
  715. background: url("@/static/Lottery/bg_1.png") no-repeat bottom center;
  716. background-size: 100% 398rpx;
  717. }
  718. .activity-rule {
  719. padding: 0 40rpx;
  720. background: url("@/static/Lottery/bg_1.png") no-repeat center center;
  721. background-size: 100% 10000%;
  722. .rule-title {
  723. // font-size: 32rpx;
  724. font-weight: 600;
  725. font-size: 28rpx;
  726. // font-family: .PingFang SC, .PingFang SC-Medium;
  727. font-weight: 500;
  728. color: #1a1a1a;
  729. }
  730. .rule-list {
  731. // padding-top: 18rpx;
  732. // font-size: 24rpx;
  733. // font-weight: 300;
  734. // color: #666666;
  735. /deep/ img,
  736. /deep/ video {
  737. max-width: 100%;
  738. }
  739. }
  740. }
  741. .goods-boxs {
  742. padding: 90rpx $padd_ 0;
  743. }
  744. .goods-box {
  745. background: #fff4ea;
  746. padding: 92rpx 20rpx 10rpx;
  747. display: flex;
  748. flex-wrap: wrap;
  749. width: 100%;
  750. margin-top: $zw-gap;
  751. border: 6rpx solid #e72726;
  752. border-radius: 10rpx;
  753. display: flex;
  754. justify-content: space-between;
  755. align-items: stretch;
  756. position: relative;
  757. .goods-module-title {
  758. position: absolute;
  759. left: 50%;
  760. top: -40rpx;
  761. transform: translateX(-50%);
  762. width: 337rpx;
  763. height: 114rpx;
  764. text-align: center;
  765. line-height: 80rpx;
  766. background: url('@/static/Lottery/goods.png') no-repeat center center;
  767. background-size: 100% 100%;
  768. font-size: 28rpx;
  769. // font-family: PingFang SC, PingFang SC-Bold;
  770. font-weight: 700;
  771. color: #ffffff;
  772. }
  773. .goods-item {
  774. width: 316rpx;
  775. height: 482rpx;
  776. // margin-right: 18rpx;
  777. margin-bottom: 38rpx;
  778. background: #ffffff;
  779. border-radius: 18rpx;
  780. overflow: hidden;
  781. box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
  782. // &:nth-child(2n) {
  783. // margin-right: 0;
  784. // }
  785. .goods-img {
  786. width: 316rpx;
  787. height: 316rpx;
  788. border-radius: 18rpx 18rpx 0 0;
  789. vertical-align: middle;
  790. }
  791. .goods-info {
  792. padding: 0 20rpx 20rpx;
  793. padding-top: 14rpx;
  794. height: calc(100% - 316rpx);
  795. display: flex;
  796. flex-direction: column;
  797. justify-content: space-between;
  798. .goods-title {
  799. // height: 90rpx;
  800. margin-bottom: 10rpx;
  801. overflow: hidden;
  802. text-overflow: ellipsis;
  803. display: -webkit-box;
  804. -webkit-box-orient: vertical;
  805. -webkit-line-clamp: 2;
  806. }
  807. .goods-price {
  808. display: flex;
  809. align-items: baseline;
  810. color: #FF6600;
  811. font-size: 36rpx;
  812. .line-price {
  813. font-size: 22rpx;
  814. color: #999999;
  815. margin-left: 16rpx;
  816. text-decoration: line-through;
  817. }
  818. }
  819. }
  820. }
  821. }
  822. </style>