Web_TracerMethodology/components/tm-radio-group/radio-group.vue

<template>
	<view class="radio-group-view">
		<view v-if="label" class="label-view">
			<text>{{ label }}</text>
		</view>
		<view class="radio-group">
			<template v-for="(item, i) in list">
				<view class="radio-item" :key="i" @click="toggleSelect(item, i)">
					<text class="text">{{ item[setting.name] }}</text>
					<image class="icon"
					  :src="`/static/${item[setting.value] === defaultValue ? 'check-radio' : 'check-no'}.png`"></image>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	/**
	 * 单选列表组合
	 * 芦荟
	 * 2021.2.2
	 * props：属性说明看tm-radio-gruop.vue
	 */
	export default {
	  props: ['list', 'defaultValue', 'label', 'setting'],
		methods: {
			/**
			 * 选中变化调用
			 * @param {Object} selectData 当前选中的对象
			 * @param {Object} index 当前选中下标
			 *
			 * 返回的参数
			 * selectData[this.setting.value]: 当前选中的值
			 * selectData： 当前选中的整条数据
			 * index：      当前选中的下标
			 */
			toggleSelect(selectData, index){
				this.$emit(
				  'change',
				  selectData ? selectData[this.setting.value] : '',
					selectData,
					index
				);
			}
		}
	}
</script>

<style lang="less">
	.radio-group-view {

		.label-view {
			height: 47.5rpx;
			line-height: 45rpx;
			padding-left: 25rpx;

			>text {
				font-size: 22.5rpx;
				color: #666F80;
			}
		}

		.radio-group {
			padding-left: 25rpx;
			background-color: #fff;

			.radio-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 87.5rpx;
				border-bottom: 0.62rpx solid #DADEE6;
				padding-right: 25rpx;

				.text {
					font-size: 22.5rpx;
					color: #292C33;
				}

				.icon {
					width: 25rpx;
					height: 25rpx;
				}
			}
		}
	}
</style>