qjd-user-uniapp/pages/index/index.vue

<template>
	<view class="container">
		<view class="search">
			<uni-search-bar radius="100" placeholder="搜索" clearButton="auto" cancelButton="none" bgColor="#ffffff" @confirm="goToGoodList" />
		</view>
		<view>
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" :style="{height: swiperHeight + 'px'}">
				<swiper-item v-for="(item,index) in advertList" :key="index">
					<image :src="item.imgPath" mode="aspectFill" :style="{height: swiperHeight + 'px', width: swiperHeight * 2 + 'px'}"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="entrance">
			<view class="entrance-col" @click="goToGoodList(null, 3)">
				<view class="entrance-button caizhai">自助采摘</view>
			</view>
			<view class="entrance-col" @click="goToGoodList(null, 4)">
				<view class="entrance-button zhongzhi">共享种植</view>
			</view>
			<view class="entrance-col" @click="goToGoodList(null, 2)">
				<view class="entrance-button paimai">拍 卖</view>
			</view>
		</view>
		<view class="index-title">
			<view class="title-text">精品推荐</view>
			<view class="title-tip">直播带货，视频推荐</view>
		</view>
		<view class="content-box video-box">
			<view class="video-col" style="margin-right: 11px;" @click="goToLiveList(1)">
				<view class="video-title">直播大厅
					<view class="circular">
						<text class="iconfont iconfangxiang"></text>
					</view>
				</view>
				<view v-if="!liveTelecast.imgUrl">暂无直播</view>
				<image class="video-img" :style="{height: (swiperHeight-30-12)+'px'}" :src="liveTelecast.imgUrl" v-if="liveTelecast"
				 mode="aspectFill"></image>
				<view class="video-name" v-if="liveTelecast">{{liveTelecast.liveName}}</view>
			</view>
			<view class="video-col" style="margin-left: 11px;" @click="goToLiveList(2)">
				<view class="video-title">短视频推荐
					<view class="circular">
						<text class="iconfont iconfangxiang"></text>
					</view>
				</view>
				<view v-if="!shortVideo.coverUrl">暂无短视频</view>
				<image class="video-img" :style="{height: (swiperHeight-30-12)+'px'}" :src="shortVideo.coverUrl" mode="aspectFill"
				 v-if="shortVideo"></image>
				<view class="video-name" v-if="shortVideo">{{shortVideo.videoName}}</view>
			</view>
		</view>
		<view class="index-title">
			<view class="title-text" @click="goToGoodList(null, 5)">今日特惠
				<view class="circular">
					<text class="iconfont iconfangxiang"></text>
				</view>
			</view>
			<view class="title-tip">精品特价，限量抢购</view>
		</view>
		<view class="content-box" style="width: calc(100% - 24px);margin-left: 12px; display: flex;justify-content: space-between;">
			<view v-if="!discountList.length">暂无商品</view>
			<view v-if="discountList.length" class="discount-col" v-for="(item,index) in discountList" :key="index" @click="goToGoodDetails(item)">
				<image class="discount-img" :src="item.imgPath" mode="aspectFill" :style="{width: '100%', height: ((swiperHeight-18)*44/34)+'px'}"></image>
				<view class="discount-name">{{item.productName}}</view>
				<view class="discount-price">
					<text class="sale-icon">￥</text>
					<text class="sale-price">{{item.bizPrice}}</text>
					<text class="price">原价:{{item.originalPrice}}</text>
				</view>
			</view>
		</view>
		<view class="index-title" style="margin-bottom: 4px;">
			<view class="title-text">猜你喜欢</view>
		</view>
		<view v-if="!goodsList.length" style="margin-left: 12px;">暂无商品</view>
		<scroll-view v-if="goodsList.length" class="content-box" :scroll-y="false">
			<view class="goods-row" v-for="(item,index) in goodsList" :key="index" @click="goToGoodDetails(item)">
				<image class="goods-img" :src="item.imgPath" mode="aspectFill"></image>
				<view class="goods-info">
					<view class="goods-name">{{item.productName}}</view>
					<view class="goods-number">{{item.sellCount}}人付款</view>
					<text class="goods-price">
						<text class="sale-icon">￥</text>
						<text class="sale-price">{{item.bizPrice}}</text>
						<text class="price">原价:{{item.originalPrice}}</text>
						<text class="iconfont icongengduo"></text>
					</text>
				</view>
			</view>
		</scroll-view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('../../utils/request')
	const API = require('../../config/api')
	export default {
		data() {
			return {
				liveTelecast: {},
				shortVideo: {},
				advertList: [],
				discountList: [],
				goodsList: [],
				swiperHeight: 175
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowWidth / 2
				}
			})
			if (!uni.getStorageSync('token')) {
				uni.reLaunch({
					url: '/pages/index/login'
				});
			}
			// this.getBaseInfo()
			// this.getPreferGoodsList()
		},
		onShow() {
			this.getBaseInfo()
			this.getPreferGoodsList()
		},
		onPullDownRefresh() {
			this.getPreferGoodsList()
			this.getBaseInfo()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500)
		},
		methods: {
			//  查询数据
			getBaseInfo() {
				NET.request(API.getAdvert, {}, 'GET').then(res => {
					this.advertList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取广告列表失败',
						type: 'warning',
					})
				})
				NET.request(API.getLiveTelecast + '/1/1', {}, 'GET').then(res => {
					this.liveTelecast = res.data.list.length ? res.data.list[0] : null
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取直播列表失败',
						type: 'warning',
					})
				})
				NET.request(API.getShortVideo + '/1/1', {}, 'GET').then(res => {
					this.shortVideo = res.data.list.length ? res.data.list[0] : null
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取短视频列表失败',
						type: 'warning',
					})
				})
				NET.request(API.getPreferentialGoods + '/1/2', {}, 'GET').then(res => {
					this.discountList = res.data.list
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取今日特惠商品列表失败',
						type: 'warning',
					})
				})
			},
			//  获取猜你喜欢商品列表
			getPreferGoodsList() {
				NET.request(API.getPreferGoods, {}, 'GET').then(res => {
					this.goodsList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取猜你喜欢商品列表失败',
						type: 'warning',
					})
				})
			},
			//  跳转商品列表
			goToGoodList(data, type) {
				uni.navigateTo({
					url: '/pagesGood/goodList?goodType=' + (type ? type : (1 + '&goodName=' + data.value))
				});
			},
			//  跳转直播大厅
			goToLiveList(type) {
				uni.navigateTo({
					url: '/pagesGood/videoList?videoType=' + type
				});
			},
			//  跳转商品详情
			goToGoodDetails(item) {
				uni.navigateTo({
					url: '/pagesGood/goodDetails?goodId=' + item.productId + '&goodType=' + item.productType
				});
			}
		}
	}
