commentPopup.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <u-popup v-model="isShow" mode="center" border-radius="14" :closeable="true" length="80%" class="commentPopup-wrap">
  3. <view class="popup-con">
  4. <view class="popup-tit">查看评论</view>
  5. <view class="popup-main">
  6. <u-swiper v-if="list.length > 0" :list="list" :autoplay="false" :height="400" class="popup-swiper" @click="clickSwiper"></u-swiper>
  7. <view class="popup-des">{{comments}}</view>
  8. </view>
  9. </view>
  10. </u-popup>
  11. </template>
  12. <script>
  13. export default{
  14. name: 'CommentPopup',
  15. props: {
  16. openPopup: {
  17. type: Boolean,
  18. default: false
  19. },
  20. comments: { // 评论
  21. type: String,
  22. default: ''
  23. },
  24. taskTargetPhotoList: { // 评论图片
  25. type: Array,
  26. default: () => {
  27. return []
  28. }
  29. }
  30. },
  31. data(){
  32. return{
  33. isShow: this.openPopup, // 是否显示弹框
  34. list: this.taskTargetPhotoList, // 评论图片
  35. current: 0 // 幻灯片当前下标
  36. }
  37. },
  38. methods: {
  39. // 查看评论大图
  40. clickSwiper(e){
  41. // 预览图片
  42. uni.previewImage({
  43. current: e,
  44. urls: this.list
  45. })
  46. }
  47. },
  48. watch: {
  49. openPopup(val){
  50. this.isShow = val
  51. },
  52. isShow(val){
  53. if(!val){
  54. this.$emit('close')
  55. }
  56. },
  57. taskTargetPhotoList: {
  58. handler(newV, oldV){
  59. this.list = newV
  60. },
  61. deep: true
  62. }
  63. }
  64. }
  65. </script>
  66. <style lang="scss" scoped>
  67. .commentPopup-wrap{
  68. .popup-con{
  69. padding: 26upx 0 10upx;
  70. .popup-tit{
  71. padding: 10upx 30upx 26upx;
  72. border-bottom: 1upx solid #f8f8f8;
  73. }
  74. .popup-main{
  75. .popup-swiper{
  76. margin: 20upx 30upx 0;
  77. }
  78. .popup-des{
  79. padding: 20upx 30upx;
  80. word-break: break-word;
  81. }
  82. }
  83. }
  84. }
  85. </style>