market-app-ui/pages/login/chooseRole.vue

<template>
	<view class="u-page">
		<navigation-bar title="选择角色" background-color="#fff" front-color="#000000" />
		<u-list :scrollable="false" height="500px">
			<u-list-item v-for="(item, index) in roles" :key="index" >
				<!-- <u-button class="custom-style" size="lager" type="primary" shape="circle" :text="`我是${item.roleName}`" @click="choose(item.id)"></u-button> -->
				<u-button :class="index==current?'active-custom-style':'custom-style'" size="lager" type="primary" shape="circle" @click="choose(item)">
					<text>我是{{item.roleName}}</text>
				</u-button>
			</u-list-item>
		</u-list>
		<u-button type="error" shape="circle" text="下一步" @click="next()"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roles: [],
				current: 1,
			}
		},
		created() {
			this.getList()
		},
		methods: {
			choose(data) {
				// console.log("选择角色");
				// console.log(data);
				for (let i = 1; i <= this.roles.length; i++) {
					if (this.roles[i].roleName == data.roleName) {
						this.current = i;
					}
				}
				this.isNext = true
			},
			getList(){
				this.$api.getIdentifyList().then(res => {
					console.log(res)
					this.roles = res.data
				})
			},
			next(){
				uni.navigateTo({
					url:"/pages/login/register?type="+this.current
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 30px;
	}

	.custom-style {
		margin-bottom: 20px;
		width: 80%;
		height: 70px;
		font-size: 26px;
		font-family: serif;
		background-color: #87CEFA;
		border: #87CEFA;
	}
	
	.active-custom-style {
		margin-bottom: 20px;
		width: 80%;
		height: 70px;
		font-size: 28px;
		background-color: #00BFFF;
		border: #00BFFF;
	}
	

	.r-role {
		font-size: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.l-role {
		// margin-left: 10px;
		// position: absolute;
		// right: 10px;
		// bottom: 10px;
	}
</style>