submitImg.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <view class="task-form-item form-item-media">
  3. <view class="form-lable">
  4. <text><text class="form-must" v-if="rule && rule.required">* </text>照片:</text>
  5. <text class="form-media-num">({{photos_list.length}}/{{num}})</text>
  6. </view>
  7. <view class="form-img-video">
  8. <view @click.stop="selectImg()" class="updata-btn img-video-item"
  9. v-if="(!photos_list || photos_list.length < num) && !checkPage">
  10. <text class="iconfont_yige">&#xe6aa;</text>
  11. <text>请上传照片</text>
  12. </view>
  13. <template v-if="photos_list && photos_list.length > 0">
  14. <view class="img-video-box img-video-item" v-for="(item , index) in photos_list"
  15. @click.stop="onBigImg(index)">
  16. <view class="del-img-video iconfont_yige" @click.stop="delphotos(index)" v-if="!checkPage">&#xe867;
  17. </view>
  18. <image class="img-video" :src="item" mode="aspectFit"></image>
  19. </view>
  20. </template>
  21. </view>
  22. <uni-popup ref="submitImgyRef" maskBg="rgba(0, 0, 0,.4)">
  23. <view class="submitImg-look">
  24. <swiper class="swiper" :current="lookIndex">
  25. <swiper-item v-for="(item,index) in photos_list">
  26. <view class="swiper-item">
  27. <image :src="item" mode="aspectFit"></image>
  28. </view>
  29. </swiper-item>
  30. </swiper>
  31. </view>
  32. </uni-popup>
  33. </view>
  34. </template>
  35. <script>
  36. import {
  37. uploadImage
  38. } from "@/utils/tool.js"
  39. export default {
  40. name: 'submitImg',
  41. model: {
  42. prop: ['photos'],
  43. event: ['onChange']
  44. },
  45. props: {
  46. checkPage: {
  47. type: Boolean,
  48. default: false
  49. },
  50. num: {
  51. type: Number,
  52. default: 3
  53. },
  54. rule: {
  55. type: Object,
  56. default: null
  57. },
  58. photos: {
  59. type: Array,
  60. default: () => {
  61. return []
  62. }
  63. }
  64. },
  65. data() {
  66. return {
  67. photos_list: [],
  68. lookIndex: 0,
  69. }
  70. },
  71. methods: {
  72. // 删除
  73. delphotos(index) {
  74. this.photos_list.splice(index, 1);
  75. },
  76. selectImg() {
  77. const num = this.num - this.photos_list.length;
  78. if (num <= 0) return;
  79. uploadImage(num).then(res => {
  80. this.photos_list = this.photos_list.concat(res || []);
  81. })
  82. },
  83. onBigImg(index) {
  84. this.lookIndex = index;
  85. this.$refs.submitImgyRef.open();
  86. }
  87. },
  88. watch: {
  89. photos: {
  90. handler(newC, oldC) {
  91. this.photos_list = newC || []
  92. },
  93. deep: true,
  94. immediate:true
  95. },
  96. photos_list: {
  97. handler(newC, oldC) {
  98. this.$emit('onChange', newC)
  99. },
  100. deep: true
  101. },
  102. },
  103. created() {
  104. // this.$nextTick(() => {
  105. // this.$refs.submitImgyRef.open()
  106. // })
  107. }
  108. }
  109. </script>
  110. <style lang="scss" scoped>
  111. @import '~./submint.scss';
  112. .submitImg-look {
  113. // width: 100vw;
  114. // height: 100vh;
  115. // background-color: #000;
  116. .swiper {
  117. width: 100vw;
  118. .swiper-item {
  119. width: 100%;
  120. width: 100%;
  121. // background-color: red;
  122. image {
  123. width: 100%;
  124. max-height: 100vh;
  125. }
  126. }
  127. }
  128. }
  129. </style>