fstarter 2.10.56 → 2.10.57

package/src/plugins/plugins/demo.vue

@@ -0,0 +1,832 @@
+<template>
+  <div class="demo-container">
+    <van-nav-bar title="Native Utils Demo" fixed />
+    
+    <div class="content">
+      <van-cell-group title="用户信息管理">
+        <van-cell title="设置用户信息" is-link @click="handleSetUserInfo" />
+        <van-cell title="获取用户信息" is-link @click="handleGetUserInfo" />
+        <van-cell title="清空用户信息" is-link @click="handleClearUserInfo" />
+      </van-cell-group>
+
+      <van-cell-group title="分享功能">
+        <van-cell title="微信分享" is-link @click="handleShare" />
+        <van-cell title="微信分享-图片" is-link @click="handleShare1" />
+        <van-cell title="微信分享-文字" is-link @click="handleShare2" />
+        <van-cell title="微信分享-文件" is-link @click="handleShare3" />
+      </van-cell-group>
+
+      <van-cell-group title="登录认证">
+        <van-cell title="微信登录" is-link @click="handleWechatLogin" />
+      </van-cell-group>
+
+      <van-cell-group title="系统功能">
+        <van-cell title="打开系统浏览器" is-link @click="handleOpenSystemBrowser" />
+        <van-cell title="截屏" is-link @click="handleScreenshot" />
+        <van-cell title="设置屏幕方向" is-link @click="handleSetScreenOrientation" />
+      </van-cell-group>
+
+      <van-cell-group title="应用间交互">
+        <van-cell title="唤起其他APP" is-link @click="handleLaunchApp" />
+        <van-cell title="设置返回拦截" is-link @click="handleSetBackInterceptor" />
+      </van-cell-group>
+
+      <van-cell-group title="页面导航">
+        <van-cell title="页面重定向" is-link @click="handleRedirectTo" />
+        <van-cell title="打开新页面" is-link @click="handleOpenPage" />
+        <van-cell title="关闭当前页面" is-link @click="handleClosePage" />
+        <van-cell title="隐藏原生标题栏" is-link @click="handleSetNavigationBarVisible" />
+      </van-cell-group>
+
+      <van-cell-group title="人脸识别">
+        <van-cell title="前往人脸识别" is-link @click="handleGoCheckFace" />
+        <van-cell title="检测人脸识别结果" is-link @click="handleCheckFace" />
+      </van-cell-group>
+
+      <van-cell-group title="设备功能">
+        <van-cell title="扫码" is-link @click="handleScanQRCode" />
+        <van-cell title="拨打电话" is-link @click="handleCallPhone" />
+        <van-cell title="发送短信" is-link @click="handleSendSMS" />
+        <van-cell title="唤起通讯录" is-link @click="handleReadContacts" />
+      </van-cell-group>
+
+      <van-cell-group title="媒体功能">
+        <van-cell title="调起壳拍照" is-link @click="handleTakePhoto" />
+        <img :src="img1" alt="" style="width: 50px;height: 100px;" v-show="img1">
+        <van-cell title="调起壳相册" is-link @click="handleChooseImage" />
+        <img :src="img2" alt="" style="width: 50px;height: 100px;" v-show="img2" >
+        <van-cell title="调起相机和相册" is-link @click="handleTakePicture" />
+        <van-uploader
+            accept=".pdf"
+            :after-read="afterRead"
+          >
+          <van-cell title="上传pdf示例" is-link @click="handleTakePdf" />
+          </van-uploader>
+      </van-cell-group>
+
+      <van-cell-group title="文件处理">
+        <van-cell title="PDF阅读1个" is-link @click="handlePdfRead" />
+        <van-cell title="PDF阅读多个" is-link @click="handlePdfRead1" />
+        <van-cell title="PDF阅读带倒计时" is-link @click="handlePdfRead2" />
+      </van-cell-group>
+
+      <van-cell-group title="数据存储">
+        <van-cell title="持久化存储" is-link @click="handleSetItem" />
+        <van-cell title="获取持久化存储" is-link @click="handleGetItem" />
+        <van-cell title="删除持久化存储" is-link @click="handleRemoveItem" />
+      </van-cell-group>
+
+      <van-cell-group title="工具功能">
+        <van-cell title="Toast提示" is-link @click="handleToast" />
+        <van-cell title="添加日历事件" is-link @click="handleAddCalendarEvent" />
+        <van-cell title="数据加密" is-link @click="handleEncrypt" />
+      </van-cell-group>
+
+      <van-cell-group title="位置服务">
+        <van-cell title="获取位置信息" is-link @click="handleGetLocation" />
+      </van-cell-group>
+
+      <van-cell-group title="缓存管理">
+        <van-cell title="获取缓存大小" is-link @click="handleGetCacheSize" />
+        <van-cell title="清除缓存" is-link @click="handleClearCache" />
+        <van-cell title="获取设备信息" is-link @click="handleGetDeviceInfo" />
+      </van-cell-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { 
+  NavBar, 
+  Cell, 
+  CellGroup, 
+  Toast,
+  Dialog,
+  Uploader  
+} from 'vant';
+
+Vue.use(NavBar);
+Vue.use(Cell);
+Vue.use(CellGroup);
+Vue.use(Toast);
+Vue.use(Dialog);
+Vue.use(Uploader);
+
+import axios from 'axios'
+import nativeUtils from './nativeUtils'
+
+
+
+export default {
+  name: 'NativeUtilsDemo',
+  data() {
+    return {
+      // 示例数据
+      testUserInfo: {
+        userId: '123456',
+        userName: 'Test User',
+        mobile: '13800138000'
+      },
+      img1: '',
+      img2: '',
+    };
+  },
+  methods: {
+    // 用户信息管理
+    handleSetUserInfo() {
+      this.$native.setUserInfo(this.testUserInfo)
+        .then(res => {
+          Toast.success('设置用户信息成功');
+          console.log('设置用户信息结果:', res);
+        })
+        .catch(err => {
+          Toast.fail('设置用户信息失败: ' + err.message);
+        });
+    },
+
+    handleGetUserInfo() {
+      this.$native.getUserInfo()
+        .then(userInfo => {
+          Toast.success('获取用户信息成功');
+          console.log('用户信息:', userInfo);
+          Dialog.alert({
+            title: '用户信息',
+            message: JSON.stringify(userInfo, null, 2)
+          });
+        })
+        .catch(err => {
+          Toast.fail('获取用户信息失败: ' + err.message);
+        });
+    },
+
+    handleClearUserInfo() {
+      this.$native.clearUserInfo()
+        .then(() => {
+          Toast.success('清空用户信息成功');
+        })
+        .catch(err => {
+          Toast.fail('清空用户信息失败: ' + err.message);
+        });
+    },
+
+    // 分享功能
+    handleShare() {
+      const shareConfig = {
+        type: 'webpage',
+        scene: 'session',
+        content: {
+          title: '恒安标准人寿',
+          description: '恒安标准人寿官网描述',
+          webpageUrl: 'https://www.hengansl.com/',
+          thumb: ''
+        }
+      };
+
+      this.$native.share(shareConfig)
+        .then(res => {
+          Toast.success('分享成功');
+          console.log('分享结果:', res);
+        })
+        .catch(err => {
+          Toast.fail('分享失败: ' + err.message);
+        });
+    },
+    handleShare1() {
+      const shareConfig = {
+        type: 'image',
+        scene: 'session',
+        content: {
+          image: 'https://www.hengansl.com/hengan/imageDir/2023/09/img_pc_site/2023092110340623410.jpg' // 替换为实际的图片链接
+        }
+      };
+
+      this.$native.share(shareConfig)
+        .then(res => {
+          Toast.success('分享成功');
+          console.log('分享结果:', res);
+        })
+        .catch(err => {
+          Toast.fail('分享失败: ' + err.message);
+        });
+    },
+    handleShare2() {
+      const shareConfig = {
+        type: 'text',
+        scene: 'session',
+        content: {
+          text: '这是一个文本分享示例'
+        }
+      };
+
+      this.$native.share(shareConfig)
+        .then(res => {
+          Toast.success('分享成功');
+          console.log('分享结果:', res);
+        })
+        .catch(err => {
+          Toast.fail('分享失败: ' + err.message);
+        });
+    },
+
+    handleShare3() {
+      const shareConfig = {
+        type: 'file',
+        scene: 'session',
+        content: {
+          type: 'pdf', // 替换为实际的文件类型
+          title: 'PDF文件分享示例', // 替换为实际的PDF文件标题
+          url: 'https://teststatic.ihasl.com/pages/salessupport/app/iamges/pdf/hastar.pdf'
+        }
+      };
+
+      this.$native.share(shareConfig)
+        .then(res => {
+          Toast.success('分享成功');
+          console.log('分享结果:', res);
+        })
+        .catch(err => {
+          Toast.fail('分享失败: ' + err.message);
+        });
+    },
+
+    // 登录认证
+    handleWechatLogin() {
+      this.$native.wechatLogin()
+        .then(result => {
+          Toast.success('微信登录成功');
+          console.log('微信登录结果:', result);
+        })
+        .catch(err => {
+          Toast.fail('微信登录失败: ' + err.message);
+        });
+    },
+
+    // 系统功能
+    handleOpenSystemBrowser() {
+      const url = 'https://www.hengansl.com/';
+      this.$native.openSystemBrowser(url)
+        .then(() => {
+          Toast.success('已打开系统浏览器');
+        })
+        .catch(err => {
+          Toast.fail('打开系统浏览器失败: ' + err.message);
+        });
+    },
+
+    handleScreenshot() {
+      this.$native.screenshot()
+        .then(imageData => {
+          Toast.success('截屏成功');
+          console.log('截屏数据:', imageData);
+        })
+        .catch(err => {
+          Toast.fail('截屏失败: ' + err.message);
+        });
+    },
+
+    handleSetScreenOrientation() {
+      Dialog.confirm({
+        title: '设置屏幕方向',
+        message: '请选择屏幕方向',
+        confirmButtonText: '竖屏',
+        cancelButtonText: '横屏'
+      }).then(() => {
+        // 设置为竖屏
+        this.$native.setScreenOrientation('portrait')
+          .then(() => {
+            Toast.success('已设置为竖屏');
+          })
+          .catch(err => {
+            Toast.fail('设置屏幕方向失败: ' + err.message);
+          });
+      }).catch(() => {
+        // 设置为横屏
+        this.$native.setScreenOrientation('landscape')
+          .then(() => {
+            Toast.success('已设置为横屏');
+          })
+          .catch(err => {
+            Toast.fail('设置屏幕方向失败: ' + err.message);
+          });
+      });
+    },
+
+    // 应用间交互
+    handleLaunchApp() {
+      // 示例配置，实际使用时需要根据目标APP调整
+      const config = {
+        packageName: 'wxa029bbfb66ba0ce0://', // 这是e行的
+        params: {
+          key1: 'value1',
+          key2: 'value2'
+        },
+        fallbackUrl: 'https://www.hengansl.com/' // 备用 H5 地址
+      };
+
+      this.$native.launchApp(config)
+        .then(() => {
+          Toast.success('已尝试唤起APP');
+        })
+        .catch(err => {
+          Toast.fail('唤起APP失败: ' + err.message);
+        });
+    },
+
+    handleSetBackInterceptor() {
+      Dialog.confirm({
+        title: '设置返回拦截',
+        message: '是否启用返回拦截？',
+        confirmButtonText: '启用',
+        cancelButtonText: '禁用'
+      }).then(() => {
+        // 启用返回拦截
+        this.$native.setBackInterceptor(true)
+          .then(() => {
+            Toast.success('已启用返回拦截');
+          })
+          .catch(err => {
+            Toast.fail('设置返回拦截失败: ' + err.message);
+          });
+      }).catch(() => {
+        // 禁用返回拦截
+        this.$native.setBackInterceptor(false)
+          .then(() => {
+            Toast.success('已禁用返回拦截');
+          })
+          .catch(err => {
+            Toast.fail('设置返回拦截失败: ' + err.message);
+          });
+      });
+    },
+
+    // 页面导航
+    handleRedirectTo() {
+      const url = 'https://www.hengansl.com/';
+      this.$native.redirectTo(url)
+        .then(() => {
+          Toast.success('页面重定向成功');
+        })
+        .catch(err => {
+          Toast.fail('页面重定向失败: ' + err.message);
+        });
+    },
+
+    handleOpenPage() {
+      const url = 'https://www.hengansl.com/';
+      this.$native.openPage(url)
+        .then(() => {
+          Toast.success('打开新页面成功');
+        })
+        .catch(err => {
+          Toast.fail('打开新页面失败: ' + err.message);
+        });
+    },
+
+    handleClosePage() {
+      this.$native.closePage()
+        .then(() => {
+          Toast.success('关闭页面成功');
+        })
+        .catch(err => {
+          Toast.fail('关闭页面失败: ' + err.message);
+        });
+    },
+
+    handleSetNavigationBarVisible() {
+      Dialog.confirm({
+        title: '设置标题栏可见性',
+        message: '是否隐藏原生标题栏？',
+        confirmButtonText: '隐藏',
+        cancelButtonText: '显示'
+      }).then(() => {
+        // 隐藏原生标题栏
+        this.$native.setNavigationBarVisible(false)
+          .then(() => {
+            Toast.success('已隐藏原生标题栏');
+          })
+          .catch(err => {
+            Toast.fail('设置标题栏可见性失败: ' + err.message);
+          });
+      }).catch(() => {
+        // 显示原生标题栏
+        this.$native.setNavigationBarVisible(true)
+          .then(() => {
+            Toast.success('已显示原生标题栏');
+          })
+          .catch(err => {
+            Toast.fail('设置标题栏可见性失败: ' + err.message);
+          });
+      });
+    },
+
+    // 人脸识别
+    handleGoCheckFace() {
+      let params = {
+        requestType: 'YX',// 请求类型
+        userName: '项语晴', // 姓名
+        userIdNo: '131128199509262429', // 身份证号码
+        redirectUrl: window.location.href, // 跳转地址
+        terminal: 'YX', // 终端类型
+        requestSource: 'YX', // 请求来源
+        meta: { // 元数据
+          tenantCode: 'YX', // 租户编码
+          businessCode: 'YX-EDOR', // 业务编码
+          serviceType: 'FACE' // 业务类型
+        }
+      }
+      this.$native.goCheckFace(params).then(res => {
+        if (res.h5FaceUrl) {
+          this.$native.redirectTo(res.h5FaceUrl).then(res => {
+
+          }).catch(err => {
+            Toast('壳跳转人脸识别失败，请重试')
+          });
+        }
+      }).catch(err => {
+        Toast('获得人脸识别失败，请重试')
+      });
+    },
+
+    handleCheckFace() {
+      this.$native.checkFace().then(response => {
+        console.log('人脸识别结果:', response);
+      }).catch(err => {});
+    },
+
+    // 设备功能
+    handleScanQRCode() {
+      this.$native.scanQRCode()
+        .then(result => {
+          Toast.success('扫码成功');
+          console.log('扫码结果:', result);
+          Dialog.alert({
+            title: '扫码结果',
+            message: result
+          });
+        })
+        .catch(err => {
+          Toast.fail('扫码失败: ' + err.message);
+        });
+    },
+
+    handleCallPhone() {
+      const phoneNumber = '10086';
+      this.$native.callphone(phoneNumber)
+        .then(() => {
+          Toast.success('已尝试拨打电话');
+        })
+        .catch(err => {
+          Toast.fail('拨打电话失败: ' + err.message);
+        });
+    },
+
+    handleSendSMS() {
+      const phoneNumber = '10086';
+      const content = '测试短信内容';
+      this.$native.sendSMS(phoneNumber, content)
+        .then(() => {
+          Toast.success('已尝试发送短信');
+        })
+        .catch(err => {
+          Toast.fail('发送短信失败: ' + err.message);
+        });
+    },
+
+    handleReadContacts() {
+      this.$native.readContacts()
+        .then(contact => {
+          Toast.success('选择联系人成功');
+          console.log('选择的联系人:', contact);
+          Dialog.alert({
+            title: '选择的联系人',
+            message: JSON.stringify(contact, null, 2)
+          });
+        })
+        .catch(err => {
+          Toast.fail('选择联系人失败: ' + err.message);
+        });
+    },
+
+    // 媒体功能
+    handleTakePhoto() {
+      this.$native.takePhoto(
+        {
+          maxSize: 500, // 图片大小限制，单位为KB
+          actions: '',
+          domain: 'INDUCTION',
+          buz: 'PICTURE',
+          buzId: '111',
+          isCopper: false,
+          isUpload: false // 如果是false 只返回imageBase64
+        }
+      )
+        .then(photo => {
+          Toast.success('拍照成功');
+          this.img1 = 'https://testfile.ihasl.com/file/v1/hasl/fileAdmin/fileAdmin/get/'+ photo.fileId + '.' + photo.ext
+          console.log('拍摄的照片:', photo);
+        })
+        .catch(err => {
+          Toast.fail('拍照失败: ' + err.message);
+        });
+    },
+
+    handleChooseImage() {
+      this.$native.chooseImage({
+        maxCount: 2, // 最多可选择的图片数量, 默认为9
+        maxSize: 500, // 图片大小限制，单位为KB
+        sourceType: ['album'], // 可选来源类型，'album' 为相册，'camera' 为相机 默认两者都有
+        sceneDesc: '选择图片上传', // 场景描述
+        actions: '',
+        domain: 'INDUCTION',
+        buz: 'PICTURE',
+        buzId: '111',
+        isCopper: false, // 是否裁剪 裁剪只能选择1张图片
+        isUpload: true
+      })
+        .then(images => {
+          // 选择多张返回的是数组，单张返回的是对象
+          Toast.success('选择图片成功');
+          this.img2 = 'https://testfile.ihasl.com/file/v1/hasl/fileAdmin/fileAdmin/get/'+ images.fileId + '.' + images.ext
+
+          console.log('选择的图片:', images.length);
+        })
+        .catch(err => {
+          Toast.fail('选择图片失败: ' + err.message);
+        });
+    },
+
+    handleTakePicture() {
+      this.$native.takePicture({
+        maxCount: 1, // 最多可选择的图片数量, 默认为9
+        maxSize: 500, // 图片大小限制，单位为KB
+        sourceType: ['album'], // 可选来源类型，'album' 为相册，'camera' 为相机 默认两者都有
+        sceneDesc: '选择图片上传', // 场景描述
+        actions: '',
+        domain: 'INDUCTION',
+        buz: 'PICTURE',
+        buzId: '111'
+      })
+        .then(result => {
+          Toast.success('拍摄/选择成功');
+          console.log('拍摄/选择结果:', result);
+        })
+        .catch(err => {
+          Toast.fail('拍摄/选择失败: ' + err.message);
+        });
+    },
+    handleTakePdf(){
+
+    },
+    async afterRead(file) {
+      // 此时可以自行将文件上传至服务器
+      console.log(file.content);
+      let aaa = await nativeUtils.base64ToFile(file.content,'sss.pdf')
+      const params = new FormData();
+      params.append('file', aaa);
+      params.append('domain', 'INDUCTION'); //业务系统代码
+      params.append('buz', 'PICTURE'); //文件种类代码
+      params.append('actions', 'actions');
+      params.append('buzId', '111'); // 业务编码
+      params.append('expired', '-1'); // 失效时间
+      params.append('auth', 0); // 是否需要token
+      axios({
+        method: 'post',
+        url: 'https://testfile.ihasl.com/file/v1/hasl/fileAdmin/fileAdmin/upload',
+        data: params,
+        timeout: 60 * 1000,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          'Authorization': 'Basic ' + sessionStorage.getItem('token'),
+          'Accept-Device': 'Null',
+          'Accept-DeviceOS': 'NULL',
+          'Accept-Location': 'NULL',
+          'Accept-ISP': 'NULL',
+          'Accept-StartTime': 'NULL',
+          'Accept-TimeZone': 28800000,
+          'Accept-Attr1': 'NULL',
+          'Accept-Attr2': 'PC',
+          'Accept-Attr3': 'en_CN',
+          'Real-Ip': 'NULL',
+          'Accept-Attr4': 'NULL',
+          'Accept-Attr6': '623023198301252893'
+        }
+      });
+    },
+
+    // 文件处理
+    handlePdfRead() {
+      const pdfFiles = [
+        {
+          url: "https://teststatic.ihasl.com/pages/salessupport/app/iamges/pdf/hastar.pdf",
+          title: "测试文件1"
+        }
+      ];
+
+      this.$native.pdfRead(pdfFiles)
+        .then(res => {
+          Toast.success('PDF阅读成功');
+          console.log('PDF阅读结果:', res);
+        })
+        .catch(err => {
+          Toast.fail('PDF阅读失败: ' + err.message);
+        });
+    },
+
+    handlePdfRead1() {
+      const pdfFiles = [
+        {
+          url: "https://teststatic.ihasl.com/pages/salessupport/app/iamges/pdf/hastar.pdf",
+          title: "测试文件1"
+        },
+        {
+          url: "https://teststatic.ihasl.com/pages/salessupport/app/iamges/pdf/hastar.pdf",
+          title: "测试文件1"
+        }
+      ];
+
+      this.$native.pdfRead(pdfFiles)
+        .then(res => {
+          Toast.success('PDF阅读成功');
+          console.log('PDF阅读结果:', res);
+        })
+        .catch(err => {
+          Toast.fail('PDF阅读失败: ' + err.message);
+        });
+    },
+    handlePdfRead2() {
+      const pdfFiles = [
+        {
+          url: "https://teststatic.ihasl.com/pages/salessupport/app/iamges/pdf/hastar.pdf",
+          title: "测试文件1",
+          countdownTime: 5
+        },
+        {
+          url: "https://teststatic.ihasl.com/pages/salessupport/app/iamges/pdf/hastar.pdf",
+          title: "测试文件2",
+          countdownTime: 5
+        }
+      ];
+
+      this.$native.pdfRead(pdfFiles,{
+        showCountdown: true
+      })
+        .then(res => {
+          Toast.success('PDF阅读成功');
+          console.log('PDF阅读结果:', res);
+        })
+        .catch(err => {
+          Toast.fail('PDF阅读失败: ' + err.message);
+        });
+    },
+
+    // 数据存储
+    handleSetItem() {
+      const key = 'demo_key';
+      const value = 'demo_value';
+      this.$native.setItem(key, value)
+        .then(() => {
+          Toast.success('持久化存储成功');
+        })
+        .catch(err => {
+          Toast.fail('持久化存储失败: ' + err.message);
+        });
+    },
+
+    handleGetItem() {
+      const key = 'demo_key';
+      this.$native.getItem(key)
+        .then(value => {
+          Toast.success('获取持久化存储成功');
+          console.log('获取的值:', value);
+          Dialog.alert({
+            title: '获取的值',
+            message: value || '未找到对应值'
+          });
+        })
+        .catch(err => {
+          Toast.fail('获取持久化存储失败: ' + err.message);
+        });
+    },
+
+    handleRemoveItem() {
+      const key = 'demo_key';
+      this.$native.removeItem(key)
+        .then(() => {
+          Toast.success('删除持久化存储成功');
+        })
+        .catch(err => {
+          Toast.fail('删除持久化存储失败: ' + err.message);
+        });
+    },
+
+    // 工具功能
+    handleToast() {
+      this.$native.Toast('这是一条Toast提示');
+    },
+
+    handleAddCalendarEvent() {
+      const event = {
+        title: '会议',
+        startTime: '2024-01-01 10:00',
+        endTime: '2024-01-01 11:00'
+      };
+
+      this.$native.addCalendarEvent(event)
+        .then(() => {
+          Toast.success('添加日历事件成功');
+        })
+        .catch(err => {
+          Toast.fail('添加日历事件失败: ' + err.message);
+        });
+    },
+
+    handleEncrypt() {
+      const str = '需要加密的敏感数据';
+      this.$native.encrypt(str)
+        .then(encrypted => {
+          Toast.success('数据加密成功');
+          console.log('加密结果:', encrypted);
+          Dialog.alert({
+            title: '加密结果',
+            message: encrypted
+          });
+        })
+        .catch(err => {
+          Toast.fail('数据加密失败: ' + err.message);
+        });
+    },
+
+    // 位置服务
+    handleGetLocation() {
+      this.$native.getLocation()
+        .then(location => {
+          Toast.success('获取位置信息成功');
+          console.log('位置信息:', location);
+          Dialog.alert({
+            title: '位置信息',
+            message: JSON.stringify(location, null, 2)
+          });
+        })
+        .catch(err => {
+          Toast.fail('获取位置信息失败: ' + err.message);
+        });
+    },
+
+    // 缓存管理
+    handleGetCacheSize() {
+      this.$native.getCacheSize()
+        .then(size => {
+          Toast.success('获取缓存大小成功');
+          console.log('缓存大小:', size);
+          Dialog.alert({
+            title: '缓存大小',
+            message: size
+          });
+        })
+        .catch(err => {
+          Toast.fail('获取缓存大小失败: ' + err.message);
+        });
+    },
+
+    handleClearCache() {
+      this.$native.clearCache()
+        .then(() => {
+          Toast.success('清除缓存成功');
+        })
+        .catch(err => {
+          Toast.fail('清除缓存失败: ' + err.message);
+        });
+    },
+
+    handleGetDeviceInfo() {
+      this.$native.getDeviceInfo()
+        .then(deviceInfo => {
+          Toast.success('获取设备信息成功');
+          console.log('设备信息:', deviceInfo);
+          Dialog.alert({
+            title: '设备信息',
+            message: JSON.stringify(deviceInfo, null, 2)
+          });
+        })
+        .catch(err => {
+          Toast.fail('获取设备信息失败: ' + err.message);
+        });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.demo-container {
+  padding-top: 46px;
+}
+
+.content {
+  padding: 10px;
+}
+
+.van-cell-group {
+  margin-bottom: 10px;
+}
+</style>