teambuy-front/pages/index/index.vue

<template>
	<view class="page">

		<navbar />

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

		<view class="page-title">
			<!-- {{ configList.index_title }} -->
			<!-- <image src="/static/image/home/logo.png" 
			style="width: 240rpx;"
			mode="widthFix"></image> -->
			
			<!-- <image :src="configList.index_img"
			style="width: 240rpx;"
			mode="widthFix"></image> -->
		</view>

		<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="notice">
			<uv-notice-bar fontSize="32rpx" 
			@click="$utils.navigateTo('/pages_order/home/notice')"
			: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="toUrl(item.url)">
					<image :src="item.image" mode="aspectFill"></image>
					<text class="menu-text">{{item.title}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>

		<view class="map"
		v-if="configList.qd_image">
			<image :src="configList.qd_image" mode="widthFix" />
		</view>

		<view class="label">
			<text>推荐宝贝</text>
		</view>

		<view style="position: 20rpx;">
			<productList :list="list"/>
		</view>
		
		<PrivacyAgreementPoup />
		
		<customerServicePopup ref="customerServicePopup"/>

		<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 { 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,
		},
		data() {
			return {
				notice: '',
				bannerList: [],
				baseList: [
				],
				productList: [],
				keyword: '',
				commonProductList : [],//常规产品
				riceProductList : [],//体验产品
				newList : [],//新闻列表
				mixinsListApi : 'getClassShopPageList',
			}
		},
		computed: {},
		onLoad(query) {
			if (query.shareId) {
				uni.setStorageSync('shareId', query.shareId)
			}
		},
		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: {
			// 搜素
			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
					}
				})
			},
			// 获取常规产品
			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
					}
				})
			},
			toUrl(url){
				if(!url){
					uni.showToast({
						title: '功能暂未开放'
					})
					return
				}
				
				if(url == '::phone'){
					this.$refs.customerServicePopup.open()
					return
				}
				
				uni.navigateTo({
					url
				})
			},
			saveImage(image){
				/* 获取图片的信息 */
				uni.getImageInfo({
					src: image,
					success: function(image) {
						/* 保存图片到手机相册 */
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								uni.showModal({
									title: '保存成功',
									content: '图片已成功保存到相册',
									showCancel: false
								});
							},
							complete(res) {
								console.log(res);
							}
						});
					}
				});
			},
		},
	}
</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, #E3441A, #E3441A, #fff);
		}

		.page-title {
			position: relative;
			margin-left: 30rpx;
			// margin-bottom: 30rpx;
			font-size: 34rpx;
			font-weight: 900;
		}

		.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;
			border-radius: 16rpx;

			image {
				width: 100%;
			}
		}
		
		.label{
			margin: 20rpx 0;
			padding: 30rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			text{
				font-weight: 900;
			}
			.more{
				color: $uni-color;
			}
		}

		.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: 20rpx;
					background-color: #f9f9f9;
					border-radius: 20rpx;
					padding: 20rpx;

					.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: #f40;
							font-size: 58rpx;
						}

						.text2 {
							font-size: 28rpx;
							color: #999;
						}
						
						
						.text3 {
							color: #f40;
							font-size: 28rpx;
							text{
								font-size: 30rpx;
								font-weight: 900;
							}
						}
						
						.text4 {
							font-size: 26rpx;
							color: #999;
						}

					}

					.box-img {

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

			}
		}

	}
</style>