yicangzongtai_app_240321/pages/applyPoints/index.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#666"></navbar>
		<image class="cover" src="/static/applyPoints/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 class="common-form">
				<view class="form-title required">捐赠金额</view>
				<view class="form-item">
					<input v-model="form.donation_amount" type="digit" @input="changeDonation" placeholder="请输入捐赠金额" />
				</view>
				<view class="form-title required">
					捐赠凭证<text class="tip">（如证书截图、付款记录、捐款记录等）</text>
				</view>
				<view class="form-item">
					<view class="upload-box">
						<view @click.stop.self="upload()">
							<u-upload max-count="1" action="" :file-list="imgFiles" :show-progress="false" upload-text="" height="154rpx" width="154rpx" custom-btn @on-remove="delImg">
								<view slot="addBtn" class="card" @click.stop="upload()">
									<text class="iconfont2">&#xe641;</text>
								</view>
							</u-upload>
						</view>
						<view class="upload-tip">注意：您填写申领信息后，基金工作人员将会在后台审核处 理，预计1-3天内处理！</view>
						<unloadimg ref="unloadimg" imgCount="1" type="other" url=""  @result="unloadRes" style="display: none;"></unloadimg>
					</view>
				</view>
				<button class="submit-btn" @click="submit">立即提交</button>
				<view @click="goApplyPointsHistory" class="history">申领记录>></view>
			</view>
		</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">
						公益捐款信息已经提交，工作人员会 尽快与您取得联系对接捐款事宜。
					</view>
					<view class="btn-box">
						<button @click="closePopup();goHistory();">确认</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import unloadimg from "@/components/uploadImg/imgUpload.vue";
export default {
	components: {
		unloadimg
	},
	data() {
		return {
			config: {
				back: true,
				title: '申领公益积分',
				color: '#1a1a1a',
				backgroundColor: [1, '#fff'],
				statusBarFontColor: 'black'
			},
			form: {
				donation_amount: ''
			},
			imgFiles: []
		}
	},
	methods: {
		// 限制只能输入2位小数
		changeDonation(e) {
			//正则表达试
			e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null;
			//重新赋值给input
			this.$nextTick(() => {
				this.form.donation_amount = e.target.value
			})
		},
		goHistory(){
			uni.navigateTo({
				url: '/pages/applyPoints/history'
			})
		},
		goApplyPointsHistory(){
			uni.navigateTo({
				url: '/pages/applyPoints/history'
			})
		},
		upload(index){
			this.$refs.unloadimg.upPhoto();
		},
		unloadRes(e){
			this.imgFiles = e.map(url=>{
				return {
					url
				}
			});
		},
		closePopup(){
			this.$refs.submitPopup.close();
		},
		delImg(index){
			this.$refs.unloadimg.imgArray.splice(index, 1);
			this.imgFiles.splice(index,1);
		},
		valForm(){
			let error = '';
			if((this.form.donation_amount??'') == ''){
				error = '请输入捐赠金额';
				return error;
			}
			if(this.imgFiles.length <= 0){
				error = '请上传捐赠凭证';
				return error;
			}
			return error;
		},
		submit(){
			let that = this;
			let error = that.valForm()
			if(error==''){
				uni.showModal({
					title: '提示',
					content: '您确认要提交吗',
					success: function (res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在提交中...',
								mask: true
							});
							let isAdd = !that.form.id;
							that.$http.post('/official/donation/apply',{
								...that.form,
								donation_voucher: that.imgFiles[0].url
							})
							.then(res => {
								if(res.code==200){
									that.$refs.submitPopup.open();
								}
							})
							.finally(()=>{
								uni.hideLoading();
							})
						}
					}
				});
			}else{
				uni.showToast({
					icon: 'none',
					title: error
				})
			}
		},
	}
};
</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;
		}
		.upload-box{
			.card{
				height: 154rpx;
				width: 154rpx;
				background-color: #F5F5F5;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont2{
					font-size: 60rpx;
					color: #999999;
				}
			}
		}
		.history{
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #0b844a;
			line-height: 38rpx;
			text-align: center;
		}
	}
</style>