收藏夹
<template>
<div>
<div class="header">
<i class="el-icon-back" @click="back"></i>
<input type="text" placeholder="请输入搜索内容" @change="searchList" v-model="keywords">
<p class="title" @click="cli">管理</p>
</div>
<div class="shop_main">
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<ul>
<li v-for="(item,index) in shopList" :key="index">
<div class="checkbox" v-show="apper" style="padding-top: 8%;padding-right: 4%;">
<van-checkbox @change="selectOne(item)" checked-color="#FFB502" v-model="item.isChecked" icon-size="0.26rem" />
</div>
<div>
<span class="list_i"><img :src="item.picUrl" alt=""></span>
</div>
<div>
<span class="list_name">{{item.name}}</span>
</div>
</li>
</ul>
</van-list>
</div>
<!-- 固定底部按钮 -->
<div class="fixedbox" v-show="apper">
<div class="left">
<van-checkbox v-model="selectAll" @click="checkAll()" checked-color="#FFB502" icon-size="0.26rem">全选
</van-checkbox>
</div>
<div class="del" @click="deleteBtn()">删除</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
apper: false,//单个商品收藏勾选框
all_select: false,
shopList: [],//关注店铺数据
pageindex: 0,
pagesize: 3,
count: 0,//记数
id: [],//删除传送的id
loading: false,
finished: false,
pages: 1,
list: [],
keywords: '',
selectAll:false,//全选商品店铺
}
},
methods: {
back() {
this.$router.go(-1)
},
//点击管理
cli() {
this.apper = !this.apper
},
// 单选
selectOne(item){
var arr = [];
for(var i of this.shopList){
if(i.isChecked){
arr.push(1)
}
}
if(arr.length == this.shopList.length){
this.selectAll = true
}else{
this.selectAll = false
}
},
// 全选
checkAll(){
this.selectAll = !this.selectAll;
for(var i of this.shopList){
i.isChecked = this.selectAll
}
},
//搜索店铺数据
searchList() {
let keywords = this.keywords
this.$axios.get('collect/shopCollectSelect', { params: { keywords: keywords } })
.then(res => {
console.log(res)
this.shopList = res.data.data.list;
for(var i of res.data.data.list){
i.isChecked = false
}
})
},
//加载数据
onLoad() {
console.log(1)
//异步更新数据
setTimeout(() => {
if (this.count < this.pages) {
//请求数据
let data = new FormData();
data.append("type", "0")
data.append("limit", this.pagesize)
data.append("sort", "add_time")
data.append("order", "desc")
data.append("page", this.count + 1)
this.$axios.post("collect/shopsList", data).then(res => {
console.log(res)
for(var i of res.data.data.list){
i.isChecked = false
}
this.pages = res.data.data.pages;
this.shopList = this.shopList.concat(res.data.data.list);
this.count = this.count + 1;
//加载状态结束
this.loading = false
if (this.count >= this.pages) {
this.finished = true;
}
})
}
}, 0)
},
//请求数据
getShopList() {
//请求收藏店铺数据
let data = new FormData();
data.append("type", "0")
data.append("limit", this.pagesize)
data.append("sort", "add_time")
data.append("order", "desc")
data.append("page", this.pageindex)
this.$axios.post("collect/shopsList", data).then(res => {
console.log(res)
this.shopList = res.data.data.list;
console.log(this.shopList)
for(var i of res.data.data.list){
i.isChecked = false
}
})
},
//删除
deleteBtn() {
console.log("触发删除")
let delArr = [];//要删除的数据
for (var i = this.shopList.length - 1; i >= 0; i--) {
if (this.shopList[i].isChecked == true) {
console.log('sss')
// console.log(i)
this.id.push(this.shopList[i].valueId);
console.log(this.id)
delArr.push(i)
}
}
console.log(delArr)
// this.$axios.post("collect/deleteShopCollect",{shopCollectId:this.id})
// .then(res=>{
// console.log(res)
// if(res.data.errno==0){
// delArr.sort();//排序下标
// let k = 0 ;
// for(var i in this.shopList){
// if(i==delArr[k]){
// this.shopList.splice(i,1)
// k++;
// }
// }
// }
// })
if (delArr.length == 0) {
console.log('请您先勾选商品')
this.$toast({
message: '请选择要删除的商品~',
duration: 2000,
position: 'bottom'
})
} else {
this.$dialog.confirm({
message: '是否删除要删除的商品~',
confirmButtonColor: '#FFB200',
}).then(() => {
//删除勾选的商品
this.$axios.post("collect/deleteShopCollect", { shopCollectId: this.id })
.then(res => {
console.log(res)
// if (res.data.errno == 0) {
// delArr.sort();//排序下标
// let k = 0;
// for (var i in this.shopList) {
// if (i == delArr[k]) {
// this.shopList.splice(i, 1)
// k++;
// }
// }
// }
this.getShopList()
})
}).catch(() => {
//取消删除
this.getShopList()
})
}
}
},
created() {
// this.firstList();
}
}
</script>
<style scoped>
li {
/* border-bottom: 1px solid #e1e1e1; */
line-height: 1rem;
/* overflow: auto; */
position: relative;
transform: translateX(0);
transition: all .3s;
/*滑动效果更生动*/
padding-left: 10px;
}
.main {
padding-left: 0.08rem;
padding-top: 0.1rem;
height: 100vh;
box-sizing: border-box;
}
.header {
position: fixed;
padding: 0.15rem;
top: 0rem;
width: 100%;
padding-top: 0.3rem;
box-sizing: border-box;
background: white;
z-index: 233;
}
.header i {
font-size: 0.26rem;
font-weight: bold;
float: left;
}
.header input {
width: 66%;
height: 0.34rem;
border-radius: 0.3rem;
border: none;
float: left;
padding-left: 0.14rem;
margin-left: 0.12rem;
margin-top: -0.02rem;
background-color: #F5F6FA;
}
.header .title {
float: left;
margin-left: 0.12rem;
font-size: 0.18rem;
font-weight: bold;
}
ul {
overflow-x: hidden;
/*隐藏ul x轴的滚动条*/
}
.list_i {
float: left;
margin-top: 0.12rem;
padding-bottom: 0.06rem;
}
.list_name {
margin-left: 0.12rem;
}
.list_i>img {
width: 0.6rem;
height: 0.6rem;
border-radius: 0.6rem;
}
.shop_main {
margin-top: 20%;
}
.shop_main ul li {
display: flex;
}
/* 全选删除按钮 */
.delete {
width: 90%;
height: 0.4rem;
padding-top: 0.04rem;
padding-bottom: 0.02rem;
margin-top: 0.1rem;
margin-bottom: 0.1rem;
position: relative;
/* bottom:0.2rem; */
border-radius: 0.4rem;
background-color: #ccc;
}
.delete .all {
float: left;
padding-top: 0.1rem;
padding-left: 0.2rem;
}
.all_btn {
width: 0.2rem;
height: 0.2rem;
float: left;
/* display: inline-block; */
border: 1px solid #ccc;
border-radius: 0.1rem;
background-color: #fff;
}
.election {
float: left;
padding-left: 0.1rem;
}
.remove {
float: right;
color: #fff;
text-align: center;
width: 1.2rem;
height: 0.4rem;
margin-right: 0.06rem;
line-height: 0.38rem;
border-radius: 0.38rem;
background: linear-gradient(to right, #FF91BF, #F74296);
}
.ico_gou {
width: 0.2rem;
height: 0.2rem;
float: left;
margin-left: 0.12rem;
margin-right: 0.12rem;
margin-top: 0.5rem;
border: 1px solid #ccc;
border-radius: 0.1rem;
background-color: #fff;
}
.ico_gou {
background-color: #fff;
}
.ico_gou_on {
background: url("../assets/image/checklist_icon.png");
background-size: cover;
border: none !important;
}
.footer {
width: 94%;
height: 0.42rem;
position: fixed;
bottom: 0.07rem;
padding-top: 0.04rem;
padding-bottom: 0.02rem;
margin-top: 0.1rem;
margin-bottom: 0.1rem;
background: white;
left:0.1rem;
border-radius: 0.4rem;
box-shadow: 2px 2px 2px 1px #ccc;
}
.check_i {
width: 0.26rem;
height: 0.26rem;
border-radius: 0.26rem;
display: block;
float: left;
margin-left: 0.2rem;
border: 1px solid #ccc;
background-color: #fff;
}
.check span {
float: left;
color: #2B2C2D;
font-size: 0.16rem;
margin-left: 0.12rem;
font-weight: bold;
line-height: 0.3rem;
/* padding-left: 0.12rem; */
}
.all_gou {
width: 0.22rem;
height: 0.22rem;
float: left;
margin-left: 0.2rem;
margin-top: 0.06rem;
border: 1px solid #ccc;
border-radius: 0.1rem;
background-color: #fff;
}
/* 底部固定 */
.fixedbox {
width: 90%;
height: 0.5rem;
position: fixed;
bottom: 0.2rem;
left: 0.2rem;
background: #fff;
padding: 0 0.16rem;
/* border-bottom: 1px solid #eee; */
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
box-shadow: 6px 6px 6px 6px #ccc;
border-radius: 0.2rem;
}
.fixedbox .van-checkbox__label {
color: #999999;
font-size: 0.15rem;
}
.fixedbox>.right {
display: flex;
align-items: center;
font-size: 0.15rem;
font-weight: 600;
}
.fixedbox>.right .total {
line-height: 0.27rem;
}
.fixedbox>.right .total span {
color: #D03515;
font-size: 0.2rem;
margin-left: 0.05rem;
}
.fixedbox>.right .jiesuan {
width: 0.92rem;
height: 0.38rem;
line-height: 0.38rem;
color: #fff;
background: #FFB200;
border-radius: 0.19rem;
text-align: center;
margin-left: 0.06rem;
}
.fixedbox>.del {
width: 1.2rem;
height: 0.5rem;
text-align: center;
line-height: 0.5rem;
color: #ffffff;
position: absolute;
right:0.0%;
border-radius: 0.2rem;
background: -webkit-gradient(linear, left top, right top, from(#FF91BF), to(#F74296));
background: linear-gradient(to right, #FF91BF, #F74296);
}
</style>
浙公网安备 33010602011771号