school_represent_detail.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <view class="container">
  3. <image class="img" mode="aspectFill" :src="info.image" @click="clickImg(info.image)" />
  4. <view class="name">{{ info.name }}</view>
  5. <view class="desc">
  6. {{ info.descript }}
  7. </view>
  8. </view>
  9. </template>
  10. <script setup>
  11. import { onLoad } from '@dcloudio/uni-app'
  12. import { ref } from 'vue'
  13. import { getEndorseById } from '@/api/index.js'
  14. // 数据详情
  15. const info = ref({})
  16. onLoad((options) => {
  17. if (options.id) {
  18. // 获取数据详情
  19. getData(options.id)
  20. }
  21. })
  22. // 获取数据详情
  23. const getData = async (id) => {
  24. let data = {
  25. id
  26. }
  27. const res = await getEndorseById(data)
  28. // console.log(res)
  29. info.value = res.data
  30. }
  31. // 点击图片回调
  32. const clickImg = (e) => {
  33. uni.previewImage({
  34. urls: [e]
  35. })
  36. }
  37. </script>
  38. <style lang="scss" scoped>
  39. .container {
  40. display: flex;
  41. flex-direction: column;
  42. align-items: center;
  43. padding: 20rpx 18rpx;
  44. min-height: 100vh;
  45. .img {
  46. margin-top: 20rpx;
  47. width: 347rpx;
  48. height: 385rpx;
  49. border-radius: 12rpx;
  50. }
  51. .name {
  52. margin: 27rpx 0;
  53. font-size: 32rpx;
  54. font-weight: bold;
  55. }
  56. .desc {
  57. padding-bottom: 50rpx;
  58. font-size: 28rpx;
  59. line-height: 46rpx;
  60. }
  61. }
  62. </style>