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

245 lines
4.2 KiB

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