Add ScrollView in voucher detail page

https://dev.wormwood.com.sg/zentao/task-view-378.html

Strides-APP/app/pages/vouchers/ListVoucher.js

@@ -128,7 +128,7 @@ export default class ListVoucher extends Component {
         <View style={styles.itemBox}></View>
         <View style={styles.itemContent}>
           <TextView style={styles.voucherTitle} numberOfLines={1}>{item.voucherName}</TextView>
-          <TextView style={styles.voucherDesc}>{item.voucherDesc}</TextView>
+          <TextView style={styles.voucherDesc} numberOfLines={2}>{item.voucherDesc}</TextView>
           <TextView style={styles.expireDate}>{$t("voucher.expiresOn") + item.expiresOn}</TextView>
           { !app.isLumiWhitelabel && <>
             <View style={styles.rightDash}></View>

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

@@ -3,17 +3,18 @@
  * @邠心vbe on 2024/04/17
  */
 import React, { Component } from 'react';
-import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, Text, TouchableOpacity, ScrollView } from 'react-native';
 import TextView from '../../components/TextView';
-import app from '../../../app.json';
 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: {}
     };
@@ -31,7 +32,6 @@ export default class VoucherDetails extends Component {
   }
 
   getVoucherDetail() {
-    Dialog.showProgressDialog();
     apiVoucher.getVoucherInfo(this.state.voucherId).then(res => {
       if (res.data) {
         this.setState({
@@ -41,7 +41,9 @@ export default class VoucherDetails extends Component {
     }).catch(err => {
       toastShort(err)
     }).finally(() => {
-      Dialog.dismissLoading();
+      this.setState({
+        loading: false
+      })
     });
   }
 
@@ -69,8 +71,41 @@ export default class VoucherDetails extends Component {
   }
 
   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 (
-      <View style={styles.container}>
+      <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>
@@ -153,7 +188,7 @@ export default class VoucherDetails extends Component {
             ))
           }
         </View>
-      </View>
+      </ScrollView>
     );
   }
 }
@@ -161,7 +196,13 @@ export default class VoucherDetails extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 16
+    backgroundColor: pageBackground
+  },
+  loadingView: {
+    flex: 1,
+    padding: 16,
+    justifyContent: 'flex-start',
+    backgroundColor: pageBackground
   },
   voucherName: {
     color: textPrimary,
@@ -181,9 +222,10 @@ const styles = StyleSheet.create({
   valueText: {
     color: textSecondary,
     fontSize: 14,
-    paddingTop: 4
+    paddingTop: 6
   },
   olView: {
+    paddingTop: 6,
     paddingLeft: 8
   },
   circleIcon: {