<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" @click="jumpCont(swiper)"></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 class="width90 mart20 marb20 alijus"> <view class="font16 fcor333 paddtop5 paddbotm5 margle20 marRight20" v-for="(item,index) in cateTypeList" @click="switchid(item)" :class="[goodtyid == item.id ? 'fcor089 borbtom fontwig6' : '']" :key="index"> {{item.title}}</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 mart10 backcorfff border-8r alijusstart" v-for="(row, index) in goodsList" :key="index" @click="toGoods(row.id)"> <image class="goodsimg mart5" mode="widthFix" :src="imageUrl+row.couponImg"></image> <view class="goodsli width65"> <view class="text1 fcor333 font16 fontwig6">{{row.couponName}}</view> <view class="goodsxg font12 fotct">限购{{row.limitNumber}}件</view> <view class="alijusstart 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"> ¥{{ row.discountPrice}} </view> <!-- v-if="product.discountPrice !== product.salesPrice" --> <view class="slogan margle10" v-if="row.discountPrice !== row.salesPrice"> <!-- <view v-if="typeId == 2"> <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfh.png"> </image>{{ row.salesPrice*100}} </view> --> <view>¥{{ row.salesPrice}}</view> </view> </view> </view> </view> </view> </template> <script> import { getCouponList, getCmsContent, getBrandCouponList, getListGoodsType } 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: '', cateTypeList: [] //分类 }; }, onLoad: function(option) { //option为object类型,会序列化上个页面传递的参数 this.typeId = option.id; this.brandid = option.brandId; this.goodtyid = option.goodsId; if (this.goodtyid == undefined) { this.goodtyid = ''; } if (option.id == 1) { uni.setNavigationBarTitle({ title: '商品列表' }); this.getCouponListArea(); this.getCmsContent('CMS_BANNER_COUPON'); } if (option.id == 2) { uni.setNavigationBarTitle({ title: '积分列表' }); if (app.globalData.cityName == '贵州省') { this.getListGoodsType(); } else { this.getCouponListArea(); } this.getCmsContent('CMS_BANNER_COUPON'); } if (option.id == 5) { uni.setNavigationBarTitle({ title: '工会卡列表' }); if (app.globalData.cityName == '贵州省') { this.getListGoodsType(); } else { this.getCouponListArea(); } this.getCmsContent('CMS_BANNER_COUPON'); } if (option.id == 3) { uni.setNavigationBarTitle({ title: '优选商品' }); this.getCmsContent('CMS_BANNER_SELECTIVE'); this.getBrandCouponList(); } }, onPageScroll(e) { }, //上拉加载,需要自己在page.json文件中配置"onReachBottomDistance" onReachBottom() { if (this.typeId == 3) { this.getBrandCouponList(); } else { this.getCouponListArea(); } }, methods: { //查询品牌 getListGoodsType() { uni.showLoading({ title: '加载中...' }) let params = { pageNum: 1, pageSize: 10000, userService: '贵州中石化' } getListGoodsType(params).then(res => { uni.hideLoading(); if (res.return_code == '000000') { this.cateTypeList = res.return_data.list; this.goodtyid = res.return_data.list[0].id; if (app.globalData.cityName == '贵州省') { this.getCouponListArea(); } } else { this.cateTypeList = []; } }) }, //切换id switchid(item) { this.goodtyid = item.id; this.pageNum = 1; this.pageSize = 10; this.isNoMoreData = false; this.goodsList = []; this.getCouponListArea(); }, //获取弹出或者弹窗 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; }, //赠券卡券列表 getCouponListArea() { uni.showLoading({ title: '加载中...' }) if (this.isNoMoreData) { uni.hideLoading() return false; } let pagenum = this.pageNum; let params = { regionId: app.globalData.cityId, goodsTypeId: this.goodtyid, 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 = []; } }) }, //优选商品列表 getBrandCouponList() { 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, brandId: this.brandid, goodsTypeId: this.goodtyid, couponName: this.couponName } getBrandCouponList(params).then(res => { uni.hideLoading(); if (res.return_code == '000000') { 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.goodsList = []; this.isNoMoreData = false; if (this.typeId == 3) { this.getBrandCouponList(); } else { this.getCouponListArea(); } }, //商品跳转 toGoods(e) { uni.navigateTo({ url: '../../goods/goods?id=' + e }); }, //跳转内容 jumpCont(item) { if (item.jumpUrl) { uni.navigateTo({ url: item.jumpUrl }) } }, } } </script> <style lang="scss"> page { background-color: #f3f3f3; } .input-box { width: 90%; margin-left: 5%; margin-top: 15px; height: 70rpx; background-color: #ffffff; 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: 10px; padding-top: 5px; } .goodsxg { margin-top: 5px; border: 1px solid #3da7e7; border-radius: 5px; color: #3da7e7; width: 55px; padding: 3px; } // .info { // display: flex; // justify-content: space-between; // align-items: flex-end; // width: 100%; .price { color: #e65339; font-size: 40upx; font-weight: 600; // width: 50%; } .slogan { width: 50%; color: #807c87; font-size: 24upx; text-decoration: line-through; } // } .borbtom { border-bottom: 2px solid #089bf5; } </style>