</script>
<style scoped>
	.search .uni-searchbar {
		background-color: transparent !important;
	}
</style>
<style lang="less" scoped>
	.container {
		background-size: 128px 124px;
		background-position: center 510px;
		background-repeat: no-repeat;
		background-image: url(@/static/images/indexBg.png);

		.search {
			width: 100%;
			position: absolute;
			z-index: 10;

			.uni-searchbar {
				background-color: transparent;
			}
		}

		.swiper {
			height: 175px;
			background-color: #56a83a;
			position: relative;
			z-index: -1;
		}

		.entrance {
			width: calc(100% - 24px);
			height: 100px;
			margin-top: -16px;
			margin-left: 12px;
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			border-radius: 15px;
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);

			.entrance-col {
				width: 96px;
				height: 72px;
				margin-top: 15px;
				background-size: 96px 56px;
				background-position: center 10px;
				background-repeat: no-repeat;
				background-image: url(@/static/images/entrance.png);

				.entrance-button {
					width: 96px;
					height: 72px;
					padding-top: 60px;
					box-sizing: border-box;
					text-align: center;
					font-size: 15px;
					font-family: PingFang SC;
					color: #52A63A;
					line-height: 12px;
					background-size: 50px;
					background-position: center top;
					background-repeat: no-repeat;
				}

				.caizhai {
					background-image: url(@/static/images/caizhai.png);
				}

				.zhongzhi {
					background-image: url(@/static/images/zhongzhi.png);
				}

				.paimai {
					background-image: url(@/static/images/paimai.png);
				}
			}
		}

		.index-title {
			width: calc(100% - 24px);
			border-left: 1px solid #56a83a;
			padding: 2px 0 2px 5px;
			margin: 15px 12px 10px 12px;

			.title-text {
				height: 20px;
				margin-bottom: 2px;
				line-height: 16px;
				font-size: 15px;
				font-family: PingFang SC;
				color: #56a83a;

				.circular {
					width: 16px;
					height: 16px;
					background-color: #56a83a;
					border-radius: 50%;
					margin-left: 6px;
					text-align: right;
					display: inline-grid;

					.iconfont {
						font-size: 14px;
						color: #FFFFFF;
						font-weight: bold;
					}
				}
			}

			.title-tip {
				height: 14px;
				line-height: 14px;
				font-size: 12px;
				font-family: PingFang SC;
				color: #666666;
			}
		}

		.content-box {
			width: 100%;

			.discount-col {
				width: calc(50% - 6px);
				background: #FFFFFF;
				box-shadow: 1px 2px 19px 0px rgba(0, 0, 0, 0.09);
				border-radius: 5px;
				padding-bottom: 10px;
				overflow: hidden;

				.discount-img {
					height: 170px;
					object-fit: cover;
				}

				.discount-name {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					height: 14px;
					margin: 7px 6px 10px 6px;
					font-size: 12px;
					font-family: PingFang SC;
					color: #343434;
					line-height: 14px;
				}

				.discount-price {
					width: calc(100% - 12px);
					margin-left: 6px;
					height: 18px;
					line-height: 18px;
					font-family: PingFang SC;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;

					.sale-icon {
						font-size: 12px;
						color: #56a83a;
					}

					.sale-price {
						font-size: 18px;
						color: #56a83a;
						margin-right: 5px;
					}

					.price {
						font-size: 10px;
						text-decoration: line-through;
						color: #A67954;
					}
				}
			}

			.goods-row {
				width: calc(100% - 24px);
				height: 104px;
				margin: 6px 0 12px 12px;
				background: #FFFFFF;
				box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.09);
				border-radius: 5px;
				overflow: hidden;
				display: flex;

				.goods-img {
					width: 104px;
					height: 104px;
					object-fit: cover;
				}

				.goods-info {
					width: calc(100% - 104px);
					padding: 10px 10px 10px 12px;
					box-sizing: border-box;

					.goods-name {
						height: 36px;
						font-size: 15px;
						font-family: PingFang SC;
						color: #333333;
						line-height: 18px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
					}

					.goods-number {
						height: 16px;
						font-size: 12px;
						font-family: PingFang SC;
						color: #666666;
						line-height: 16px;
						margin: 6px 0 4px 0;
					}

					.goods-price {
						height: 24px;
						line-height: 24px;
						font-family: PingFang SC;

						.sale-icon {
							font-size: 12px;
							color: #56a83a;
							margin-left: -2px;
						}

						.sale-price {
							font-size: 22px;
							color: #56a83a;
							margin-right: 6px;
						}

						.price {
							font-size: 12px;
							text-decoration: line-through;
							color: #A67954;
						}

						.iconfont {
							float: right;
							color: #999999;
							font-size: 32px;
							line-height: 28px;
						}
					}
				}
			}
		}

		.video-box {
			width: calc(100% - 24px);
			margin-left: 12px;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 1px 2px 19px 0px rgba(0, 0, 0, 0.09);
			border-radius: 5px;
			padding: 15px 15px 12px 15px;
			display: flex;

			.video-col {
				width: calc(50% - 11px);

				.video-title {
					height: 16px;
					line-height: 16px;
					margin-bottom: 8px;
					font-size: 15px;
					font-family: PingFang SC;
					color: #343434;
					white-space: nowrap;

					.circular {
						width: 16px;
						height: 16px;
						background-color: #56a83a;
						border-radius: 50%;
						margin-left: 6px;
						text-align: right;
						display: inline-grid;

						.iconfont {
							font-size: 14px;
							color: #FFFFFF;
							font-weight: bold;
						}
					}
				}

				.video-img {
					width: 100%;
					height: 145px;
					object-fit: cover;
					border-radius: 5px;
				}

				.video-name {
					height: 16px;
					margin-top: 10px;
					line-height: 16px;
					text-align: center;
					font-size: 15px;
					font-family: PingFang SC;
					color: #343434;
				}
			}
		}
	}
</style>