massage-front/pages/index/index.vue

<template>
	<view class="page">

		<image class="bg" src="@/static/image/home/bg.png"></image>

		<view class="content">
			<!-- 导航栏 -->
			<navbar title="首页" bgColor="transparent" color="#FFFFFF" />
			
			<!-- 搜索栏 -->
			<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 indicatorMode="dot" height="340rpx" keyName="image"></uv-swiper>
			</view>

			
			<!-- 推荐 -> 会员 -->
			<!-- todo: jump to member page -->
			<view v-if="!role" class="card flex recommend-member" @click="$utils.navigateTo('/pages/index/category')" >
				<view class="flex" style="flex: 1;">
					<image class="icon-member" style="" src="@/static/image/home/icon-member.png"></image>
					<text>会员享受专属折扣和优惠活动，会员下单更优惠！</text>
				</view>
				<image class="icon-arrow" src="@/static/image/home/icon-arrow.png"></image>
			</view>

			<!-- 商品列表 -->
			<view class="recommend-product">
				<view class="flex title">
					<text>热销套餐</text>
					<image class="icon-hot" style="" src="@/static/image/home/icon-hot.png"></image>
				</view>
				<productCard v-for="item in list" :data="item" :key="item.id"></productCard>
				<!-- todo: delete -->
				<productCard></productCard>
			</view>

			<!-- 优惠券弹窗 -->
			<couponPopup v-if="riceInfo.isGetCoupon"></couponPopup>

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

		</view>
		
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import couponPopup from "@/components/couponPopup/couponPopup.vue"
	import {
		mapState
	} from 'vuex'

	import productCard from '@/components/product/productCard.vue'

	import mixinsList from '@/mixins/list.js'
	export default {
		mixins: [mixinsList],
		components: {
			productCard,
			couponPopup,
			tabber,
		},
		data() {
			return {
				role: '',
				notice: '',
				bannerList: [
					{
						image: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
					},
					{
						image: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
					},
					{
						image: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
					},
				],
				baseList: [],
				keyword: '',
				mixinsListApi: 'getClassShopPageList',
			}
		},
		computed: {
			...mapState(['riceInfo', 'category'])
		},
		onLoad(query) {
			if (query.shareId) {
				uni.setStorageSync('shareId', query.shareId)
			}
		},
		onShow() {
			// todo: delete test code

			return
			this.getBanner()
			this.getRiceIconList()
			if(uni.getStorageSync('token')){
				this.$store.commit('getRiceInfo')
				this.$store.commit('getUserInfo')
			}
		},
		onPullDownRefresh() {
			return
			this.getBanner()
		},
		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
					}
				})
			},

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

		},
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		min-height: 100vh;
		background-color: $uni-bg-color;

	}
	.bg {
		width: 100%;
		height: 589rpx;
	}

	.content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	// 搜索栏
	.search {
		background-color: $uni-fg-color;
		border-radius: 41rpx;
		padding: 10rpx 0rpx;
		margin: 20rpx 30rpx 0 30rpx;
		display: flex;
		align-items: center;

		/deep/ .uv-search__action {
			color: $uni-text-color;
			padding: 10rpx 18rpx;
		}
	}
	
	// 轮播图
	.swipe {
		overflow: hidden;
		border-radius: 14rpx;
		margin: 14rpx 30rpx 0 30rpx;
	}

	.recommend {
		&-member {
			margin: 27rpx 17rpx 0 17rpx;
			color: $uni-color-light;
			font-size: 28rpx;

			.icon {
				&-member {
					width: 42rpx; 
					height: 38rpx;
					margin-right: 5rpx;
				}
				&-arrow {
					width: 26rpx; 
					height: 26rpx;
				}
			}
		}

		&-product {
			margin: 28rpx 17rpx 0 17rpx;
			
			.title{
				justify-content: flex-start;
				color: #000000;
				font-size: 32rpx;
				font-weight: 700;
				padding-left: 18rpx;
			}

			.icon {
				&-hot {
					width: 22rpx;
					height: 30rpx;
					margin-left: 2rpx;
				}
			}
		}
	}


	.home {

		// 首页-分类菜单
		.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: $uni-color;

					.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: 25%;
					background: white;
					border-radius: 10px;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
					}

					.title {
						background: $uni-color;
						color: white;
						border-radius: 20rpx;
						font-size: 24rpx;
						padding: 5rpx 10rpx;
						margin: 10rpx 0rpx;
						width: 90%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						box-sizing: border-box;
						text-align: center;
					}

					.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>