WenWuGuanJia/index_fenbao/fuWu/paiMing/xiangQing.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="个人信息" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view style="width: 92%; margin: auto" v-if="swiperList.length > 0">
			<u-swiper
				:list="swiperList"
				imgMode="aspectFill"
				:height="160"
				:indicator="true"
				radius="5"
				:autoplay="true"
				keyName="image"
				@click="swiperBtn"
				showTitle
				:circular="true"
				indicatorStyle="bottom: 10px"
				indicatorMode="dot"
				indicatorActiveColor="#fff"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
			></u-swiper>
		</view>
		<view class="ban_box">
			<view class="item">
				<view class="">
					<image style="width: 190rpx; height: 250rpx" src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/toux.png"></image>
				</view>
				<view style="margin-left: 30rpx">
					<view class="">姓名：{{ detailsList.name }}</view>
					<!-- <view class="">性别：{{ detailsList.sex_text ? detailsList.sex_text : '暂未填写' }}</view> -->
					<view class="">年龄：{{ detailsList.age ? detailsList.age : '暂未填写' }}</view>
					<view class="">联系方式：{{ detailsList.mobile }}</view>
					<view class="">所在地：{{ detailsList.address }}</view>
				</view>
			</view>
			<view class="">
				认领的文物：
				<text v-for="item in cr_list" :key="item.id">{{ item.title }}、</text>
			</view>
			<view class="">巡查次数：{{ detailsList.patrolNum }}</view>
			<view class="">巡查完成率：{{ detailsList.completion_rate }}</view>
			<view class="">月度积分：{{ detailsList.monthScore }}</view>
			<view class="">年度积分：{{ detailsList.yearScore }}</view>
			<view class="">加入时间：{{ detailsList.created_at }}</view>
			<view class="">身份证：{{ detailsList.id_card }}</view>
			<view style="height: 500rpx; overflow: scroll">个人简介：{{ detailsList.intro || '暂无介绍' }}</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			cr_list: [],
			volunteer_id: '',
			detailsList: {},
			swiperList: ['https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/zyz_gr.png', 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/gj_zyjz.jpg']
		};
	},
	onLoad(o) {
		that = this;
		this.volunteer_id = o.id;
		this.details(o.id);
	},
	methods: {
		// 志愿者列表详情
		details(id) {
			this.$api.details({ main_body_id: 1, volunteer_id: id }, function (res) {
				// console.log(res, '列表的详情');
				if (res.code === 1) {
					that.detailsList = res.data;
					that.cr_list = res.data.cr_list.filter((item) => item.status != 0);
					const filteredList = that.cr_list.filter((item) => item.image !== 'https://meng.wenlvti.net' && item.image !== 'http://cdnwwgj.wenlvti.net');

					if (filteredList.length > 0) {
						that.swiperList = filteredList;
					}
				} else {
					that.$common.errorToShow('请稍后再试');
				}
			});
		},
		swiperBtn(i) {
			uni.navigateTo({
				url: '/index_fenbao/GuanLi/XiangQing?id=' + this.swiperList[i].id
			});
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-size: 100% 100%;
	background-repeat: repeat-y;
}
.ban_box {
	width: 90%;
	margin: auto;
	color: #90523c;
	font-size: 30rpx;
	line-height: 50rpx;
	font-weight: 600;
}
.item {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 125rpx;
	margin-top: 50rpx;
	margin-bottom: 20rpx;
	font-size: 32rpx;
	font-family: Songti SC, Songti SC;
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
}
</style>