1. vue2 格式
router,store,子组件,ElMessage引入使用方法 ，async 接口访问
<template>
<div class="inforThree">
<div class="threeOneModel">
<div class="news-container">
<nav class="news-header titleLink">
<span class="nav-item news-title">中标喜讯</span>
</nav>
<hr class="fullWidthRed">
<div class="news-content ">
<div v-if="currentNews.length > 0" class="news-list containTitle news">
<ul :class="{ anim: animate }" @mouseenter="stop()" @mouseleave="up()">
<li v-for="(news, idx) in currentNews" :key="idx" class="news-data-item news_name" @click="handleClick(item)">
<div class="containTitle">
<div class="containTitleLeft">
<span class="listStyleThree"></span>
<span class=" threeListWord">{{ news.title }}</span>
<img src="../../public/img/new.gif" alt="">
<span class=" threeListWord">{{news.company}}</span>
<p class="rightDate redColor">中标 </p>
</div>
<div class="containTitleRight">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import LoginAndAfter from '../LoginAndAfter.vue'
import ServiceCenter from '../ServiceCenter.vue'
import { ElMessage } from 'element-plus'
import {
useStore
} from 'vuex';
export default {
components: {
ServiceCenter,LoginAndAfter
},
data() {
return {
currentIndex: 0,
hoverIndex: -1,
categories: [{
title: '询价采购',
news: [{
title: '11111',
date: '10-01',
image: 'https://via.placeholder.com/150',
company: '这是第一条科技新闻的内容。',
id: 1,
}]
},
{
title: '工程招标',
news: [{
title: '湖南华电平江发电有限公司2025年技术监控管理及技术服务直接采购公示、仙居、金塘风场后评估报告服务直接采购项目',
date: '10-01',
image: 'https://via.placeholder.com/150',
company: '这是第一条体育新闻的内容。'
}]
}],
timer: null,
animate: false,
newsList: [{
id: 1,
name: "华为11111"
},
{
id: 2,
name: "Redmi K30 5G"
},
{
id: 3,
name: "小米CC9 Pro"
},
{
id: 4,
name: "Redmi 8"
},
],
newsItems: [],
counter: 1,
};
},
computed: {
// 模块2
currentNews() {
if (this.hoverIndex !== -1) {
this.currentIndex = this.hoverIndex;
}
return this.categories[this.currentIndex].news;
},
},
mounted() {
this.scrollUp(); // 开启滚动效果
},
methods: {
// 模块2
hoverCategory(index) {
this.hoverIndex = index;
},
// 滚动
// 查看详情
handleClick(item) {
console.log(item);
},
// 滚动
scrollUp() {
this.timer = setInterval(() => {
this.animate = true; // 向上滚动的时候需要添加动画
setTimeout(() => {
this.categories.push(this.categories[0]); // 将数组的第一个元素添加到数组最后一个
this.categories.shift(); // 删除数组的第一个元素
this.animate = false;
}, 900);
}, 3000);
},
//鼠标移上去停止
stop() {
clearInterval(this.timer);
},
//鼠标离开继续
up() {
this.scrollUp();
},
},
beforeDestroy() {
this.stop();
},
handleLogin(type) {
this.keyM = this.$store.state.index.key;
this.ivM = this.$store.state.index.iv;
// 定义数据
this.arr = {
do_user_login: this.username,
do_user_pass: this.password,
type: "1"
}
this.loginSend(this.arr)
},
async loginSend(data) {
try {
// 登录接口调用
userLogin(this.arr).then((res) => {
console.log("res------",res)
if(res.code==0){
// 已登录标识
this.$store.commit("loginFunction",true);
// router.push({name:'Home'})
this.$router.push({ name: 'Home', params: { key: Date.now() } });
}else{
ElMessage.error(res.msg)
}
});
} catch (error) {
ElMessage.error(error)// 处理错误
}
}
};
</script>
setup()方式
store使用 分页组件使用
<template>
<section class="module">
<span class="title">招标项目推荐</span>
<div class="upListCss">
<ul>
<li v-for="(list, index) in oneList" :key="index" class="searchListNew">
<div class="liFlex">
<div class="inforTitle">
<div class="titleImg">
<a :href="list.url" class="linkNew">
{{ list.text }}
</a>
<div class="imgNew" v-if="list.isNew === '0' ">
<img src="../../../public/img/new.png" alt="">
</div>
</div>
</div>
<div class="inforNewList">
<div class="inforNewFlex">
<div class="flexLevel" v-if="list.time !== ' ' ">
<p>发布时间：{{ list.time }}</p>
</div>
<div class="flexLevel" v-if="list.type !== '' ">
<p>公告类型：{{list.type}}</p>
</div>
<div class="flexLevel" v-if="list.undtime !== '' ">
<p>报名截止时间：{{list.undtime}}</p>
</div>
<div class="flexLevel" v-if="list.area !== '' ">
<p>地区：{{list.area}}</p>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- 分页 -->
<div class="searchPagination">
<el-pagination background :total="totalItems" :page-size="pageSize" :current-page="currentPage" @current-change="handlePageChange"
layout="prev, pager, next" hide-on-single-page />
</div>
</div>
</section>
</template>
<script>
import {
ref,
onMounted,
computed
} from 'vue';
import {newPage} from '@/apiUrl/index.js';
import axios from 'axios'; // 假设使用 axios 进行 HTTP 请求
import CryptoJSMy from '@/utils/aes-ecb.js'
import {
useStore
} from 'vuex';
export default {
setup() {
const store = useStore();
const items = ref([]);
const totalItems = ref(0);
const pageSize = ref(1);
const currentPage = ref(1);
let oneList = ref([]);
const key = computed(() => {
return store.state.index.key;
});
const iv = computed(() => {
return store.state.index.iv;
});
// 点击按钮 更改从store获取的数据
// const saveData = () => {
// console.log("1111")
// store.commit('loginFunction', '2222');
// };
// 正式访问 接口
const fetchData = async (page,key,iv) => {
// 定义数据
const arr = JSON.stringify({
data: page
})
// 加密后内容
let encryptWord = CryptoJSMy.encrypt(key.value,arr,iv.value)
// console.log('正式访问encryptWord', key,iv,encryptWord);
try {
const formdata = new FormData()
formdata.append('data', encryptWord)
// 注册接口调用
// newPage(formdata).then((res) => {
// items.value = response.data.items;
// oneList.value = response.data.total;
// });
} catch (error) {
console.error('Error fetching data:', error);
}
}
const handlePageChange = (newPage) => {
console.log(`当前页码已切换到第 ${newPage} 页`);
currentPage.value = newPage;
// fetchData(newPage);
totalItems.value = 2
oneList.value = [{
text: '湖南华电平江发电有限公司2025年技术监控管理及技术目',
time: '2025-06-19',
undtime: '2025-06-19 09:30',
type: "采购结果",
url: '/',
area: "重庆",
isNew: "0",
},
];
});
return {
items,
totalItems,
pageSize,
currentPage,
handlePageChange,
oneList,
key,iv
};
}
};
</script>
<style>
</style>
2 vue3
<script setup lang="ts">
import { ref ,computed} from 'vue'
import axios from 'axios';
import CryptoJSMy from '@/utils/aes-ecb.js'
import {register} from '../apiUrl/index.js'
import router from '../router/index.js'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex';
const store =useStore();
let autoLabelRed= ref(false)
let arrArr =ref();//加密字符串
let links= [{
text: '首页',
url: '/'
},
{
text: '询价采购',
url: '/about'
},
]
let isAutoLogin = ref(false)
let formData= ref({
unitName: '',
username: '',
password: '',
}
)
let errors =ref({
unitName: '公司工商注册全称',
username: '6-18位字符（可使用小写字母、数字、下划线，需以字母开头）',
password: '密码不能小于8位',
})
const key = computed(() => {
return store.state.index.key;
});
const toggleAutoLogin = (event) =>{
isAutoLogin.value = event.target.checked;
if(isAutoLogin.value){
autoLabelRed.value =false
}
}
const sendData = async (data) => {
try {
const formdata = new FormData()
formdata.append('data', data)
// 注册接口调用
register(formdata).then((res) => {
ElMessage({
message: '注册并登录成功',
type: 'success',
// duration:'3000'
})
store.commit('loginFunction',true);
setTimeout(function(){
router.push({name:'Home'})
},1500)
});
} catch (error) {
ElMessage.error(error)// 处理错误
}
}
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
