high-mini/pages/goods/goods-list/goods-list.vue

<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" :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="data:image/png;base64,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
						</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="data:image/png;base64,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
						</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>