szsred/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 === 1">
				<view class="item">
					<view class="item-tit">捐赠单位<text>*</text></view>
					<input type="text" v-model="unit" placeholder="请填写捐赠单位"/>
				</view>
				<view class="item">
					<view class="item-tit">单位联系人<text>*</text></view>
					<input type="text" v-model="contacts" placeholder="请填写捐赠方联系人"/>
				</view>
				<view class="item">
					<view class="item-tit">单位电话<text>*</text></view>
					<input type="text" v-model="tel" placeholder="请填写单位联系方式"/>
				</view>
				<view class="item">
					<view class="item-tit">企业信用代码</view>
					<input type="text" v-model="qyxydm" placeholder="请填写单位的企业信用代码"/>
				</view>
			</template>
			<template v-if="type === 0">
				<view class="item">
					<view class="item-tit">姓名<text>*</text></view>
					<input type="text" v-model="name" placeholder="请填写您的姓名"/>
				</view>
				<view class="item">
					<view class="item-tit">联系方式<text>*</text></view>
					<input type="text" v-model="phone" placeholder="请填写您的联系方式"/>
				</view>
				<view class="item">
					<view class="item-tit">身份证号</view>
					<input type="text" v-model="identityNumber" 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">物流方式<text>*</text></view>
				<picker @change="bindLogChange" :range="logs" range-key="name">
					<view class="log " :class="{'select': log }">{{ log || '请选择物流方式' }}</view>
				</picker>
			</view>
			<view class="item">
				<view class="item-tit">捐赠地址<text>*</text></view>
				<picker @change="bindAreaChange" :range="areas" range-key="name">
					<view class="log " :class="{'select': area }">{{ area || '请选择捐赠地址' }}</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" range-key="name">
							<view class="wz select" :class="{'action': item.project_donation_name }">{{ item.project_donation_name || '请选择物资分类' }}</view>
						</picker>
						<input type="number" v-model="item.project_donation_num" placeholder="填写数量"/>
						<!-- <view class="dele"  v-if="index != 0">
							<view class="lef"></view>
							<view class="rig"></view>
						</view> -->
					</view>
					<view class="flex act">
						<view class="more" @click="addMore" v-show="wzs.length > wzList.length">
							+添加更多
						</view>
						<view class=" del" @click="dele" v-show=" wzList.length > 1">
							删除
						</view>
					</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 === 1">
				<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" @click="sub">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import { upload } from '@/api/ask.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import { getProjectInfo, createProject, getLogistics, getDonationInfo, createUser,getAllArea } from '../../api/money.js';
	export default {
		data() {
			return {
				project_area: 0,
				areas: [{
					id: 0,
					name: '市本级'
				}],
				area: '',
				items: [
					{
						value: '个人',
						iid: '0'
					},
					{
						value: '企业（团体）',
						iid: '1'
					}
				],
				IsAnonymous: false,
				limit: 1,
				type: 0,//捐赠个体0位个人 1为团体（企业）
				unit: '',//捐赠单位
				contacts: '',//捐赠方联系人
				tel: '',//单位电话
				log: '',//物流方式
				logistics: '',//物流编号
				// Logistics: '',//物流方式id
				logs: ['顺丰','邮政'],
				Isopen: false,//是否开具发票
				mask: '',//备注
				qyxydm: '',//企业信用代码
				name: '',// 捐赠人姓名
				phone: '',//捐赠人联系方式
				identityNumber: '',//身份证号
				wzs: [],//物资分类列表
				wzList: [
					{
						project_donation_id: null,
						project_donation_num: null,
						project_donation_name: null
					}
				],
				swimg: [''],//实物照片
				yyimg: [''],//营业执照
				zlimg: [''],//质量合格证书
				jzimg: [''],//价值凭证
				true_wzList: [],//最终捐赠的物资列表
				hadadd: [],//已添加分类
				project_id: 0,//项目ID
			}
		},
		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,'++++++++')
			}
			if(ops.id) {
				this.project_id = ops.id*1
			}
			if(ops.wzlist) {
				this.wzs = JSON.parse(ops.wzlist)
				
			}else {
				this.getDonationInfo()
				this.getAllArea()
			}
			
			this.getLogistics()
		},
		onShow() {
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							saveUrl()
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
						uni.showModal({
							title: 'cuowu',
							content: JSON.stringify(e),
						})
					}
				});
			} else {
				// this.loadData();
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'baseURL', 'hasLogin']),
			...mapState(['weichatObj']),
		},
		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,'this.typ+++++++++++++++++++++')
			},
			//选择是否匿名
			anonymousChange(e) {
				if(e.detail.value !== '1') {
					this.IsAnonymous = false
				}else {
					this.IsAnonymous = true
				}
			},
			//选择物流方式
			bindLogChange(e) {
				this.log = this.logs[e.detail.value].name
				this.logistics = this.logs[e.detail.value].id
			},
			//选择捐献物资分类
			bindWzChange(e){
				if(this.hadadd.indexOf(e.detail.value) === -1) {
					this.hadadd.push(e.detail.value)
					this.wzList[this.currentWzIndex].project_donation_name = this.wzs[e.detail.value].name
					this.wzList[this.currentWzIndex].project_donation_id = this.wzs[e.detail.value].id
				}else {
					this.$api.msg('该分类已添加');
					return 
				}
				
				console.log(this.wzList)
				// this.wz = this.logs[e.detail.value].name
				
			},
			// 选择捐赠地址
			bindAreaChange(e) {
				this.project_area = this.areas[e.detail.value].id
				this.area = this.areas[e.detail.value].name
			},
			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,'')
					}
				});
			},
			
			dianji(index) {
				this.currentWzIndex = index
			},
			//添加更多
			addMore() {
				this.wzList.push({
					project_donation_id: null,
					project_donation_num: null,
					project_donation_name: null
				})
			},
			//提交
			sub() {
				// uni.navigateTo({
				// 	url: '/pages/joinSuc/joinsuccess'
				// })
				
				let obj = this;
				
				if(obj.type === 0) {
					if (obj.name == '') {
						obj.$api.msg('请输入您的姓名');
						return;
					}
					const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
					if (!reg.test(obj.phone)) {
						obj.$api.msg('请填写正确的手机号码');
						return;
					}
					
				}else {
					if(obj.unit =='') {
						obj.$api.msg('请输入捐赠单位');
						return;
					}
					if(obj.dwPeople =='') {
						obj.$api.msg('请输入联系人');
						return;
					}
					if(obj.tel == '') {
						obj.$api.msg('请输入单位电话');
						return;
					}
				}
				if(obj.log == '') {
					obj.$api.msg('请选择物流方式');
					return;
				}
				if(obj.area == '') {
					obj.$api.msg('请选择捐赠地址');
					return;
				}
				try{
					obj.wzList.forEach( item => {
						if(!item.project_donation_id){
							 throw '请选择物资类别'
						}
						if(!item.project_donation_num || item.project_donation_num == 0) {
							 throw '请填写捐赠数量'
						}
					})
				}catch(e) {
					obj.$api.msg(e);
					return
				}
				
				let matter =obj.swimg.toString().replace(/,$/,''),
					qc = obj.zlimg.toString().replace(/,$/,''),
					worth = obj.jzimg.toString().replace(/,$/,''),
					item = obj.wzList
					console.log(item,'物资参数')
				if(matter== ''){
					obj.$api.msg('请上传实物照片');
					return
				}
					
				if(qc == ''){
					obj.$api.msg('请上传质量合格证书');
					return
				}
				console.log(matter,'5555555555555555')
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				createUser({
					project_area: obj.project_area,
					name: obj.type === 0? obj.name: obj.unit,
					phone: obj.phone,
					tel: obj.tel,
					contacts: obj.contacts,
					user_type: obj.type,
					logistics: obj.logistics,
					anonymous: obj.IsAnonymous? 1:0,
					invoice: obj.Isopen? 1:0
				}).then( res => {
					console.log(JSON.parse(res.msg),'99999999999999999999999999')
					let info = JSON.parse(res.msg)
					console.log(info.name,'8888888888888')
					
					createProject({
						project_area: obj.project_area,
						name: obj.type === 0? obj.name: obj.unit,
						project_id: obj.project_id,
						project_user_id: +info.id,
						matter,
						qc,
						worth,
						logistics: obj.logistics,
						item,
						// mask
					}).then( res => {
						console.log(JSON.parse(res.msg),'77777777777777777777')
						uni.hideLoading()
						uni.navigateTo({
							url: '/pages/joinSuc/joinsuccess'
						})
					}).catch( err => {
						uni.hideLoading()
						console.log(err)
					})
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				
			},
			//获取物资分类列表
			getDonationInfo() {
				getDonationInfo().then(({data} )=>{
					
					this.wzs = data
					console.log(this.wzs,'获取所有物资')
				})
			},
			getLogistics() {
				getLogistics().then( ({data}) => {
					console.log('88888888888888888888',data)
					this.logs = data
				})
			},
			dele() {
				this.$delete(this.wzList,this.wzList.length-1)
			},
			// 获取捐赠地址列表
			getAllArea() {
				getAllArea().then(({
					data
				}) => {
					console.log(data, '6666666666');
					this.areas = this.areas.concat(data);
				});
			},
			
			
		}
	}
