mj/official-website-portals
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化案例类型切换、提交必填项

Browse Source
This commit is contained in:
zhangrun 2025-11-09 00:55:38 +08:00
parent a75e9e84b1
commit ccdb2ac1f3
2 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/components/Case.vue
View File

@ -13,7 +13,7 @@
<div class="flex flex-wrap justify-center gap-4 mb-10"> <div class="flex flex-wrap justify-center gap-4 mb-10">
<button class="case-filter px-5 py-2 rounded-full" <button class="case-filter px-5 py-2 rounded-full"
v-for="item in typeList" :key="'type'+ item.type" v-for="item in typeList" :key="'type'+ item.type"
:class="currentType == item.type? 'active bg-primary text-white font-medium': 'bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors'" :class="currentType == item.id? 'active bg-primary text-white font-medium': 'bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors'"
@click="changeType(item)" @click="changeType(item)"
>{{item.name}}</button> >{{item.name}}</button>
<!-- <button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">智慧园区</button> <!-- <button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">智慧园区</button>
@ -28,10 +28,10 @@
<div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group" v-for="(item,index) in caseList" :key="'caseitem' + index"> <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group" v-for="(item,index) in caseList" :key="'caseitem' + index">
<div class="h-56 overflow-hidden relative"> <div class="h-56 overflow-hidden relative">
<img :src="item.pic" :alt="item.typeName" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> <img :src="item.pic" :alt="item.typeName" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute top-4 left-4 bg-primary text-white text-sm px-3 py-1 rounded-full" v-if="item.typeId == 1">{{item.typeName}}</div> <div class="absolute top-4 left-4 bg-primary text-white text-sm px-3 py-1 rounded-full" v-if="typeList[1]?item.typeId == typeList[1].id:false">{{item.typeName}}</div>
<div class="absolute top-4 left-4 bg-secondary text-white text-sm px-3 py-1 rounded-full" v-if="item.typeId == 2">{{item.typeName}}</div> <div class="absolute top-4 left-4 bg-secondary text-white text-sm px-3 py-1 rounded-full" v-if="typeList[2]?item.typeId == typeList[2].id:false">{{item.typeName}}</div>
<div class="absolute top-4 left-4 bg-green-500 text-white text-sm px-3 py-1 rounded-full" v-if="item.typeId == 3">{{item.typeName}}</div> <div class="absolute top-4 left-4 bg-green-500 text-white text-sm px-3 py-1 rounded-full" v-if="typeList[3]?item.typeId == typeList[3].id:false">{{item.typeName}}</div>
<div class="absolute top-4 left-4 bg-purple-500 text-white text-sm px-3 py-1 rounded-full" v-if="item.typeId == 4">{{item.typeName}}</div> <div class="absolute top-4 left-4 bg-purple-500 text-white text-sm px-3 py-1 rounded-full" v-if="typeList[4]?item.typeId == typeList[4].id:false">{{item.typeName}}</div>
</div> </div>
<div class="p-6"> <div class="p-6">
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">{{item.name}}</h3> <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">{{item.name}}</h3>
@ -151,7 +151,7 @@ onMounted(() => {
getCaseData() getCaseData()
}) })
const typeList = ref([ const typeList = ref([
{type: '0',name: '全部案例',id: 'all000'}, {type: '0',name: '全部案例',id: ''},
]) ])
const caseList = ref([]) const caseList = ref([])
watch(() => props.caseData, (val) => { watch(() => props.caseData, (val) => {
@ -163,12 +163,12 @@ watch(() => props.caseData, (val) => {
}, { }, {
deep: false deep: false
}) })
const currentType = ref('0') const currentType = ref('')
const getCaseData = async () => { const getCaseData = async () => {
console.log('88') console.log('88')
const website = new Website() const website = new Website()
const res = await website.getCasePage({typeId: '',pageNum: 1,pageSize: 6}) const res = await website.getCasePage({typeId: currentType.value,pageNum: 1,pageSize: 6})
console.log('66',res) console.log('66',res)
if(res.code == 200){ if(res.code == 200){
let resLs = res.data?.records || [] let resLs = res.data?.records || []
@ -187,7 +187,8 @@ const getCaseData = async () => {
} }
const changeType = (item) => { const changeType = (item) => {
currentType.value = item.type currentType.value = item.id
getCaseData()
} }
</script> </script>
<style lang="scss"> <style lang="scss">

3
src/views/components/Contact.vue
View File

@ -112,6 +112,7 @@
<option value="software-education">智慧教育解决方案</option> <option value="software-education">智慧教育解决方案</option>
<option value="other">其他服务咨询</option> --> <option value="other">其他服务咨询</option> -->
</select> </select>
<div class="formErrorTips text-sm" v-if="errors.service">{{ errors.service }}</div>
</div> </div>
<div class="mb-6"> <div class="mb-6">
@ -273,7 +274,7 @@
isValid = validateField('name', formData.value.name) && isValid; isValid = validateField('name', formData.value.name) && isValid;
isValid = validateField('phone', formData.value.phone) && isValid; isValid = validateField('phone', formData.value.phone) && isValid;
isValid = validateField('email', formData.value.email) && isValid; isValid = validateField('email', formData.value.email) && isValid;
// isValid = validateField('service', formData.value.service) && isValid; isValid = validateField('service', formData.value.service) && isValid;
return isValid; return isValid;
}; };