volunteer-secondary/src/pages-sub/talented/create/artSecond.vue

229 lines
9.5 KiB
Vue

<script lang="ts" setup>
import { systemInfo } from '@/utils/systemInfo'
import MxRadio from "@/pages-sub/components/radio/index.vue"
import MxUpload from "@/pages-sub/components/upload/index.vue"
import MxInput from "@/pages-sub/components/input/index.vue"
import { useUserStore } from '@/store';
import { storeToRefs } from 'pinia';
import { saveSpecialtyInfo } from '@/service';
import { tabbarStore } from '@/tabbar/store';
// #ifdef MP-WEIXIN
definePage({
style: {
navigationStyle: 'custom',
},
excludeLoginPath: false,
})
// #endif
// #ifndef MP-WEIXIN
definePage({
style: {
navigationStyle: 'custom',
transparentTitle: 'always',
navigationBarTitleText: ''
},
excludeLoginPath: false,
})
// #endif
const handleBack = () => {
uni.navigateBack({ delta: 1 })
}
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const handleSubmit = () => {
saveSpecialtyInfo({
data: {
type: userInfo.value.talentExtend.type,
specialtyDirection: userInfo.value.talentExtend.specialtyDirection,
ageLimit: userInfo.value.talentExtend.ageLimit,
advantages: userInfo.value.talentExtend.advantages,
awards: userInfo.value.talentExtend.awards,
fitnessResult: userInfo.value.talentExtend.fitnessResult,
}
}).then(resp => {
if (resp.code === 200) {
tabbarStore.setCurIdx(0)
uni.reLaunch({ url: `/pages-sub/ai-service/index?talentTypeId=2` })
}
})
}
const activeType = ref("")
const visible = ref(false)
const defaultImgs = ref([])
const defaultFitnessResult = ref([])
const onOverlayClick = () => {
visible.value = false
}
const yearClassification = [{ label: '1年以下', value: "1" }, { label: '1-3年', value: "2" }, { label: '3-5年', value: "3" }, { label: '5-7年', value: "4" }]
const handleOpenPopup = (type: string) => {
visible.value = true
activeType.value = type
}
const getTitle = (type: string) => {
const title = { "year": '请选择训练年限', }
return title[type];
}
const handleAwardUploadChange = (value) => {
userInfo.value.talentExtend.awards = value.map(item => item.url).join(",")
defaultImgs.value = value
}
const handleFitnessUploadChange = (value) => {
userInfo.value.talentExtend.fitnessResult = value.map(item => item.url).join(",")
defaultFitnessResult.value = value
}
const navigateToAdvantages = () => {
uni.navigateTo({ url: "/pages-sub/talented/create/editAdvantages" })
}
onLoad(() => {
if (userInfo.value.talentExtend.awards) {
defaultImgs.value = userInfo.value.talentExtend.awards.split(',').map(item => ({ url: item }))
}
if (userInfo.value.talentExtend.fitnessResult) {
defaultFitnessResult.value = userInfo.value.talentExtend.fitnessResult.split(',').map(item => ({ url: item }))
}
})
</script>
<template>
<view class="flex flex-col custom-background h-screen">
<sar-navbar show-back @back="handleBack" :fixed="true" fixation-style="top:unset;"
:root-style="{ '--sar-navbar-bg': `transparent`, '--sar-navbar-item-color': 'black', 'padding-top': `${systemInfo?.statusBarHeight}px` }">
<template #title>
<view class="flex justify-center">艺术特长生</view>
</template>
</sar-navbar>
<view class="flex items-center mx-[30rpx]">
<view class="w-[112rpx] h-[104rpx] flex items-center">
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_02.png" mode="scaleToFill"
class="w-[112rpx] h-[104rpx]" />
</view>
<view class="flex flex-col ml-[10rpx]">
<view class="text-[44rpx] font-500 mb-[14rpx]">中考艺体成绩</view>
<view class="text-[#B0B3B8] text-[30rpx]">请填写预估分数</view>
</view>
<view class="w-[160rpx] h-[160rpx] ml-auto">
<image src="https://lwzk.ycymedu.com/img/cpgx/cp_yuce02.png" mode="scaleToFill"
class="w-[160rpx] h-[160rpx]" />
</view>
</view>
<form @submit="handleSubmit" class="flex-1 pb-safe">
<view class="flex flex-col h-full">
<!-- <view
class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid"
@click="handleOpenPopup('year')">
<view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">学习年限</view>
<view class="flex-1 flex items-center">
<MxInput v-model:value="userInfo.talentExtend.ageLimit" placeholder="请选择训练年限"
root-class="text-left" :readonly="true" />
<view class="w-[18rpx] h-[36rpx] flex items-center ml-auto">
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_jiantou.png"
mode="scaleToFill" class="w-[18rpx] h-[36rpx]" />
</view>
</view>
</view> -->
<view
class="flex items-center text-[30rpx] justify-between mx-[40rpx] py-[34rpx] border-b-1 border-b-[#eaeaea] border-b-solid">
<view class="text-[#404142] text-left min-w-[150rpx] mr-[40rpx] ">个人优势</view>
<view class="flex-1 flex items-center" @click="navigateToAdvantages">
<MxInput v-model:value="userInfo.talentExtend.advantages" placeholder="请填写个人优势"
root-class="text-left" :readonly="true" />
<view class="w-[32rpx] h-[32rpx] flex items-center ml-auto">
<image src="https://lwzk.ycymedu.com/img/cpgx/cp_bianji.png"
mode="scaleToFill" class="w-[32rpx] h-[32rpx]" />
</view>
</view>
</view>
<view class="flex items-center text-[30rpx] mx-[40rpx] pt-[34rpx] mb-[20rpx]">
<view class="text-[#404142] text-left mr-[14rpx]">考级证书</view>
<view class="w-[32rpx] h-[32rpx] flex items-center">
<image src="https://lwzk.ycymedu.com/img/cpgx/cp_jieshi.png"
mode="scaleToFill" class="w-[32rpx] h-[32rpx]" />
</view>
</view>
<view class="mx-[30rpx]">
<MxUpload :multiple="true" :outerFileList="defaultImgs" @change="handleAwardUploadChange" />
</view>
<view class="flex items-center text-[30rpx] mx-[40rpx] pt-[34rpx] mb-[20rpx]">
<view class="text-[#404142] text-left mr-[14rpx]">作品上传</view>
<view class="w-[32rpx] h-[32rpx] flex items-center">
<image src="https://lwzk.ycymedu.com/img/cpgx/cp_jieshi.png"
mode="scaleToFill" class="w-[32rpx] h-[32rpx]" />
</view>
</view>
<view class="mx-[30rpx]">
<MxUpload :multiple="true" :outerFileList="defaultFitnessResult"
@change="handleFitnessUploadChange" />
</view>
<view class="px-[30rpx] py-[16rpx] border-t-solid border-t-[#ededed] border-t-1 mt-auto">
<button form-type="submit"
class="rounded-[16rpx] bg-[#1580FF] text-[#fff] submit-btn flex items-center justify-center">
<view class="w-[56rpx] h-[56rpx] flex items-center mr-[10rpx]">
<image src="https://lwzk.ycymedu.com/img/cpgx/cp_aijiedu.png"
mode="scaleToFill" class="w-[56rpx] h-[56rpx]" />
</view>
<view>智能AI解读</view>
</button>
</view>
</view>
</form>
<sar-popup :visible="visible" effect="slide-bottom" @overlay-click="onOverlayClick">
<view class="bg-white rounded-[24rpx_24rpx_0_0] px-[30rpx] pb-safe pt-[30rpx] min-h-[492rpx]">
<view class="text-[34rpx] font-500 flex items-center justify-between mb-[30rpx]">
<view>{{ getTitle(activeType) }}</view>
<view class="w-[36rpx] h-[36rpx] flex items-center" @click="onOverlayClick">
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_guanbi.png"
mode="scaleToFill" class="w-[36rpx] h-[36rpx]" />
</view>
</view>
<MxRadio v-model:value="userInfo.talentExtend.ageLimit" v-if="activeType == 'year'"
:options="yearClassification" label-key="label" value-key="label"
custom-root-cols-class="grid grid-cols-3 items-center gap-[16rpx]"
custom-root-class="pb-[20rpx]" custom-item-class="py-[12rpx] text-center "
active-item-class="bg-white text-[#1580FF] border-1 border-solid border-[#1580FF]!" @change="visible = false"/>
</view>
</sar-popup>
</view>
</template>
<style lang="scss" scoped>
.custom-background {
background: linear-gradient(180deg, #D7E4FF 0%, #fff 556rpx);
background-position: 50% 50%;
background-origin: padding-box;
background-clip: border-box;
background-size: auto auto;
}
.submit-btn[disabled] {
background-color: #a1cbff;
color: #fff;
}
</style>