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">
				<swiper-item>
					<cover-image class="" v-for="(item,index) in advertList" :key="index" :src="item.imgPath"></cover-image>
				</swiper-item>
			</swiper>
		</view>
		<view class="entrance">
			<view class="entrance-col" @click="goToGoodList">
				<view class="entrance-button caizhai">自助采摘</view>
			</view>
			<view class="entrance-col">
				<view class="entrance-button zhongzhi">共享种植</view>
			</view>
			<view class="entrance-col">
				<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;" v-if="liveTelecast">
				<view class="video-title">直播大厅
					<view class="circular">
						<text class="iconfont iconfangxiang"></text>
					</view>
				</view>
				<cover-image class="video-img" :src="liveTelecast.imgUrl"></cover-image>
				<view class="video-name">{{liveTelecast.liveName}}</view>
			</view>
			<view class="video-col" style="margin-left: 11px;" v-if="shortVideo">
				<view class="video-title">短视频推荐
					<view class="circular">
						<text class="iconfont iconfangxiang"></text>
					</view>
				</view>
				<cover-image class="video-img" :src="shortVideo.coverUrl"></cover-image>
				<view class="video-name">{{shortVideo.videoName}}</view>
			</view>
		</view>
		<view class="index-title">
			<view class="title-text">今日特惠</view>
			<view class="title-tip">精品特价，限量抢购</view>
		</view>
		<view class="content-box" style="display: flex;justify-content: space-between;">
			<view class="discount-col" v-for="(item,index) in discountList" :key="index" @click="goToGoodDetails(item)">
				<cover-image class="discount-img" :src="item.imgPath"></cover-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">
			<view class="title-text">猜你喜欢</view>
		</view>
		<scroll-view class="content-box" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
		 @refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="goods-row" v-for="(item,index) in goodsList" :key="index" @click="goToGoodDetails(item)">
				<cover-image class="goods-img" :src="item.imgPath"></cover-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>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const NET = require('../../utils/request')
	const API = require('../../config/api')
	export default {
		data() {
			return {
				liveTelecast: null,
				shortVideo: null,
				advertList: [],
				discountList: [],
				triggered: false,
				goodsList: [],
			}
		},
		onLoad(options) {
			// this.appLoginWx()
			NET.request(API.getAdvert, {}, 'GET').then(res => {
				if (res.code == 0) {
					this.advertList = res.data
				} else {
					uni.showToast({
						title: "获取广告列表失败",
						icon: "none"
					});
				}
			})
			NET.request(API.getLiveTelecast + '/1/1', {}, 'GET').then(res => {
				if (res.code == 0) {
					this.liveTelecast = res.data.list.length ? res.data.list[0] : null
				} else {
					uni.showToast({
						title: "获取直播列表失败",
						icon: "none"
					});
				}
			})
			NET.request(API.getShortVideo + '/1/1', {}, 'GET').then(res => {
				if (res.code == 0) {
					this.shortVideo = res.data.list.length ? res.data.list[0] : null
				} else {
					uni.showToast({
						title: "获取短视频列表失败",
						icon: "none"
					});
				}
			})
			NET.request(API.getPreferentialGoods, {}, 'GET').then(res => {
				if (res.code == 0) {
					this.discountList = res.data
				} else {
					uni.showToast({
						title: "获取今日特惠商品列表失败",
						icon: "none"
					});
				}
			})
			setTimeout(() => {
				this.triggered = true;
			}, 1000)
		},
		methods: {
			//  获取登录权限
			appLoginWx() {
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (res2) => {
									uni.getUserInfo({
										provider: 'weixin',
										success: (info) => { //这里请求接口
											NET.request(API.WxLogin, {
												code: res2.code,
												encryptedData: info.encryptedData,
												iv: info.iv,
												rawData: info.rawData,
												signature: info.signature,
											}, 'POST').then(res3 => {
												if (res.code == 0) {
													uni.setStorage({
														key: 'token',
														data: res3.data.token
													});
												}
											}).catch(res3 => {
												uni.showToast({
													title: "微信登录授权失败",
													icon: "none"
												});
											})
										},
										fail: () => {
											uni.showToast({
												title: "微信登录授权失败",
												icon: "none"
											});
										}
									})
								},
								fail: () => {
									uni.showToast({
										title: "微信登录授权失败",
										icon: "none"
									});
								}
							})

						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: "none"
							});
						}
					}
				});
			},
			//  下拉刷新
			onRefresh() {
				this.getPreferGoodsList()
			},
			//  刷新终止
			onRestore() {
				this.triggered = 'restore'
			},
			//  获取猜你喜欢商品列表
			getPreferGoodsList() {
				NET.request(API.getPreferGoods, {}, 'GET').then(res => {
					if (res.code == 0) {
						this.triggered = false;
						this.goodsList = res.data
					} else {
						uni.showToast({
							title: "获取猜你喜欢商品列表失败",
							icon: "none"
						})
					}
				})
			},
			//  跳转商品列表
			goToGoodList(data) {
				switch (data) {
					case 0:
						uni.navigateTo({
							url: '/pagesGood/goodList?search=' + data
						});
						break;
					default:
						uni.navigateTo({
							url: '/pagesGood/goodList?search=' + data.value
						});
				}
			},
			//  跳转商品详情
			goToGoodDetails(item) {
				uni.navigateTo({
					url: '/pagesGood/goodDetails?goodId=' + item.productId
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		background-size: 128px 124px;
		background-position: center;
		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: #6CA63A;
		}

		.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 #6CA63A;
			padding: 2px 0 2px 5px;
			margin: 15px 12px 8px 12px;

			.title-text {
				height: 16px;
				line-height: 16px;
				font-size: 15px;
				font-family: PingFang SC;
				color: #6CA63A;
			}

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

		.content-box {
			width: calc(100% - 24px);
			margin: 0 12px;

			.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: co;
				}

				.discount-name {
					height: 12px;
					margin: 7px 6px 10px 6px;
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 400;
					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: #6CA63A;
					}

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

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

			.goods-row {
				height: 104px;
				margin-bottom: 12px;
				background: #FFFFFF;
				box-shadow: 0px 2px 19px 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 16px;
					box-sizing: border-box;

					.goods-name {
						height: 30px;
						font-size: 15px;
						font-family: PingFang SC;
						color: #333333;
						line-height: 15px;
						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: 8px 0;
					}

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

						.sale-icon {
							font-size: 12px;
							color: #6CA63A;
						}

						.sale-price {
							font-size: 24px;
							color: #6CA63A;
							margin-right: 6px;
						}

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

		.video-box {
			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: #6BA539;
						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;
				}

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