show-result.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616
  1. <template>
  2. <uni-popup class="result-popup-main" ref="prize" mode="top" :mask="false">
  3. <view class="result-popup">
  4. <view :class="['prize', explode && 'show']">
  5. <view class="prize_box">
  6. <view class="prize_close" @click="close()"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
  7. <!-- <view class="prize-top" :class="`prize-top-${mode}`">
  8. <image src="/static/image/result/gaizi@2x.png" mode="aspectFit"></image>
  9. </view -->
  10. >
  11. <!-- 1开 -->
  12. <view :class="['prize_shop', 'center', 'onebox', 'tag-' + tag, scale && 'prize_shop_scale']" v-if="mode == 0">
  13. <view class="spining"></view>
  14. <view class="left-top-tag">
  15. <image class="tag-img" :src="tagImg" mode="aspectFit"></image>
  16. <text class="tag-text">{{ tagText }}</text>
  17. </view>
  18. <image class="one" v-if="prizedata && prizedata.prizeInfo" :src="prizedata.prizeInfo[0].image" mode="widthFix"></image>
  19. <text class="colorblack" v-if="prizedata && prizedata.prizeInfo">{{ prizedata.prizeInfo[0].goods_name }}</text>
  20. <text class="colorblack" v-if="prizedata && prizedata.prizeInfo">¥{{ prizedata.prizeInfo[0].coin_price }}</text>
  21. </view>
  22. <!-- 5开or10开 -->
  23. <view class="prize_ul" :class="'prize_ul-' + mode" v-else>
  24. <!-- <scroll-view scroll-x="true" class="scroll-view"> -->
  25. <view :class="['prize_ul_li', 'twobox', 'flex', 'tag-' + tagFun(item)]" v-for="(item, index) in prizedata.prizeInfo" :key="index">
  26. <view class="left-top-tag">
  27. <image class="tag-img" :src="tagImgFun(item)" mode="aspectFit"></image>
  28. <text class="tag-text">{{ tagTextFun(item) }}</text>
  29. </view>
  30. <image class="two" :src="item.image" mode="widthFix"></image>
  31. <view class="a">{{ item.goods_name }}</view>
  32. <view class="price">¥{{ item.coin_price }}</view>
  33. </view>
  34. <!-- </scroll-view> -->
  35. </view>
  36. <view class="prize_footer" :class="'prize_footer-' + mode" v-if="type == 0">
  37. <!-- 立即收下 -->
  38. <view class="btn btn-1" @click="$emit('accept')">立即收下</view>
  39. <!-- 一键回收 -->
  40. <view class="btn btn-0" @click="recycle()">一键回收</view>
  41. </view>
  42. <view class="shiwan center" v-else>试玩结果仅供展示哦~</view>
  43. </view>
  44. </view>
  45. <view v-show="!hide" class="loading-mask">
  46. <view :animation="boxAnimation" :class="['animation-wrapper', explode && 'explode']">
  47. <image :src="boxImg" mode="heightFix" class="box"></image>
  48. <image src="https://www.chaomangdao.com/image/result/halo.png" mode="heightFix" class="halo"></image>
  49. </view>
  50. </view>
  51. <audio id="result-audio" src="https://www.chaomangdao.com/image/result/1.mp3"></audio>
  52. </view>
  53. </uni-popup>
  54. </template>
  55. <script>
  56. export default {
  57. name: 'show-result',
  58. props: {
  59. //数量
  60. num: Number,
  61. /**
  62. * 类型 0:正式开盒 1:试玩
  63. */
  64. type: {
  65. type: Number,
  66. default: 0
  67. }
  68. },
  69. data() {
  70. return {
  71. //奖品列表
  72. prizedata: [],
  73. //特效
  74. scale: false,
  75. //开盒动画
  76. openLoading: true,
  77. boxImg: 'https://www.chaomangdao.com/image/result/box.png',
  78. //动画
  79. boxAnimation: {},
  80. animationTime: 100,
  81. explode: false,
  82. hide: false
  83. };
  84. },
  85. computed: {
  86. //开盒模式 0:1抽 1:5抽 2:9抽
  87. mode() {
  88. switch (this.num) {
  89. case 5:
  90. return 1;
  91. case 9:
  92. return 2;
  93. }
  94. return 0;
  95. },
  96. //当前单抽商品
  97. currPrizedata() {
  98. if (!this.prizedata) {
  99. return null;
  100. }
  101. if (!this.prizedata.prizeInfo || this.prizedata.length < 1) {
  102. return null;
  103. }
  104. return this.prizedata.prizeInfo[0];
  105. },
  106. //单抽商品品质
  107. tag() {
  108. return this.tagFun(this.currPrizedata);
  109. },
  110. //单抽品质文本
  111. tagText() {
  112. return this.tagTextFun(this.currPrizedata);
  113. },
  114. //单抽品质角标
  115. tagImg() {
  116. return this.tagImgFun(this.currPrizedata);
  117. }
  118. },
  119. methods: {
  120. //盒子抖动
  121. shake: function(animation) {
  122. let time = 0;
  123. const duration = 90;
  124. for (var i = 0; i < 20; i++) {
  125. let rotate = -10;
  126. let scaleY = 1.1;
  127. if (i % 2 != 0) {
  128. rotate = 0;
  129. scaleY = 1;
  130. }
  131. animation
  132. .rotate(rotate)
  133. .scaleY(scaleY)
  134. .step({ duration });
  135. time += duration;
  136. }
  137. return time;
  138. },
  139. //盒子压缩
  140. compress: function(animation) {
  141. const duration = 100;
  142. animation
  143. .translateY('5vh')
  144. .scaleY(0.9)
  145. .scaleX(1.2)
  146. .step({ duration });
  147. return duration;
  148. },
  149. //盒子跳跃
  150. jump: function(animation) {
  151. const duration = 150;
  152. animation
  153. .translateY('-50vh')
  154. .scaleY(1.1)
  155. .scaleX(0.9)
  156. .step({ duration });
  157. return duration;
  158. },
  159. open(prizedata) {
  160. prizedata.boxImg && (this.boxImg = prizedata.boxImg);
  161. //播放音乐
  162. // this.startAudio();
  163. //打开结果
  164. this.$refs.prize.open();
  165. //加载动画
  166. this.prizedata = prizedata;
  167. this.showAnimation();
  168. },
  169. //播放音乐
  170. startAudio() {
  171. setTimeout(() => {
  172. let audio = document.getElementById('result-audio').querySelector('audio');
  173. audio.play();
  174. });
  175. },
  176. showAnimation() {
  177. let animation = uni.createAnimation();
  178. this.animationTime += this.shake(animation);
  179. this.animationTime += this.compress(animation);
  180. this.animationTime += this.jump(animation);
  181. this.animation = animation;
  182. this.boxAnimation = this.animation.export();
  183. console.log(this.animationTime, '动画时长');
  184. setTimeout(() => {
  185. // this.explode = true;
  186. // this.hideAnimation();
  187. if (this.tag != 'normal') {
  188. //开启震动
  189. try {
  190. uni.vibrateShort({
  191. success: function() {
  192. console.log('震动');
  193. }
  194. });
  195. } catch (e) {
  196. console.log(e);
  197. }
  198. //开启效果
  199. // this.scale = true
  200. // setTimeout(() => {
  201. // this.scale = false
  202. // }, 1000)
  203. }
  204. }, this.animationTime);
  205. },
  206. hideAnimation() {
  207. setTimeout(() => {
  208. this.hide = true;
  209. }, 1300);
  210. },
  211. //关闭
  212. close() {
  213. this.animationTime = 0;
  214. this.explode = false;
  215. this.hide = false;
  216. this.$emit('close');
  217. this.$refs.prize.close();
  218. },
  219. //商品品质
  220. tagFun(prizeInfo) {
  221. if (!prizeInfo) return null;
  222. return prizeInfo.tag;
  223. },
  224. //品质文本
  225. tagTextFun(prizeInfo) {
  226. if (!prizeInfo) return null;
  227. if (prizeInfo.tag == 'normal') {
  228. return '普通';
  229. }
  230. if (prizeInfo.tag == 'rare') {
  231. return '稀有';
  232. }
  233. if (prizeInfo.tag == 'supreme') {
  234. return '史诗';
  235. }
  236. if (prizeInfo.tag == 'legend') {
  237. return '传说';
  238. }
  239. },
  240. //品质角标
  241. tagImgFun(prizeInfo) {
  242. if (!prizeInfo) return null;
  243. if (prizeInfo.tag == 'normal') {
  244. return 'https://www.chaomangdao.com/image/tag-1.png';
  245. }
  246. if (prizeInfo.tag == 'rare') {
  247. return 'https://www.chaomangdao.com/image/tag-2.png';
  248. }
  249. if (prizeInfo.tag == 'supreme') {
  250. return 'https://www.chaomangdao.com/image/tag-3.png';
  251. }
  252. if (prizeInfo.tag == 'legend') {
  253. return 'https://www.chaomangdao.com/image/tag-4.png';
  254. }
  255. },
  256. recycle() {
  257. this.$refs.prize.close();
  258. uni.showModal({
  259. cancelText: '取消',
  260. confirmText: '确认',
  261. title: '一键回收',
  262. content: '是否确认一键回收?',
  263. success: res => {
  264. if (res.confirm) {
  265. this.$emit('recycle', this.prizedata);
  266. }
  267. }
  268. });
  269. }
  270. },
  271. created() {
  272. // let animation = uni.createAnimation();
  273. // this.animationTime = 0;
  274. // this.animationTime += shake(animation);
  275. // this.animationTime += compress(animation);
  276. // this.animationTime += jump(animation);
  277. // this.animation = animation;
  278. },
  279. destroyed() {
  280. console.log(111);
  281. }
  282. };
  283. </script>
  284. <style lang="scss">
  285. .onebox {
  286. height: 372rpx;
  287. width: 352rpx;
  288. border-radius: 26rpx;
  289. background-color: #fff;
  290. }
  291. .twobox {
  292. width: 176rpx;
  293. border-radius: 13rpx;
  294. background-color: #fff;
  295. }
  296. .result-popup-main {
  297. z-index: 9999;
  298. .result-popup {
  299. background-image: url('https://www.chaomangdao.com/image/kjbg.jpg');
  300. position: fixed;
  301. bottom: 0;
  302. left: 0;
  303. background-repeat: no-repeat;
  304. background-size: 100% 100%;
  305. }
  306. }
  307. .prize {
  308. transform: scale(0);
  309. opacity: 0;
  310. transition: 0.2s;
  311. width: 750rpx;
  312. height: 100vh;
  313. display: flex;
  314. justify-content: center;
  315. &.show {
  316. transform: scale(1);
  317. opacity: 1;
  318. }
  319. .prize_box {
  320. width: 100%;
  321. height: 1120rpx;
  322. position: relative;
  323. flex-direction: column;
  324. // background: url(static/image/result/guang@2x.png) no-repeat;
  325. background-size: 100% auto;
  326. background-position: top;
  327. background-repeat: no-repeat;
  328. .prize_close {
  329. width: 64rpx;
  330. height: 64rpx;
  331. top: 280rpx;
  332. right: 30rpx;
  333. position: absolute;
  334. }
  335. .prize-top {
  336. width: 528rpx;
  337. height: 270rpx;
  338. position: absolute;
  339. top: 120rpx;
  340. left: 118rpx;
  341. &-2 {
  342. top: 40rpx;
  343. }
  344. }
  345. .prize_footer {
  346. width: 100%;
  347. &-2 {
  348. bottom: -200rpx;
  349. }
  350. .btn {
  351. height: 84rpx;
  352. border-radius: 16rpx;
  353. position: absolute;
  354. }
  355. .btn-1 {
  356. bottom: 0rpx;
  357. background-image: -webkit-linear-gradient(0deg, #89f7fe 0%, #66a6ff 100%);
  358. font-size: 38rpx;
  359. text-align: center;
  360. line-height: 86rpx;
  361. width: 159px;
  362. border-radius: 8px;
  363. position: absolute;
  364. left: 40rpx;
  365. color: #ffffff;
  366. font-weight: bold;
  367. }
  368. .btn-0 {
  369. bottom: 0rpx;
  370. background-image: -webkit-linear-gradient(60deg, #ffc8de 0%, #ff67a4 100%);
  371. font-size: 38rpx;
  372. text-align: center;
  373. line-height: 86rpx;
  374. right: 40rpx;
  375. width: 159px;
  376. color: #ffffff;
  377. font-weight: bold;
  378. }
  379. }
  380. }
  381. .shiwan {
  382. background: url(https://www.chaomangdao.com/image/open/tanchuangbeijing@2x.png) no-repeat;
  383. background-size: cover;
  384. }
  385. .prize_ul {
  386. width: 566rpx;
  387. // padding: 0 92rpx;
  388. display: flex;
  389. flex-wrap: wrap;
  390. justify-content: space-between;
  391. position: absolute;
  392. top: 336rpx;
  393. left: 92rpx;
  394. &-2 {
  395. top: 360rpx;
  396. }
  397. &::after {
  398. content: '';
  399. width: 176rpx;
  400. }
  401. }
  402. // .scroll-view {
  403. // width: 522rpx;
  404. // white-space:nowrap;
  405. .prize_ul_li {
  406. margin-bottom: 16rpx;
  407. position: relative;
  408. width: 176rpx;
  409. display: flex;
  410. flex-direction: column;
  411. align-items: center;
  412. justify-content: center;
  413. display: flex;
  414. padding: 8rpx;
  415. // margin-right: 20rpx;
  416. box-sizing: border-box;
  417. .two {
  418. width: 176rpx;
  419. height: 176rpx;
  420. }
  421. .a {
  422. font-size: 24rpx;
  423. // font-family: PingFangSC-Medium, PingFang SC;
  424. font-weight: 500;
  425. color: #171a20;
  426. width: 146rpx;
  427. overflow: hidden;
  428. white-space: nowrap;
  429. text-overflow: ellipsis;
  430. }
  431. .price {
  432. margin-top: 6rpx;
  433. font-size: 24rpx;
  434. font-weight: 500;
  435. color: #171a20;
  436. }
  437. .left-top-tag {
  438. position: absolute;
  439. top: 0;
  440. left: 0;
  441. z-index: 9999999;
  442. width: 3rem;
  443. height: 3rem;
  444. .tag-img {
  445. width: 100%;
  446. height: 100%;
  447. }
  448. .tag-text {
  449. font-size: 0.6rem !important;
  450. position: absolute;
  451. position: absolute;
  452. top: 30%;
  453. left: 30%;
  454. color: #fff !important;
  455. width: auto !important;
  456. transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  457. }
  458. }
  459. }
  460. // }
  461. .prize_shop {
  462. transition: 1s;
  463. position: absolute;
  464. top: 336rpx;
  465. left: 198rpx;
  466. display: flex;
  467. flex-direction: column;
  468. .spining {
  469. z-index: -1;
  470. height: 150vh;
  471. width: 150vh;
  472. background-image: url(https://www.chaomangdao.com/image/result/spining.png);
  473. background-repeat: no-repeat;
  474. background-size: 100% 100%;
  475. position: absolute;
  476. }
  477. image {
  478. width: 174rpx;
  479. height: 235rpx;
  480. margin-bottom: 20rpx;
  481. }
  482. text {
  483. width: 70%;
  484. font-size: 16rpx;
  485. font-family: PingFangSC-Medium, PingFang SC;
  486. font-weight: 500;
  487. color: #171a20;
  488. overflow: hidden;
  489. white-space: nowrap;
  490. text-overflow: ellipsis;
  491. text-align: center;
  492. }
  493. .colorblack {
  494. font-size: 32rpx !important;
  495. font-family: PingFangSC-Medium, PingFang SC;
  496. font-weight: 500;
  497. color: #171a20;
  498. }
  499. .left-top-tag {
  500. position: absolute;
  501. top: -2rpx;
  502. left: -2rpx;
  503. z-index: 9999999;
  504. width: 5rem;
  505. height: 5rem;
  506. .tag-img {
  507. width: 100%;
  508. height: 100%;
  509. }
  510. .tag-text {
  511. font-size: 1rem;
  512. position: absolute;
  513. top: 30%;
  514. left: 30%;
  515. color: #fff !important;
  516. width: auto !important;
  517. transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  518. }
  519. }
  520. }
  521. .tag-normal {
  522. box-shadow: 0 0 40rpx 18rpx #9d85ff;
  523. }
  524. .tag-rare {
  525. box-shadow: 0 0 40rpx 18rpx #47a8ff;
  526. }
  527. .tag-supreme {
  528. box-shadow: 0 0 40rpx 32rpx #feb337;
  529. }
  530. .tag-legend {
  531. box-shadow: 0 0 40rpx 32rpx #fe615e;
  532. }
  533. .shiwan {
  534. width: 399rpx;
  535. height: 48rpx;
  536. color: #ffffff;
  537. font-size: 30rpx;
  538. margin-top: 40rpx;
  539. background: #000000;
  540. border-radius: 27rpx 27rpx 27rpx 27rpx;
  541. }
  542. }
  543. // .left-top-tag {
  544. // z-index: 999999;
  545. // position: absolute;
  546. // left: -2px;
  547. // top: -3px;
  548. // .tag-img {
  549. // height: 100% !important;
  550. // width: 100% !important;
  551. // }
  552. // .tag-text {
  553. // position: absolute;
  554. // top: 30%;
  555. // left: 30%;
  556. // color: #fff !important;
  557. // width: auto !important;
  558. // transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  559. // }
  560. // }
  561. .prize_shop_scale {
  562. transform: scale(1.3);
  563. }
  564. .loading-mask {
  565. z-index: 999;
  566. position: fixed;
  567. top: -180rpx;
  568. left: 0;
  569. height: 100vh;
  570. width: 100vw;
  571. display: flex;
  572. align-items: flex-end;
  573. justify-content: center;
  574. .animation-wrapper {
  575. margin-bottom: 10vh;
  576. image {
  577. height: 360rpx;
  578. }
  579. .halo {
  580. opacity: 1;
  581. transform: scale(0);
  582. position: absolute;
  583. top: 0;
  584. }
  585. &.explode {
  586. .box {
  587. transition: 0.3s;
  588. opacity: 0;
  589. transform: scale(0);
  590. }
  591. .halo {
  592. transition: 1.2s;
  593. opacity: 0;
  594. transform: scale(5);
  595. }
  596. }
  597. }
  598. }
  599. @keyframes rotate {
  600. from {
  601. transform: rotate(0deg);
  602. }
  603. to {
  604. transform: rotate(360deg);
  605. }
  606. }
  607. .spining {
  608. transition: 0.3s;
  609. animation: rotate 10s linear infinite; /*开始动画后无限循环,用来控制rotate*/
  610. }
  611. </style>