Skip to content

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

数据服务详情

parent 171e766e
Show 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 @@
:key="'comment_' + index"
>
<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 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">
<el-rate
:colors="['#e69232', '#e69232', '#e69232']"
:value="item.star"
:value="item.score"
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>
<p class="comment-description" v-text="item.content"></p>
<p class="comment-time" v-text="item.add_time"></p>
</div>
</li>
</ul>
......
src/components/service-info/service-info.vue
View file @ 95488142
......@@ -3,58 +3,57 @@
<div class="service_title">
<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_level" v-text="data.openLevel"></span>
<span
class="service_level"
v-text="['-', '共享', '受限', '敏感'][data.openness || 0]"
></span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_liulan.png')" />
<span v-text="'浏览次数：' + data.viewCount"></span>
<span v-text="'浏览次数：' + data.view_count"></span>
</span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_huoqu.png')" />
<span v-text="'获取次数：' + data.acquireCount"></span>
<span v-text="'获取次数：' + data.apply_count"></span>
</span>
</div>
<div class="main_container">
<div class="main_container-left" v-if="data.img">
<img :src="data.img" width="460" />
<div class="main_container-left" v-if="data.cover">
<img :src="data.cover" width="460" />
</div>
<div class="main_container-right">
<ul class="service_base_info">
<li>
<span>提供机构：</span>
<span v-text="data.providedBy"> </span>
<span v-text="data.organization_name"> </span>
</li>
<li>
<span>发布时间：</span>
<span v-text="data.publishTime"></span>
<span v-text="data.create_time"></span>
</li>
<li>
<span>更新时间：</span>
<span v-text="data.updatedTime"></span>
<span v-text="data.update_date"></span>
</li>
<li>
<span>数据领域：</span>
<span v-text="data.dataField"></span>
<span v-text="data.sectors_name"></span>
</li>
<li>
<span>服务类型：</span>
<span v-html="data.serviceType"></span>
<span v-text="data.data_service_type3_str"></span>
</li>
<li>
<span>资源摘要：</span>
<span v-text="data.resourceSummary"></span>
<span v-text="data.descript"></span>
</li>
</ul>
<div class="commodity_information">
<span>规&emsp;&emsp;格：</span>
<div class="btn_container">
<el-button
v-for="(item, index) in data.specifications"
:key="'specifications_' + index"
:type="
item.value === commodityData.specification
? 'primary'
: 'default'
"
v-for="(item, index) in specifications"
:key="'spcs_' + index"
:type="item.id === specification.id ? 'primary' : 'default'"
@click="changeSpecification(item)"
>
{{ item.name }}
......@@ -63,17 +62,17 @@
</div>
<div class="commodity_information">
<span>规格说明：</span>
<span class="commodity_text" v-text="specificationDescription"></span>
<span class="commodity_text" v-text="specification.descript"></span>
</div>
<div class="commodity_information">
<span>购买方式：</span>
<div class="btn_container">
<el-button
v-for="(item, index) in data.ways"
v-for="(item, index) in types"
v-text="item.name"
:key="'way_' + index"
:type="item.value === commodityData.way ? 'primary' : 'default'"
@click="changeWay(item)"
:key="'type_' + index"
:type="item.value === type ? 'primary' : 'default'"
@click="changeType(item)"
>
</el-button>
</div>
......@@ -81,11 +80,7 @@
<div class="commodity_information">
<span>购买时长：</span>
<div class="btn_container">
<el-input-number
v-model="commodityData.duration"
:min="1"
:max="12"
></el-input-number>
<el-input-number v-model="duration" :min="1"></el-input-number>
</div>
</div>
<div class="commodity_action">
......@@ -110,33 +105,82 @@ export default {
},
},
data: () => ({
commodityData: {
specification: 0,
way: 0,
duration: 1,
types: [
{
name: "按月",
value: 1,
},
{
name: "按年",
value: 2,
},
],
type: 1, // 购买方式 1：按月，2：按年
specification: {}, // 规格
duration: 1, // 时长
}),
computed: {
specificationDescription() {
let obj =
this.data.specifications[this.commodityData.specification] || {};
return obj.description || "";
specifications() {
let specifications = (this.data.serviceRequestSpcs || []).filter(
(item) => item.type == this.type
);
if (this.specification.id === undefined) {
this.specification = specifications[0];
}
return specifications;
},
},
watch: {
specifications: {
handler() {
this.specification = this.specifications[0];
},
deep: true,
},
},
methods: {
changeSpecification({ value }) {
this.commodityData.specification = value;
changeSpecification(specification) {
this.specification = specification;
},
changeWay({ value }) {
this.commodityData.way = value;
changeType({ value }) {
this.type = value;
},
addToCart() {
console.log("addToCart");
console.log(this.commodityData);
// console.log("addToCart");
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() {
console.log("applyImmediately");
console.log(this.commodityData);
},
},
};
......
src/components/service-tabs/service-tab-comments.vue
View file @ 95488142
<template>
<div class="service_tab-comments" v-if="data">
<comments-score :data="data.baseInfo"></comments-score>
<comments-list :data="data.list"></comments-list>
<div class="service_tab-comments">
<comments-score :data="scoreDetail"></comments-score>
<comments-list :data="commentsList"></comments-list>
<comments-pagination
:total="data.baseInfo.total"
:total="commentsTtotal"
:page-sizes="pageSizes"
:page-size="pageSize"
:current-page="currentPage"
......@@ -25,30 +25,66 @@ export default {
commentsPagination,
},
props: {
data: {
type: Object,
default: () => {},
},
url: {
type: String,
required: true,
},
},
data: () => ({
data: null,
commentsTtotal: 0,
commentsList: [],
pageSizes: [10, 50, 100],
pageSize: 10,
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: {
changePageSize(value) {
this.pageSize = value;
this.currentPage = 1;
this.init();
},
changeCurrentPage(value) {
this.currentPage = value;
this.init();
},
init() {
this.$http
.get("/static/serviceInfo.json")
.then((response) => {
this.data = response.body[this.url].comments;
.get(this.url, {
params: {
page: this.currentPage,
size: this.pageSize,
},
})
.then(({ data }) => {
this.commentsTtotal = data.total;
this.commentsList = data.data;
})
.catch(function(error) {
console.log(error);
......
src/components/service-tabs/service-tab-detail.vue
View file @ 95488142
......@@ -24,7 +24,7 @@
<el-table
v-else-if="item.type == 'table'"
class="detail-table"
row-key="id"
row-key="name"
default-expand-all
:border="false"
:data="item.value.datas"
......@@ -36,6 +36,7 @@
:prop="v.prop"
:label="v.label"
:align="v.align || 'left'"
:width="v.width"
></el-table-column>
</el-table>
<el-table
......@@ -59,29 +60,11 @@ export default {
serviceSteps,
},
props: {
url: {
type: String,
data: {
type: Array,
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>
......
src/components/service-tabs/service-tab-provider.vue
View file @ 95488142
<template>
<div class="service_tab-provider" v-if="data">
<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 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">
<p>
<span>联系人：</span>
<span v-text="data.person"></span>
<span v-text="data.user_name"></span>
</p>
<p>
<span>联系电话：</span>
......@@ -22,29 +27,11 @@
<script>
export default {
props: {
url: {
type: String,
data: {
type: Object,
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>
......
src/components/service-tabs/service-tab-specification.vue
View file @ 95488142
......@@ -5,8 +5,9 @@
<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-column width="30"></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>
</div>
</template>
......@@ -19,44 +20,28 @@ export default {
typeGroup,
},
props: {
url: {
type: String,
data: {
type: Array,
required: true,
},
},
data: () => ({
data: null,
type: "",
types: [],
type: 1,
types: [
{
name: "按月",
value: 1,
},
{
name: "按年",
value: 2,
},
],
}),
computed: {
tableData() {
return this.types.length > 0 ? this.data[this.type].data : [];
},
},
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);
});
},
return this.data.filter((item) => item.type === this.type);
},
mounted() {
this.init();
},
};
</script>
......
src/components/service-tabs/service-tabs.vue
View file @ 95488142
......@@ -5,28 +5,31 @@
v-model="tabName"
: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
class="service_info"
:url="detailUrl"
:data="detailData"
></service-tab-detail>
</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
class="service_info"
:url="specificationUrl"
:data="specificationData"
></service-tab-specification>
</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
class="service_info"
:url="providerUrl"
:data="providerData"
></service-tab-provider>
</el-tab-pane>
......@@ -34,10 +37,10 @@
<el-tab-pane :label="commentsTitle" name="comments" v-if="commentsUrl">
<service-tab-comments
class="service_info"
:data="commentsData"
:url="commentsUrl"
></service-tab-comments>
</el-tab-pane>
</el-tabs>
</template>
......@@ -71,21 +74,25 @@ export default {
type: String,
default: () => "服务评价信息",
},
detailUrl: {
type: String,
default: () => "",
detailData: {
type: Array,
default: () => [],
},
specificationUrl: {
type: String,
default: () => "",
specificationData: {
type: Array,
default: () => [],
},
providerUrl: {
type: String,
default: () => "",
providerData: {
type: Object,
default: () => {},
},
commentsData: {
type: Object,
default: () => {},
},
commentsUrl: {
type: String,
default: () => "",
default: () => [],
},
},
data: () => ({
......
src/pages/service_shop/sjfwDetail.vue
View file @ 95488142
......@@ -3,20 +3,21 @@
<div class="apass_breadcrumb">
<el-breadcrumb separator="/">
<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>
</div>
<service-info :data="baseInfo"></service-info>
<service-info :data="baseInfo" v-if="baseInfo"></service-info>
<service-tabs
detail-url="sjfw"
specification-url="sjfw"
provider-url="sjfw"
comments-url="sjfw"
:detail-data="detailData"
:specification-data="specificationData"
:provider-data="providerData"
:comments-data="commentsData"
:comments-url="commentsUrl"
></service-tabs>
</div>
</template>
......@@ -33,24 +34,157 @@ export default {
data: () => ({
baseInfo: null,
detailData: null,
specification: null,
provider: null,
specificationData: null,
providerData: null,
commentsData: null,
}),
computed: {
id() {
return this.$route.params.id;
},
commentsUrl() {
return `/apaas/serviceapp/v3/servicemarket/estimates?serviceId=${this.id}`;
},
},
methods: {
init() {
this.$http
.get("/apaas/serviceapp/v3/servicemarket/detail", {
params: {
serviceId: 666,
serviceId: this.id,
},
})
.then((response) => {
console.log(response.data);
.then(({ 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) {
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