鸿蒙HarmonyOS兼容JS的类Web开发-开发指导

这篇具有很好参考价值的文章主要介绍了鸿蒙HarmonyOS兼容JS的类Web开发-开发指导。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导

常用组件开发指导

list开发指导

list是用来显示列表的组件,包含一系列相同宽度的列表项,适合连续、多行地呈现同类数据。具体用法请参考list API。

创建list组件

在pages/index目录下的hml文件中创建一个list组件。

<!-- xxx.hml -->
<div class="container"> 
 <list>    
   <list-item class="listItem"></list-item>
   <list-item class="listItem"></list-item>
   <list-item class="listItem"></list-item>
   <list-item class="listItem"></list-item>
 </list>
</div>
/* xxx.css */
.container {
  width:100%;
  height:100%;
  flex-direction: column;
  align-items: center;
  background-color: #F1F3F5;
}
.listItem{
  height: 20%;
  background-color:#d2e0e0;
  margin-top: 20px;
}

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导,鸿蒙HarmonyOS社区,前端,harmonyos,javascript

说明

  • 是的子组件,实现列表分组功能,不能再嵌套,可以嵌套。
  • 是的子组件,展示列表的具体项。
添加滚动条

设置scrollbar属性为on即可在屏幕右侧生成滚动条,实现长列表或者屏幕滚动等效果。

<!-- xxx.hml -->
<div class="container">
  <list class="listCss" scrollbar="on" >
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
 </list>
</div> 
/* xxx.css */
.container {
  flex-direction: column;
  background-color: #F1F3F5;
}
.listItem{
  height: 20%;
  background-color:#d2e0e0;
  margin-top: 20px;
}
.listCss{
  height: 100%;
  scrollbar-color: #8e8b8b;
  scrollbar-width: 50px;
}

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导,鸿蒙HarmonyOS社区,前端,harmonyos,javascript

添加侧边索引栏

设置indexer属性为自定义索引时,索引栏会显示在列表右边界处,indexer属性设置为true,默认为字母索引表。

<!-- xxx.hml -->
<div class="container">   
  <list class="listCss"  indexer="{
  {['#','1','2','3','4','5','6','7','8']}}" >  
    <list-item class="listItem"  section="#" ></list-item>   
  </list>
</div>
/* xxx.css */
.container{
  flex-direction: column;
  background-color: #F1F3F5;
 } 
.listCss{
  height: 100%;    
  flex-direction: column;
  columns: 1
}

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导,鸿蒙HarmonyOS社区,前端,harmonyos,javascript

说明

  • indexer属性生效需要flex-direction属性配合设置为column,且columns属性设置为1。
  • indexer可以自定义索引表,自定义时"#"必须要存在。
实现列表折叠和展开

为list组件添加groupcollapse和groupexpand事件实现列表的折叠和展开。

<!-- xxx.hml -->
<div class="doc-page">
  <list style="width: 100%;" id="mylist">
    <list-item-group for="listgroup in list" id="{
  {listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand">
      <list-item type="item" style="background-color:#FFF0F5;height:95px;">
        <div class="item-group-child">
          <text>One---{
  {listgroup.value}}</text>
        </div>
      </list-item>
      <list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true">
        <div class="item-group-child">
          <text>Primary---{
  {listgroup.value}}</text>
        </div>
      </list-item>
    </list-item-group>
  </list>
</div>
/* xxx.css */
.doc-page {
  flex-direction: column;
  background-color: #F1F3F5;
}
list-item{
margin-top:30px;
}
.top-list-item {
  width:100%;
  background-color:#D4F2E7;
}
.item-group-child {
  justify-content: center;
  align-items: center;
  width:100%;
}
// xxx.js
import promptAction from '@ohos.promptAction';
export default {
  data: {
    direction: 'column',
    list: []
  },
  onInit() {
    this.list = []
    this.listAdd = []
    for (var i = 1; i <= 2; i++) {
      var dataItem = {
        value: 'GROUP' + i,
      };
        this.list.push(dataItem);
    }
  },
  collapse(e) {
    promptAction.showToast({
      message: 'Close ' + e.groupid
    })
  },
  expand(e) {
    promptAction.showToast({
    message: 'Open ' + e.groupid
    })
  }
}

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导,鸿蒙HarmonyOS社区,前端,harmonyos,javascript

说明

  • groupcollapse和groupexpand事件仅支持list-item-group组件使用。
场景示例

在本场景中,开发者可以根据字母索引表查找对应联系人。

<!-- xxx.hml -->
<div class="doc-page"> 
  <text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;"> 
      <span>Contacts</span> 
  </text> 
  <list class="list" indexer="true"> 
    <list-item class="item" for="{
  {namelist}}" type="{
  {$item.section}}" section="{
  {$item.section}}"> 
      <div class="container"> 
        <div class="in-container"> 
          <text class="name">{
  {$item.name}}</text> 
          <text class="number">18888888888</text> 
        </div> 
      </div> 
    </list-item> 
    <list-item type="end" class="item"> 
      <div style="align-items:center;justify-content:center;width:750px;"> 
        <text style="text-align: center;">Total: 10</text> 
      </div> 
    </list-item> 
  </list> 
