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

秒速五厘米 2023-01-02 02:28 160阅读 0赞

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]

###### 未找到可使用的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">
    					
    					<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.products for (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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]: /images/20221120/c10b734f698e4077a725c275ecc7c985.png