MobileLandPage.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. <template>
  2. <div class="mobile-land-page">
  3. <div class="mobile-land-page-invited-info" v-if="useFul && !isNFTCpd">
  4. <img :src="userInfo.avatarUrl" class="invited-photo" />
  5. <div class="invited-name">{{ userInfo.nickName }}</div>
  6. <div class="invited-text">{{ isTreasureCpd ? 'Invite You to Hunt the Treasure' : 'Send You Giveaway!' }}</div>
  7. </div>
  8. <div class="mobile-land-page-icon-wrap">
  9. <img class="mobile-land-page-icon" :src="iconCpd" />
  10. </div>
  11. <div class="mobile-land-page-prize-info">
  12. <template v-if="!useFul">
  13. <div class="mobile-land-page-prize-info-test">
  14. <!-- time-expired -->
  15. </div>
  16. </template>
  17. <!-- 红包 -->
  18. <template v-else-if="isCommonCpd">
  19. <div class="mobile-land-page-prize-info-test">You are gifted an entries to earn</div>
  20. <div class="mobile-land-page-prize-info-test">
  21. <img v-if="!isCustomRewardCpd" class="icon" :src="currencyIconPath" />
  22. <span class="pre-amount-value">{{ isCustomRewardCpd ? 1 : amountValue }}</span>
  23. <span class="prize-name">{{ prize }}</span>
  24. <span class="usd-amount" v-if="!isCustomRewardCpd"> (${{ usValue }})</span>
  25. </div>
  26. </template>
  27. <!-- 抽奖 -->
  28. <template v-else-if="isLottaryCpd">
  29. <div class="mobile-land-page-prize-info-test">
  30. You Won
  31. <img v-if="!isCustomRewardCpd" class="icon" :src="currencyIconPath" />
  32. <span class="pre-amount-value">{{ isCustomRewardCpd ? 1 : amountValue }}</span>
  33. <FontZoom width="240" style="color: #000">
  34. <span class="prize-name">{{ prize }}</span>
  35. </FontZoom>
  36. <span class="usd-amount" v-if="!isCustomRewardCpd"> (${{ usValue }})</span>
  37. </div>
  38. <div class="mobile-land-page-prize-info-test">in the Giveaway!</div>
  39. </template>
  40. <!-- 夺宝 -->
  41. <template v-else-if="isTreasureCpd">
  42. <div class="mobile-land-page-prize-info-test">Complete the quest to win up to</div>
  43. <div class="mobile-land-page-prize-info-test">
  44. <span class="usd-amount treasure-usd-amount"> ${{ usValue }} for you two!</span>
  45. </div>
  46. </template>
  47. <!-- NFT -->
  48. <template v-else-if="isNFTCpd">
  49. <div class="mobile-land-page-prize-info-test">
  50. <span class="prize-name">{{ prize }}</span>
  51. is in your
  52. </div>
  53. <div class="mobile-land-page-prize-info-test">DeNet NFT wallet!</div>
  54. </template>
  55. <!-- 兜底显示 -->
  56. <template v-else>
  57. <div class="mobile-land-page-prize-info-test"></div>
  58. </template>
  59. </div>
  60. <FontZoom width="330">
  61. <div class="mobile-land-page-tip">{{ tipCpd }}</div>
  62. </FontZoom>
  63. <div class="mobile-land-page-login-twitter" @click="toLogin">{{ isLoginCpd || loginSuccessBack ? 'Claim Prize' : 'Login Twitter' }}</div>
  64. </div>
  65. </template>
  66. <script>
  67. import { RewardType, PlayType } from '../types';
  68. import { getStorage, setStorage, removeStorage, storageKey, getOauthUrl } from '../utils/help';
  69. import { postRequest } from '../http';
  70. import FontZoom from './FontZoom';
  71. import { Toast } from 'vant';
  72. const overTimePic = require('../static/img/icon-h5-denet.svg');
  73. const giveawayPic = require('../static/img/icon-h5-giveaway.svg');
  74. const redpackPic = require('../static/img/icon-h5-redpack.svg');
  75. const treasurePic = require('../static/img/icon-h5-treasure.svg');
  76. export default {
  77. name: 'mobileLandPage',
  78. props: {
  79. playType: {
  80. // 玩法类型, 红包 / 抽奖 / 夺宝 / NFT
  81. type: Number,
  82. },
  83. rewardType: {
  84. // 奖品类型 货币/ 自定义奖品
  85. type: Number,
  86. default: 1,
  87. },
  88. useFul: {
  89. // 红包仍在有效期,可领取
  90. type: Boolean,
  91. default: true,
  92. },
  93. userInfo: {
  94. type: Object,
  95. default: () => {
  96. return {};
  97. },
  98. },
  99. currencyIconPath: {
  100. // 货币头像
  101. type: String,
  102. default: '',
  103. },
  104. amountValue: {
  105. // 奖品数量
  106. type: String,
  107. default: '1',
  108. },
  109. usValue: {
  110. // 转换为美金 的价值
  111. type: String,
  112. default: '',
  113. },
  114. prize: {
  115. // 奖品 描述
  116. type: String,
  117. default: '',
  118. },
  119. postId: {
  120. // 推文ID,用于retweer
  121. type: String,
  122. default: '',
  123. },
  124. prizePicPath: {
  125. // NFT图片
  126. type: String,
  127. default: '',
  128. },
  129. },
  130. data() {
  131. return {
  132. timer: {},
  133. loginSuccessBack: false,
  134. };
  135. },
  136. computed: {
  137. isCustomRewardCpd() {
  138. return this.rewardType === RewardType.custom;
  139. },
  140. isLottaryCpd() {
  141. return this.playType === PlayType.lottery;
  142. },
  143. isCommonCpd() {
  144. return this.playType === PlayType.common;
  145. },
  146. isTreasureCpd() {
  147. return this.playType === PlayType.Treasure;
  148. },
  149. isNFTCpd() {
  150. return this.playType === PlayType.NFT;
  151. },
  152. iconCpd() {
  153. if (!this.useFul) {
  154. return overTimePic;
  155. } else if (this.isCommonCpd) {
  156. return redpackPic;
  157. } else if (this.isLottaryCpd) {
  158. return giveawayPic;
  159. } else if (this.isTreasureCpd) {
  160. return treasurePic;
  161. } else if (this.isNFTCpd) {
  162. return this.prizePicPath;
  163. }
  164. {
  165. return overTimePic;
  166. }
  167. },
  168. tipCpd() {
  169. if (this.isCommonCpd) {
  170. return 'to claim, log in twitter to install Denet Chrome Extension';
  171. } else if (this.isLottaryCpd) {
  172. return 'To participate, login Twitter to install DeNet Chrome Extension';
  173. } else if (this.isTreasureCpd) {
  174. return 'To complete, log in twitter to install Denet Chrome Extension';
  175. } else {
  176. return 'login Twitter to install DeNet Chrome Extension';
  177. }
  178. },
  179. isLoginCpd() {
  180. return !!getStorage(storageKey.userInfo);
  181. },
  182. },
  183. methods: {
  184. toLogin() {
  185. let userInfo = getStorage(storageKey.userInfo);
  186. if (userInfo) {
  187. location.href = `/course?useful=${this.useFul ? '1' : '0'}&playType=${this.playType}&rewardType=${this.rewardType}&postId=${this.postId}`;
  188. } else {
  189. this.twitterAuth();
  190. }
  191. },
  192. cancelLogin() {
  193. location.href = `/course?useful=${this.useFul ? '1' : '0'}&playType=${this.playType}&rewardType=${this.rewardType}&postId=${this.postId}`;
  194. },
  195. async twitterAuth() {
  196. let win = window.open();
  197. win.opener = null;
  198. postRequest(`/denet/user/twitterRequestToken`, {
  199. params: {
  200. oauthCallback: `${location.protocol}//${location.host}/authlogin`,
  201. },
  202. }).then(({ code, data }) => {
  203. if (code == 0) {
  204. let url = getOauthUrl(data.authToken);
  205. win.location.href = url;
  206. this.timer.value = setInterval(() => {
  207. if (win && win.closed) {
  208. clearInterval(this.timer.value);
  209. this.twitterLogin(data);
  210. if (getStorage(storageKey.backFromTwitterLogin)) {
  211. removeStorage(storageKey.backFromTwitterLogin);
  212. this.cancelLogin();
  213. }
  214. }
  215. }, 500);
  216. } else {
  217. Toast('login fail');
  218. win.close();
  219. this.cancelLogin();
  220. }
  221. });
  222. },
  223. async twitterLogin(authData) {
  224. let verifier = getStorage(storageKey.verifier);
  225. if (verifier) {
  226. postRequest(`/denet/user/twitterLogin`, {
  227. params: {
  228. consumerKey: authData.consumerKey,
  229. oauthToken: authData.authToken,
  230. oauthVerifier: verifier,
  231. },
  232. }).then(({ code, data }) => {
  233. if (code == 0) {
  234. setStorage(storageKey.userInfo, data);
  235. removeStorage(storageKey.verifier);
  236. this.loginSuccessBack = true;
  237. location.href = `/course?useful=${this.useFul ? '1' : '0'}&playType=${this.playType}&rewardType=${this.rewardType}&postId=${this.postId}`;
  238. }
  239. });
  240. }
  241. },
  242. },
  243. unmounted() {
  244. removeStorage(storageKey.backFromTwitterLogin);
  245. },
  246. components: { FontZoom },
  247. };
  248. </script>
  249. <style lang="scss" scoped>
  250. .mobile-land-page {
  251. min-height: 100%;
  252. max-height: 100%;
  253. background: linear-gradient(180deg, #cceaff 0%, #ffffff 70.42%);
  254. display: flex;
  255. flex-direction: column;
  256. justify-content: space-between;
  257. align-items: center;
  258. padding: 0 16px;
  259. &-invited-info {
  260. width: 302px;
  261. height: 72px;
  262. margin-top: 28px;
  263. position: relative;
  264. padding-left: 81px;
  265. border-radius: 35px;
  266. display: flex;
  267. flex-direction: column;
  268. align-items: flex-start;
  269. justify-content: flex-start;
  270. background: #ffffff;
  271. border: 1px solid #c0daeb;
  272. .invited-photo {
  273. width: 70px;
  274. height: 70px;
  275. border-radius: 50%;
  276. position: absolute;
  277. left: 0;
  278. top: 0;
  279. }
  280. .invited-name {
  281. margin: 13px 0 5px;
  282. font-weight: 500;
  283. font-size: 13px;
  284. line-height: 16px;
  285. letter-spacing: 0.3px;
  286. color: #000000;
  287. max-width: 210px;
  288. text-overflow: ellipsis;
  289. white-space: nowrap;
  290. overflow: hidden;
  291. }
  292. .invited-text {
  293. font-weight: 700;
  294. font-size: 17px;
  295. line-height: 20px;
  296. letter-spacing: 0.3px;
  297. color: #f99d23;
  298. }
  299. }
  300. &-icon-wrap {
  301. display: flex;
  302. flex: 1;
  303. align-items: center;
  304. .mobile-land-page-icon {
  305. width: 100%;
  306. }
  307. }
  308. &-prize-info {
  309. font-style: normal;
  310. font-weight: 700;
  311. font-size: 18px;
  312. line-height: 21px;
  313. color: #000000;
  314. &-test {
  315. display: flex;
  316. align-items: center;
  317. justify-content: center;
  318. .pre-amount-value {
  319. margin-left: 3px;
  320. }
  321. .icon {
  322. width: 22px;
  323. height: 22px;
  324. margin-left: 3px;
  325. }
  326. .prize-name {
  327. margin: 0 3px;
  328. }
  329. .treasure-usd-amount {
  330. color: #F99D23;
  331. font-weight: 700;
  332. font-size: 18px;
  333. }
  334. }
  335. }
  336. &-tip {
  337. font-weight: 400;
  338. font-size: 13px;
  339. line-height: 16px;
  340. text-align: center;
  341. color: #7b7b7b;
  342. margin-top: 10px;
  343. }
  344. &-login-twitter {
  345. width: 100%;
  346. height: 54px;
  347. margin: 18px 16px 30px;
  348. border-radius: 54px;
  349. background: #1d9bf0;
  350. text-align: center;
  351. line-height: 54px;
  352. font-weight: 700;
  353. font-size: 18px;
  354. text-align: center;
  355. color: #fff;
  356. }
  357. }
  358. </style>