You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

482 lines
9.7 KiB

10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
  1. <template>
  2. <view class="sub-sctibes-server">
  3. <mNavbar title="服务详情" :leftClick="leftClick"></mNavbar>
  4. <view class="image-box b-relative">
  5. <!-- <image @click="back" src="@/static/technician/back.png" mode="aspectFill" class="icon"></image> -->
  6. <image :src="projectDetail.image" mode="aspectFill" class="projectImage"></image>
  7. </view>
  8. <view class="door box-s bg-w">
  9. <view class="call box-s">
  10. <image src="@/static/technician/lightning-icon1.png" mode="aspectFill"></image>
  11. <view class="rush-door">
  12. <text class="rush">急速</text>上门
  13. </view>
  14. <view class="desc">
  15. 随叫随到 最快30分钟上门
  16. </view>
  17. </view>
  18. <view class="server-list">
  19. <view class="server-item box-s">
  20. <view class="server-name">{{ projectDetail.title }}</view>
  21. <view class="select-box"></view>
  22. <view class="price-and-time">
  23. <view class="price">
  24. <text class="unit"></text>
  25. <text>{{ projectDetail.price }}</text>
  26. <text class="time">
  27. /{{ projectDetail.times }}分钟
  28. </text>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. <view class="guarantee-and-coupon mar-10 bg-w box-s">
  35. <view class="item">
  36. <view class="title">保障</view>
  37. <view class="guarantee">
  38. <view class="guarantee-item">
  39. <image src="@/static/icons/secure.png"></image>
  40. 安全可靠
  41. </view>
  42. <view class="guarantee-item">
  43. <image src="@/static/icons/secure.png"></image>
  44. 无额外收费
  45. </view>
  46. </view>
  47. </view>
  48. <!-- <view class="item">
  49. <view class="title">
  50. 领券
  51. </view>
  52. <view class="coupon-list">
  53. <view class="coupon-item">
  54. {{ projectDetail.subTitle }}
  55. </view>
  56. <view class="coupon-item">
  57. 满299减20
  58. </view>
  59. </view>
  60. </view> -->
  61. </view>
  62. <van-tabs v-model:active="active" color="#EF8C94">
  63. <van-tab title="项目介绍">
  64. <img class="project-detail-img" width="100%" :src="projectDetail.projectSub" alt="项目介绍图片" />
  65. </van-tab>
  66. <van-tab title="下单说明">
  67. <view v-html="orderInstructions" class="jies"></view>
  68. </van-tab>
  69. </van-tabs>
  70. <view class="md-doc mar-10 b-relative">
  71. <view class="pack-up">
  72. <!-- 收起
  73. <van-icon name="arrow-up" /> -->
  74. </view>
  75. </view>
  76. <view class="review bg-white mar-10 box-s">
  77. <view class="review-title">用户评论({{ countReviewNum }}+)</view>
  78. <view class="review-classify">
  79. <view @click="selectReview(0)" class="review-classify-item" :class="{'select-classify' : queryParams.fraction == 0}">
  80. 好评
  81. <text class="num">{{ goodReputationNum }}</text>
  82. </view>
  83. <view @click="selectReview(1)" class="review-classify-item" :class="{'select-classify' : queryParams.fraction == 1}">
  84. 中评
  85. <text class="num">{{ mediumReviewNum }}</text>
  86. </view>
  87. <view @click="selectReview(2)" class="review-classify-item" :class="{'select-classify' : queryParams.fraction == 2}">
  88. 差评
  89. <text class="num">{{ negativeComment }}</text>
  90. </view>
  91. </view>
  92. <van-list
  93. v-if="reviewList.length > 0"
  94. v-model:loading="loading"
  95. :finished="finished"
  96. finished-text="没有更多了"
  97. @load="onLoad"
  98. >
  99. <reviewListVue :list="reviewList"></reviewListVue>
  100. </van-list>
  101. <van-empty v-else image="/static/empty/record.png" image-size="400rpx" description="暂无评论"/>
  102. </view>
  103. <view class="select-button bg-white">
  104. <view @click="selectTechnician" class="btn">
  105. 下单选择技师
  106. </view>
  107. </view>
  108. </view>
  109. </template>
  110. <script>
  111. import mNavbar from '@/components/base/m-navbar.vue'
  112. import reviewListVue from '@/components/review/reviewList/reviewList.vue'
  113. export default {
  114. components: {
  115. mNavbar,
  116. reviewListVue
  117. },
  118. data() {
  119. return {
  120. active: 0,
  121. projectDetail: {},
  122. reviewList : [],
  123. orderInstructions : '', //下单说明
  124. technicianList : [] ,
  125. queryParams : {
  126. projectId : this.$route.query.id,
  127. pageNo : 1,
  128. pageSize : 10,
  129. fraction : 0
  130. },
  131. loading : false,
  132. finished : false,
  133. goodReputationNum : 0, //好评数量
  134. mediumReviewNum : 0, //中评数量
  135. negativeComment : 0, //差评数量
  136. countReviewNum : 0, //总评论条数
  137. }
  138. },
  139. onShow() {
  140. this.getProjectDetail()
  141. this.getReview()
  142. this.getConfig()
  143. },
  144. methods: {
  145. //获取项目详情
  146. getProjectDetail() {
  147. this.$api('getProjectDetail', {
  148. id: this.$route.query.id
  149. }, res => {
  150. if (res.code == 200) {
  151. this.projectDetail = res.result.details;
  152. this.technicianList = res.result.tenPageList;
  153. }
  154. })
  155. },
  156. //获取评论
  157. getReview(index) {
  158. this.loading = true
  159. this.$api('getCommentList', this.queryParams, res => {
  160. if (res.code == 200) {
  161. this.reviewList = res.result;
  162. // if(res.result.total > this.queryParams.pageSize){
  163. // this.finished = true;
  164. // }
  165. this.finished = true;
  166. this.loading = false;
  167. if(index > -1){
  168. let list = [ 'goodReputationNum' , 'mediumReviewNum' , 'negativeComment' ]
  169. let a = list[index];
  170. // this[a] = 数组长度
  171. }
  172. }
  173. })
  174. },
  175. //返回
  176. back() {
  177. if (this.$route.query.r == '1') {
  178. uni.switchTab({
  179. url: '/pages/index/index'
  180. })
  181. } else {
  182. uni.navigateBack(-1)
  183. }
  184. },
  185. //跳转选择技师页面
  186. selectTechnician() {
  187. uni.navigateTo({
  188. url: `/pages/technician/selectTechnician?serviceId=${this.projectDetail.id}`
  189. })
  190. sessionStorage.setItem('technicianList',JSON.stringify(this.technicianList))
  191. },
  192. //获取配置
  193. getConfig() {
  194. this.$api('getConfig', {} ,res => {
  195. if(res.code == 200){
  196. res.result.forEach(item => {
  197. if(item.keyValue == 'orderInstructions'){
  198. this.orderInstructions = item.content;
  199. }
  200. })
  201. }
  202. })
  203. },
  204. //返回首页
  205. leftClick() {
  206. uni.switchTab({
  207. url: '/pages/index/index'
  208. })
  209. },
  210. //选择了评论
  211. selectReview(index){
  212. this.queryParams.fraction = index;
  213. this.queryParams.pageSize + 10;
  214. this.getReview(index)
  215. },
  216. //滑动到屏幕底部
  217. onLoad(){
  218. this.queryParams.pageSize += 10;
  219. this.getReview()
  220. }
  221. }
  222. }
  223. </script>
  224. <style lang="scss" scoped>
  225. .jies{
  226. padding: 20px;
  227. background-color: #fff;
  228. }
  229. .sub-sctibes-server {
  230. background: #F5F5F5;
  231. width: 750rpx;
  232. margin: 0 auto;
  233. padding-bottom: 80rpx;
  234. .box-s {
  235. box-sizing: border-box;
  236. }
  237. .mar-10 {
  238. margin: 20rpx 0rpx;
  239. }
  240. .bg-w {
  241. background: white;
  242. }
  243. .image-box {
  244. // height: 500rpx;
  245. width: 750rpx;
  246. .icon {
  247. position: absolute;
  248. z-index: 1000;
  249. left: 10rpx;
  250. top: 10rpx;
  251. width: 60rpx;
  252. height: 60rpx;
  253. }
  254. .projectImage {
  255. width: 100%;
  256. }
  257. }
  258. .door {
  259. padding: 20rpx;
  260. .call {
  261. display: flex;
  262. align-items: center;
  263. background: #F8F8F8;
  264. border-radius: 10rpx;
  265. height: 60rpx;
  266. padding: 0rpx 10rpx;
  267. image {
  268. width: 25rpx;
  269. height: 25rpx;
  270. }
  271. .rush-door {
  272. font-size: 32rpx;
  273. color: black;
  274. font-family: 'PangMenZhengDao';
  275. font-weight: 600;
  276. margin-left: 5rpx;
  277. .rush {
  278. color: #EF8C94;
  279. }
  280. }
  281. .desc {
  282. font-size: 26rpx;
  283. color: #666666;
  284. margin-left: 20rpx;
  285. }
  286. }
  287. .server-list {
  288. margin-top: 20rpx;
  289. .server-item {
  290. display: flex;
  291. flex-direction: column;
  292. justify-content: space-around;
  293. background: #FFF2F3;
  294. width: 300rpx;
  295. height: 120rpx;
  296. border-radius: 15rpx;
  297. padding: 10rpx 20rpx;
  298. border: 1px solid #EF8C94;
  299. .server-name {
  300. font-size: 24rpx;
  301. }
  302. .price-and-time {
  303. display: flex;
  304. align-items: flex-end;
  305. height: 40rpx;
  306. .price {
  307. color: #FFB300;
  308. font-size: 32rpx;
  309. font-weight: 600;
  310. .unit {
  311. font-size: 24rpx;
  312. }
  313. .time {
  314. font-size: 20rpx;
  315. color: #9CADA5;
  316. }
  317. }
  318. }
  319. }
  320. }
  321. }
  322. .guarantee-and-coupon {
  323. .item {
  324. height: 80rpx;
  325. padding: 0rpx 20rpx;
  326. display: flex;
  327. align-items: center;
  328. .title {
  329. font-size: 28rpx;
  330. }
  331. .guarantee,
  332. .coupon-list {
  333. display: flex;
  334. font-size: 24rpx;
  335. color: #333333;
  336. .guarantee-item {
  337. margin-left: 20rpx;
  338. image {
  339. width: 25rpx;
  340. height: 25rpx;
  341. vertical-align: middle;
  342. }
  343. }
  344. .coupon-item {
  345. background: #F29E45;
  346. margin-left: 20rpx;
  347. color: white;
  348. padding: 5rpx 18rpx;
  349. border-radius: 3.5rpx;
  350. }
  351. }
  352. }
  353. }
  354. .project-detail-img{
  355. width: 100%;
  356. }
  357. /* md表格 */
  358. .md-doc {
  359. // height: 750rpx;
  360. background: #fff;
  361. .pack-up {
  362. text-align: center;
  363. font-size: 26rpx;
  364. position: absolute;
  365. bottom: 0;
  366. width: 100%;
  367. }
  368. }
  369. .review {
  370. padding: 0rpx 20rpx 40rpx 20rpx;
  371. .review-title {
  372. padding: 25rpx 20rpx;
  373. font-size: 32rpx;
  374. font-weight: 500;
  375. }
  376. .review-classify {
  377. display: flex;
  378. padding: 0rpx 0rpx 30rpx 0rpx;
  379. .review-classify-item {
  380. background: #EEEDED;
  381. padding: 5rpx 15rpx;
  382. border-radius: 5rpx;
  383. margin-right: 15rpx;
  384. color: #666;
  385. }
  386. .select-classify {
  387. background: #FEF4F5;
  388. color: #EF8D95;
  389. }
  390. }
  391. }
  392. .select-button {
  393. position: fixed;
  394. display: flex;
  395. align-items: center;
  396. bottom: 0;
  397. left: 0;
  398. height: 100rpx;
  399. width: 750rpx;
  400. margin: 0 auto;
  401. box-shadow: -2px -2px 10px rgba(0, 0, 0, .1);
  402. .btn {
  403. display: flex;
  404. align-items: center;
  405. justify-content: center;
  406. width: 90%;
  407. height: 80rpx;
  408. margin: 0 auto;
  409. background: #EF8C94;
  410. border-radius: 42.5rpx;
  411. color: white;
  412. font-size: 28rpx;
  413. }
  414. }
  415. }
  416. @media all and (min-width: 961px) {
  417. .select-button {
  418. left: 50% !important;
  419. transform: translateX(-50%);
  420. }
  421. }
  422. </style>