<!-- --> <template> <div class="funGoodsArea"> <div class="fun-goods-box1"> <div class="fun-div1"> <img src="@/assets/img/fun-goods2.png" class="img-banner" /> </div> <div class="fun-div2" v-show="buyOutList.length > 0"> <p class="t-p">海淘·趣货</p> <div class="fun-goods-scroll"> <!-- 列表 --> <div class="fun-goods-scroll-list" v-for="(item, index) in buyOutList" :key="index" @click="details(item.buyout_id)"> <img :src="item.goods_pic" class="t-left" /> <div class="t-right"> <div class="t-div1">{{ item.title }}</div> <div class="t-div2">每人限购{{ item.max_count }}件</div> <div class="t-div3"> <span :style="{ item.proportion+'%'}">已抢{{ item.sales }}件</span> </div> <div class="t-div4"> <p class="t-div4-p1"><span>￥</span>{{ item.buyout_price }}</p> <p class="t-div4-p2">立即买断</p> </div> </div> </div> </div> </div> </div> <div class="fun-goods-box2"> <ActivityList :goodsList="goodsList" :user_tel='1' @goodsDetails="goodsDetails"></ActivityList> <div class="onFooter" v-show="onFooter==1">到底啦~</div> </div> </div> </template> <script> import ActivityList from "@/components/ActivityList.vue"; import { getBuyoutActiveList, getBuyoutGoodsList } from "@/api/index.js"; export default { components: { ActivityList }, data () { return { buyOutList: [], goodsList: [], page: 1, limit: 15, onFooter: 0, onPullDown: true, //下拉加载 listlength: 1 }; }, mounted () { var that = this that.getBuyoutActiveList() that.getBuyoutGoodsList() window.addEventListener('scroll', this.scroll, false) // 监听（绑定）滚轮滚动事件 }, methods: { //水平滚动数据 无分页 getBuyoutActiveList () { var that = this var par = { token: sessionStorage.getItem('token') } getBuyoutActiveList(par) .then(result => { if (result.code == 200) { that.buyOutList = result.data } else { that.$toast(result.message); } }) .catch(err => { that.$toast(result.message); }); }, // 列表数据 有分页 getBuyoutGoodsList () { var that = this var par = { page: that.page, limit: that.limit, token: sessionStorage.getItem('token') } getBuyoutGoodsList(par) .then(result => { if (result.code == 200) { if (that.goodsList.length < that.limit) { that.onFooter = 1; } that.goodsList = that.goodsList.concat(result.data) that.listlength = that.goodsList.length; } else if (that.page > 1 && result.code == "-9003") { // that.$toast("加载完毕"); that.onFooter = 1; that.onPullDown = false; } else if (result.code == "-9003") { that.listlength = result.data.length; that.onPullDown = false; } else { that.$toast(result.message); } }) .catch(err => { that.$toast(result.message); }); }, // 滚动加载分页 scroll () { var that = this // scrollTop 滚动条滚动时，距离顶部的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // windowHeight 可视区的高度 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; // scrollHeight 滚动条的总高度 var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 滚动条到底部的条件 if (scrollTop + windowHeight == scrollHeight && that.onPullDown == true) { // 加载数据 that.page = that.page + 1 that.getBuyoutGoodsList(); } }, // 商品跳详情页 goodsDetails (val) { var that = this; that.$router.push({ path: "/goodsDetails", query: { goodsId: val } }); }, // 进入详情页 details (val) { var that = this; that.$router.push({ path: "/funGoodsAreaDetail", query: { buyout_id: val, enterStatus: 'funGoodsArea' } }); } }, destroyed () { window.removeEventListener('scroll', this.scroll) // 离开页面清除（移除）滚轮滚动事件 } }; </script> <style lang="scss"> .funGoodsArea { .fun-goods-box1 { background: white; padding-bottom: 0.3rem; margin-bottom: 0.3rem; .fun-div1 { 100%; background-repeat: no-repeat; background-image: url("../../assets/img/fun-goods1.png"); background-size: 100% 100%; margin-bottom: 0.3rem; .img-banner { calc(100% - 0.6rem); margin-left: 0.3rem; margin-top: 0.6rem; } } .fun-div2 { margin: 0rem 0.3rem; .t-p { font-weight: bold; color: #333333; font-size: 0.32rem; padding: 0.3rem 0rem; } .fun-goods-scroll { 100%; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; .fun-goods-scroll-list { padding: 0.2rem; box-sizing: border-box; 5rem; background: rgba(245, 245, 245, 1); border-radius: 0.06rem; display: flex; margin-right: 0.2rem; .t-left { 1.6rem; height: 1.8rem; margin-right: 0.2rem; border-radius: 0.05rem; } .t-right { 10rem; .t-div1 { font-size: 0.26rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 2.8rem; margin-bottom: 0.1rem; color: #333333; } .t-div2 { color: #e42121; font-size: 0.2rem; margin-bottom: 0.1rem; } .t-div3 { background: white; border-radius: 0.13rem; font-size: 0.2rem; margin-bottom: 0.1rem; span { background: #f63a3d; color: #ffffff; border-radius: 0.13rem; padding: 0rem 0.06rem; display: inline-block; min- 30%; } } .t-div4 { display: flex; justify-content: space-between; .t-div4-p1 { color: #ef2222; font-size: 0.26rem; font-weight: 600; } .t-div4-p2 { background: #ef2222; color: #ffffff; border-radius: 0.06rem; padding: 0rem 0.06rem; box-sizing: border-box; font-size: 0.2rem; } } } } } } } .fun-goods-box2 { margin-bottom: 0.2rem; .onFooter { text-align: center; padding: 0.2rem 0; } } } </style>