jzred/pages/donate/idonate.vue

<template>
	<view class="idonate">
		<view class="one" v-show="limit === 1">
			<view class="item">
				<view class="item-tit">捐赠个体<text>*</text></view>
				<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 style="color: #000000;">{{ item.value }}</text>
					</label>
				</radio-group>
			</view>
			<template v-if="type === 0">
				<view class="item">
					<view class="item-tit">捐赠单位<text>*</text></view>
					<input type="text" :value="unit" placeholder="请填写捐赠单位"/>
				</view>
				<view class="item">
					<view class="item-tit">单位联系人<text>*</text></view>
					<input type="text" :value="dwPeople" placeholder="请填写捐赠方联系人"/>
				</view>
				<view class="item">
					<view class="item-tit">单位电话<text>*</text></view>
					<input type="text" :value="dwPhone" placeholder="请填写单位联系方式"/>
				</view>
				<view class="item">
					<view class="item-tit">企业信用代码</view>
					<input type="text" :value="qyxydm" placeholder="请填写单位的企业信用代码"/>
				</view>
			</template>
			<template v-if="type === 1">
				<view class="item">
					<view class="item-tit">姓名<text>*</text></view>
					<input type="text" :value="unit" placeholder="请填写您的姓名"/>
				</view>
				<view class="item">
					<view class="item-tit">联系方式<text>*</text></view>
					<input type="text" :value="unit" placeholder="请填写您的联系方式"/>
				</view>
				<view class="item">
					<view class="item-tit">身份证号</view>
					<input type="text" :value="unit" placeholder="请填写您的身份证号"/>
				</view>
			</template>
			<view class="item">
				<view class="item-tit">是否匿名</view>
				<radio-group @change="anonymousChange" class="check-box">
					<label>
						<radio value="1" :checked="IsAnonymous" color="#f3392c" style="transform:scale(0.7)" />
						<text style="color: #000000;">是</text>
					</label>
					<label>
						<radio value="0" :checked="!IsAnonymous" color="#f3392c" style="transform:scale(0.7)" />
						<text style="color: #000000;">否</text>
					</label>
				</radio-group>
			</view>
			<view class="item">
				<view class="item-tit">物流方式</view>
				<picker @change="bindLogChange" :range="logs">
					<view class="log select" :class="{'action': log }">{{ log || '请选择物流方式' }}</view>
				</picker>
			</view>
			<view class="item no-border-b">
				<view class="item-tit">开具发票<text>*</text></view>
				<radio-group @change="openChange" class="check-box">
					<label>
						<radio value="1" :checked="Isopen" color="#f3392c" style="transform:scale(0.7)" />
						<text style="color: #000000;">是</text>
					</label>
					<label>
						<radio value="0" :checked="!Isopen" color="#f3392c" style="transform:scale(0.7)" />
						<text style="color: #000000;">否</text>
					</label>
				</radio-group>
			</view>
			<view class="mask">
				<textarea :value="mask" placeholder="如果有备注请填写"/>
			</view>
			<view class="bbtm">
				
			</view>
		</view>
		<view class="tow" v-show="limit === 2">
			<view class="t-item">
				<view class="t-tit">
					实物照片(必填)
				</view>
				<image src="" mode="" v-if="!cardimg1"  @click.stop="imgsub('cardimg1')"></image>
				<image :src="cardimg1" mode="" v-if="cardimg1"  @click.stop="imgsub('cardimg1')"></image>
			</view>
			<view class="t-item">
				<view class="t-tit">
					营业执照(必填)                    
				</view>
				<image src="" mode="" v-if="!cardimg2"  @click.stop="imgsub('cardimg2')"></image>
				<image :src="cardimg2" mode="" v-if="cardimg2"  @click.stop="imgsub('cardimg2')"></image>
			</view>
			<view class="t-item">
				<view class="t-tit">
					质量合格书(必填)
				</view>
				<image src="" mode="" v-if="!cardimg3"  @click.stop="imgsub('cardimg3')"></image>
				<image :src="cardimg3" mode="" v-if="cardimg3"  @click.stop="imgsub('cardimg3')"></image>
			</view>
			<view class="t-item">
				<view class="t-tit">
					价值凭证
				</view>
				<image src="" mode="" v-if="!cardimg4"  @click.stop="imgsub('cardimg4')"></image>
				<image :src="cardimg4" mode="" v-if="cardimg4"  @click.stop="imgsub('cardimg4')"></image>
			</view>
		</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>
	import { upload } from '@/api/ask.js';
	export default {
		data() {
			return {
				items: [
					{
						value: '企业（团体）',
						iid: '0'
					},
					{
						value: '个人',
						iid: '1'
					}
				],
				IsAnonymous: false,
				limit: 1,
				type: 0,//捐赠个体 1位个人 0为团体（企业）
				unit: '',//捐赠单位
				dwPeople: '',//捐赠方联系人
				dwPhone: '',//单位电话
				log: '',//物流方式
				logs: ['顺丰','邮政'],
				Isopen: false,//是否开具发票
				mask: '',//备注
				qyxydm: '',//企业信用代码
				name: '',// 捐赠人姓名
				phone: '',//捐赠人联系方式
				identityNumber: '',//身份证号
				cardimg1: '',//实物照片
				cardimg2: '',//营业执照
				cardimg3: '',//质量合格书(必填)
				cardimg4: '',//价值凭证
				
			}
		},
		onLoad(ops) {
			if(ops.type) {
				this.type = ops.type*1
				console.log(this.type,'++++++++')
			}
			
		},
		methods: {
			//下一页
			nextLimit() {
				this.limit = 2
			},
			//下一页
			prevLimit() {
				this.limit = 1
			},
			//选择捐赠是个人或团体
			typeChange(e) {
				this.type = e.detail.value*1
				console.log(this.type)
			},
			//选择是否匿名
			anonymousChange(e) {
				if(e.detail.value !== '1') {
					this.IsAnonymous = false
				}else {
					this.IsAnonymous = true
				}
			},
			//选择物流方式
			bindLogChange(e) {
				this.log = this.logs[e.detail.value*1]
			},
			//
			openChange(e) {
				if(e.detail.value !== '1') {
					this.Isopen = false
				}else {
					this.Isopen = true
				}
			},
			imgsub(e) {
				upload({
					filename: ''
				}).then(data => {
					this[e] = data[0].url;
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #fff;
	}
	.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;
		}
	}
	.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;
		line-height: 102rpx;
		.item-tit {
			flex-shrink: 0;
			display: inline-block;
			width: 200rpx;
		}
		text {
			color: #F3392C;
		}
		input {
			display: inline-block;
			width: 100%;
		}
		.log {
			// display: inline-block;
			width: 400rpx;
			color: #999;
		}
		.select {
			color: #000;
		}
		
	}
	.mask {
		padding-left: 202rpx;
		textarea {
			width: 396rpx;
			height: 166rpx;
			border: 1rpx solid #ccc;
			border-radius: 10rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000;
			line-height: 24rpx;
			padding: 24rpx 16rpx;
		}
	}
	.check-box {
		flex-grow: 0;
		display: flex;
		display: inline-block;
	}
	.no-border-b {
		border-bottom: none;
	}
	.bbtm {
		margin-top: 40rpx;
		width: 689rpx;
		height: 1rpx;
		background: #ECECEC;
	}
	.t-item {
		padding: 35rpx 0;
		border-bottom: 1px #ECECEC solid;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		&:last-of-type {
			border-bottom: none;
		}
		image {
			display: block;
			width: 160rpx;
			height: 160rpx;
			background: red;
			border-radius: 5rpx;
			margin: 0 auto;
		}
	}
</style>