Skip to content

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

数据服务详情

parent 171e766e
Hide whitespace changes
Inline Side-by-side
Showing with 338 additions and 162 deletions
src/components/comments-list.vue
View file @ 95488142
...@@ -6,21 +6,21 @@ ...@@ -6,21 +6,21 @@
:key="'comment_' + index" :key="'comment_' + index"
> >
<div class="comment-left"> <div class="comment-left">
<el-avatar :size="60" fit="cover" :src="item.img" /> <el-avatar :size="60" fit="cover" :src="item.picture_path" />
</div> </div>
<div class="comment-right"> <div class="comment-right">
<p class="comment-user_name" v-text="item.name"></p> <p class="comment-user_name" v-text="item.user_name"></p>
<div class="commnet-rate"> <div class="commnet-rate">
<el-rate <el-rate
:colors="['#e69232', '#e69232', '#e69232']" :colors="['#e69232', '#e69232', '#e69232']"
:value="item.star" :value="item.score"
disabled disabled
score-template="{value}" score-template="{value}"
> >
</el-rate> </el-rate>
</div> </div>
<p class="comment-description" v-text="item.description"></p> <p class="comment-description" v-text="item.content"></p>
<p class="comment-time" v-text="item.time"></p> <p class="comment-time" v-text="item.add_time"></p>
</div> </div>
</li> </li>
</ul> </ul>
......
src/components/service-info/service-info.vue
View file @ 95488142
...@@ -3,58 +3,57 @@ ...@@ -3,58 +3,57 @@
<div class="service_title"> <div class="service_title">
<span class="service_name" v-text="data.name"></span> <span class="service_name" v-text="data.name"></span>
<span class="service_type" v-if="data.type" v-text="data.type"></span> <span class="service_type" v-if="data.type" v-text="data.type"></span>
<span class="service_level" v-text="data.openLevel"></span> <span
class="service_level"
v-text="['-', '共享', '受限', '敏感'][data.openness || 0]"
></span>
<span class="service_access_info"> <span class="service_access_info">
<img :src="require('@/assets/imgs/icon_liulan.png')" /> <img :src="require('@/assets/imgs/icon_liulan.png')" />
<span v-text="'浏览次数：' + data.viewCount"></span> <span v-text="'浏览次数：' + data.view_count"></span>
</span> </span>
<span class="service_access_info"> <span class="service_access_info">
<img :src="require('@/assets/imgs/icon_huoqu.png')" /> <img :src="require('@/assets/imgs/icon_huoqu.png')" />
<span v-text="'获取次数：' + data.acquireCount"></span> <span v-text="'获取次数：' + data.apply_count"></span>
</span> </span>
</div> </div>
<div class="main_container"> <div class="main_container">
<div class="main_container-left" v-if="data.img"> <div class="main_container-left" v-if="data.cover">
<img :src="data.img" width="460" /> <img :src="data.cover" width="460" />
</div> </div>
<div class="main_container-right"> <div class="main_container-right">
<ul class="service_base_info"> <ul class="service_base_info">
<li> <li>
<span>提供机构：</span> <span>提供机构：</span>
<span v-text="data.providedBy"> </span> <span v-text="data.organization_name"> </span>
</li> </li>
<li> <li>
<span>发布时间：</span> <span>发布时间：</span>
<span v-text="data.publishTime"></span> <span v-text="data.create_time"></span>
</li> </li>
<li> <li>
<span>更新时间：</span> <span>更新时间：</span>
<span v-text="data.updatedTime"></span> <span v-text="data.update_date"></span>
</li> </li>
<li> <li>
<span>数据领域：</span> <span>数据领域：</span>
<span v-text="data.dataField"></span> <span v-text="data.sectors_name"></span>
</li> </li>
<li> <li>
<span>服务类型：</span> <span>服务类型：</span>
<span v-html="data.serviceType"></span> <span v-text="data.data_service_type3_str"></span>
</li> </li>
<li> <li>
<span>资源摘要：</span> <span>资源摘要：</span>
<span v-text="data.resourceSummary"></span> <span v-text="data.descript"></span>
</li> </li>
</ul> </ul>
<div class="commodity_information"> <div class="commodity_information">
<span>规&emsp;&emsp;格：</span> <span>规&emsp;&emsp;格：</span>
<div class="btn_container"> <div class="btn_container">
<el-button <el-button
v-for="(item, index) in data.specifications" v-for="(item, index) in specifications"
:key="'specifications_' + index" :key="'spcs_' + index"
:type=" :type="item.id === specification.id ? 'primary' : 'default'"
item.value === commodityData.specification
? 'primary'
: 'default'
"
@click="changeSpecification(item)" @click="changeSpecification(item)"
> >
{{ item.name }} {{ item.name }}
...@@ -63,17 +62,17 @@ ...@@ -63,17 +62,17 @@
</div> </div>
<div class="commodity_information"> <div class="commodity_information">
<span>规格说明：</span> <span>规格说明：</span>
<span class="commodity_text" v-text="specificationDescription"></span> <span class="commodity_text" v-text="specification.descript"></span>
</div> </div>
<div class="commodity_information"> <div class="commodity_information">
<span>购买方式：</span> <span>购买方式：</span>
<div class="btn_container"> <div class="btn_container">
<el-button <el-button
v-for="(item, index) in data.ways" v-for="(item, index) in types"
v-text="item.name" v-text="item.name"
:key="'way_' + index" :key="'type_' + index"
:type="item.value === commodityData.way ? 'primary' : 'default'" :type="item.value === type ? 'primary' : 'default'"
@click="changeWay(item)" @click="changeType(item)"
> >
</el-button> </el-button>
</div> </div>
...@@ -81,11 +80,7 @@ ...@@ -81,11 +80,7 @@
<div class="commodity_information"> <div class="commodity_information">
<span>购买时长：</span> <span>购买时长：</span>
<div class="btn_container"> <div class="btn_container">
<el-input-number <el-input-number v-model="duration" :min="1"></el-input-number>
v-model="commodityData.duration"
:min="1"
:max="12"
></el-input-number>
</div> </div>
</div> </div>
<div class="commodity_action"> <div class="commodity_action">
...@@ -110,33 +105,82 @@ export default { ...@@ -110,33 +105,82 @@ export default {
}, },
}, },
data: () => ({ data: () => ({
commodityData: { types: [
specification: 0, {
way: 0, name: "按月",
duration: 1, value: 1,
}, },
{
name: "按年",
value: 2,
},
],
type: 1, // 购买方式 1：按月，2：按年
specification: {}, // 规格
duration: 1, // 时长
}), }),
computed: { computed: {
specificationDescription() { specifications() {
let obj = let specifications = (this.data.serviceRequestSpcs || []).filter(
this.data.specifications[this.commodityData.specification] || {}; (item) => item.type == this.type
return obj.description || ""; );
if (this.specification.id === undefined) {
this.specification = specifications[0];
}
return specifications;
},
},
watch: {
specifications: {
handler() {
this.specification = this.specifications[0];
},
deep: true,
}, },
}, },
methods: { methods: {
changeSpecification({ value }) { changeSpecification(specification) {
this.commodityData.specification = value; this.specification = specification;
}, },
changeWay({ value }) { changeType({ value }) {
this.commodityData.way = value; this.type = value;
}, },
addToCart() { addToCart() {
console.log("addToCart"); // console.log("addToCart");
console.log(this.commodityData); this.$http
.post("/apaas/serviceapp/v3/shopcart/add", {
service_id: parseFloat(this.data.service_id), // 0表示不是服务
app_id: parseFloat(this.data.app_id), // 0表示不是应用
duration: this.duration, // 申请时长
spec_id: this.specification.id, // 当为服务时，为服务规格 当为应用时 这里是部署方式的规格 1 部署 2开发
duration_method: this.type, // 计时方式 按年 按月
is_subscribe: 1, // 是否订阅
})
.then(({ data }) => {
if (data.success == 1) {
this.$message({
message: `添加购物车成功`,
type: "success",
});
this.$store.commit("setMenuCartState");
} else {
this.$message({
message: `添加购物车失败`,
type: "warning",
});
}
})
.catch((error) => {
this.$message({
message: `添加购物车失败`,
type: "warning",
});
});
}, },
applyImmediately() { applyImmediately() {
console.log("applyImmediately"); console.log("applyImmediately");
console.log(this.commodityData);
}, },
}, },
}; };
......
src/components/service-tabs/service-tab-comments.vue
View file @ 95488142
<template> <template>
<div class="service_tab-comments" v-if="data"> <div class="service_tab-comments">
<comments-score :data="data.baseInfo"></comments-score> <comments-score :data="scoreDetail"></comments-score>
<comments-list :data="data.list"></comments-list> <comments-list :data="commentsList"></comments-list>
<comments-pagination <comments-pagination
:total="data.baseInfo.total" :total="commentsTtotal"
:page-sizes="pageSizes" :page-sizes="pageSizes"
:page-size="pageSize" :page-size="pageSize"
:current-page="currentPage" :current-page="currentPage"
...@@ -25,30 +25,66 @@ export default { ...@@ -25,30 +25,66 @@ export default {
commentsPagination, commentsPagination,
}, },
props: { props: {
data: {
type: Object,
default: () => {},
},
url: { url: {
type: String, type: String,
required: true, required: true,
}, },
}, },
data: () => ({ data: () => ({
data: null, commentsTtotal: 0,
commentsList: [],
pageSizes: [10, 50, 100], pageSizes: [10, 50, 100],
pageSize: 10, pageSize: 10,
currentPage: 1, currentPage: 1,
}), }),
computed: {
scoreDetail() {
let data = this.data || {};
return {
score: data.avgScore || 0,
starInfo: [1, 2, 3, 4, 5].map((star) => {
let percent =
this.commentsTtotal > 0
? (((data.scoreStatic && data.scoreStatic[star]) || 0) /
this.commentsTtotal) *
100
: 0;
return {
star,
percent,
};
}),
total: this.commentsTtotal,
};
},
},
methods: { methods: {
changePageSize(value) { changePageSize(value) {
this.pageSize = value; this.pageSize = value;
this.currentPage = 1; this.currentPage = 1;
this.init();
}, },
changeCurrentPage(value) { changeCurrentPage(value) {
this.currentPage = value; this.currentPage = value;
this.init();
}, },
init() { init() {
this.$http this.$http
.get("/static/serviceInfo.json") .get(this.url, {
.then((response) => { params: {
this.data = response.body[this.url].comments; page: this.currentPage,
size: this.pageSize,
},
})
.then(({ data }) => {
this.commentsTtotal = data.total;
this.commentsList = data.data;
}) })
.catch(function(error) { .catch(function(error) {
console.log(error); console.log(error);
......
src/components/service-tabs/service-tab-detail.vue
View file @ 95488142
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<el-table <el-table
v-else-if="item.type == 'table'" v-else-if="item.type == 'table'"
class="detail-table" class="detail-table"
row-key="id" row-key="name"
default-expand-all default-expand-all
:border="false" :border="false"
:data="item.value.datas" :data="item.value.datas"
...@@ -36,6 +36,7 @@ ...@@ -36,6 +36,7 @@
:prop="v.prop" :prop="v.prop"
:label="v.label" :label="v.label"
:align="v.align || 'left'" :align="v.align || 'left'"
:width="v.width"
></el-table-column> ></el-table-column>
</el-table> </el-table>
<el-table <el-table
...@@ -59,29 +60,11 @@ export default { ...@@ -59,29 +60,11 @@ export default {
serviceSteps, serviceSteps,
}, },
props: { props: {
url: { data: {
type: String, type: Array,
required: true, required: true,
}, },
}, },
data: () => ({
data: null,
}),
methods: {
init() {
this.$http
.get("/static/serviceInfo.json")
.then((response) => {
this.data = response.body[this.url].detail;
})
.catch(function(error) {
console.log(error);
});
},
},
mounted() {
this.init();
},
}; };
</script> </script>
......
src/components/service-tabs/service-tab-provider.vue
View file @ 95488142
<template> <template>
<div class="service_tab-provider" v-if="data"> <div class="service_tab-provider" v-if="data">
<div class="provider-left"> <div class="provider-left">
<el-avatar shape="square" :size="156" fit="cover" :src="data.img" /> <el-avatar
shape="square"
:size="156"
fit="cover"
:src="data.picture_path"
/>
</div> </div>
<div class="provider-right"> <div class="provider-right">
<p class="provider_name" v-text="data.provider"></p> <p class="provider_name" v-text="data.organization_name"></p>
<div class="provider_info"> <div class="provider_info">
<p> <p>
<span>联系人：</span> <span>联系人：</span>
<span v-text="data.person"></span> <span v-text="data.user_name"></span>
</p> </p>
<p> <p>
<span>联系电话：</span> <span>联系电话：</span>
...@@ -22,29 +27,11 @@ ...@@ -22,29 +27,11 @@
<script> <script>
export default { export default {
props: { props: {
url: { data: {
type: String, type: Object,
required: true, required: true,
}, },
}, },
data: () => ({
data: null,
}),
methods: {
init() {
this.$http
.get("/static/serviceInfo.json")
.then((response) => {
this.data = response.body[this.url].provider;
})
.catch(function(error) {
console.log(error);
});
},
},
mounted() {
this.init();
},
}; };
</script> </script>
......
src/components/service-tabs/service-tab-specification.vue
View file @ 95488142
...@@ -5,8 +5,9 @@ ...@@ -5,8 +5,9 @@
<type-group v-model="type" :types="types"></type-group> <type-group v-model="type" :types="types"></type-group>
</div> </div>
<el-table class="specification_table" :data="tableData" :border="false"> <el-table class="specification_table" :data="tableData" :border="false">
<el-table-column prop="gg" label="规格" width="360"></el-table-column> <el-table-column width="30"></el-table-column>
<el-table-column prop="ggsm" label="规格说明"></el-table-column> <el-table-column prop="name" label="规格" width="360"></el-table-column>
<el-table-column prop="descript" label="规格说明"></el-table-column>
</el-table> </el-table>
</div> </div>
</template> </template>
...@@ -19,45 +20,29 @@ export default { ...@@ -19,45 +20,29 @@ export default {
typeGroup, typeGroup,
}, },
props: { props: {
url: { data: {
type: String, type: Array,
required: true, required: true,
}, },
}, },
data: () => ({ data: () => ({
data: null, type: 1,
type: "", types: [
types: [], {
name: "按月",
value: 1,
},
{
name: "按年",
value: 2,
},
],
}), }),
computed: { computed: {
tableData() { tableData() {
return this.types.length > 0 ? this.data[this.type].data : []; return this.data.filter((item) => item.type === this.type);
}, },
}, },
methods: {
init() {
this.$http
.get("/static/serviceInfo.json")
.then((response) => {
this.data = response.body[this.url].specification;
this.types = this.data.map((item, index) => ({
name: item.name,
value: index,
}));
if (this.types.length) {
this.type = 0;
}
})
.catch(function(error) {
console.log(error);
});
},
},
mounted() {
this.init();
},
}; };
</script> </script>
......
src/components/service-tabs/service-tabs.vue
View file @ 95488142
...@@ -5,28 +5,31 @@ ...@@ -5,28 +5,31 @@
v-model="tabName" v-model="tabName"
:stretch="true" :stretch="true"
> >
<!-- 服务详情信息 --> <!-- 服务详情信息 -->
<el-tab-pane :label="detailTitle" name="detail" v-if="detailUrl"> <el-tab-pane :label="detailTitle" name="detail" v-if="detailData">
<service-tab-detail <service-tab-detail
class="service_info" class="service_info"
:url="detailUrl" :data="detailData"
></service-tab-detail> ></service-tab-detail>
</el-tab-pane> </el-tab-pane>
<!-- 规格定价 --> <!-- 规格定价 -->
<el-tab-pane :label="specificationTitle" name="specification" v-if="specificationUrl"> <el-tab-pane
:label="specificationTitle"
name="specification"
v-if="specificationData"
>
<service-tab-specification <service-tab-specification
class="service_info" class="service_info"
:url="specificationUrl" :data="specificationData"
></service-tab-specification> ></service-tab-specification>
</el-tab-pane> </el-tab-pane>
<!-- 提供机构 --> <!-- 提供机构 -->
<el-tab-pane :label="providerTitle" name="provider" v-if="providerUrl"> <el-tab-pane :label="providerTitle" name="provider" v-if="providerData">
<service-tab-provider <service-tab-provider
class="service_info" class="service_info"
:url="providerUrl" :data="providerData"
></service-tab-provider> ></service-tab-provider>
</el-tab-pane> </el-tab-pane>
...@@ -34,10 +37,10 @@ ...@@ -34,10 +37,10 @@
<el-tab-pane :label="commentsTitle" name="comments" v-if="commentsUrl"> <el-tab-pane :label="commentsTitle" name="comments" v-if="commentsUrl">
<service-tab-comments <service-tab-comments
class="service_info" class="service_info"
:data="commentsData"
:url="commentsUrl" :url="commentsUrl"
></service-tab-comments> ></service-tab-comments>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</template> </template>
...@@ -71,21 +74,25 @@ export default { ...@@ -71,21 +74,25 @@ export default {
type: String, type: String,
default: () => "服务评价信息", default: () => "服务评价信息",
}, },
detailUrl: { detailData: {
type: String, type: Array,
default: () => "", default: () => [],
}, },
specificationUrl: { specificationData: {
type: String, type: Array,
default: () => "", default: () => [],
}, },
providerUrl: { providerData: {
type: String, type: Object,
default: () => "", default: () => {},
},
commentsData: {
type: Object,
default: () => {},
}, },
commentsUrl: { commentsUrl: {
type: String, type: String,
default: () => "", default: () => [],
}, },
}, },
data: () => ({ data: () => ({
......
src/pages/service_shop/sjfwDetail.vue
View file @ 95488142
...@@ -3,20 +3,21 @@ ...@@ -3,20 +3,21 @@
<div class="apass_breadcrumb"> <div class="apass_breadcrumb">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item> <el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
<el-breadcrumb-item to="/shop/data_service_list"> <el-breadcrumb-item to="/shop/data_service_list/5">
数据服务 数据服务
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item>服务详情信息</el-breadcrumb-item> <el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<service-info :data="baseInfo"></service-info> <service-info :data="baseInfo" v-if="baseInfo"></service-info>
<service-tabs <service-tabs
detail-url="sjfw" :detail-data="detailData"
specification-url="sjfw" :specification-data="specificationData"
provider-url="sjfw" :provider-data="providerData"
comments-url="sjfw" :comments-data="commentsData"
:comments-url="commentsUrl"
></service-tabs> ></service-tabs>
</div> </div>
</template> </template>
...@@ -33,24 +34,157 @@ export default { ...@@ -33,24 +34,157 @@ export default {
data: () => ({ data: () => ({
baseInfo: null, baseInfo: null,
detailData: null, detailData: null,
specification: null, specificationData: null,
provider: null, providerData: null,
commentsData: null,
}), }),
computed: { computed: {
id() { id() {
return this.$route.params.id; return this.$route.params.id;
}, },
commentsUrl() {
return `/apaas/serviceapp/v3/servicemarket/estimates?serviceId=${this.id}`;
},
}, },
methods: { methods: {
init() { init() {
this.$http this.$http
.get("/apaas/serviceapp/v3/servicemarket/detail", { .get("/apaas/serviceapp/v3/servicemarket/detail", {
params: { params: {
serviceId: 666, serviceId: this.id,
}, },
}) })
.then((response) => { .then(({ data }) => {
console.log(response.data); let datas = data.data;
let specificationData = datas.serviceRequestSpcs.map((item) => ({
id: item.id,
type: item.type,
name: `访问次数：${item.pv}/日 访问量：${item.count}/日`,
descript: item.des,
}));
this.baseInfo = {
service_id: this.id,
app_id: 0,
name: datas.name,
// type: "",
openness: datas.openness,
view_count: datas.view_count,
apply_count: datas.apply_count,
// cover: "",
organization_name: datas.organization_name,
create_time: datas.create_time,
update_date: datas.update_date,
sectors_name: datas.sectors_name,
data_service_type3_str: datas.data_service_type3_str,
descript: datas.descript,
serviceRequestSpcs: specificationData,
};
this.detailData = [
{
name: "获取流程",
type: "step",
value: ["服务申请", "信息填写", "审核确认", "服务获取"],
},
{
name: "服务描述",
type: "text",
value: datas.descript,
},
{
name: "请求方式",
type: "text",
value: ["-", "GET", "POST", "PUT", "DELETE"][datas.req_type || 0],
},
{
name: "编码格式",
type: "text",
value: datas.encode_method,
},
{
name: "请求参数",
type: "table",
value: {
datas: JSON.parse(datas.req_fields),
columns: [
{
prop: "name",
label: "字段编码",
align: "center",
width: 240,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 180,
},
{
prop: "field_type",
label: "字段类型",
align: "center",
width: 180,
},
{
prop: "descript",
label: "字段说明",
},
{
prop: "is_must",
label: "是否必须",
align: "center",
width: 180,
},
{
prop: "example",
label: "示例值",
align: "center",
width: 180,
},
],
},
},
{
name: "响应参数",
type: "table",
value: {
datas: JSON.parse(datas.res_fields),
columns: [
{
prop: "name",
label: "字段编码",
align: "center",
width: 240,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 180,
},
{
prop: "field_type",
label: "字段类型",
align: "center",
width: 180,
},
{
prop: "descript",
label: "字段说明",
},
],
},
},
];
this.specificationData = specificationData;
this.providerData = {
organization_name: datas.organization_name,
picture_path: datas.picture_path,
user_name: "张先生",
phone: "010-66666666",
};
this.commentsData = datas.scoreDetail;
}) })
.catch(function(error) { .catch(function(error) {
console.log(error); console.log(error);
......
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