hospital-accompaniment-wechat/pages/order/chooseService.vue

<template>
	<view class="container">
		<view class="service-list">
			<view class="service-item" v-for="item,index in serviceList" :key="index" @click="chooseItem(item)">
				<view class="title-box">
					<span class="title">{{item.name}}</span>
					<span class="price-box">
						<span class="tip">￥</span>
						<span class="price">{{item.sellingPrice}}</span>
						<span class="unit">/{{ getUnitTxt(item.serviceUnit) || ''}}</span>
					</span>
				</view>
				<view class="service-content">
					<!-- 内容限制为两行省略，超过的部分能展开 content-text根据expand 切换active样式-->
					<span class="content-text" :class="item.expand?'active':''">{{item.serviceDescription}}</span>
					<!-- content-text超过两行时显示展开 -->
					<span class="expand" v-if="item.serviceDescription.length>40"
						@click="expand(index)">{{item.expand?'收起':'展开'}}</span>
				</view>
			</view>
		</view>
		<view class="empty-box" v-if="serviceList.length == 0">
			<u-empty marginTop="100" style="width: 100%;"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getServiceList
	} from '@/api/home.js'
	
		import {
			getServiceUnit,
		} from '@/api/order.js'
	export default {
		data() {
			return {
				serviceList: [],
				unitList: [],
			}
		},
		onLoad() {
			this.getServiceList()
			this.getServiceUnit();
		},
		methods: {
			getServiceList() {
				getServiceList().then(res => {
					if(res.code == 200){
						let data = res.data;
						data.forEach(item => {
							item.expand = false
						})
						this.serviceList = data
					}
					
				})
			},
			
			
			getUnitTxt(value) {
				let obj = this.unitList.find(item => item.code == value);;
				return obj ? obj.value : ''
			},
			
			//查询订单状态
			getServiceUnit() {
				let that = this;
				getServiceUnit().then(res => {
						if (res.code == 200) {
							this.unitList = res.data.serviceUnit;
						}
			
					})
					.catch((err) => {
						console.log(err);
					})
			
			},

			expand(index) {
				this.serviceList[index].expand = !this.serviceList[index].expand
			},

			chooseItem(item) {
				uni.$emit('returnService', item);
				uni.navigateBack({
					delta: 1,
				});
			}
		},

	}
</script>

<style scoped lang="scss">
	::v-deep body,
	html {
		height: 100% !important;
	}

	// .service-content中的 content-text限制为两行，超过的部分能展开
	.container {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #f6f6f6;

		.service-list {
			width: 100%;
			max-height: 100%;
			overflow-y: scroll;

			.service-item {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;

				.title-box {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						width: 490rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #1A1A1A;
					}
					.price-box{
						display: flex;
						align-items: flex-end;
						color: #FF0000;
						.price {
							font-size: 40rpx;
							line-height: 36rpx;
						}
						.unit,.tip{
							font-size: 24rpx;
						}
					}
					
				}

				.service-content {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					margin-top: 20rpx;

					.content-text {
						width: 600rpx;
						font-size: 28rpx;
						color: #666666;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.active {
						display: inline-flex;
						// height: auto;
						-webkit-line-clamp: 0;
						//动画效果，缓慢展开
						transition: all 0.3s ease-in-out;
					}

					.expand {
						flex: 1;
						text-align: right;
						font-size: 28rpx;
						color: #007AFF;
					}
				}
			}
		}
	}
</style>