index.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <template>
  2. <v-cover v-if="state.page == '封面页'"></v-cover>
  3. <v-invite v-if="state.page == '邀请页'"></v-invite>
  4. <v-result v-if="state.page == '开奖页'"></v-result>
  5. <open-box v-show="state.open_box.show"></open-box>
  6. <v-toast :show="state.toast.show" :txt="state.toast.txt" :has_icon="state.toast.has_icon"></v-toast>
  7. </template>
  8. <script setup>
  9. import { reactive, provide, onMounted } from 'vue'
  10. import VCover from '@/view/iframe/treasure-hunt/cover.vue'
  11. import VInvite from '@/view/iframe/treasure-hunt/invite.vue'
  12. import VResult from '@/view/iframe/treasure-hunt/result.vue'
  13. import { inviteDetail, treasureDetail, treasureOpen } from '@/http/treasure.js'
  14. import { reSetBindTwtterId, reSetBindRepost } from '@/http/help.js'
  15. import { getQueryString } from '@/uilts/help'
  16. import VToast from '@/view/iframe/treasure-hunt/components/toast.vue'
  17. import OpenBox from '@/view/iframe/treasure-hunt/components/open-box.vue'
  18. let state = reactive({
  19. page: '',
  20. detail: {},
  21. btn_loading: false,
  22. open_box: {
  23. show: false,
  24. data: {}
  25. },
  26. open_btn: {
  27. txt: '',
  28. disabled: false
  29. },
  30. dialog: {
  31. show: false,
  32. },
  33. start_task: {},
  34. toast: {}
  35. })
  36. provide('state', state)
  37. let params = {}
  38. onMounted(() => {
  39. params = JSON.parse(getQueryString('params') || '{}')
  40. state.postId = params.post_Id || ''
  41. state.tweetId = params.tweet_Id || ''
  42. state.invite_code = params.invite_code || ''
  43. state.init()
  44. })
  45. state.init = (callback) => {
  46. if (params.page_type == '邀请链接') {
  47. // 邀请链接
  48. inviteDetail({
  49. params: {
  50. inviteCode: params.invite_code
  51. }
  52. }).then((res) => {
  53. if (res.code == 0) {
  54. handleCommon(res, callback)
  55. // 绑定repostSrcContentId
  56. if (!res.data.repostSrcContentId) {
  57. reSetBindRepost({
  58. inviteCode: state.invite_code,
  59. tweetId: state.tweetId
  60. })
  61. }
  62. }
  63. })
  64. } else if (params.page_type == '原始链接') {
  65. // 原始链接
  66. treasureDetail({
  67. params: {
  68. postId: params.post_Id
  69. }
  70. }).then((res) => {
  71. if (res.code == 0) {
  72. handleCommon(res, callback)
  73. }
  74. })
  75. }
  76. }
  77. const handleCommon = (res, callback) => {
  78. state.detail = res.data
  79. state.postId = state.detail.postId
  80. try {
  81. state.tasks = JSON.parse(state.detail.startCondition)
  82. let follows = state.tasks.filter((item) => { return item.type == 1 })
  83. if (follows.length) {
  84. state.follows = follows[0].relatedUsers
  85. }
  86. }
  87. catch (error) {
  88. console.error('catch', error)
  89. }
  90. handleStatus()
  91. if (!res.data.srcContentId) {
  92. reSetBindTwtterId({
  93. postId: state.postId || '',
  94. tweetId: state.tweetId || ''
  95. })
  96. }
  97. callback && callback()
  98. }
  99. let silver_open_box_big = require('@/assets/img/icon-silver-open-box-big.png')
  100. let gold_open_box_big = require('@/assets/img/icon-gold-open-box-big.png')
  101. state.treasureOpen = () => {
  102. treasureOpen({
  103. params: {
  104. postId: state.postId,
  105. treasureId: state.treasureId,
  106. }
  107. }).then((res) => {
  108. if (res.code == 0) {
  109. // icon
  110. for (let i in state.boxs) {
  111. if (state.boxs[i].id == state.treasureId) {
  112. if (i > 0) {
  113. state.open_box.icon = gold_open_box_big
  114. } else {
  115. state.open_box.icon = silver_open_box_big
  116. }
  117. break
  118. }
  119. }
  120. state.open_box.show = true
  121. state.open_box.data = res.data
  122. state.init(() => {
  123. state.inviteInit()
  124. state.inviteList()
  125. })
  126. } else {
  127. state.btn_loading = false
  128. switch (String(res.code)) {
  129. case '2037':
  130. state.dialog.show = true
  131. break;
  132. case '2203':
  133. state.toast.txt = 'You have already opened the treasure chest'
  134. state.toast.show = true
  135. break
  136. case '2208':
  137. state.toast.txt = 'No treasure chests to open'
  138. state.toast.show = true
  139. break
  140. default:
  141. state.toast.txt = 'System Error'
  142. state.toast.show = true
  143. break
  144. }
  145. state.toast.has_icon = false
  146. setTimeout(() => {
  147. state.toast.show = false
  148. }, 2000)
  149. state.init(() => {
  150. state.inviteInit()
  151. state.inviteList()
  152. })
  153. }
  154. })
  155. }
  156. const handleStatus = () => {
  157. // 如果 夺宝状态 = 未开始
  158. // 显示未开始页面
  159. // 如果 夺宝状态 = 进行中
  160. // 如果 夺宝参与状态 = 未参与夺宝
  161. // 显示封面页
  162. // 如果 夺宝参与状态 = 已参与夺宝
  163. // 显示邀请页
  164. // 如果 夺宝状态 = 已结束
  165. // 显示结束页面
  166. let { status, joinStatus } = state.detail || {}
  167. state.open_btn.txt = 'Start'
  168. // 如果 夺宝状态 = 未开始
  169. if (status == 0) {
  170. state.page = '封面页'
  171. }
  172. // 如果 夺宝状态 = 进行中
  173. else if (status == 1) {
  174. // 如果 夺宝参与状态 = 未参与夺宝
  175. if (joinStatus == 0) {
  176. // 显示封面页
  177. state.page = '封面页'
  178. state.cover_status = '有邀请人'
  179. state.open_btn.txt = 'Start'
  180. // state.cover_status = '无邀请人'
  181. // state.cover_status = '奖励已被领光'
  182. }
  183. // 如果 夺宝参与状态 = 已参与夺宝
  184. else if (joinStatus == 1) {
  185. state.page = '邀请页'
  186. }
  187. }
  188. // 如果 夺宝状态 = 已结束
  189. else {
  190. state.page = '封面页'
  191. state.cover_status = '奖励已被领光'
  192. state.open_btn.txt = 'Look for more treasures'
  193. state.btn_loading = false
  194. }
  195. }
  196. </script>
  197. <style lang="scss" >
  198. html,
  199. body {
  200. margin: 0;
  201. padding: 0;
  202. }
  203. </style>