BiKing/pages/content/charge-record.vue

<template>
	<view class="record-page">
		<!-- 头部 -->
		<headContent>&#xe642;
			<template #left>
				<reverse-back />
			</template>
			<template #content>
				<view class="haed-title">
					充币记录
				</view>
			</template>
		</headContent>
		<!-- &#xe636; -->
		<view class="record-type">
			<view class="type-info" @click.stop="openSelectCurrency()">
				<text class="type-text">{{ currencyVal || '全部币种'}}</text>
				<text class="type-icon iconfont ">&#xeb6d;</text>
			</view>
			<view  @click.stop="openSelectTime()" class="condition-icon iconfont">&#xe611;</view>
		</view>
		
		<selectCurrency ref="selectCurrency" :currencyVal.sync="currencyVal"/>
		<selectTime ref="selectTimeRef" />
	</view>
</template>

<script>
	import reverseBack from "@/components/headModules/reverse-back.vue"
	import selectCurrency from "./components/select-currency.vue"
	import selectTime from "./components/select-time.vue"
	export default {
		name: 'charge-record',
		components: {
			reverseBack,
			selectCurrency,
			selectTime
		},
		data() {
			return {
				// share
				currencyVal:undefined
			}
		},

		methods: {
			openSelectCurrency(){
				this.$nextTick(() => {
					this.$refs.selectCurrency.open();
				})
			},
			openSelectTime(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record-type{
		width: 100%;
		height: 90rpx;
		border: 1rpx solid $border-color;
		padding: 0 $pages-padding;
		border-left: none;
		border-right: none;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10rpx;
		.type-info{
			width: 220rpx;
			height: 60rpx;
			background-color: #f5f5f5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			padding: 0 20rpx;
			.type-icon{
				font-size: 22rpx;
				color: #ccc;
			}
		}
		.condition-icon{
				color: #666;
			// font-size: rpx;
		}
	}
 
</style>