upload.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <view class="padding-lr">
  3. <view v-for="(section,i) in mineItems" :key="i">
  4. <u-gap height="15"/>
  5. <view class="cu-card padding radius shadow bg-white">
  6. <text class="text-bold padding-sm"> {{ section.title }} </text>
  7. <htz-image-upload :max="3" v-model="section.files" mediaType="all" @chooseSuccess="chooseSuccess" />
  8. </view>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
  14. export default {
  15. components:{ htzImageUpload },
  16. data() {
  17. return {
  18. mineItems: [
  19. {'index': 0, 'title': '课前', files: []},
  20. // {'index': 1, 'title': '课中', files: []},
  21. // {'index': 2, 'title': '课后', files: []},
  22. ]
  23. };
  24. },
  25. methods: {
  26. chooseSuccess(res){
  27. this.mineItems[0].files.push(res)
  28. },
  29. }
  30. }
  31. </script>
  32. <style lang="scss">
  33. .mine {
  34. width: 100%;
  35. position: absolute;
  36. display: flex;
  37. flex-direction: column;
  38. height: 100%;
  39. .mine-top {
  40. width: 100%;
  41. .mine-bg {
  42. width: 100%;
  43. height: 55vw;
  44. }
  45. }
  46. .mine-content {
  47. position: absolute;
  48. top: 20vw;
  49. width: 90%;
  50. left: 5%;
  51. .mine-card{
  52. display: flex;
  53. flex-direction: column;
  54. justify-content: center;
  55. align-items: center;
  56. .user-card-top {
  57. position: absolute;
  58. top: 0;
  59. left: 0;
  60. align-self: flex-start;
  61. width: 40px;
  62. height: 20px;
  63. }
  64. }
  65. }
  66. }
  67. </style>