<template>
	<view class="content">
		<!-- 基于 uni-list 的页面布局 -->
		<uni-list>
			<uni-list-item class="slot-box-item" direction="row" v-for="item in volunteer" :key="item.id" :title="item.title"
				:note="item.user_name + ' '+item.last_modify_date"
				:to="'/pages/服务分类/category/category?id='+item.id+'&title=选择服务分类'">
				<!-- 自定义 header -->
				<view slot="header" class="slot-box-header">
					<image class="slot-image" :src="item.avatar" mode="widthFix"></image>
				</view>
				<!-- 自定义 body -->
				<view slot="body" class="slot-box-body">
					<view class="slot-box-body-name-age-address">
						<text class="slot-box-body-name">{{item.name}}</text>
						<text class="slot-box-body-age-address">{{item.age}}岁{{item.address}}</text>
					</view>
					<view>
						<text class="slot-box-body-group-score"> {{item.group}}  服务分：{{item.score}} </text>
					</view>
					<view>
						<text class="slot-box-body-skill"> {{item.skill}}</text>
					</view>
				</view>
				
				<!-- 自定义 footer-->
				<view slot="footer" class="slot-box-footer">
					<image class="slot-box-footer-image" :src="item.avatar" mode="widthFix"></image>
				</view>
			</uni-list-item>
		</uni-list>
		<!-- 通过 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 {
				volunteer: []
			}
		},

		onLoad() {
			this.getVolunteer()
		},

		methods: {
			getVolunteer() {
				this.volunteer = [{
						'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('========')
			}
		}

	}
</script>

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