Commit c3b20249 authored by 徐一鸣's avatar 徐一鸣

服务详情页面静态修改

parent 9425a2d0
<template> <template>
<div class="service_step"> <div class="service_steps">
<ul class="step_items"> <ul class="steps_list">
<li class="step_item"> <template v-for="(step, index) in data">
<div class="step_icon"> <li class="step_item" :key="'step_' + index">
<span>1</span> <div class="step_icon">
</div> <span v-text="index + 1"></span>
<p class="step_title">服务申请</p> </div>
</li> <p class="step_title" v-text="step"></p>
<li class="step_line"></li> </li>
<li class="step_item"> <li
<div class="step_icon"> class="step_line"
<span>2</span> :key="'step_line_' + index"
</div> v-if="index + 1 < data.length"
<p class="step_title">审核确认</p> ></li>
</li> </template>
<li class="step_line"></li>
<li class="step_item">
<div class="step_icon">
<span>3</span>
</div>
<p class="step_title">费用支付</p>
</li>
<li class="step_line"></li>
<li class="step_item">
<div class="step_icon">
<span>4</span>
</div>
<p class="step_title">服务获取</p>
</li>
</ul> </ul>
</div> </div>
</template> </template>
<script>
export default {
props: {
data: {
type: Array,
default: ["服务申请", "信息填写", "审核确认", "服务获取"],
},
},
mounted() {
console.log(this.data);
},
};
</script>
<style scoped> <style scoped>
.service_step { .service_steps {
min-height: 68px; min-height: 68px;
padding: 30px 0; padding: 30px 0;
} }
.service_step > .step_items { .service_steps > .steps_list {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
text-align: center; text-align: center;
} }
.service_step .step_line { .service_steps .step_line {
width: 168px; width: 168px;
border: 1px solid #c0c8f8; border: 1px solid #c0c8f8;
margin: 33px 10px 0; margin: 33px 10px 0;
} }
.service_step .step_item > .step_icon { .service_steps .step_item > .step_icon {
width: 68px; width: 68px;
height: 68px; height: 68px;
background-color: #515fe7; background-color: #515fe7;
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
} }
.service_step .step_item > .step_title { .service_steps .step_item > .step_title {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
color: #242c43; color: #242c43;
......
<template> <template>
<div class="service_tab-comments"> <div class="service_tab-comments">
<comments-score :data="data.baseInfo"></comments-score> <comments-score :data="data.baseInfo"></comments-score>
<comments-list :data="data.ffpjxxList"></comments-list> <comments-list :data="data.list"></comments-list>
<comments-pagination <comments-pagination
:total="data.baseInfo.total" :total="data.baseInfo.total"
:page-sizes="pageSizes" :page-sizes="pageSizes"
......
...@@ -7,20 +7,12 @@ ...@@ -7,20 +7,12 @@
> >
<h3 class="detail-title" v-text="item.name + ':'"></h3> <h3 class="detail-title" v-text="item.name + ':'"></h3>
<service-step v-if="item.type == 'step'"></service-step> <service-steps v-if="item.type == 'step'" :data="item.value"></service-steps>
<p <p
v-else-if="item.type == 'text'" v-else-if="item.type == 'text'"
class="detail-text" class="detail-text"
v-text="item.value" v-text="item.value"
></p> ></p>
<ul v-else-if="item.type == 'list'">
<li v-for="(v, i) in item.value" :key="'detail-li_' + index + '_' + i">
<p class="detail-text">
<span v-text="v.name + ':'"></span>
<span v-text="v.value"></span>
</p>
</li>
</ul>
<el-table <el-table
v-else-if="item.type == 'table'" v-else-if="item.type == 'table'"
class="detail-table" class="detail-table"
...@@ -38,16 +30,32 @@ ...@@ -38,16 +30,32 @@
:align="v.align || 'left'" :align="v.align || 'left'"
></el-table-column> ></el-table-column>
</el-table> </el-table>
<el-table
v-else-if="item.type == 'list'"
class="detail-table detail-list"
:border="false"
:data="item.value"
>
<el-table-column
prop="name"
label="name"
width="120"
></el-table-column>
<el-table-column
prop="value"
label="value"
></el-table-column>
</el-table>
</li> </li>
</ul> </ul>
</template> </template>
<script> <script>
import serviceStep from "@/components/service-step"; import serviceSteps from "@/components/service-steps";
export default { export default {
components: { components: {
serviceStep, serviceSteps,
}, },
props: { props: {
data: { data: {
...@@ -76,7 +84,4 @@ export default { ...@@ -76,7 +84,4 @@ export default {
line-height: 25px; line-height: 25px;
color: #242c43; color: #242c43;
} }
.detail-item .detail-table {
width: 100%;
}
</style> </style>
...@@ -5,32 +5,28 @@ ...@@ -5,32 +5,28 @@
v-model="serviceTabsActiveName" v-model="serviceTabsActiveName"
:stretch="true" :stretch="true"
> >
<el-tab-pane label="服务详情信息" name="first"> <el-tab-pane label="服务详情信息" name="first" v-if="detail">
<service-tab-detail <service-tab-detail
v-if="fwxqxx"
class="service_info" class="service_info"
:data="fwxqxx" :data="detail"
></service-tab-detail> ></service-tab-detail>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="规格定价" name="second"> <el-tab-pane label="规格定价" name="second" v-if="specification">
<service-tab-specification <service-tab-specification
v-if="ggdj"
class="service_info" class="service_info"
:data="ggdj" :data="specification"
></service-tab-specification> ></service-tab-specification>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="提供机构" name="third"> <el-tab-pane label="提供机构" name="third" v-if="provider">
<service-tab-provider <service-tab-provider
v-if="tgjg"
class="service_info" class="service_info"
:data="tgjg" :data="provider"
></service-tab-provider> ></service-tab-provider>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="服务评价信息" name="fourth"> <el-tab-pane label="服务评价信息" name="fourth" v-if="comments">
<service-tab-comments <service-tab-comments
v-if="ffpjxx"
class="service_info" class="service_info"
:data="ffpjxx" :data="comments"
></service-tab-comments> ></service-tab-comments>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -57,10 +53,10 @@ export default { ...@@ -57,10 +53,10 @@ export default {
}, },
data: () => ({ data: () => ({
serviceTabsActiveName: "first", serviceTabsActiveName: "first",
fwxqxx: null, // 服务详情信息 detail: null, // 服务详情信息
ggdj: null, // 规格定价 specification: null, // 规格定价
tgjg: null, // 提供机构 provider: null, // 提供机构
ffpjxx: null, // 服务评价信息 comments: null, // 服务评价信息
}), }),
methods: { methods: {
getDataFromApi(_url) { getDataFromApi(_url) {
...@@ -80,10 +76,10 @@ export default { ...@@ -80,10 +76,10 @@ export default {
(data) => { (data) => {
let _data = data[this.type]; let _data = data[this.type];
this.fwxqxx = _data.fwxqxx; this.detail = _data.detail;
this.ggdj = _data.ggdj; this.specification = _data.specification;
this.tgjg = _data.tgjg; this.provider = _data.provider;
this.ffpjxx = _data.ffpjxx; this.comments = _data.comments;
}, },
(error) => { (error) => {
console.log(error); console.log(error);
...@@ -149,7 +145,26 @@ export default { ...@@ -149,7 +145,26 @@ export default {
.service_info_tab .el-table::before { .service_info_tab .el-table::before {
display: none; display: none;
} }
.service_info_tab .el-table {
width: 100%;
}
.service_info_tab .el-table__row:nth-child(odd) td { .service_info_tab .el-table__row:nth-child(odd) td {
background-color: #f8f9fd; background-color: #f8f9fd;
} }
.service_info_tab .detail-list .el-table__header-wrapper {
display: none;
}
.service_info_tab .detail-list .el-table__row td {
color: #58617a;
}
.service_info_tab .detail-list .el-table__row td:first-child {
font-weight: bold;
color: #1a2236;
}
.service_info_tab .detail-list .el-table__row:nth-child(even) td {
background-color: #f8f9fd;
}
.service_info_tab .detail-list .el-table__row:nth-child(odd) td {
background-color: #fff;
}
</style> </style>
...@@ -8,22 +8,20 @@ ...@@ -8,22 +8,20 @@
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<!-- <servive-commodity-info <service-info :service-data="serviceData"></service-info>
:service-data="serviceData"
></servive-commodity-info>
<servive-tabs-info type="sjfw"></servive-tabs-info> --> <service-tabs type="skfw"></service-tabs>
</div> </div>
</template> </template>
<script> <script>
// import serviveCommodityInfo from "@/components/servive-commodity-info"; import serviceInfo from "@/components/service-info";
// import serviveTabsInfo from "@/components/servive-tabs-info"; import serviceTabs from "@/components/service-tabs";
export default { export default {
components: { components: {
// serviveCommodityInfo, serviceInfo,
// serviveTabsInfo, serviceTabs,
}, },
data: () => ({ data: () => ({
serviceData: null, serviceData: null,
......
...@@ -8,22 +8,20 @@ ...@@ -8,22 +8,20 @@
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<!-- <servive-commodity-info <service-info :service-data="serviceData"></service-info>
:service-data="serviceData"
></servive-commodity-info>
<servive-tabs-info type="sjfw"></servive-tabs-info> --> <service-tabs type="zhyyfw"></service-tabs>
</div> </div>
</template> </template>
<script> <script>
// import serviveCommodityInfo from "@/components/servive-commodity-info"; import serviceInfo from "@/components/service-info";
// import serviveTabsInfo from "@/components/servive-tabs-info"; import serviceTabs from "@/components/service-tabs";
export default { export default {
components: { components: {
// serviveCommodityInfo, serviceInfo,
// serviveTabsInfo, serviceTabs,
}, },
data: () => ({ data: () => ({
serviceData: null, serviceData: null,
......
{ {
"sjfw": { "sjfw": {
"fwxqxx": [ "detail": [
{ {
"name": "获取流程", "name": "获取流程",
"type": "step" "type": "step",
"value": ["服务申请", "信息填写", "审核确认", "服务获取"]
}, },
{ {
"name": "服务描述", "name": "服务描述",
...@@ -188,7 +189,7 @@ ...@@ -188,7 +189,7 @@
} }
} }
], ],
"ggdj": [ "specification": [
{ {
"name": "按月", "name": "按月",
"data": [ "data": [
...@@ -224,13 +225,13 @@ ...@@ -224,13 +225,13 @@
] ]
} }
], ],
"tgjg": { "provider": {
"provider": "贵州省交通运输厅", "provider": "贵州省交通运输厅",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"person": "张先生", "person": "张先生",
"phone": "010-66666666" "phone": "010-66666666"
}, },
"ffpjxx": { "comments": {
"baseInfo": { "baseInfo": {
"score": 3.5, "score": 3.5,
"total": 23, "total": 23,
...@@ -257,7 +258,7 @@ ...@@ -257,7 +258,7 @@
} }
] ]
}, },
"ffpjxxList": [ "list": [
{ {
"name": "禺彊", "name": "禺彊",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
...@@ -331,10 +332,388 @@ ...@@ -331,10 +332,388 @@
] ]
} }
}, },
"fwxqxx": [ "skfw": {
"detail": [
{
"name": "获取流程",
"type": "step",
"value": ["服务申请", "信息填写", "审核确认", "服务获取"]
},
{
"name": "服务描述",
"type": "text",
"value": "提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务"
},
{
"name": "服务属性",
"type": "list",
"value": [
{
"name": "大小",
"value": "66kb"
},
{
"name": "API",
"value": "Java"
},
{
"name": "用途",
"value": "即用型"
},
{
"name": "空间范围",
"value": "111.8915040799999, 114.25605481900004, 28.762848204000022"
},
{
"name": "标签",
"value": "T003 智能地图 T001"
},
{
"name": "制作单位",
"value": "贵州省应急管理应急管理厅"
},
{
"name": "离线模式",
"value": "禁用"
}
]
}
],
"specification": [
{
"name": "按月",
"data": [
{
"gg": "访问次数:20/日 访问量:100/日",
"ggsm": "用户服务申请通过审核确认后,每日可对水路货物周转量情况进行20次免费访问,获取100条数据记录。"
},
{
"gg": "访访问次数:200/日 访问量:1000/日",
"ggsm": "用户服务申请通过审核确认并完成付费后,每日可对水路货物周转量情况进行200次访问,获取1000条数据记录。"
},
{
"gg": "访问次数:无上限 访问量",
"ggsm": ""
}
]
},
{
"name": "按年",
"data": [
{
"gg": "访问次数:20/年 访问量:100/年",
"ggsm": "用户服务申请通过审核确认后,每年可对水路货物周转量情况进行20次免费访问,获取100条数据记录。"
},
{
"gg": "访访问次数:200/年 访问量:1000/年",
"ggsm": "用户服务申请通过审核确认并完成付费后,每年可对水路货物周转量情况进行200次访问,获取1000条数据记录。"
},
{
"gg": "访问次数:无上限 访问量",
"ggsm": ""
}
]
}
],
"provider": {
"provider": "贵州省交通运输厅",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"person": "张先生",
"phone": "010-66666666"
},
"comments": {
"baseInfo": {
"score": 3.5,
"total": 23,
"starInfo": [
{
"star": 5,
"percent": 40
},
{
"star": 4,
"percent": 30
},
{
"star": 3,
"percent": 20
},
{
"star": 2,
"percent": 5
},
{
"star": 1,
"percent": 5
}
]
},
"list": [
{
"name": "禺彊",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 5,
"description": "这个应用非常实用,可以应用到多个业务领域!",
"time": " 2019-12-12"
},
{
"name": "海纳",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 5,
"description": "赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
}
]
}
},
"zhyyfw": {
"detail": [
{
"name": "获取流程",
"type": "step",
"value": ["服务申请", "信息填写", "审核确认", "服务获取"]
},
{
"name": "服务描述",
"type": "text",
"value": "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务"
},
{
"name": "微服务响应列表",
"type": "table",
"value": {
"datas": [
{
"name": "apaas-mapvideos",
"description": "地图视频融合应用服务"
},
{
"name": "apaas-mapvideos",
"description": "地图视频融合应用服务"
},
{
"name": "apaas-mapvideos",
"description": "地图视频融合应用服务"
}
],
"columns": [
{
"prop": "name",
"label": "微服务名称"
},
{
"prop": "description",
"label": "微服务描述",
"align": "center"
}
]
}
}
],
"specification": [
{
"name": "按月",
"data": [
{
"gg": "访问次数:20/日 访问量:100/日",
"ggsm": "用户服务申请通过审核确认后,每日可对水路货物周转量情况进行20次免费访问,获取100条数据记录。"
},
{
"gg": "访访问次数:200/日 访问量:1000/日",
"ggsm": "用户服务申请通过审核确认并完成付费后,每日可对水路货物周转量情况进行200次访问,获取1000条数据记录。"
},
{
"gg": "访问次数:无上限 访问量",
"ggsm": ""
}
]
},
{
"name": "按年",
"data": [
{
"gg": "访问次数:20/年 访问量:100/年",
"ggsm": "用户服务申请通过审核确认后,每年可对水路货物周转量情况进行20次免费访问,获取100条数据记录。"
},
{
"gg": "访访问次数:200/年 访问量:1000/年",
"ggsm": "用户服务申请通过审核确认并完成付费后,每年可对水路货物周转量情况进行200次访问,获取1000条数据记录。"
},
{
"gg": "访问次数:无上限 访问量",
"ggsm": ""
}
]
}
],
"provider": {
"provider": "贵州省交通运输厅",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"person": "张先生",
"phone": "010-66666666"
},
"comments": {
"baseInfo": {
"score": 3.5,
"total": 23,
"starInfo": [
{
"star": 5,
"percent": 40
},
{
"star": 4,
"percent": 30
},
{
"star": 3,
"percent": 20
},
{
"star": 2,
"percent": 5
},
{
"star": 1,
"percent": 5
}
]
},
"list": [
{
"name": "禺彊",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 5,
"description": "这个应用非常实用,可以应用到多个业务领域!",
"time": " 2019-12-12"
},
{
"name": "海纳",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 5,
"description": "赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
},
{
"name": "左宜",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"star": 3,
"description": "赞!",
"time": " 2019-12-12"
}
]
}
},
"detail": [
{ {
"name": "获取流程", "name": "获取流程",
"type": "step" "type": "step",
"value": ["服务申请", "信息填写", "审核确认", "服务获取"]
}, },
{ {
"name": "服务说明", "name": "服务说明",
...@@ -501,7 +880,7 @@ ...@@ -501,7 +880,7 @@
} }
} }
], ],
"ggdj": [ "specification": [
{ {
"gg": "访问次数:20/日 访问量:100/日", "gg": "访问次数:20/日 访问量:100/日",
"ggsm": "用户服务申请通过审核确认后,每日可对水路货物周转量情况进行20次免费访问,获取100条数据记录。" "ggsm": "用户服务申请通过审核确认后,每日可对水路货物周转量情况进行20次免费访问,获取100条数据记录。"
...@@ -515,13 +894,13 @@ ...@@ -515,13 +894,13 @@
"ggsm": "" "ggsm": ""
} }
], ],
"tgjg": { "provider": {
"name": "贵州省交通运输厅", "name": "贵州省交通运输厅",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"lxr": "张先生", "lxr": "张先生",
"lxdh": "010-66666666" "lxdh": "010-66666666"
}, },
"ffpjxx": { "comments": {
"baseInfo": { "baseInfo": {
"score": 3.5, "score": 3.5,
"total": 23, "total": 23,
...@@ -548,7 +927,7 @@ ...@@ -548,7 +927,7 @@
} }
] ]
}, },
"ffpjxxList": [ "list": [
{ {
"name": "禺彊", "name": "禺彊",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment