uni-app中使用微信小程序 checkbox 组件案例

微信官网：https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

uni-app官网：https://uniapp.dcloud.io/component/checkbox

未找到可使用的tree树形菜单,所以最后自己用checkbox来写，由于后端接口给定的响应数据是两个数组（产品、套餐），最后代码如下：

<template><view><view style="width: 100%;" class="horizontal-and-vertical"><view><view class="horizontal" style="margin: 26px 0;font-size: 18px;;">请选择需要办理的业务</view><view style="margin: 6px 0;font-size: 16px;position: relative;right: 58px;">购物车</view><!-- 产品列表 --><checkbox-group name="check" @change="changeCheck"><!-- 注意v-for不要设在checkbox-group上 --><view v-for="(item, index) in products" :key="index" :data-index="item" class="check"><label style="padding: 6px 0;"><view class="vertical"><view v-if="item.flag_isPackage===true" style="position: absolute;left: 68px;margin-top: 2.5px;"><image style="width: 20px;height: 20px;" :src="item.img"></image></view><checkbox :value="item.product_name" :checked="item.checked" color="rgb(22,155,213)" /><text>{{item.product_name}}</text></view></label><view v-if="item.package_product_isShow"><checkbox-group name="check" class="check"><label style="padding: 6px 0;margin-left: 32px;;" v-for="(item2,index2) in  combo" :key="index2" v-if="item.product_name===item2.package_name"><checkbox :value="item2.product_name" :checked="true" disabled="disabled" /><text>{{item2.product_name}}</text></label></checkbox-group></view></view></checkbox-group><!-- 全选 --><checkbox-group name="allCheck" @change="changeAll"><label style=";font-weight: 700;position:relative;right: 58px;"><checkbox :value="allCheck.value" :checked="allCheck.checked" color="rgb(22,155,213)" /><text>{{allCheck.name}}</text></label></checkbox-group></view></view><view class="horizontal" style="margin-top: 16px;" @click="jumpPage()"><view style="margin-bottom: 40px;z-index: 10;position: fixed;bottom: 0;width: 106px;height: 38px;color: #FFFFFF;;background-color: rgb(22,155,213);text-align: center;line-height: 38px;border-radius: 4px;;">提交</view></view></view>
</template><script>export default {data() {return {isShow: false,checkboxInformation: [], //存储查询出来的数据products: '', //存储产品package_name: '',combo: [], //存储套餐allCheck: {name: '全选',value: 'all',checked: false,checkboxInfo: '', //复选框选中的值},}},onLoad: function() {console.log("页面进来了...")this.queryCheckboxInfo()},methods: {queryCheckboxInfo: function() {console.log("页面进来了...")let that = this;uni.getStorage({//从缓存中获取token，成功后调取接口，key: 'local_Token',success: function(res) {// console.log("缓存获取token成功", res.data);uni.request({url: 'https://api.chinamworld.com/brons/transservice',method: 'post',data: {"svccode": "WX110001","funcode": "","requestdata": {"coh": {},"bdy": {"org_name": "上海银行苏州分行","tel": "15692188888"}}},header: {'Accept': '*/*','Content-Type': 'application/json','Authorization': 'Bearer' + res.data},success: res => { //当没有接口调时，将success改为fail 关闭网络，然后下面打开注释即可！// res.data = {//   "trackid": "183e77fffc334342ad82f4d40a7b3394",//    "resultdata": {//         "package": [{//           "package_name": "新用户存款套餐",//            "package_id": "PK100001",//             "products": [{//              "trans_code": "TX010101",//                 "product_no": "PD010101",//                 "product_name": "新用户开户"//           }, {//              "trans_code": "TX010501",//                 "product_no": "PD010501",//                 "product_name": "借记卡开卡"//           }, {//              "trans_code": "TX010506",//                 "product_no": "PD010506",//                 "product_name": "活期账户现金存款"//            }]//        }, {//          "package_name": "新用户取款套餐",//            "package_id": "PK100002",//             "products": [{//              "trans_code": "TX011201",//                 "product_no": "PD011201",//                 "product_name": "信用卡申请"//           }, {//              "trans_code": "TX011202",//                 "product_no": "PD011202",//                 "product_name": "信用卡分期"//           }]//        }],//       "products": [{//          "trans_code": "TX010110",//             "product_no": "PD010110",//             "product_name": "个人理财购买"//      }, {//          "trans_code": "TX010111",//             "product_no": "PD010111",//             "product_name": "大额存单"//        }]//    },//    "returncode": "000000",//   "status": 0// }const array = res.data.resultdata.products; //产品数组对象const array2 = res.data.resultdata.package; //套餐数组//第一步for (let a = 0; a < array2.length; a++) {//第一步：将套餐编号、名称 分别赋值给产品数组，array.push({"product_no": array2[a].package_id,"product_name": array2[a].package_name,"flag_isPackage": true, //套餐前显示箭头图标"package_product_isShow": false, // 套餐下的产品列表，是否显示"img": '/static/icon_34.png' // 套餐前的箭头});//第二步：const array3 = array2[a].products;// console.log("嘿嘿", JSON.stringify(array3))for (let b = 0; b < array3.length; b++) {array3[b].package_name = array2[a].package_name;}// console.log("酷...", JSON.stringify(array3))// that.combo = array3;for (let c = 0; c < array3.length; c++) {that.combo.push(array3[c]);}}// console.log("恭喜...", that.combo);for (let i = 0; i < array.length; i++) {array[i].whether = true; // 用于全选判断 | 每条对象中，新增一个 key:value  }that.products = array; //产品数组对象+拼接的套餐名称及编号// console.log("*****追加过对象的数组：", JSON.stringify(array));}})}})},// 全选changeAll: function(e) {if (e.detail.value.length == 0) {this.products.map(item => this.$set(item, 'checked', false));this.$set(this.allCheck, 'checked', false); //反选this.setState(false);} else {this.products.map(item => this.$set(item, 'checked', true));this.$set(this.allCheck, 'checked', true); //全选this.setState(true);}},//在全选状态下，设置所有套餐下产品列表，进行展示setState: function(boolean) {const array = this.productsfor (let i = 0; i < array.length; i++) {const product_Object = array[i];if (boolean) {product_Object.package_product_isShow = true;product_Object.img = '/static/icon_33.png'; //切换图标} else {product_Object.package_product_isShow = false;product_Object.img = '/static/icon_34.png'; //}}},// 复选框onchange事件changeCheck: function(e) {const itemArray = this.products; //产品数组this.checkboxInfo = e.detail.value; //获取选中的checkbox的value值console.log("当前选中的业务：", this.checkboxInfo);for (var i = 0; i < itemArray.length; i++) {var item = itemArray[i];if (this.checkboxInfo.includes(item.product_name)) { //根据产品的号进行筛选this.$set(item, 'checked', true);item.img = '/static/icon_33.png'; //选中，则切换图标item.package_product_isShow = true; //控制套餐下拉的产品的显示或隐藏} else {this.$set(item, 'checked', false);item.img = '/static/icon_34.png';item.package_product_isShow = false;}}// 判断选中状态var arr = [];this.products.forEach(item => item.whether == true ? arr.push(item) : '');var isAll = arr.every(item => item.checked == true);isAll ? this.$set(this.allCheck, 'checked', true) : this.$set(this.allCheck, 'checked', false);},//跳页面jumpPage() {wx.showToast({icon: 'loading',title: '正在跳转,请稍后...',})wx.navigateTo({url: './confirm-information?info=' + this.checkboxInfo})},},watch: {}}
</script><style>.check {display: flex;flex-direction: column;}page {}
</style>

uni-app中使用微信小程序 checkbox 组件案例相关推荐

安卓APP中启动微信小程序，闪一下无法打开问题
原因是:调用了其他微信依赖包中的内容.下边是在下项目中的详解. APP调用小程序的代码是: String appId = ".....自己的APPid....."; // 填应用A ...
uni-app app 跳转微信小程序（安卓/ios）
uni-app app 跳转微信小程序(安卓/ios) 近日接到需求,需要实现在 app 中直接跳转到微信小程序中,其实非常简单,uni-app 都已经集成好了. 安卓和ios 有点区别,这个需要注 ...
dakai微信小程序 ios_iOS APP拉起微信小程序
背景:由于公司业务需求,我们公司自己开发了一个微信小程序,然后通过App拉起微信小程序进行交互,有一些功能也可以放在小程序中去实现! 准备:首先你在微信的开放平台创建应用,并通过审核,就是你的App具 ...
uniapp App跳转微信小程序并互相传递参数、接收微信小程序传递的参数
本文是uniapp打包成安卓App. 一.注意事项 1.用到了分享功能,在打包App时,需要配置manifest.json:App 模块配置->Share.按照提示填写微信分享的信息,appid ...
APP 跳转微信小程序和回调
在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转. 可在"管理中心-移动应用-应用详情-关联小程序信息&qu ...
Android APP跳转微信小程序和APP跳转支付宝小程序传参
Android APP跳转微信小程序和APP跳转支付宝小程序传参微信开放文档链接 MINIPROGRAM_TYPE_PREVIEW:体验版. MINIPROGRAM_TYPE_TEST:开发版 MI ...
如何用Python快速实现一个垃圾分类APP【附带微信小程序】
嗨害大家好鸭!我是小熊猫❤ 今天这篇文章主要介绍的是: 如何利用现有的工具来实现一个垃圾分类的应用有什么python相关报错解答自己不会的.或者源码资料/模块安装/女装大佬精通技巧都可以来这里:( ...
小程序开发过程中常见问题[微信小程序、支付宝小程序]
小程序开发过程中常见问题[微信小程序.支付宝小程序] 正文一.样式中如何使用background-image呢? background-image支持网络的图片链接或者base64 二.使用自适应单 ...
APP跳转微信小程序，跳转微信公众号
一.判断手机是否安装了微信的工具类: //判断手机是否安装了某些程序的工具类 public class IsInstallUtils {//判断是否安装了微信public static boolean ...

uni-app中使用微信小程序 checkbox 组件案例

微信官网：https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

uni-app官网：https://uniapp.dcloud.io/component/checkbox

未找到可使用的tree树形菜单,所以最后自己用checkbox来写，由于后端接口给定的响应数据是两个数组（产品、套餐），最后代码如下：

uni-app中使用微信小程序 checkbox 组件案例相关推荐

最新文章

热门文章