251 lines
7.2 KiB
Vue
251 lines
7.2 KiB
Vue
<template>
|
||
<view class="page" :class="{ big: isH5 }">
|
||
<view class="panel">
|
||
<view class="form-row">
|
||
<view class="label">干预类型</view>
|
||
<picker :range="typeOptions" @change="onTypeChange">
|
||
<view class="picker">{{ form.interventionType || '请选择' }}</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="form-row">
|
||
<view class="label">负责人（姓名/账号/ID）</view>
|
||
<input class="input" v-model="ownerKeyword" placeholder="输入姓名/账号/ID进行查询" @input="onOwnerKeywordInput" @focus="onOwnerFocus" />
|
||
<view v-if="selectedOwnerName" class="hint">已选：{{ selectedOwnerName }}（{{ form.ownerId }}）</view>
|
||
<view v-if="showOwnerDropdown && ownerOptions.length" class="dropdown">
|
||
<view class="opt" v-for="(u, idx) in ownerOptions" :key="idx" @tap="selectOwner(u)">
|
||
{{ u.nickName || u.userName || ('用户#' + u.userId) }}（{{ u.userId }}）
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-row">
|
||
<view class="label">期限(天)</view>
|
||
<input class="input" type="number" v-model="form.dueDays" placeholder="默认3" />
|
||
</view>
|
||
|
||
<view v-if="errorMsg" class="error">{{ errorMsg }}</view>
|
||
<button class="btn" :disabled="loading" @click="onSubmit">{{ loading ? '提交中…' : '提交' }}</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { createInterventionTaskFromWarning, createInterventionTask } from '../../api/psychology/interventionTask'
|
||
import { getOwnerOptions } from '../../api/psychology/user'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
isH5: false,
|
||
warningId: '',
|
||
loading: false,
|
||
errorMsg: '',
|
||
ownerKeyword: '',
|
||
ownerOptions: [],
|
||
selectedOwnerName: '',
|
||
showOwnerDropdown: false,
|
||
typeOptions: ['个体咨询', '团体辅导', '心理讲座', '危机干预'],
|
||
form: {
|
||
interventionType: '',
|
||
ownerId: '',
|
||
dueDays: '3'
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
try {
|
||
const info = uni.getSystemInfoSync()
|
||
const p = info ? (info.uniPlatform || info.platform) : ''
|
||
this.isH5 = p === 'web' || p === 'h5'
|
||
} catch (e) {
|
||
this.isH5 = false
|
||
}
|
||
this.warningId = options && options.warningId ? options.warningId : ''
|
||
},
|
||
methods: {
|
||
onOwnerFocus() {
|
||
this.showOwnerDropdown = true
|
||
this.queryOwnerOptions()
|
||
},
|
||
onOwnerKeywordInput(e) {
|
||
const v = e && e.detail ? e.detail.value : ''
|
||
this.ownerKeyword = v
|
||
this.selectedOwnerName = ''
|
||
this.form.ownerId = ''
|
||
this.showOwnerDropdown = true
|
||
this.queryOwnerOptions()
|
||
},
|
||
queryOwnerOptions() {
|
||
const kw = (this.ownerKeyword || '').trim()
|
||
if (!kw) {
|
||
this.ownerOptions = []
|
||
this.showOwnerDropdown = false
|
||
return
|
||
}
|
||
getOwnerOptions({ keyword: kw, limit: 20 }).then((res) => {
|
||
const data = res && res.data ? res.data : null
|
||
if (!data || data.code !== 200) {
|
||
this.ownerOptions = []
|
||
this.showOwnerDropdown = false
|
||
return
|
||
}
|
||
this.ownerOptions = data.data || []
|
||
this.showOwnerDropdown = this.ownerOptions.length > 0
|
||
}).catch(() => {
|
||
this.ownerOptions = []
|
||
this.showOwnerDropdown = false
|
||
})
|
||
},
|
||
selectOwner(u) {
|
||
if (!u) return
|
||
this.form.ownerId = u.userId
|
||
this.selectedOwnerName = u.nickName || u.userName || ''
|
||
this.ownerKeyword = this.selectedOwnerName
|
||
this.ownerOptions = []
|
||
this.showOwnerDropdown = false
|
||
},
|
||
onTypeChange(e) {
|
||
const idx = e && e.detail ? e.detail.value : 0
|
||
this.form.interventionType = this.typeOptions[idx] || ''
|
||
},
|
||
onSubmit() {
|
||
this.errorMsg = ''
|
||
if (!this.form.interventionType) {
|
||
this.errorMsg = '请选择干预类型'
|
||
return
|
||
}
|
||
if (!this.form.ownerId) {
|
||
this.errorMsg = '请选择负责人'
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
const payload = {
|
||
interventionType: this.form.interventionType,
|
||
ownerId: Number(this.form.ownerId),
|
||
dueDays: Number(this.form.dueDays || 3)
|
||
}
|
||
const req = this.warningId
|
||
? createInterventionTaskFromWarning(Object.assign({}, payload, { warningId: Number(this.warningId) }))
|
||
: createInterventionTask(payload)
|
||
req.then((res) => {
|
||
this.loading = false
|
||
const data = res && res.data ? res.data : null
|
||
if (!data || data.code !== 200) {
|
||
this.errorMsg = (data && data.msg) ? data.msg : '创建失败'
|
||
return
|
||
}
|
||
uni.showToast({ title: '已创建', icon: 'success' })
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 400)
|
||
}).catch((e) => {
|
||
this.loading = false
|
||
this.errorMsg = e && e.message ? e.message : '网络错误'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.page {
|
||
min-height: 100vh;
|
||
padding: 24rpx 24rpx 120rpx;
|
||
box-sizing: border-box;
|
||
background: #F4F6FB;
|
||
}
|
||
.page.big {
|
||
padding: 14rpx 14rpx 120rpx;
|
||
background-image:
|
||
radial-gradient(1100rpx 520rpx at 50% 14%, rgba(43, 107, 255, 0.30) 0%, rgba(6, 16, 40, 0.0) 65%),
|
||
linear-gradient(180deg, rgba(5, 11, 24, 0.90) 0%, rgba(8, 20, 45, 0.85) 42%, rgba(6, 16, 40, 0.92) 100%),
|
||
url('/static/bg.png');
|
||
background-size: auto, auto, cover;
|
||
background-position: center, center, center;
|
||
background-repeat: no-repeat, no-repeat, no-repeat;
|
||
color: rgba(235, 248, 255, 0.92);
|
||
}
|
||
.panel {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 18rpx;
|
||
padding: 24rpx;
|
||
border: 1px solid rgba(15, 23, 42, 0.06);
|
||
box-shadow: 0 10rpx 22rpx rgba(15, 23, 42, 0.05);
|
||
margin-bottom: 18rpx;
|
||
}
|
||
.form-row {
|
||
margin-top: 18rpx;
|
||
position: relative;
|
||
}
|
||
.label {
|
||
font-size: 26rpx;
|
||
color: #111827;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.input, .picker {
|
||
height: 80rpx;
|
||
border-radius: 16rpx;
|
||
padding: 0 20rpx;
|
||
border: 1px solid rgba(15, 23, 42, 0.06);
|
||
display: flex;
|
||
align-items: center;
|
||
color: #111827;
|
||
background: rgba(15, 23, 42, 0.04);
|
||
}
|
||
.btn {
|
||
margin-top: 24rpx;
|
||
background: #1677ff;
|
||
color: #fff;
|
||
border-radius: 16rpx;
|
||
}
|
||
.error {
|
||
margin-top: 14rpx;
|
||
font-size: 24rpx;
|
||
color: #ff4d4f;
|
||
line-height: 36rpx;
|
||
}
|
||
.hint {
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #1677ff;
|
||
line-height: 36rpx;
|
||
}
|
||
.dropdown {
|
||
margin-top: 12rpx;
|
||
border: 1px solid rgba(15, 23, 42, 0.08);
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 170rpx;
|
||
background: rgba(255, 255, 255, 0.98);
|
||
z-index: 999;
|
||
max-height: 420rpx;
|
||
overflow-y: auto;
|
||
}
|
||
.opt {
|
||
padding: 18rpx 20rpx;
|
||
font-size: 26rpx;
|
||
color: #111827;
|
||
border-top: 1px solid rgba(15, 23, 42, 0.06);
|
||
}
|
||
.opt:first-child {
|
||
border-top: none;
|
||
}
|
||
.page.big .panel {
|
||
border: 1px solid rgba(116, 216, 255, 0.22);
|
||
background: linear-gradient(180deg, rgba(10, 18, 38, 0.75) 0%, rgba(5, 10, 22, 0.55) 100%);
|
||
box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.35);
|
||
}
|
||
.page.big .label { color: rgba(235, 248, 255, 0.92); }
|
||
.page.big .input,
|
||
.page.big .picker { background: rgba(7, 13, 28, 0.35); border-color: rgba(116, 216, 255, 0.18); color: rgba(235, 248, 255, 0.92); }
|
||
.page.big .btn { background: linear-gradient(90deg, rgba(116, 216, 255, 0.95) 0%, rgba(43, 107, 255, 0.92) 100%); color: #0b1226; font-weight: 900; }
|
||
.page.big .hint { color: rgba(201, 242, 255, 0.65); }
|
||
.page.big .dropdown { border-color: rgba(116, 216, 255, 0.18); background: rgba(7, 13, 28, 0.85); }
|
||
.page.big .opt { color: rgba(235, 248, 255, 0.88); border-top-color: rgba(116, 216, 255, 0.12); }
|
||
</style>
|