裂变星小程序-25.03.04
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.

252 lines
4.6 KiB

  1. <template>
  2. <view>
  3. <view class="content">
  4. <view class="title">{{ detail.headTitle || '' }}</view>
  5. <view class="desc">{{ detail.createTime ? `发布于${detail.createTime}` : '' }}</view>
  6. <editor id="editor" class="editor" :read-only="true" @ready="onEditorReady"></editor>
  7. </view>
  8. <uv-overlay :show="true" :opacity="0" zIndex="998">
  9. <navbar leftClick @leftClick="$utils.navigateBack" />
  10. <button class="btn" type="success" @click="onJoin">查看更多</button>
  11. <popupUnlock ref="popupUnlock" src="../static/sharing/unlock-article.png"></popupUnlock>
  12. <popupQrCode ref="popupQrCode" :src="detail.wxCodeImage"></popupQrCode>
  13. </uv-overlay>
  14. </view>
  15. </template>
  16. <script>
  17. import {
  18. mapState
  19. } from 'vuex'
  20. import shareLog from '@/utils/shareLog'
  21. import popupUnlock from '../components/popupUnlock.vue'
  22. import popupQrCode from '../components/popupQrCode.vue'
  23. export default {
  24. components: {
  25. popupUnlock,
  26. popupQrCode,
  27. },
  28. data() {
  29. return {
  30. id: null,
  31. detail: {
  32. id: null,
  33. userId: null,
  34. headImage: null,
  35. headTitle: null,
  36. num: 0,
  37. wxCodeImage: null,
  38. textDetails: null,
  39. },
  40. isLocked: true,
  41. }
  42. },
  43. computed: {
  44. ...mapState(['userInfo']),
  45. },
  46. onShow() {
  47. // if (this.id && uni.getStorageSync('token')) {
  48. // this.detail.id ? this.refreshLockStatus() : this.initData()
  49. // }
  50. if (this.detail.id) { // 转发后返回页面的场景
  51. this.refreshLockStatus()
  52. }
  53. },
  54. async onLoad(option) {
  55. const {
  56. id,
  57. state,
  58. shareId
  59. } = option
  60. if (shareId) {
  61. uni.setStorageSync('shareId', shareId)
  62. }
  63. if (state) {
  64. uni.setStorageSync('state', state)
  65. }
  66. if (id) {
  67. uni.setStorageSync('id', id)
  68. }
  69. this.id = id
  70. // if (uni.getStorageSync('token')) {
  71. // this.initData()
  72. // } else {
  73. // uni.navigateTo({
  74. // url: '/pages_order/auth/wxLogin'
  75. // })
  76. // }
  77. this.initData()
  78. shareLog.clear()
  79. },
  80. onShareAppMessage(res) {
  81. const {
  82. headTitle,
  83. headImage,
  84. } = this.detail
  85. let o = {
  86. title: headTitle,
  87. imageUrl: headImage,
  88. query: `id=${this.id}&state=3&shareId=${this.userInfo.id}`,
  89. }
  90. //调用增加分享次数的方法
  91. const params = {
  92. id: this.id,
  93. state: "3",
  94. }
  95. // this.$fetch('addLogShareInfo', params)
  96. shareLog.insert(this.id)
  97. return o
  98. },
  99. methods: {
  100. onEditorReady() {
  101. uni.createSelectorQuery().select('#editor').context((res) => {
  102. this.editorCtx = res.context
  103. }).exec()
  104. },
  105. initEditor(html) {
  106. if (!this.editorCtx) {
  107. setTimeout(() => {
  108. this.initEditor(html)
  109. }, 200)
  110. return
  111. }
  112. this.editorCtx.setContents({
  113. html
  114. })
  115. },
  116. async fetchDetails(id) {
  117. try {
  118. this.detail = await this.$fetch('getArticleShareInfo', {
  119. id
  120. })
  121. } catch (err) {
  122. }
  123. },
  124. async initData() {
  125. await this.fetchDetails(this.id)
  126. this.initEditor(this.detail.textDetails)
  127. },
  128. async fetchCheckShare() {
  129. try {
  130. return shareLog.check(this.id, this.detail.num)
  131. } catch (err) {
  132. return {}
  133. }
  134. },
  135. async refreshLockStatus() {
  136. const result = await this.fetchCheckShare()
  137. const {
  138. title,
  139. open
  140. } = result
  141. console.log('--open', open)
  142. this.$refs.popupUnlock.close();
  143. if (open) {
  144. this.isLocked = false
  145. this.$refs.popupQrCode.open()
  146. return
  147. }
  148. title && uni.showToast({
  149. title,
  150. icon: 'none',
  151. duration: 3000
  152. })
  153. },
  154. async onJoin() {
  155. if (!this.isLocked) {
  156. this.$refs.popupQrCode.open()
  157. return
  158. }
  159. const result = await this.fetchCheckShare()
  160. const {
  161. open,
  162. need_num,
  163. num
  164. } = result
  165. console.log('--open', open)
  166. if (open) { // 转发已达标
  167. this.isLocked = false
  168. this.$refs.popupQrCode.open()
  169. } else {
  170. uni.showToast({
  171. title: `还需转发${need_num - num}`,
  172. icon: 'none',
  173. })
  174. this.$refs.popupUnlock.open();
  175. }
  176. },
  177. }
  178. }
  179. </script>
  180. <style scoped lang="scss">
  181. .content {
  182. padding: 40rpx 20rpx;
  183. padding-top: calc(#{$navbar-height} + var(--status-bar-height) + 20rpx + 40rpx);
  184. }
  185. .title {
  186. color: #474747;
  187. font-size: 36rpx;
  188. font-weight: 700;
  189. }
  190. .desc {
  191. color: #A2A2A2;
  192. font-size: 24rpx;
  193. margin-top: 6rpx;
  194. }
  195. .editor {
  196. margin-top: 22rpx;
  197. height: 40vh;
  198. }
  199. .btn {
  200. position: absolute;
  201. width: calc(100% - 60rpx*2);
  202. height: auto;
  203. left: 60rpx;
  204. bottom: 292rpx;
  205. background-color: #07C160;
  206. border: none;
  207. color: #FFFFFF;
  208. font-size: 28rpx;
  209. line-height: 1;
  210. border-radius: 45rpx;
  211. padding: 25rpx 0;
  212. box-sizing: border-box;
  213. }
  214. </style>