ld-comment.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <view class="ct-list">
  3. <view class="ct-item u-border pd40" v-for="(v,i) in value" :key="i">
  4. <view class="u-flex-center-sb">
  5. <view class="u-flex">
  6. <image class="u-avatar83" :src="v.head_photo"></image>
  7. <view class="u-font28 u-1A1A1A u-ml20">
  8. <view>{{v.nickname || '松河生活会员'}}</view>
  9. <view>
  10. <text v-for="(item,index) in 5" :key="index" class="iconfont" :class="v.level >item?'grade-active':'u-B3B3B3'">&#xe60a;</text>
  11. </view>
  12. </view>
  13. </view>
  14. <view class="u-font24 u-999">{{v.create_time}}</view>
  15. </view>
  16. <view class="ml100">
  17. <view class="u-font28 u-999">{{v.content}}</view>
  18. <view class="u-mt15 ctImg">
  19. <image class="u-ctImg180" v-for="(imgItem,index) in dealImg(v.img)" :key="index" :src="imgItem"></image>
  20. </view>
  21. </view>
  22. </view>
  23. <view v-if="value.length==0">
  24. <view class="no-data">
  25. <image src="../../static/nodata.png"></image>
  26. <div>暂无评价~</div>
  27. </view>
  28. </view>
  29. </view>
  30. </template>
  31. <script>
  32. export default {
  33. props: {
  34. value: {
  35. type: Array,
  36. default: () => {
  37. return []
  38. }
  39. }
  40. },
  41. data() {
  42. return {
  43. gradeNum: 3,
  44. }
  45. },
  46. methods:{
  47. dealImg(v){
  48. let result =[];
  49. if(v){
  50. result=v.split(",");
  51. }
  52. return result;
  53. }
  54. }
  55. }
  56. </script>
  57. <style lang="scss">
  58. .ml100 {
  59. margin-left: 100rpx;
  60. }
  61. .pd40 {
  62. padding-top: 40rpx;
  63. padding-bottom: 40rpx;
  64. }
  65. .ctImg image:not(:nth-child(3n)) {
  66. margin-right: 10rpx;
  67. }
  68. .grade-active {
  69. color: #FF5112;
  70. }
  71. .u-B3B3B3 {
  72. color: #B3B3B3;
  73. }
  74. .no-data {
  75. text-align: center;
  76. padding: 20rpx 0;
  77. color: #999999;
  78. }
  79. .no-data image {
  80. width: 430rpx;
  81. height: 278rpx;
  82. }
  83. </style>