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(item)" :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 class="jzwz">
				<view class="item-tit">捐赠物资<text>*</text></view>
				<view class="choose-box">
					<view class="choose-item" v-for="(item,index) in wzList" :key="index" @click="dianji(index)">
						<picker @change="bindWzChange" :range="wzs">
							<view class="wz select" :class="{'action': item.wzname }">{{ item.wzname }}</view>
						</picker>
						<input type="number" v-model="item.num" placeholder="填写数量"/>
					</view>
					<view class="more" @click="addMore">
						+添加更多
					</view>
				</view>
			</view>
		</view>
		<view class="tow" v-show="limit === 2">
			<view class="t-item">
				<view class="t-tit">
					实物照片(必填)<text>{{swimg | much}}/3</text>
				</view>
				<view class="img-list flex">
					<template v-for="(item,index) in swimg">
						<image src="../../static/images/upload.png" mode="" v-if="!item"  @click.stop="imgsub(swimg,index)" :key="index"></image>
						<image :src="item" mode="" v-if="item"  @click.stop="imgsub(item)"  :key="index"></image>
					</template>
				</view>
			</view>
			<view class="t-item" v-if="type === 0">
				<view class="t-tit">
					营业执照(必填)<text>{{yyimg | much}}/3</text>
				</view>
				<view class="img-list flex">
					<template v-for="(item,index) in yyimg">
						<image src="../../static/images/upload.png" mode="" v-if="!item"  @click.stop="imgsub(yyimg,index)" :key="index"></image>
						<image :src="item" mode="" v-if="item"  @click.stop="imgsub(yyimg,index)"  :key="index"></image>
					</template>
				</view>
			</view>
			<view class="t-item">
				<view class="t-tit">
					质量合格书(必填)<text>{{zlimg | much}}/3</text>
				</view>
				<view class="img-list flex">
					<template v-for="(item,index) in zlimg">
						<image src="../../static/images/upload.png" mode="" v-if="!item"  @click.stop="imgsub(zlimg,index)" :key="index"></image>
						<image :src="item" mode="" v-if="item"  @click.stop="imgsub(zlimg,index)"  :key="index"></image>
					</template>
				</view>
			</view>
			<view class="t-item">
				<view class="t-tit">
					价值凭证<text>{{jzimg | much}}/3</text>
				</view>
				<view class="img-list flex">
					<template v-for="(item,index) in jzimg">
						<image src="../../static/images/upload.png" mode="" v-if="!item"  @click.stop="imgsub(jzimg,index)" :key="index"></image>
						<image :src="item" mode="" v-if="item"  @click.stop="imgsub(jzimg,index)"  :key="index"></image>
					</template>
				</view>
			</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: '',//身份证号
				wzs: ['帐篷类（帐篷）','棉被类(被子)'],
				wzList: [
					{
						wzname: '帐篷类（帐篷）',
						num: null
					},
					{
						wzname: '棉被类(被子)',
						num: null
					}
				],
				swimg: [''],//实物照片
				yyimg: [''],//营业执照
				zlimg: [''],//质量合格证书
				jzimg: [''],//价值凭证
			}
		},
		filters:{
			much(val) {
				let num =  0
				val.forEach(item => {
					if(item) {
						num += 1
					}
				})
				return num
			}
		},
		onLoad(ops) {
			if(ops.type) {
				this.type = ops.type*1
				console.log(this.type,'++++++++')
			}
			
		},
		mounted() {
			// this.$set(this,'wzList',[this.wz1,this.wz2])
		},
		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(item,index) {
				console.log(index,item)
				
				upload({
					filename: ''
				}).then(data => {
					console.log(data,'6666666666')
					this.$set(item,index,data[0].url)
					if(index < 2) {
						this.$set(item,index+1,'')
					}
				});
			},
			//选择捐献物资分类
			bindWzChange(e){
				// item.wzname = e.detail.value
				// console.log(item)
				this.wzList[this.currentWzIndex].wzname = this.wzs[e.detail.value]
				console.log(this.wzList)
				
			},
			dianji(index) {
				this.currentWzIndex = index
			},
			//添加更多
			addMore() {
				this.wzList.push({
					wzname: this.wzs[0],
					num: null
				})
			}
			
		}
	}
</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%;
		width: 690rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		line-height: 75rpx;
		padding-bottom: 54rpx;
		// padding-top: 54rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		z-index: 9;
		.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: 32rpx;
			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;
		}
		.t-tit {
			position: relative;
			text {
				display: inline-block;
				width: 73rpx;
				height: 31rpx;
				background: #F0433C;
				border-radius: 14rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 31rpx;
				text-align: center;
				position: absolute;
				right: 0;
				// left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
			
		}
		.img-list {
			margin-top: 20rpx;
			justify-content: center;
			image {
				margin-right: 20rpx;
			}
		}
	}
	.jzwz {
		display: flex;
		.item-tit {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
			padding-top: 39rpx;
			line-height: 1;
			width: 200rpx;
		}
		.choose-box {
			padding-top: 24rpx;
			.choose-item {
				display: flex;
				margin-bottom: 15rpx;
				.wz {
					padding-left: 58rpx;
					width: 297rpx;
					height: 66rpx;
					background: #F3F3F3;
					border-radius: 5rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
					line-height: 66rpx;
					&::after {
						content: '';
						width: 0;
						height: 0;
						border-left: 10rpx solid transparent;
						border-right: 10rpx solid transparent;
						border-top: 10rpx solid #808080;
						position: absolute;
						right: 10rpx;
						bottom: 26rpx;
					}
				}
				input {
					width: 189rpx;
					height: 66rpx;
					background: #F3F3F3;
					border-radius: 5rpx;
					line-height: 66rpx;
					margin-left: 15rpx;
					text-align: center;
				}
			}
			.more {
				width: 297rpx;
				height: 66rpx;
				background: #FFFFFF;
				border: 1px solid #FA7E67;
				border-radius: 5rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FA7E67;
				line-height: 66rpx;
				text-align: center;
			}
		}
	}
	.jg {
		height: 150rpx;
		background-color: #fff;
	}
</style>