offline-evaluateDetail.wxml 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <!-- 线下评价详情:整页只读,不允许用户修改,仅支持查看与返回 -->
  2. <t-navbar title="评价" left-arrow />
  3. <scroll-view class="page-scroll__container" type="list" scroll-y style="{{containerStyle}}">
  4. <view class="evaluate-container evaluate-container--readonly">
  5. <!-- 商品信息:仅展示 -->
  6. <view class="service-card" wx:if="{{service.name}}">
  7. <image class="service-img" src="{{service.image}}" mode="aspectFill" />
  8. <view class="service-info">
  9. <view class="service-name-row">
  10. <text class="service-name">{{service.name}}</text>
  11. <text class="service-divider">|</text>
  12. <text class="service-date">{{service.date}}</text>
  13. <text class="service-time">{{service.time}}</text>
  14. </view>
  15. <view class="service-row" wx:if="{{service.operator}}">操作人: {{service.operator}}</view>
  16. <view class="service-row" wx:if="{{service.institution}}">机构: {{service.institution}}</view>
  17. </view>
  18. </view>
  19. <!-- 服务质量 评分(只读) -->
  20. <view class="rate-row">
  21. <text class="rate-label">服务质量</text>
  22. <view class="rate-wrap">
  23. <t-rate
  24. value="{{scoreServiceQuality}}"
  25. count="{{5}}"
  26. color="{{rateColor}}"
  27. placement=""
  28. disabled="{{true}}"
  29. />
  30. <text class="rate-score">{{scoreServiceQuality || '0'}}分</text>
  31. </view>
  32. </view>
  33. <!-- 服务态度 评分(只读) -->
  34. <view class="rate-row">
  35. <text class="rate-label">服务态度</text>
  36. <view class="rate-wrap">
  37. <t-rate
  38. value="{{scoreAttitude}}"
  39. count="{{5}}"
  40. color="{{rateColor}}"
  41. placement=""
  42. disabled="{{true}}"
  43. />
  44. <text class="rate-score">{{scoreAttitude || '0'}}分</text>
  45. </view>
  46. </view>
  47. <!-- 环境 评分(只读) -->
  48. <view class="rate-row">
  49. <text class="rate-label">环 境</text>
  50. <view class="rate-wrap">
  51. <t-rate
  52. value="{{scoreEnvironment}}"
  53. count="{{5}}"
  54. color="{{rateColor}}"
  55. placement=""
  56. disabled="{{true}}"
  57. />
  58. <text class="rate-score">{{scoreEnvironment || '0'}}分</text>
  59. </view>
  60. </view>
  61. <!-- 评价内容:只读展示 -->
  62. <view class="comment-section">
  63. <view class="comment-display">{{content || '暂无评价内容'}}</view>
  64. </view>
  65. <!-- 图片/视频:一行4个,点击进入统一轮播,轮播到视频自动播放 -->
  66. <view class="upload-section">
  67. <view class="media-grid media-list--readonly" wx:if="{{mediaList.length > 0}}">
  68. <view class="media-item" wx:for="{{mediaList}}" wx:key="path">
  69. <image wx:if="{{item.type === 'image'}}" class="media-thumb" src="{{item.path}}" mode="aspectFill" bindtap="onPreviewMedia" data-index="{{index}}" />
  70. <view wx:else class="media-item-video" bindtap="onPreviewMedia" data-index="{{index}}">
  71. <video id="offline-detail-video-{{index}}" class="media-thumb" src="{{item.path}}" show-center-play-btn="{{true}}" object-fit="cover" controls="{{true}}" />
  72. <view class="media-item-play"><t-icon name="play-circle-filled" size="56rpx" color="rgba(255,255,255,0.95)" /></view>
  73. </view>
  74. </view>
  75. </view>
  76. </view>
  77. </view>
  78. </scroll-view>
  79. <!-- 底部返回 -->
  80. <view class="publish-footer" style="padding-bottom: {{container.safeBottomOffset}}px;">
  81. <view class="publish-btn" bindtap="onBack">返回</view>
  82. </view>
  83. <!-- 全屏轮播:图片+视频一起,轮播到视频自动播放 -->
  84. <view class="media-carousel-overlay" wx:if="{{showMediaCarousel}}">
  85. <swiper
  86. class="media-carousel-swiper"
  87. current="{{mediaCarouselCurrent}}"
  88. duration="300"
  89. circular="{{true}}"
  90. bindchange="onMediaCarouselChange"
  91. >
  92. <swiper-item wx:for="{{mediaList}}" wx:key="path" class="media-carousel-item">
  93. <view wx:if="{{item.type === 'image'}}" class="media-carousel-image-wrap">
  94. <image class="media-carousel-image" src="{{item.path}}" mode="aspectFit" />
  95. </view>
  96. <view wx:else class="media-carousel-video-wrap">
  97. <video
  98. id="preview-video-{{index}}"
  99. class="media-carousel-video"
  100. src="{{item.path}}"
  101. controls="{{true}}"
  102. object-fit="contain"
  103. show-center-play-btn="{{true}}"
  104. />
  105. </view>
  106. </swiper-item>
  107. </swiper>
  108. <view class="media-carousel-close" bindtap="onCloseMediaCarousel">
  109. <t-icon name="close" size="48rpx" color="#fff" />
  110. </view>
  111. </view>