web3-202226701037/chexnet-master-MP/pages/my/setting/setting.vue

<template>
	<view>
		<view class="button-group">
			<button @click="radioChange">
				<view class="align-center flex justify-between">
					<image style="background-color: #ffffff;" :src="doctor_gender == 1 ? doctor_woman : doctor_man"></image>
					<text>主页医生</text>
				</view>
				<radio-group class="center">
					<label class="margin-right-sm"><radio class="margin-right-xs" value="r1" :checked="doctor_gender == 0" />男</label>
					<label><radio class="margin-right-xs" value="r2" :checked="doctor_gender == 1" />女</label>
				</radio-group>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			let doctor_gender = uni.getStorageSync('doctor_gender');
			if(doctor_gender === 0) this.doctor_gender = 0;
			else this.doctor_gender = 1;
		},
		data() {
			return {
				doctor_woman: '/static/img/女医生.png',
				doctor_man: '/static/img/男医生.png',
				doctor_gender: 1
			}
		},
		methods: {
			radioChange() {
				if(this.doctor_gender === 1) this.doctor_gender = 0;
				else this.doctor_gender = 1;
				uni.removeStorageSync('doctor_gender');
				uni.setStorageSync('doctor_gender',this.doctor_gender);
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f5f5f5;
	}
	text{
		font-size: 18px;
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center;    /* 垂直居中 */
	}
	image{
		margin-right: 10px;
		width: 30px;
		height: 30px;
		background-color: #ffffff;
	}
	.button-group{
		border: none;
		width: 100%;
		background-color: #ffffff;
		margin-bottom: 15px;
		border-radius: 0px;
		
		button{
			border: 1px;
			border-color: #000;
			border-radius: 0px;
			height: 12vw;
			padding: 0 10px;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
		}
		button:active {
			filter: brightness(80%);
			opacity: 0.8;
		}
	}
</style>