teambuy-front/pages/index/index.vue

<template>
	<view class="home">

		<view style="background-color: white;">
			<!-- 导航栏 -->
			<navbar />

			<!-- 搜索栏 -->
			<view class="search">
				<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" @custom="search" @search="search"
					v-model="keyword"></uv-search>
			</view>

			<!-- 轮播图 -->
			<view class="swipe">
				<uv-swiper :list="bannerList" indicator height="320rpx" keyName="image"></uv-swiper>
			</view>

			<!-- 首页-分类菜单 -->
			<view class="home-menu">
				<uv-grid :border="false" :col="5">
					<uv-grid-item v-for="(item,index) in baseList" :key="index" @click="toUrl(item.url)">
						<image :src="item.image" mode="aspectFill"></image>
						<text class="menu-text">{{item.title}}</text>
					</uv-grid-item>
				</uv-grid>
			</view>
		</view>

		<!-- 新人专享 -->
		<view class="new-people">
			<view class="new-perple-top">
				<view class="new-perple-top-left">
					<view class="title">
						新人专享
					</view>
					<view class="descript">
						领199元大礼包
					</view>
				</view>
				<view class="new-perple-top-right">
					<image src="@/static/image/home/view-more.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="new-perple-main">
				<view class="red-packet">
					<image src="@/static/image/home/red-packet.png" mode="widthFix"></image>
				</view>
				<view v-for="item in 4" :key="item" class="activity">
					<image src="@/static/image/home/necklace.png" mode="widthFix"></image>
					<image src="@/static/image/home/exclusive.png" mode="widthFix"></image>
					<view class="product-price">
						￥100
					</view>
				</view>
			</view>
		</view>

		<!-- 视频 -->
		<view class="video-line">
			<view class="line"></view>
			视频
		</view>
		<view class="video-list">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view v-for="item in 10" class="video-item">
					<video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
						@error="videoErrorCallback" :danmu-list="danmuList" controls class="product-video"></video>
				</view>
			</scroll-view>
		</view>

		<!-- 推荐 -->
		<view class="recommend">
			<view class="recommend-title">推荐宝贝</view>
			<view class="recommend-more">更多</view>
		</view>

		<!-- 商品列表 -->
		<view style="position: 20rpx;">
			<productList :list="commonProductList" />
		</view>

		<!-- 全局弹框 -->
		<PrivacyAgreementPoup />

		<!-- 隐私政策、用户协议弹框 -->
		<customerServicePopup ref="customerServicePopup" />

		<!-- tabbar -->
		<tabber select="home" />
		
		<!-- 优惠券弹窗 -->
		<couponPopup v-model="showCouponPopup"></couponPopup>
	</view>
</template>

