xiaoshuo/src/pages/mine/index.jsx

import { Component } from 'react'
import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
import * as api from '../../service/index'
import tool from '../../common/tool'
import Taro, { } from '@tarojs/taro'
import './index.less'

export default class collection extends Component {
  state = {
    userInfo: {},
    pageList: [
      {
        title: '阅读记录',
        icon: 'https://video-img.fyshark.com/1683703300058shsho.png',
        url: '/pages/mine/subpages/history/index',
        isOpen: true
      },
      {
        title: '我的收益',
        icon: 'https://video-img.fyshark.com/1683703315275akljs.png',
        url: '/pages/mine/subpages/makeMoney/index',
        isOpen: true
      },
      {
        title: '赚钱计划',
        icon: 'https://video-img.fyshark.com/1683703340452dnkhfgo.png',
        url: '/pages/mine/subpages/moneyPlay/index',
        isOpen: true
      },
      {
        title: '我的团队',
        icon: 'https://video-img.fyshark.com/1685065866448dslajd.png',
        url: '/pages/mine/subpages/team/index',
        isOpen: true
      },
      {
        title: '通知公告',
        icon: 'https://video-img.fyshark.com/1683703331018dhjldj.png',
        url: '',
        isOpen: false
      }

    ],
    adUnitId: '',
    ad_status: ''
  }

  componentWillMount () {
    tt.getUserInfo({
      withCredentials: true,
      success (res) {
        console.log(`getUserInfo 调用成功 ${res.userInfo}`, res);
      },
      fail (res) {
        console.log(`getUserInfo 调用失败`);
      },
    });
    this.getAppConfig()
  }
  componentDidShow () {
    Taro.showLoading({
      title: '加载中',
    })
    if (!Taro.getStorageSync('session_key')) {
      setTimeout(() => {
        this.getUserInfo()
      }, 1000)
    } else {
      this.getUserInfo()
    }
  }
  getAppConfig () {
    api.getAppConfig().then(res => {
      if (res.code == 200) {
        this.setState({
          // adUnitId: res.data.adUnitId,
          ad_status: res.data.ad_status
        })
      }
    })
  }
  getUserInfo () {
    let that = this 
    api.getUserInfo().then(res => {
      Taro.hideLoading()
      if (res.code == 200) {
        tt.getUserInfo({
          withCredentials: true,
          success (item) {
            res.data.head_img = item.userInfo.avatarUrl
            res.data.user_name = item.userInfo.nickName
            that.setState({
              userInfo: res.data
            })
          },
          fail (item) {
            console.log(res.data,'res.data');
            that.setState({
              userInfo: res.data
            })
            console.log(`getUserInfo 调用失败`);
          },
        });
        
      }
    })
  }
  toVipDetial () {
    Taro.navigateTo({
      url: '/pages/mine/subpages/vipDetail/index'
    })
  }
  toDetial (item, index) {
    if (!item.isOpen) {
      Taro.showToast({ title: '敬请期待', icon: 'none' })
      return
    }
    Taro.navigateTo({
      url: item.url
    })
  }
  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      channel: "video",
      title: "测试分享视频",
      desc: "测试描述",
      extra: {
        videoTopics: ["hello", "hi"],
        withVideoId: true,
      },
      success (res) {
        /* res结构：{errMsg: string, videoId: string } */
        console.log(res.videoId);
        tt.navigateToVideoView({
          videoId: res.videoId,
          success: (res) => {
            /* res结构： {errMsg: string } */
            console.log("done");
          },
          fail: (err) => {
            if (err.errCode === 1006) {
              tt.showToast({
                title: "something wrong with your network",
              });
            }
          },
        });
      },
    }
  }

  render () {
    return (
      <View className='mine'>
        <View className='user-info'>
          <View className='info-left'>
            <Image className='user-img' src={this.state.userInfo.head_img}></Image>
          </View>
          <View className='info-right'>
            <View className='user-name'>{this.state.userInfo.user_name}
              {
                this.state.userInfo.is_vip == 1 &&
                <Image className='vip-img' src='https://video-img.fyshark.com/1683860337987f-vip3.png'></Image>
              }
            </View>
            <View className='user-id'>用户ID:{this.state.userInfo.id}</View>
          </View>
        </View>
        {
          this.state.userInfo.is_vip == 0 ?
            <View className='user-vip-banner' onClick={e => (this.toVipDetial())}>
              <Image className='banner-img' mode='widthFix' src='https://video-img.fyshark.com/1683705427196VIP.png'></Image>
            </View>
            :
            <View className='user-vip-banner-have'>
              <View className='vip-banner-have-left'>
                <Image className='vip-banner-img' src='https://video-img.fyshark.com/1683860337987f-vip3.png'></Image>
                <View className='vip-banner-tips'>已开通会员，有效期至：{tool.formattedDate(this.state.userInfo.time_is_vip)}</View>
              </View>
              <View className='vip-banner-have-right' onClick={e => (this.toVipDetial())}>
                续费
              </View>
            </View>
        }
        <View className='user-page'>
          {
            this.state.pageList.map((item, index) => (
              <View className='page-info' key={index} onClick={e => (this.toDetial(item, index))}>
                <View className='page-left'>
                  <Image className='page-icon' src={item.icon}></Image>
                  <View className='page-title'>{item.title}</View>
                </View>
                <Image className='page-next' src='https://video-img.fyshark.com/1683703470907shkls.png'></Image>
              </View>
            ))
          }
          <Button className=' button'
            plain type='default' open-type='contact'>
            <View className='page-info'>
              <View className='page-left'>
                <Image className='page-icon' src='https://video-img.fyshark.com/1683703284336shkdj.png'></Image>
                <View className='page-title'>联系客服</View>
              </View>
              <Image className='page-next' src='https://video-img.fyshark.com/1683703470907shkls.png'></Image>
            </View>
          </Button>
          {/* <Button className=' button'
            plain type='default' open-type='share'>
            <View className='page-info'>
              <View className='page-left'>
                <Image className='page-icon' src='https://video-img.fyshark.com/1683703284336shkdj.png'></Image>
                <View className='page-title'>转发</View>
              </View>
              <Image className='page-next' src='https://video-img.fyshark.com/1683703470907shkls.png'></Image>
            </View>
          </Button> */}
        </View>
      </View>
    )
  }
}