add app/pages/alert/ItemAlert.js

Strides-SPAPP/app/pages/alert/ItemAlert.js

@@ -0,0 +1,184 @@
+/**
+ * 通知消息渲染项目组件
+ * @邠心vbe on 2023/08/17
+ */
+import React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import TextView from '../../components/TextView';
+
+const IconType = ({type, style, size=32, color=colorAccent}) => {
+  switch (type) {
+    case "Applications":
+      return (
+        <MaterialIcons
+          name="admin-panel-settings"
+          size={size}
+          style={style}
+          color={color}
+        />
+      )
+    case "Admin":
+      return (
+        <MaterialCommunityIcons
+          name="message-draw"
+          size={size}
+          style={style}
+          color={color}
+        />
+      )
+    case "Charging":
+      return (
+        <MaterialIcons
+          name="offline-bolt"
+          size={size}
+          style={style}
+          color={color}
+        />
+      )
+    case "Wallet":
+      return (
+        <MaterialCommunityIcons
+          name="cash-multiple"
+          size={size}
+          style={style}
+          color={color}
+        />
+      )
+    case "Announcement":
+      return (
+        <MaterialCommunityIcons
+          name="message-alert"
+          size={size}
+          style={style}
+          color={color}
+        />
+      )
+    case "Review":
+      return (
+        <MaterialCommunityIcons
+          name="message-draw"
+          size={size}
+          style={style}
+          color={color}
+        />
+      )
+    case "Promotion":
+      return (
+        <MaterialCommunityIcons
+          name="bullhorn-variant"
+          size={size}
+          style={style}
+          color={color}
+        />
+      )
+    default:
+      return (
+        <MaterialCommunityIcons
+          name="message-alert"
+          size={size}
+          style={style}
+          color={color}
+        />
+      )
+  }
+}
+
+export default ItemAlert = ({item, index, separators, onPress, onLongPress}) => {
+  const getDotColor = () => {
+    if (item.readStatus) {
+      if (item?.notificationTitle.indexOf("Low") >= 0/* || item.notificationType == "Announcement"*/) {
+        return "#F09327";
+      } else {
+        return colorAccent;
+      }
+    } else {
+      return "#FF3B30";
+    }
+  }
+  return (
+    <Pressable
+      style={styles.notyItemView}
+      onPress={onPress}
+      android_ripple={ripple}
+      onLongPress={onLongPress}>
+      {/* <IconType
+        style={styles.iconType}
+        type={item.notificationType}
+        color={getDotColor()}
+      /> */}
+      <View style={styles.itemContent}>
+        <TextView
+          style={styles.textTitle}
+          numberOfLines={1}
+          ellipsizeMode="tail">
+          {item.notificationTitle}
+        </TextView>
+        <TextView
+          style={styles.textDate}
+          numberOfLines={1}>
+          <MaterialCommunityIcons
+            name="clock-time-four-outline"
+            size={10}
+            style={styles.textDate}/>
+          {" " + item.createTime}
+        </TextView>
+        <TextView
+          style={styles.textMessage}
+          numberOfLines={1}>
+          {item.notificationText}
+        </TextView>
+      </View>
+      { !item.readStatus &&
+        <MaterialIcons
+          name="circle"
+          size={16}
+          color={"#ED3F3F"}/>
+      }
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  notyItemView: {
+    padding: 16,
+    flexDirection: 'row'
+  },
+  unotyItemView: {
+    padding: 16,
+    flexDirection: 'row',
+    backgroundColor: "#F0F0F0"
+  },
+  iconType: {
+    marginRight: 12
+  },
+  readIcon: {
+    top: 2,
+    left: -5,
+    width: 7,
+    height: 6,
+    position: 'absolute'
+  },
+  itemContent: {
+    flex: 1
+  },
+  textTitle: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingBottom: 4
+  },
+  textDate: {
+    color: textSecondary,
+    fontSize: 10,
+    lineHeight: 10,
+    paddingBottom: 4
+  },
+  unread: {
+    fontWeight: 'bold'
+  },
+  textMessage: {
+    color: textPrimary,
+    fontSize: 10
+  }
+})

Strides-SPAPP/app/pages/alert/ItemArticle.js

