UserEvaluation.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <div class="evaluateWtapper">
  3. <div class="evaluateItem" v-for="(item, index) in reply" :key="index">
  4. <div class="pic-text acea-row row-middle">
  5. <div class="pictrue">
  6. <img :src="item.avatar" class="image" />
  7. </div>
  8. <div class="acea-row row-middle">
  9. <div class="name line1">{{ item.nickname }}</div>
  10. <div class="start" :class="'star' + item.star"></div>
  11. </div>
  12. </div>
  13. <div class="time">{{ item.add_time }} {{ item.suk }}</div>
  14. <div class="evaluate-infor">{{ item.comment }}</div>
  15. <div class="imgList acea-row">
  16. <div
  17. class="pictrue"
  18. v-for="(itemn, index) in item.pics"
  19. :key="index"
  20. @click="openIview(item.pics, index)"
  21. >
  22. <img :src="itemn" class="image" />
  23. </div>
  24. </div>
  25. <div class="reply" v-if="item.merchant_reply_content">
  26. <span class="font-color-red">店小二</span>:{{
  27. item.merchant_reply_content
  28. }}
  29. </div>
  30. </div>
  31. </div>
  32. </template>
  33. <script>
  34. import Vue from "vue";
  35. import { ImagePreview } from "vant";
  36. Vue.use(ImagePreview);
  37. export default {
  38. name: "UserEvaluation",
  39. props: {
  40. reply: {
  41. type: Array,
  42. default: () => []
  43. }
  44. },
  45. data: function() {
  46. return {};
  47. },
  48. mounted: function() {},
  49. methods: {
  50. openIview(item, index) {
  51. ImagePreview({
  52. images: item,
  53. startPosition: index,
  54. maxZoom: 3,
  55. minZoom: 1 / 3
  56. });
  57. }
  58. }
  59. };
  60. </script>