xnzt/xnzt-h5/pages/index/train/trainApply.vue

<template>
	<view class="container">
		<view class="list">
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					培训类别
				</view>
				<view class="r u-flex u-col-center u-row-right">
					<picker mode="selector" :value="index" @change="typeChange" range-key="name" :range="array">
						<view class="picker u-flex u-col-center u-row-right">
							<text v-if="index != -1">{{type}}</text>
							<text v-else>请选择</text>
							<uni-icons type="right" size="20" color="#999"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between" v-if="index != -1">
				<view class="l">
					培训课程
				</view>
				<view class="r u-flex u-col-center u-row-right">
					<picker mode="selector" :value="index2" @change="typeChange2" range-key="name" :range="array2">
						<view class="picker u-flex u-col-center u-row-right">
							<text v-if="index2 != -1">{{type2}}</text>
							<text v-else>请选择</text>
							<uni-icons type="right" size="20" color="#999"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="item3">
				<view class="l">
					申请理由
				</view>
				<view class="r">
					<textarea type="text" v-model="reason" placeholder="请输入"></textarea>
				</view>
			</view>
		</view>
		<view class="f-btn" @click="submit">
			提交申请
		</view>
	</view>
</template>

<script>
	import { trainingList,trainiCngourse,appSubmission,ownTrainiCngourse } from '@/api/home.js'
	export default {
		data() {
			return {
				area: "",
				breeding: "",
				number: "",
				reason: "",
				cunchu: "",
				userId: "",
				array: [],
				index: -1,
				type: '',
				list1:[],
				array2: [],
				index2: -1,
				type2: '',
				list2:[],
				
			}
		},
		onLoad() {
			let user = uni.getStorageSync('user')
			this.userId = user.userId
			if (!user.userId) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
				return
			}
			this.getList()

		},
		methods: {
			getList() {
				trainingList().then(res => {
					if (res.code == 200) {
						console.log(res)
						this.list1 = res.data
						// this.array = res.data.map(item=>item.name)
						res.data.forEach(item=>{
							this.array.push({
								'name':item.name,
								'id':item.id
							})
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1500
						});
					}
				})
			},
			getList2(id) {
				ownTrainiCngourse().then(res => {
					if (res.code == 200) {
						console.log(res)
						this.list2 = res.rows
						// this.array2 = res.rows.map(item=>{
						// 	{
						// 		'title':item.title,
						// 		'id':item.id
						// 	}
						// })
						// let list = []
						res.rows.forEach(item=>{
							if(item.categoryId == id){
								this.array2.push({
									'name':item.title,
									'id':item.categoryId
								})
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1500
						});
					}
				})
			},
			typeChange(e) {
				console.log('e',e)
				this.index = e.detail.value
				this.type = this.array[this.index].name
				this.type2 = ''
				this.array2 = []
				this.getList2(this.array[this.index].id)
			},
			typeChange2(e) {
				this.index2 = e.detail.value
				this.type2 = this.array2[this.index2].name
				
			},
			submit() {
				if (this.index == -1) {
					uni.showToast({
						title: '请选择类目',
						icon: "none",
						duration: 1500
					});
					return
				}
				if (this.index2 == -1) {
					uni.showToast({
						title: '请选择课程',
						icon: "none",
						duration: 1500
					});
					return
				}
				if (!this.reason) {
					uni.showToast({
						title: '请输入申请原因',
						icon: "none",
						duration: 1500
					});
					return
				}
				
				uni.showModal({
					title: '温馨提示',
					content: '确认要提交信息吗?',
					success: (r) => {
						if (r.confirm) {
							console.log('用户点击确定',this.type);
							
							appSubmission({
								categoryld: this.type,
								courseld:this.list2[this.index2].id,
								reason:this.reason,
								userId: this.userId,
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '操作成功',
										icon: "none",
										duration: 1500
									});
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1500)
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1500
									});
								}
								console.log(res)

							})
						} else if (r.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},

		}
	}
</script>

<style lang="scss" scoped>
	$color: #4892FD;

	.container {
		padding: 30rpx 30rpx 200rpx;

		.f-btn {
			position: fixed;
			bottom: 60rpx;
			left: 30rpx;
			right: 30rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background-color: $color;
			color: #fff;
			font-size: 28rpx;
			border-radius: 20rpx;
		}



		.list {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 10rpx 30rpx;
			margin-bottom: 20rpx;
			width:100%;
			.item3 {
				padding: 20rpx 0;

				.l {
					line-height: 60rpx;
					height: 60rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.r {
					margin-top: 20rpx;

					textarea {
						width: 100%;
						height: 150rpx;
						color: #333;
						font-size: 28rpx;
					}
				}

			}

			.item2 {
				.l {
					padding: 20rpx 0;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.r {
					flex-wrap: wrap;

					.i {
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						padding: 0 20rpx;
						border-radius: 8rpx;
						margin: 15rpx 10rpx 0 0;
						color: #666;
						border: 2rpx solid #eee;
						font-size: 24rpx;
					}

					.on {
						border: 2rpx solid $color;
						color: $color;
						background-color: #EEF7FF;
					}
				}
			}

			.item {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: 0;
				}

				.l {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					line-height: 60rpx;
					height: 60rpx;
					width: 300rpx;

					text {
						color: #c33;
						margin-left: 6rpx;
					}
				}

				.r {
					flex: 1;
					width: 1rpx;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: right;

					input {
						flex: 1;
						height: 100%;
						font-size: 28rpx;
						color: #333333;
					}

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.i {
						margin-left: 20rpx;

						image {
							width: 35rpx;
							height: 35rpx;
						}

						text {
							font-size: 24rpx;
							color: #666;
							margin-left: 10rpx;
						}

						.on {
							color: $color;
						}
					}

					text {
						font-size: 24rpx;
						color: #666;
						margin-left: 10rpx;
					}

				}
			}
		}

	}
</style>