review.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <view>
  3. <use-tabbar :tabbar="false" />
  4. <view class="margin-bottom-xl" v-if="fetch && fetch.info">
  5. <view class="padding margin-lr margin-tb-sm bg-main border-radius">
  6. <view class="goods-area">
  7. <view class="dflex pos-r">
  8. <view class="img" @click="Dever.pic.preview(fetch.info.pic, fetch.info.pic[0])">
  9. <image :src="fetch.info.pic[0]" mode="aspectFit"></image>
  10. </view>
  11. <view class="margin-left-sm"><text class="clamp-2"><span>{{ fetch.info.name }}
  12. </span></text>
  13. <view class="ft-dark fs-xs padding-top-xs">{{ fetch.info.sku_name || '&nbsp;&nbsp;' }}</view>
  14. <view class="margin-top-sm"><text class="price"><span>{{ fetch.info.price_text }}</span></text></view>
  15. </view>
  16. </view>
  17. </view>
  18. </view>
  19. <!-- 评价区 -->
  20. <view class="use-area evaluate-area margin-lr-sm" v-if="fetch.review && fetch.review.length > 0">
  21. <view class="dflex-b use-hover">
  22. <view class="dflex fwbd">评价({{ fetch.review_total }})</view>
  23. </view>
  24. <view v-for="(item, index) in fetch.list" :key="index" class="margin-top border-line">
  25. <view class="dflex-b">
  26. <view class="dflex">
  27. <image class="headimg border-radius-c" :src="item.user.avatar" mode="aspectFill" @click="Dever.pic.preview([item.user.avatar], item.user.avatar)"></image>
  28. <view class="right-area flex1 padding-left-sm">
  29. <view class="margin-right">
  30. <view class="fwbd">{{ item.user.name }}</view>
  31. <view class="use-rate dflex line-height-1">
  32. <view v-for="i in 5" :key="i" class="pos-r margin-left-sm"
  33. :style="{ marginLeft: '0px' }">
  34. <text class="iconfont"
  35. :class="i <= item.rate ? 'iconshoucang- ft-base fs' : 'iconshoucang-01 ft-dark fs'"></text>
  36. </view>
  37. </view>
  38. </view>
  39. </view>
  40. </view>
  41. <text class="time ft-dark fs-xs">{{ item.cdate_str }}</text>
  42. </view>
  43. <view class="content-area margin-top-xs">
  44. <view class="ft-main margin-top-xs margin-bottom-sm clamp-2">
  45. {{ item.content || '此用户没有填写评价' }}
  46. </view>
  47. <view class="dflex dflex-wrap-w" v-if="item.pic && item.pic.length > 0">
  48. <view v-for="(img, i) in item.pic" :key="i" class="dflex-c image-area border-radius">
  49. <image :src="img" mode="aspectFill" style="height: 166px;" @click="Dever.pic.preview([item.pic], img)"/>
  50. </view>
  51. </view>
  52. <view class="padding-bottom-sm">
  53. <text class="fs-xxs ft-dark">{{ item.style }}</text>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. </template>
  61. <script>
  62. export default {
  63. data() {
  64. return {
  65. fetch: {},
  66. id: 0,
  67. }
  68. },
  69. onLoad(options) {
  70. this.id = options.id;
  71. if (!this.id) {
  72. return Dever.goHome()
  73. }
  74. this.loadData();
  75. this.loadReview(1)
  76. },
  77. //下拉刷新
  78. onPullDownRefresh() {
  79. this.loadReview(1);
  80. },
  81. //加载更多
  82. onReachBottom() {
  83. this.loadReview(2);
  84. },
  85. methods: {
  86. loadData() {
  87. this.DeverApi.get(this, 'source.info', {
  88. id: this.id
  89. }, res => {
  90. uni.setNavigationBarTitle({
  91. title: res.info.name
  92. })
  93. });
  94. },
  95. loadReview(page) {
  96. this.DeverApi.page([page, 'list'], this, 'source.getReviewList', {source_id:this.id});
  97. },
  98. }
  99. }
  100. </script>
  101. <style lang="scss">
  102. uni-image {
  103. width: 96rpx;
  104. height: 96rpx;
  105. }
  106. .goods-area:last-child {
  107. margin-bottom: 0;
  108. }
  109. .goods-area image {
  110. width: 180rpx;
  111. height: 180rpx;
  112. }
  113. /* 评价 */
  114. .evaluate-area {
  115. padding: 28rpx;
  116. .headimg {
  117. flex-shrink: 0;
  118. width: 80rpx;
  119. height: 80rpx;
  120. }
  121. .right-area {
  122. image {
  123. margin-right: 10rpx;
  124. margin-bottom: 10rpx;
  125. height: 200rpx;
  126. width: 30%;
  127. }
  128. }
  129. }
  130. </style>