<script>
	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
	import Position from '@/utils/position.js'
	import tabber from '@/components/base/tabbar.vue'
	import couponPopup from "@/components/couponPopup/couponPopup.vue"
	import {
		mapState
	} from 'vuex'
	import customerServicePopup from '@/components/config/customerServicePopup.vue'
	import productList from '@/components/user/productList.vue'
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins: [mixinsList],
		components: {
			tabber,
			PrivacyAgreementPoup,
			customerServicePopup,
			productList,
			couponPopup
		},
		data() {
			return {
				notice: '',
				bannerList: [],
				baseList: [],
				productList: [],
				keyword: '',
				commonProductList: [], //常规产品
				riceProductList: [], //体验产品
				newList: [], //新闻列表
				mixinsListApi: 'getClassShophomeList',
				showCouponPopup : true
			}
		},
		computed: {},
		onLoad(query) {
			if (query.shareId) {
				uni.setStorageSync('shareId', query.shareId)
			}
		},
		onShow() {
			this.getBanner()
			this.getRiceNoticeList()
			this.getRiceIconList()
			this.getRiceCommonProductList()
		},
		onPullDownRefresh() {
			this.getBanner()
			this.getRiceNoticeList()
		},
		methods: {
			// 搜素
			search() {
				uni.navigateTo({
					url: '/homes/index/category?search=' + this.keyword
				})
				this.keyword = ''
			},

			// 获取轮播图
			getBanner() {
				this.$api('getRiceBanner', res => {
					if (res.code == 200) {
						this.bannerList = res.result
					}
				})
			},

			// 获取公告
			getRiceNoticeList() {
				this.$api('getRiceNoticeList', res => {
					if (res.code == 200) {
						this.notice = res.result.title
					}
				})
			},

			// 获取常规产品
			getRiceCommonProductList() {
				this.$api('getRiceCommonProductList', res => {
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						this.commonProductList = res.result
					}
				})
			},

			// 获取首页体验产品
			getRiceProductList() {
				this.$api('getRiceProductList', res => {
					if (res.code == 200) {
						this.riceProductList = res.result
					}
				})
			},

			// 获取首页新闻列表
			getRiceNewsList() {
				this.$api('getRiceNewsList', res => {
					if (res.code == 200) {
						this.newList = res.result.records
					}
				})
			},

			// 获取首页菜单图标
			getRiceIconList() {
				this.$api('getRiceIconList', res => {
					if (res.code == 200) {
						this.baseList = res.result.slice(0, 5)
					}
				})
			},

			//跳转
			toUrl(url) {
				if (!url) {
					uni.showToast({
						title: '功能暂未开放'
					})
					return
				}

				if (url == '::phone') {
					this.$refs.customerServicePopup.open()
					return
				}

				uni.navigateTo({
					url
				})
			},

			//视频播放错误
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},

			//左右滚动视频
			scroll: function(e) {

			},
		},
	}
</script>

<style scoped lang="scss">
	.home {

		// 搜索栏
		.search {
			border: 1px solid #F0F0F0;
			margin: 20rpx;
			border-radius: 41rpx;
			padding: 10rpx 0rpx;
			display: flex;
			align-items: center;

			/deep/ .uv-search__action {
				background-color: $uni-color;
				color: #FFFFFF;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
			}
		}

		// 轮播图
		.swipe {
			overflow: hidden;
			border-radius: 20rpx;
			margin: 20rpx;
		}

		// 首页-分类菜单
		.home-menu {
			margin: 20rpx;
			border-radius: 20rpx;
			padding: 20rpx 0rpx;
			background-color: #fff;

			image {
				width: 80rpx;
				height: 80rpx;
				margin-top: 10rpx;
			}

			.menu-text {
				font-size: 28rpx;
				margin: 10rpx 0rpx;
			}
		}

		// 新人专享
		.new-people {
			background: white;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.new-perple-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.new-perple-top-left {
					display: flex;
					align-items: center;
					color: #E7474C;

					.title {
						font-size: 40rpx;
						font-weight: bold;
					}

					.descript {
						margin-left: 10rpx;
					}
				}

				.new-perple-top-right {

					image {
						width: 80px;
					}
				}
			}

			.new-perple-main {
				display: flex;

				.red-packet {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 20%;

					image {
						width: 80%;
					}
				}

				.activity {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 20%;
					background: white;
					border-radius: 10px;

					image {
						width: 80%;
					}

					.product-price {
						color: $uni-color;

					}
				}
			}
		}

		// 视频
		.video-line {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background: white;
			font-size: 34rpx;
			.line {
				height: 40rpx;
				width: 10rpx;
				background: $uni-color;
				border-radius: 5rpx;
				margin-right: 10rpx;
			}
		}
		
		.video-list {
			.scroll-view_H {
				white-space: nowrap;
				width: 750rpx;

				.video-item {
					display: inline-block;
					width: 35%;
					border: 1px solid #ccc;

					.product-video {
						width: 100%;
						height: 70px;
					}
				}
			}
		}

		// 推荐
		.recommend {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: white;
			margin: 20rpx 0rpx;
			padding: 20rpx;
			
			.recommend-title {
				font-size: 36rpx;
			}
			
			.recommend-more {
				color: $uni-color;
			}
		}
	}
</style>