xs/xs-app/components/read/rechargeItem.vue

<template>
	<!-- :class="{ SelectStatus: isSelectStatus() ,UnSelectStatus: isSelectStatus()==false }" -->
	<view :style="{'backgroundColor':selectBgColor}" >
		<view v-if="isVipRecharge()==true" @click="onItemClick">
			{{recharge_item_data.name}}--VIP{{recharge_item_data.day}}天
		</view>
		<view v-if="isVipRecharge()==false" @click="onItemClick">
			充值{{recharge_item_data.coin}} 赠送{{recharge_item_data.give_coin}}
		</view>
	</view>

</template>

<script lang="ts" setup>
	import { onMounted, ref, watch } from 'vue';
	import { recharge_list_data } from '../../data/data';
	const {recharge_item_data} =  defineProps({recharge_item_data:{type:recharge_list_data,required:true,default:null}})
	const emits = defineEmits(['itemClick'])
	function isVipRecharge():boolean{
		return recharge_item_data.is_vip==1
	}
	let isSelect = ref(false)
	function isSelectStatus(){
		return isSelect
	}
	
	onMounted(()=>{
		if(recharge_item_data.is_default==1&&isSelect.value==false){
			onItemClick()
		}
	})
	
	function onItemClick(){
		emits('itemClick',recharge_item_data.goods_id,recharge_item_data.is_vip==1)
	}
	
	let selectBgColor = ref('#ffffff')
	
	watch(()=>isSelect.value,()=>{
		if(isSelect.value==true){
			selectBgColor.value = '#adff2f'
		}else{
			selectBgColor.value = '#ffffff'
		}
	})
	
	function updateSelectStatus(goods_id:number){
		isSelect.value = (goods_id==recharge_item_data.goods_id)
	}
	
	defineExpose({updateSelectStatus})
</script>

<style scoped lang="scss">

</style>