收藏夹

收藏夹
<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;
         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 {
         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 {
         0.6rem;
        height: 0.6rem;
        border-radius: 0.6rem;
    }

    .shop_main {
        margin-top: 20%;
    }

    .shop_main ul li {
        display: flex;
    }

    /* 全选删除按钮 */
    .delete {
         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 {
         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;
         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 {
         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 {
         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 {
         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 {
         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 {
         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 {
         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 {
         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>