You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

591 lines
13 KiB

10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
  1. <template>
  2. <view class="prizeDraw bx">
  3. <!-- <u-loading-page :loading="loading" loadingText="" style="z-index: 999;" bgColor="#000"></u-loading-page> -->
  4. <!-- 初始页面 -->
  5. <!-- <pageInit></pageInit> -->
  6. <view class="title" style="margin-top: 10rpx;">
  7. {{ $t('page.prizeDraw.title_1') }}
  8. </view>
  9. <view class="profit">
  10. <view class="img-box">
  11. <image :src="vipInfo.icon" mode="aspectFit"></image>
  12. </view>
  13. {{ userInfo.profit }}% {{ $t('page.prizeDraw.profit') }}
  14. </view>
  15. <view class="title">
  16. {{ $t('page.prizeDraw.title_2') }}
  17. </view>
  18. <view class="prize_drone">
  19. <scroll-view :scroll-left="scrollLeft"
  20. scroll-x="true"
  21. lower-threshold="6"
  22. @scrolltolower="scrolltolower">
  23. <view @mouseenter="cleanTime" class="banner" style="height: 370rpx;">
  24. <view @click="gotoDetail(item.url)" v-for="(item, index) in banner" :key="index">
  25. <img :src="item.image.split(',')[0]" width="100%" />
  26. </view>
  27. </view>
  28. </scroll-view>
  29. <view class="banner3d">
  30. <view @click="gotoDetail(item.url)" v-for="(item, index) in
  31. banner3d" :class="{['banner3d_item_' + item.index] : true}"
  32. :key="item.id">
  33. <img :src="item.image" width="100%" />
  34. </view>
  35. </view>
  36. </view>
  37. <view class="title" style="font-size: 38rpx;margin-top: 60rpx;">
  38. ({{ userInfo.encourageNum }} / {{ userInfo.encourageSum }})
  39. </view>
  40. <view class="btn" @click="submit">
  41. {{ $t('page.prizeDraw.Start') }}
  42. </view>
  43. <view class="amount">
  44. <view style="font-size: 28rpx;font-weight: normal;" class="">
  45. {{ $t('page.prizeDraw.frozen_amount') }}
  46. </view>
  47. <view style="color: #333;">
  48. USDT <text style="margin-left: 10rpx;font-size: 40rpx;">
  49. {{ userInfo.freezeMoney }}
  50. </text>
  51. </view>
  52. </view>
  53. <view class="member-list">
  54. <view class="member-item">
  55. <view class="img-box">
  56. <image src="/static/prizeDraw/23.png" mode="aspectFit"></image>
  57. </view>
  58. <view style="font-size: 28rpx;font-weight: normal;" class="title">
  59. {{ $t('page.prizeDraw.today_profit') }}</view>
  60. <view class="menber-descript">USDT {{ userInfo.todayMoney }}</view>
  61. <view class="equity-list">
  62. <view class="equity-item">
  63. {{ $t('page.prizeDraw.title_3') }}
  64. </view>
  65. </view>
  66. </view>
  67. <view class="member-item">
  68. <view class="img-box">
  69. <image src="/static/prizeDraw/6.png" mode="aspectFit"></image>
  70. </view>
  71. <view style="font-size: 28rpx;font-weight: normal;" class="title">
  72. {{ $t('page.prizeDraw.account_balance') }}</view>
  73. <view class="menber-descript">USDT {{ userInfo.money }}</view>
  74. <view class="equity-list">
  75. <view class="equity-item">
  76. {{ $t('page.prizeDraw.title_4') }}
  77. </view>
  78. </view>
  79. </view>
  80. </view>
  81. <view class="notice">
  82. <view style="
  83. font-size: 36rpx;">
  84. {{ $t('page.prizeDraw.important_notice') }}
  85. </view>
  86. <view class="notice-list">
  87. <view style="font-size: 30rpx;" class="notice-item">
  88. {{ $t('page.prizeDraw.notice_item_1') }}
  89. </view>
  90. <view style="font-size: 30rpx;" class="notice-item">
  91. {{ $t('page.prizeDraw.notice_item_2') }}
  92. </view>
  93. </view>
  94. </view>
  95. <sTabbar select="2" />
  96. <u-popup :show="show" mode="bottom" @close="show = false;$play()">
  97. <view style="font-size: 35rpx;text-align: center;
  98. font-weight: 900;padding: 20rpx;">
  99. {{ $t(msg == '31' ? 'message.31' : 'page.prizeDraw.rating_submission') }}
  100. </view>
  101. <view style="display: flex;justify-content: center;">
  102. <img :src="product.image" width="150rpx" />
  103. </view>
  104. <view style="color: #fff;font-size: 35rpx;text-align: center;
  105. font-weight: 900;">
  106. {{ product.subTitle }}
  107. </view>
  108. <view style="display: flex;justify-content: space-around;
  109. margin-top: 30rpx;">
  110. <view>
  111. {{ $t('page.prizeDraw.Total_Amount') }}
  112. </view>
  113. <view>
  114. {{ $t('page.prizeDraw.profit') }}
  115. </view>
  116. </view>
  117. <view style="display: flex;justify-content: space-around;
  118. margin-top: 30rpx;font-weight: 900;">
  119. <view>
  120. USDT <text style="font-size: 40rpx;">{{ product.price }}</text>
  121. </view>
  122. <view>
  123. USDT <text style="font-size: 40rpx;">{{ product.giveMoney }}</text>
  124. </view>
  125. </view>
  126. <view style="display: flex;justify-content: space-between;
  127. border-top: 1px solid #555;padding: 30rpx;margin-top: 30rpx;">
  128. <view class="">
  129. {{ $t('page.prizeDraw.Creation_time') }}
  130. </view>
  131. <view class="">
  132. {{ product.createTime }}
  133. </view>
  134. </view>
  135. <view style="display: flex;justify-content: space-between;
  136. border-top: 1px solid #555;border-bottom: 1px solid #555;
  137. padding: 30rpx;align-items: center;">
  138. <view class="">
  139. {{ $t('page.prizeDraw.Rating_No') }}
  140. </view>
  141. <view class="">
  142. {{ product.id }}
  143. </view>
  144. </view>
  145. <view class="btn" @click="payOrder">
  146. {{ $t('page.prizeDraw.submit') }}
  147. </view>
  148. </u-popup>
  149. <review :show="reviewShow" @close="reviewClose" :oid="product.id" />
  150. <turntable :show="turntableShow" @start="getUserInfo" :info="userInfo" @close="turntableShow = false" />
  151. <luckyAnimation ref="an" @close="startSubmit"></luckyAnimation>
  152. </view>
  153. </template>
  154. <script>
  155. import sTabbar from '@/components/base/tabBar.vue'
  156. import review from '@/components/review/review.vue';
  157. import turntable from '@/components/turntable.vue';
  158. import { debounce } from '@/utils/base.js'
  159. import pageInit from '@/components/pageInit/pageInit.vue'
  160. import luckyAnimation from '../../components/luckyAnimation/luckyAnimation.vue';
  161. export default {
  162. components: {
  163. sTabbar,
  164. review,
  165. turntable,
  166. pageInit,
  167. luckyAnimation
  168. },
  169. data() {
  170. return {
  171. loading: false,
  172. turntableShow: false,
  173. scrollLeft: 0,
  174. banner: [],
  175. banner3d: [],
  176. invt: null,
  177. userInfo: {},
  178. product: {},
  179. show: false,
  180. reviewShow: false,
  181. vipInfo: {},
  182. msg : null,
  183. isSubmit : false,
  184. index3d : 0,
  185. }
  186. },
  187. onShow() {
  188. this.getList();
  189. this.getUserInfo()
  190. },
  191. onHide() {
  192. this.end()
  193. },
  194. methods: {
  195. getUserInfo() {
  196. this.request('userInfo').then(res => {
  197. if (res.code == 200) {
  198. this.userInfo = res.result.userInfo
  199. this.vipInfo = res.result.vip
  200. }
  201. })
  202. },
  203. scrolltolower(){
  204. this.scrollLeft = 0
  205. },
  206. reviewClose(){
  207. this.reviewShow = false;
  208. if(this.userInfo.bigNum > 0){
  209. this.turntableShow = true;
  210. }
  211. },
  212. startSubmit : debounce(function(){
  213. this.request('createOrder').then(res => {
  214. this.getUserInfo()
  215. this.isSubmit = false
  216. if (res.code == 200) {
  217. this.msg = res.message
  218. this.product = res.result
  219. this.show = true
  220. }
  221. }).catch(err => {
  222. this.isSubmit = false
  223. })
  224. }, 500),
  225. submit() {
  226. this.$play()
  227. if(this.isSubmit){
  228. return
  229. }
  230. this.isSubmit = true
  231. this.$refs.an.start()
  232. },
  233. payOrder() {
  234. this.$play()
  235. this.asyncLoading().then(res => {
  236. this.request('pay', {}, {
  237. id: this.product.id
  238. }).then(res => {
  239. this.show = false
  240. if (res.code == 200) {
  241. this.reviewShow = true
  242. }
  243. })
  244. })
  245. },
  246. getList() {
  247. this.end()
  248. this.loading = true
  249. this.banner = []
  250. this.banner3d = []
  251. Promise.all([this.getShopList(),this.getShopScroll()]).then(res => {
  252. // this.loading = false
  253. this.start()
  254. })
  255. },
  256. //获取商品列表
  257. getShopList(){
  258. return this.request('getAppBanner', {}, this.queryParams).then(res => {
  259. if (res.code == 200) {
  260. this.banner = res.result
  261. }
  262. })
  263. },
  264. //获取App滚动列表
  265. getShopScroll(){
  266. return this.request('appScroll').then(res => {
  267. if (res.code == 200) {
  268. res.result.map((item, index) => {
  269. item.index = index
  270. })
  271. this.banner3d = res.result
  272. }
  273. })
  274. },
  275. async asyncLoading(){
  276. return new Promise((resolve,reject) => {
  277. //显示加载框
  278. uni.showLoading({
  279. title: this.$t('page.prizeDraw.loading')
  280. });
  281. setTimeout(() => {
  282. uni.hideLoading();
  283. resolve()
  284. },500)
  285. })
  286. },
  287. start() {
  288. this.banner.push(this.banner[0])
  289. this.banner.push(this.banner[1])
  290. let self = this
  291. this.invt = setInterval(next, 20)
  292. let i = 150
  293. function next() {
  294. // 平面图移动
  295. self.scrollLeft++
  296. // 3d图移动
  297. i++
  298. if (i >= 60) {
  299. i = 0
  300. self.index3d++
  301. self.index3d %= self.banner3d.length
  302. self.banner3d.forEach(n => {
  303. if(n.index != 4){
  304. n.index = 4
  305. }
  306. })
  307. //0
  308. self.banner3d[self.index3d].index = 0
  309. //6
  310. self.banner3d[self.index3d != 0 ?
  311. self.index3d - 1 :
  312. self.banner3d.length - 1].index = 6
  313. //5
  314. self.banner3d[self.index3d >= 2 ?
  315. self.index3d - 2 :
  316. self.banner3d.length - 2].index = 5
  317. //1
  318. self.banner3d[(self.index3d + 1) % self.banner3d.length].index = 1
  319. //2
  320. self.banner3d[(self.index3d + 2) % self.banner3d.length].index = 2
  321. //3
  322. self.banner3d[(self.index3d + 3) % self.banner3d.length].index = 3
  323. // self.banner3d.forEach(n => {
  324. // n.index++
  325. // n.index %= self.banner3d.length
  326. // })
  327. }
  328. }
  329. },
  330. end() {
  331. if (this.invt) {
  332. clearInterval(this.invt)
  333. this.invt = null
  334. }
  335. },
  336. //商品跳转
  337. gotoDetail(url){
  338. this.$play()
  339. if(url){
  340. window.open(url)
  341. }
  342. }
  343. },
  344. }
  345. </script>
  346. <style scoped lang="scss">
  347. .prizeDraw {
  348. // color: #fff;
  349. background-size: 100%;
  350. background-repeat: no-repeat;
  351. background-position: 0rpx -210rpx;
  352. padding-bottom: 150rpx;
  353. width: 750rpx;
  354. // background-image: url('@/static/prizeDraw/bj.jpg');
  355. background-size: 100%;
  356. /deep/ .uni-scroll-view::-webkit-scrollbar {
  357. width: 0;
  358. height: 0;
  359. }
  360. .title {
  361. font-weight: 900;
  362. text-align: center;
  363. font-size: 28rpx;
  364. }
  365. .profit {
  366. position: relative;
  367. margin: 0 auto;
  368. padding: 10rpx 50rpx;
  369. font-weight: 900;
  370. background-color: $uni-bg-color-app;
  371. color: $uni-text-color-inverse;
  372. width: fit-content;
  373. border-radius: 20rpx;
  374. margin: 30rpx auto;
  375. .img-box {
  376. display: flex;
  377. justify-content: center;
  378. width: 90rpx;
  379. position: absolute;
  380. top: 50%;
  381. left: -40rpx;
  382. transform: translateY(-50%);
  383. image {
  384. width: 70rpx;
  385. height: 70rpx;
  386. }
  387. }
  388. }
  389. .prize_drone {
  390. margin-top: 20rpx;
  391. .banner {
  392. display: flex;
  393. &>view {
  394. width: calc(50% - 20rpx);
  395. flex-shrink: 0;
  396. margin: 0 10rpx;
  397. cursor: pointer;
  398. img {
  399. display: block;
  400. width: 90%;
  401. margin: 0rpx auto;
  402. }
  403. }
  404. }
  405. .banner3d {
  406. position: relative;
  407. height: 180rpx;
  408. margin-top: 100rpx;
  409. &>view {
  410. width: 220rpx;
  411. height: 220rpx;
  412. position: absolute;
  413. left: 265rpx;
  414. transition: all .8s;
  415. img {
  416. display: block;
  417. width: 85%;
  418. height: 85%;
  419. margin: 0rpx auto;
  420. }
  421. }
  422. .banner3d_item_0 {
  423. z-index: 20;
  424. transform: translateX(0) scale(1.6);
  425. }
  426. .banner3d_item_1 {
  427. z-index: 19;
  428. transform: translateX(230rpx) scale(.9);
  429. }
  430. .banner3d_item_2 {
  431. z-index: 17;
  432. transform: translateX(130rpx) scale(.7);
  433. }
  434. .banner3d_item_3 {
  435. z-index: 16;
  436. transform: translateX(25rpx) scale(0.5);
  437. }
  438. .banner3d_item_4 {
  439. z-index: 16;
  440. transform: translateX(-25rpx) scale(0.01);
  441. }
  442. .banner3d_item_5 {
  443. z-index: 18;
  444. transform: translateX(-130rpx) scale(0.7);
  445. }
  446. .banner3d_item_6 {
  447. z-index: 19;
  448. transform: translateX(-230rpx) scale(.9);
  449. }
  450. }
  451. }
  452. .btn {
  453. background-color: $uni-bg-color-app;
  454. color: $uni-text-color-inverse;
  455. font-weight: 900;
  456. margin: 20rpx 40rpx;
  457. padding: 10rpx 20rpx;
  458. font-size: 46rpx;
  459. text-align: center;
  460. border-radius: 24rpx;
  461. }
  462. .amount {
  463. display: flex;
  464. margin: 20rpx 40rpx;
  465. justify-content: space-between;
  466. border: 3px solid #777;
  467. padding: 20rpx;
  468. font-weight: 900;
  469. color: #aaa;
  470. align-items: center;
  471. }
  472. .member-list {
  473. display: flex;
  474. flex-wrap: wrap;
  475. justify-content: space-between;
  476. margin: 10rpx 40rpx;
  477. .member-item {
  478. box-sizing: border-box;
  479. padding: 15rpx;
  480. width: calc(50% - 10rpx);
  481. border-radius: 10rpx;
  482. border: 3px solid #777;
  483. .img-box {
  484. display: flex;
  485. justify-content: center;
  486. width: 100%;
  487. align-items: center;
  488. padding-top: 20rpx;
  489. image {
  490. width: 130rpx;
  491. height: 130rpx;
  492. }
  493. }
  494. .menber-descript {
  495. text-align: center;
  496. color: $uni-text-color;
  497. font-size: 34rpx;
  498. margin-top: 10rpx;
  499. font-weight: 900;
  500. }
  501. .equity-list {
  502. color: $uni-text-color;
  503. text-align: center;
  504. .equity-item {
  505. position: relative;
  506. font-size: 26rpx;
  507. }
  508. }
  509. }
  510. }
  511. .notice {
  512. margin: 20rpx 40rpx;
  513. font-size: 32rpx;
  514. .notice-list {
  515. color: $uni-text-color;
  516. }
  517. }
  518. }
  519. </style>