index.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <view :style="themeColor()">
  3. <loading-page :loading="diy.getLoading()"></loading-page>
  4. <view v-show="!diy.getLoading()">
  5. <!-- 自定义模板渲染 -->
  6. <view class="diy-template-wrap bg-index" :style="diy.pageStyle()">
  7. <diy-group ref="diyGroupRef" :data="diy.data" />
  8. </view>
  9. </view>
  10. <!-- #ifdef MP-WEIXIN -->
  11. <!-- 小程序隐私协议 -->
  12. <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
  13. <!-- #endif -->
  14. </view>
  15. </template>
  16. <script setup lang="ts">
  17. import {ref, computed, nextTick} from 'vue';
  18. import {useDiy} from '@/hooks/useDiy'
  19. import diyGroup from '@/addon/components/diy/group/index.vue'
  20. import useMemberStore from '@/stores/member'
  21. // 会员信息
  22. const memberStore = useMemberStore()
  23. const userInfo = computed(() => memberStore.info)
  24. const diy = useDiy({
  25. name: 'DIY_MALL_MEMBER_INDEX'
  26. })
  27. const diyGroupRef = ref(null)
  28. const wxPrivacyPopupRef:any = ref(null)
  29. // 监听页面加载
  30. diy.onLoad();
  31. // 监听页面显示
  32. diy.onShow((data: any) => {
  33. diyGroupRef.value?.refresh();
  34. if (userInfo.value) {
  35. useMemberStore().getMemberInfo()
  36. }
  37. // #ifdef MP
  38. nextTick(()=>{
  39. if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
  40. })
  41. // #endif
  42. });
  43. // 监听页面隐藏
  44. diy.onHide();
  45. // 监听页面卸载
  46. diy.onUnload();
  47. // 监听滚动事件
  48. diy.onPageScroll()
  49. </script>
  50. <style lang="scss" scoped>
  51. @import '@/styles/diy.scss';
  52. </style>
  53. <style lang="scss">
  54. .diy-template-wrap {
  55. /* #ifdef MP */
  56. .child-diy-template-wrap {
  57. ::v-deep .diy-group {
  58. > .draggable-element.top-fixed-diy {
  59. display: block !important;
  60. }
  61. }
  62. }
  63. /* #endif */
  64. }
  65. </style>