sxg/pages/category/mall.vue

<template>
 	<view class="center">
 		<!-- 顶部logo and 搜索 start-->
 		<!-- 这里是状态栏 -->
 		<view class="status_bar"></view>
 		<view class="top-search flex">
 			<view class="top-logo">
 				<image src="../../static/icon/logo.png" mode="widthFix"></image>
 			</view>
 			<view class="search-box flex" @click="clickSearch()">
 				<image class="search" src="../../static/icon/search-h.png" mode=""></image>
 				<view class="search-font">输入关键词搜索</view>
 			</view>
 		</view>
 		<!-- 顶部logo and 搜索 end-->
 		<view class="jg"></view>
 		<!-- 轮播图 start -->
 		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
 			<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
 				@click="bannerNavToUrl(item)">
 				<image :src="item.pic" />
 			</swiper-item>
 		</swiper>
 		<!-- 轮播图 end -->
 		<view class="swiper-btm flex">
 			<view class="btm-item flex">
 				<image src="../../static/icon/index-gou.png" mode=""></image>
 				<view class="">自用购物返利</view>
 			</view>
 			<view class="btm-item flex">
 				<image src="../../static/icon/index-gou.png" mode=""></image>
 				<view class="">分享好友赚钱</view>
 			</view>
 			<view class="btm-item flex">
 				<image src="../../static/icon/index-gou.png" mode=""></image>
 				<view class="">超值正品优惠</view>
 			</view>
 		</view>
 		<!-- 商品列表 -->
 		<view class="good-list">
 			<view class="good flex" v-for="item in goodList" @click="navto('/pages/product/product?id=' + item.id)">
 				<view class="good-img">
 					<image :src="item.image" mode=""></image>
 				</view>
 				<view class="good-info flex">
 					<view class="good-name clamp2">
 						{{item.store_name}}
 					</view>
 					<view class="good-price">
 						<view class="old-price" v-if="item.ot_price*1 > item.price*1">
 							<text class="old-left">¥{{item.ot_price}}</text>
 							<image src="../../static/icon/down.png" mode="widthFix"></image><text
 								class="old-right">直降{{item.ot_price*1 - item.price*1}}元</text>
 						</view>
 						<view class="new-price flex">
 							<view class="">
 								¥{{item.price}}
 							</view>
 							<!-- <view class="good-tip">
								1960提货券
							</view> -->
 						</view>
 					</view>
 				</view>
 			</view>
 		</view>
 		<uni-load-more :status="loadingType"></uni-load-more>
 	</view>
 </template>

 <script>
 	import {
 		tabbar1
 	} from '@/utils/tabbar.js';
 	import {
 		loadIndexs
 	} from '@/api/index.js';
 	import {
 		getProducts
 	} from '@/api/product.js'
 	import uniCountdowns from '@/components/uni-countdown/uni-countdowns.vue';
 	export default {
 		components: {
 			uniCountdowns
 		},
 		data() {
 			return {
 				current: 0,
 				tabbar: tabbar1,
 				titleNViewBackground: '',
 				swiperCurrent: 0,
 				swiperLength: 0,
 				dataList: '',
 				carouselList: [], //轮播图列表
 				text: ['恭喜黑白灰用户拼团成功￥353元！', '恭喜黑白灰用户拼团成功￥353元！'],
 				stopTime: {
 					stopTimeH: 0,
 					stopTimeM: 24,
 					stopTimeS: 59
 				},
 				bzb: 30,
 				goodList: [],
 				page: 1,
 				limit: 10,
 				loadingType: 'more'
 			};
 		},
 		onLoad() {
 			this.loadData();
 			this.getProList()
 		},
 		onReachBottom() {
 			this.getProList()
 		},
 		methods: {
 			navto(url) {
 				uni.navigateTo({
 					url
 				})
 			},
 			loadData() {
 				loadIndexs({})
 					.then(({
 						data
 					}) => {
 						let goods = data.info;
 						this.dataList = goods.bastList; //精品推荐
 						this.carouselList = data.banner;
 					})
 					.catch(e => {});
 			},
 			goDetails(e) {
 				console.log(e, '123456');
 				uni.navigateTo({
 					url: '/pages/index/messageInfo'
 				});
 			},
 			nav(url) {
 				uni.navigateTo({
 					url,
 					fail() {
 						uni.switchTab({
 							url
 						});
 					}
 				});
 			},
 			//轮播图切换修改背景色
 			swiperChange(e) {
 				const index = e.detail.current;
 				this.swiperCurrent = index;
 				this.titleNViewBackground = this.carouselList[index].background;
 			},
 			// 點擊搜索框
 			clickSearch() {
 				uni.navigateTo({
 					url: '/pages/product/search'
 				});
 			},

 			//详情页
 			navToDetailPage(item) {
 				let id = item.id;
 				uni.navigateTo({
 					url: '/pages/product/product?id=' + id
 				});
 			},
 			getProList() {
 				let obj = this
 				if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
 					return
 				}
 				obj.loadingType = 'loading'
 				getProducts({
 					page: obj.page,
 					limit: obj.limit
 				}).then(res => {
 					obj.goodList = obj.goodList.concat(res.data)
 					obj.page++
 					if (obj.limit == res.data.length) {
 						obj.loadingType = 'more'
 					} else {
 						obj.loadingType = 'noMore'
 					}
 				})
 			}
 		}
 	};
 </script>

 <style lang="scss">
 	page,
 	.center {
 		min-height: 100%;
 		height: auto;
 		background: #ededed;
 	}

 	// 顶部搜索
 	.top-search {
 		height: 80rpx;
 		padding: 0 20rpx;
 		background-color: #fff;

 		.top-logo {
 			width: 50rpx;
 			// height: 50rpx;
 			margin-right: 10rpx;

 			image {
 				width: 50rpx;
 				// height: 50rpx;
 			}

 		}

 		.search-box {
 			justify-content: center;
 			width: 698rpx;
 			height: 60rpx;
 			background: #EEEEEE;
 			// box-shadow: 0px 10rpx 20rpx 0px rgba(4, 114, 69, 0.22);
 			border-radius: 30rpx;

 			.search {
 				width: 34rpx;
 				height: 34rpx;
 			}

 			.search-font {
 				margin-left: 14rpx;
 				font-size: 28rpx;
 				font-family: PingFang SC;
 				font-weight: 500;
 				color: #CBCBCB;
 			}
 		}
 	}

 	// 顶部轮播图
 	.top-swiper {
 		width: 750rpx;
 		height: 360rpx;

 		// margin: 20rpx 0 0;
 		image {
 			width: 750rpx;
 			height: 360rpx;
 		}
 	}

 	.swiper-btm {
 		height: 60rpx;
 		width: 750rpx;
 		background-color: #fff;
 		margin-bottom: 20rpx;
 		font-size: 21rpx;
 		font-weight: 500;
 		color: #333333;

 		.btm-item {
 			flex-grow: 1;
 			justify-content: center;

 			image {
 				width: 25rpx;
 				height: 25rpx;
 				margin-right: 14rpx;
 			}
 		}
 	}

 	.jg {
 		height: 20rpx;
 		background-color: #fff;
 	}

 	.good-list {
 		width: 750rpx;
 		background: linear-gradient(0deg, #FFFFFF, #F8F8F8);
 		padding: 30rpx 0;

 		.good {
 			width: 690rpx;
 			height: 276rpx;
 			background: #FFFFFF;
 			box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
 			border-radius: 10rpx;
 			margin: auto;
 			padding: 20rpx 15rpx;
 			margin-bottom: 20rpx;

 			&:last-of-type {
 				margin-bottom: 0rpx;
 			}

 			.good-img {
 				flex-shrink: 0;
 				width: 236rpx;
 				height: 236rpx;
 				border-radius: 10rpx;
 				margin-right: 22rpx;

 				image {
 					width: 236rpx;
 					height: 236rpx;
 					border-radius: 10rpx;
 				}
 			}

 			.good-info {
 				flex-grow: 1;
 				height: 100%;
 				flex-direction: column;
 				justify-content: space-between;
 				align-items: flex-start;

 				.good-name {
 					font-size: 32rpx;
 					font-weight: bold;
 					padding-top: 10rpx;
 					color: #333333;
 				}

 				.good-price {
 					width: 100%;

 					image {
 						width: 14rpx;
 						margin: 0 6rpx 0 10rpx;
 					}

 					.old-price {
 						.old-left {
 							font-size: 26rpx;
 							font-weight: 500;
 							text-decoration: line-through;
 							color: #999999;
 						}

 						.old-right {
 							font-size: 24rpx;
 							font-weight: bold;
 							color: #B59467;
 						}
 					}

 					.new-price {
 						width: 100%;
 						font-size: 36rpx;
 						font-weight: bold;
 						color: #FF4C4C;
 						justify-content: space-between;

 						.good-tip {
 							display: inline-block;
 							padding: 0 20rpx 0 17rpx;
 							min-width: 160rpx;
 							text-align: center;
 							line-height: 40rpx;
 							background: #303030;
 							font-size: 24rpx;
 							font-weight: 500;
 							color: #F8DABA;
 							border-radius: 10rpx;
 							position: relative;

 							&::before {
 								content: '';
 								display: inline-block;
 								height: 17rpx;
 								width: 17rpx;
 								background-color: #fff;
 								border-radius: 50%;
 								position: absolute;
 								top: 0;
 								bottom: 0;
 								left: -9rpx;
 								margin: auto;
 							}

 							&::after {
 								content: '';
 								display: inline-block;
 								height: 17rpx;
 								width: 17rpx;
 								background-color: #fff;
 								border-radius: 50%;
 								position: absolute;
 								top: 0;
 								bottom: 0;
 								right: -9rpx;
 								margin: auto;
 							}
 						}
 					}
 				}
 			}
 		}

 	}

 	.status_bar {
 		height: var(--status-bar-height);
 		width: 100%;
 		background: #fff;
 	}
 </style>