BiKing/pages/property/modules/Bibi/setting-bi.vue

<template>
	<uni-popup ref="popupRef" type="bottom">

		<view class="popup-box">
			<view class="popup-title">
				<text class="title-side"></text>
				<text class="title-name">选择账户</text>
				<text class="title-side iconfont">&#xe621;</text>
			</view>

			<view class="stocks-content">
				<block v-for="(item,index) in BiType">
					<view class="stocks-item" @click.stop="settingBiType(item)">
						<text class="stocks-text">{{ getBiName(item) }}账户</text>
						<text v-if="item === activeBiType" class="active-stocks iconfont">&#xe627;</text>
					</view>
				</block>
			</view>
		</view>
	</uni-popup>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'
	import { biName } from "../card.js"
	export default {
		name: 'setting-color',
		props:{
			activeBiType:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				BiType:[
					'legal',
					'lever',
				]
			 
			};
		},
		computed: {
			getBiName(){
				return function(key){
					return biName[key]
				}
			},
		},
	 
		mounted() {
		// this.open()
		},
		methods: {
			open() {
				this.$nextTick(() => {
					this.$refs.popupRef.open();
				})
			},
			settingBiType(item){
				this.$emit('update:activeBiType' , item)
				this.$refs.popupRef.close();
				 
			}

		}
	}
</script>

<style lang="scss" scoped>
	.popup-box {
		width: 100%;
		background-color: #Fff;
		border-radius: 50rpx 50rpx 0px 0px;
	
		.popup-title {
			width: 100%;
			height: 106rpx;
			border-radius: 50rpx 50rpx 0px 0px;
			background-color: #F7F7F7 !important;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;
			font-weight: 700;
	
			.title-side {
				flex-shrink: 0;
				font-size: 28rpx;
				width: 40rpx;
				height: 100%;
				line-height: 106rpx;
				color: #666;
				font-weight: 400;
			}
		}
	
		// <view class="stocks-content">
		// 	<block v-for="(val,key,index) in stocksColorObj">
		// 		<view class="stocks-item">
		// 			<text class="stocks-text">{{ val }}</text>
		// 			<text v-if="stocksColor === key" class="active-stocks iconfont">&#xe627;</text>
		// 		</view>
		// 	</block>
		// </view>
		.stocks-content{
			width: 100%;
			background-color: #Fff;
			.stocks-item{
				width: 100%;
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 $pages-padding 0 60rpx;
				border-bottom: 1rpx solid $border-color;
				font-size: 28rpx;
			}
			.active-stocks{
				color: $Theme-Color;
			}
		}
	
	}
</style>