serviceHome-uniapp-241015/service-uniapp-client/pages/mine/collect.vue

<template>
	<view class="collect">
		<mNavbar title="我的收藏" :leftClick="leftClick"></mNavbar>

		<view v-if="collectList.length > 0" class="collect-list">
			<view @click="gototechnicianDetail(item.technician)" v-for="item in collectList" :key="item.id" class="collect-item">
				<view class="collect-main">

					<view class="technician-head b-relative">
						<view class="img-box">
							<image :src="item.technician.image" mode="aspectFill" class="bg"></image>
							<image v-if="item.technician.icon" :src="item.technician.icon" mode="aspectFit" class="hot">
							</image>
							<view v-if="item.technician.bookable == 'Y'" class="available-for-service">
								<image src="@/static/address/lightning-icon.png" mode="aspectFit"></image>
								<text class="desc">可服务</text>
							</view>
						</view>
					</view>

					<view class="detail-info">

						<view class="technician-base-info">
							<view class="name-and-level">
								<view class="technician-name">{{ item.technician.title }}</view>
								<van-icon name="star" color="#E8615E" size="25rpx" />
								<text class="score">{{ item.technician.level }}</text>
							</view>
							<view @click.stop="calcelCollect(item.technician.id)" class="alert-collect">
								<image src="@/static/collect/alert-collect-icon.png"></image>
								<text class="alert-add-collect">取消收藏</text>
							</view>
						</view>

						<view class="appointed-time">
							<view class="capsule">
								<view class="earliest-reducible">最早可约</view>
								<view class="today">今天{{ item.technician.useTime}}</view>
							</view>
						</view>

						<view class="technician-desc">
							{{ item.technician.notes }}
						</view>

					</view>

				</view>

				<view class="public-praise">
					<view class="server-num">已服务{{ item.technician.isFw }}+单</view>

					<view class="evaluate-collect-subscribe">
						<view class="evaluate-collect">
							<image src="@/static/collect/review-icon.png" mode="aspectFit"></image>
							<view class="evaluate-num">{{item.technician.pinNum}}评价</view>
							<image src="@/static/collect/alert-collect-icon.png" mode="aspectFit"></image>
							<view class="collect-num">{{ item.technician.collectNum }}收藏</view>
						</view>
						<view @click="gototechnicianDetail(item.technician)" class="subscribe"
							:class="{ notAvailable : item.technician.bookable != 'Y' }">立即预约</view>
					</view>

				</view>

			</view>
		</view>
		
		<van-empty v-else image="/static/empty/collect.png" image-size="400rpx" description="暂无收藏技师"/>

	</view>
</template>

