<template> <view> <view class="input-box"> <view class="icon search"></view> <input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;" @input="toSearch()" /> </view> <view class="swiper"> <view class="swiper-box"> <swiper circular="true" autoplay="true" @change="swiperChange"> <swiper-item v-for="swiper in swiperList" :key="swiper.id"> <image :src="imageUrl+swiper.imgData"></image> </swiper-item> </swiper> <view class="indicator"> <view class="dots" v-for="(swiper, index) in swiperList" :class="[currentSwiper >= index ? 'on' : '']" :key="index"></view> </view> </view> </view> <view v-if="goodsList == '' " class="mart60 fotct font14 fcor666"> <image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> </view> <view class="width90 height110 mart5" v-for="(row, index) in goodsList" :key="index" @click="toGoods(row.id)"> <image class="goodsimg flleft mart5" mode="widthFix" :src="imageUrl+row.listImg"></image> <view class="goodsli "> <view class="text2 fcor333 font14 fontwig6">{{row.title}}</view> <view class="goodsxg font12 fotct">限购{{row.purchaseNum}}件</view> <view class="info mart10"> <view class="price"> ¥ {{row.price}} </view> </view> </view> </view> </view> </template> <script> import { getDiscountPackageList, getCmsContent, } from '../../Utils/Api.js'; let app = getApp(); export default { data() { return { goodsList: [], imagewxUrl: app.globalData.imageWxImg, imgadres: 'noorder.png', imageUrl: app.globalData.imgUrl, // 轮播图片 swiperList: [{ id: 1, src: 'url1', img: 'banner2.png' }, { id: 2, src: 'url2', img: 'banner3.png' } ], currentSwiper: 0, pageNum: 1, pageSize: 10, isNoMoreData: false, typeId: '', couponName: '', brandid: '', goodtyid: '' }; }, onLoad: function() { //option为object类型,会序列化上个页面传递的参数 uni.setNavigationBarTitle({ title: '优惠券包列表' }); this.getDiscountPackageList(); this.getCmsContent('CMS_DISCOUNT_PACKAGE_BANNER'); }, onPageScroll(e) { }, //上拉加载,需要自己在page.json文件中配置"onReachBottomDistance" onReachBottom() { this.getDiscountPackageList(); }, methods: { //获取弹出或者弹窗 getCmsContent(item) { let code; // #ifdef H5 code = '2' // #endif // #ifdef MP code = '1' // #endif let params = { companyId: app.globalData.companyId, platform: code, categoryCode: item } getCmsContent(params).then(res => { if (res.return_code == '000000') { this.swiperList = res.return_data.childCategory; } }); }, //轮播图指示器 swiperChange(event) { this.currentSwiper = event.detail.current; }, //优惠券包列表 getDiscountPackageList() { uni.showLoading({ title: '加载中...' }) if (this.isNoMoreData) { uni.hideLoading() return false; } let pagenum = this.pageNum; let params = { regionId: app.globalData.cityId, pageNum: pagenum, pageSize: this.pageSize, title: this.couponName } getDiscountPackageList(params).then(res => { if (res.return_code == '000000') { uni.hideLoading(); this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; this.goodsList = this.goodsList.concat(res.return_data.list); if (res.return_data.total == (this.pageNum * this.pageSize)) { this.isNoMoreData = true; } this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; } else { this.goodsList = []; } }) }, toSearch() { this.pageNum = 1; this.pageSize = 10; this.isNoMoreData = false; this.goodsList = []; this.getDiscountPackageList(); }, //商品跳转 toGoods(e) { uni.navigateTo({ url: '../coupon-packge-details/coupon-packge-details?id=' + e }); }, } } </script> <style lang="scss"> .input-box { width: 90%; margin-left: 5%; margin-top: 15px; height: 70rpx; background-color: #f5f5f5; border-radius: 10rpx; position: relative; display: flex; align-items: center; .icon { display: flex; align-items: center; position: absolute; top: 2px; left: 5px; width: 60upx; height: 60upx; font-size: 34upx; color: #c0c0c0; } input { padding-left: 50upx; height: 28upx; font-size: 28upx; width: 100%; } } .swiper { width: 100%; display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px; .swiper-box { width: 92%; height: 150px; overflow: hidden; border-radius: 15upx; box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2); //兼容ios,微信小程序 position: relative; z-index: 1; swiper { width: 100%; height: 150px; swiper-item { image { width: 100%; height: 150px; } } } .indicator { position: absolute; bottom: 20upx; left: 20upx; background-color: rgba(255, 255, 255, 0.4); width: 150upx; height: 5upx; border-radius: 3upx; overflow: hidden; display: flex; .dots { width: 0upx; background-color: rgba(255, 255, 255, 1); transition: all 0.3s ease-out; &.on { width: (100%/3); } } } } } .goodsimg { width: 90px; height: 90px; } .goodsli { margin-left: 100px; padding-top: 5px; } .goodsxg { margin-top: 5px; border: 1px solid #eb5823; border-radius: 5px; color: #eb5823; width: 55px; padding: 3px; } .info { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; .price { color: #e65339; font-size: 30upx; font-weight: 600; width: 50%; } .slogan { width: 50%; color: #807c87; font-size: 24upx; text-decoration: line-through; } } </style>