<template>
	<view class="content">
		<view class="filter-view">
			<text class="filter-view-xiaoliang" @click="sortByXiaoliang">销量</text>
			<view class="filter-view-view" @click="sortByPrice">
				<text class="filter-view-view-price">价格</text>
				<view class="filter-view-view-view">
					<image class="filter-view-view-view-image" src="../../../static/apiHL.png" mode="scaleToFill"></image>
					<image class="filter-view-view-view-image" src="../../../static/apiHL.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<view v-for="item in servicesList" :key="item.id" @click="navigateToDetail">
			<uni-group mode="card" top="10">
				<view class="serviceList-item">
					<!-- 自定义 header -->
					<view class="slot-box-header">
						<image class="slot-image" :src="item.avatar" mode="scaleToFill"></image>
					</view>
					<!-- 自定义 body -->
					<view class="slot-box-body">
						<text class="slot-box-body-name">{{item.name}}</text>
						<view class="slot-box-body-view1">
							<image class="slot-box-body-image1" src="../../../static/apiHL.png"></image>
							<text class="slot-box-body-name1"> 商家名称{{item.name}} </text>
							<uni-rate class="slot-box-body-rate" :size="12" :readonly="true" :value="2" />
						</view>
						
						<text class="slot-box-body-ontime">12:20-12:21营业</text>
						<view>
							<text class="slot-box-body-price">$88</text>
							<text class="slot-box-body-xiaoliang"> 销量：12</text>
						</view>
						<text class="slot-box-body-intro"> {{item.skill}}</text>
					</view>
				</view>
			</uni-group>
		</view>
		
		
		<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
		<!-- <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> -->
		<uni-load-more :status="loading"></uni-load-more>
		<!-- <text v-else>{{mixinDatacomErrorMessage}}</text> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				servicesList: []
			}
		},

		onLoad() {
			this.getServicesList()
		},

		methods: {
			navigateToDetail: function() {
				uni.navigateTo({
					url:"../prePayOrder/prePayOrder"
				})
			},
			
			getServicesList() {
				this.servicesList = [{
						'id': '1',
						'avatar': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic8.nipic.com%2F20100730%2F5473328_004901129206_2.jpg&refer=http%3A%2F%2Fpic8.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625712522&t=14c2dfef0f49c6fc3937a76d4e8c98c1',
						'name': '张三',
						'age': '55',
						'address': '山东潍坊',
						'group': '所属机构',
						'score': '7.1',
						'skill': '技能1 技能2 技能3 技能4 技能5技能1 技能2 技能3 技能4 技能5',
						'status': '0'
					},
					{
						'id': '2',
						'avatar': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic8.nipic.com%2F20100730%2F5473328_004901129206_2.jpg&refer=http%3A%2F%2Fpic8.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625712522&t=14c2dfef0f49c6fc3937a76d4e8c98c1',
						'name': '张三',
						'age': '55',
						'address': '山东潍坊',
						'group': '所属机构',
						'score': '7.1',
						'skill': '技能1 技能2 技能3 技能4 技能5',
						'status': '0'
					},
					{
						'id': '3',
						'avatar': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic8.nipic.com%2F20100730%2F5473328_004901129206_2.jpg&refer=http%3A%2F%2Fpic8.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625712522&t=14c2dfef0f49c6fc3937a76d4e8c98c1',
						'name': '张三',
						'age': '55',
						'address': '山东潍坊',
						'group': '所属机构',
						'score': '7.1',
						'skill': '技能1 技能2 技能3 技能4 技能5',
						'status': '0'
					},
					{
						'id': '4',
						'avatar': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic8.nipic.com%2F20100730%2F5473328_004901129206_2.jpg&refer=http%3A%2F%2Fpic8.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625712522&t=14c2dfef0f49c6fc3937a76d4e8c98c1',
						'name': '张三',
						'age': '55',
						'address': '山东潍坊',
						'group': '所属机构',
						'score': '7.1',
						'skill': '技能1 技能2 技能3 技能4 技能5',
						'status': '0'
					},
					{
						'id': '5',
						'avatar': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic8.nipic.com%2F20100730%2F5473328_004901129206_2.jpg&refer=http%3A%2F%2Fpic8.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625712522&t=14c2dfef0f49c6fc3937a76d4e8c98c1',
						'name': '张三',
						'age': '55',
						'address': '山东潍坊',
						'group': '所属机构',
						'score': '7.1',
						'skill': '技能1 技能2 技能3 技能4 技能5',
						'status': '0'
					},
					{
						'id': '6',
						'avatar': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic8.nipic.com%2F20100730%2F5473328_004901129206_2.jpg&refer=http%3A%2F%2Fpic8.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625712522&t=14c2dfef0f49c6fc3937a76d4e8c98c1',
						'name': '张三',
						'age': '55',
						'address': '山东潍坊',
						'group': '所属机构',
						'score': '7.1',
						'skill': '技能1 技能2 技能3 技能4 技能5',
						'status': '0'
					}
				]
			},

			//跳转到详情页
			naviToDetail() {
				uni.navigateTo({
					url: '../../index/index'
				})
			},
			
			clickLoadMore(e) {
				console.log('========')
			},
			
			sortByXiaoliang() {
				
			},
			
			sortByPrice() {
				
			}
		}

	}
</script>

<style>
	@import url("servicesList.css");
</style>
