工具

src/components/center-modal.ux

@@ -0,0 +1,150 @@
+<template>
+  <!-- 使用 stack 组件来实现弹窗的叠加效果 -->
+  <stack class="modal-container" if="{{show}}">
+
+    <!-- 半透明背景遮罩 -->
+    <!-- 点击遮罩本身也会关闭弹窗 -->
+    <!-- <div class="modal-mask" @click="closeModal"></div> -->
+
+    <!-- 弹窗内容区域 -->
+    <div class="modal-content">
+      <!-- 弹窗标题栏 -->
+      <div class="modal-header">
+        <text class="modal-title">{{ title }}</text>
+        <text class="modal-close" @click="closeModal">×</text>
+      </div>
+
+      <!--
+        自定义内容插槽
+        父组件可以在这里填充任何自定义的布局和内容
+      -->
+      <div class="modal-body">
+        <slot></slot>
+      </div>
+
+      <!--
+        自定义底部插槽
+        通常用于放置 "取消" "确认" 等操作按钮
+       -->
+      <div class="modal-footer">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+
+  </stack>
+</template>
+
+<script>
+  export default {
+    // 定义组件可接收的外部属性
+    props: {
+      // 控制弹窗显示/隐藏
+      show: {
+        type: Boolean,
+        default: false
+      },
+      // 弹窗的标题
+      title: {
+        type: String,
+        default: '提示'
+      }
+    },
+      // 关闭弹窗的方法
+      closeModal() {
+        // 通过 $emit 触发一个自定义事件 'close'
+        // 父组件可以监听这个事件来更新 show 属性
+        this.$emit('close');
+      }
+    }
+</script>
+
+<style>
+  /* 外部容器，使用 fixed 定位和 flex 布局实现居中 */
+  .modal-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    justify-content: center;
+    align-items: center;
+    height: 90%;
+  }
+
+  /* 背景遮罩 */
+  .modal-mask {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 0;
+  }
+
+  /* 弹窗内容的核心样式 */
+  .modal-content {
+    display: flex;
+    flex-direction: column;
+    width: 85%;
+    max-width: 650px; /* 在大屏设备上限制最大宽度 */
+    /* background: linear-gradient(90deg, #03fedf, #2ed9fb); */
+    background-color: #fff;
+    border-radius: 20px;
+    /* 添加一个缩放动画效果，使弹出更自然 */
+    animation-name: scale-in;
+    animation-duration: 200ms;
+    animation-timing-function: ease-in-out;
+    position: absolute;
+    z-index: 9;
+  }
+
+  /* 弹窗标题栏 */
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 25px 30px;
+    border-bottom: 1px solid #eeeeee;
+  }
+
+  .modal-title {
+    font-size: 34px;
+    color: #333333;
+    font-weight: bold;
+  }
+
+  .modal-close {
+    font-size: 50px;
+    color: #999999;
+    padding: 0 10px; /* 增大点击区域 */
+  }
+
+  /* 弹窗主体内容 */
+  .modal-body {
+    padding: 40px 30px;
+    font-size: 28px;
+    color: #666666;
+    /* 内容过多时可滚动 */
+    flex: 1;
+  }
+
+  /* 弹窗底部 */
+  .modal-footer {
+    display: flex;
+    justify-content: flex-end; /* 按钮默认靠右 */
+    padding: 0 30px 30px;
+  }
+
+  /* 定义动画 */
+  @keyframes scale-in {
+    from {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+</style>

src/components/common/center-modal.ux

@@ -0,0 +1,149 @@
+<template>
+  <!-- 使用 stack 组件来实现弹窗的叠加效果 -->
+  <stack class="modal-container" if="{{show}}">
+
+    <!-- 半透明背景遮罩 -->
+    <!-- 点击遮罩本身也会关闭弹窗 -->
+    <div class="modal-mask" @click="closeModal"></div>
+
+    <!-- 弹窗内容区域 -->
+    <div class="modal-content">
+      <!-- 弹窗标题栏 -->
+      <div class="modal-header">
+        <text class="modal-title">{{ title }}</text>
+        <text class="modal-close" @click="closeModal">×</text>
+      </div>
+
+      <!--
+        自定义内容插槽
+        父组件可以在这里填充任何自定义的布局和内容
+      -->
+      <div class="modal-body">
+        <slot></slot>
+      </div>
+
+      <!--
+        自定义底部插槽
+        通常用于放置 "取消" "确认" 等操作按钮
+       -->
+      <div class="modal-footer" if="{{_cSlot.footer}}">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+
+  </stack>
+</template>
+
+<script>
+  export default {
+    // 定义组件可接收的外部属性
+    props: {
+      // 控制弹窗显示/隐藏
+      show: {
+        type: Boolean,
+        default: false
+      },
+      // 弹窗的标题
+      title: {
+        type: String,
+        default: '提示'
+      }
+    },
+    methods: {
+      // 关闭弹窗的方法
+      closeModal() {
+        // 通过 $emit 触发一个自定义事件 'close'
+        // 父组件可以监听这个事件来更新 show 属性
+        this.$emit('close');
+      }
+    }
+  }
+</script>
+
+<style>
+  /* 外部容器，使用 fixed 定位和 flex 布局实现居中 */
+  .modal-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    justify-content: center;
+    align-items: center;
+  }
+
+  /* 背景遮罩 */
+  .modal-mask {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  /* 弹窗内容的核心样式 */
+  .modal-content {
+    display: flex;
+    flex-direction: column;
+    width: 85%;
+    max-width: 650px; /* 在大屏设备上限制最大宽度 */
+    background-color: #ffffff;
+    border-radius: 20px;
+    /* 添加一个缩放动画效果，使弹出更自然 */
+    animation-name: scale-in;
+    animation-duration: 200ms;
+    animation-timing-function: ease-in-out;
+  }
+
+  /* 弹窗标题栏 */
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 25px 30px;
+    border-bottom: 1px solid #eeeeee;
+  }
+
+  .modal-title {
+    font-size: 34px;
+    color: #333333;
+    font-weight: bold;
+  }
+
+  .modal-close {
+    font-size: 50px;
+    color: #999999;
+    padding: 0 10px; /* 增大点击区域 */
+  }
+
+  /* 弹窗主体内容 */
+  .modal-body {
+    padding: 40px 30px;
+    font-size: 28px;
+    color: #666666;
+    /* 内容过多时可滚动 */
+    flex: 1;
+    overflow-y: auto;
+    max-height: 60vh;
+  }
+
+  /* 弹窗底部 */
+  .modal-footer {
+    display: flex;
+    justify-content: flex-end; /* 按钮默认靠右 */
+    padding: 0 30px 30px;
+  }
+
+  /* 定义动画 */
+  @keyframes scale-in {
+    from {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+</style> 

src/components/library/index.ux

@@ -1,7 +1,10 @@
 <import name="book-list" src="./book-list"></import>
+<import name="search-input-bar" src="../search-book/search-input-bar"></import>
 
 <template>
   <div class="page-container">
+    <search-input-bar onsearch="search" is-click="{{ true }}"></search-input-bar>
+
     <book-list
       list="{{library.list}}"
       show-load="{{library.load}}"
@@ -23,6 +26,8 @@
 </template>
 
 <script>
+
+import fetch from '@system.fetch'
 import { bookListData } from '../../assets/data/book-list.js'
 export default {
   props: [],
@@ -32,13 +37,58 @@ export default {
       pageNo: 1,
       pageSize: 5,
       total: null,
-      load: true
+      load: true,
     },
     swiperList: bookListData,
-    rankList: bookListData.slice(0, 3)
+    rankList: bookListData.slice(0, 3),
+    content: '' // 存储文本内容
+  },
+  search(info) {
+    let searchText = info.detail
+    this.toSearch(searchText)
+  },
+  toSearch(text) {
+    // $utils.route2theUrl('pages/search', { initValue: text })
+    $utils.route2theUrl('pages/search-book', { initValue: text })
   },
   onInit() {
     this.queryLibraryList(1)
+    // this.getTxtContent('https://ytnovels.oss-cn-shanghai.aliyuncs.com/novels/2025/01945026620890304513-1752828963340.txt')
+  },
+  // 解析TXT文件的主方法
+  getTxtContent(url) {
+    console.log('url',url)
+    fetch.fetch({
+      url: url,
+      responseType: 'arraybuffer', // 关键！用于处理二进制数据
+      success: (res) => {
+        if (res.code === 200) {
+          // 处理文本编码
+          const text = this.decodeData(res.data);
+          console.log('text',text)
+          this.content = text;
+        } else {
+          console.error('请求失败:', res.code);
+        }
+      },
+      fail: (err) => {
+        console.error('网络请求失败:', err);
+      }
+    })
+  },
+    // 处理文本编码（支持UTF-8/GBK）
+  decodeData(arrayBuffer) {
+    try {
+      // 尝试UTF-8解码
+      return decodeURIComponent(escape(
+        String.fromCharCode.apply(null, new Uint8Array(arrayBuffer))
+      ));
+    } catch (e) {
+      // UTF-8失败时尝试GBK（需要第三方库）
+      // const gbk = require('gbk.js'); // 需自行引入GBK库
+      // return gbk.decode(new Uint8Array(arrayBuffer));
+      return ''
+    }
   },
   /* -------------------SelfCustomEvent------------------ */
   queryLibraryList(pageNo) {

src/components/search-book/search-input-bar.ux

@@ -1,6 +1,6 @@
 <template>
   <div class="title-bar-noline">
-    <div class="search">
+    <div class="search"  onclick="search()">
       <input
         type="text"
         id="search-input"
@@ -9,7 +9,11 @@
         value="{{searchText}}"
         onchange="change"
         onenterkeyclick="search"
+        if="{{ !isClick }}"
       />
+      <div if="{{ isClick }}" class="search-input">
+        <text>请输入书名或作者</text>
+      </div>
       <text class="iconfont search-icon" onclick="search()">&#xe661;</text>
     </div>
   </div>
@@ -20,12 +24,16 @@ export default {
   props: {
     initValue: {
       default: ''
+    },
+    isClick:{
+      default:false,
     }
   },
   data: {
     searchText: ''
   },
   onReady() {
+    console.log('isClick',this.isClick)
     this.searchText = this.initValue
   },
   /* -------------------SelfCustomEvent------------------ */
@@ -33,11 +41,13 @@ export default {
     this.searchText = e.value
   },
   search() {
-    if (!this.searchText) {
-      $utils.showToast('输入不能为空')
-      return
+    if(!this.isClick){
+      if (!this.searchText) {
+        $utils.showToast('输入不能为空')
+        return
+      }
     }
-    this.$emit('search', this.searchText)
+      this.$emit('search', this.searchText)
   }
 }
 </script>

src/helper/apis/common.js

@@ -1,5 +1,5 @@
 import $ajax from '../ajax'
-
+var url = ''
 export default {
   getPositionByLocation(data) {
     return $ajax.get('https://apis.map.qq.com/ws/geocoder/v1/', data)

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "demo",
   "versionName": "1.0.0",
   "versionCode": 1,
-  "minPlatformVersion": 1070,
+  "minPlatformVersion": 1080,
   "icon": "/assets/logo.png",
   "features": [
     {
@@ -50,7 +50,8 @@
     },
     {
       "name": "system.wifi"
-    }
+    },
+    { "name": "system.geolocation" }
   ],
   "permissions": [
     {
@@ -137,6 +138,9 @@
       "pages/tools/baoYangJiQiao": {
         "component": "index"
       },
+      "pages/search-book": {
+        "component": "index"
+      },
       "components/loading-progress": {
         "component": "index"
       }
@@ -221,6 +225,9 @@
       "pages/tools/baoYangJiQiao": {
         "titleBarText": "保养技巧"
       },
+      "pages/search-book": {
+        "titleBarText": "搜索"
+      },
       "components/loading-progress": {
         "titleBarText": ""
       }

src/pages/main/index.ux

@@ -12,7 +12,7 @@
           onupdate-shelf="updateShelf"
         ></bookshelf>
         <library></library>
-        <search-book></search-book>
+        <!-- <search-book></search-book> -->
         <tools-mall></tools-mall>
       </tab-content>
       <tab-bar mode="fixed" class="tab-bar">
@@ -42,11 +42,11 @@ export default {
         icon: '\ue681',
         activatedIcon: '\ue67d'
       },
-      {
-        title: '查找',
-        icon: '\ue603',
-        activatedIcon: '\ue604'
-      },
+      // {
+      //   title: '查找',
+      //   icon: '\ue603',
+      //   activatedIcon: '\ue604'
+      // },
       {
         title: '工具',
         icon: '\ue603',

src/pages/search-book/index.ux

@@ -0,0 +1,87 @@
+<import name="search-input-bar" src="./search-input-bar"></import>
+<template>
+  <div class="page-column">
+    <search-input-bar onsearch="search"></search-input-bar>
+    <div class="search-hot">
+      <div class="search-title">
+        <text class="text-black">大家都在搜</text>
+        <text class="search-refresh" @click="refreshHostList">&#xe607;</text>
+      </div>
+      <div class="hot-list">
+        <text class="hot-item" for="hotList" @click="toSearch($item.title)">{{
+          $item.title
+        }}</text>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { bookListData } from '../../assets/data/book-list.js'
+export default {
+  props: [],
+  data: {
+    hotList: [],
+    page: 1
+  },
+  onReady() {
+    this.refreshHostList()
+  },
+  /* -------------------SelfCustomEvent------------------ */
+  changeTab(e) {
+    let index = e.index || 0
+    this.selectedTab = this.tabList[index]
+  },
+  search(info) {
+    let searchText = info.detail
+    this.toSearch(searchText)
+  },
+  toSearch(text) {
+    $utils.route2theUrl('pages/search', { initValue: text })
+  },
+  refreshHostList() {
+    if (this.page === 1) {
+      this.hotList = bookListData.slice(0, 5)
+      this.page = 2
+    } else if (this.page === 2) {
+      this.hotList = bookListData.slice(0, 5)
+      this.page = 1
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import '../../assets/styles/index.less';
+
+.search-hot {
+  background-color: @white;
+  width: 100%;
+  padding: @gap-4;
+  margin-bottom: 20px;
+  margin-top: 20px;
+  .flex-box-mixins(column, flex-start, flex-start);
+  .search-title {
+    width: 100%;
+    margin-bottom: @gap-4;
+    .flex-box-mixins(row, space-between, center);
+  }
+  .hot-list {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+  .hot-item {
+    width: 200px;
+    padding: @gap-1 0;
+    text-align: center;
+    border: 1px solid @grey;
+    border-radius: 30px;
+    margin: 15px @gap-4 15px 0;
+  }
+}
+.search-refresh {
+  .text-primary;
+  .iconfont;
+  padding: 0 @gap-3;
+}
+</style>

src/pages/search-book/search-input-bar.ux

@@ -0,0 +1,47 @@
+<template>
+  <div class="title-bar-noline">
+    <div class="search">
+      <input
+        type="text"
+        id="search-input"
+        class="search-input"
+        placeholder="请输入书名或作者"
+        value="{{searchText}}"
+        onchange="change"
+        onenterkeyclick="search"
+      />
+      <text class="iconfont search-icon" onclick="search()">&#xe661;</text>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    initValue: {
+      default: ''
+    }
+  },
+  data: {
+    searchText: ''
+  },
+  onReady() {
+    this.searchText = this.initValue
+  },
+  /* -------------------SelfCustomEvent------------------ */
+  change(e) {
+    this.searchText = e.value
+  },
+  search() {
+    if (!this.searchText) {
+      $utils.showToast('输入不能为空')
+      return
+    }
+    this.$emit('search', this.searchText)
+  }
+}
+</script>
+
+<style lang="less">
+@import '../../assets/styles/index.less';
+</style>

src/pages/tools/jingXuanBiZhi/index.ux

@@ -101,8 +101,8 @@ export default {
   .imgs{
     flex-wrap: wrap;
     image{
-      width: 220px;
-      height: 280px;
+      width: 250px;
+      height: 300px;
       border-radius: 20px;
       margin-right: 20px;
       margin-top: 20px;

src/pages/tools/shouJiCeJu/index.ux

@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper">
-    <text class="title">{{ title }}</text>
+    <image src="/assets/images/source/rules.png"></image>
   </div>
 </template>
 
@@ -20,6 +20,10 @@ export default {
   justify-content: center;
   align-items: center;
 }
+image{
+  width: 100%;
+  height: 3300px;
+}
 .title {
   text-align: center;
   color: #212121;

src/pages/tools/shouJiQingLi/index.ux

@@ -1,102 +1,93 @@
+<import name="loading-progress" src="../../../components/loading-progress"></import>
 <template>
   <div class="content">
-    <!-- <div style="padding-top: {{statusBarHeight}}px">
       <div class="flex w ai_center jc_center fd_c mgt-20">
-        <image src="/static/image/source/jiasu.png" if="{{!status}}"
-          style="width: 350px;height: 350px;"></image>
-        <stack if="{{status}}" class="circle-progress">
-          <progress type="circular"
-            class="progress"
-            percent="{{percent}}"
-            style="width: 350px; height: 350px; color: #44ebd9; stroke-width: 30px; background-color: #d0effd;">
-          </progress>
-          <text class="percent-text">{{percent}}%</text>
-        </stack>
-        
+        <!-- 快应用不支持 vue 组件，iCircle 需自定义或用原生canvas实现 -->
+        <image src="/assets/images/source/jiasu.png" if="{{!status}}"
+          style="width: 175px;height: 175px;"></image>
+        <!-- iCircle 组件需快应用自定义实现，这里用占位 -->
+        <div if="{{status}}" class="fd_c">
+           <loading-progress 
+              color="#ea9f8a">
+          </loading-progress>
+          <text style="font-size:36px; color: #333;font-weight: bold;margin-left: 5px;">{{ percent }}%</text>
+          <!-- canvas 需快应用自定义实现 -->
+        </div>
         <text class="text-24 mgt-20">发现大量垃圾</text>
         <text class="text-888 text-22 mgt-20">占用大量手机内存，急需清理</text>
-        <div class="mgt-50 clean_btn cursor" @click="sureClean">
+        <text class="mgt-50 clean_btn cursor" @click="sureClean">
           {{ status ? '正在清理中' : '立即清理' }}
-        </div>
+        </text>
       </div>
-      
-      <div class="w bg-white h-320 mgt-80 radio-30 pd-20">
-        <div for="{{infoList}}" class="bg-eee h-80 radio-20 mgb-20 flex jc_between ai_center pdx-20">
+      <div class="w bg-white mgt-40 radio-30 pd-20 fd_c box_content">
+        <div for="(index,item) in infoArr" class="box_item">
           <div>
-            <text class="icon" style="color: #42aa87;">
-              {{ $item.icon }}
-            </text>
-            {{ $item.key }}
+            <text if="{{item.key == '剩余内存'}}" style="color: #42aa87;">◕</text>
+            <text if="{{item.key == '总计内存'}}" style="color: #42aa87;">◕</text>
+            <text if="{{item.key == '已使用'}}" style="color: #42aa87;">◔</text>
+            <text style="margin-left:10px;">{{ item.key }}</text>
           </div>
           <text style="color: #42aa87;">
-            {{ $item.value }}GB
+            {{ item.value }}GB
           </text>
         </div>
       </div>
-    </div> -->
   </div>
 </template>
 
 <script>
-  import device from '@system.device'
+import prompt from '@system.prompt'
+import storage from '@system.storage'
+
 export default {
-  data() {
-    return {
-      statusBarHeight: 0,
-      info: {
-        '剩余内存': 20.99,
-        '总计内存': 50.12,
-        '已使用': 29.13,
-      },
-      // 将 info 对象转换为数组，方便快应用遍历
-      infoList: [
-        { key: '剩余内存', value: 20.99, icon: '\uf135' }, // rocket
-        { key: '总计内存', value: 50.12, icon: '\uf15b' }, // file
-        { key: '已使用', value: 29.13, icon: '\uf200' },   // pie-chart
-      ],
-      percent: 0,
-      status: false,
-      timer: null
+  data: {
+    statusBarHeight: 0,
+    info: {
+      '剩余内存': 20.99,
+      '总计内存': 50.12,
+      '已使用': 29.13
+    },
+    percent: 0,
+    status: false,
+    timer: null
+  },
+  computed: {
+    infoArr() {
+      // 快应用 for 只能遍历数组
+      let arr = []
+      for (let key in this.info) {
+        arr.push({ key, value: this.info[key] })
+      }
+      return arr
     }
   },
-
   onInit() {
-    device.getInfo({
-      success: function(ret) {
-        console.log(`handling success， brand = ${JSON.stringify(ret)}`)
-        console.log(`handling success， brand = ${ret.brand}`)
+    let that = this
+    storage.get({
+      key: 'statusBarHeight',
+      success: function(data) {
+        that.statusBarHeight = data
       }
     })
   },
-
   onDestroy() {
-    // 组件销毁时清除定时器
-    if (this.timer) {
-      clearInterval(this.timer);
-      this.timer = null;
-    }
+    if (this.timer) clearInterval(this.timer)
   },
     sureClean() {
-      if (this.status) return;
-      
-      this.status = true;
-      this.startCleaning();
-    },
-
-    startCleaning() {
-      this.timer = setInterval(() => {
-        if (this.percent < 100) {
-          let num = Math.ceil(Math.random() * 3);
-          this.percent += (this.percent + num > 100) ? 1 : num;
-          this.$update(); // 手动触发更新
+      console.log('status sureClean',this.status)
+      if (this.status) return
+      this.status = true
+      let that = this
+      this.timer = setInterval(function() {
+        if (that.percent < 100) {
+          let num = Math.ceil(Math.random() * 3)
+          that.percent += (that.percent + num > 100) ? 1 : num
         } else {
-          clearInterval(this.timer);
-          this.timer = null;
-          this.percent = 0;
-          this.status = false;
-          this.$update();
+          clearInterval(that.timer)
+          that.percent = 0
+          that.status = false
         }
-      }, 200);
+      }, 200)
     }
   }
 </script>
@@ -104,125 +95,71 @@ export default {
 <style lang="less">
 .content {
   padding: 28px;
+  flex-direction: column;
   background: linear-gradient(to bottom, #a5eed0, #dcefaf);
+  .clean_btn {
+    width: 400px;
+    text-align: center;
+    background-color: #fff;
+    height: 80px;
+    line-height: 80px;
+    color: #42aa87;
+    border-radius: 40px;
+    border: 1px solid;
+  }
 }
-
-.clean_btn {
-  width: 400px;
-  text-align: center;
+.box_content{
+  width: 100%;
   background-color: #fff;
-  height: 80px;
-  line-height: 80px;
-  color: #42aa87;
-  border-radius: 40px;
-  border: 1px solid;
-}
-
-.circle-progress {
-  position: relative;
-  width: 350px;
-  height: 350px;
-  justify-content: center;
-  align-items: center;
-}
-
-.progress {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.percent-text {
-  font-size: 48px;
-  color: #333;
-  font-weight: bold;
-}
-.icon {
-  font-family: fontawesome;
-  margin-right: 10px;
-}
-.text-24 {
-  font-size: 24px;
-}
-
-.text-22 {
-  font-size: 22px;
-}
-
-.text-888 {
-  color: #888;
-}
-
-.mgt-20 {
-  margin-top: 20px;
-}
-
-.mgt-50 {
-  margin-top: 50px;
-}
-
-.mgt-80 {
-  margin-top: 80px;
+  height: 320px;
+  margin-top: 40px;
+  border-radius: 30px;
+  padding: 10px;
+  flex-direction: column;
 }
-
-.mgb-20 {
+.box_item{
+  background-color: #eee;
+  height: 80px;
+  border-radius: 20px;
   margin-bottom: 20px;
-}
-
-.pdx-20 {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-.pd-20 {
-  padding: 20px;
-}
-
-.flex {
-  display: flex;
-}
-
-.jc_between {
   justify-content: space-between;
-}
-
-.ai_center {
   align-items: center;
+  padding: 0 20px;
+  /* flex-direction: column; */
 }
-
-.jc_center {
-  justify-content: center;
-}
-
-.fd_c {
-  flex-direction: column;
-}
-
-.w {
+.CanvasBox {
   width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
+/* 其他样式按需补充 */
+.flex { display: flex; }
+.w { width: 100%; }
+.ai_center { align-items: center; }
+.jc_center { justify-content: center; }
+.fd_c { flex-direction: column; }
+.mgt-20 { margin-top: 20px; }
+.mgt-40 { margin-top: 40px; }
+.mgt-50 { margin-top: 50px; }
+.mgb-10 { margin-bottom: 10px; }
+.bg-white { background-color: #fff; }
+.bg-eee { background-color: #eee; }
+.h-40 { height: 40px; }
+.h-160 { height: 160px; }
+.h-320 { height: 320px; }
+.radio-20 { border-radius: 20px; }
+.radio-30 { border-radius: 30px; }
+.pd-10 { padding: 10px; }
+.pd-20 { padding: 20px; }
+.pdx-10 { padding-left: 10px; padding-right: 10px; }
+.pdx-20 { padding-left: 20px; padding-right: 20px; }
+.text-24 { font-size: 24px; }
+.text-22 { font-size: 22px; }
+.text-888 { color: #888; }
 
-.h-320 {
-  height: 320px;
-}
-
-.h-80 {
-  height: 80px;
-}
-
-.bg-white {
-  background-color: #fff;
-}
-
-.bg-eee {
-  background-color: #eee;
-}
-
-.radio-30 {
-  border-radius: 30px;
-}
-
-.radio-20 {
-  border-radius: 20px;
-}
 </style>

src/pages/tools/wangLuoXinXi/index.ux

@@ -1,27 +1,123 @@
 <template>
-  <div class="wrapper">
-    <text class="title">{{ title }}</text>
+  <div class="content">
+    <div class="box">
+			<div class="item" style="justify-content: space-between;">
+				<text>国家</text>
+				<text>中国</text>
+			</div>
+			<div class="item">
+				<text>省份</text>
+				<text>福建省</text>
+			</div>
+			<div class="item">
+				<text>城市</text>
+				<text>厦门市</text>
+			</div>
+			<div class="item">
+				<text>地区</text>
+				<text>湖里区</text>
+			</div>
+			<div class="item">
+				<text>运营商</text>
+				<text>未知</text>
+			</div>
+			<div class="item">
+				<text>经纬度</text>
+				<text>{{ location.longitude  }}--{{ location.latitude }}</text>
+			</div>
+			<div class="item">
+				<text>国家识别码</text>
+				<text>CN</text>
+			</div>
+			<div class="item">
+				<text>IP地址</text>
+				<text>--</text>
+			</div>
+		</div>
   </div>
 </template>
 
 <script>
+import network from '@system.network'
+import device from '@system.device' 
+import telecom from '@system.telecom'
+import geolocation from '@system.geolocation'
 export default {
   private: {
-    title: '欢迎体验快应用开发'
+    title: '欢迎体验快应用开发',
+    location:{longitude: 114.060682, latitude: 22.5606468},
   },
 
-  onInit() {}
+  onInit() {
+    network.getType({
+      success: function(data) {
+        console.log(`handling success: ${data.type}`)
+      }
+    })
+    device.getInfo({
+      success: function(ret) {
+        console.log(`handling success， brand = ${ret.brand}`)
+      }
+    })
+    geolocation.getLocation({
+      success: function(data) {
+        console.log(
+          `handling success: longitude = ${data.longitude}, latitude = ${
+            data.latitude
+          }`
+        )
+        console.log('data',data)
+        
+      },
+      fail: function(data, code) {
+        console.log(`handling fail, code = ${code}, errorMsg=${data}`)
+      }
+    })
+    geolocation.reverseGeocodeQuery({
+        latitude: 30.513070973744515,
+        longitude: 114.41322124959942,
+        coordType: "gcj02",
+        includePoiInfo:true,
+        success: function (ret) {
+          console.info(`### geolocation.reverseGeocodeQuery ###` + JSON.stringify(ret))
+        },
+        fail: function (erromsg, errocode) {
+          console.info(`### geolocation.reverseGeocodeQuery ### ${errocode}: ${erromsg}`)
+        }
+      })
+    // var that = this
+    // geolocation.reverseGeocodeQuery({
+    //     latitude: that.location.latitude,
+    //     longitude: that.location.longitude,
+    //     coordType: "wgs84",
+    //     success: function (ret) {
+    //       console.info(`### geolocation.reverseGeocodeQuery ###` + JSON.stringify(ret))
+    //     },
+    //     fail: function (erromsg, errocode) {
+    //       console.info(`### geolocation.reverseGeocodeQuery ### ${errocode}: ${erromsg}`)
+    //     }
+    //   })
+  }
 }
 </script>
 
-<style>
-.wrapper {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.title {
-  text-align: center;
-  color: #212121;
-}
+<style lang="less">
+  .content {
+    padding: 28px;
+    background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
+    flex-direction: column;
+    align-items: center;
+  }
+  .box{
+    width: 100%;
+    flex-direction: column;
+		background-color: #fff;
+		border-radius: 30px;
+		min-height: 1000px;
+		padding: 30px 28px;
+	}
+  .item{
+    justify-content: space-between;
+    padding: 20px 0;
+  }
 </style>

src/pages/tools/wifiGuanLi/index.ux

@@ -1,59 +1,123 @@
 <template>
-  <div class="wrapper">
-    <text class="title">{{ title }}</text>
-
+  <div class="content p-rel">
+    <div style="padding-top: {{statusBarHeight}}px;"></div>
+    <div class="box">
+      <text class="mgb-10">当前连接：YThuwai</text>
+      <div class="listbox">
+        <div class="item"
+             for="(index,wifi) in list">
+          <div class="flex jc_between w">
+            <text>{{wifi.SSID}}</text>
+          </div>
+          <text @click="connectedWifi(wifi)" class="{{wifi.status ? 'c_btn' : 'btn'}}">
+            {{wifi.status ? '已连接' : '连接'}}
+          </text>
+        </div>
+      </div>
+    </div>
+    <text class="ADBox">
+    横幅广告
+  </text>
   </div>
+  
 </template>
 
 <script>
-import wifi from '@system.wifi'
-import device from '@system.device'
-export default {
-  private: {
-    title: '欢迎体验快应用开发'
-  },
+import prompt from '@system.prompt'
+import storage from '@system.storage'
 
-  onInit() {
-    device.getInfo({
-      success: (data) => {
-        // this.deviceInfo = data // 更新数据
-        console.log('设备信息:', JSON.stringify(data))
-      },
-      fail: (err, code) => {
-        console.error('获取失败:', err, '错误码:', code)
-      }
-    })
-    wifi.scan({
-    success: function(res) {
-      console.log('scan success',res)
-    },
-    fail: function(data, code) {
-      console.log(`handling fail, code = ${code}`)
+export default {
+  data() {
+    return {
+      statusBarHeight: 0,
+      list: [
+        { "SSID": "YThuwai", "BSSID": "XX:XX:XX:XX:XX:XX", status: true },
+        { "SSID": "YtZhe", "BSSID": "XX:XX:XX:XX:XX:XX", status: false },
+        { "SSID": "DIRECT-GQDESKTOP2E4TVT1-msPR", "BSSID": "YY:YY:YY:YY:YY:YY", status: false },
+        { "SSID": "4-426", "BSSID": "XX:XX:XX:XX:XX:XX", status: false },
+        { "SSID": "Tech_xxx", "BSSID": "YY:YY:YY:YY:YY:YY", status: false },
+        { "SSID": "88888888-pZ", "BSSID": "XX:XX:XX:XX:XX:XX", status: false },
+        { "SSID": "ChinaNet-bG62", "BSSID": "YY:YY:YY:YY:YY:YY", status: false },
+        { "SSID": "GF-1", "BSSID": "XX:XX:XX:XX:XX:XX", status: false },
+        { "SSID": "GAIF", "BSSID": "YY:YY:YY:YY:YY:YY", status: false },
+        { "SSID": "boss", "BSSID": "XX:XX:XX:XX:XX:XX", status: false },
+        { "SSID": "ChinaNet-LJmh", "BSSID": "YY:YY:YY:YY:YY:YY", status: false },
+        { "SSID": "Home_WiFi", "BSSID": "XX:XX:XX:XX:XX:XX", status: false },
+        { "SSID": "Office_WiFi", "BSSID": "YY:YY:YY:YY:YY:YY", status: false }
+      ]
     }
-  })
   },
-  getWifiList(){
-    wifi.getConnectedWifi({
+  onInit() {
+    let that = this
+    storage.get({
+      key: 'statusBarHeight',
       success: function(data) {
-        console.log(`handling success: ${data.SSID}`)
-      },
-      fail: function(data, code) {
-        console.log(`handling fail, code = ${code}`)
+        that.statusBarHeight = data
       }
     })
-     
   },
-}
+    connectedWifi(wifi) {
+      // prompt.showToast({
+      //   message: '已连接'
+      // })
+      console.log('wifi',wifi)
+      this.list.forEach(item => item.status = false)
+      wifi.status = true
+      this.$set('list', this.list)
+    }
+  }
 </script>
 
-<style>
-.wrapper {
+<style lang="less">
+.content {
+  height: 100%;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  padding: 28px;
+  background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
+}
+.box {
+  background-color: #fff;
+  border-radius: 30px;
+  height: 95%;
+  padding: 30px 28px;
+  flex-direction: column;
+}
+.listbox {
+  flex-direction: column;
+}
+.item{
+  justify-content: space-between;
+  margin-top: 25px;
 }
-.title {
+.c_btn {
+  background-color: #399bfc;
+  color: #fff;
+  font-size: 22px;
+  line-height: 48px;
+  border-radius: 30px;
+  width: 120px;
+  height: 48px;
   text-align: center;
-  color: #212121;
+}
+.btn {
+  width: 120px;
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  background-color: #fff;
+  color: #399bfc;
+  border: 1px solid #399bfc;
+  font-size: 22px;
+  border-radius: 30px;
+}
+.ADBox {
+  position: fixed;
+  bottom: 0;
+  height: 120px;
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>

src/pages/tools/yunDongJiBu/index.ux

@@ -1,13 +1,19 @@
+<import name="center-modal" src="../../../components/center-modal"></import>
+
 <template>
-  <div class="wrapper">
+  <div class="wrapper" style="position: relative;">
      <image class="w h-350" style="width: 100%;" src="/assets/images/source/yundongjibu.jpg"></image>
      <div class="num">
          <text class="curNum" id="popup" @click="setNum">{{  curNum  }}</text>
           <text class="totalNum">/100000步</text>
      </div>
-     <popup target="popup" placement="bottom" show="{{showPopup}}" onstatechange="popupStateChange">
-        <div class="popup_box">
-          <text class="item-container-poptext mgt-10">设置步数</text>
+     <center-modal
+      show="{{showModal}}"
+      title="设置步数"
+      @close="closeModal"
+      if="{{showModal}}"
+    >
+      <div class="popup_box">
           <input
             type="text"
             id="search-input"
@@ -25,7 +31,11 @@
             </div>
           </div> -->
         </div>
-      </popup>
+      <!-- <div slot="footer">
+        <button class="btn btn_cancel" @tap="closeModal"><text>关闭</text></button>
+        <button class="btn btn_sure" @tap="doSomething"><text>确认</text></button>
+      </div> -->
+    </center-modal>
   </div>
 </template>
 
@@ -36,13 +46,17 @@ export default {
     curNum:1000,
     inputNum:1000,
     showPopup:false,
+    showModal: false
   },
 
   onInit() {},
   // 设置步数
   setNum(){
-
+    this.showModal = true
   },
+    closeModal() {
+      this.showModal = false
+    },
   change(e){
     console.log('e',e)
     this.curNum = e.text
@@ -98,13 +112,11 @@ export default {
 .popup_box{
   flex-direction: column;
   align-items: center;
-  width: 500px;
-  height: 200px;
-  padding-top: 10px;
+  justify-content: center;
   .search-input{
     border: 1px solid #000000;
     padding: 20px;
-    margin-top: 20px;
+    width: 550px;
   }
   .btn{
     width: 150px;
@@ -113,9 +125,6 @@ export default {
     border-radius: 20px;
     align-items: center;
     justify-content: center;
-  }
-  .btn_cancel{
-
   }
   .btn_sure{
     color: #ffffff;