<template>
	<view class="container">
		<image class="img" mode="aspectFill" :src="info.image" @click="clickImg(info.image)" />

		<view class="name">{{ info.name }}</view>

		<view class="desc">
			{{ info.descript }}
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getEndorseById } from '@/api/index.js'

// 数据详情
const info = ref({})

onLoad((options) => {
	if (options.id) {
		// 获取数据详情
		getData(options.id)
	}
})

// 获取数据详情
const getData = async (id) => {
	let data = {
		id
	}
	const res = await getEndorseById(data)
	// console.log(res)
	info.value = res.data
}

// 点击图片回调
const clickImg = (e) => {
	uni.previewImage({
		urls: [e]
	})
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 18rpx;
	min-height: 100vh;

	.img {
		margin-top: 20rpx;
		width: 347rpx;
		height: 385rpx;
		border-radius: 12rpx;
	}

	.name {
		margin: 27rpx 0;
		font-size: 32rpx;
		font-weight: bold;
	}

	.desc {
		padding-bottom: 50rpx;
		font-size: 28rpx;
		line-height: 46rpx;
	}
}
</style>
