newjlxred/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" v-if="jxdz_show">
				<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 clamp" :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 {
		getProjectInfo,
		createProject,
		getLogistics,
		getDonationInfo,
		createUser,
		getAllArea,
		getUserList
	} from '../../api/money.js';
	export default {
		data() {
			return {
				project_area: 226,
				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
				jxdz_show: false,
				myUserList: [],
				beforeUser: {
					name: '',
					log: '',
					Isopen: false,
					IsAnonymous: true,
					tel: '',
					phone: '',
					contacts: '',
					name: '',
					identityNumber: '',
					qyxydm: ''
				},
				userId: 0,
				showCreate: false
			}
		},
		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.jxdz_show = true
			}
			this.getUserList()
			// this.getLogistics()
		},
		mounted() {
			// this.$set(this,'wzList',[this.wz1,this.wz2])
		},
		methods: {
			// 获取我的用户列表
			getUserList() {
				let obj =this
				getUserList().then(({data})=> {
					this.myUserList = data
					if(data.length == 0) {
						obj.showCreate = true
					}else {
						this.autoT()
					}
					
				})
			},
			//自动填充表格
			autoT() {
				let obj = this
				
				obj.myUserList.forEach(item => {
					if(item.user_type == obj.type) {
						obj.showCreate = false
						obj.userId = item.id
						obj.log = item.logistics
						obj.beforeUser.log = item.logistics
						
						obj.Isopen = item.invoice == 1? true: false
						obj.beforeUser.Isopen = item.invoice == 1? true: false
						
						obj.IsAnonymous = item.anonymous == 1? true: false
						obj.beforeUser.IsAnonymous = item.anonymous == 1? true: false
						
						obj.tel = item.tel
						obj.beforeUser.tel = item.tel
						
						obj.phone = item.phone
						obj.beforeUser.phone = item.phone
						
						obj.contacts = item.contacts
						obj.beforeUser.contacts = item.contacts
						
						
						if(obj.type == 0) {
							obj.name = item.name
							obj.beforeUser.name = item.name
							
							this.identityNumber = item.card_id
							obj.beforeUser.identityNumber = item.card_id
						}
						if(obj.type == 1) {
							obj.unit = item.name
							obj.beforeUser.unit = item.name
							
							this.qyxydm = item.card_id
							obj.beforeUser.qyxydm = item.card_id
						}
					}else {
						obj.showCreate = true
					}
				})
				
			},
			//下一页
			nextLimit() {
				this.limit = 2
			},
			//下一页
			prevLimit() {
				this.limit = 1
			},
			//选择捐赠是个人或团体
			typeChange(e) {
				this.type = e.detail.value * 1
				console.log(this.type, 'this.typ+++++++++++++++++++++')
				if(this.myUserList.length > 0) {
					console.log('遍历')
					this.autoT()
				}
				
			},
			//选择是否匿名
			anonymousChange(e) {
				if (e.detail.value !== '1') {
					this.IsAnonymous = false
				} else {
					this.IsAnonymous = true
				}
			},
			//选择物流方式
			bindLogChange(e) {
				this.log = this.logs[e.detail.value]
				// 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.jxdz_show == true) {
				// 	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
				})
				// if(obj.type === 0) {
				// 	if((obj.beforeUser.name != obj.name) || (obj.beforeUser.phone !== obj.phone) || (obj.beforeUser.log != obj.log) || (obj.beforeUser.IsAnonymous != obj.IsAnonymous) || (obj.) ) {
						
				// 	}
				// }
				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.log,
					anonymous: obj.IsAnonymous ? 0 : 1,
					invoice: obj.Isopen ? 1 : 0,
					card_id: obj.type == 0?obj.identityNumber:obj.qyxydm
					
				}).then(res => {
					// console.log(JSON.parse(res.msg),'99999999999999999999999999')
					// let info = JSON.parse(res.msg)
					// console.log(info.name,'8888888888888')
					console.log(res, 'res+++++++++++++++++++++')
					createProject({
						// project_area: obj.project_area,
						name: obj.type === 0 ? obj.name : obj.unit,
						project_id: obj.project_id,
						project_user_id: res.data.id,
						matter,
						qc,
						worth,
						logistics: obj.log,
						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, '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>