@@ -0,0 +1,127 @@
+/**
+ * 文章渲染项目组件
+ * @邠心vbe on 2023/10/24
+ */
+import React from 'react';
+import { Image, Pressable, StyleSheet, View } from 'react-native';
+import TextView from '../../components/TextView';
+import utils from '../../utils/utils';
+
+export default ItemArticle = ({item, index, separators, onPress}) => {
+  return (
+    <Pressable
+      style={item.readStatus ? styles.notyItemView : styles.unotyItemView}
+      onPress={onPress}
+      android_ripple={ripple}>
+      <View style={ui.center}>
+        <Image
+          source={{uri: utils.getImageUrl(item.articleImages[0].articleImagePath)}}
+          resizeMode="cover"
+          style={styles.articleImage}/>
+        <View style={ui.flexc}>
+          <MaterialCommunityIcons
+            name="eye-check-outline"
+            size={13}
+            color={textPrimary}/>
+          <TextView
+            style={styles.textView}
+            numberOfLines={1}>
+            {item.articleViews}
+          </TextView>
+        </View>
+      </View>
+      <View style={styles.itemContent}>
+        <TextView
+          style={styles.textTitle}
+          numberOfLines={1}
+          ellipsizeMode="tail">
+          {item.articleTitle}
+        </TextView>
+        <TextView
+          style={styles.textDate}
+          numberOfLines={1}>
+          <MaterialCommunityIcons
+            name="clock-time-four-outline"
+            size={10}
+            style={styles.textDate}/>
+          {" " + item.createTime}
+        </TextView>
+        <View style={ui.flex}>
+          <TextView 
+            style={styles.labelTypeText}
+            numberOfLines={1}>
+            {item.articleTypeName}
+          </TextView>
+        </View>
+        <TextView
+          style={styles.textMessage}
+          numberOfLines={4}>
+          {item.articleContent}
+        </TextView>
+      </View>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  notyItemView: {
+    padding: 16,
+    flexDirection: 'row'
+  },
+  unotyItemView: {
+    padding: 16,
+    flexDirection: 'row',
+    backgroundColor: "#F0F0F0"
+  },
+  articleImage: {
+    width: 85,
+    height: 85,
+    borderRadius: 6,
+    marginRight: 16,
+    marginBottom: 8
+  },
+  readIcon: {
+    top: 2,
+    left: -5,
+    width: 7,
+    height: 6,
+    position: 'absolute'
+  },
+  itemContent: {
+    flex: 1
+  },
+  textTitle: {
+    color: textPrimary,
+    fontSize: 15,
+    fontWeight: 'bold',
+    paddingBottom: 4
+  },
+  textDate: {
+    color: textSecondary,
+    fontSize: 10,
+    lineHeight: 10,
+    paddingBottom: 4
+  },
+  textView: {
+    color: textPrimary,
+    fontSize: 11,
+    lineHeight: 12,
+    paddingLeft: 4,
+    paddingRight: 16
+  },
+  labelTypeText: {
+    fontSize: 10,
+    borderWidth: 1,
+    borderRadius: 4,
+    borderColor: colorPrimary,
+    ...$padding(2, 6)
+  },
+  unread: {
+    fontWeight: 'bold'
+  },
+  textMessage: {
+    color: textPrimary,
+    fontSize: 12,
+    paddingTop: 2
+  }
+})

Strides-SPAPP/app/pages/alert/ItemCampaign.js

@@ -0,0 +1,159 @@
+/**
+ * 活动渲染项目组件
+ * @邠心vbe on 2023/10/25
+ */
+import React from 'react';
+import { Image, Pressable, StyleSheet, View } from 'react-native';
+import TextView from '../../components/TextView';
+import utils from '../../utils/utils';
+
+const getColorByType = (type) => {
+  switch (type) {
+    case "Ended":
+      return {
+        backgroundColor: "#E11919"
+      }
+    case "Upcoming":
+      return {
+        backgroundColor: "#FFAA2C"
+      }
+  }
+}
+
+export default ItemCampaign = ({item, index, separators, onPress}) => {
+  return (
+    <Pressable
+      style={item.readStatus ? styles.notyItemView : styles.unotyItemView}
+      onPress={onPress}
+      android_ripple={ripple}>
+      <View style={ui.center}>
+        <Image
+          source={{uri: utils.getImageUrl(item.articleImages[0].articleImagePath)}}
+          resizeMode="cover"
+          style={styles.articleImage}/>
+        <View style={ui.flexc}>
+          <MaterialCommunityIcons
+            name="eye-check-outline"
+            size={13}
+            color={textPrimary}/>
+          <TextView
+            style={styles.textView}
+            numberOfLines={1}>
+            {item.articleViews}
+          </TextView>
+        </View>
+      </View>
+      <View style={styles.itemContent}>
+        <View>
+          <TextView 
+            style={[styles.labelTypeText, getColorByType(item.campaignMark)]}
+            numberOfLines={1}>
+            {item.campaignMark}
+          </TextView>
+          <TextView
+            style={styles.textTitle}
+            numberOfLines={2}
+            ellipsizeMode="tail">
+            <TextView
+              style={styles.hideText}
+              numberOfLines={1}>
+              {item.campaignMark}
+            </TextView>
+            {item.articleTitle}
+          </TextView>
+        </View>
+        <TextView
+          style={styles.textDate}
+          numberOfLines={1}>
+          <MaterialCommunityIcons
+            name="calendar-clock"
+            size={12}/>
+          {" " + item.campaignDuration}
+        </TextView>
+        <TextView
+          style={styles.textMessage}
+          numberOfLines={4}>
+          {item.articleContent}
+        </TextView>
+      </View>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  notyItemView: {
+    padding: 16,
+    flexDirection: 'row'
+  },
+  unotyItemView: {
+    padding: 16,
+    flexDirection: 'row',
+    backgroundColor: "#F0F0F0"
+  },
+  articleImage: {
+    width: 85,
+    height: 85,
+    borderRadius: 6,
+    marginRight: 16,
+    marginBottom: 8
+  },
+  readIcon: {
+    top: 2,
+    left: -5,
+    width: 7,
+    height: 6,
+    position: 'absolute'
+  },
+  itemContent: {
+    flex: 1
+  },
+  textTitle: {
+    color: textPrimary,
+    fontSize: 15,
+    lineHeight: 20,
+    fontWeight: 'bold',
+    paddingBottom: 4,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  labelTypeText: {
+    color: textLight,
+    height: 16,
+    fontSize: 10,
+    borderRadius: 4,
+    marginTop: 2,
+    ...$padding(0, 6),
+    position: 'absolute',
+    backgroundColor: "#1ABD00"
+  },
+  hideText: {
+    height: 16,
+    opacity: 0,
+    fontSize: 10,
+    ...$padding(2, 8),
+  },
+  textDate: {
+    color: textSecondary,
+    fontSize: 11,
+    lineHeight: 12,
+    fontWeight: 'bold',
+    paddingBottom: 4,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  textView: {
+    color: textPrimary,
+    fontSize: 11,
+    lineHeight: 12,
+    paddingLeft: 4,
+    paddingRight: 16
+  },
+  unread: {
+    fontWeight: 'bold'
+  },
+  textMessage: {
+    color: textPrimary,
+    fontSize: 12,
+    paddingTop: 2
+  }
+})