</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;
			text {
				color: #F3392C;
			}
		}
		.choose-box {
			padding-top: 24rpx;
			.choose-item {
				display: flex;
				margin-bottom: 15rpx;
				position: relative;
				.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;
				}
			}
			.act {
				width: 510rpx;
				height: 68rpx;
				position: relative;
				.more {
					width: 245rpx;
					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;
					margin-right: 10rpx;
					position: absolute;
					left: 0;
				}
				.del {
					width: 245rpx;
					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;
					margin-right: 10rpx;
					position: absolute;
					right: 0;
				}
			}
			
		}
	}
	.jg {
		height: 150rpx;
		background-color: #fff;
	}
	// .dele{
	// 	width: 40rpx;
	// 	height: 40rpx;
	// 	border-radius: 50%;
	// 	background-color: #F3392C;
	// 	transform: rotate(45deg);
	// 	position: absolute;
	// 	top: 0;
	// 	bottom: 0;
	// 	left: -45rpx;
	// 	margin: auto;
		
	// 	.lef {
	// 		width: 30rpx;
	// 		height: 5rpx;
	// 		position: absolute;
	// 		top: 0;
	// 		left: 0;
	// 		right: 0;
	// 		bottom: 0;
	// 		margin: auto;
	// 		background-color: #fff;
	// 	}
	// 	.rig {
	// 		width: 5rpx;
	// 		height: 30rpx;
	// 		background-color: #fff;
	// 		position: absolute;
	// 		top: 0;
	// 		left: 0;
	// 		right: 0;
	// 		bottom: 0;
	// 		margin: auto;
	// 		background-color: #fff;
	// 	}
	// }
</style>