commentPopup.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  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 :list="list" class="popup-swiper" @click="clickSwiper"></u-swiper>
  7. <view class="popup-des">未按规则着装,上班时间玩手机抽烟等不良影响上班时间玩手机抽烟等不良影响上班时间玩手机抽烟等不良影响上班时间玩手机抽烟等不良影响上班时间玩手机抽烟等不良影响上班时间玩手机抽烟等不良影响上班时间玩手机抽烟等不良影响上班时间玩手机抽烟等不良影响上班时间玩手机抽烟等不良影响上班时间玩手机抽烟等不良影响上班时间玩手机抽烟等不良影响</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. },
  21. data(){
  22. return{
  23. isShow: this.openPopup, // 是否显示弹框
  24. list: [{
  25. image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
  26. title: '昨夜星辰昨夜风,画楼西畔桂堂东'
  27. },
  28. {
  29. image: require('@/static/defaultMe.png'),
  30. title: '身无彩凤双飞翼,心有灵犀一点通'
  31. },
  32. {
  33. image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
  34. title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
  35. }
  36. ],
  37. }
  38. },
  39. methods: {
  40. // 查看评论大图
  41. clickSwiper(e){
  42. // 预览图片
  43. uni.previewImage({
  44. current: e,
  45. urls: this.list[e],
  46. longPressActions: {
  47. itemList: ['发送给朋友', '保存图片', '收藏'],
  48. success: function(data) {
  49. console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
  50. },
  51. fail: function(err) {
  52. console.log(err.errMsg);
  53. }
  54. }
  55. })
  56. }
  57. },
  58. watch: {
  59. openPopup(val){
  60. this.isShow = val
  61. },
  62. isShow(val){
  63. if(!val){
  64. this.$emit('close')
  65. }
  66. }
  67. }
  68. }
  69. </script>
  70. <style lang="scss" scoped>
  71. .commentPopup-wrap{
  72. .popup-con{
  73. padding: 26upx 0 10upx;
  74. .popup-tit{
  75. padding: 10upx 30upx 26upx;
  76. border-bottom: 1upx solid #f8f8f8;
  77. }
  78. .popup-main{
  79. .popup-swiper{
  80. margin: 20upx 30upx 0;
  81. }
  82. .popup-des{
  83. padding: 20upx 30upx;
  84. }
  85. }
  86. }
  87. }
  88. </style>