caimei-applets-crm/components/cm-module/orderDetails/transfeRecord.vue

<template name="transfe">
	<view class="transfe-template">
		 <!-- 转账信息 -->
		 <view class="transfe-content">
			<view class="transfe-top" @click="showTransfe">
				<text class="name">转账信息</text>
				<text class="iconfont icon-web_xiangxiazhankai" :class="{'icon-web_xiangxiazhankai-active':isOpen}"></text>
			</view>
			<view :class="{'transfe-warp--hide':!isOpen}" class="transfe-warp">
				<view  class="transfe-warp__wrapper transfe-animation" 
					   :style="{'transform':isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-50%)'}">
					<view class="table">
						<text>开户行：</text>
						<text>{{transfeData.bankBranch}}</text>
					</view>
					<view class="table">
						<text>银行账号：</text>
						<text>{{this.$reg.bankRegex(transfeData.bankNumber)}}</text>
					</view>
					<view class="table">
						<text>户名：</text>
						<text>{{transfeData.accountName}}</text>
					</view>
				</view>
			</view>
		 </view>
	</view>
</template>

<script>
	export default{
		name:"transfe",
		data() {
			return{
				isOpen:false,
				transfeData:{
					bankBranch:'中信银行（深圳泰然支行）',
					bankNumber:'6217 6803 0362 0897',
					accountName:'周仁声'
				},
			}
		},
		created(){
			
		},
		computed: {

		},
		methods:{
			showTransfe(){
				this.isOpen = !this.isOpen
			}
		}
	}
</script>

<style lang="scss">
	.transfe-template{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		float: left;
		margin-top: 24rpx;
		.transfe-content{
			width: 702rpx;
			padding: 20rpx 24rpx;
			height: auto;
			.transfe-top{
				width: 100%;
				height: 40rpx;
				line-height: 40rpx;
				font-size: $font-size-28;
				color: $text-color;
				text-align: left;
				.name{
					float: left;
					font-weight: bold;
				}
				.icon-web_xiangxiazhankai{
					transform: rotate(0deg);
					transform-origin: center center;
					float: right;
					font-size: $font-size-32;
					color: #000000;
					/* transition: transform 0.3s ease;*/
					transition-property: transform;
					transition-duration: 0.3s;
					transition-timing-function: ease;
				}
				.icon-web_xiangxiazhankai-active{
					transform: rotate(180deg);
				}
			}
			.transfe-warp{
				width: 100%;
				padding: 24rpx 0 0 0;
				overflow: hidden;
				.table{
					height: 76rpx;
					line-height: 76rpx;
					font-size: $font-size-26;
					color: $text-color;
					text-align: left;
				}
			}	
			.transfe-animation {
				/* transition: transform 0.3s ease;*/
				transition-property: transform;
				transition-duration: 0.3s;
				transition-timing-function: ease;
			}
			.transfe-warp__wrapper{
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
			}
			.transfe-warp--hide {
				padding: 0 0;
				height: 0px;
				line-height: 0px;
			}		
		}
	}
</style>