xnzt/xnzt-h5/pages/index/train/trainApply.vue
2024-11-11 10:27:27 +08:00

374 lines
6.9 KiB
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>