add app/pages/vouchers/VoucherDetails.js

Strides-SPAPP/app/pages/vouchers/VoucherDetails.js

@@ -0,0 +1,240 @@
+/**
+ * 代金券详情页面
+ * @邠心vbe on 2024/04/17
+ */
+import React, { Component } from 'react';
+import { View, StyleSheet, Text, TouchableOpacity, ScrollView } from 'react-native';
+import TextView from '../../components/TextView';
+import apiVoucher from '../../api/apiVoucher';
+import Dialog from '../../components/Dialog';
+import utils from '../../utils/utils';
+import VbeSkeleton from '../../components/VbeSkeleton';
+
+export default class VoucherDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      voucherId: "",
+      voucherInfo: {}
+    };
+  }
+
+  componentDidMount() {
+    const params = this.props.route.params;
+    if (params.id) {
+      this.setState({
+        voucherId: params.id
+      }, () => {
+        this.getVoucherDetail();
+      })
+    }
+  }
+
+  getVoucherDetail() {
+    apiVoucher.getVoucherInfo(this.state.voucherId).then(res => {
+      if (res.data) {
+        this.setState({
+          voucherInfo: res.data
+        })
+      }
+    }).catch(err => {
+      toastShort(err)
+    }).finally(() => {
+      this.setState({
+        loading: false
+      })
+    });
+  }
+
+  getDaysText() {
+    if (this.state.voucherInfo.eligibleForUsageOn) {
+      if (typeof this.state.voucherInfo.eligibleForUsageOn == 'string') {
+        this.state.voucherInfo.eligibleForUsageOn = this.state.voucherInfo.eligibleForUsageOn.split(",");
+      }
+      return this.state.voucherInfo.eligibleForUsageOn.join(", ");
+    } else {
+      return "Every day";
+    }
+  }
+
+  getTypeText() {
+    if (this.state.voucherInfo.chargeType) {
+      return this.state.voucherInfo.chargeType;
+    } else {
+      return "AC & DC";
+    }
+  }
+
+  toSiteDetail(id) {
+    utils.toChargeDetailPage(id, "view");
+  }
+
+  render() {
+    if (this.state.loading) {
+      return (
+        <VbeSkeleton
+          style={styles.loadingView}
+          viewStyle={styles.container}
+          layout={[
+            {width: '100%', height: 20},
+            {width: '50%', height: 20, marginTop: 8},
+            {width: '30%', height: 18, marginTop: 32},
+            {width: '100%', height: 15, marginTop: 16},
+            {width: '100%', height: 15, marginTop: 8},
+            {width: '60%', height: 15, marginTop: 8},
+            {width: '30%', height: 18, marginTop: 24},
+            {width: '100%', height: 15, marginTop: 8},
+            {width: '100%', height: 15, marginTop: 8},
+            {width: '60%', height: 15, marginTop: 8},
+            {width: '30%', height: 18, marginTop: 24},
+            {width: '100%', height: 15, marginTop: 8},
+            {width: '100%', height: 15, marginTop: 8},
+            {width: '60%', height: 15, marginTop: 8},
+            {width: '30%', height: 18, marginTop: 24},
+            {width: '100%', height: 15, marginTop: 8},
+            {width: '100%', height: 15, marginTop: 8},
+            {width: '60%', height: 15, marginTop: 8},
+            {width: '30%', height: 18, marginTop: 24},
+            {width: '100%', height: 15, marginTop: 8},
+            {width: '100%', height: 15, marginTop: 8},
+            {width: '60%', height: 15, marginTop: 8}
+          ]}/>
+      )
+    }
+    return (
+      <ScrollView
+        style={styles.container}
+        contentContainerStyle={$padding(16)}>
+        <TextView style={styles.voucherName}>{this.state.voucherInfo.voucherName}</TextView>
+        <EndView half/>
+        <TextView style={styles.labelText}>{$t("voucher.voucherType")}</TextView>
+        <TextView style={styles.valueText}>{this.state.voucherInfo.voucherType}</TextView>
+
+        <TextView style={styles.labelText}>{$t("voucher.description")}</TextView>
+        <TextView style={styles.valueText}>{this.state.voucherInfo.voucherDesc}</TextView>
+
+        <TextView style={styles.labelText}>{$t("voucher.validityPeriod")}</TextView>
+        <TextView style={styles.valueText}>{this.state.voucherInfo.validityPeriod}</TextView>
+
+        <TextView style={styles.labelText}>{$t("voucher.voucherCondition")}</TextView>
+        <View style={styles.olView}>
+          <View style={ui.flexc}>
+            <MaterialIcons
+              style={styles.circleIcon}
+              name="circle"
+              color={textPrimary}
+              size={6}/>
+            <TextView style={styles.valueText}>
+              {$t("voucher.conditionDays")} <Text style={ui.bold}>{this.getDaysText()}</Text>
+            </TextView>
+          </View>
+          <View style={ui.flexc}>
+            <MaterialIcons
+              style={styles.circleIcon}
+              name="circle"
+              color={textPrimary}
+              size={6}/>
+            <TextView style={styles.valueText}>
+              {$t("voucher.conditionTime")} <Text style={ui.bold}>{this.state.voucherInfo.eligibleForUsageDuring}</Text>
+            </TextView>
+          </View>
+          <View style={ui.flexc}>
+            <MaterialIcons
+              style={styles.circleIcon}
+              name="circle"
+              color={textPrimary}
+              size={6}/>
+            <TextView style={styles.valueText}>
+              <Text style={ui.bold}>{this.getTypeText()}</Text> {$t("voucher.conditionTypeOnly")}
+            </TextView>
+          </View>
+          <View style={ui.flexc}>
+            <MaterialIcons
+              style={styles.circleIcon}
+              name="circle"
+              color={textPrimary}
+              size={6}/>
+            <TextView style={styles.valueText}>
+              {$t("voucher.conditionCountry")} <Text style={ui.bold}>{this.state.voucherInfo.country}</Text>
+            </TextView>
+          </View>
+          <View style={ui.flexc}>
+            <MaterialIcons
+              style={styles.circleIcon}
+              name="circle"
+              color={textPrimary}
+              size={6}/>
+            <TextView style={styles.valueText}>
+              {$t("voucher.conditionMinSpend")} <Text style={ui.bold}>{this.state.voucherInfo.minimumSpend}</Text>
+            </TextView>
+          </View>
+        </View>
+
+        <TextView style={styles.labelText}>{$t("voucher.siteEligibility")}</TextView>
+        <View style={styles.olView}>
+          { this.state.voucherInfo.siteNames?.map((item, index) => (
+            <TouchableOpacity
+              style={styles.siteRow}
+              onPress={() => this.toSiteDetail(item.sitePk)}
+              key={index}>
+              <MaterialIcons
+                style={styles.circleIcon}
+                name="circle"
+                color={textPrimary}
+                size={6}/>
+              <TextView style={ui.link}>{item?.siteName}</TextView>
+            </TouchableOpacity>
+            ))
+          }
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: pageBackground
+  },
+  loadingView: {
+    flex: 1,
+    padding: 16,
+    justifyContent: 'flex-start',
+    backgroundColor: pageBackground
+  },
+  voucherName: {
+    color: textPrimary,
+    fontSize: 16,
+    fontWeight: 'bold',
+    paddingTop: 4,
+    paddingBottom: 12,
+    borderBottomWidth: 2,
+    borderColor: colorPrimary
+  },
+  labelText: {
+    color: textPrimary,
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingTop: 16
+  },
+  valueText: {
+    color: textSecondary,
+    fontSize: 14,
+    paddingTop: 6
+  },
+  olView: {
+    paddingTop: 6,
+    paddingLeft: 8
+  },
+  circleIcon: {
+    paddingTop: 3,
+    paddingRight: 8
+  },
+  siteRow: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    flexDirection: 'row'
+  }
+})