prevent_drowning_app/work/pages/rz/role.vue

<template>
  <view class="box">
	  <view class="htit">请选择您的身份</view>
	<view class="rolesbox flexc" v-for="(ite,idx) in roles" :key="idx" @click="getCheck(ite.val)">
		<!-- <image :src="rolebga"></image> -->
		<view class="limgs">
			<image :src="rolea" class="imga" v-if="ite.val==0"></image>
			<image :src="roleb" class="imgb" v-else-if="ite.val==1"></image>
			<image :src="rolec" class="imga" v-else-if="ite.val==2"></image>
			<image :src="roled" class="imga" v-else></image>
		</view>
		<view class="titbox">
			<view class="tit">{{ite.tit}}</view>
			<view class="txt">{{ite.txt}}</view>
		</view>
		<view class="checkbox" >
			<image :src="chose" v-if="cheval==ite.val"></image>
			<image :src="nchose" v-else></image>
		</view>
	</view>	
	<view class="abtns">确认</view>
	<loading></loading>
  </view>
</template>

<script>
import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
import {getDictionaryFn} from "@/api/mine/register.js"
  export default {
	components:{},
	data(){
		return{
			rolea:require("@/work/images/rz/rolea.png"),
			roleb:require("@/work/images/rz/roleb.png"),
			rolec:require("@/work/images/rz/rolec.png"),
			roled:require("@/work/images/rz/roled.png"),
			chose:require("@/work/images/rz/chose.png"),
			nchose:require("@/work/images/rz/nchose.png"),
			roles:[{tit:'家长',txt:'parents',val:0,},{tit:'社区',txt:'community',val:1,},{tit:'物业',txt:'property management',val:2,},{tit:'水利局',txt:'water conservancy bureau',val:3,},],
			cheval:0
		}
	},
	onShow() {
		
	},
    onLoad: function() {
		// this.init();
    },
	methods:{
		checkPermi,checkRole,
		init(){
			//工单类型
			getDictionaryFn('work_order_type').then(res => {
				if (res.code == 200) {
					this.gdList = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
		},
		getCheck(val){
			this.cheval=val;
		},
		getDataFn(){
			
			getworkInfoList(params).then(res=>{
				
			})
				
		},
		
		
		
	}
  }
</script>
<style lang="scss" scoped>
.box{padding: 36rpx 48rpx 54rpx;
	.htit{font-weight: bold;font-size: 30rpx;color: #000000;margin-bottom: 52rpx;}
}
.rolesbox{width: 100%;height: 200rpx;position: relative;border-radius: 0 100rpx 0 100rpx;background: #F8F8F8;padding-left:206rpx;margin-bottom: 70rpx;
	.titbox{
		.tit{font-weight: bold;font-size: 30rpx;color: #000000;margin-bottom: 16rpx;}
		.txt{font-weight: bold;font-size: 24rpx;color: #AAAAAA;}
		
	}
	.limgs{position: absolute;left: 46rpx;bottom: 0;width: 106rpx;height: 178rpx;display: flex;align-items: center;justify-content: center;
		.imga{width: 100%;height: 100%;}
		.imgb{width: 92rpx;height: 174rpx;}
	}
	.checkbox{width: 30rpx;height: 30rpx;position: absolute;right: 46rpx;bottom: 34rpx;
		image{width: 100%;height: 100%;}
	}
}
</style>