gas-station-ticket-uniapp-240822/components/config/configPopup.vue

<template>
	<!-- 协议配置弹出层组件 -->
	<view>
		<uv-parse 
		v-if="tiled"
		:content="content">
		</uv-parse>
		
		<uv-popup
		v-else
		:customStyle="{height: '75vh'}"
		ref="popup">
			<view id="config">
				<uv-parse :content="content"></uv-parse>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name:"configPopup",
		props : {
			findValue : {//查找对应的值
				type : String,
			},
			findKey : {//查找的键
				type : String,
				default : 'keyValue'
			},
			contentKey : {//展示内容的键
				type : String,
				default : 'content'
			},
			languageContentKey : {//国际化展示内容的键
				type : Object,
			},
			index : {//索引查找，优先级高于查找
				type : Number,
			},
			tiled : {
				default : false,
				type : Boolean,
			}
		},
		data() {
			return {
			};
		},
		computed : {
			...mapState(['configList']),
			locale(){
				return this.$t('components.config.configPopup')
			},
			obj(){
				if(typeof this.index == 'number'){
					return this.configList[this.index]
				}
				
				for(let i = 0; i < this.configList.length; i++){
					if(this.configList[i][this.findKey] == this.findValue){
						return this.configList[i]
					}
				}
			},
			objKey(){
				if(this.languageContentKey 
				&& this.languageContentKey[this.$i18n.locale]){
					return this.languageContentKey[this.$i18n.locale]
				}
				return this.contentKey
			},
			content(){
				if(!this.obj){
					return `<h3>${this.locale.noData}</h3>`
				}
				return this.obj[this.objKey]
			}
		},
		methods : {
			open(type = 'bottom'){
				if(this.tiled){
					return
				}
				this.$refs.popup.open(type);
			},
		},
	}
</script>

<style scoped lang="scss">
#config{
	padding: 20rpx;
	line-height: 50rpx;
}
</style>