web-africa-h5/pages/user/rechargeApplication/apply.vue

<template>
	<view>
		<view class="d-b-c top-tltle">
			<view>{{$t('MN_T_1')}}</view>
			<view class="flex-1 d-e-c">
				<input class="ww100 tr" :placeholder="$t('S_C_70')" type="text" v-model="form.memberCode" />
			</view>
		</view>
		<view class="d-b-c top-tltle">
			<view>{{$t('fn_132')}}</view>
			<view class="flex-1 d-e-c">
				<input class="ww100 tr" :placeholder="$t('S_C_70')" type="text" v-model="form.remitter" />
			</view>
		</view>
		<view class="d-b-c top-tltle">
			<view>{{$t('fn_133')}}</view>
			<view class="flex-1 d-e-c">
				<input class="ww100 tr" :placeholder="$t('S_C_70')" type="digit" v-model="form.remittanceAmount" />
			</view>
		</view>
		<picker mode="date" :value="form.remittanceDate" :start="startDate" :end="endDate" @change="changeType">
			<view class="d-b-c top-tltle">
				<view>{{$t('fn_134')}}</view>
				<view class="flex-1 d-e-c">
					<view>{{ form.remittanceDate }}</view>
					<text class="icon iconfont icon-jiantou"></text>
				</view>
			</view>
		</picker>
		<view class="mt20 bg-white p30 mb50">
			<view class="f30 mb20">{{$t('fn_135')}}:</view>
			<view class="textarea-box">
				<textarea :maxlength="-1" class="flex-1 lh150" name="detail" style="height: 400rpx;" v-model="form.remittanceInstructions"
					placeholder-class="grary9" :placeholder="$t('S_C_70')+'~'"></textarea>
			</view>
		</view>
		<button class="normal-sub-btn " @click="subFunc">{{$t('S_L_17')}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:true,
				form: {
					memberCode: "",
					remitter: "",
					remittanceAmount: '',
					remittanceDate: "",
					remittanceInstructions: ""
				}
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.form.memberCode = uni.getStorageSync('userCode')
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			changeType(e) {
				this.form.remittanceDate = e.detail.value
			},
			subFunc() {
				let self = this;
				let params = this.form;
				if (self.memberCode == '') {
					uni.showToast({
						title: self.$t('w_0046'),
						icon: 'none'
					});
					return;
				}
				if ( self.remitter == '') {
					uni.showToast({
						title: self.$t('fn_141'),
						icon: 'none'
					});
					return;
				}
				if (self.remittanceAmount == '') {
					uni.showToast({
						title: self.$t('fn_142'),
						icon: 'none'
					});
					return;
				}
				if (self.remittanceDate == '') {
					uni.showToast({
						title: self.$t('fn_143'),
						icon: 'none'
					});
					return;
				}
				if (self.remittanceInstructions == '') {
					uni.showToast({
						title: self.$t('fn_144'),
						icon: 'none'
					});
					return;
				}
				uni.showModal({
					content: self.$t('MN_F_T_714'),
					success(e) {
						if (e.confirm) {
							uni.showLoading({
								title: 'Loading...'
							});
							
							self._post(
								'member/api/recharge/save-application', params,
								res => {
									uni.showModal({
										title: self.$t('w_0034'),
										content: self.$t('MY_CK_35'),
										showCancel:false,
										success() {
											uni.navigateBack()
										}
									});
									uni.hideLoading();
								},
								err => {
									uni.hideLoading();
								}
							);
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.top-tltle {
		// margin-top: 20rpx;
		border-top: 1px solid #eee;
		height: 98rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;

		.icon.icon-jiantou {
			font-size: 28rpx;
			color: #999;
		}
	}

	.textarea-box {
		border-radius: 20rpx;
		border: 1rpx solid #eee;
		padding: 24rpx;

		textarea {
			font-size: 24rpx;
			color: #333;
		}
	}
</style>