yicangzongtai_app_240321/pages/publicDonation/index.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#666"></navbar>
		<image class="cover" src="/static/publicDonation/cover.png"></image>
		<view class="content">
			<view class="detail-top-title">
				<image class="line" src="/static/common/line1.png"></image>
				<text class="title">爱心捐赠</text>
				<image class="line" src="/static/common/line1.png"></image>
			</view>
		</view>
		<view class="common-form">
			<view class="form-title">联系人</view>
			<view class="form-item">
				<input v-model="form.contact_person" placeholder="请输入联系人" :maxlength="10" />
			</view>
			<view class="form-title">联系电话</view>
			<view class="form-item">
				<input v-model="form.contact_phone" type="number" placeholder="请输入联系电话" :maxlength="11" />
			</view>
			<view class="form-title">公司名称</view>
			<view class="form-item">
				<input v-model="form.company_name" placeholder="请输入公司名称，非必填" :maxlength="20" />
			</view>
			<view class="form-title">捐赠意向</view>
			<view class="form-item">
				<u-checkbox-group>
					<u-checkbox v-model="form.is_donation" name="捐款">捐款</u-checkbox>
					<u-checkbox v-model="form.is_offering" name="捐物">捐物</u-checkbox>
				</u-checkbox-group>
			</view>
			<template v-if="form.is_donation">
				<view class="form-title">意向金额</view>
				<view class="form-item">
					<input @input="dealMoney" type="digit" maxlength="7" v-model="form.interest_amount" placeholder="请填写想要捐赠的金额" />
				</view>
			</template>
			<template v-if="form.is_offering">
				<view class="form-title">意向物品</view>
				<view class="form-item">
					<input v-model="form.item_name" placeholder="请填写想要捐赠的物品" />
				</view>
			</template>
			<view class="form-tip">
				注意：您填写捐赠信息后，基金工作人员将会电话联系您、确 定捐赠具体事宜！
			</view>
			<button class="submit-btn" @click="submit()">立即提交</button>
		</view>
		<uni-popup class="submit-popup" ref="submitPopup" type="center" :mask-click="false">
			<view class="content-box">
				<view class="title">提交完成</view>
				<view class="content">
					<image class="success-icon" src="/static/common/success-icon.png"></image>
					<view class="tip" style="width: 416rpx;">
						公益捐款信息已经提交，工作人员会 尽快与您取得联系对接捐款事宜。
					</view>
					<button class="btn" @click="closePopup()">知道了</button>
				</view>
			</view>
		</uni-popup>
		<u-modal v-model="tostShow" content="确认提交？" show-cancel-button @confirm="affirmSubmit"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true,
					title: '公益捐赠',
					color: '#1a1a1a',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				imgFiles: [],
				form: {
					contact_person: '',
					contact_phone: '',
					company_name: '',
					is_donation: false,
					is_offering: false,
					interest_amount: '',
					item_name: ''
				},
				tostShow:false
			}
		},
		watch: {
			'form.is_donation'(val, oldVal){
				if(!this.form.is_donation){
					this.form.interest_amount = '';
				}
			},
			'form.is_offering'(val, oldVal){
				if(!this.form.is_offering){
					this.form.item_name = '';
				}
			}
		},
		methods: {
			goApplyPointsHistory() {
				uni.navigateTo({
					url: '/pages/applyPoints/history'
				})
			},
			submit() {
				let regExp = new RegExp("^1\\d{10}$");
				if (!this.form.contact_person) {
					uni.showToast({
						icon: "none",
						title: '请输入联系人',
						duration: 1500
					});
					return
				} else if (!this.form.contact_phone) {
					uni.showToast({
						icon: "none",
						title: '请输入联系电话',
						duration: 1500
					});
					return
				} else if (!regExp.test(this.form.contact_phone)) {
					uni.showToast({
						icon: "none",
						title: '请输入正确的联系电话',
						duration: 1500
					});
					return
				} else if (!this.form.is_donation && !this.form.is_offering) {
					uni.showToast({
						icon: "none",
						title: '请选择捐赠意向',
						duration: 1500
					});
					return
				} else if (!this.form.item_name && this.form.is_offering) {
					uni.showToast({
						icon: "none",
						title: '请输入意向物品',
						duration: 1500
					});
					return
				} else if (!this.form.interest_amount && this.form.is_donation) {
					uni.showToast({
						icon: "none",
						title: '请输入意向金额',
						duration: 1500
					});
					return
				}
				this.form.is_donation = this.form.is_donation || false;
				this.form.is_offering = this.form.is_offering || false;
				this.tostShow=true;
				
			},
			dealMoney(e) {
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.form.interest_amount = e.target.value ?e.target.value:''
				})
			},
			affirmSubmit(){
				uni.showLoading({
					title: '加载中'
				});
				this.$http.post('/donation/apply', this.form).then(res => {
					uni.hideLoading();
					if (res && res.code == 200) {
						this.$refs.submitPopup.open();
					}
				})
			},
			closePopup() {
				this.$refs.submitPopup.close();
				uni.navigateBack()
			},
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		box-sizing: border-box;

		.cover {
			width: 100%;
			height: 340rpx;
			background-color: #f2f2f2;
		}

		.content {
			box-sizing: border-box;
			padding: 40rpx 0 18rpx 0;
		}

		.mr20 {
			margin-right: 20rpx;
		}
	}
</style>