共计 7917 个字符，预计需要花费 20 分钟才能阅读完成。
依据我的项目需要；写的一个内外循环的全选与反选；遇到问题：因为是分页，抉择全选，当上拉加载时；新加载的数据并没有被选中等问题，都被解决；如果有其余些问题；欢送提出。
留神：这只我我的项目中的页面；有些全局援用的例如提醒或是一些组件；应用的时候能够删除；并不影响次要性能；获取数据时；因为后盾传的是认为数组；但理论须要的二维数据；上面获取数据的接口曾经过解决；依据你们返回的数据格式可自行更改；咱们我的项目中有一键换色；牵扯到色彩变量的可删除；写成固定色彩
以下是具体代码：
Html：<template>
<view>
<view class="record" :style="colorStyle" v-if="visitList.length">
<view class="nav acea-row row-between-wrapper">
<view class="left"> 以后共 <text class="num">{{count}}</text> 件商品 </view>
<view class="font-num" v-if="!isShowChecked" @click="switchTap"> 治理 </view>
<view v-else @click="switchTap"> 勾销 </view>
</view>
<view class="list">
<checkbox-group @change="checkboxChange">
<view class="item" v-for="(item,index) in visitList" :key="index">
<view class="title">
<checkbox v-if="isShowChecked" :value="item.time" :checked="item.checked" />
<text>{{item.time}}</text>
</view>
<checkbox-group @change="(e)=>{picCheckbox(e,index)}">
<view class="picList acea-row row-middle">
<view class="picTxt" v-for="(j,jindex) in item.picList" :key="jindex" @click.stop="goDetails(j)">
<view class="pictrue">
<image :src="j.image"></image>
<checkbox v-if="isShowChecked" :value="(j.id).toString()" :checked="j.checked" class="checkbox" />
</view>
<view class="money">¥<text class="num">{{j.product_price}}</text></view>
</view>
</view>
</checkbox-group>
</view>
</checkbox-group>
<view class='loadingicon acea-row row-center-wrapper'>
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
</view>
</view>
<view class="footer acea-row row-between-wrapper" v-if="isShowChecked">
<checkbox-group @change="checkboxAllChange">
<checkbox value="all" :checked="isAllSelect" />
<text class='checkAll'> 全选 </text>
</checkbox-group>
<view class="acea-row row-middle">
<view class="bnt acea-row row-center-wrapper" @click="collect"> 珍藏 </view>
<view class="bnt on acea-row row-center-wrapper" @click="del"> 删除 </view>
</view>
</view>
</view>
<view class='noCommodity' v-else-if="!visitList.length && page == 1">
<view class='pictrue'>
<image src='../../../static/images/noCollection.png'></image>
</view>
<recommend :hostProduct="hostProduct"></recommend>
</view>
<home v-if="navigation"></home>
</view>
</template>
Js：<script>
import {
getVisitList,
getProductHot,
deleteVisitList,
collectAdd
} from '@/api/store.js';
import {mapGetters} from "vuex";
import {toLogin} from '@/libs/login.js';
import recommend from '@/components/recommend';
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import home from '@/components/home';
import colors from '@/mixins/color.js'
export default {
components: {
recommend,
// #ifdef MP
authorize,
// #endif
home
},
mixins: [colors],
data() {
return {
isShowChecked: 0,
count: 0,
times: [],
isAllSelect: false,
hostProduct: [],
loadTitle: '加载更多',
loading: false,
loadend: false,
visitList: [],
limit: 21,
page: 1,
isAuto: false, // 没有受权的不会主动受权
isShowAuth: false, // 是否暗藏受权
hotScroll: false,
hotPage: 1,
hotLimit: 10,
isItemAll: []};
},
computed: mapGetters(['isLogin']),
onLoad() {if (this.isLogin) {
this.loadend = false;
this.page = 1;
this.visitList = [];
this.get_user_visit_list();
this.get_host_product();} else {toLogin();
}
},
onShow() {this.times = [];
this.loadend = false;
this.page = 1;
this.visitList = [];
this.get_user_visit_list();},
methods: {goDetails(item){if(this.isShowChecked) return false;
uni.navigateTo({url: '/pages/goods_details/index?id=' + item.product_id})
},
switchTap(){this.isShowChecked = !this.isShowChecked;},
collect(){let ids = [];
this.visitList.forEach(item=>{
item.picList.forEach(j=>{if(j.checked){ids.push(j.id)
}
})
})
if(!ids.length){
return this.$util.Tips({title: '请抉择珍藏商品'});
}
collectAdd(ids).then(res=>{
return this.$util.Tips({title: res.msg});
})
},
del(){let ids = [];
this.visitList.forEach(item=>{
item.picList.forEach(j=>{if(j.checked){ids.push(j.id)
}
})
})
if(!ids.length){
return this.$util.Tips({title: '请抉择删除商品'});
}
deleteVisitList(ids).then(res=>{this.times = [];
this.loadend = false;
this.page = 1;
this.$set(this, 'visitList', []);
this.get_user_visit_list();
return this.$util.Tips({title: res.msg});
})
},
picCheckbox(event, index) {
let that = this,
picTime = event.detail.value;
that.visitList[index].picList.forEach(j => {if (picTime.indexOf(j.id + '') !== -1) {j.checked = true;} else {j.checked = false;}
})
if(that.visitList[index].picList.length == picTime.length){that.visitList[index].checked = true;
}else{that.visitList[index].checked = false;
}
let visitObj = [];
that.visitList.forEach(item=>{if(item.checked){visitObj.push(item.time)
}else{if(visitObj.indexOf(item.time) !== -1){visitObj.remove(item.time);
}
}
})
if(visitObj.length == that.visitList.length){that.isAllSelect = true;}else{that.isAllSelect = false;}
},
checkboxChange(event) {
let that = this,
timeList = event.detail.value;
that.isItemAll = timeList;
that.visitList.forEach((item, index) => {if (timeList.indexOf(item.time) !== -1) {item.checked = true;} else {item.checked = false;}
item.picList.forEach(j => {if (item.checked) {j.checked = true;} else {j.checked = false;}
})
})
if (timeList.length === that.visitList.length) {that.isAllSelect = true;} else {that.isAllSelect = false;}
},
forGoods(val) {
let that = this;
if (!that.visitList.length) return
that.visitList.forEach((item) => {if (val) {item.checked = true;} else {item.checked = false;}
item.picList.forEach(j => {if (val) {j.checked = true;} else {j.checked = false;}
})
})
},
checkboxAllChange(event) {
let value = event.detail.value;
if (value.length) {
this.isAllSelect = true;
this.forGoods(1)
} else {
this.isAllSelect = false;
this.forGoods(0)
}
},
// 受权敞开
authColse: function(e) {this.isShowAuth = e},
/**
* 获取珍藏产品
*/
get_user_visit_list: function() {
let that = this;
if (this.loading) return;
if (this.loadend) return;
that.loading = true;
that.loadTitle = "";
getVisitList({
page: that.page,
limit: that.limit
}).then(res => {
this.count = res.data.count;
for (let i = 0; i < res.data.time.length; i++) {if (this.times.indexOf(res.data.time[i]) == -1) {this.times.push(res.data.time[i])
this.visitList.push({time: res.data.time[i],
picList: []})
}
}
for (let x = 0; x < this.times.length; x++) {this.visitList[x].checked = this.isAllSelect ? true : false;
for (let j = 0; j < res.data.list.length; j++) {if (this.times[x] === res.data.list[j].time_key) {if (this.isAllSelect) {res.data.list[j].checked = true;
} else {res.data.list[j].checked = false;
}
this.visitList[x].picList.push(res.data.list[j])
}
}
}
let loadend = res.data.list.length < that.limit;
that.loadend = loadend;
that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
that.page = that.page + 1;
that.loading = false;
}).catch(err => {
that.loading = false;
that.loadTitle = "加载更多";
});
},
/**
* 获取我的举荐
*/
get_host_product: function() {
let that = this;
if (that.hotScroll) return
getProductHot(
that.hotPage,
that.hotLimit,
).then(res => {
that.hotPage++
that.hotScroll = res.data.length < that.hotLimit
that.hostProduct = that.hostProduct.concat(res.data)
});
}
},
onReachBottom() {if (this.visitList.length) {this.get_user_visit_list();
} else {this.get_host_product();
}
}
}
</script>
Css：<style lang="scss">
page {background-color: #fff;}
.record .pictrue /deep/checkbox .uni-checkbox-input {background-color: rgba(0, 0, 0, 0.16);
}
.record .pictrue /deep/checkbox .wx-checkbox-input {background-color: rgba(0, 0, 0, 0.16);
}
.record {
.footer {
box-sizing: border-box;
padding: 0 30rpx;
width: 100%;
height: 96rpx;
box-shadow: 0px -4px 20px 0px rgba(0, 0, 0, 0.06);
background-color: #fff;
position: fixed;
bottom: 0;
z-index: 30;
padding-bottom: constant(safe-area-inset-bottom); /// 兼容 IOS<11.2/
padding-bottom: env(safe-area-inset-bottom); /// 兼容 IOS>11.2/
.bnt {
width: 160rpx;
height: 60rpx;
border-radius: 30rpx;
border: 1rpx solid #ccc;
color: #666666;
&.on {border: 1rpx solid var(--view-theme);
margin-left: 16rpx;
color: var(--view-theme);
}
}
}
.nav {
border-bottom: 1rpx solid #eee;
color: #999999;
font-size: 28rpx;
height: 74rpx;
padding: 0 30rpx;
.left {
color: #333;
.num {color: var(--view-theme);
margin: 0 10rpx;
}
}
}
.list {
padding-top: 32rpx;
padding-bottom: 96rpx;
.item {
.title {
padding: 0 30rpx;
margin-bottom: 34rpx;
font-size: 34rpx;
font-weight: 600;
}
.picList {
padding: 0 30rpx 0 12rpx;
.picTxt {
margin-left: 18rpx;
margin-bottom: 48rpx;
.pictrue {
width: 218rpx;
height: 218rpx;
border-radius: 10rpx;
position: relative;
image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.checkbox {
position: absolute;
right: 10rpx;
top: 14rpx;
}
}
.money {
font-size: 24rpx;
color: var(--view-theme);
font-weight: 600;
margin-top: 15rpx;
.num {
font-size: 32rpx;
margin-left: 6rpx;
}
}
}
}
}
}
}
</style>最初
如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点 star:http://github.crmeb.net/u/defu 不胜感激！
收费获取源码地址：http://www.crmeb.com
PHP 学习手册：https://doc.crmeb.com
技术交换论坛：https://q.crmeb.com
正文完