</div>
/* xxx.css */
.doc-page {
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #F1F3F5;
}
.list {
  width: 100%;
  height: 90%;
  flex-grow: 1;
}
.item {
  height: 120px;
  padding-left: 10%;
  border-top: 1px solid #dcdcdc;
}
.name {
  color: #000000;
  font-size: 39px;
}
.number {
  color: black;
  font-size: 25px;
}
.container {
  flex-direction: row;
  align-items: center;
}
.in-container {
  flex-direction: column;
  justify-content: space-around;
}
// xxx.js
export default { 
   data: { 
     namelist:[{ 
       name: 'Zoey', 
       section:'Z' 
     },{ 
       name: 'Quin', 
       section:'Q' 
     },{ 
       name:'Sam', 
       section:'S' 
     },{ 
       name:'Leo', 
       section:'L' 
     },{ 
       name:'Zach', 
       section:'Z' 
     },{ 
       name:'Wade', 
       section:'W' 
     },{ 
       name:'Zoe', 
       section:'Z' 
     },{ 
        name:'Warren', 
        section:'W' 
     },{ 
        name:'Kyle', 
        section:'K' 
     },{ 
       name:'Zaneta', 
       section:'Z' 
     }] 
   }, 
   onInit() { 
   } 
 }

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导,鸿蒙HarmonyOS社区,前端,harmonyos,javascript

dialog开发指导

dialog组件用于创建自定义弹窗,通常用来展示用户当前需要或用户必须关注的信息或操作。具体用法请参考dialog API。

创建dialog组件

在pages/index目录下的hml文件中创建一个dialog组件,并添加Button组件来触发dialog。dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。

<!-- xxx.hml -->
<div class="doc-page">
  <dialog class="dialogClass" id="dialogId" dragable="true">
    <div class="content">
      <text>this is a dialog</text>
    </div>
  </dialog>
  <button value="click me" onclick="opendialog"></button>
