Merge branch 'main' into dev-wangyiming
# Conflicts: # components.d.ts # src/router/index.ts
This commit is contained in:
wlikett
commit
efb48126f8
|
|
@ -10,8 +10,19 @@ declare module 'vue' {
|
|||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
|
|
|
|||
273
src/App.vue
273
src/App.vue
|
|
@ -1,276 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import FooterInfo from './compontents/FooterInfo/index.vue'
|
||||
const route = useRoute()
|
||||
|
||||
|
||||
// 判断是否是个人中心页面 如果是则隐藏页脚
|
||||
const isMyInfoPage = () => {
|
||||
if (route.path.indexOf("myuser") === -1) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 搜索查询绑定值
|
||||
const keywordIptValue = ref('')
|
||||
|
||||
// 输入框下方历史搜索记录
|
||||
const searchHistoryList = ref(
|
||||
[
|
||||
{ name: '220E履带挖掘机' },
|
||||
{ name: '3443挖掘机' },
|
||||
{ name: '塔式起重机' },
|
||||
{ name: '轮式牵引铲运机' },
|
||||
]
|
||||
)
|
||||
|
||||
// 搜索按钮
|
||||
const searchKeywordBtn = () => {
|
||||
|
||||
console.log('搜索关键字', keywordIptValue.value);
|
||||
|
||||
}
|
||||
|
||||
// 点击下方搜索记录时
|
||||
const handleHistory = (hisValue: any) => {
|
||||
keywordIptValue.value = hisValue
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="shop-header">
|
||||
<div class="header-box">
|
||||
<ul class="header-wapper">
|
||||
<li>
|
||||
<span>
|
||||
<a href="">登录</a>/
|
||||
<a href="" style="color:#6D6D6D">注册</a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span @click="$router.push({ name: 'myuser' })">
|
||||
个人中心
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/home/2023_12_01_beijing2/shoucang.png" alt="">
|
||||
<span>
|
||||
收藏夹
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/home/2023_12_01_beijing2/shouji.png" alt="">
|
||||
<span class="last-span">
|
||||
手机版
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 菜单 -->
|
||||
<div class="shop-menu-box">
|
||||
<div class="shop-menu">
|
||||
<div class="left-logo" @click="$router.push('/home')">
|
||||
<!-- 首页Logo -->
|
||||
<img src="@/assets/img/home/2023_12_01_beijing2/logo.png" alt="首页" title="首页">
|
||||
</div>
|
||||
<input placeholder="输入设备关键词" type="text" v-model="keywordIptValue">
|
||||
<button class="search-btn" @click="searchKeywordBtn">搜索</button>
|
||||
<div class="erweima">
|
||||
<div class="tilte">手机扫码登录</div>
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ipt-down">
|
||||
<a @click="handleHistory(item.name)" v-for="item in searchHistoryList" :key="item.name">{{ item.name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<RouterView />
|
||||
</div>
|
||||
<FooterInfo v-if="isMyInfoPage()" />
|
||||
<!-- <FooterInfo /> -->
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30px;
|
||||
padding: 20px 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.shop-header {
|
||||
// height: 157px;
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
|
||||
.header-box {
|
||||
background-color: #F5F5F5;
|
||||
width: 100%;
|
||||
|
||||
.header-wapper {
|
||||
width: 1200px;
|
||||
height: 37px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 37px;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
|
||||
|
||||
span {
|
||||
color: #6D6D6D;
|
||||
font-size: 14px;
|
||||
padding: 0 20px 0 3px;
|
||||
border-right: 1px solid #666655;
|
||||
|
||||
&:hover {
|
||||
color: #2282FF;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #2282FF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.last-span {
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.shop-menu-box {
|
||||
background-color: #edeef6;
|
||||
|
||||
.shop-menu {
|
||||
position: relative;
|
||||
width: 1200px;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.left-logo {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
||||
img {
|
||||
width: 176px;
|
||||
height: 58px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
input {
|
||||
width: 700px;
|
||||
height: 45px;
|
||||
border: 1px solid #5CA4FF;
|
||||
border-radius: 45px;
|
||||
margin-left: 70px;
|
||||
line-height: 45px;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #333;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid #5CA4FF;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 100px;
|
||||
height: 39px;
|
||||
transform: translateX(-110px);
|
||||
border-radius: 39px;
|
||||
background: linear-gradient(132deg, #6DE7FF 0%, #348CFF 100%);
|
||||
box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5);
|
||||
border: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.erweima {
|
||||
// display: none;
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
margin-left: -20px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
|
||||
.tilte {
|
||||
font-size: 14px;
|
||||
color: #1F88FF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ipt-down {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 22%;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
padding: 0 10px;
|
||||
color: #727272;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,44 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
const emit = defineEmits(['getList'])
|
||||
// 每页数量值改变
|
||||
const handleSizeChange = (val: Number) => {
|
||||
// 传递每页数量
|
||||
emit('getList', val)
|
||||
}
|
||||
// 页码值改变
|
||||
const handleCurrentChange = (val: Number) => {
|
||||
// 传递页码值
|
||||
emit('getList', val)
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
interface Props {
|
||||
pageSize?: 20
|
||||
pageNumber?: 1
|
||||
total?: 0
|
||||
}
|
||||
|
||||
// const handleTotalText = () => {
|
||||
// const targetDom: any = document.querySelector('.el-pagination__total')
|
||||
// targetDom.innerText = `数量${total.value}`
|
||||
// }
|
||||
// onMounted(() => {
|
||||
// // handleTotalText()
|
||||
// })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 分页 -->
|
||||
|
||||
<el-pagination
|
||||
current-page="1"
|
||||
page-size="20"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:current-page="pageNumber"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
small="small"
|
||||
background="background"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="50" />
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
16
src/main.ts
16
src/main.ts
|
|
@ -6,14 +6,28 @@ import { createPinia } from 'pinia'
|
|||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import 'element-plus/dist/index.css'
|
||||
import './style/css/reset.css'
|
||||
|
||||
const app = createApp(App)
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
import pinia from "./store"
|
||||
|
||||
|
||||
|
||||
|
||||
// 使页面跳转后滚动条恢复至顶部
|
||||
router.beforeEach((to, from, next) => {
|
||||
// chrome
|
||||
document.body.scrollTop = 0;
|
||||
// firefox 兼容火狐
|
||||
document.documentElement.scrollTop = 0;
|
||||
next();
|
||||
})
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
|
||||
app.use(pinia)
|
||||
app.mount('#app')
|
||||
|
|
|
|||
|
|
@ -12,6 +12,16 @@ const routes: Array<RouteRecordRaw> = [
|
|||
AuthFlag: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('views/Login.vue'),
|
||||
meta: {
|
||||
title: '登录页',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/test', // 主路由地址
|
||||
name: 'testIndex',
|
||||
|
|
@ -36,116 +46,145 @@ const routes: Array<RouteRecordRaw> = [
|
|||
},
|
||||
|
||||
|
||||
// 个人中心
|
||||
{
|
||||
path: '/myuser', // 主路由地址
|
||||
name: 'myuser',
|
||||
component: () => import('views/user/index.vue'), // 组件加载
|
||||
meta: {
|
||||
title: '个人中心',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
redirect: '/myuser/baseInfo',
|
||||
children: [
|
||||
{
|
||||
path: 'baseInfo',
|
||||
name: 'baseInfo',
|
||||
component: () => import('views/user/baseInfo/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'orderManagement',
|
||||
name: 'orderManagement',
|
||||
component: () => import('views/user/orderManagement/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'subAccount',
|
||||
name: 'subAccount',
|
||||
component: () => import('views/user/subAccount/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'orderManagementCz',
|
||||
name: 'orderManagementCz',
|
||||
component: () => import('views/user/orderManagementCz/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'goodsManagement',
|
||||
name: 'goodsManagement',
|
||||
component: () => import('views/user/goodsManagement/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'goodsUpdown',
|
||||
name: 'goodsUpdown',
|
||||
component: () => import('views/user/goodsUpdown/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'operatorManagement',
|
||||
name: 'operatorManagement',
|
||||
component: () => import('views/user/operatorManagement/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/home'
|
||||
},
|
||||
|
||||
|
||||
// 首页
|
||||
{
|
||||
path: '/home',
|
||||
name: 'home',
|
||||
component: () => import('views/home/index.vue'),
|
||||
path: '/',
|
||||
component: () => import('views/AppMain.vue'),
|
||||
redirect: '/home',
|
||||
meta: {
|
||||
title: '首页',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
|
||||
children: [
|
||||
// 首页
|
||||
{
|
||||
path: 'home',
|
||||
name: 'home',
|
||||
component: () => import('views/home/index.vue'),
|
||||
meta: {
|
||||
title: '首页',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
// 自选直租
|
||||
{
|
||||
path: '/equip',
|
||||
name: 'equip',
|
||||
redirect: '/equip/list',
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'equipList',
|
||||
component: () => import('views/equip/list.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
// 资讯详情
|
||||
{
|
||||
path: '/consultationDetails',
|
||||
name: 'consultationDetails',
|
||||
component: () => (import('views/consultationDetails/index.vue'))
|
||||
},
|
||||
// 收藏夹页面
|
||||
{
|
||||
path: '/collect',
|
||||
name: 'collect',
|
||||
component: () => import('views/collect/index.vue')
|
||||
},
|
||||
// 个人中心
|
||||
{
|
||||
path: '/myuser', // 主路由地址
|
||||
name: 'myuser',
|
||||
component: () => import('views/user/index.vue'), // 组件加载
|
||||
meta: {
|
||||
title: '个人中心',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
redirect: '/myuser/baseInfo',
|
||||
children: [
|
||||
{
|
||||
path: 'baseInfo',
|
||||
name: 'baseInfo',
|
||||
component: () => import('views/user/baseInfo/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'orderManagement',
|
||||
name: 'orderManagement',
|
||||
component: () => import('views/user/orderManagement/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'subAccount',
|
||||
name: 'subAccount',
|
||||
component: () => import('views/user/subAccount/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'orderManagementCz',
|
||||
name: 'orderManagementCz',
|
||||
component: () => import('views/user/orderManagementCz/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'goodsManagement',
|
||||
name: 'goodsManagement',
|
||||
component: () => import('views/user/goodsManagement/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'goodsUpdown',
|
||||
name: 'goodsUpdown',
|
||||
component: () => import('views/user/goodsUpdown/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'operatorManagement',
|
||||
name: 'operatorManagement',
|
||||
component: () => import('views/user/operatorManagement/index.vue'),
|
||||
meta: {
|
||||
title: '基础信息',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
},
|
||||
// 自选直租
|
||||
{
|
||||
path:'/equipList',
|
||||
name:'equipList',
|
||||
component: () => import('views/equip/list.vue')
|
||||
},{
|
||||
path: '/equipDetail/:id',
|
||||
name: 'equipDetail',
|
||||
component: () => import('views/equip/detail.vue')
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@ export const useStore = defineStore('main', {
|
|||
{
|
||||
// 自定义存储的 key，默认是 store.$id
|
||||
key: 'main',
|
||||
storage: localStorage, //缓存模式 可选 localStorage sessionStorage
|
||||
storage: sessionStorage, //缓存模式 可选 localStorage sessionStorage
|
||||
// state 中的字段名，按组打包储存
|
||||
paths: ['text', 'age'] //需要缓存的字段 与 state中相关联
|
||||
paths: ['token'] //需要缓存的字段 与 state中相关联
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,17 +79,17 @@ time,
|
|||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
|
||||
border: 0;
|
||||
border: 0;
|
||||
|
||||
font-size: 100%;
|
||||
font-size: 100%;
|
||||
|
||||
font: inherit;
|
||||
font: inherit;
|
||||
|
||||
vertical-align: baseline;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
|
|
@ -104,53 +104,53 @@ hgroup,
|
|||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: "";
|
||||
content: '';
|
||||
|
||||
content: none;
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-collapse: collapse;
|
||||
|
||||
border-spacing: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100vw;
|
||||
/* height: 100vh; */
|
||||
background: linear-gradient(180deg, #ecedf5 0%, #f2f3f9 55%, #ffffff 100%);
|
||||
width: 100vw;
|
||||
/* height: 100vh; */
|
||||
background: linear-gradient(180deg, #ecedf5 0%, #f2f3f9 55%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.wapper {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,253 @@
|
|||
<script setup lang="ts">
|
||||
import FooterInfo from '../compontents/FooterInfo/index.vue'
|
||||
const route = useRoute()
|
||||
|
||||
// 判断是否是个人中心页面 如果是则隐藏页脚
|
||||
const isMyInfoPage = () => {
|
||||
if (route.path.indexOf('myuser') === -1) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索查询绑定值
|
||||
const keywordIptValue = ref('')
|
||||
|
||||
// 输入框下方历史搜索记录
|
||||
const searchHistoryList = ref([
|
||||
{ name: '220E履带挖掘机' },
|
||||
{ name: '3443挖掘机' },
|
||||
{ name: '塔式起重机' },
|
||||
{ name: '轮式牵引铲运机' }
|
||||
])
|
||||
|
||||
// 搜索按钮
|
||||
const searchKeywordBtn = () => {
|
||||
console.log('搜索关键字', keywordIptValue.value)
|
||||
}
|
||||
|
||||
// 点击下方搜索记录时
|
||||
const handleHistory = (hisValue: any) => {
|
||||
keywordIptValue.value = hisValue
|
||||
}
|
||||
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="shop-header">
|
||||
<div class="header-box">
|
||||
<ul class="header-wapper">
|
||||
<li>
|
||||
<span>
|
||||
<a href="">登录</a>
|
||||
/
|
||||
<a href="" style="color: #6d6d6d">注册</a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span @click="$router.push({ name: 'myuser' })">个人中心</span>
|
||||
</li>
|
||||
<li @click="$router.push('/collect')">
|
||||
<img src="./assets/img/home/2023_12_01_beijing2/shoucang.png" alt="" />
|
||||
<span>收藏夹</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/home/2023_12_01_beijing2/shouji.png" alt="" />
|
||||
<span class="last-span">手机版</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 菜单 -->
|
||||
<div class="shop-menu-box">
|
||||
<div class="shop-menu">
|
||||
<div class="left-logo" @click="$router.push('/home')">
|
||||
<!-- 首页Logo -->
|
||||
<img
|
||||
src="@/assets/img/home/2023_12_01_beijing2/logo.png"
|
||||
alt="首页"
|
||||
title="首页" />
|
||||
</div>
|
||||
<input
|
||||
placeholder="输入设备关键词"
|
||||
type="text"
|
||||
v-model="keywordIptValue"
|
||||
@keydown.enter="searchKeywordBtn" />
|
||||
<button class="search-btn" @click="searchKeywordBtn">搜索</button>
|
||||
<div class="erweima">
|
||||
<div class="tilte">手机扫码登录</div>
|
||||
<img src="" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="ipt-down">
|
||||
<a
|
||||
@click="handleHistory(item.name)"
|
||||
v-for="item in searchHistoryList"
|
||||
:key="item.name">
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<RouterView />
|
||||
</div>
|
||||
<FooterInfo v-if="isMyInfoPage()" />
|
||||
<!-- <FooterInfo /> -->
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
border-radius: 30px;
|
||||
padding: 20px 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.shop-header {
|
||||
// height: 157px;
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
|
||||
.header-box {
|
||||
background-color: #f5f5f5;
|
||||
width: 100%;
|
||||
|
||||
.header-wapper {
|
||||
width: 1200px;
|
||||
height: 37px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 37px;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
|
||||
span {
|
||||
color: #6d6d6d;
|
||||
font-size: 14px;
|
||||
padding: 0 20px 0 3px;
|
||||
border-right: 1px solid #666655;
|
||||
|
||||
&:hover {
|
||||
color: #2282ff;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #2282ff;
|
||||
}
|
||||
}
|
||||
|
||||
.last-span {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-menu-box {
|
||||
background-color: #edeef6;
|
||||
|
||||
.shop-menu {
|
||||
position: relative;
|
||||
width: 1200px;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left-logo {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
||||
img {
|
||||
width: 176px;
|
||||
height: 58px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 700px;
|
||||
height: 45px;
|
||||
border: 1px solid #5ca4ff;
|
||||
border-radius: 45px;
|
||||
margin-left: 70px;
|
||||
line-height: 45px;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #333;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid #5ca4ff;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 100px;
|
||||
height: 39px;
|
||||
transform: translateX(-110px);
|
||||
border-radius: 39px;
|
||||
background: linear-gradient(132deg, #6de7ff 0%, #348cff 100%);
|
||||
box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5);
|
||||
border: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.erweima {
|
||||
// display: none;
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
margin-left: -20px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
|
||||
.tilte {
|
||||
font-size: 14px;
|
||||
color: #1f88ff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ipt-down {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 22%;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
padding: 0 10px;
|
||||
color: #727272;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
</script>
|
||||
<template>首页</template>
|
||||
|
||||
<template></template>
|
||||
|
||||
<style></style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="login-container">登录页</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.login-container {
|
||||
height: 100vh;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
const getImg = (imgUrl: string) => {
|
||||
return new URL(imgUrl, import.meta.url).href
|
||||
}
|
||||
const collectList = ref([
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
},
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
},
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
},
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
},
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
},
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
},
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
}
|
||||
])
|
||||
|
||||
// 查看设备详情
|
||||
const previewCollectBtn = () => {
|
||||
router.push('/equip/list')
|
||||
}
|
||||
// 删除设备收藏
|
||||
const deleteCollect = (indx: any) => {
|
||||
collectList.value.splice(indx, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 收藏设备页面 -->
|
||||
<div class="my-collect">
|
||||
<div class="collect" v-for="(item, index) in collectList" :key="item.v_collect_name">
|
||||
<!-- 商品图片 -->
|
||||
<img :src="getImg(item.v_collect_imgsrc)" alt="" />
|
||||
<div class="lifting-info">
|
||||
<i>起重量：5吨</i>
|
||||
<i>起重量：5吨</i>
|
||||
</div>
|
||||
<div class="collect-price">￥{{ item.v_collect_price }}</div>
|
||||
<div class="collect-name">{{ item.v_collect_name }}</div>
|
||||
<div class="collect-adress">{{ item.v_collect_adress }}</div>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<div class="collect-mask">
|
||||
<div class="collect-mask-btn">
|
||||
<button @click="previewCollectBtn">查看设备</button>
|
||||
<button @click="deleteCollect(index)">删除收藏</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.my-collect {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.collect {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
width: calc((100% - 60px) / 3);
|
||||
margin: 0 20px 20px 0;
|
||||
|
||||
// 这里一行显示4个，所以是/4，一行显示几个就除以几
|
||||
// 这里的60rpx = (分布个数4-1)*间隙20rpx, 可以根据实际的分布个数和间隙区调整
|
||||
min-width: calc((100% - 60px) / 3);
|
||||
max-width: calc((100% - 60px) / 3);
|
||||
// 每行最右侧的那个不设置右外边距
|
||||
&:nth-child(3n + 3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:nth-child(3n + 1) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.lifting-info {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
top: 220px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: #333;
|
||||
opacity: 0.9;
|
||||
color: #fff;
|
||||
i {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.collect-price {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
color: #e6165e;
|
||||
}
|
||||
|
||||
.collect-name {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding-left: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.collect-adress {
|
||||
height: 30px;
|
||||
padding-right: 10px;
|
||||
line-height: 30px;
|
||||
text-align: right;
|
||||
color: #bdbebf;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// 遮罩层
|
||||
.collect-mask {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #333;
|
||||
opacity: 0.7;
|
||||
|
||||
.collect-mask-btn {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
button {
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
height: 47px;
|
||||
border: none;
|
||||
background-color: #14171f;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
&:first-child {
|
||||
border-right: 1px solid #fff;
|
||||
background-color: #ee3442;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.03);
|
||||
transition: 2s all;
|
||||
.collect-mask {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<!-- 咨询详情页面 -->
|
||||
<div class="consultation-details">咨询详情页面(占位)</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.consultation-details {
|
||||
color: #000;
|
||||
background-color: skyblue;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -168,6 +168,27 @@
|
|||
const handlerGoodsDetails = () => {
|
||||
console.log('去往商品详情页')
|
||||
}
|
||||
|
||||
const detailsList = ref([
|
||||
{
|
||||
v_title: '实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”',
|
||||
v_content_info:
|
||||
'天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存',
|
||||
v_time: '[2023/11/28]'
|
||||
},
|
||||
{
|
||||
v_title: '实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”',
|
||||
v_content_info:
|
||||
'天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存',
|
||||
v_time: '[2023/11/28]'
|
||||
},
|
||||
{
|
||||
v_title: '实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”',
|
||||
v_content_info:
|
||||
'天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存',
|
||||
v_time: '[2023/11/28]'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -255,34 +276,18 @@
|
|||
|
||||
<!-- 右侧信息 -->
|
||||
<div class="right-consult">
|
||||
<div class="consult-box">
|
||||
<div
|
||||
class="consult-box"
|
||||
@click="$router.push('/consultationDetails')"
|
||||
v-for="item in detailsList"
|
||||
:key="item.v_time">
|
||||
<div class="consult-title">
|
||||
<h2>实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”</h2>
|
||||
<span>[2023/11/28]</span>
|
||||
<h2>{{ item.v_title }}</h2>
|
||||
<span>{{ item.v_time }}</span>
|
||||
</div>
|
||||
|
||||
<div class="consult-info">
|
||||
天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存
|
||||
</div>
|
||||
</div>
|
||||
<div class="consult-box">
|
||||
<div class="consult-title">
|
||||
<h2>实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”</h2>
|
||||
<span>[2023/11/28]</span>
|
||||
</div>
|
||||
|
||||
<div class="consult-info">
|
||||
天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存
|
||||
</div>
|
||||
</div>
|
||||
<div class="consult-box">
|
||||
<div class="consult-title">
|
||||
<h2>实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”</h2>
|
||||
<span>[2023/11/28]</span>
|
||||
</div>
|
||||
|
||||
<div class="consult-info">
|
||||
天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存
|
||||
{{ item.v_content_info }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -462,11 +467,13 @@
|
|||
.right-consult {
|
||||
height: 210px;
|
||||
flex: 1;
|
||||
padding-left: 35px;
|
||||
width: calc(100% - 340px);
|
||||
// padding-left: 35px;
|
||||
|
||||
.consult-box {
|
||||
height: 70px;
|
||||
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
.consult-title {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,86 @@
|
|||
<script setup lang="ts">
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
// 旧手机号码
|
||||
const oldPhoneNumber = ref('15336652321')
|
||||
// 修改新手机号码的数据源
|
||||
const editForm = ref({
|
||||
v_phone: '13522222'
|
||||
})
|
||||
// 修改手机号码弹框显示隐藏
|
||||
const editDialogTableVisible = ref(false)
|
||||
// 修改手机号码按钮
|
||||
const handlerEditMobilePhone = () => {
|
||||
console.log('修改***')
|
||||
editDialogTableVisible.value = true
|
||||
}
|
||||
// 修改弹框确定
|
||||
const submitEditPhone = () => {
|
||||
console.log('确定修改')
|
||||
editDialogTableVisible.value = false
|
||||
}
|
||||
// 修改弹框关闭
|
||||
const closeEditBtn = () => {
|
||||
console.log('关闭修改')
|
||||
editDialogTableVisible.value = false
|
||||
}
|
||||
// 注销按钮
|
||||
const logoffClick = () => {
|
||||
ElMessageBox.confirm('是否确定对账户进行注销', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '已注销'
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '已取消'
|
||||
})
|
||||
})
|
||||
}
|
||||
// 订单信息
|
||||
const orderInfoList = ref([
|
||||
{
|
||||
v_name: '已提交',
|
||||
imgSrc: '../../../assets/img/home/2023_12_01_beijing2/fankuixinxi.png',
|
||||
orderConunt: 1
|
||||
},
|
||||
{
|
||||
v_name: '进行中',
|
||||
imgSrc: '../../../assets/img/home/2023_12_01_beijing2/dingdanxinxi.png',
|
||||
orderConunt: 1
|
||||
},
|
||||
{
|
||||
v_name: '已完成',
|
||||
imgSrc: '../../../assets/img/home/2023_12_01_beijing2/lishijishi.png',
|
||||
orderConunt: 1
|
||||
},
|
||||
{
|
||||
v_name: '全部订单',
|
||||
imgSrc: '../../../assets/img/home/2023_12_01_beijing2/fuwuxiangmu.png',
|
||||
orderConunt: 1
|
||||
}
|
||||
])
|
||||
|
||||
const getImg = (imgUrl: string) => {
|
||||
return new URL(imgUrl, import.meta.url).href
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 基础信息 -->
|
||||
<div class="base-info">
|
||||
<div class="title-info">
|
||||
<div class="number-box">
|
||||
13585990498
|
||||
</div>
|
||||
<div class="number-box">{{ oldPhoneNumber }}</div>
|
||||
|
||||
<div class="user-name">
|
||||
<span class="free-user active-user">免费用户</span>/
|
||||
<span class="free-user active-user">免费用户</span>
|
||||
/
|
||||
<span class="standard-user">标准用户</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -20,15 +89,13 @@
|
|||
<span class="enterprise-name">安徽博诺斯信息科技有限公司</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="btn-edit">
|
||||
<span>
|
||||
<EditPen style="width: 1em; height: 1em; "></EditPen>
|
||||
<span @click="handlerEditMobilePhone">
|
||||
<EditPen style="width: 1em; height: 1em"></EditPen>
|
||||
修改
|
||||
</span>
|
||||
<span>
|
||||
<SwitchButton style="width: 1em; height: 1em; " />
|
||||
<span @click="logoffClick">
|
||||
<SwitchButton style="width: 1em; height: 1em" />
|
||||
注销
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -36,112 +103,118 @@
|
|||
|
||||
<!-- 订单交易信息 -->
|
||||
<div class="goods-box">
|
||||
|
||||
|
||||
<ul class="goods-count">
|
||||
<li>
|
||||
<img src="../../../assets/img/home/2023_12_01_beijing2/fankuixinxi.png" alt="">
|
||||
<span class="item">已提交</span>
|
||||
<span>0</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../../../assets/img/home/2023_12_01_beijing2/dingdanxinxi.png" alt="">
|
||||
<span class="item">进行中</span>
|
||||
<span>0</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../../../assets/img/home/2023_12_01_beijing2/lishijishi.png" alt="">
|
||||
<span class="item">已完成</span>
|
||||
<span>0</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../../../assets/img/home/2023_12_01_beijing2/fuwuxiangmu.png" alt="">
|
||||
<span class="item">全部订单</span>
|
||||
<span>0</span>
|
||||
<li v-for="item in orderInfoList" :key="item.v_name">
|
||||
<img :src="getImg(item.imgSrc)" alt="" />
|
||||
<span class="item">{{ item.v_name }}</span>
|
||||
<span>{{ item.orderConunt }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 修改手机号码弹框 -->
|
||||
<el-dialog v-model="editDialogTableVisible" title="修改手机号码" width="30%">
|
||||
<el-form :model="editForm">
|
||||
<el-form-item label="原手机号码">
|
||||
<el-input
|
||||
v-model="oldPhoneNumber"
|
||||
autocomplete="off"
|
||||
disabled
|
||||
style="width: 220px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新手机号码">
|
||||
<el-input
|
||||
v-model="editForm.v_phone"
|
||||
autocomplete="off"
|
||||
placeholder="请输入新手机号码"
|
||||
style="width: 220px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="submitEditPhone">确 定</el-button>
|
||||
<el-button type="warning" @click="closeEditBtn">关 闭</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.base-info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
// .base-info {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
|
||||
.title-info {
|
||||
height: 50px;
|
||||
background-color: #f7f9fa;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.number-box {
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: #1B7EFF;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin-left: 15px;
|
||||
color: #1B7EFF;
|
||||
}
|
||||
|
||||
.active-user {
|
||||
color: #c8c9c9;
|
||||
}
|
||||
|
||||
.my-enterprise {
|
||||
font-size: 18px;
|
||||
color: #1B7EFF;
|
||||
margin-left: 20px;
|
||||
|
||||
.enterprise-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
margin-left: 60px;
|
||||
.title-info {
|
||||
height: 50px;
|
||||
background-color: #f7f9fa;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #c7c7c8;
|
||||
|
||||
span {
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
.number-box {
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: #1b7eff;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin-left: 15px;
|
||||
color: #1b7eff;
|
||||
}
|
||||
|
||||
.active-user {
|
||||
color: #c8c9c9;
|
||||
}
|
||||
|
||||
.my-enterprise {
|
||||
font-size: 18px;
|
||||
color: #1b7eff;
|
||||
margin-left: 20px;
|
||||
|
||||
.enterprise-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
margin-left: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #c7c7c8;
|
||||
|
||||
span {
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-count {
|
||||
display: flex;
|
||||
padding-top: 30px;
|
||||
|
||||
li {
|
||||
width: 120px;
|
||||
.goods-count {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 30px;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
li {
|
||||
width: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
.item {
|
||||
color: #2282ff;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
color: #2282FF;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import TableComponent from '@/compontents/TableComponent/index.vue'
|
||||
import FormComponent from '@/compontents/FormComponent/index.vue'
|
||||
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const pageSize = 20
|
||||
const pageNumber = 1
|
||||
const total: any = 20
|
||||
// 获取数据列表
|
||||
const getList = () => {
|
||||
console.log('获取数据列表***')
|
||||
}
|
||||
|
||||
// 选择复选框时获取需要删除的数据源
|
||||
const getRowId = (val: any) => {
|
||||
console.log(val, '需要删除的数据源**')
|
||||
|
|
@ -149,6 +158,13 @@
|
|||
</template>
|
||||
</TableComponent>
|
||||
|
||||
<!-- 分页 -->
|
||||
<PagingComponent
|
||||
@getList="getList"
|
||||
:pageSize="pageSize"
|
||||
:pageNumber="pageNumber"
|
||||
:total="total" />
|
||||
|
||||
<!-- 装备入驻弹框 -->
|
||||
<el-dialog v-model="dialogFormVisibleSettlein" title="装备入驻" width="60%" align-center>
|
||||
<el-form label-width="160" ref="ruleFormRef" :model="ruleForm" :rules="rules">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,13 @@
|
|||
import TableComponent from '@/compontents/TableComponent/index.vue'
|
||||
import FormComponent from '@/compontents/FormComponent/index.vue'
|
||||
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
||||
const pageSize = 20
|
||||
const pageNumber = 1
|
||||
const total: any = 20
|
||||
// 获取数据列表
|
||||
const getList = () => {
|
||||
console.log('获取数据列表***')
|
||||
}
|
||||
|
||||
// 选择复选框时获取需要删除的数据源
|
||||
const getRowId = (val: any) => {
|
||||
|
|
@ -121,7 +128,11 @@
|
|||
</template>
|
||||
</TableComponent>
|
||||
|
||||
<PagingComponent />
|
||||
<PagingComponent
|
||||
@getList="getList"
|
||||
:pageSize="pageSize"
|
||||
:pageNumber="pageNumber"
|
||||
:total="total" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,55 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区',
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区',
|
||||
},
|
||||
]
|
||||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
||||
const pageSize = 20
|
||||
const pageNumber = 1
|
||||
const total: any = 20
|
||||
// 获取数据列表
|
||||
const getList = () => {
|
||||
console.log('获取数据列表***')
|
||||
}
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 机手管理 -->
|
||||
|
||||
<el-form :model="queryParams" :inline="true" label-width="auto" size="small">
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="tableData" style="width: 100%" :header-cell-style="{
|
||||
background: '#3E98FF', color: '#fff'
|
||||
}">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#3E98FF',
|
||||
color: '#fff'
|
||||
}">
|
||||
<el-table-column align="center" prop="name" label="机手姓名" />
|
||||
<el-table-column align="center" prop="name" label="机手电话" />
|
||||
<el-table-column align="center" prop="date" label="年龄" />
|
||||
|
|
@ -52,10 +62,16 @@ const tableData = [
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<PagingComponent
|
||||
@getList="getList"
|
||||
:pageSize="pageSize"
|
||||
:pageNumber="pageNumber"
|
||||
:total="total" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-form {
|
||||
margin: 15px 0;
|
||||
}
|
||||
</style>
|
||||
.el-form {
|
||||
margin: 15px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,37 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
||||
const pageSize = 20
|
||||
const pageNumber = 1
|
||||
const total: any = 20
|
||||
// 获取数据列表
|
||||
const getList = () => {
|
||||
console.log('获取数据列表***')
|
||||
}
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区',
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区',
|
||||
},
|
||||
]
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -46,17 +54,19 @@ const tableData = [
|
|||
<el-input />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button type="primary">查询</el-button>
|
||||
<el-button type="success">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="tableData" style="width: 100%" :header-cell-style="{
|
||||
background: '#3E98FF', color: '#fff'
|
||||
}">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#3E98FF',
|
||||
color: '#fff'
|
||||
}">
|
||||
<el-table-column align="center" prop="name" label="订单编号" />
|
||||
<el-table-column align="center" prop="name" label="供应商" />
|
||||
<el-table-column align="center" prop="date" label="订单创建日期" />
|
||||
|
|
@ -65,16 +75,22 @@ const tableData = [
|
|||
<el-table-column align="center" prop="name" label="订单状态" />
|
||||
<el-table-column align="center" prop="name" label="操作" width="260px">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary">确认</el-button>
|
||||
<el-button size="small" type="primary">退租</el-button>
|
||||
<el-button size="small" type="success">查看</el-button>
|
||||
<el-button size="small" type="danger">删除</el-button>
|
||||
<el-button size="small" type="danger">续租</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<PagingComponent
|
||||
@getList="getList"
|
||||
:pageSize="pageSize"
|
||||
:pageNumber="pageNumber"
|
||||
:total="total" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-form {
|
||||
margin: 15px 0;
|
||||
}
|
||||
</style>
|
||||
.el-form {
|
||||
margin: 15px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,37 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
||||
const pageSize = 20
|
||||
const pageNumber = 1
|
||||
const total: any = 20
|
||||
// 获取数据列表
|
||||
const getList = () => {
|
||||
console.log('获取数据列表***')
|
||||
}
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区',
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区',
|
||||
},
|
||||
]
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '123xxx',
|
||||
address: '合肥市蜀山区'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -52,9 +60,13 @@ const tableData = [
|
|||
</el-form>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="tableData" style="width: 100%" :header-cell-style="{
|
||||
background: '#3E98FF', color: '#fff'
|
||||
}">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#3E98FF',
|
||||
color: '#fff'
|
||||
}">
|
||||
<el-table-column align="center" prop="name" label="订单编号" />
|
||||
<el-table-column align="center" prop="address" label="客户单位" />
|
||||
<el-table-column align="center" prop="date" label="订单创建日期" />
|
||||
|
|
@ -70,10 +82,15 @@ const tableData = [
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<PagingComponent
|
||||
@getList="getList"
|
||||
:pageSize="pageSize"
|
||||
:pageNumber="pageNumber"
|
||||
:total="total" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-form {
|
||||
margin: 15px 0;
|
||||
}
|
||||
</style>
|
||||
.el-form {
|
||||
margin: 15px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,45 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
import { ref } from 'vue'
|
||||
const queryParams = ref({})
|
||||
import PagingComponent from '../../../compontents/PagingComponent/index.vue'
|
||||
const pageSize = 20
|
||||
const pageNumber = 1
|
||||
const total: any = 20
|
||||
// 获取数据列表
|
||||
const getList = () => {
|
||||
console.log('获取数据列表***')
|
||||
}
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '是'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '是'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '123xxx',
|
||||
address: '否'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '123xxx',
|
||||
address: '否'
|
||||
}
|
||||
]
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '是',
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '123xxx',
|
||||
address: '是',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '123xxx',
|
||||
address: '否',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '123xxx',
|
||||
address: '否',
|
||||
},
|
||||
]
|
||||
// 新增框的显示隐藏
|
||||
const addSubAccountdialogVisible = ref(false)
|
||||
|
||||
// 新增按钮
|
||||
const addSubAccount = () => {
|
||||
console.log('新增')
|
||||
addSubAccountdialogVisible.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -31,14 +47,18 @@ const tableData = [
|
|||
|
||||
<el-form :model="queryParams" :inline="true" label-width="auto" size="small">
|
||||
<el-form-item>
|
||||
<el-button type="primary">新增</el-button>
|
||||
<el-button type="primary" @click="addSubAccount">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="tableData" style="width: 100%" :header-cell-style="{
|
||||
background: '#3E98FF', color: '#fff'
|
||||
}">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#3E98FF',
|
||||
color: '#fff'
|
||||
}">
|
||||
<el-table-column align="center" prop="name" label="手机号" />
|
||||
<el-table-column align="center" prop="name" label="用户名" />
|
||||
<el-table-column align="center" prop="date" label="创建时间" />
|
||||
|
|
@ -49,10 +69,33 @@ const tableData = [
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<PagingComponent
|
||||
@getList="getList"
|
||||
:pageSize="pageSize"
|
||||
:pageNumber="pageNumber"
|
||||
:total="total" />
|
||||
|
||||
<!-- 新增子账号弹框 -->
|
||||
<el-dialog v-model="addSubAccountdialogVisible" title="新增子账号" width="30%">
|
||||
<el-form>
|
||||
<el-form-item label="手机号">
|
||||
<el-input autocomplete="off" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="addSubAccountdialogVisible = false">确 定</el-button>
|
||||
<el-button type="primary" @click="addSubAccountdialogVisible = false">
|
||||
取 消
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-form {
|
||||
margin: 15px 0;
|
||||
}
|
||||
</style>
|
||||
.el-form {
|
||||
margin: 15px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue