rice-front/pages/index/index.vue

<template>
	<view class="page">

		<navbar bgColor="#88D259" />

		<view class="bg-color"></view>

		<view class="page-title">
			{{ configList.index_title }}
		</view>

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

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

		<view class="notice">
			<uv-notice-bar fontSize="32rpx" :text="notice"></uv-notice-bar>
		</view>

		<view class="menu">
			<uv-grid :border="false" :col="4" >
				<uv-grid-item v-for="(item,index) in baseList" :key="index" @click="$utils.navigateTo(item.path)">
					<image :src="item.image" mode=""></image>
					<text class="menu-text">{{item.title}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>

		<view class="map">
			{{ configList.index_center_image }}
			<image :src="configList.index_center_image" mode="aspectFill" />
		</view>

		<view class="commodity"
		@click="$utils.navigateTo('/pages/index/category')">
			<view class="box">
				<view class="top">
					<view class="top-text">
						<view>Experience the product</view>
						<view>体验产品 ___ _</view>
					</view>
				</view>
				<view class="centre">
					<view class="boxs"
					:key="index"
					v-for="(item, index) in riceProductList">
						<view class="box-text">
							<view>{{ item.title }}</view>
							<view>{{ item.sku }}</view>
							<text class="text1">{{ item.price }}</text>
							<text class="text2">原价{{ item.oldPrice }}</text>
						</view>
						<view class="box-img">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="commodity"
		@click="$utils.navigateTo('/pages/index/category')">
			<view class="box">
				<view class="top">
					<view class="top-text">
						<view>Conventional product</view>
						<view>常规产品 ___ _</view>
					</view>
				</view>
				<view class="centre">
					<view class="boxs"
					:key="index"
					v-for="(item, index) in commonProductList">
						<view class="box-text">
							<view>{{ item.title }}</view>
							<view>{{ item.sku }}</view>
							<text class="text1">{{ item.price }}</text>
							<text class="text2">原价{{ item.oldPrice }}</text>
						</view>
						<view class="box-img">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="commodity">
			<view class="box">
				<view class="top">
					<view class="top-text">
						<view>News trends</view>
						<view>新闻动态 ___ _</view>
					</view>
					<view class="top1" @click="$utils.navigateTo('/pages_order/home/journalism')">
						更多
					</view>
				</view>
				<view class="centre">
					<view class="boxs"
					:key="index"
					v-for="(item, index) in newList"
					>
						<view class="images">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="box-fone">
							<view>{{ item.title }}</view>
							<view>{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="qr">
			<view class="scan">扫码关注公众号</view>
			<view class="qr-scan">
				<image :src="configList.down_image" mode="aspectFill"></image>
			</view>
			<view class="qr-bottom">
				<view>保存公众号二维码图片</view>
				<view>长按识别公众号</view>
			</view>
		</view>

		<PrivacyAgreementPoup />

		<tabber select="home" />
	</view>
</template>

<script>
	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
	import Position from '@/utils/position.js'
	import tabber from '@/components/base/tabbar.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			tabber,
			PrivacyAgreementPoup,
		},
		data() {
			return {
				area: '长沙',
				notice: '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....',
				bannerList: [],
				baseList: [{
						image: '/static/image/home/0.png',
						title: '关于我们',
						path: '/pages_order/home/introduce',
					},
					{
						image: '/static/image/home/1.png',
						title: '产品介绍',
					},
					{
						image: '/static/image/home/2.png',
						title: '促销活动',
					},
					{
						image: '/static/image/home/3.png',
						title: '商城',
					},
					{
						image: '/static/image/home/4.png',
						title: '邀请好友',
					},
					{
						image: '/static/image/home/5.png',
						title: '新闻中心',
						path: '/pages_order/home/journalism',
					},
					{
						image: '/static/image/home/6.png',
						title: '企业合作',
					},
					{
						image: '/static/image/home/7.png',
						title: '联系我们',
					},
				],
				productList: [],
				keyword: '',
				commonProductList : [],//常规产品
				riceProductList : [],//体验产品
				newList : [],//新闻列表
			}
		},
		computed: {},
		onShow() {
			this.getBanner()
			this.getRiceNoticeList()
			this.getRiceCommonProductList()
			this.getRiceProductList()
			this.getRiceNewsList()
			this.getRiceIconList()
		},
		onPullDownRefresh() {
			this.getBanner()
			this.getRiceNoticeList()
			this.getRiceCommonProductList()
			this.getRiceProductList()
			this.getRiceNewsList()
		},
		methods: {
			// 获取轮播图
			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.content
					}
				})
			},
			// 获取常规产品
			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.newList = res.result.records
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.page {
		position: relative;
		.bg-color {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			height: 550rpx;
			background: linear-gradient(to bottom, #88D259, #88D259, #fff);
		}

		.page-title {
			position: relative;
			margin-left: 30rpx;
			margin-bottom: 30rpx;
		}

		.search {
			position: relative;
			background: #FFFFFF;
			margin: 20rpx;
			border-radius: 41rpx;
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;

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

		.swipe {
			position: relative;
			overflow: hidden;
			border-radius: 20rpx;
			margin: 20rpx;
		}

		.menu {
			margin: 20rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			box-shadow: 0 0 10rpx 10rpx #00000009;

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

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

		.notice {
			margin: 0 20rpx;

			/deep/ .uv-notice-bar {
				background: linear-gradient(to right, #f9edc9, #dfedd6);
				border-radius: 16rpx;
			}

			/deep/ .uv-notice {
				padding: 14rpx 0;
			}

			/deep/ .uv-icon__icon {
				font-size: 36rpx !important;
				color: #000 !important;
			}
		}

		.map {
			margin: 20rpx;
			height: 100rpx;
			border-radius: 16rpx;

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

		.commodity {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20rpx;
			border-radius: 16rpx;
			background-color: #fff;

			.box {
				width: 100%;
				margin: 20rpx;

				.top {
					display: flex;
					border-left: 6rpx solid #A3D250;
					align-items: center;
					justify-content: space-between;

					.top-text {
						margin-left: 20rpx;

						view:nth-child(1) {
							font-size: 24rpx;
							color: #474747;
						}

						view:nth-child(2) {
							font-size: 32rpx;
							color: #A3D250;
							font-weight: 600;
						}
					}

					.top1 {
						font-size: 26rpx;
						color: #fff;
						padding: 10rpx 30rpx;
						background-color: #F6CD59;
						border-radius: 30rpx;
					}
				}

			}

			.centre {
				margin: 40rpx 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.boxs {
					display: flex;
					width: 100%;
					align-items: center;
					justify-content: center;
					margin-top: 10rpx;

					.images {
						width: 180rpx;
						height: 140rpx;
						flex-shrink: 0;
						border-radius: 8rpx;
						overflow: hidden;

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

					.box-fone {
						margin-left: 20rpx;
						flex: 1;
						view:nth-child(1) {
							font-size: 36rpx;
							color: #474747;
						}

						view:nth-child(2) {
							margin-top: 10rpx;
							font-size: 28rpx;
							color: #A2A2A2;
						}
					}

					.box-text,
					.box-img {
						flex: 1;
					}
					
					.box-img{
						height: 220rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}

					.box-text {
						view:nth-child(1) {
							font-size: 32rpx;
							font-weight: 500;
							margin-top: 30rpx;
						}

						view:nth-child(2) {
							font-size: 28rpx;
							color: #CCCCCC;
							margin-bottom: 30rpx;
						}

						.text1 {
							color: red;
							font-size: 68rpx;
						}

						.text2 {
							font-size: 28rpx;
							color: #CCCCCC;
						}

					}

					.box-img {

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

			}
		}

		.qr {
			margin-top: 40rpx;

			.scan {
				text-align: center;
				font-size: 28rpx;
				color: #A2A2A2;
			}

			.qr-scan {
				margin: 20rpx auto;
				width: 400rpx;
				height: 400rpx;

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

			.qr-bottom {
				display: flex;
				font-size: 28rpx;
				color: #A2A2A2;
				justify-content: space-around;

				view {
					border: 2rpx solid #A2A2A2;
					padding: 20rpx;
					border-radius: 45rpx;
				}
			}


		}
	}
</style>