新增维保服务
This commit is contained in:
龙运模
parent
6dc4e24eca
commit
0b9b5e2aef
23
public/img/CustomerService.svg
Normal file
23
public/img/CustomerService.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.2 MiB |
@ -153,4 +153,10 @@ export { default as HomeAdd } from './home/Add.vue'
|
||||
export { default as EarlyWarnBj } from './home/earlyWarnBj.vue'
|
||||
export { default as HomeInventory } from './home/inventory.vue'
|
||||
|
||||
// 服务
|
||||
export { default as TechnicalSupport } from './serve/TechnicalSupport.vue'
|
||||
export { default as Problem } from './serve/Problem.vue'
|
||||
export { default as SeekAdviceFrom } from './serve/SeekAdviceFrom.vue'
|
||||
export { default as OtherServe } from './serve/Other.vue'
|
||||
export { default as ArrowRightServe } from './serve/ArrowRight.vue'
|
||||
|
||||
|
||||
13
src/assets/icons/serve/ArrowRight.vue
Normal file
13
src/assets/icons/serve/ArrowRight.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<svg t="1730985458638" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6896" width="200" height="200"><path d="M1010.809905 455.509333a29.744762 29.744762 0 0 1 0 42.032762L758.662095 749.763048a29.696 29.696 0 0 1-42.032762-42.032762l252.14781-252.220953a29.720381 29.720381 0 0 1 42.032762 0zM758.662095 203.288381l252.123429 252.220952a29.720381 29.720381 0 0 1-42.008381 42.032762L716.653714 245.345524a29.744762 29.744762 0 0 1 42.008381-42.057143zM27.940571 447.195429h955.684572a20.48 20.48 0 0 1 20.48 20.455619v18.236952a20.431238 20.431238 0 0 1-20.48 20.48H27.940571a20.48 20.48 0 0 1-20.48-20.48v-18.236952a20.48 20.48 0 0 1 20.48-20.48z" p-id="6897"></path></svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ArrowRight"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
src/assets/icons/serve/Other.vue
Normal file
13
src/assets/icons/serve/Other.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<svg t="1730984974155" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6754" width="200" height="200"><path d="M413.257143 464.457143H179.2A87.881143 87.881143 0 0 1 91.428571 376.685714V142.628571C91.428571 94.244571 130.816 54.857143 179.2 54.857143h234.057143c48.384 0 87.771429 39.387429 87.771428 87.771428v234.057143c0 48.384-39.387429 87.771429-87.771428 87.771429zM179.2 113.371429a29.257143 29.257143 0 0 0-29.257143 29.257142v234.057143a29.257143 29.257143 0 0 0 29.257143 29.257143h234.057143a29.257143 29.257143 0 0 0 29.257143-29.257143V142.628571a29.257143 29.257143 0 0 0-29.257143-29.257142H179.2zM413.257143 932.571429H179.2A87.881143 87.881143 0 0 1 91.428571 844.8V610.742857c0-48.384 39.387429-87.771429 87.771429-87.771428h234.057143c48.384 0 87.771429 39.387429 87.771428 87.771428v234.057143c0 48.384-39.387429 87.771429-87.771428 87.771429zM179.2 581.485714c-16.146286 0-29.257143 13.165714-29.257143 29.257143v234.057143c0 16.091429 13.110857 29.257143 29.257143 29.257143h234.057143c16.146286 0 29.257143-13.165714 29.257143-29.257143V610.742857c0-16.091429-13.110857-29.257143-29.257143-29.257143H179.2zM881.371429 932.571429H647.314286a87.881143 87.881143 0 0 1-87.771429-87.771429V610.742857c0-48.384 39.387429-87.771429 87.771429-87.771428h234.057143c48.384 0 87.771429 39.387429 87.771428 87.771428v234.057143c0 48.384-39.387429 87.771429-87.771428 87.771429zM647.314286 581.485714c-16.091429 0-29.257143 13.165714-29.257143 29.257143v234.057143c0 16.091429 13.165714 29.257143 29.257143 29.257143h234.057143c16.091429 0 29.257143-13.165714 29.257142-29.257143V610.742857c0-16.091429-13.165714-29.257143-29.257142-29.257143H647.314286z m234.057143-117.028571H647.314286a87.881143 87.881143 0 0 1-87.771429-87.771429V142.628571c0-48.384 39.387429-87.771429 87.771429-87.771428h234.057143C929.755429 54.857143 969.142857 94.244571 969.142857 142.628571v234.057143c0 48.384-39.387429 87.771429-87.771428 87.771429zM647.314286 113.371429c-16.091429 0-29.257143 13.110857-29.257143 29.257142v234.057143c0 16.146286 13.165714 29.257143 29.257143 29.257143h234.057143c16.091429 0 29.257143-13.110857 29.257142-29.257143V142.628571c0-16.146286-13.165714-29.257143-29.257142-29.257142H647.314286z" p-id="6755"></path></svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Other"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
src/assets/icons/serve/Problem.vue
Normal file
13
src/assets/icons/serve/Problem.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<svg t="1730984960897" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6612" width="200" height="200"><path d="M512 950.857143c242.377143 0 438.857143-196.48 438.857143-438.857143S754.377143 73.142857 512 73.142857 73.142857 269.622857 73.142857 512s196.48 438.857143 438.857143 438.857143z m0-62.701714c-207.744 0-376.173714-168.411429-376.173714-376.155429S304.237714 135.826286 512 135.826286c207.744 0 376.155429 168.411429 376.155429 376.173714 0 207.744-168.411429 376.155429-376.155429 376.155429z m6.765714-641.718858c-54.162286 0-96.292571 16.548571-126.390857 49.645715-30.08 31.597714-44.379429 73.728-44.379428 126.390857h59.428571c0-36.864 8.283429-65.462857 24.832-86.509714 18.048-24.832 45.897143-36.882286 83.510857-36.882286 31.579429 0 56.429714 8.283429 73.728 26.331428 16.548571 16.566857 25.563429 39.881143 25.563429 69.979429 0 21.065143-7.497143 40.630857-22.564572 59.428571-4.498286 6.034286-13.531429 15.049143-25.581714 27.081143-40.612571 36.114286-65.444571 64.713143-75.977143 87.277715-9.033143 18.816-13.531429 40.630857-13.531428 65.462857v17.298285h60.16v-17.316571c0-20.297143 4.534857-38.363429 14.317714-54.912 7.515429-13.531429 18.797714-27.099429 35.346286-41.380571 33.097143-29.348571 53.430857-48.896 60.946285-57.929143 18.797714-24.832 28.580571-54.162286 28.580572-88.027429 0-45.129143-14.281143-80.493714-42.130286-106.057143-29.348571-27.099429-67.712-39.881143-115.858286-39.881143z m-11.282285 458.166858c-12.8 0-23.314286 3.748571-32.347429 12.8-9.033143 8.246857-12.8 18.797714-12.8 31.579428 0 12.8 3.766857 23.332571 12.8 32.365714 9.033143 8.265143 19.565714 12.781714 32.365714 12.781715 12.781714 0 23.296-4.534857 32.329143-12.8 9.033143-8.283429 13.531429-18.816 13.531429-32.347429 0-12.8-4.498286-23.332571-12.781715-31.597714-9.014857-9.033143-20.297143-12.8-33.097142-12.8z" p-id="6613"></path></svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Problem"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
src/assets/icons/serve/SeekAdviceFrom.vue
Normal file
13
src/assets/icons/serve/SeekAdviceFrom.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<svg t="1730984949612" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6470" width="200" height="200"><path d="M846.171429 791.954286c0 0.512 0.182857 0.914286 0.182857 1.462857 0 36.205714 18.651429 96.036571 30.518857 116.48h-0.073143a18.285714 18.285714 0 0 1-16.822857 25.508571c-1.462857 0-3.931429-0.292571-4.754286-0.292571-0.310857 0-0.365714 0-0.347428 0.054857-63.122286-10.276571-140.672-84.260571-154.532572-101.046857-14.171429 2.084571-23.753143 2.395429-35.620571 2.395428-5.046857 0-10.422857-0.054857-16.749715-0.054857-116.571429 0-209.499429-43.794286-266.331428-113.188571 2.084571-1.828571 95.177143-1.846857 81.828571-1.042286 49.170286 38.473143 106.788571 56.996571 184.502857 56.996572 0 0 32.182857 0 44.105143-1.755429l30.098286-4.626286s19.2 34.194286 75.026286 75.117715c-4.388571-18.56-7.350857-91.885714-7.350857-91.885715l28.470857-14.134857c66.852571-34.212571 95.597714-78.994286 95.597714-140.708571 0-50.395429-13.933714-85.101714-62.811429-118.875429 6.4-19.437714 12.288-41.581714 14.134858-62.208 75.611429 44.379429 105.910857 103.515429 105.910857 181.083429 0 83.346286-39.588571 147.053714-124.982857 190.72z m-411.136-128.914286c-7.350857 0-13.586286 0.091429-19.382858 0.091429-13.769143 0-24.813714-0.402286-41.234285-2.816-15.981714 19.474286-123.794286 101.668571-196.827429 113.590857 0.018286-0.091429-0.091429-0.091429-0.365714-0.091429-1.005714 0-3.84 0.365714-5.558857 0.365714a21.101714 21.101714 0 0 1-19.456-29.513142h-0.054857c13.750857-23.68 48.64-81.188571 48.64-123.099429 0-0.64 0.182857-1.097143 0.182857-1.664C102.180571 569.380571 54.857143 466.541714 54.857143 370.084571 54.857143 215.222857 222.244571 91.428571 428.781714 91.428571c206.500571 0 370.340571 123.794286 370.340572 278.674286 2.450286 174.994286-157.586286 292.937143-364.086857 292.937143z m-6.290286-510.573714c-171.337143 0-310.729143 96.475429-310.729143 217.252571 0 72.521143 34.998857 155.337143 112.768 195.108572l30.610286 15.652571-2.651429 34.358857s0.841143 17.133714-18.139428 71.259429c31.195429-19.620571 67.419429-49.865143 75.757714-59.501715l35.949714-29.860571 31.323429 2.194286c26.861714 3.968 52.992 2.962286 52.992 2.962285 171.337143 0 298.788571-98.285714 299.318857-232.173714 0-120.777143-135.862857-217.252571-307.2-217.252571z" p-id="6471"></path></svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SeekAdviceFrom"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
src/assets/icons/serve/TechnicalSupport.vue
Normal file
13
src/assets/icons/serve/TechnicalSupport.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<svg t="1730984877624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6184" width="200" height="200"><path d="M323.437714 512l81.590857 99.474286c5.101714 6.217143 7.277714 14.006857 6.070858 21.686857-1.188571 7.68-5.668571 14.628571-12.470858 19.273143a34.285714 34.285714 0 0 1-23.716571 5.558857 32.658286 32.658286 0 0 1-21.083429-11.410286l-96-117.028571a27.648 27.648 0 0 1-6.4-17.554286c0-6.326857 2.249143-12.489143 6.4-17.554286l96-117.028571c2.523429-3.072 5.668571-5.668571 9.289143-7.625143a34.907429 34.907429 0 0 1 24.246857-3.163429c4.077714 0.950857 7.899429 2.633143 11.264 4.937143 3.364571 2.304 6.198857 5.193143 8.338286 8.502857 2.139429 3.291429 3.547429 6.948571 4.132572 10.770286 0.603429 3.803429 0.365714 7.68-0.676572 11.392a28.251429 28.251429 0 0 1-5.394286 10.294857L323.437714 512zM705.828571 611.474286c-5.101714 6.217143-7.277714 14.006857-6.070857 21.686857 1.188571 7.68 5.668571 14.628571 12.470857 19.273143 6.784 4.662857 15.323429 6.656 23.716572 5.558857 8.411429-1.097143 15.981714-5.211429 21.083428-11.410286l96-117.028571c4.150857-5.065143 6.4-11.227429 6.4-17.554286s-2.249143-12.489143-6.4-17.554286l-96-117.028571a31.232 31.232 0 0 0-9.289142-7.625143 34.907429 34.907429 0 0 0-24.246858-3.163429 33.353143 33.353143 0 0 0-11.264 4.937143 30.354286 30.354286 0 0 0-8.338285 8.502857c-2.139429 3.291429-3.547429 6.948571-4.132572 10.770286-0.603429 3.803429-0.365714 7.68 0.676572 11.392 1.042286 3.730286 2.870857 7.222857 5.394285 10.294857L787.419429 512 705.828571 611.474286z m-151.168 23.899428c-1.974857 7.460571-7.058286 13.897143-14.171428 17.956572a34.56 34.56 0 0 1-23.881143 3.730285 32.146286 32.146286 0 0 1-19.894857-12.617142 27.209143 27.209143 0 0 1-4.516572-21.76l64-263.314286c1.974857-7.460571 7.058286-13.897143 14.171429-17.956572a34.56 34.56 0 0 1 23.881143-3.730285c8.192 1.645714 15.323429 6.198857 19.894857 12.617143 4.571429 6.436571 6.180571 14.262857 4.516571 21.76l-64 263.314285z" p-id="6185"></path><path d="M869.997714 720.365714c6.4-5.083429 14.756571-7.643429 23.222857-7.094857 8.466286 0.548571 16.347429 4.132571 21.924572 10.002286 5.558857 5.851429 8.356571 13.494857 7.771428 21.229714a28.452571 28.452571 0 0 1-10.953142 20.041143l-220.470858 179.145143A33.810286 33.810286 0 0 1 670.537143 950.857143H190.464C135.588571 950.857143 91.428571 909.366857 91.428571 858.587429V165.412571C91.428571 114.651429 135.588571 73.142857 190.464 73.142857h633.929143C879.268571 73.142857 923.428571 114.633143 923.428571 165.412571v123.428572c0 7.753143-3.364571 15.177143-9.380571 20.662857-5.997714 5.485714-14.134857 8.594286-22.619429 8.594286-8.484571 0-16.64-3.108571-22.619428-8.594286a28.050286 28.050286 0 0 1-9.380572-20.662857v-123.428572c0-18.834286-15.908571-33.755429-35.035428-33.755428H190.464C171.337143 131.657143 155.428571 146.578286 155.428571 165.412571v693.174858c0 18.834286 15.908571 33.755429 35.035429 33.755428h468.114286l211.437714-171.977143h-0.036571z" p-id="6186"></path><path d="M923.428571 741.668571c0 7.753143-3.364571 15.195429-9.380571 20.681143-5.997714 5.485714-14.134857 8.576-22.619429 8.576-8.484571 0-16.64-3.090286-22.619428-8.576A28.050286 28.050286 0 0 1 859.428571 741.668571V658.285714c0-7.753143 3.364571-15.195429 9.380572-20.681143 5.997714-5.485714 14.134857-8.576 22.619428-8.576 8.484571 0 16.64 3.090286 22.619429 8.576 6.016 5.485714 9.380571 12.928 9.380571 20.681143v83.382857z" p-id="6187"></path></svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TechnicalSupport"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
{{show}}
|
||||
<div class="customerPopover">
|
||||
<div class="btnBox">
|
||||
<slot></slot>
|
||||
|
||||
@ -9,7 +9,7 @@ export default {
|
||||
forgetPassword: 'Forget password',
|
||||
signIn: 'Sign in',
|
||||
signInOther: 'Sign in with',
|
||||
userPlaceholder: 'user / phone / email',
|
||||
userPlaceholder: 'phone / email',
|
||||
userError: 'Please input a user name',
|
||||
PWPlaceholder: 'Please input a password',
|
||||
PWError: 'Please input a password',
|
||||
|
||||
@ -9,7 +9,7 @@ export default {
|
||||
forgetPassword: '忘记密码',
|
||||
signIn: '登录',
|
||||
signInOther: '其他登录方式',
|
||||
userPlaceholder: '用户名 / 手机 / 邮箱',
|
||||
userPlaceholder: '手机 / 邮箱',
|
||||
userError: '请输入用户名',
|
||||
PWPlaceholder: '请输入密码',
|
||||
PWError: '请输入密码',
|
||||
|
||||
@ -50,6 +50,20 @@ const routes = [
|
||||
meta: {
|
||||
title: "重置密码"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/serve",
|
||||
component: () => import(/* webpackChunkName: "serveView" */ '@/views/serveView'),
|
||||
meta: {
|
||||
title: "信息服务"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/maintenance",
|
||||
component: () => import(/* webpackChunkName: "serveView" */ '@/views/maintenance'),
|
||||
meta: {
|
||||
title: "维保服务"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
.pageHeader{box-shadow: 0 1px 10px rgba(0,0,0,0.14);margin-bottom: 10px;}
|
||||
.common-header-left {display: flex;align-items: center;}
|
||||
.common-header-logo {display: flex;align-items: center;}
|
||||
.common-header-logo img {margin-right: 10px;vertical-align: bottom;}
|
||||
.common-header-logo img {margin-right: 10px;vertical-align: bottom;width: 180px;}
|
||||
.common-header-logo label {font-size: 20px;}
|
||||
.common-header-title {font-size: 16px;border-left: 1px solid var(--el-border-color-light);margin-left: 15px;padding-left: 15px;}
|
||||
.common-header-right {display: flex;align-items: center;}
|
||||
|
||||
@ -52,6 +52,14 @@ export default {
|
||||
}
|
||||
this.$store.commit("SET_LOGIN_NAME", user.data.user.name);
|
||||
|
||||
if(user.data.user.company_id === 0){
|
||||
this.$router.replace({
|
||||
path: '/maintenance'
|
||||
})
|
||||
this.islogin = false
|
||||
return
|
||||
}
|
||||
|
||||
//获取菜单
|
||||
let menu = null;
|
||||
menu = await this.$API.system.menu.myMenus.get()
|
||||
|
||||
@ -74,6 +74,13 @@
|
||||
this.islogin = false
|
||||
return false
|
||||
}
|
||||
if(user.data.user.company_id === 0){
|
||||
this.$router.replace({
|
||||
path: '/maintenance'
|
||||
})
|
||||
this.islogin = false
|
||||
return
|
||||
}
|
||||
//获取菜单
|
||||
const menu = await this.$API.system.menu.myMenus.get();
|
||||
if (menu.code == 200) {
|
||||
|
||||
@ -81,6 +81,15 @@
|
||||
this.islogin = false
|
||||
return false
|
||||
}
|
||||
|
||||
if(user.data.user.company_id === 0){
|
||||
this.$router.replace({
|
||||
path: '/maintenance'
|
||||
})
|
||||
this.islogin = false
|
||||
return
|
||||
}
|
||||
|
||||
//获取菜单
|
||||
const menu = await this.$API.system.menu.myMenus.get();
|
||||
if (menu.code == 200) {
|
||||
|
||||
@ -185,6 +185,14 @@
|
||||
}
|
||||
this.$store.commit("SET_LOGIN_NAME", user.data.user.name);
|
||||
|
||||
if(user.data.user.company_id === 0){
|
||||
this.$router.replace({
|
||||
path: '/maintenance'
|
||||
})
|
||||
this.islogin = false
|
||||
return
|
||||
}
|
||||
|
||||
//获取菜单
|
||||
let menu = null;
|
||||
menu = await this.$API.system.menu.myMenus.get()
|
||||
@ -301,7 +309,7 @@
|
||||
}
|
||||
}
|
||||
.logo{
|
||||
height: 30px;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -30,6 +30,9 @@
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="form.password" type="password" show-password placeholder="请输入密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="verify_code">
|
||||
<el-row justify="space-between" style="width: 100%">
|
||||
<el-col :span="16">
|
||||
@ -76,6 +79,7 @@
|
||||
form: {
|
||||
email: "",
|
||||
mobile:"",
|
||||
password:"",
|
||||
verify_code:"",
|
||||
company_name:"",
|
||||
customer: "",
|
||||
|
||||
194
src/views/maintenance/index.vue
Normal file
194
src/views/maintenance/index.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="mainServeBody">
|
||||
<commonPage title="个人中心"></commonPage>
|
||||
<el-main class="serveMain">
|
||||
<el-scrollbar class="mainScroll">
|
||||
<div class="pageBody">
|
||||
<div class="rowView">
|
||||
<div class="rowList">
|
||||
<div class="colItem" v-for="(item,index) in list" :key="index">
|
||||
<el-icon size="60" v-if="item.icon"><component :is="item.icon"/></el-icon>
|
||||
<div class="name">
|
||||
{{item.name}}
|
||||
<el-icon size="30"><sc-icon-ArrowRightServe/></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommend">
|
||||
<div class="title">智能推荐</div>
|
||||
<div class="mainView">
|
||||
<div class="viewItem" v-for="(item,index) in recommendList" :key="index" :style="{'background':item.color,'left':item.left,'top':item.top,'zIndex':index+1}">{{item.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="history">
|
||||
<div class="title">搜索历史</div>
|
||||
<div class="mainView">
|
||||
<div class="viewItem" v-for="(item,index) in historyList" :key="index">{{item.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footerPage></footerPage>
|
||||
</el-scrollbar>
|
||||
|
||||
<!--客服-->
|
||||
<div class="customerBox">
|
||||
<el-image class="img" src="/img/CustomerService.svg"></el-image>
|
||||
</div>
|
||||
</el-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import commonPage from "@/views/serveView/components/commonPage";
|
||||
import footerPage from "@/views/serveView/components/footerPage";
|
||||
export default {
|
||||
name: "index",
|
||||
components:{
|
||||
commonPage,
|
||||
footerPage
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
list:[
|
||||
{name:"技术支持与服务",icon:"sc-icon-TechnicalSupport",url:''},
|
||||
{name:"常见问题",icon:"sc-icon-Problem",url:''},
|
||||
{name:"咨询与联系方式",icon:"sc-icon-SeekAdviceFrom",url:''},
|
||||
{name:"其他",icon:"sc-icon-OtherServe",url:''},
|
||||
],
|
||||
recommendList:[
|
||||
{name:'维保期限查询',color:'#436FFF',left:'2%',top:'2%'},
|
||||
{name:'主控部件查询',color:'#FF8543',left:'15%',top:'10%'},
|
||||
{name:'智能客服',color:'#22D3F6',left:'28%',top:'5%'},
|
||||
{name:'我的产品',color:'#0FCA44',left:'40%',top:'8%'},
|
||||
{name:'订单号查询',color:'#FBCA0A',left:'70%',top:'2%'},
|
||||
{name:'主控部件查询',color:'#FF8543',left:'57%',top:'12%'},
|
||||
{name:'我的产品',color:'#FF8543',left:'77%',top:'62%'},
|
||||
{name:'主控部件查询',color:'#FF8543',left:'57%',top:'12%'},
|
||||
{name:'问题单',color:'#FF4B51',left:'6%',top:'32%'},
|
||||
{name:'主控部件查询',color:'#FF8543',left:'17%',top:'47%'},
|
||||
{name:'我的产品',color:'#0FCA44',left:'32%',top:'42%'},
|
||||
{name:'问题单',color:'#FF4B51',left:'46%',top:'32%'},
|
||||
{name:'维保期限查询',color:'#436FFF',left:'72%',top:'32%'},
|
||||
{name:'订单号查询',color:'#FBCA0A',left:'52%',top:'58%'},
|
||||
],
|
||||
historyList:[
|
||||
{name:'搜索历史文案占位……'},
|
||||
{name:'搜索历史文案占位……'},
|
||||
{name:'搜索历史文案占位……'},
|
||||
{name:'维保工单'},
|
||||
{name:'维保工单'},
|
||||
{name:'维保工单'},
|
||||
{name:'维保工单'},
|
||||
{name:'维保工单'},
|
||||
{name:'维保工单'},
|
||||
{name:'维保工单'},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mainServeBody{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
.serveMain{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
.pageBody{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.rowView{
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
padding: 2%;
|
||||
}
|
||||
.rowList{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
border: 1px solid #aaa;
|
||||
.colItem{
|
||||
flex: 1;
|
||||
border-right: 1px solid #aaa;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.name{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.colItem:last-child{
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
.recommend{
|
||||
.title{
|
||||
padding:0 2%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22px;
|
||||
}
|
||||
.mainView{
|
||||
padding: 20px 2%;
|
||||
background: #F8F8F8;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
.viewItem{
|
||||
padding: 20px 60px;
|
||||
border-radius: 50px;
|
||||
color: #fff;
|
||||
margin: 20px;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
.history{
|
||||
.title{
|
||||
padding:0 2%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 22px;
|
||||
}
|
||||
.mainView{
|
||||
padding: 20px 2% 80px 2%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.viewItem{
|
||||
width: 33%;
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.customerBox{
|
||||
position: fixed;
|
||||
right: 40px;
|
||||
bottom: 80px;
|
||||
z-index: 10;
|
||||
.img{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
176
src/views/serveView/components/commonPage.vue
Normal file
176
src/views/serveView/components/commonPage.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<el-header class="pageHeader" style="height:55px;">
|
||||
<div class="common-header-left">
|
||||
<div class="common-header-logo">
|
||||
<img class="logo" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">
|
||||
</div>
|
||||
<div class="common-header-title">
|
||||
<div class="headerView">
|
||||
<div class="menuList">
|
||||
<div class="menu-item">
|
||||
<el-dropdown trigger="click" placement="bottom-start">
|
||||
<span class="el-dropdown-link">
|
||||
个人中心
|
||||
<el-icon class="el-icon--right">
|
||||
<el-icon-ArrowDown />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<div class="userView" style="width: 280px">
|
||||
<div class="headerView">
|
||||
<el-icon class="icon" size="18px"><sc-icon-User/></el-icon>
|
||||
<span class="name">龙隆</span>
|
||||
<span class="solid"></span>
|
||||
<span class="account">longlong</span>
|
||||
</div>
|
||||
<div class="itemBox">
|
||||
<div class="name">邮箱</div>
|
||||
<div class="text">1724894114@qq.com</div>
|
||||
</div>
|
||||
<div class="itemBox">
|
||||
<div class="name">手机号</div>
|
||||
<div class="text">18820802884</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item icon="sc-icon-AccountNumber" command="uc">帐号信息</el-dropdown-item>
|
||||
<el-dropdown-item icon="sc-icon-ClearCache" command="clearCache">清除缓存</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
<div class="loginOut">
|
||||
<el-button class="btn" style="width: 100%">退出登录</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
服务支持
|
||||
<el-icon class="el-icon--right">
|
||||
<el-icon-ArrowDown />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>维保期限查询</el-dropdown-item>
|
||||
<el-dropdown-item>主控部件查询</el-dropdown-item>
|
||||
<el-dropdown-item>订单号查询</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuIcon">
|
||||
<div class="panel-item">
|
||||
<el-icon><sc-icon-See /></el-icon>
|
||||
</div>
|
||||
<div class="panel-item">
|
||||
<el-icon><sc-icon-User /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: { type: String, default: "" }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.common-header-left{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.common-header-title{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.headerView{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.menuList{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.menu-item{
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.el-dropdown-link{
|
||||
height: 55px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menuIcon{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.panel-item{
|
||||
margin-left: 10px;
|
||||
padding: 0 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userView{
|
||||
background: #F5F7FA;
|
||||
padding:10px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
.headerView{
|
||||
padding: 0 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px;
|
||||
.icon{
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.name{
|
||||
font-size: 16px;font-weight: 500;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.solid{
|
||||
width: 2px;
|
||||
height: 18px;
|
||||
background: var(--el-color-danger);
|
||||
margin: 0 12px;
|
||||
}
|
||||
.account{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.itemBox{
|
||||
display: flex;align-items: center;
|
||||
padding: 6px 6px;
|
||||
font-size: 13px;
|
||||
.name{
|
||||
width: 65px;
|
||||
color: #888;
|
||||
}
|
||||
.text{
|
||||
flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.loginOut{
|
||||
border-top: 1px solid #EBEEF5;
|
||||
padding: 16px;
|
||||
.btn{
|
||||
font-weight: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/views/serveView/components/footerPage.vue
Normal file
66
src/views/serveView/components/footerPage.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="serveFooter">
|
||||
<div class="footerView">
|
||||
<div class="footer-left">
|
||||
<div class="common-header-logo">
|
||||
<img class="logo" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<div class="viewUl">
|
||||
<div class="line"><span>个人中心</span></div>
|
||||
<div class="line"><span>关于我们</span></div>
|
||||
</div>
|
||||
<div class="viewUl">
|
||||
<div class="line"><span>服务支持</span></div>
|
||||
<div class="line"><span>信息查询</span></div>
|
||||
<div class="line"><span>自助服务</span></div>
|
||||
<div class="line"><span>问题单</span></div>
|
||||
</div>
|
||||
<div class="viewUl">
|
||||
<div class="line"><span>Copyright @2024象纬云科有限公司</span></div>
|
||||
<div class="line"><span>版权所有苏ICP备18028199号</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "footerPage",
|
||||
data(){
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.serveFooter{
|
||||
background: #262626;
|
||||
padding: 20px;
|
||||
.footerView{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.footer-right{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 0 40px;
|
||||
.viewUl{
|
||||
margin: 0 50px;
|
||||
.line{
|
||||
padding:0 0 30px 0;
|
||||
color: var(--el-color-white);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
13
src/views/serveView/components/order.vue
Normal file
13
src/views/serveView/components/order.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>436</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "order"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
15
src/views/serveView/components/term.vue
Normal file
15
src/views/serveView/components/term.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-header class="">部件信息</el-header>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "term"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
src/views/serveView/components/widget.vue
Normal file
13
src/views/serveView/components/widget.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>et</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "widget"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
115
src/views/serveView/index.vue
Normal file
115
src/views/serveView/index.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="mainServeBody">
|
||||
<commonPage title="个人中心"></commonPage>
|
||||
<el-main class="serveMain">
|
||||
<el-scrollbar class="mainScroll">
|
||||
<div class="pageBody">
|
||||
<div class="pageLeft">
|
||||
<el-main>
|
||||
<el-aside width="210px">
|
||||
<el-menu class="menu mainMenu" :default-active="page">
|
||||
<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
|
||||
<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component" @click="openPage">
|
||||
<el-icon v-if="item.icon"><component :is="item.icon"/></el-icon>
|
||||
<template #title>
|
||||
<span>{{item.title}}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
</el-main>
|
||||
</div>
|
||||
<div class="pageRight">
|
||||
<component :is="page"/>
|
||||
</div>
|
||||
</div>
|
||||
<footerPage></footerPage>
|
||||
</el-scrollbar>
|
||||
</el-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import commonPage from "@/views/serveView/components/commonPage";
|
||||
import footerPage from "@/views/serveView/components/footerPage";
|
||||
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
export default {
|
||||
name: "index",
|
||||
components:{
|
||||
commonPage,
|
||||
footerPage,
|
||||
|
||||
term: defineAsyncComponent(() => import('./components/term')),
|
||||
widget: defineAsyncComponent(() => import('./components/widget')),
|
||||
order: defineAsyncComponent(() => import('./components/order')),
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
page: "term",
|
||||
menu: [
|
||||
{
|
||||
groupName: "服务支持",
|
||||
list: [
|
||||
{
|
||||
icon: "sc-icon-Account",
|
||||
title: "维保期限查询",
|
||||
component: "term"
|
||||
},
|
||||
{
|
||||
icon: "sc-icon-Password",
|
||||
title: "主控部件查询",
|
||||
component: "widget"
|
||||
},
|
||||
{
|
||||
icon: "sc-icon-Notice",
|
||||
title: "订单号查询",
|
||||
component: "order"
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
openPage(item){
|
||||
this.page = item.index
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mainScroll ::v-deep .el-scrollbar__view{
|
||||
height: calc(100% - 240px);
|
||||
}
|
||||
|
||||
.mainServeBody{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
.serveMain{
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
.pageBody{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.pageLeft{
|
||||
height: 100%;
|
||||
.el-aside{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.pageRight{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user