ChargEco/Strides-APP/app/pages/alert/Campaign.js

/**
 * 活动信息详情
 * @邠心vbe on 2023/08/17
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView, Image } from 'react-native';
import apiNotification from '../../api/apiNotification';
import Button from '../../components/Button';
import Dialog from '../../components/Dialog';
import TextView from '../../components/TextView';
import { PageList } from '../Router';

export default class Campaign extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "",
      messageInfo: {
        createTime: "",
        notificationText: "",
        notificationTitle: "",
        notificationType: ""
      }
    };
  }
  
  componentDidMount() {
    if (this.props.route?.params?.id) {
      this.setState({
        id: this.props.route?.params?.id
      }, () => {
        this.readMessage();
      })
    }
  }

  readMessage() {
    Dialog.showProgressDialog();
    apiNotification.readMessage(this.state.id).then(res => {
      if (res.data) {
        this.setState({
          messageInfo: res.data
        });
      }
    }).catch(err => {
      toastShort(err);
    }).finally(() => {
      Dialog.dismissLoading();
    })
  }

  submitFeedback() {
    startPage(PageList.feedback);
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView
          style={ui.flex1}
          contentContainerStyle={styles.content}
          stickyHeaderIndices={[1]}>
          <Image
            style={styles.topImage}
            resizeMode="cover"
          />
          <View style={styles.header}>
            <TextView
              style={styles.textTitle}>
              {this.state.messageInfo.notificationTitle}
            </TextView>
            <TextView
              style={styles.textDate}
              numberOfLines={1}>
              {this.state.messageInfo.createTime}
            </TextView>
          </View>
          <TextView
            style={styles.textMessage}>
            {this.state.messageInfo.notificationText}
          </TextView>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: pageBackground
  },
  textTitle: {
    color: textPrimary,
    fontSize: 18,
    fontWeight: 'bold'
  },
  textDate: {
    color: textSecondary,
    fontSize: 10,
    paddingTop: 1
  },
  topImage: {
    width: $vw(100),
    height: $vw(80),
    backgroundColor: "#F0F0F0"
  },
  header: {
    padding: 16,
    backgroundColor: pageBackground
  },
  content: {
    backgroundColor: pageBackground
  },
  textMessage: {
    color: textPrimary,
    fontSize: 14,
    padding: 16,
  }
})