jewelry-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 category" 
					:key="index" 
					@click="$utils.navigateTo(`/pages/index/category?cid=${item.id}`)">
						<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"
				@click="$utils.navigateTo(`/pages_order/home/introduce`)">
					<image :src="configList.index_model" mode="aspectFill"></image>
				</view>
			</view>
			<view class="new-perple-main">
				
				<view class="red-packet">
					<image src="@/static/image/home/red-packet.png" mode="aspectFill"></image>
				</view>
				
				<view v-for="(item, index) in adList" :key="item.id" 
				v-if="index < 4"
				@click="$utils.navigateTo(`/pages_order/home/notice?id=${item.id}`)" 
				class="activity">
					<image :src="item.icon" mode="aspectFill"></image>
					<view class="title">{{ item.title }}</view>
					<!-- <view class="product-price">
						￥100
					</view> -->
				</view>
			</view>
		</view>

		<!-- 视频 -->
		<view v-if="configList.index_vo" class="video-line">
			<view class="line"></view>
			视频
		</view>
		<view v-if="configList.index_vo" class="video-item">
			<video :src="configList.index_vo" object-fit="cover" @error="videoErrorCallback" :danmu-list="danmuList"
				controls class="product-video"></video>
		</view>

		<!-- 推荐 -->
		<view class="recommend">
			<view class="recommend-title">推荐宝贝</view>
			<view @click="$utils.navigateTo('/pages/index/category')" 
			class="recommend-more">更多</view>
		</view>

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

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

		<!-- 联系客服 -->
		<customerServicePopup ref="customerServicePopup" />

		<!-- tabbar -->
		<tabber select="home" />

		<!-- 优惠券弹窗 -->
		<couponPopup v-if="riceInfo.isGetCoupon"></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: 'getClassShopPageList',
				adList: []
			}
		},
		computed: {
			...mapState(['riceInfo', 'category'])
		},
		onLoad(query) {
			if (query.shareId) {
				uni.setStorageSync('shareId', query.shareId)
			}
		},
		onShow() {
			this.getBanner()
			this.getRiceNoticeList()
			this.getRiceIconList()
			this.getRiceAdList()
			if(uni.getStorageSync('token')){
				this.$store.commit('getRiceInfo')
				this.$store.commit('getUserInfo')
			}
		},
		onPullDownRefresh() {
			this.getBanner()
			this.getRiceNoticeList()
		},
		methods: {
			// 搜素
			search() {
				uni.navigateTo({
					url: '/pages/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
					}
				})
			},

			// 获取首页新闻列表
			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
					}
				})
			},

			//获取首页广告
			getRiceAdList() {
				this.$api('getRiceProductList', res => {
					if (res.code == 200) {
						this.adList = res.result.records
					}
				})
			},

			//跳转
			toUrl(url) {
				if (!url) {
					uni.showToast({
						title: '功能暂未开放',
						icon: 'none'
					})
					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;
						height: 40rpx;
					}
				}
			}

			.new-perple-main {
				display: flex;

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

					image {
						width: 120rpx;
						height: 120rpx;
					}
				}

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

					image {
						width: 100rpx;
						height: 100rpx;
					}

					.title {
						background: $uni-color;
						color: white;
						border-radius: 20rpx;
						font-size: 24rpx;
						padding: 5rpx 20rpx;
						margin: 10rpx 0rpx;
					}

					.product-price {
						color: $uni-color;
						font-size: 24rpx;
					}
				}
			}
		}

		// 视频
		.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-item {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20rpx 0rpx;

			.product-video {
				border-radius: 20rpx;
				width: calc(710rpx);
			}
		}

		// 推荐
		.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>