jzred/pages/donate/idonate.vue

<template>
	<view class="idonate">
		<view class="one" v-show="limit === 1">
			<view class="item">
				捐赠个体<text>*</text>
				<radio-group @change="typeChange" class="check-box">
					<label  v-for="(item, index) in items" :key="item.value">
						<radio :value="item.iid" :checked="index === type" color="#f3392c" style="transform:scale(0.7)" />
						<text>{{ item.value }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item">
				捐赠单位<text>*</text>
				<input type="text" :value="unit" placeholder="请填写捐赠单位"/>
			</view>
			<view class="item">
				单位联系人 <text>*</text>
				<input type="text" :value="people" placeholder="请填写捐赠方联系人"/>
			</view>
			<view class="item">
				单位电话 <text>*</text>
				<input type="text" :value="people" placeholder="请填写单位联系方式"/>
			</view>
		</view>
		<view class="tow" v-show="limit === 2">
			
		</view>
		<view class="jg">
			
		</view>
		<view class="btn">
			<view class="next" v-show="limit === 1" @click="nextLimit()">
				下一页
			</view>
			<view class="prev" v-show="limit === 2" @click="prevLimit()">
				上一步
			</view>
			<view class="sub" v-show="limit === 2">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [
					{
						value: '企业（团体）',
						iid: '0'
					},
					{
						value: '个人',
						iid: '1'
					}
				],
				limit: 1,
				type: 0,//捐赠个体 1位个人 0为团体（企业）
				unit: '',//捐赠单位
				people: '',//捐赠方联系人或姓名
				phone: '',//单位电话或联系电话
			}
		},
		onLoad(ops) {
			if(ops) {
				this.type = ops.type*1
				console.log(this.type)
			}
			
		},
		methods: {
			nextLimit() {
				this.limit = 2
			},
			prevLimit() {
				this.limit = 1
			},
			typeChange(evt) {
				console.log(evt)
				this.type = evt.detail.value.
			}
		}
	}
</script>

<style lang="scss" scoped>
	.idonate {
		padding: 0 30rpx;
		margin-top: 20rpx;
		background-color: #fff;
	}
	.btn {
		
		height: 196rpx;
		width: 100%;
		text-align: center;
		display: flex;
		justify-content: center;
		line-height: 75rpx;
		.next {
			width: 478rpx;
			height: 75rpx;
			// margin: 0 auto;
			background: #FA7E67;
			border-radius: 35rpx;
			color: #fff;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.prev {
			width: 264rpx;
			height: 75rpx;
			border: 1px solid #FA7E67;
			border-radius: 35rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FA7E67;
			margin-right: 60rpx;
			line-height: 70rpx;
		}
		.sub {
			width: 264rpx;
			height: 75rpx;
			background: #FA7E67;
			border-radius: 35rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 70rpx;
		}
	}
	// .check-protocol uni-checkbox .uni-checkbox-input{
	// 		width: 25rpx;
	// 		height: 25rpx;
	// 		border-radius: 0;
	// 		border: 1rpx solid #C1C1C1;
	// 	}
	// 	/* 选中后的 背景样式  */
	// 	.check-protocol uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{
	// 		position: relative;
	// 		border: 1rpx solid #C1C1C1;
	// 		width: 25rpx;
	// 		height: 25rpx;
	// 	}
	// 	/* 选中后的*/
	// 	.check-protocol uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before{
	// 		position: absolute;
	// 		left: 50%;
	// 		top: 50%;
	// 		content: '';
	// 		width: 19rpx!important;
	// 		height: 19rpx!important;;
	// 		background-color: #3AAF4A;
	// 		transform: translate(-50%,-50%);
	// 	}
	.item {
		display: flex;
		align-items: center;
		height: 102rpx;
		border-bottom: 1px #ECECEC solid;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
	}
	.check-box {
		
		display: flex;
		display: inline-block;
	}
</style>