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

227 lines
4.5 KiB

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