Skip to content

A
apaas-ui
Commit 6f2c9d80 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

数据服务详情

parent 7a738e81
Hide whitespace changes
Inline Side-by-side
Showing with 1189 additions and 507 deletions
src/components/comments-list.vue 0 → 100644
View file @ 6f2c9d80
<template>
<ul class="comments_list">
<li
class="comment_card"
v-for="(item, index) in data"
:key="'comment_' + index"
>
<div class="comment-left">
<el-avatar :size="60" fit="cover" :src="item.img" />
</div>
<div class="comment-right">
<p class="comment-user_name" v-text="item.name"></p>
<div class="commnet-rate">
<el-rate
:colors="['#e69232', '#e69232', '#e69232']"
:value="item.star"
disabled
score-template="{value}"
>
</el-rate>
</div>
<p class="comment-description" v-text="item.description"></p>
<p class="comment-time" v-text="item.time"></p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: {
data: {
type: Array,
required: true,
},
},
data: () => ({}),
methods: {},
created() {},
};
</script>
<style scoped>
.comment_card {
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: 25px 0;
border-top: 2px solid #f4f7fc;
}
.comment_card:last-child {
border-bottom: 2px solid #f4f7fc;
}
.comment-left {
flex-shrink: 0;
padding-top: 5px;
margin-right: 27px;
}
.comment-right {
font-size: 16px;
line-height: 25px;
}
.comment-right > .comment-user_name {
padding-left: 3px;
color: #58617a;
}
.comment-right > .comment-description {
padding-left: 3px;
color: #242c43;
margin-top: 10px;
}
.comment-right > .comment-time {
padding-left: 3px;
color: #8890a7;
margin-top: 3px;
}
</style>
<style>
.comment-right > .commnet-rate .el-rate {
height: 25px;
}
.comment-right > .commnet-rate .el-rate__icon {
font-size: 25px;
margin-right: 0;
}
</style>
src/components/comments-score.vue 0 → 100644
View file @ 6f2c9d80
<template>
<div class="comments_score">
<div class="comments_score-left">
<span v-text="data.score"></span>
</div>
<div class="comments_score-center">
<p class="comment-full_score">满分5分</p>
<div class="comment-total_rata">
<el-rate
:colors="['#e69232', '#e69232', '#e69232']"
:value="data.score"
disabled
>
</el-rate>
</div>
<p class="commen-total_count" v-text="'共' + data.total + '个评分'"></p>
</div>
<ul class="comments_score-right">
<li
class="comments_score_item"
v-for="(item, index) in data.starInfo"
:key="'star_info_' + index"
>
<el-rate
class="comments_score_item-rate"
:colors="['#8890a7', '#8890a7', '#8890a7']"
:value="item.star"
disabled
disabled-void-color="transparent"
>
</el-rate>
<el-progress
class="comments_score_item-progress"
:percentage="item.percent"
:show-text="false"
color="#ea7d19"
></el-progress>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
required: true,
},
},
data: () => ({}),
methods: {},
created() {},
};
</script>
<style scoped>
.comments_score {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 35px;
}
.comments_score-left {
flex-shrink: 0;
width: 96px;
height: 110px;
background-image: url(../assets/imgs/score_bg.png);
background-size: 100% 100%;
display: inline-flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: 50px;
font-weight: bold;
margin-right: 25px;
}
.comments_score-center {
flex-shrink: 0;
padding-right: 48px;
border-right: 2px solid #f4f7fc;
margin-right: 48px;
}
.comments_score-center > .comment-full_score {
padding-left: 5px;
font-size: 14px;
line-height: 25px;
color: #a9aec0;
}
.comments_score-center > .comment-total_rata {
margin-top: 10px;
}
.comments_score-center > .commen-total_count {
padding-left: 5px;
font-size: 14px;
line-height: 25px;
color: #3f4f9c;
margin-top: 2px;
}
.comments_score-right {
flex-grow: 1;
}
.comments_score_item {
display: flex;
justify-content: flex-start;
align-items: center;
}
.comments_score_item-rate {
display: inline-flex;
flex-direction: row-reverse;
justify-content: flex-start;
align-items: center;
}
.comments_score_item-progress {
flex-grow: 1;
max-width: 200px;
margin-left: 10px;
}
</style>
<style>
.comments_score-center > .comment-total_rata .el-rate {
height: 30px;
}
.comments_score-center > .comment-total_rata .el-rate__icon {
font-size: 30px;
margin-right: 0;
}
.comments_score_item-rate .el-rate {
height: 14px;
}
.comments_score_item-rate .el-rate__icon {
font-size: 14px;
margin-right: 0;
}
.comments_score_item-progress .el-progress-bar__outer {
background: #e2e3ed;
}
</style>
src/components/servive-content.vue → src/components/service-info.vue
View file @ 6f2c9d80
<template>
<div class="sevice_content" v-if="serviceData">
<div class="sevice_info" v-if="serviceData">
<div class="service_title">
<span class="service_name" v-text="serviceData.name"></span>
<span class="service_type" v-if="serviceData.type" v-text="serviceData.type">共享</span>
<span class="service_level" v-text="serviceData.openLevel">共享</span>
<span
class="service_type"
v-if="serviceData.type"
v-text="serviceData.type"
></span>
<span class="service_level" v-text="serviceData.openLevel"></span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_liulan.png')" />
<span v-text="'浏览次数：' + serviceData.viewCount"></span>
......@@ -13,11 +17,11 @@
<span v-text="'获取次数：' + serviceData.acquireCount"></span>
</span>
</div>
<div class="main_content">
<div class="left_content" v-if="serviceData.img">
<div class="main_container">
<div class="main_container-left" v-if="serviceData.img">
<img :src="serviceData.img" width="460" />
</div>
<div class="right_content">
<div class="main_container-right">
<ul class="service_base_info">
<li>
<span>提供机构：</span>
......@@ -57,7 +61,7 @@
"
@click="changeSpecification(item)"
>
{{ index + 1 + ". " + item.name }}
{{ item.name }}
</el-button>
</div>
</div>
......@@ -70,11 +74,11 @@
<div class="btn_container">
<el-button
v-for="(item, index) in serviceData.ways"
v-text="item.name"
:key="'way_' + index"
:type="item.value === commodityData.way ? 'primary' : 'default'"
@click="changeWay(item)"
>
按月购买
</el-button>
</div>
</div>
......@@ -139,27 +143,27 @@ export default {
console.log(this.commodityData);
},
},
mounted() {},
};
</script>
<style scoped>
.sevice_content {
.sevice_info {
padding: 20px;
background-color: #fff;
margin-bottom: 20px;
}
.main_content {
.main_container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 25px;
}
.left_content {
.main_container-left {
padding: 3px;
background-color: #f9fafc;
margin-right: 30px;
}
.right_content {
.main_container-right {
flex-grow: 1;
}
.service_title {
......@@ -266,16 +270,16 @@ export default {
width: 220px;
margin-left: 20px;
}
.sevice_content .el-button--primary {
.sevice_info .el-button--primary {
background-color: #515fe7;
border-color: #515fe7;
}
.sevice_content .el-button--warning.is-plain {
.sevice_info .el-button--warning.is-plain {
background-color: #fcefd6;
border-color: #fac266;
color: #e56600;
}
.sevice_content .el-button--warning {
.sevice_info .el-button--warning {
background-color: #e56600;
border-color: #e56600;
}
......
src/components/servive-step.vue → src/components/service-step.vue
View file @ 6f2c9d80
<template>
<div class="service_step">
<div class="step_bg"></div>
<ul class="step_items">
<li class="step_item">
<div class="step_icon">
<span>1</span>
<span>1</span>
</div>
<p class="step_title">服务申请</p>
</li>
<li class="step_line"></li>
<li class="step_item">
<div class="step_icon">
<span>2</span>
<span>2</span>
</div>
<p class="step_title">审核确认</p>
</li>
<li class="step_line"></li>
<li class="step_item">
<div class="step_icon">
<span>3</span>
<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>
<span>4</span>
</div>
<p class="step_title">服务获取</p>
</li>
......@@ -32,39 +34,37 @@
<style scoped>
.service_step {
position: relative;
min-height: 48px;
}
.service_step > .step_bg {
position: absolute;
top: 23px;
right: 24px;
left: 24px;
border: 1px solid #1abc9c;
min-height: 68px;
padding: 30px 0;
}
.service_step > .step_items {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
justify-content: center;
align-items: flex-start;
text-align: center;
}
.service_step .step_line {
width: 168px;
border: 1px solid #c0c8f8;
margin: 33px 10px 0;
}
.service_step .step_item > .step_icon {
width: 48px;
height: 48px;
width: 68px;
height: 68px;
background-color: #515fe7;
border: 10px solid #e1e3ee;
border-radius: 50%;
background-color: #1abc9c;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 28px;
font-size: 20px;
font-weight: bold;
color: #fff;
}
.service_step .step_item > .step_title {
font-size: 12px;
font-size: 16px;
line-height: 24px;
color: #1abc9c;
color: #242c43;
margin-top: 7px;
}
</style>
src/components/service-tab-comments.vue 0 → 100644
View file @ 6f2c9d80
<template>
<div class="service_tab-comments">
<comments-score :data="data.baseInfo"></comments-score>
<comments-list :data="data.ffpjxxList"></comments-list>
<div class="comments_pages">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="data.baseInfo.total"
:page-sizes="[10, 50, 100]"
:current-page="1"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
</div>
</div>
</template>
<script>
import commentsScore from "@/components/comments-score";
import commentsList from "@/components/comments-list";
export default {
components: {
commentsScore,
commentsList,
},
props: {
data: {
type: Object,
required: true,
},
},
data: () => ({}),
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
},
created() {},
};
</script>
<style scoped>
.comments_pages {
text-align: center;
margin-top: 20px;
}
</style>
src/components/service-tab-detail.vue 0 → 100644
View file @ 6f2c9d80
<template>
<ul class="service_tab-detail">
<li
class="detail-item"
v-for="(item, index) in data"
:key="'detail-' + index"
>
<h3 class="detail-title" v-text="item.name + '：'"></h3>
<service-step v-if="item.type == 'step'"></service-step>
<p
v-else-if="item.type == 'text'"
class="detail-text"
v-text="item.value"
></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
v-else-if="item.type == 'table'"
class="detail-table"
:row-key="(row) => item.name + '_' + row.zdbm"
default-expand-all
:border="false"
:data="item.value.datas"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column
v-for="(v, i) in item.value.columns"
:key="'table_column_' + index + '_' + i"
:prop="v.prop"
:label="v.label"
:align="v.align || 'left'"
></el-table-column>
</el-table>
</li>
</ul>
</template>
<script>
import serviceStep from "@/components/service-step";
export default {
components: {
serviceStep,
},
props: {
data: {
type: Array,
required: true,
},
},
data: () => ({}),
methods: {},
created() {},
};
</script>
<style scoped>
.detail-item:not(:last-child) {
margin-bottom: 20px;
}
.detail-item .detail-title {
font-size: 14px;
line-height: 25px;
color: #8890a7;
margin-bottom: 3px;
}
.detail-item .detail-text {
font-size: 14px;
line-height: 25px;
color: #242c43;
}
.detail-item .detail-table {
width: 100%;
}
</style>
src/components/service-tab-provider.vue 0 → 100644
View file @ 6f2c9d80
<template>
<div class="service_tab-provider">
<div class="provider-left">
<el-avatar shape="square" :size="156" fit="cover" :src="data.img" />
</div>
<div class="provider-right">
<p class="provider_name" v-text="data.provider"></p>
<div class="provider_info">
<p>
<span>联系人：</span>
<span v-text="data.person"></span>
</p>
<p>
<span>联系电话：</span>
<span v-text="data.phone"></span>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
required: true,
},
},
data: () => ({}),
methods: {},
created() {},
};
</script>
<style scoped>
.service_tab-provider {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.provider-left {
flex-shrink: 0;
padding: 3px;
background-color: #f6f7fb;
border-radius: 9px;
font-size: 0;
}
.provider-left > .el-avatar--square {
border-radius: 7px;
}
.provider-right {
flex-grow: 1;
margin-left: 20px;
}
.provider-right > .provider_name {
font-size: 20px;
font-weight: bold;
color: #0d1847;
line-height: 36px;
}
.provider-right > .provider_info {
padding: 20px;
background-color: #f6f7fb;
border-radius: 6px;
margin-top: 20px;
}
.provider-right > .provider_info > p {
font-size: 14px;
color: #242c43;
line-height: 25px;
}
.provider-right > .provider_info > p:not(:first-child) {
margin-top: 16px;
}
.provider-right > .provider_info > p > span:first-child {
color: #8890a7;
}
</style>
src/components/service-tab-specification.vue 0 → 100644
View file @ 6f2c9d80
<template>
<div class="service_tab-specification">
<div class="specification_header">
<p>申请方式：</p>
<type-group v-model="type" :types="types"></type-group>
</div>
<el-table class="specification_table" :data="tableData" :border="false">
<el-table-column prop="gg" label="规格" width="360"></el-table-column>
<el-table-column prop="ggsm" label="规格说明"></el-table-column>
</el-table>
</div>
</template>
<script>
import typeGroup from "@/components/type-group";
export default {
components: {
typeGroup,
},
props: {
data: {
type: Array,
required: true,
},
},
data: () => ({
type: "",
types: [],
}),
computed: {
tableData() {
return this.types.length > 0 ? this.data[this.type].data : [];
},
},
mounted() {
this.types = this.data.map((item, index) => ({
name: item.name,
value: index,
}));
if (this.types.length) {
this.type = 0;
}
},
};
</script>
<style scoped>
.specification_header > p {
font-size: 14px;
color: #8890a7;
line-height: 25px;
margin-bottom: 10px;
}
.specification_table {
width: 100%;
margin-top: 20px;
}
</style>
src/components/service-tabs.vue 0 → 100644
View file @ 6f2c9d80
<template>
<el-tabs
class="service_info_tab"
type="border-card"
v-model="serviceTabsActiveName"
:stretch="true"
>
<el-tab-pane label="服务详情信息" name="first">
<service-tab-detail
v-if="fwxqxx"
class="service_info"
:data="fwxqxx"
></service-tab-detail>
</el-tab-pane>
<el-tab-pane label="规格定价" name="second">
<service-tab-specification
v-if="ggdj"
class="service_info"
:data="ggdj"
></service-tab-specification>
</el-tab-pane>
<el-tab-pane label="提供机构" name="third">
<service-tab-provider
v-if="tgjg"
class="service_info"
:data="tgjg"
></service-tab-provider>
</el-tab-pane>
<el-tab-pane label="服务评价信息" name="fourth">
<service-tab-comments
v-if="ffpjxx"
class="service_info"
:data="ffpjxx"
></service-tab-comments>
</el-tab-pane>
</el-tabs>
</template>
<script>
import serviceTabDetail from "@/components/service-tab-detail";
import serviceTabSpecification from "@/components/service-tab-specification";
import serviceTabProvider from "@/components/service-tab-provider";
import serviceTabComments from "@/components/service-tab-comments";
export default {
components: {
serviceTabDetail,
serviceTabSpecification,
serviceTabProvider,
serviceTabComments,
},
props: {
type: {
type: String,
required: true,
},
},
data: () => ({
serviceTabsActiveName: "first",
fwxqxx: null, // 服务详情信息
ggdj: null, // 规格定价
tgjg: null, // 提供机构
ffpjxx: null, // 服务评价信息
}),
methods: {
getDataFromApi(_url) {
return new Promise((resolve, reject) => {
this.$http
.get(_url)
.then((response) => {
resolve(response.body);
})
.catch(function(error) {
reject(error);
});
});
},
init() {
this.getDataFromApi(`/static/serviceInfo.json`).then(
(data) => {
let _data = data[this.type];
this.fwxqxx = _data.fwxqxx;
this.ggdj = _data.ggdj;
this.tgjg = _data.tgjg;
this.ffpjxx = _data.ffpjxx;
},
(error) => {
console.log(error);
}
);
},
},
created() {
this.init();
},
};
</script>
<style scoped>
.service_info_tab {
border: none;
box-shadow: none;
margin-bottom: 40px;
}
.service_info {
padding: 35px 40px 40px;
box-sizing: border-box;
}
</style>
<style>
.service_info_tab.el-tabs--border-card > .el-tabs__content {
padding: 0;
}
.service_info_tab.el-tabs--border-card > .el-tabs__header .el-tabs__item {
height: 65px !important;
line-height: 59px !important;
background-color: #fff;
border-top: 4px solid #fff;
border-bottom: 2px solid #f4f7fc;
}
.service_info_tab.el-tabs--border-card
> .el-tabs__header
.el-tabs__item.is-active {
border-top: 4px solid #f5ab4c;
border-right: 2px solid #fcefd6;
border-bottom: 2px solid #fff;
border-left: 2px solid #fcefd6;
color: #e56600 !important;
}
.service_info_tab.el-tabs--border-card
> .el-tabs__header
.el-tabs__item:first-child {
border-left: none;
}
.service_info_tab.el-tabs--border-card
> .el-tabs__header
.el-tabs__item:last-child {
border-right: none;
}
.service_info_tab .el-table th > .cell {
color: #1a2236;
}
.service_info_tab .el-table td,
.service_info_tab .el-table th.is-leaf {
border: none !important;
}
.service_info_tab .el-table::before {
display: none;
}
.service_info_tab .el-table__row:nth-child(odd) td {
background-color: #f8f9fd;
}
</style>
src/components/servive-info.vue deleted 100644 → 0
View file @ 7a738e81
<template>
<el-tabs
class="service_info_tab"
type="border-card"
v-model="serviceTabsActiveName"
:stretch="true"
style="margin-top: 20px;"
>
<el-tab-pane label="服务详情信息" name="first">
<ul class="service_info" v-if="fwxqxxDatas">
<li
class="fwxqxx_item"
v-for="(item, index) in fwxqxxDatas"
:key="'fwxqxx_' + index"
>
<h3 class="fwxqxx_title" v-text="'· ' + item.name"></h3>
<servive-step
v-if="item.type == 'step'"
style="margin: 0 20px;"
></servive-step>
<p
v-else-if="item.type == 'text'"
class="fwxqxx_text"
v-text="item.value"
></p>
<ul v-else-if="item.type == 'list'">
<li
v-for="(v, i) in item.value"
:key="'fwxqxx_li_' + index + '_' + i"
>
<p class="fwxqxx_text">
<span v-text="v.name + '：'"></span>
<span v-text="v.value"></span>
</p>
</li>
</ul>
<el-table
v-else-if="item.type == 'table'"
class="fwxqxx_table"
:data="item.value.datas"
border
>
<el-table-column
type="index"
:index="(index) => index + 1"
align="center"
>
</el-table-column>
<el-table-column
v-for="(v, i) in item.value.columns"
:key="'table_column_' + index + '_' + i"
:prop="v.prop"
:label="v.label"
:align="v.align || 'left'"
></el-table-column>
</el-table>
<el-table
v-else-if="item.type == 'table2'"
class="fwxqxx_table fwxqxx_table_2"
:data="item.value.datas"
border
>
<el-table-column prop="name" label="" align="right" width="200">
<template slot-scope="scope">
<span v-text="scope.row.name + '：'"></span>
</template>
</el-table-column>
<el-table-column prop="value" label="">
<template slot-scope="scope">
<pre
v-if="scope.row.type == 'code'"
v-html="scope.row.value"
></pre>
<span v-else v-text="scope.row.value"></span>
</template>
</el-table-column>
</el-table>
</li>
</ul>
</el-tab-pane>
<el-tab-pane label="规格定价" name="second">
<div class="service_info" v-if="ggdjData">
<div class="ggdj_header">
<span>购买方式：</span>
<el-button-group>
<el-button type="danger">
按月
</el-button>
<el-button type="default">
按年
</el-button>
</el-button-group>
</div>
<el-table class="ggdj_table" :data="ggdjData" border>
<el-table-column prop="gg" label="规格"></el-table-column>
<el-table-column prop="ggsm" label="规格说明"></el-table-column>
</el-table>
</div>
</el-tab-pane>
<el-tab-pane label="提供机构" name="third">
<div class="service_info" v-if="tgjgData">
<p class="tgjg_dw" v-text="tgjgData.name"></p>
<div class="tgjg_img">
<img :src="tgjgData.img" width="100%" />
</div>
<div class="tgjg_lxfs">
<p>联系人：<span v-text="tgjgData.lxr"></span></p>
<p>联系电话：<span v-text="tgjgData.lxdh"></span></p>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="服务评价信息" name="fourth">
<div class="service_info" v-if="ffpjxxData">
<div class="fwpjxx_score">
<div class="fwpjxx_score_left">
<p v-text="ffpjxxData.baseInfo.score + '分'"></p>
<p>满分5分</p>
<p v-text="'共' + ffpjxxData.baseInfo.total + '个评分'"></p>
</div>
<ul class="fwpjxx_score_right">
<li
class="fwpjxx_score_item"
v-for="(item, index) in ffpjxxData.baseInfo.starInfo"
:key="'star_info_' + index"
>
<el-rate
:value="item.star"
disabled
text-color="#ff9900"
score-template="{value}"
>
</el-rate>
<el-progress
:percentage="item.percent"
:show-text="false"
></el-progress>
</li>
</ul>
</div>
<ul class="fwpjxx_items">
<li
class="fwpjxx_item"
v-for="(item, index) in ffpjxxData.ffpjxxList"
:key="'fwpjxx_' + index"
>
<el-avatar :size="60" :src="item.img"> </el-avatar>
<div class="fwpjxx_content">
<p>
<span v-text="item.name"></span>
<el-rate
:value="item.star"
disabled
text-color="#ff9900"
score-template="{value}"
>
</el-rate>
<span v-text="item.time"></span>
</p>
<p v-text="item.description"></p>
</div>
</li>
</ul>
<div class="fwpjxx_pages">
<el-pagination
background
layout="prev, pager, next"
:page-size="10"
:total="ffpjxxData.baseInfo.total"
></el-pagination>
</div>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
// @ is an alias to /src
import Commodity from "@/components/commodity.vue";
import BlockRadius from "@/components/block-radius";
import serviveStep from "@/components/servive-step";
export default {
components: {
Commodity,
BlockRadius,
serviveStep,
},
data: () => ({
serviceTabsActiveName: "first",
fwxqxxDatas: null, // 服务详情信息
ggdjData: null, // 规格定价
tgjgData: null, // 提供机构
ffpjxxData: null, // 服务评价信息
}),
methods: {
getDataFromApi(_url) {
return new Promise((resolve, reject) => {
this.$http
.get(_url)
.then((response) => {
resolve(response.body);
})
.catch(function(error) {
reject(error);
});
});
},
init() {
this.getDataFromApi(`/static/serviceInfo.json`).then(
({ fwxqxxDatas, ggdjData, tgjgData, ffpjxxData }) => {
this.fwxqxxDatas = fwxqxxDatas;
this.ggdjData = ggdjData;
this.tgjgData = tgjgData;
this.ffpjxxData = ffpjxxData;
},
(error) => {
console.log(error);
}
);
},
},
created() {
this.init();
},
};
</script>
<style scoped>
.service_info {
min-height: 500px;
padding: 10px 20px;
box-sizing: border-box;
/* background-color: #eee; */
}
.service_info .fwxqxx_item {
margin-bottom: 20px;
}
.service_info .fwxqxx_item > .fwxqxx_title {
font-size: 13px;
font-weight: bold;
line-height: 20px;
margin-bottom: 5px;
}
.service_info .fwxqxx_item > .fwxqxx_text {
font-size: 16px;
line-height: 24px;
color: #333;
}
.service_info .fwxqxx_item > .fwxqxx_table {
width: 100%;
}
.service_info .ggdj_header {
margin-bottom: 10px;
}
.service_info .ggdj_table {
width: 100%;
}
.service_info .tgjg_dw {
font-size: 20px;
line-height: 30px;
margin-bottom: 10px;
}
.service_info .tgjg_img {
width: 400px;
margin-bottom: 10px;
}
.service_info .tgjg_lxfs {
font-size: 16px;
line-height: 24px;
}
.service_info .fwpjxx_score {
display: flex;
justify-content: flex-start;
align-items: center;
margin: 10px 0;
}
.service_info .fwpjxx_score > .fwpjxx_score_left {
flex-shrink: 0;
margin-right: 20px;
}
.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(1) {
font-size: 32px;
font-weight: bold;
}
.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(2) {
font-size: 14px;
color: #333;
}
.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(3) {
font-size: 18px;
color: #ccc;
}
.service_info .fwpjxx_score > .fwpjxx_score_right {
flex-grow: 1;
}
.service_info .fwpjxx_score_item {
display: flex;
justify-content: flex-start;
align-items: center;
max-width: 480px;
}
.service_info .fwpjxx_score_item > .el-progress {
flex-grow: 1;
margin-left: 10px;
}
.service_info .fwpjxx_item {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 20px;
}
.service_info .fwpjxx_item > .el-avatar {
flex-shrink: 0;
margin-right: 20px;
}
.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(1) {
display: inline-flex;
justify-content: flex-start;
align-items: center;
font-size: 18px;
color: #999;
}
.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(1) > .el-rate {
margin: 0 60px 0 30px;
}
.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(2) {
font-size: 18px;
color: #666;
}
.service_info .fwpjxx_pages {
text-align: center;
margin: 20px 0 10px;
}
</style>
<style>
.fwpjxx_score_item .el-progress-bar__outer {
background: #fff;
}
.fwxqxx_table_2 .el-table__header-wrapper {
display: none;
}
</style>
src/components/type-group.vue 0 → 100644
View file @ 6f2c9d80
<template>
<div class="type_group">
<span
v-for="item in types"
class="type_item"
v-text="item.name"
:class="{ current: item.value === type }"
:key="item.value"
@click="$emit('change-type', item.value)"
></span>
</div>
</template>
<script>
export default {
model: {
prop: "type",
event: "change-type",
},
props: {
type: {
type: [Number, String],
},
types: {
type: Array,
default: () => [],
},
},
};
</script>
<style scoped>
.type_group {
display: inline-flex;
background-color: #f6f7fb;
padding: 6px;
border-radius: 6px;
}
.type_item {
min-width: 100px;
padding: 10px;
box-sizing: border-box;
border-radius: 5px;
overflow: hidden;
font-size: 14px;
color: #58617a;
line-height: 22px;
text-align: center;
cursor: pointer;
}
.type_item:not(:first-child) {
margin-left: 10px;
}
.type_item.current {
background-color: #515fe7;
color: #fff;
}
</style>
src/pages/example_commodity.vue
View file @ 6f2c9d80
......@@ -4,8 +4,6 @@
<h3>按原型大致做了一下，调优等后续</h3>
<Commodity :datas="datas" />
<servive-info></servive-info>
</block-radius>
</div>
</template>
......@@ -14,12 +12,10 @@
// @ is an alias to /src
import Commodity from "@/components/commodity.vue";
import BlockRadius from "@/components/block-radius";
import serviveInfo from "@/components/servive-info";
export default {
components: {
Commodity,
BlockRadius,
serviveInfo,
},
data: () => ({
datas: {
......
src/pages/sjfwDetail.vue
View file @ 6f2c9d80
......@@ -8,20 +8,20 @@
</el-breadcrumb>
</div>
<servive-content :service-data="serviceData"></servive-content>
<service-info :service-data="serviceData"></service-info>
<servive-info></servive-info>
<service-tabs type="sjfw"></service-tabs>
</div>
</template>
<script>
import serviveInfo from "@/components/servive-info";
import serviveContent from "@/components/servive-content";
import serviceInfo from "@/components/service-info";
import serviceTabs from "@/components/service-tabs";
export default {
components: {
serviveInfo,
serviveContent,
serviceInfo,
serviceTabs,
},
data: () => ({
serviceData: null,
......
src/pages/skfwDetail.vue
View file @ 6f2c9d80
......@@ -8,20 +8,22 @@
</el-breadcrumb>
</div>
<servive-content :service-data="serviceData"></servive-content>
<!-- <servive-commodity-info
:service-data="serviceData"
></servive-commodity-info>
<servive-info></servive-info>
<servive-tabs-info type="sjfw"></servive-tabs-info> -->
</div>
</template>
<script>
import serviveInfo from "@/components/servive-info";
import serviveContent from "@/components/servive-content";
// import serviveCommodityInfo from "@/components/servive-commodity-info";
// import serviveTabsInfo from "@/components/servive-tabs-info";
export default {
components: {
serviveInfo,
serviveContent,
// serviveCommodityInfo,
// serviveTabsInfo,
},
data: () => ({
serviceData: null,
......
src/pages/yysdDetail.vue
View file @ 6f2c9d80
......@@ -8,20 +8,22 @@
</el-breadcrumb>
</div>
<servive-content :service-data="serviceData"></servive-content>
<!-- <servive-commodity-info
:service-data="serviceData"
></servive-commodity-info>
<servive-info></servive-info>
<servive-tabs-info type="sjfw"></servive-tabs-info> -->
</div>
</template>
<script>
import serviveInfo from "@/components/servive-info";
import serviveContent from "@/components/servive-content";
// import serviveCommodityInfo from "@/components/servive-commodity-info";
// import serviveTabsInfo from "@/components/servive-tabs-info";
export default {
components: {
serviveInfo,
serviveContent,
// serviveCommodityInfo,
// serviveTabsInfo,
},
data: () => ({
serviceData: null,
......
src/pages/zhyyfwDetail.vue
View file @ 6f2c9d80
......@@ -8,20 +8,22 @@
</el-breadcrumb>
</div>
<servive-content :service-data="serviceData"></servive-content>
<!-- <servive-commodity-info
:service-data="serviceData"
></servive-commodity-info>
<servive-info></servive-info>
<servive-tabs-info type="sjfw"></servive-tabs-info> -->
</div>
</template>
<script>
import serviveInfo from "@/components/servive-info";
import serviveContent from "@/components/servive-content";
// import serviveCommodityInfo from "@/components/servive-commodity-info";
// import serviveTabsInfo from "@/components/servive-tabs-info";
export default {
components: {
serviveInfo,
serviveContent,
// serviveCommodityInfo,
// serviveTabsInfo,
},
data: () => ({
serviceData: null,
......
static/serviceInfo.json
View file @ 6f2c9d80
{
"fwxqxxDatas": [
"sjfw": {
"fwxqxx": [
{
"name": "获取流程",
"type": "step"
},
{
"name": "服务描述",
"type": "text",
"value": "提供水路货物周转量排名和同比增长的专题数据服务，提供水路货物周转量排名和同比增长的专题数据服务，提供水路货物周转量排名和同比增长的专题数据服务，提供水路货物周转量排名和同比增长的专题数据服务。"
},
{
"name": "请求方式",
"type": "text",
"value": "GET"
},
{
"name": "编码格式",
"type": "text",
"value": "UTF-8"
},
{
"name": "请求参数",
"type": "table",
"value": {
"datas": [
{
"zdbm": "errcode",
"zdlx": "字符串",
"zdmc": "错误码",
"zdsm": "显示字段信息显示字段信息",
"sfbx": "是",
"slz": "xxx"
},
{
"zdbm": "errmsg",
"zdlx": "对象",
"zdmc": "错误信息",
"zdsm": "显示字段信息显示字段信息",
"sfbx": "是",
"slz": "xxx"
},
{
"zdbm": "data",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息",
"sfbx": "否",
"slz": "xxx",
"children": [
{
"zdbm": "rows",
"zdlx": "对象",
"zdmc": "对象",
"zdsm": "显示字段信息显示字段信息",
"sfbx": "否",
"slz": "xxx"
}
]
}
],
"columns": [
{
"prop": "zdbm",
"label": "字段编码",
"align": "center"
},
{
"prop": "zdlx",
"label": "字段类型",
"align": "center"
},
{
"prop": "zdmc",
"label": "字段名称",
"align": "center"
},
{
"prop": "zdsm",
"label": "字段说明"
},
{
"prop": "sfbx",
"label": "是否必须",
"align": "center"
},
{
"prop": "slz",
"label": "示例值",
"align": "center"
}
]
}
},
{
"name": "响应参数",
"type": "table",
"value": {
"datas": [
{
"zdbm": "errcode",
"zdlx": "字符串",
"zdmc": "错误码",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "errmsg",
"zdlx": "对象",
"zdmc": "错误信息",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "data",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息",
"children": [
{
"zdbm": "rows",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息",
"children": [
{
"zdbm": "time",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "count",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "item",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
}
]
},
{
"zdbm": "city",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息",
"children": [
{
"zdbm": "sPoint",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "ePoint",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
}
]
}
]
}
],
"columns": [
{
"prop": "zdbm",
"label": "字段编码",
"align": "center"
},
{
"prop": "zdlx",
"label": "字段类型",
"align": "center"
},
{
"prop": "zdmc",
"label": "字段名称"
},
{
"prop": "zdsm",
"label": "字段说明"
}
]
}
}
],
"ggdj": [
{
"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": ""
}
]
}
],
"tgjg": {
"provider": "贵州省交通运输厅",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"person": "张先生",
"phone": "010-66666666"
},
"ffpjxx": {
"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
}
]
},
"ffpjxxList": [
{
"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"
}
]
}
},
"fwxqxx": [
{
"name": "获取流程",
"type": "step"
......@@ -53,25 +385,73 @@
"value": {
"datas": [
{
"zdmc": "排名",
"zdbm": "grade",
"zdlx": "string",
"zdms": "企业水路货物周转量排名",
"slz": "1"
"zdbm": "errcode",
"zdlx": "字符串",
"zdmc": "错误码",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "errmsg",
"zdlx": "对象",
"zdmc": "错误信息",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdmc": "同比增长",
"zdbm": "increase",
"zdlx": "string",
"zdms": "同比增长量信息",
"slz": "\"100%\""
"zdbm": "data",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息",
"children": [
{
"zdbm": "rows",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息",
"children": [
{
"zdbm": "time",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "count",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "item",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
}
]
},
{
"zdbm": "city",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息",
"children": [
{
"zdbm": "sPoint",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
},
{
"zdbm": "ePoint",
"zdlx": "字符串",
"zdmc": "数据项",
"zdsm": "显示字段信息显示字段信息"
}
]
}
]
}
],
"columns": [
{
"prop": "zdmc",
"label": "字段名称"
},
{
"prop": "zdbm",
"label": "字段编码",
......@@ -83,88 +463,12 @@
"align": "center"
},
{
"prop": "zdms",
"label": "字段描述"
},
{
"prop": "slz",
"label": "示例值",
"align": "center"
}
]
}
},
{
"name": "接口详情信息",
"type": "table2",
"value": {
"datas": [
{
"name": "接口地址",
"value": "/cigservice/baseservice/fillder/turnover",
"type": "text"
},
{
"name": "请求方式",
"value": "GET",
"type": "text"
},
{
"name": "编码格式",
"value": "UTF-8",
"type": "text"
},
{
"name": "接口编码",
"value": "turnover",
"type": "text"
},
{
"name": "接口描述",
"value": "水路货运周转量排名",
"type": "text"
},
{
"name": "请求参数",
"value": "无请求参数",
"type": "text"
},
{
"name": "响应参数",
"value": "无响应参数",
"type": "text"
},
{
"name": "响应示例",
"value": {
"success": 1,
"data": [
{
"data": [
{
"grade": "19",
"increase": "100%"
}
],
"column": [
{
"title": "排名",
"key": "grade"
},
{
"title": "同比增长",
"key": "increase"
}
]
}
]
},
"type": "code"
"prop": "zdmc",
"label": "字段名称"
},
{
"name": "请求示例NodeJs",
"value": "var http = require('http');",
"type": "code"
"prop": "zdsm",
"label": "显示字段信息显示字段信息"
}
]
}
......@@ -197,7 +501,7 @@
}
}
],
"ggdjData": [
"ggdj": [
{
"gg": "访问次数：20/日 访问量：100/日",
"ggsm": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
......@@ -211,13 +515,13 @@
"ggsm": ""
}
],
"tgjgData": {
"tgjg": {
"name": "贵州省交通运输厅",
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"lxr": "张先生",
"lxdh": "010-66666666"
},
"ffpjxxData": {
"ffpjxx": {
"baseInfo": {
"score": 3.5,
"total": 23,
......
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