</div>
/* xxx.css */
.doc-page {
  width:100%;
  height:100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.dialogClass{
  width: 80%;
  height: 250px;
  margin-start: 1%;
}
.content{
  width: 100%;
  height: 250px;
  justify-content: center;
  background-color: #e8ebec;
  border-radius: 20px;
}
text{
  width: 100%;
  height: 100%;
  text-align: center;
}
button{
  width: 70%;
  height: 60px;
}
// xxx.js
export default {
  //Touch to open the dialog box.
  opendialog(){
    this.$element('dialogId').show()
  },
}

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导,鸿蒙HarmonyOS社区,前端,harmonyos,javascript

设置弹窗响应

开发者点击页面上非dialog的区域时,将触发cancel事件而关闭弹窗。同时也可以通过对dialog添加show和close方法来显示和关闭弹窗。

<!-- xxx.hml -->
<div class="doc-page">
  <dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
    <div class="dialogDiv">
      <text>dialog</text>
      <button value="confirm" onclick="confirmClick"></button>
    </div>
  </dialog>
  <button value="click me" onclick="opendialog"></button>
</div>
/* xxx.css */
.doc-page {
  width:100%;
  height:100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.dialogClass{
  width: 80%;
  height: 300px;
  margin-start: 1%;
}
.dialogDiv{
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}
text{
  height: 100px;
  align-self: center;
}
button{
  align-self: center;
  margin-top: 20px;
  width: 60%;
  height: 80px;
}
// xxx.js
import promptAction from '@ohos.promptAction';
export default {
  canceldialog(e){
    promptAction.showToast({
      message: 'dialogCancel'
    })
  },
  opendialog(){
    this.$element('dialogId').show()
     promptAction.showToast({
      message: 'dialogShow'
    })
  },
  confirmClick(e) {
    this.$element('dialogId').close()
    promptAction.showToast({
      message: 'dialogClose'
    })
  },
}

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导,鸿蒙HarmonyOS社区,前端,harmonyos,javascript

说明

  • 仅支持单个子组件。
  • dialog属性、样式均不支持动态更新。
  • dialog组件不支持focusable、click-effect属性。
场景示例

在本场景中,开发者可以通过dialog组件实现一个日程表。弹窗在打开状态下,利用Textarea组件输入当前日程,点击确认按钮后获取当前时间并保存输入文本。最后以列表形式将各日程进行展示。

<!-- xxx.hml -->
<div class="doc-page">
  <text style="margin-top: 60px;margin-left: 30px;">
    <span>{
  {date}} events</span>
  </text>
  <div class="btndiv">
    <button type="circle" class="btn" onclick="addschedule">+</button>
  </div>
<!--  for Render events data  -->
  <list style="width: 100%;">
    <list-item type="item" for="schedulelist" style="width:100%;height: 200px;">
      <div class="schedulediv">
        <text class="text1">{
  {date}}  event</text>
        <text class="text2">{
  {$item.schedule}}</text>
      </div>
    </list-item>
  </list>
  <dialog id="datedialog" oncancel="canceldialog" >
    <div class="dialogdiv">
      <div class="innertxt">
        <text class="text3">{
  {date}}</text>
        <text class="text4">New event</text>
      </div>
      <textarea placeholder="Event information" onchange="getschedule" class="area" extend="true"></textarea>
      <div class="innerbtn">
        <button type="text" value="Cancel" onclick="cancelschedule" class="btntxt"></button>
        <button type="text" value="OK" onclick="setschedule" class="btntxt"></button>
      </div>
    </div>
  </dialog>
</div>
/* xxx.css */
.doc-page {
  flex-direction: column;
  background-color: #F1F3F5;
}
.btndiv {
  width: 100%;
  height: 200px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.btn {
  radius:60px;
  font-size: 100px;
  background-color: #1E90FF;
}
.schedulediv {
  width: 100%;
  height: 200px;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 55px;
}
.text1 {
  color: #000000;
  font-weight: bold;
  font-size: 39px;
}
.text2 {
  color: #a9a9a9;
  font-size: 30px;
}
.dialogdiv {
  flex-direction: column;
  align-items: center;
}
.innertxt {
  width: 320px;
  height: 160px;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.text3 {
  font-family: serif;
  color: #1E90FF;
  font-size: 38px;
}
.text4 {
  color: #a9a9a9;
  font-size: 33px;
}
.area {
  width: 320px;
  border-bottom: 1px solid #1E90FF;
}
.innerbtn {
  width: 320px;
  height: 120px;
  justify-content: space-around;
}
.btntxt {
  text-color: #1E90FF;
}
// xxx.js
var info = null;
import promptAction from '@ohos.promptAction';

export default {
  data: {
    curYear:'',
    curMonth:'',
    curDay:'',
    date:'',
    schedule:'',
    schedulelist:[]
  },
  onInit() {
    // Obtain the current date. 
    var date = new Date();
    this.curYear = date.getFullYear();
    this.curMonth = date.getMonth() + 1;
    this.curDay = date.getDate();
    this.date = this.curYear + '-' + this.curMonth + '-' + this.curDay;
    this.schedulelist = []
  },
  addschedule(e) {
    this.$element('datedialog').show()
  },
  canceldialog(e) {
    promptAction.showToast({
      message: 'Event setting canceled.'
    })
  },
  getschedule(e) {
    info = e.value
  },
  cancelschedule(e) {
    this.$element('datedialog').close()
    promptAction.showToast({
      message: 'Event setting canceled.'
    })
  },
//    Touch OK to save the data.
  setschedule(e) {
    if (e.text === '') {
      this.schedule = info
    } else {
      this.schedule = info
      var addItem =  {schedule: this.schedule,}
      this.schedulelist.push(addItem)
    }
    this.$element('datedialog').close()
  }
}

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导,鸿蒙HarmonyOS社区,前端,harmonyos,javascript

form开发指导

form是一个表单容器,支持容器内Input组件内容的提交和重置。具体用法请参考form API。

说明

从 API Version 6 开始支持。

创建form组件

在pages/index目录下的hml文件中创建一个form组件。

<!-- xxx.hml -->
<div class="container">
  <form style="width: 100%; height: 20%">  
    <input type="text" style="width:80%"></input>
  </form>
</div>
/* xxx.css */
.container {
  width:100%;
  height:100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导,鸿蒙HarmonyOS社区,前端,harmonyos,javascript

实现表单缩放

为form组件添加click-effect属性,实现点击表单后的缩放效果,click-effect枚举值请参考通用属性。

<!-- xxx.hml -->
<div class="container">
  <form  id="formId" class="formClass" click-effect="spring-large">
    <input type="text"></input>  
  </form>
</div>
设置form样式

通过为form添加background-color和border属性,来设置表单的背景颜色和边框。

/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.formClass{
  width: 80%;
  height: 100px;
  padding: 10px;
  border: 1px solid #cccccc;
}

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导,鸿蒙HarmonyOS社区,前端,harmonyos,javascript

添加响应事件

为form组件添加submit和reset事件,来提交表单内容或重置表单选项。

<!-- xxx.hml -->
<div class="container">
  <form onsubmit='onSubmit' onreset='onReset' class="form">
    <div style="width: 100%;justify-content: center;">
      <label>Option 1</label>
      <input type='radio' name='radioGroup' value='radio1'></input>
      <label>Option 2</label>
      <input type='radio' name='radioGroup' value='radio2'></input>
    </div>
    <div style="width: 100%;justify-content: center; margin-top: 20px">
      <input type="submit" value="Submit" style="width:120px; margin-right:20px;" >   
      </input>
      <input type="reset" value="Reset" style="width:120px;"></input>
    </div>
  </form>
</div>
/* index.css */
.container{
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  background-color: #F1F3F5;
}
.form{
  width: 100%;
  height: 30%;
  margin-top: 40%;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}
// xxx.js
import promptAction from '@ohos.promptAction';
export default{
  onSubmit(result) {
    promptAction.showToast({
      message: result.value.radioGroup
    })
  },
  onReset() {
    promptAction.showToast({
      message: 'Reset All'
    })
  }
}

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导,鸿蒙HarmonyOS社区,前端,harmonyos,javascript

场景示例

在本场景中,开发者可以选择相应选项并提交或重置数据。

创建Input组件,分别设置type属性为checkbox(多选框)和radio(单选框),再使用form组件的onsubmit和onreset事件实现表单数据的提交与重置。文章来源地址https://www.toymoban.com/news/detail-785026.html

<!-- xxx.hml -->
<div class="container">
   <form onsubmit="formSubmit" onreset="formReset">
 <text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
      <span > Form </span>
  </text>
    <div style="flex-direction: column;width: 90%;padding: 30px 0px;">
     <text class="txt">Select 1 or more options</text>
      <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
        <label target="checkbox1">Option 1</label>
        <input id="checkbox1" type="checkbox" name="checkbox1"></input>
        <label target="checkbox2">Option 2</label>
        <input id="checkbox2" type="checkbox" name="checkbox2"></input>
       </div>
       <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
       <text class="txt">Select 1 option</text>
       <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
         <label target="radio1">Option 1</label>
         <input id="radio1" type="radio" name="myradio"></input>
         <label target="radio2">Option 2</label>
         <input id="radio2" type="radio" name="myradio"></input>
       </div>
       <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
       <text class="txt">Text box</text>
       <input type="text" placeholder="Enter content." style="margin-top: 50px;"></input>
       <div style="width: 90%;align-items: center;justify-content: space-between;margin: 40px;">
         <input type="submit">Submit</input>
         <input type="reset">Reset</input>
       </div>
    </div>
  </form>

到了这里,关于鸿蒙HarmonyOS兼容JS的类Web开发-开发指导的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS鸿蒙基于Java开发: 基于JS UI实现的Java卡片开发

    使用hml+css+json开发JS卡片页面。 创建成功后,在config.json的module中会生成js模块,用于对应卡片的js相关资源,配置示例如下: config.json文件“abilities”配置forms模块细节如下。 说明 配置文件中,应注意如下配置: 表1  forms对象的内部结构说明 属性名称 子属性名称 含义

    2024年02月20日
    浏览(50)
  • 详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第三节 (封装TabBar JS版)

    本组件通过HML布局、CSS样式和JS逻辑封装实现一个通用的Tabbar。支持可配置的Tab项和对应页面,可以方便接入到不同页面中,提高开发效率。 HML部分采用Flex布局实现Tabbar的整体结构,包含多个Tab项。 CSS部分定义样式,包括图标大小、文字颜色等样式参数。支持后续扩展。 JS部分提

    2024年02月04日
    浏览(53)
  • 【鸿蒙(HarmonyOS)】UI开发的两种范式:ArkTS、JS(以登录界面开发为例进行对比)

    之后关于HarmonyOS技术的分享,将会持续使用到以下版本 HarmonyOS:3.1/4.0 SDK:API 9 Release Node.js:v14.20.1 DevEco Studio: 3.1.0 HarmonyOS应用的UI开发依赖于 方舟开发框架(简称ArkUI) 。 根据官方介绍,ArkUI提供了UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面

    2024年02月08日
    浏览(66)
  • HarmonyOS鸿蒙基于Java开发: Java UI JS FA调用Java PA机制

    目录 FA调用PA接口 FA调用PA常见问题 示例参考 使用兼容JS的类Web开发范式的方舟开发框架提供了JS FA(Feature Ability)调用Java PA(Particle Ability)的机制,该机制提供了一种通道来传递方法调用、处理数据返回以及订阅事件上报,支持的UI页面和组件请参考构建JS用户界面 。 当前

    2024年01月19日
    浏览(48)
  • 纯鸿蒙!华为HarmonyOS NEXT不再兼容安卓应用,无法安装Apk文件

            8月7日消息,近日,华为举行2023年华为开发者大会(HDC.Together)上,除了发布HarmonyOS 4、全新升级的鸿蒙开发套件外,华为还带来了HarmonyOS NEXT开发者预览版。 据了解,HarmonyOS NEXT开发者预览版8月面向合作企业开发者开放,2024年第一季度面向所有开发者开放。  

    2024年02月09日
    浏览(58)
  • HarmonyOS:NativeWindow 开发指导

    NativeWindow 是 HarmonyOS 本地平台化窗口 ,表示图形队列的生产者端。开发者可以通过 NativeWindow 接口进行申请和提交 Buffer,配置 Buffer 属性信息。 针对 NativeWindow,常见的开发场景如下: ● 通过 NativeWindow 提供的 Native API 接口申请图形 Buffer,并将生产图形内容写入图形 Buffe

    2024年02月04日
    浏览(40)
  • HarmonyOS 音频通话开发指导

    常用的音频通话模式包括 VOIP 通话和蜂窝通话。 ● VOIP 通话:VOIP(Voice over Internet Protocol)通话是指基于互联网协议(IP)进行通讯的一种语音通话技术。VOIP 通话会将通话信息打包成数据包,通过网络进行传输,因此 VOIP 通话对网络要求较高,通话质量与网络连接速度紧

    2024年02月08日
    浏览(46)
  • HarmonyOS音频开发指导:使用AVPlayer开发音频播放功能

    在HarmonyOS系统中,多种API都提供了音频播放开发的支持,不同的API适用于不同音频数据格式、音频资源来源、音频使用场景,甚至是不同开发语言。因此,选择合适的音频播放API,有助于降低开发工作量,实现更佳的音频播放效果。 ● AVPlayer:功能较完善的音频、视频播放

    2024年01月20日
    浏览(34)
  • 开发指导—利用组件&插值器动画实现 HarmonyOS 动效

    在组件上创建和运行动画的快捷方式。具体用法请参考通用方法。 通过调用 animate 方法获得 animation 对象,animation 对象支持动画属性、动画方法和动画事件。 说明 ● 使用 animate 方法时必须传入 Keyframes 和 Options 参数。 ● 多次调用 animate 方法时,采用 replace 策略,即最后一

    2024年02月09日
    浏览(36)
  • 开发指导—利用CSS动画实现HarmonyOS动效(一)

    注:本文内容分享转载自 HarmonyOS Developer 官网文档 CSS 是描述 HML 页面结构的样式语言。所有组件均存在系统默认样式,也可在页面 CSS 样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容 JS 的类 Web 开发范式支持的组件样式。 ● 逻辑像素 px(文档中以le

    2024年02月10日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包