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.

403 lines
8.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
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="collect">
  3. <mNavbar title="我的收藏" :leftClick="leftClick"></mNavbar>
  4. <!-- tab栏 -->
  5. <view class="tab">
  6. <van-tabs v-model:active="active" color="#EF8C94" background="transparent">
  7. <van-tab title="男士套餐"></van-tab>
  8. <van-tab title="女士套餐"></van-tab>
  9. <!-- 后面这两个个用于解决页面显示bug -->
  10. <van-tab title="免通行费"></van-tab>
  11. <van-tab disabled></van-tab>
  12. <van-tab disabled></van-tab>
  13. </van-tabs>
  14. </view>
  15. <view v-if="collectList.length > 0" class="collect-list">
  16. <view @click="gototechnicianDetail(item.technician)" v-for="item in collectList" :key="item.id"
  17. class="collect-item">
  18. <view class="collect-main">
  19. <view class="technician-head b-relative">
  20. <view class="img-box">
  21. <image :src="item.technician.image" mode="aspectFill" class="bg"></image>
  22. <image v-if="item.technician.icon" :src="item.technician.icon" mode="aspectFit" class="hot">
  23. </image>
  24. <view v-if="item.technician.bookable == 'Y'" class="available-for-service">
  25. <image src="@/static/address/lightning-icon.png" mode="aspectFit"></image>
  26. <text class="desc">可服务</text>
  27. </view>
  28. </view>
  29. </view>
  30. <view class="detail-info">
  31. <view class="technician-base-info">
  32. <view class="name-and-level">
  33. <view class="technician-name">{{ item.technician.title }}</view>
  34. <van-icon name="star" color="#E8615E" size="25rpx" />
  35. <text class="score">{{ item.technician.level }}</text>
  36. </view>
  37. <view @click.stop="calcelCollect(item.technician.id)" class="alert-collect">
  38. <image src="@/static/collect/alert-collect-icon.png"></image>
  39. <text class="alert-add-collect">取消收藏</text>
  40. </view>
  41. </view>
  42. <view class="appointed-time">
  43. <view class="capsule">
  44. <view class="earliest-reducible">最早可约</view>
  45. <view class="today">今天{{ item.technician.useTime}}</view>
  46. </view>
  47. </view>
  48. <view class="technician-desc">
  49. {{ item.technician.notes }}
  50. </view>
  51. </view>
  52. </view>
  53. <view class="public-praise">
  54. <view class="server-num">已服务{{ item.technician.isFw }}+</view>
  55. <view class="evaluate-collect-subscribe">
  56. <view class="evaluate-collect">
  57. <image src="@/static/collect/review-icon.png" mode="aspectFit"></image>
  58. <view class="evaluate-num">{{item.technician.pinNum}}评价</view>
  59. <image src="@/static/collect/alert-collect-icon.png" mode="aspectFit"></image>
  60. <view class="collect-num">{{ item.technician.collectNum }}收藏</view>
  61. </view>
  62. <view @click="gototechnicianDetail(item.technician)" class="subscribe"
  63. :class="{ notAvailable : item.technician.bookable != 'Y' }">立即预约</view>
  64. </view>
  65. </view>
  66. </view>
  67. </view>
  68. <van-empty v-else image="/static/empty/collect.png" image-size="400rpx" description="暂无收藏技师" />
  69. </view>
  70. </template>
  71. <script>
  72. import mNavbar from '../../components/base/m-navbar.vue'
  73. import {
  74. showConfirmDialog
  75. } from 'vant';
  76. export default {
  77. components: {
  78. mNavbar
  79. },
  80. data() {
  81. return {
  82. queryParams: {
  83. pageNo: 1,
  84. pageSize: 10
  85. },
  86. collectList: [],
  87. active: 0
  88. }
  89. },
  90. onShow() {
  91. this.getList()
  92. },
  93. methods: {
  94. //list列表滑动到底部自动新增数据列表
  95. onLoad() {
  96. this.queryParams.pageSize += 10
  97. this.getAddressList()
  98. },
  99. //返回个人中心
  100. leftClick() {
  101. uni.switchTab({
  102. url: '/pages/index/center'
  103. })
  104. },
  105. //获取收藏列表
  106. getList() {
  107. this.$api('getCollectList', this.queryParams, res => {
  108. if (res.code == 200) {
  109. this.collectList = res.result.records
  110. }
  111. })
  112. },
  113. //跳转技师详情
  114. gototechnicianDetail(technician) {
  115. uni.navigateTo({
  116. url: '/pages/technician/technicianDetail?id=' + technician.id
  117. })
  118. },
  119. //取消收藏
  120. calcelCollect(tenId) {
  121. showConfirmDialog({
  122. title: '删除收藏',
  123. message: '确认取消此收藏?取消后数据不可恢复',
  124. }).then(() => {
  125. this.$api('calcelCollect', {
  126. tenId
  127. }, res => {
  128. if (res.code == 200) {
  129. uni.showToast({
  130. title: '取消成功',
  131. icon: 'none'
  132. })
  133. this.getList()
  134. }
  135. })
  136. }).catch(() => {});
  137. }
  138. }
  139. }
  140. </script>
  141. <style lang="scss" scoped>
  142. .collect {
  143. width: 750rpx;
  144. margin: 0 auto;
  145. background: #F5F5F5;
  146. min-height: 100vh;
  147. box-sizing: border-box;
  148. .collect-list {
  149. padding: 20rpx;
  150. .collect-item {
  151. background: white;
  152. border-radius: 20rpx;
  153. padding: 20rpx;
  154. margin-bottom: 20rpx;
  155. .collect-main {
  156. display: flex;
  157. .technician-head {
  158. width: 150rpx;
  159. height: 150rpx;
  160. border-radius: 10rpx;
  161. border: 1px solid #F6BEC3;
  162. .img-box {
  163. position: relative;
  164. .bg {
  165. width: 150rpx;
  166. height: 150rpx;
  167. border-radius: 10rpx;
  168. overflow: hidden;
  169. &::v-deep div {
  170. background-position: center top !important;
  171. background-size: 100% !important;
  172. }
  173. image {
  174. height: 100%;
  175. }
  176. }
  177. .hot {
  178. position: absolute;
  179. left: -28rpx;
  180. top: -34rpx;
  181. width: 80rpx;
  182. height: 80rpx;
  183. }
  184. .available-for-service {
  185. display: flex;
  186. justify-content: center;
  187. align-items: center;
  188. position: absolute;
  189. top: 0rpx;
  190. right: 0rpx;
  191. width: 70%;
  192. height: 40rpx;
  193. background: #F6BEC3;
  194. border-top-left-radius: 20rpx;
  195. border-bottom-left-radius: 20rpx;
  196. color: white;
  197. .desc {
  198. font-size: 18rpx;
  199. }
  200. image {
  201. width: 23rpx;
  202. height: 23rpx;
  203. vertical-align: middle;
  204. }
  205. }
  206. }
  207. }
  208. .detail-info {
  209. display: flex;
  210. flex-direction: column;
  211. justify-content: space-between;
  212. width: calc(100% - 150rpx);
  213. padding-left: 15rpx;
  214. .technician-base-info {
  215. display: flex;
  216. justify-content: space-between;
  217. height: 45rpx;
  218. .name-and-level {
  219. display: flex;
  220. align-items: center;
  221. .technician-name {
  222. color: #333;
  223. font-size: 28rpx;
  224. font-weight: 500;
  225. margin-right: 10rpx;
  226. }
  227. .score {
  228. color: #E8615E;
  229. margin-left: 5rpx;
  230. font-size: 20rpx;
  231. }
  232. }
  233. .alert-collect {
  234. display: flex;
  235. align-items: center;
  236. color: #6E6E6E;
  237. font-size: 20rpx;
  238. .alert-add-collect {
  239. margin-left: 5rpx;
  240. }
  241. }
  242. text {
  243. display: block;
  244. }
  245. }
  246. .appointed-time {
  247. width: 48%;
  248. background: #FFE3E6;
  249. height: 40rpx;
  250. border-radius: 22.5rpx;
  251. font-size: 20rpx;
  252. color: #EF8C94;
  253. .capsule {
  254. display: flex;
  255. height: 100%;
  256. align-items: center;
  257. .earliest-reducible {
  258. display: flex;
  259. align-items: center;
  260. justify-content: center;
  261. width: 50%;
  262. height: 100%;
  263. color: white;
  264. border-radius: 20rpx;
  265. background: #EF8C94;
  266. }
  267. .today {
  268. width: 50%;
  269. text-align: center;
  270. }
  271. }
  272. }
  273. .technician-desc {
  274. color: #666666;
  275. overflow: hidden;
  276. min-height: 2em;
  277. font-size: 22rpx;
  278. display: -webkit-box;
  279. -webkit-box-orient: vertical;
  280. -webkit-line-clamp: 2;
  281. text-overflow: ellipsis;
  282. }
  283. image {
  284. width: 25rpx;
  285. height: 25rpx;
  286. }
  287. }
  288. }
  289. .public-praise {
  290. display: flex;
  291. align-items: center;
  292. margin-top: 20rpx;
  293. font-size: 26rpx;
  294. .server-num {
  295. width: 170rpx;
  296. font-size: 22rpx;
  297. color: #666666;
  298. white-space: nowrap;
  299. overflow: hidden;
  300. text-overflow: ellipsis;
  301. }
  302. .evaluate-collect-subscribe {
  303. width: calc(100% - 170rpx);
  304. display: flex;
  305. justify-content: space-between;
  306. padding-left: 15rpx;
  307. .evaluate-collect {
  308. display: flex;
  309. align-items: center;
  310. .evaluate-num {
  311. color: #B6B6B6;
  312. margin-right: 20rpx;
  313. }
  314. .collect-num {
  315. color: #B6B6B6;
  316. }
  317. image {
  318. margin-right: 5rpx;
  319. }
  320. }
  321. .subscribe {
  322. display: flex;
  323. align-items: center;
  324. justify-content: center;
  325. height: 60rpx;
  326. width: 180rpx;
  327. border-radius: 40rpx;
  328. color: white;
  329. background: #EF8C94;
  330. }
  331. .notAvailable {
  332. background: #ccc;
  333. }
  334. }
  335. image {
  336. width: 25rpx;
  337. height: 25rpx;
  338. }
  339. }
  340. }
  341. }
  342. }
  343. </style>