circulation_ancientCoins_new/components/visitorAccount.vue

<template>
  <view :class="'visitor-account-com'+(open?' default-open':'')">
		<uni-collapse v-model="open?valueOpen:valueClose" @change="change">
			<uni-collapse-item :title="hospital_name" :thumb="thumb" :errmsg="errmsg" :disabled="disabled">
				<view class="collapse-list" v-if="visitorInfo">
					<view class="account-list">
						<!-- 单次项目 -->
						<view class="account-item" v-if="visitorInfo.single_items && visitorInfo.single_items.length > 0">
							<view class="title PfScSemibold">单次项目</view>
							<view class="item" v-for="(item, index) in visitorInfo.single_items" :key="'single_'+index">
								<text>{{item.name}}</text>
								<text :class="{'outnum': parseInt(item.num) < 0}">{{parseInt(item.num) >= 0 ? '治疗'+item.num+'次' : '欠'+Math.abs(parseInt(item.num))+'次'}}</text>
							</view>
						</view>

						<!-- 疗程套餐 -->
						<view class="account-item" v-if="visitorInfo.treatment_package && Object.keys(visitorInfo.treatment_package).length > 0">
							<view class="accout-package" v-for="(packageItem, packageId) in visitorInfo.treatment_package" :key="'package_'+packageId">
								<view class="title PfScSemibold">疗程套餐</view>
								<span class="package-name over">{{packageItem.name}}</span>
								<view class="item" v-for="(item, index) in packageItem.data" :key="'package_item_'+index" :class="{'notice': parseInt(item.num) < 0}">
									<text>{{item.name}}</text>
									<text :class="{'outnum': parseInt(item.num) < 0}">{{parseInt(item.num) >= 0 ? '治疗'+item.num+'次' : '欠'+Math.abs(parseInt(item.num))+'次'}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
  </view>
</template>

<script>
export default {
  name: "visitorAccount",
  props: {
		errmsg: {
			type: String,
			default: ''
		},
		thumb:{
			type: String,
			default:''
		},
		open: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		depart_id: {
			type: [Number, String],
			default: 0
		},
		visitor_id: {
			type: [Number, String],
			default: 0
		},
		hospital_name: {
			type: String,
			default: '医院科室'
		}
  },
  data() {
    return {
			cssUrl:this.cssUrl,
			valueOpen:['0'],
			valueClose:['1'],
			visitorInfo: false
    }
  },
  mounted() {
    if(this.open) {
      this.get_visitor_info();
    }
  },
  methods: {
		change(e) {
			if(e[0] == 0) this.get_visitor_info()
		},
		async get_visitor_info() {
			this.visitorInfo = false
			var obj = new Object()
			obj.depart_id = this.depart_id
			obj.visitor_id = this.visitor_id
			await this.$http.req('user/get_visitor_info', obj, 'POST').then(data=>{
					if(data == -1) return
					this.visitorInfo = data;
			});
		}
  }
};
</script>

<style lang="scss" scoped>
	.visitor-account-com{
		width: 100%;
		height: auto;
		overflow: hidden;
		margin-top: 28rpx;
		padding: 12px;
    box-sizing: border-box;
    background: #F9FAFB;

		&.default-open{
			::v-deep{
				.uni-collapse-item__title{
					display: none !important;
				}
				.account-list{
					margin-top: 0 !important;
				}
				.uni-collapse-item__wrap{
					margin-top: 16rpx;
				}

				.uni-collapse-item__wrap-content{
					border: none !important;
				}
			}
		}
		::v-deep{
			.uni-collapse-item__wrap-content{
				border: none;
			}
			.uni-collapse-item__wrap{
				background: #F9FAFB;
				.uni-collapse-item__wrap-content{
					background: #F8FFF7;
					margin-bottom:24rpx;
					&.open{
						.account-list{
							padding: 24rpx;
							margin-top: 24rpx;
							box-sizing: border-box;
							width: 100%;
							height: auto;
							overflow: hidden;
							.account-item{
								margin-bottom: 40rpx;
								&:last-of-type{
									margin-bottom: 24rpx;
								}
								.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{
									margin-bottom: 40rpx;
									&:last-of-type{
										margin-bottom: 0rpx;
									}
									.package-name{
										border-radius: 6rpx;
										background: linear-gradient(270deg, #FFEFD5 0%, #FED9A6 100%);
										height: 43rpx;
										line-height: 43rpx;
										padding: 0px 16rpx;
										margin-top: 24rpx;
										width: auto;
										display: inline-block;
										font-size: 28rpx;
										color: #79624A;
										text-align: center;
										max-width: calc(100% - 24rpx);
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>