circulation_ancientCoins_new/components/visitorAccount.vue

<template>
	<view :class="'visitor-account-com'+(open?' default-open':'')+(isOpen?' openstyle':'')">
	<!-- <view class="visitor-account-com"> -->
		<uni-collapse @change="change">
			<uni-collapse-item :title="title ? title : ''" :thumb="thumb" :errmsg="errmsg" :disabled="disabled" :open="isOpen" v-if="visitorInfo">
				<view class="collapse-list">
					<view class="account-list">

						<view v-if="visitorInfo.single_items && Object.keys(visitorInfo.single_items).length" class="account-item">
							<view class="title PfScSemibold">单次项目</view>
							<view class="item" v-for="(item, key) in visitorInfo.single_items" v-if="item.num != 0">
								<text>{{ item.name }}</text>
								<text v-if="item.num > 0">{{visitorInfo.istreat ? '治疗':'余'}}{{ item.num }}次</text>
								<text class="outnum" v-if="item.num < 0">欠{{ -item.num }}次</text>
							</view>
						</view>

						<view class="account-item" v-if="visitorInfo.treatment_package && Object.keys(visitorInfo.treatment_package).length > 0">
							<view class="title PfScSemibold">疗程套餐</view>

							<view class="accout-package" v-for="(item, key) in visitorInfo.treatment_package">
								<view class="package-name over">
									<view>{{ item.name }}</view>
								</view>

								<view class="item" v-for="(item2, key2) in item.data">
									<text>{{ item2.name }}</text>
									<text v-if="item2.num > 0">{{visitorInfo.istreat ? '治疗':'余'}}{{ item2.num }}次</text>
									<text class="outnum" v-if="item2.num < 0">欠{{ -item2.num }}次</text>
								</view>
							</view>

						</view>
					</view>
				</view>
			</uni-collapse-item>

		</uni-collapse>
	</view>
</template>

<script>
export default {
	name: "visitorAccount",
	options: { styleIsolation: "shared" },
	props: {
		errmsg: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: ''
		},
		thumb: {
			type: String,
			default: ''
		},
		open: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		isOpen: {
			type: Boolean,
			default: false
		},
		visitor_id:{
			type: Number,
			default: 0
		},
		depart_id:{
			type: Number,
			default: 0
		},
		visitorInfo: {
			type: Object,
			default: () => { }
		},
	},
	data() {
		return {
			cssUrl: this.cssUrl,
			valueOpen: ['0'],
			valueClose: ['1'],
		}
	},
	methods: {
		change(e) {
			if(e[0] != 0) {
				this.$emit('closeEvent')
				return;
			}
			const object = {
				visitor_id: this.visitor_id,
				depart_id: this.depart_id
			}
			this.$emit('getinfo', object)
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-collapse-item{
	color:red;
}

.visitor-account-com {
	width: 100%;
	height: auto;
	overflow: hidden;

	&.default-open {
		::v-deep {
			.uni-collapse-item__title.uni-collapse-item-border {
				display: none;
			}
		}
	}

	&.openstyle {
		::v-deep {
			.uni-collapse-item .error{
				margin-top: 24rpx;
				margin-bottom: 24rpx;
			}
		}
	}

	::v-deep {
		.uni-collapse-item{
			padding: 24rpx;
		}

		.uni-collapse-item__title-box {
			height: 86rpx;
			line-height: 86rpx;
		}

		.uni-collapse-item__title-text {
			font-size: 28rpx;
			color: #333333;
			font-weight: 700;
		}

		@supports (-webkit-touch-callout: none) {
			.uni-collapse-item__title-text {
				font-weight: 600;
			}
		}

		.uniui-bottom[data-v-a2e81f6e]:before {
			content: "\e6b8";
			color: #AEB0B8;
			font-size: 32rpx;
		}

		.uni-collapse-item__title.uni-collapse-item-border {
			border: none;
		}

		.uni-collapse {
			background: #F8FFF7;
		}

		.uni-collapse-item__title-box {
			padding: 0 24rpx;
		}

		.uni-collapse-item__title-box {
			background: #F8FFF7;
		}

		.uni-collapse-item__wrap {
			background: #F9FAFB;

			.uni-collapse-item__wrap-content {
				background: #F8FFF7;
				margin-bottom: 24rpx;
				border: none;

				&.open {}
			}
		}
	}

	.account-list {
		padding: 24rpx;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		overflow: hidden;

		.account-item {
			margin-bottom: 40rpx;

			&:last-of-type {
				margin-bottom: 24rpx;
			}

			.title {
				font-size: 28rpx;
				color: #333333;
			}

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 38rpx;
				line-height: 38rpx;
				margin-top: 24rpx;
				font-size: 28rpx;
				letter-spacing: 3.14rpx;
				color: #333333;

				text {
					&.outnum {
						color: #FD3B3B;
					}
				}
			}

			.accout-package {
				.title {
					font-size: 28rpx;
					color: #999999;
				}

				&:last-of-type {
					margin-bottom: 0rpx;
				}

				.package-name {
					display: flex;
					height: 44rpx;
					margin-top: 24rpx;
					width: auto;
					font-size: 28rpx;
					color: #79624A;
					max-width: calc(100% - 24rpx);
					align-items: center;
					view{
						height: 28rpx;
						background: linear-gradient(270deg, #FFEFD5 0%, #FED9A6 100%);
						border-radius: 6rpx;
						padding: 8rpx 16rpx;
						line-height: 28rpx;
						text-align: center;
						width: auto;
						display: inline-block;
					}

				}
			}
		}
	}
}
</style>