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

<template>
	<view class="list animated fadeInDown">
		<view class="item" :class="{ active: current == index }" v-for="(item, index) in roles" :key="index" @click="current = index">
			<view class="title">我是{{ item.roleName }}</view>
			<image src="../../static/images/role/sh.png" mode="widthFix" v-if="index == 0"></image>
			<image src="../../static/images/role/sj.png" mode="widthFix" v-if="index == 1"></image>
			<image src="../../static/images/role/sgs.png" mode="widthFix" v-if="index == 2"></image>
			<image src="../../static/images/role/zz.png" mode="widthFix" v-if="index == 3"></image>
			<image src="../../static/images/role/bm.png" mode="widthFix" v-if="index == 4"></image>
			<view class="clear"></view>
		</view>
		<button class="btn" @click="next()" :disabled="current == -1">下一步</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			roles: [],
			current: -1
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			this.http.request({
				url: '/sp-admin/app/AppRole/getList',
				success: res => {
					this.roles = res.data.data;
				}
			});
		},
		next() {
			uni.navigateTo({ url: '/pages/login/register?type=' + this.roles[this.current].id });
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $pg;
}
.list {
	padding: 20px;
	.item {
		margin-top: 15px;
		background-color: white;
		height: 100px;
		position: relative;
		border-radius: 12px;
		&.active {
			border: 2px solid $main-color;
		}
		.title {
			float: left;
			line-height: 96px;
			padding-left: 20px;
			font-weight: bold;
			color: $font-c;
			font-size: 20px;
		}
		image {
			position: absolute;
			right: 23px;
			top: 15px;
			width: 50px;
		}
	}
	.btn {
		margin-top: 30px;
	}
}
</style>