修改选择角色

pages/login/chooseRole.vue

@@ -1,9 +1,15 @@
 <template>
-	<view>
-		<view class="item">
-			<view class="title">我是货主</view>
-			<image src="../../static/images/role/jxs.png" mode="widthFix"></image>
+	<view class="list">
+		<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/bm.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/wjsh.png" mode="widthFix" v-if="index == 2"></image>
+			<image src="../../static/images/role/jxs.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>
 
@@ -12,75 +18,56 @@ export default {
 	data() {
 		return {
 			roles: [],
-			current: 1
+			current: -1
 		};
 	},
 	created() {
 		this.getList();
 	},
 	methods: {
-		choose(data) {
-			for (let i = 0; i < this.roles.length; i++) {
-				if (this.roles[i].roleName == data.roleName) {
-					this.current = data.id;
-				}
-			}
-			var that = this;
-			setTimeout(function () {
-				that.$common.to('/pages/login/register?type=' + that.current);
-			}, 500);
-		},
 		getList() {
 			this.$api.getIdentifyList().then(res => {
-				console.log(res);
 				this.roles = res.data;
 			});
 		},
 		next() {
-			// uni.navigateTo({
-			// 	url:"/pages/login/register?type="+this.current
-			// })
-			this.$common.to('/pages/login/register?type=' + this.current);
+			uni.navigateTo({
+				url: '/pages/login/register?type=' + this.roles[this.current].id
+			});
 		}
 	}
 };
 </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;
+.list {
+	padding: 20px;
+	.item {
+		margin-top: 15px;
+		background-color: #fff7f7;
+		height: 100px;
+		position: relative;
+		border-radius: 8px;
+		&.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>