<template>
	<view class='page'>

		<view class='top'>
			<u-navbar :placeholder="true" bgColor="#fdb62a">
				<view slot="left" class="flex align-center">
					<u-icon name="map-fill" color="#000" size="19"></u-icon>
					<text class="fs-30 u-line-1" style="margin:0 5rpx;width: 100rpx;">北京</text>

				</view>
				<view slot="center">
					<u--text text="首页" size="20"></u--text>
				</view>
				<view slot="right"
					style="position: relative;width: 60rpx;height: 60rpx;display: flex;justify-content: center;">
					<u-icon name="/static/home/icon_home_xx.png" size="25"></u-icon>
					<u-badge max="99" :absolute="true" :offset="[0,0]" :value="1"></u-badge>

				</view>
			</u-navbar>

		</view>
		<view class='top-search'>
			<u-search placeholder="搜索" :showAction="false" :disabled='true' bgColor="#fff" height="45"></u-search>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y">


			<view style="margin: 20rpx;">
				<u-swiper :list="swiperList" height="146"></u-swiper>
			</view>
			<!-- 厂家入选区 -->
			<view class="cjq">
				<u-cell size="large" title="厂家入选区" value="查看全部" isLink :border="false"></u-cell>
				<view style="padding:0 20rpx 20rpx 20rpx;">
					<u-grid :border="false" col="3">
						<u-grid-item v-for="(listItem,listIndex) in cqList" :key="listIndex">
							<view class="cj">
								<image
									style="width: 100%; height: 110px;background-color: aqua;border-radius:10rpx 10rpx 0 0;"
									:src="listItem.url"></image>
								<view style="padding: 10rpx;">
									<u--text :text="listItem.title" size="12" color="#000000" lines="2"></u--text>
									<view style="display: flex;">
										<u--text mode="price" :text="listItem.price" size="14"
											color="#FE2C24"></u--text>
										<u--text mode="price" :text="listItem.oldPrice" size="12" color="#999999"
											decoration="line-through"></u--text>

									</view>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<!-- 医院专区 -->
			<view class="cjq">
				<u-cell size="large" title="医院专区" value="查看全部" isLink :border="false"></u-cell>
				<view style="padding:0 20rpx 20rpx 20rpx;">
					<u-grid :border="false" col="3">
						<u-grid-item v-for="(listItem,listIndex) in cqList" :key="listIndex">
							<view class="cj">
								<image
									style="width: 100%; height: 110px;background-color: aqua;border-radius:10rpx 10rpx 0 0;"
									:src="listItem.url"></image>
								<view style="padding: 10rpx;">
									<u--text :text="listItem.title" size="12" color="#000000" lines="2"></u--text>
									<view style="display: flex;">
										<u--text mode="price" :text="listItem.price" size="14"
											color="#FE2C24"></u--text>
										<u--text mode="price" :text="listItem.oldPrice" size="12" color="#999999"
											decoration="line-through"></u--text>

									</view>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<!-- 筛选 -->
			<view style="display: flex;padding:20rpx 0;" class="flex-between-center">
				<view style="display: flex;flex: 1; justify-content: center;align-items: center;">
					<u-icon index="1" :labelColor="labelColorOne==true?'#FE2C24':'#000000'" size="14" label="综合排序"
						labelPos="left" @click="clickOne"></u-icon>
				</view>
				<view style="display: flex;flex: 1; justify-content: center;">
					<u-icon index="2" :name="iconTwo" width="8" :labelColor="labelColorTwo==true?'#FE2C24':'#000000'"
						size="14" label="销量" labelPos="left" @click="clickTwo"></u-icon>
				</view>
				<view style="display: flex;flex: 1; justify-content: center;">
					<u-icon index="3" :name="iconThree" width="8"
						:labelColor="labelColorThree==true?'#FE2C24':'#000000'" size="14" label="价格" labelPos="left"
						@click="clickThree"></u-icon>
				</view>

			</view>
			<view>
				<u-list @scrolltolower="scrolltolower" style="background-color:#f5f5f5;">
					<u-list-item v-for="(item, index) in list" :key="index">
						<view class="goods">
							<u--image :src="item.url" width="100" height="100" radius="8"></u--image>
							<view style="padding:0 10rpx;display: flex;flex-direction: column;">
								<u--text :text="item.title" size="12" color="#000000" lines="2"
									style="align-items: baseline;"></u--text>
								<text
									style="font-size: 20rpx;color: #999999;margin-bottom: 10rpx;">销量:{{item.price}}</text>
								<view style="display: flex;">
									<u--text style="flex: 0;" mode="price" :text="item.price" size="14"
										color="#FE2C24"></u--text>
									<u--text style="flex: 0;" mode="price" :text="item.oldPrice" size="12"
										color="#999999" decoration="line-through"></u--text>
								</view>
							</view>
						</view>

					</u-list-item>
				</u-list>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelColorOne: true,
				labelColorTwo: false,
				labelColorThree: false,
				iconTwo: '/static/icon_sx_cg.png',
				iconThree: '/static/icon_sx_cg.png',
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				cqList: [{
						price: '100',
						oldPrice: '200',
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌'
					},
					{
						price: '100',
						oldPrice: '200',
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '创意桌面石狮子一对茶桌'
					},
					{
						price: '100',
						oldPrice: '200',
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '创意桌面石狮子一对茶桌'
					}
				],
				list: [{
						price: '100',
						oldPrice: '200',
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌'
					},
					{
						price: '100',
						oldPrice: '200',
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌'
					},
					{
						price: '100',
						oldPrice: '200',
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌'
					},
					{
						price: '100',
						oldPrice: '200',
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌'
					},
					{
						price: '100',
						oldPrice: '200',
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌创意桌面石狮子一对茶桌'
					},
				]

			};
		},
		onLoad() {

		},
		methods: {
			clickOne(e) {
				//console.log()
				this.labelColorOne = true
				this.labelColorTwo = false
				this.labelColorThree = false
				this.iconTwo = '/static/icon_sx_cg.png'
				this.iconThree = '/static/icon_sx_cg.png'
			},
			clickTwo(e) {
				this.labelColorOne = false
				this.labelColorTwo = true
				this.labelColorThree = false
				this.iconThree = '/static/icon_sx_cg.png'
				if (this.iconTwo == '/static/icon_sx_x.png') {
					this.iconTwo = '/static/icon_sx_s.png'
				} else {
					this.iconTwo = '/static/icon_sx_x.png'
				}
			},
			clickThree(e) {
				this.labelColorOne = false
				this.labelColorTwo = false
				this.labelColorThree = true
				this.iconTwo = '/static/icon_sx_cg.png'
				if (this.iconThree == '/static/icon_sx_x.png') {
					this.iconThree = '/static/icon_sx_s.png'
				} else {
					this.iconThree = '/static/icon_sx_x.png'
				}
			}

		},
	};
</script>

<style scoped>
	.page {
		width: 100%;
		height: 100%;
		background: #f5f5f5;
		background-color: ;
	}

	.top {
		background-color: #fdb62a;
		height: 245rpx;
	}

	.top-search {
		margin-top: -40rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.cjq {
		height: 240px;
		background: linear-gradient(180deg, #ffffff, #ffffff 19%, #f5f5f5);
		border-radius: 22px 22px 0px 0px;
	}

	.cj {
		background: #ffffff;
		border-radius: 8px;
		margin: 0 10rpx;
	}

	.goods {
		background: #ffffff;
		border-radius: 15px;
		margin: 10rpx;
		display: flex;
		padding: 20rpx;
	}
</style>