<template> <div class="main"> <div class="header"> <i class="el-icon-back" @click="back"></i> <input type="text" placeholder="请输入搜索内容"> <p class="title" @click="cli">管理</p> </div> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :offset="400"> <!-- <van-cell v-for="item in list" :key="item" :title="item" /> --> <div class="list-item"> <ul> <li class="goods" v-for="(item,i) in goodsList" :key="i" ref="content"> <!-- 收藏按钮样式 --> <div class="input_check" v-show="apper"> <span class="ico_gou" :class="{'ico_gou_on':item.checked}" @click="selectGoods(item)"></span> </div> <div class="goods_img"> <img class="image2" :src="item.picUrl" alt=""> <!-- <img class="image2" src="../assets/image/111.png" alt=""> --> </div> <div class="goods_text"> <p class="introduce" style="2rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"> {{item.brief}} </p> <p class="people">{{item.people}}收藏</p> <p class="pice"> <span class="pice_i">¥</span> <span class="pice_sub">{{item.retailPrice}}</span> </p> </div> </li> </ul> </div> </van-list> <div class="footer"> <div class="check"> <div class="check_i"></div> <span>全选</span> </div> <div class="remove"> <span>删除</span> </div> </div> </div> </template> <script> import { Notify } from "vant"; import axios from 'axios' export default { data() { return { allList: [],//所有收藏商品 loading: false, finished: false, goodsList: [],//收藏商品信息 pageindex: 1, pagesize: 100, count: 0,//记数 apper: false, }; }, // created() { // this.getGoods(); // }, methods: { onLoad() { console.log(this.count) setTimeout(() => { if (this.allList.length < 3) { console.log(111) for (let i = 0; i < this.allList.length; i++) { this.goodsList.push(this.allList[i]) } } else { for (let i = 0; i < 3; i++) { console.log(222) if(this.allList[i+this.count*3]){ this.goodsList.push(this.allList[i+this.count*3]) } } } this.count = this.count + 1; console.log(this.goodsList) //加载状态结束 this.loading = false; //数据加载完成 if (this.goodsList.length >= this.allList.length) { this.finished = true; } }, 500) }, back() { this.$router.go(-1) }, cli() { this.apper = !this.apper }, selectGoods(item){ console.log(111) if(typeof item.checked=='undefined'){ this.$set(item,"checked",true); }else{ item.checked=!item.checked; } } }, mounted() { 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('http://192.168.0.14:8080/wx/collect/list', data).then(res => { console.log(res) this.allList = res.data.data.list console.log(this.allList) }) } } </script> <style scoped> li { list-style: none; } .main { padding-left: 0.12rem; padding-top: 0.1rem; height: 100vh; } .header { padding: 0.15rem; top: 0.1rem; padding-bottom: 0.3rem; } .header i { font-size: 0.26rem; font-weight: bold; float: left; } .header input { 68%; height: 0.34rem; border-radius: 0.3rem; border: none; padding-left: 0.1rem; margin-left: 0.12rem; margin-top: -0.02rem; background-color: #F5F6FA; } .header .title { float: right; font-size: 0.18rem; font-weight: bold; } /* 收藏商品 */ .goods { margin-top: 0.2rem; overflow: auto; display: flex; flex-direction: row; } .goods_i .not { 0.14rem; height: 0.14rem; border-radius: 0.1rem; border: 1px solid #ccc; float: left; margin-top: 0.4rem; margin-right: 0.1rem; } .image2 { 1rem; height: 1rem; border-radius: 0.2rem; } .goods .goods_text { margin-left: 0.16rem; } .introduce { overflow: hidden; text-overflow: ellipsis; white-space: normal; font-size: 0.16rem; padding-bottom: 0.1rem; font-weight: bold; } .people { color: #A9A9A9; font-size: 0.14rem; padding-top: 0.1rem; } .pice { color: #D03515; padding-top: 0.2rem; } .pice .pice_i { font-weight: 400; } .pice .pice_sub { font-weight: blod; font-size: 0.2rem; } /* 全选删除按钮 */ .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; 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; */ 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; font-weight:bold; line-height: 0.3rem; padding-left: 0.12rem; } </style>