<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.couponImg"></image> <view class="goodsli "> <view class="text2 fcor333 font14 fontwig6">{{row.couponName}}</view> <view class="goodsxg font12 fotct">限购{{row.limitNumber}}件</view> <view class="info mart10"> <view class="price" v-if="typeId == 2"> <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png"> </image> {{ row.discountPrice*100}} </view> <view class="price" v-if="typeId == 1"> ¥ {{ row.discountPrice*100}} </view> <!-- v-if="product.discountPrice !== product.salesPrice" --> <view class="slogan" v-if="row.discountPrice !== row.salesPrice"> <image v-if="typeId == 2" style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfh.png"> </image> <text v-if="typeId == 1">¥</text>{{ row.salesPrice*100}} </view> </view> </view> </view> </view> </template> <script> import { getCouponList, 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: '' }; }, onLoad: function(option) { //option为object类型,会序列化上个页面传递的参数 this.typeId = option.id; if (option.id == 1) { uni.setNavigationBarTitle({ title: '商品列表' }); } if (option.id == 2) { uni.setNavigationBarTitle({ title: '积分列表' }); } this.getCouponListArea(); this.getCmsContent(); }, onPageScroll(e) { }, //上拉加载,需要自己在page.json文件中配置"onReachBottomDistance" onReachBottom() { this.getCouponListArea(); }, methods: { //获取弹出或者弹窗 getCmsContent() { let params = { regionId: app.globalData.cityId, categoryCode: 'CMS_WX_APPLETS_GOODS_LIST' } getCmsContent(params).then(res => { if (res.return_code == '000000') { this.swiperList = res.return_data; } }); }, //轮播图指示器 swiperChange(event) { this.currentSwiper = event.detail.current; }, //赠券卡券列表 getCouponListArea() { 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, displayArea: this.typeId, couponName: this.couponName } getCouponList(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.getCouponListArea(); }, //商品跳转 toGoods(e) { uni.navigateTo({ url: '../../goods/goods?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>