feat: 初始化前端项目基础架构
添加项目基础文件结构，包括Vue3+TypeScript配置、路由管理、状态管理和基础页面组件
This commit is contained in:
qingfeng1121
11
src/App.vue
Normal file
11
src/App.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<RouterView />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from "vue-router";
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
25
src/Route/route.ts
Normal file
25
src/Route/route.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
// 导入组件
|
||||
import Home from '../Views/Home.vue'
|
||||
import Login from '../Views/Login.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: Login
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
47
src/Service/ApiService.ts
Normal file
47
src/Service/ApiService.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:7071/api', // 后端API基础URL
|
||||
timeout: 10000, // 请求超时时间
|
||||
withCredentials: true, // 跨域请求时是否需要使用凭证
|
||||
})
|
||||
// 添加请求拦截器
|
||||
api.interceptors.request.use(
|
||||
(config) => {
|
||||
// 获取token
|
||||
const token = localStorage.getItem('token')
|
||||
if (token) {
|
||||
config.headers['Authorization'] = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
// 对请求错误做些什么
|
||||
console.error('请求错误:', error)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
// 添加响应拦截器
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
// 返回响应数据
|
||||
return response.data
|
||||
},
|
||||
(error) => {
|
||||
// 处理响应错误
|
||||
if (error.response) {
|
||||
// 服务器返回了响应，但状态码不在2xx范围内
|
||||
console.error('响应状态码:', error.response.status)
|
||||
console.error('响应数据:', error.response.data)
|
||||
} else if (error.request) {
|
||||
// 请求已发送，但没有收到响应
|
||||
console.error('请求已发送，但没有收到响应:', error.request)
|
||||
} else {
|
||||
// 其他错误
|
||||
console.error('其他错误:', error.message)
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default api
|
||||
12
src/Service/UserService.ts
Normal file
12
src/Service/UserService.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import api from "./ApiService";
|
||||
import router from '../Route/route'
|
||||
import type { Login } from "@/Util/Type";
|
||||
class UserService {
|
||||
login(params: Login) {
|
||||
return api.post('/auth/login', {
|
||||
username: params.username,
|
||||
password: params.password
|
||||
})
|
||||
}
|
||||
}
|
||||
export default new UserService()
|
||||
13
src/Util/Type.ts
Normal file
13
src/Util/Type.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
// 项目中使用的类型定义
|
||||
|
||||
// 商品详情类型
|
||||
export type ProductDetail = {
|
||||
id: string
|
||||
name: string
|
||||
price: string
|
||||
img: string
|
||||
}
|
||||
export type Login = {
|
||||
username: string
|
||||
password: string
|
||||
}
|
||||
20
src/Util/globalStore.ts
Normal file
20
src/Util/globalStore.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { defineStore } from 'pinia'
|
||||
export const useGlobalStore = defineStore('global', {
|
||||
// 定义状态
|
||||
state: () => ({
|
||||
token: localStorage.getItem('token') || null,
|
||||
}),
|
||||
// 定义操作
|
||||
actions: {
|
||||
// 定义设置token的操作
|
||||
setToken(token: string) {
|
||||
this.token = token
|
||||
localStorage.setItem('token', token)
|
||||
},
|
||||
// 定义清除token的操作
|
||||
clearToken() {
|
||||
this.token = null
|
||||
localStorage.removeItem('token')
|
||||
}
|
||||
}
|
||||
})
|
||||
18
src/Views/Home.vue
Normal file
18
src/Views/Home.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div id="home">
|
||||
<Header></Header>
|
||||
<Main></Main>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Header from "./herde.vue";
|
||||
import Main from "./main.vue";
|
||||
import Footer from "./footer.vue";
|
||||
</script>
|
||||
<style scoped>
|
||||
#home {
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
</style>
|
||||
347
src/Views/Login.vue
Normal file
347
src/Views/Login.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<!-- 登录页面 -->
|
||||
<template>
|
||||
<div id="login-container-bg">
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h1 class="login-title">欢迎登录</h1>
|
||||
<p class="login-subtitle">请输入您的账号和密码</p>
|
||||
</div>
|
||||
|
||||
<form class="login-form" @submit.prevent="login">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="username">用户名</label>
|
||||
<input type="text" id="username" v-model="loginform.username" name="username" required class="form-input"
|
||||
placeholder="请输入用户名" :class="{ 'input-error': errorMessage && !loginform.username }">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="password">密码</label>
|
||||
<input type="password" id="password" v-model="loginform.password" name="password" required
|
||||
class="form-input" placeholder="请输入密码" :class="{ 'input-error': errorMessage && !loginform.password }">
|
||||
</div>
|
||||
|
||||
<div v-if="errorMessage" class="error-message">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="login-button" :disabled="isLoading">
|
||||
<span v-if="isLoading" class="loading-spinner"></span>
|
||||
{{ isLoading ? '登录中...' : '登录' }}
|
||||
</button>
|
||||
|
||||
<div class="login-footer">
|
||||
<p class="register-link">
|
||||
还没有账号？ <a href="#" @click.prevent="router.push({ name: 'register' })">立即注册</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import userService from "@/Service/UserService";
|
||||
import { useRouter } from 'vue-router'
|
||||
import type { Login } from "@/Util/Type";
|
||||
import { useGlobalStore } from "@/Util/globalStore";
|
||||
const router = useRouter()
|
||||
|
||||
const loginform = ref<Login>({
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const errorMessage = ref('')
|
||||
const isLoading = ref(false)
|
||||
|
||||
const login = async () => {
|
||||
// 重置错误信息
|
||||
errorMessage.value = ''
|
||||
|
||||
// 简单的表单验证
|
||||
if (!loginform.value.username || !loginform.value.password) {
|
||||
errorMessage.value = '请输入用户名和密码'
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
isLoading.value = true
|
||||
const userLoginResponse = await userService.login(loginform.value)
|
||||
|
||||
// 注意：根据响应拦截器，userLoginResponse已经是response.data
|
||||
if (userLoginResponse.data.code === 200) {
|
||||
// 登录成功后，跳转到首页
|
||||
router.push({ name: 'home' })
|
||||
// 登录成功后，将token存储到全局状态管理中
|
||||
useGlobalStore().setToken(userLoginResponse.data.token)
|
||||
} else {
|
||||
// 登录失败后，显示错误信息给用户
|
||||
errorMessage.value = userLoginResponse.data.msg || '登录失败，请检查用户名和密码'
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('登录失败:', error)
|
||||
// 登录失败后，显示错误信息给用户
|
||||
errorMessage.value = error.response?.data?.msg || '网络错误，请稍后重试'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
/* 登录容器背景 */
|
||||
#login-container-bg {
|
||||
background-image: url('/b1.jpeg');
|
||||
background-size: 100vw 100vh; /* 与视口大小一致 */
|
||||
background-position: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
}
|
||||
|
||||
/* 登录容器 */
|
||||
.login-container {
|
||||
position: absolute;
|
||||
/* 调整定位，使其在背景中居中显示 */
|
||||
top: 50%;
|
||||
right: 10%; /* 调整右侧位置，避免超出屏幕 */
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 20px;
|
||||
animation: fadeIn 0.5s ease-in;
|
||||
}
|
||||
|
||||
/* 登录卡片 */
|
||||
.login-card {
|
||||
/* 实现从父容器背景截取的效果 */
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
overflow: hidden;
|
||||
/* 关键：使用固定背景定位，与父容器背景完全对齐 */
|
||||
background-image: url('/b1.jpeg');
|
||||
background-size: 100vw 100vh; /* 与视口大小一致 */
|
||||
background-position: 82.5% 49%;
|
||||
background-attachment: fixed;
|
||||
/* 确保背景图片不会重复 */
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.login-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 登录头部 */
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 登录表单 */
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* 表单组 */
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 表单标签 */
|
||||
.form-label {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 表单输入框 */
|
||||
.form-input {
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e1e5e9;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
outline: none;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #667eea;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.form-input.input-error {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
/* 错误信息 */
|
||||
.error-message {
|
||||
background-color: #fee2e2;
|
||||
color: #dc2626;
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: 10px;
|
||||
animation: shake 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.login-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.login-button:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.login-button:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.login-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
/* 登录页脚 */
|
||||
.login-footer {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.register-link a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.register-link a:hover {
|
||||
color: #764ba2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
.login-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
61
src/Views/footer.vue
Normal file
61
src/Views/footer.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div id="footer">
|
||||
<div id=""></div>
|
||||
<div id="footer-contact">
|
||||
<productList :productList="productLists" />
|
||||
</div>
|
||||
<div id="footer-copyright">
|
||||
<!-- 版权信息 -->
|
||||
<h2>Copyright @ 2023 淘淘王</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import productList from './product/productList.vue'
|
||||
const router = useRouter()
|
||||
// 定义商品列表
|
||||
const productLists = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '商品1',
|
||||
price: '100',
|
||||
img: '',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '商品2',
|
||||
price: '200',
|
||||
img: '',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '商品3',
|
||||
price: '300',
|
||||
img: '',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '商品4',
|
||||
price: '400',
|
||||
img: '',
|
||||
},
|
||||
])
|
||||
</script>
|
||||
<style scoped>
|
||||
#footer {
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0 20px;
|
||||
}
|
||||
h1 {
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
#footer-contact {
|
||||
/* 高度根据内容自适应 */
|
||||
height: initial;
|
||||
}
|
||||
</style>
|
||||
79
src/Views/herde.vue
Normal file
79
src/Views/herde.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div id="header">
|
||||
<div id="header-profile">
|
||||
<div id="header-profile-left">
|
||||
<!-- 登录 注册 -->
|
||||
<Button type="primary" @click="router.push('/login')">登录</Button>
|
||||
<Button type="primary" @click="router.push('/register')">注册</Button>
|
||||
</div>
|
||||
<div id="header-profile-right">
|
||||
<!-- 购物车 个人中心 -->
|
||||
<Button type="primary" @click="router.push('/cart')">购物车</Button>
|
||||
<Button type="primary" @click="router.push('/user')">个人中心</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Row id="header-nav-row">
|
||||
<Col :span="4">
|
||||
<a href="/">TaoTaoWang</a>
|
||||
</Col>
|
||||
<Col :span="16">
|
||||
<a-input-search v-model:value="value" placeholder="请输入" style="width: 200px"
|
||||
@search="onSearch" />
|
||||
</Col>
|
||||
<Col :span="4">
|
||||
<a href="/product">商品列表</a>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Button, Col, Row ,Space } from 'ant-design-vue';
|
||||
const router = useRouter()
|
||||
// 定义搜索框绑定的变量
|
||||
const value = ref('')
|
||||
// 定义搜索框的搜索事件
|
||||
const onSearch = (value: string) => {
|
||||
console.log('搜索关键词:', value)
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#header {
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
#header-profile {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#header-profile-left {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#header-profile-left>button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#header-profile-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#header-profile-right>button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
69
src/Views/main.vue
Normal file
69
src/Views/main.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<div id="main-header">
|
||||
<Button type="primary" @click="router.push('/')">按钮1</Button>
|
||||
<Button type="primary" @click="router.push('/list')">按钮2</Button>
|
||||
<Button type="primary" @click="router.push('/cart')">按钮3</Button>
|
||||
<Button type="primary" @click="router.push('/history')">按钮4</Button>
|
||||
<Button type="primary" @click="router.push('/user')">按钮5</Button>
|
||||
<Button type="primary" @click="router.push('/login')">按钮6</Button>
|
||||
<Button type="primary" @click="router.push('/register')">按钮7</Button>
|
||||
</div>
|
||||
<Row id="main-content">
|
||||
<Col class="main-content-col-top" :span="6">
|
||||
<h2>商品列表</h2>
|
||||
</Col>
|
||||
<Col class="main-content-col-center" :span="12">
|
||||
<Row id="main-content-ad">
|
||||
<Col :span="12">
|
||||
<h2>轮动广告</h2>
|
||||
</Col>
|
||||
<Col :span="12">
|
||||
<h2>百亿补贴</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row id="main-content-hot-goods">
|
||||
<!-- 热门商品展示 -->
|
||||
<Col :span="6">
|
||||
<h2>热门商品1</h2>
|
||||
</Col>
|
||||
<Col :span="6">
|
||||
<h2>热门商品2</h2>
|
||||
</Col>
|
||||
<Col :span="6">
|
||||
<h2>热门商品3</h2>
|
||||
</Col>
|
||||
<Col :span="6">
|
||||
<h2>热门商品4</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col class="main-content-col-bottom" :span="6">
|
||||
<h2>个人信息</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Button, Col, Row } from 'ant-design-vue';
|
||||
const router = useRouter()
|
||||
</script>
|
||||
<style scoped>
|
||||
#main {
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
h1 {
|
||||
color: #42b983;
|
||||
}
|
||||
#main-header {
|
||||
/* 根据中心对齐 分布按钮 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
</style>
|
||||
85
src/Views/product/productList.vue
Normal file
85
src/Views/product/productList.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<!-- 根据父类传递的商品列表渲染商品列表 -->
|
||||
<template>
|
||||
<div id="product-list">
|
||||
<div id="product-list-header" v-for="product in productList" :key="product.id">
|
||||
<!-- 这个商品的id是加密 -->
|
||||
<a href="http://localhost:5173/product/{{ product.id }}" target="_blank">
|
||||
<div id="product-list-header-img">
|
||||
<img class="product-list-header-img" :src="product.img || '/0.png'" alt="商品图片">
|
||||
<div class="product-list-header-img-mask">
|
||||
</div>
|
||||
</div>
|
||||
<div id="product-list-header-content">
|
||||
<h2>{{ product.name }}</h2>
|
||||
</div>
|
||||
<div id="product-list-header-price">
|
||||
<h2>{{ product.price }}</h2>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { type PropType } from 'vue'
|
||||
import type { ProductDetail } from '@/Util/Type'
|
||||
import { useGlobalStore } from '@/Util/globalStore'
|
||||
// 接收父类传递的商品列表
|
||||
const props = defineProps({
|
||||
productList: {
|
||||
type: Array as PropType<ProductDetail[]>,
|
||||
default: () => [],
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
/* 自定义css */
|
||||
/* 商品列表 */
|
||||
#product-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
/* 商品 */
|
||||
#product-list-header {
|
||||
max-width: 16.666666666666%;
|
||||
height: initial;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
#product-list-header-img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-list-header-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 鼠标图片悬浮亮度变低 */
|
||||
.product-list-header-img-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
background-color: transparent;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
#product-list-header-img:hover .product-list-header-img-mask {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
27
src/Views/product/productdetil.vue
Normal file
27
src/Views/product/productdetil.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<!-- 商品详情页面 -->
|
||||
<template>
|
||||
<div id="product-detail">
|
||||
<van-row id="product-detail-header">
|
||||
<van-col :span="24">
|
||||
<h2>商品详情</h2>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
// 根据路由获取商品id
|
||||
const productId = ref(router.currentRoute.value.params.productId)
|
||||
// 在根据service获取商品详情
|
||||
</script>
|
||||
<style scoped>
|
||||
#product-detail {
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
h2 {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
15
src/main.ts
Normal file
15
src/main.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './Route/route'
|
||||
import { createPinia } from 'pinia'
|
||||
// 导入正确的 Vue 版本
|
||||
import Antd from 'ant-design-vue'
|
||||
// 导入正确的样式
|
||||
import 'ant-design-vue/dist/reset.css'
|
||||
|
||||
const app = createApp(App)
|
||||
const pinia = createPinia()
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
app.use(Antd)
|
||||
app.mount('#app')
|
||||
Reference in New Issue
Block a user