front-end/hdApp/src/components/app-formRadio-btn.vue

<template>
	<tui-list-cell class="line-cell code-wrap" :hover="false">
		<view class="tui-title">{{ title }}</view>
		<view>
			<button
				v-for="(item, index) in selectOptions"
				:key="index"
				@click="changeWay(index, item)"
				:class="[
					'admin-button-com',
					'mini-btn',
					currenSelect == item.id ? 'blue' : 'default'
				]"
			>
				{{ item.name }}
			</button>
		</view>
	</tui-list-cell>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
export default {
	name: "AppFormRadioBtn",
	components: {
		TuiListCell
	},
	props: {
		title: {
			type: String,
			default: ""
		},
		currenSelect: {
			style: String,
			default: "1"
		},
		selectOptions: {
			type: Array, //1自取 2本店送 3快递送
			default: () => [
				{ name: "自取", id: "1" },
				{ name: "本店送", id: "2" },
				{ name: "快递送", id: "3" }
			]
		}
	},
	methods: {
		changeWay(index, item) {
			this.$emit("update:currenSelect", item.id);
			this.$emit("selectBack", { index: index, item: item });
		}
	}
};
</script>

<style lang="scss" scoped>
.admin-button-com {
	margin-right: 20upx;
}
// 公共
.line-cell {
  .tui-title {
    width: 210upx;
    color: $fontColor2;
  }
  .tui-input {
    width: calc(100% - 210upx);
    font-size: 28upx;
  }
  .tui-placeholder {
    color: #ccc;
  }
  .phcolor {
    color: #ccc;
  }
}
</style>