LocalLivingServicesUniapp/pages/order/components/serviceDetail.vue

<template>
	<view class="service-detail-container" @click="confirm">
		<view class="popup">
			<view class="header">
				服务明细
			</view>
			<view class="detail-list">
				<view class="item" v-for="(item,index) in form.serviceDetails" :key="index">
					<view class="item_name" style="margin-bottom: 10rpx;">
						{{item.itemName}}
					</view>
					<view class="item_center" v-for="(subRow,subRowIndex) in item.subItem" :key="subRowIndex">
						<span><span class="dots"></span>{{subRow.itemContent}}</span>
						<span class="item_price"><text>￥</text>{{subRow.itemPrice}}</span>
					</view>
				</view>
			</view>
			<view class="total-section">
				<text class="total-text">服务总计：</text>
				<text class="total-price">￥{{form.amount}}</text>
			</view>
			<button class="confirm-btn" @click="confirm">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'serviceDetail',
		props:{
			subOrderId:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				form:{},
			}
		},
		methods: {
			confirm() {
				this.$emit('cut')
				
			},
			getDetail(){
				this.$http.get("/ts/merchant/servicesDetails?subOrderId="+this.subOrderId+'&delFlag='+0).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.form = res.data.result
					}
				})
			}
		},
		mounted() {
			this.getDetail() 
		}
	}
</script>

<style lang="scss" scoped>
	/* 页面整体样式 */
	.service-detail-container {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);
		width: 100%;
		// height: calc(100vh - 100rpx);
		height: 100vh;
		display: flex;
		align-items: end;
		z-index: 999;
	}

	.popup {
		width: 100%;
		background-color: #fff;
		padding: 24rpx 26rpx;
		border-radius: 20rpx 20rpx 0px 0px;
	}

	/* 头部标题 */
	.header {
		margin-bottom: 20rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			border-bottom: 1px solid #eeeeee;
			padding-bottom: 20rpx;
	}



	/* 明细列表样式 */
	.detail-list {
		background-color: #fff;
		border-radius: 10px;
		padding: 0 15px;
		margin-bottom: 15px;
		.item{
			width: 100%;
			background: #F7F8FC;
			border-radius: 12rpx;
			padding: 12rpx 24rpx;
			margin-bottom: 16rpx;
			.item_name{
				font-size: 26rpx;
				color: #333333;
				font-weight: 600;
			}
			.item_center{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.dots{
          width: 10rpx;
          height: 10rpx;
          background-color: #85868A;
          border-radius: 50%;
          display: inline-block;
          margin-right: 10rpx;
          margin-bottom: 4rpx;
				}
				span{
					font-size: 24rpx;
					color: #888888;
				}
				.item_price{
					font-size: 24rpx;
					font-weight: 600;
					color: #000;
					margin-left: 46rpx;
					text{
						font-size: 20rpx;
					}
					
				}
			}
		}
	}

	/* 总计部分 */
	.total-section {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 15px;
		border-radius: 10px;
	}

	.total-text {
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
	}

	.total-price {
		font-size: 16px;
		color: #f56c6c;
		font-weight: bold;
	}

	/* 确认按钮 */
	.confirm-btn {
		background-color: #409eff;
		color: #fff;
		border-radius: 6px;
		font-size: 16px;
		border: none;
		height: 44px;
		line-height: 44px;
	}

	.confirm-btn:active {
		background-color: #3a8ee6;
	}
</style>