index.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <view>
  3. <!-- <view class="container-box" v-if="!isSDKReady">正在初始化...</view> -->
  4. <view class="container">
  5. <image class="background-image" src="/static/static/assets/background.svg"></image>
  6. <view class="counter-warp">
  7. <view class="counter-main">
  8. <view class="header-content">
  9. <image src="/static/static/images/im.png" class="icon"></image>
  10. <view class="text">
  11. <view class="text-header">登录 · 即时通信</view>
  12. <view class="text-content">体验群组聊天,视频对话等IM功能</view>
  13. </view>
  14. </view>
  15. <view class="tui-scene-router">
  16. <view v-for="(item, index) in sceneList" :key="index" class="scene-item-card" :data-item="item" @tap="handleOnPageNavigate">
  17. <image class="tui-scene-icon" :src="item.iconUrl"></image>
  18. <view class="tui-scene-name">{{ item.name }}</view>
  19. <image class="tui-scene-link" src="/static/static/assets/detail.svg"></image>
  20. </view>
  21. </view>
  22. </view>
  23. <view class="foot" @tap="learnMore">了解更多 IM 功能</view>
  24. </view>
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. // miniprogram/pages/TUI-Index/TUI-create.js
  30. import logger from '../../utils/logger';
  31. const app = getApp();
  32. export default {
  33. data() {
  34. return {
  35. isSDKReady: false,
  36. sceneList: [
  37. {
  38. name: '在线客服',
  39. url: '../TUI-Conversation/conversation/conversation',
  40. iconUrl: '/static/static/assets/online-service.svg'
  41. }
  42. ]
  43. };
  44. },
  45. components: {},
  46. props: {},
  47. /**
  48. * 生命周期函数--监听页面加载
  49. */
  50. onLoad() {},
  51. onShow() {
  52. logger.log(`| TUI-Index | onshow | login|userSig:${app.globalData.userInfo.userSig} userID:${app.globalData.userInfo.userID}`);
  53. },
  54. created() {
  55. uni.$on('isSDKReady', value => {
  56. this.isSDKReady = value.isSDKReady;
  57. });
  58. },
  59. methods: {
  60. handleOnPageNavigate(event) {
  61. const tab = event.currentTarget.dataset.item;
  62. console.log(tab.url)
  63. if (!tab.url) {
  64. uni.navigateToMiniProgram({
  65. appId: 'wx3b91b7aaa809ecf9'
  66. });
  67. } else {
  68. uni.navigateTo({
  69. url: tab.url
  70. });
  71. }
  72. },
  73. learnMore() {
  74. uni.navigateTo({
  75. url: '../TUI-User-Center/webview/webview?url=https://cloud.tencent.com/product/im'
  76. });
  77. }
  78. }
  79. };
  80. </script>
  81. <style>
  82. @import './index.css';
  83. </style>