sz-kjsxy-wx-new/packages/donate/index.vue

<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
		<view class="wrap">
			<u-form :model="form" :label-width="140" ref="uForm" :label-align="'left'" :error-type="['message']">
				<u-form-item label="姓名" prop="username" required>
					<u-input v-model="form.username" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item label="就读班级" prop="course" required>
					<u-input @click="showCourse = true" placeholder="请选择就读班级" v-model="form.course" type="select" />
				</u-form-item>
				<u-form-item label="联系方式" prop="mobile" required>
					<u-input type="number" placeholder="请输入联系方式" v-model="form.mobile" />
				</u-form-item>
				<u-form-item label="公司名称" prop="company_name">
					<u-input v-model="form.company_name" placeholder="请输入公司名称" />
				</u-form-item>
				<u-form-item label="职务" prop="company_position">
					<u-input v-model="form.company_position" type="text" placeholder="请输入职务" /></u-form-item>
				<u-form-item label="我希望捐赠" prop="donate" label-position="top">
					<u-input v-model="form.donate" type="textarea" placeholder="我希望捐赠" /></u-form-item>
			</u-form>
		</view>
		<view class="form-btn">
			<view @click="saveDonates">提交</view>
		</view>
		<u-picker @confirm="selectCourse" v-model="showCourse" :range="courseList" range-key="value"
			mode="selector"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCourse: false,
				isLocked:false,
				form: {
					username: '',
					course: '',
					mobile: '',
					company_name: '',
					company_position: '',
					donate: ''

				},
				courseList: [{
					label: '高研班｜第一期高级科创人才研修班',
					value: '高研班｜第一期高级科创人才研修班'
				}, {
					label: '高研班｜第二期高级科创人才研修班',
					value: '高研班｜第二期高级科创人才研修班'
				}, {
					label: '高研班｜第三期高级科创人才研修班',
					value: '高研班｜第三期高级科创人才研修班'
				}, {
					label: '高研班｜第四期高级科创人才研修班',
					value: '高研班｜第四期高级科创人才研修班'
				}, {
					label: '高研班｜第五期高级科创人才研修班',
					value: '高研班｜第五期高级科创人才研修班'
				}, {
					label: '高研班｜第六期高级科创人才研修班',
					value: '高研班｜第六期高级科创人才研修班'
				}, {
					label: '其他',
					value: '其他'
				}],
				rules: {
					username: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur'],
					}],
					course: [{
						required: true,
						message: '请选择就读班级',
						trigger: ['change', 'blur'],
					}],
					mobile: [{
						required: true,
						message: '请输入联系方式',
						trigger: ['blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur'],
					}],

				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			let token = uni.getStorageSync('stbc1_lifeData') ? uni.getStorageSync('stbc1_lifeData').vuex_token : ''
			if (this.base.isNull(token)) {
				this.getToken()
			} else {
				this.getUserInfo()
			}
		},
		methods: {
			selectCourse(e) {
				this.form.course = this.courseList[e[0]]['value']
			},
			// 日期
			saveDonates() {
				let that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(this.isLocked){
							return
						}
						this.isLocked = true
						this.$u.api.updateDonates(this.form).then(res => {
							this.base.toast('提交成功！感谢您的支持！近期我们将会电话与您联系～', 1500, function() {
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/me/index'
									})
								}, 1500)
							})
						}).catch(res => {
							this.isLocked = false
						})
					} else {
						console.log('验证失败');
						// this.base.toast("注册失败")
					}
				});

			},
			async getToken() {
				let that = this
				await uni.login({
					provider: 'weixin',
					success: (res) => {
						this.$u.api.login({
							code: res.code
						}).then(res1 => {
							uni.setStorageSync("stbc1_lifeData", {
								'vuex_token': res1.token
							})
							this.$u.api.user().then(res2 => {
								that.form.username = res2.user.username
								that.form.mobile = res2.user.mobile
								that.form.company_position = res2.user.company_position
								that.form.company_name = res2.user.company_name
								uni.setStorageSync("stbc1_lifeData", {
									'vuex_token': res1.token,
									'vuex_user': res2.user
								})
							})
						}).catch(err => {
							console.log('login-error:', JSON.stringify(err))
						})
					},
					fail: (res) => {
						console.log("errtoken", JSON.stringify(res))
					}
				});
			},
			getUserInfo() {
				this.$u.api.user().then(res => {
					this.form.username = res.user.username
					this.form.mobile = res.user.mobile
					this.form.company_position = res.user.company_position
					this.form.company_name = res.user.company_name
					this.$u.vuex('vuex_user', res.user)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;
		height: 100vh;
		overflow: scroll;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.wrap {
			background: #fff;
			position: relative;
			padding: 35rpx;
			border-radius: 30rpx;
			padding-top: 0;
		}

		.form-btn {
			width: 100%;
			position: relative;
			padding: 60rpx 0;

			&>view {
				width: 70%;
				text-align: center;
				margin: 0 auto;
				color: #fff;
				background: linear-gradient(to right, #5e5fbc, #0d0398);
				border-radius: 30rpx;
				padding: 20rpx;
			}
		}

	}
</style>