<script>
	import mNavbar from '../../components/base/m-navbar.vue'
	import {
		showConfirmDialog
	} from 'vant';

	export default {
		components: {
			mNavbar
		},
		data() {
			return {
				queryParams: {
					pageNo: 1,
					pageSize: 10
				},
				collectList: [],
			}
		},
		onShow() {
			this.getList()
		},
		methods: {

			//list列表滑动到底部自动新增数据列表
			onLoad() {
				this.queryParams.pageSize += 10
				this.getAddressList()
			},

			//返回个人中心
			leftClick() {
				uni.switchTab({
					url: '/pages/index/center'
				})
			},

			//获取收藏列表
			getList() {
				this.$api('getCollectList', this.queryParams, res => {
					if (res.code == 200) {
						this.collectList = res.result.records
					}
				})
			},

			//跳转技师详情
			gototechnicianDetail(technician) {
				uni.navigateTo({
					url: '/pages/technician/technicianDetail?id=' + technician.id
				})
			},

			//取消收藏
			calcelCollect(tenId) {
				showConfirmDialog({
					title: '删除收藏',
					message: '确认取消此收藏?取消后数据不可恢复',
				}).then(() => {
					this.$api('calcelCollect', {
						tenId
					}, res => {
						if (res.code == 200) {
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							})
							this.getList()
						}
					})
				}).catch(() => {});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.collect {
		width: 750rpx;
		margin: 0 auto;
		background: #F5F5F5;
		min-height: 100vh;
		box-sizing: border-box;

		.collect-list {
			padding: 20rpx;

			.collect-item {
				background: white;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;

				.collect-main {
					display: flex;

					.technician-head {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
						border: 1px solid #5EBAA2;

						.img-box {
							.bg {
								width: 150rpx;
								height: 150rpx;
								border-radius: 10rpx;
								overflow: hidden;

								&::v-deep div {
									background-position: center top !important;
									background-size: 100% !important;
								}

								image {
									width: 100%;
								}
							}

							.hot {
								position: absolute;
								left: -28rpx;
								top: -34rpx;
								width: 80rpx;
								height: 80rpx;
							}

							.available-for-service {
								display: flex;
								justify-content: center;
								align-items: center;
								position: absolute;
								left: 50%;
								bottom: -13rpx;
								width: 70%;
								height: 40rpx;
								border-radius: 10rpx;
								transform: translate(-50%);
								
								background: linear-gradient(178deg, #ffe6ed, #ecb978);
								color: $uni-color;
								.desc {
									font-size: 18rpx;
								}

								image {
									width: 23rpx;
									height: 23rpx;
									vertical-align: middle;
								}
							}
						}

					}

					.detail-info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: calc(100% - 150rpx);
						padding-left: 15rpx;

						.technician-base-info {
							display: flex;
							justify-content: space-between;
							height: 45rpx;

							.name-and-level {
								display: flex;
								align-items: center;

								.technician-name {
									color: #333;
									font-size: 28rpx;
									font-weight: 500;
									margin-right: 10rpx;
								}

								.score {
									color: #E8615E;
									margin-left: 5rpx;
									font-size: 20rpx;
								}
							}

							.alert-collect {
								display: flex;
								align-items: center;
								color: #6E6E6E;
								font-size: 20rpx;

								.alert-add-collect {
									margin-left: 5rpx;
									color: #FC9A37;
								}
							}

							text {
								display: block;
							}
						}

						.appointed-time {
							width: 48%;
							background: #E7FDF7;
							height: 40rpx;
							border-radius: 22.5rpx;
							font-size: 20rpx;
							color: #5DB9A3;
							background: $uni-color;
							color: #fff;
							.capsule {
								display: flex;
								height: 100%;
								align-items: center;

								.earliest-reducible {
									display: flex;
									align-items: center;
									justify-content: center;
									width: 50%;
									height: 100%;
									border-radius: 20rpx;
									background: linear-gradient(178deg, #ffe6ed, #ecb978);
									color: $uni-color;
								}

								.today {
									width: 50%;
									text-align: center;
								}
							}
						}

						.technician-desc {
							color: #666666;
							overflow: hidden;
							min-height: 2em;
							font-size: 22rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							text-overflow: ellipsis;
						}

						image {
							width: 25rpx;
							height: 25rpx;
						}
					}
				}

				.public-praise {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					font-size: 26rpx;

					.server-num {
						width: 170rpx;
						font-size: 22rpx;
						color: #666666;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.evaluate-collect-subscribe {
						width: calc(100% - 170rpx);
						display: flex;
						justify-content: space-between;
						padding-left: 15rpx;

						.evaluate-collect {
							display: flex;
							align-items: center;

							.evaluate-num {
								color: #B6B6B6;
								margin-right: 20rpx;
							}

							.collect-num {
								color: #B6B6B6;
							}

							image {
								margin-right: 5rpx;
							}
						}

						.subscribe {
							display: flex;
							align-items: center;
							justify-content: center;
							height: 60rpx;
							width: 180rpx;
							border-radius: 40rpx;
							background: linear-gradient(178deg, #ffe6ed, #ecb978);
							color: $uni-color;
						}

						.notAvailable {
							background: #ccc;
						}
					}

					image {
						width: 25rpx;
						height: 25rpx;
					}
				}
			}
		}
	}
</style>