<template>
	<view class="videoShopTour-wrap">
		<u-sticky>
			<!-- 搜索方式 -->
			<u-grid :col="2" class="search-type-con" hover-class="none">
				<u-grid-item class="search-module" @click="goSearch">
					<u-icon class="search-icon" name="xundianguanli" custom-prefix="xd-icon" size="80" color="#2b85e4"></u-icon>
					<view class="search-txt">按门店名称查询</view>
				</u-grid-item>
				<u-grid-item class="search-module" @click="goOrgSearch">
					<u-icon class="search-icon" name="zuzhijigou" custom-prefix="xd-icon" size="80" color="#19be6b"></u-icon>
					<view class="search-txt">按组织机构查询</view>
				</u-grid-item>
			</u-grid>
		</u-sticky>
		<!-- 门店列表 -->
		<view class="list-con">
			<view class="list-tit">门店列表</view>
			<!-- 列表数据 -->
			<view class="listData-con">
				<view class="listData-item" v-for="(item, index) in list" :key="index">
					<view class="listData-item-l">
						<u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
						<text class="listData-item-l-name">{{item.name}}</text>
					</view>
					<view class="listData-item-r">
						<u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list: [
					{ name: '常青二路店' },
					{ name: '常青二路店常青青二路店常路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店常青青二路店常路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店常青青二路店常路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
				]
			}
		},
		methods: {
			//  按门店名称查询
			goSearch(){
				uni.navigateTo({
					url: '/pages/searchPage/searchPage'
				})
			},
			//  按组织机构查询
			goOrgSearch(){
				uni.navigateTo({
					url: '/pages/organization/organization'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
		height: calc(100vh - 44px);
	}
	.videoShopTour-wrap{
		// 搜索方式
		.search-type-con{
			.search-module{
				.search-txt{
					font-size: 26upx;
					padding-top: 6upx;
				}
			}
		}
		// 门店列表
		.list-con{
			background-color: #fff;
			margin-top: 20upx;
			.list-tit{
				padding: 20upx 30upx;
				border-bottom: 1upx solid #f8f8f8;
			}
			.listData-con{
				padding: 0 30upx;
				.listData-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20upx 0;
					border-bottom: 1upx dashed #f8f8f8;
					&-l{
						flex-grow: 1;
						padding-right: 10upx;
						position: relative;
						padding-left: 50upx;
						&-icon{
							vertical-align: sub;
							padding-right: 8upx;
							position: absolute;
							left: 0;
							top: -4upx;
						}
					}
					&-r{
						flex-shrink: 0;
					}
				}
			}
		}
	}
</style>
