ld-comment.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <view class="ct-list">
  3. <view class="ct-item u-border-one-one pd40" v-for="(v,i) in value" :key="i">
  4. <view>
  5. <view class="u-flex-center-sba">
  6. <view class="u-flex">
  7. <image class="u-avatar83" v-if="v.head_photo":src="v.head_photo"></image>
  8. <image class="u-avatar83" v-else :src="imgUrl+'/head-on.png'"></image>
  9. <view class="u-font28 u-1A1A1A u-ml20 avatar-start" >
  10. <view class="u-text-width">{{v.nickname || '松河生活平台会员'}}</view>
  11. <view class="comment-start">
  12. <!-- <uni-rate :max="5" :value="v.level" size="17" readonly="true" color="#B3B3B3" allowHalf='true' margin="4" activeColor="#FF5112" style="margin: 20rpx 0;" /> -->
  13. <text v-for="(item,index) in 5" :key="index" class="iconfont2" :class="v.level >=item?'grade-active':'u-B3B3B3'" style="font-size: 35rpx;margin-right: 11.5rpx;">&#xe60f;</text>
  14. </view>
  15. </view>
  16. </view>
  17. <view class="u-font24 u-999 time">{{v.create_time}}</view>
  18. </view>
  19. <view class="ml100">
  20. <view style="margin-top: 10rpx;" class="u-font28 u-999">{{v.content}}</view>
  21. <view class="u-mt15 ctImg">
  22. <image class="u-ctImg180" v-for="(imgItem,index) in dealImg(v.img)" :key="index" :src="imgItem"></image>
  23. </view>
  24. </view>
  25. </view>
  26. <view v-if="v.reply_list&&v.reply_list.length>0">
  27. <view class="ml100">
  28. <view class="u-font28 u-999">商家回复:{{v.reply_list[0].content}}</view>
  29. </view>
  30. </view>
  31. </view>
  32. <view v-if="value.length==0">
  33. <view class="no-data">
  34. <image :src="imgUrl+'/nodata.png'"></image>
  35. <div>暂无评价~</div>
  36. </view>
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. export default {
  42. props: {
  43. value: {
  44. type: Array,
  45. default: () => {
  46. return []
  47. }
  48. }
  49. },
  50. data() {
  51. return {
  52. gradeNum: 3,
  53. imgUrl: this.$mConfig.staticUrl
  54. }
  55. },
  56. methods:{
  57. dealImg(v){
  58. let result =[];
  59. if(v){
  60. result=v.split(",");
  61. }
  62. return result;
  63. }
  64. }
  65. }
  66. </script>
  67. <style lang="scss">
  68. .u-flex-center-sba{
  69. display: flex;
  70. flex-direction: row;
  71. // align-items: center;
  72. justify-content: space-between;
  73. }
  74. .avatar-start {
  75. display: flex;
  76. height: 83rpx;
  77. flex-direction: column;
  78. justify-content: space-between;
  79. }
  80. .comment-start {
  81. // margin-top: 20rpx;
  82. }
  83. .time {
  84. font-size: 24rpx;
  85. }
  86. .ml100 {
  87. margin-left: 100rpx;
  88. }
  89. .pd40 {
  90. padding-top: 40rpx;
  91. padding-bottom: 40rpx;
  92. }
  93. .ctImg image:not(:nth-child(3n)) {
  94. margin-right: 10rpx;
  95. }
  96. .grade-active {
  97. color: #FFC336;
  98. }
  99. .u-B3B3B3 {
  100. color: #B3B3B3;
  101. }
  102. .no-data {
  103. text-align: center;
  104. padding: 20rpx 0;
  105. color: #999999;
  106. }
  107. .no-data image {
  108. width: 430rpx;
  109. height: 278rpx;
  110. }
  111. </style>