Skip to content

A
apaas-ui
Commit 4f7d9b0f authored by 张俊's avatar 张俊
Browse files
Options

Merge branch 'dev' of cloud.wodcloud.com:apaas/apaas-v3-ui into dev

parents 07975c81 107005a7
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2057 additions and 438 deletions
src/components/application-info.vue 0 → 100644
View file @ 4f7d9b0f
<template>
<div class="application_info" v-if="data">
<div class="application_title">
<span class="application_name" v-text="data.name"></span>
</div>
<div class="main_container">
<div class="main_container-left" v-if="data.img">
<img :src="data.img" width="460" />
</div>
<div class="main_container-right">
<ul class="application_base_info">
<li>
<span>应用开发者：</span>
<span v-text="data.providedBy"> </span>
</li>
<li>
<span>上线时间：</span>
<span v-text="data.publishTime"></span>
</li>
<li>
<span>部署次数：</span>
<span v-text="data.acquireCount"></span>
</li>
<li>
<span>应用类型：</span>
<span v-html="data.serviceType"></span>
</li>
<li>
<span>业务领域：</span>
<span v-text="data.dataField"></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'
"
@click="changeSpecification(item)"
>
{{ item.name }}
</el-button>
</div>
</div>
<div class="commodity_action">
<el-button type="warning" plain @click="addToCart">
加入购物车
</el-button>
<el-button type="warning" @click="applyImmediately">
立即申请
</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: () => null,
},
},
data: () => ({
commodityData: {
specification: 0,
},
}),
computed: {
specificationDescription() {
let obj =
this.data.specifications[this.commodityData.specification] || {};
return obj.description || "";
},
},
methods: {
changeSpecification({ value }) {
this.commodityData.specification = value;
},
addToCart() {
console.log("addToCart");
console.log(this.commodityData);
},
applyImmediately() {
console.log("applyImmediately");
console.log(this.commodityData);
},
},
};
</script>
<style scoped>
.application_info {
padding: 20px;
background-color: #fff;
margin-bottom: 20px;
}
.main_container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 25px;
}
.main_container-left {
padding: 3px;
background-color: #f9fafc;
margin-right: 30px;
}
.main_container-right {
flex-grow: 1;
}
.application_title {
display: flex;
justify-content: flex-start;
align-items: center;
}
.application_title > .application_name {
font-size: 22px;
font-weight: bold;
color: #0d1847;
line-height: 36px;
}
.application_base_info {
padding: 18px;
background-color: #f9fafc;
}
.application_base_info > li,
.commodity_information {
display: flex;
justify-content: flex-start;
align-items: flex-start;
font-size: 14px;
color: #242c43;
line-height: 20px;
}
.application_base_info > li:not(:first-child) {
margin-top: 18px;
}
.application_base_info > li > span:first-child,
.commodity_information > span:first-child {
flex-shrink: 0;
white-space: nowrap;
color: #8890a7;
}
.application_base_info > li > span:nth-child(2) {
color: #242c43;
}
.commodity_information {
margin-top: 30px;
}
.commodity_information > span:nth-child(2) {
color: #58617a;
}
.commodity_information > span:first-child {
line-height: 40px;
}
.commodity_information > .commodity_text {
flex-grow: 1;
padding: 13px 18px;
background-color: #f9fafc;
border-radius: 5px;
}
.commodity_information > .btn_container {
margin-bottom: -15px;
}
.commodity_information > .btn_container > .el-button,
.commodity_information > .btn_container > .el-input-number {
margin: 0 20px 15px 0;
}
.commodity_action {
margin-top: 50px;
text-align: right;
}
.commodity_action > .el-button {
width: 220px;
margin-left: 20px;
}
.application_info .el-button--primary {
background-color: #515fe7;
border-color: #515fe7;
}
.application_info .el-button--warning.is-plain {
background-color: #fcefd6;
border-color: #fac266;
color: #e56600;
}
.application_info .el-button--warning {
background-color: #e56600;
border-color: #e56600;
}
</style>
src/components/comments-list.vue
View file @ 4f7d9b0f
......@@ -55,6 +55,7 @@ export default {
flex-shrink: 0;
padding-top: 5px;
margin-right: 27px;
margin-left: 10px;
}
.comment-right {
font-size: 16px;
......
src/components/comments-pagination.vue 0 → 100644
View file @ 4f7d9b0f
<template>
<div class="comments_pagination">
<div class="total_info">
<span>{{ `共${total}个条目` }}</span>
</div>
<div class="page_size_action">
<span>每页行数：</span>
<el-select :value="pageSize" @change="sizeChange">
<el-option
v-for="item in pageSizes"
:label="item"
:value="item"
:key="item"
></el-option>
</el-select>
</div>
<div class="page_action">
<a :class="{ disabled: preDisabled }" @click.prevent="prePage">
<i class="el-icon-arrow-left"></i>
</a>
<span>{{ `第${currentPage}页 / 共${totalPages}页` }}</span>
<a :class="{ disabled: nextDisabled }" @click.prevent="nextPage">
<i class="el-icon-arrow-right"></i>
</a>
</div>
</div>
</template>
<script>
export default {
props: {
total: {
type: Number,
required: true,
},
pageSizes: {
type: Array,
required: true,
},
pageSize: {
type: Number,
required: true,
},
currentPage: {
type: Number,
required: true,
},
},
data: () => ({}),
computed: {
totalPages() {
return Math.ceil(this.total / this.pageSize);
},
preDisabled() {
return this.currentPage === 1;
},
nextDisabled() {
return this.currentPage === this.totalPages;
},
},
methods: {
sizeChange(value) {
this.$emit("size-change", value);
},
prePage() {
if (this.preDisabled) {
return;
}
this.$emit("current-change", this.currentPage - 1);
},
nextPage() {
if (this.nextDisabled) {
return;
}
this.$emit("current-change", this.currentPage + 1);
},
},
};
</script>
<style scoped>
.comments_pagination {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;
line-height: 25px;
color: #333;
}
.total_info {
flex-grow: 1;
}
.page_size_action {
margin-left: 50px;
}
.page_size_action > .el-select {
width: 70px;
}
.page_action {
user-select: none;
margin-left: 50px;
}
.page_action > a {
cursor: pointer;
}
.page_action > a > i {
font-weight: bold;
}
.page_action > a.disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>
<style>
.page_size_action > .el-select .el-input__inner,
.page_size_action > .el-select .el-input.is-focus .el-input__inner {
border: 1px solid #fff;
}
</style>
src/components/commodity-card.vue
View file @ 4f7d9b0f
......@@ -14,7 +14,7 @@
</div>
<div class="com_card_btn">
<el-button size="small">加入购物车</el-button>
<el-button size="small">查看详情</el-button>
<el-button size="small" @click="goUrl(cellData.id)">查看详情</el-button>
</div>
</div>
</template>
......@@ -32,7 +32,7 @@ export default {
methods: {
goUrl(parame) {
if (this.url != "") {
this.$router.push(this.url + parame);
this.$router.push(this.url + "/" + parame);
}
}
},
......@@ -42,11 +42,10 @@ export default {
<style scoped>
.com_card {
width: 200px;
width: 290px;
height: 300px;
padding: 10px;
background-color: #ddd;
margin: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
......
src/components/commodity-cell.vue
View file @ 4f7d9b0f
......@@ -67,7 +67,7 @@ export default {
methods: {
goUrl(parame) {
if (this.url != "") {
this.$router.push(this.url + parame);
this.$router.push(this.url + "/" + parame);
}
}
},
......@@ -149,12 +149,14 @@ export default {
padding: 1px 8px 2px;
font-size: 12px;
font-weight: 500;
line-height: 12px;
border-radius: 15px;
position: relative;
top: -2px;
}
.map_service {
background-color: #626DE9;
border: solid 1px #626DE9;
color: #fff;
}
.shared {
......
src/components/commodity-list.vue
View file @ 4f7d9b0f
......@@ -2,8 +2,12 @@
<div>
<div v-if="name=='应用商店'" ref="commodityList" class="commodity_card">
<div ref="commodityCardIn" class="commodity_card_list">
<commodity-card v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-card>
<commodity-card v-for="item in datas" :cellData="item" :url="url" :key="'s' + item.id"></commodity-card>
<div v-for="item in datas" :key="item.id" class="commodity_card_item">
<commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
</div>
<div v-for="item in datas" :key="'s' + item.id" class="commodity_card_item">
<commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
</div>
</div>
</div>
<div v-else class="commodity_cell">
......@@ -115,11 +119,13 @@ export default {
this.pagination.total = this.datas.length;
},
pageResize() {
let listWidth = this.$refs.commodityList.clientWidth;
let rowCardNum = Math.floor(listWidth / 220);
this.$refs.commodityCardIn.style.width = rowCardNum * 220 + "px";
this.$refs.commodityCardIn.style.marginLeft =
(listWidth - rowCardNum * 220) / 2 + "px";
let listWidth = this.$refs.commodityCardIn.clientWidth;
let rowCardNum = Math.floor(listWidth / 310);
let cardArr = this.$refs.commodityCardIn.children;
console.log(rowCardNum, listWidth / rowCardNum);
for (let i = 0; i < cardArr.length; i++) {
cardArr[i].style.width = (listWidth / rowCardNum) - 1 + "px";
}
console.log(this.$refs.commodityCardIn);
}
},
......@@ -166,9 +172,16 @@ export default {
.commodity_card {
}
.commodity_card_list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.commodity_card_item {
margin: 10px 0;
}
.commodity_card_item_in {
margin: 0 auto;
}
</style>
<style>
.com_page_control .el-button {
......
src/components/service-info.vue
View file @ 4f7d9b0f
<template>
<div class="sevice_info" v-if="serviceData">
<div class="service_info" v-if="data">
<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_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_access_info">
<img :src="require('@/assets/imgs/icon_liulan.png')" />
<span v-text="'浏览次数：' + serviceData.viewCount"></span>
<span v-text="'浏览次数：' + data.viewCount"></span>
</span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_huoqu.png')" />
<span v-text="'获取次数：' + serviceData.acquireCount"></span>
<span v-text="'获取次数：' + data.acquireCount"></span>
</span>
</div>
<div class="main_container">
<div class="main_container-left" v-if="serviceData.img">
<img :src="serviceData.img" width="460" />
<div class="main_container-left" v-if="data.img">
<img :src="data.img" width="460" />
</div>
<div class="main_container-right">
<ul class="service_base_info">
<li>
<span>提供机构：</span>
<span v-text="serviceData.providedBy"> </span>
<span v-text="data.providedBy"> </span>
</li>
<li>
<span>发布时间：</span>
<span v-text="serviceData.publishTime"></span>
<span v-text="data.publishTime"></span>
</li>
<li>
<span>更新时间：</span>
<span v-text="serviceData.updatedTime"></span>
<span v-text="data.updatedTime"></span>
</li>
<li>
<span>数据领域：</span>
<span v-text="serviceData.dataField"></span>
<span v-text="data.dataField"></span>
</li>
<li>
<span>服务类型：</span>
<span v-html="serviceData.serviceType.join('&emsp;')"></span>
<span v-html="data.serviceType"></span>
</li>
<li>
<span>资源摘要：</span>
<span v-text="serviceData.resourceSummary"></span>
<span v-text="data.resourceSummary"></span>
</li>
</ul>
<div class="commodity_information">
<span>规&emsp;&emsp;格：</span>
<div class="btn_container">
<el-button
v-for="(item, index) in serviceData.specifications"
v-for="(item, index) in data.specifications"
:key="'specifications_' + index"
:type="
item.value === commodityData.specification
......@@ -73,7 +69,7 @@
<span>购买方式：</span>
<div class="btn_container">
<el-button
v-for="(item, index) in serviceData.ways"
v-for="(item, index) in data.ways"
v-text="item.name"
:key="'way_' + index"
:type="item.value === commodityData.way ? 'primary' : 'default'"
......@@ -108,7 +104,7 @@
<script>
export default {
props: {
serviceData: {
data: {
type: Object,
default: () => null,
},
......@@ -123,7 +119,7 @@ export default {
computed: {
specificationDescription() {
let obj =
this.serviceData.specifications[this.commodityData.specification] || {};
this.data.specifications[this.commodityData.specification] || {};
return obj.description || "";
},
},
......@@ -147,7 +143,7 @@ export default {
</script>
<style scoped>
.sevice_info {
.service_info {
padding: 20px;
background-color: #fff;
margin-bottom: 20px;
......@@ -270,16 +266,16 @@ export default {
width: 220px;
margin-left: 20px;
}
.sevice_info .el-button--primary {
.service_info .el-button--primary {
background-color: #515fe7;
border-color: #515fe7;
}
.sevice_info .el-button--warning.is-plain {
.service_info .el-button--warning.is-plain {
background-color: #fcefd6;
border-color: #fac266;
color: #e56600;
}
.sevice_info .el-button--warning {
.service_info .el-button--warning {
background-color: #e56600;
border-color: #e56600;
}
......
src/components/service-step.vue → src/components/service-steps.vue
View file @ 4f7d9b0f
<template>
<div class="service_step">
<ul class="step_items">
<li class="step_item">
<div class="service_steps">
<ul class="steps_list">
<template v-for="(step, index) in data">
<li class="step_item" :key="'step_' + index">
<div class="step_icon">
<span>1</span>
<span v-text="index + 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>
</div>
<p class="step_title">审核确认</p>
</li>
<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>
<p class="step_title" v-text="step"></p>
</li>
<li
class="step_line"
:key="'step_line_' + index"
v-if="index + 1 < data.length"
></li>
</template>
</ul>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: ["服务申请", "信息填写", "审核确认", "服务获取"],
},
},
mounted() {},
};
</script>
<style scoped>
.service_step {
.service_steps {
min-height: 68px;
padding: 30px 0;
}
.service_step > .step_items {
.service_steps > .steps_list {
display: flex;
justify-content: center;
align-items: flex-start;
text-align: center;
}
.service_step .step_line {
.service_steps .step_line {
width: 168px;
border: 1px solid #c0c8f8;
margin: 33px 10px 0;
}
.service_step .step_item > .step_icon {
.service_steps .step_item > .step_icon {
width: 68px;
height: 68px;
background-color: #515fe7;
......@@ -61,7 +59,7 @@
font-weight: bold;
color: #fff;
}
.service_step .step_item > .step_title {
.service_steps .step_item > .step_title {
font-size: 16px;
line-height: 24px;
color: #242c43;
......
src/components/service-tab-comments.vue
View file @ 4f7d9b0f
<template>
<div class="service_tab-comments">
<div class="service_tab-comments" v-if="data">
<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"
<comments-list :data="data.list"></comments-list>
<comments-pagination
: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>
:page-sizes="pageSizes"
:page-size="pageSize"
:current-page="currentPage"
@size-change="changePageSize"
@current-change="changeCurrentPage"
></comments-pagination>
</div>
</template>
<script>
import commentsScore from "@/components/comments-score";
import commentsList from "@/components/comments-list";
import commentsPagination from "@/components/comments-pagination";
export default {
components: {
commentsScore,
commentsList,
commentsPagination,
},
props: {
data: {
type: Object,
url: {
type: String,
required: true,
},
},
data: () => ({}),
data: () => ({
data: null,
pageSizes: [10, 50, 100],
pageSize: 10,
currentPage: 1,
}),
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
changePageSize(value) {
this.pageSize = value;
this.currentPage = 1;
},
changeCurrentPage(value) {
this.currentPage = value;
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
init() {
this.$http
.get("/static/serviceInfo.json")
.then((response) => {
this.data = response.body[this.url].comments;
})
.catch(function(error) {
console.log(error);
});
},
},
created() {},
mounted() {
this.init();
},
};
</script>
<style scoped>
.comments_pages {
text-align: center;
margin-top: 20px;
.service_tab-comments > .comments_score,
.service_tab-comments > .comments_list {
padding: 0 30px;
}
.service_tab-comments > .comments_pagination {
margin-top: 60px;
}
</style>
src/components/service-tab-detail.vue
View file @ 4f7d9b0f
<template>
<ul class="service_tab-detail">
<ul class="service_tab-detail" v-if="data">
<li
class="detail-item"
v-for="(item, index) in data"
:key="'detail-' + index"
:key="'detail_' + index"
>
<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
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"
row-key="id"
default-expand-all
:border="false"
:data="item.value.datas"
......@@ -38,26 +33,50 @@
:align="v.align || 'left'"
></el-table-column>
</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>
</ul>
</template>
<script>
import serviceStep from "@/components/service-step";
import serviceSteps from "@/components/service-steps";
export default {
components: {
serviceStep,
serviceSteps,
},
props: {
data: {
type: Array,
url: {
type: String,
required: true,
},
},
data: () => ({}),
methods: {},
created() {},
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>
......@@ -76,7 +95,4 @@ export default {
line-height: 25px;
color: #242c43;
}
.detail-item .detail-table {
width: 100%;
}
</style>
src/components/service-tab-provider.vue
View file @ 4f7d9b0f
<template>
<div class="service_tab-provider">
<div class="service_tab-provider" v-if="data">
<div class="provider-left">
<el-avatar shape="square" :size="156" fit="cover" :src="data.img" />
</div>
......@@ -22,14 +22,29 @@
<script>
export default {
props: {
data: {
type: Object,
url: {
type: String,
required: true,
},
},
data: () => ({}),
methods: {},
created() {},
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-tab-specification.vue
View file @ 4f7d9b0f
<template>
<div class="service_tab-specification">
<div class="service_tab-specification" v-if="data">
<div class="specification_header">
<p>申请方式：</p>
<type-group v-model="type" :types="types"></type-group>
......@@ -19,12 +19,13 @@ export default {
typeGroup,
},
props: {
data: {
type: Array,
url: {
type: String,
required: true,
},
},
data: () => ({
data: null,
type: "",
types: [],
}),
......@@ -33,7 +34,13 @@ export default {
return this.types.length > 0 ? this.data[this.type].data : [];
},
},
mounted() {
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,
......@@ -42,6 +49,14 @@ export default {
if (this.types.length) {
this.type = 0;
}
})
.catch(function(error) {
console.log(error);
});
},
},
mounted() {
this.init();
},
};
</script>
......
src/components/service-tabs.vue
View file @ 4f7d9b0f
......@@ -2,35 +2,31 @@
<el-tabs
class="service_info_tab"
type="border-card"
v-model="serviceTabsActiveName"
v-model="tabName"
:stretch="true"
>
<el-tab-pane label="服务详情信息" name="first">
<el-tab-pane :label="detailTitle" name="detail" v-if="detailUrl">
<service-tab-detail
v-if="fwxqxx"
class="service_info"
:data="fwxqxx"
:url="detailUrl"
></service-tab-detail>
</el-tab-pane>
<el-tab-pane label="规格定价" name="second">
<el-tab-pane :label="specificationTitle" name="specification" v-if="specificationUrl">
<service-tab-specification
v-if="ggdj"
class="service_info"
:data="ggdj"
:url="specificationUrl"
></service-tab-specification>
</el-tab-pane>
<el-tab-pane label="提供机构" name="third">
<el-tab-pane :label="providerTitle" name="provider" v-if="providerUrl">
<service-tab-provider
v-if="tgjg"
class="service_info"
:data="tgjg"
:url="providerUrl"
></service-tab-provider>
</el-tab-pane>
<el-tab-pane label="服务评价信息" name="fourth">
<el-tab-pane :label="commentsTitle" name="comments" v-if="commentsUrl">
<service-tab-comments
v-if="ffpjxx"
class="service_info"
:data="ffpjxx"
:url="commentsUrl"
></service-tab-comments>
</el-tab-pane>
</el-tabs>
......@@ -50,50 +46,43 @@ export default {
serviceTabComments,
},
props: {
type: {
detailTitle: {
type: String,
required: true,
default: () => "服务详情信息",
},
specificationTitle: {
type: String,
default: () => "规格定价",
},
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);
});
});
providerTitle: {
type: String,
default: () => "提供机构",
},
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;
commentsTitle: {
type: String,
default: () => "服务评价信息",
},
(error) => {
console.log(error);
}
);
detailUrl: {
type: String,
default: () => "",
},
specificationUrl: {
type: String,
default: () => "",
},
providerUrl: {
type: String,
default: () => "",
},
commentsUrl: {
type: String,
default: () => "",
},
created() {
this.init();
},
data: () => ({
tabName: "detail",
}),
methods: {},
};
</script>
......@@ -107,6 +96,9 @@ export default {
padding: 35px 40px 40px;
box-sizing: border-box;
}
.service_tab-comments {
padding: 35px 20px 20px !important;
}
</style>
<style>
......@@ -149,7 +141,26 @@ export default {
.service_info_tab .el-table::before {
display: none;
}
.service_info_tab .el-table {
width: 100%;
}
.service_info_tab .el-table__row:nth-child(odd) td {
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>
src/components/shopping-cart/shopping-cart-cell.vue 0 → 100644
View file @ 4f7d9b0f
This diff is collapsed.
src/components/shopping-cart/shopping-cart-com.vue 0 → 100644
View file @ 4f7d9b0f
<template>
<div>
<div class="shopping_list shopping_list_all">
<div class="shopping_all_head">
<el-row>
<el-col :span="2" class="shopping_all_head_item">
<el-checkbox v-model="checkShopAll" @change="checkAll">全选</el-checkbox>
</el-col>
<el-col :span="9" class="shopping_all_head_item">服务信息</el-col>
<el-col :span="5" class="shopping_all_head_item">规格</el-col>
<el-col :span="4" class="shopping_all_head_item">数量</el-col>
<el-col :span="4" class="shopping_all_head_item">操作</el-col>
</el-row>
</div>
<ShoppingCartList
ref="shoppingList"
:checkShopAll="checkShopAll"
:list="list"
:checkList="checkList"
:readOnly="false"
@changeState="changeState"
class="shopping_all_list"
/>
</div>
<div class="shopping_list shopping_list_fail">
<div class="expired_service">已失效服务</div>
<ShoppingCartList :readOnly="true" class="shopping_all_list" />
</div>
<div class="shopping_list shopping_list_options">
<div class="shopping_cart_options">
<el-row>
<el-col :span="2" class="shopping_cart_options_cell">
<el-checkbox v-model="checkShopAll" @change="checkAll">全选</el-checkbox>
</el-col>
<el-col :span="3" class="shopping_cart_options_del">
<span v-if="getNum == 0" class="shopping_cart_options_del_service">删除选中服务</span>
<span
v-else
@click="delSelectService"
class="shopping_cart_options_del_service_act"
>删除选中服务</span>
</el-col>
<el-col :span="15" class="shopping_cart_options_num">
共 {{ checkList.length }} 项服务，已选择
<span>{{ getNum }}</span> 项
</el-col>
<el-col :span="4" class="shopping_cart_options_cell">
<el-button v-if="getNum == 0" :disabled="true" class="shopping_cart_options_cell_btn">一键申请</el-button>
<el-button v-else class="shopping_cart_options_cell_btn_act">一键申请</el-button>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
import ShoppingCartList from "@/components/shopping-cart/shopping-cart-list";
export default {
components: {
ShoppingCartList
},
props: {},
data: () => ({
checkShopAll: false,
checkList: [false, false, false],
list: [
{
id: 0,
name: "水路货物周转量情况",
type: "基础数据服务",
creator: "贵州省交通运输厅0",
state: 1,
mapService: 1
},
{
id: 1,
name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
type: "基础数据服务",
creator: "贵州省交通运输厅1",
state: 1
},
{
id: 2,
name: "水路货物周转量情况水路货物周转量情况",
type: "基础数据服务",
creator: "贵州省交通运输厅2",
state: 1,
mapService: 1
}
]
}),
mounted() {},
computed: {
getNum() {
let num = this.checkList.reduce(
(a, v) => (v === true ? a + 1 : a + 0),
0
);
return num;
}
},
methods: {
checkAll(val) {
this.$refs.shoppingList.setAllState(val);
},
changeState(val) {
console.log(val);
this.$set(this.checkList, val.index, val.state);
if (this.checkList.indexOf(false) == -1) {
this.checkShopAll = true;
} else {
this.checkShopAll = false;
}
},
delSelectService() {
this.checkList.forEach((item, index) => {
if (item === true) {
console.log(this.list[index]);
}
});
}
}
};
</script>
<style scoped>
.shopping_list {
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px #f4f7fc;
overflow: hidden;
margin-bottom: 20px;
}
.shopping_list_all {
}
.shopping_list_fail {
}
.shopping_list_options {
}
.shopping_all_list {
}
.shopping_fail_head {
background-color: #eff1f8;
height: 40px;
}
.shopping_options {
height: 84px;
}
.expired_service {
height: 48px;
font-size: 14px;
font-weight: 700;
padding: 10px 50px;
line-height: 28px;
background-color: #eff1f8;
}
.shopping_cart_options {
height: 80px;
padding: 0 20px;
font-weight: 700;
line-height: 80px;
}
.shopping_cart_options_cell {
text-align: center;
}
.shopping_cart_options_del {
}
.shopping_cart_options_del_service {
color: #c8d0e7;
}
.shopping_cart_options_del_service_act {
cursor: pointer;
color: #0f2683;
}
.shopping_cart_options_num {
text-align: right;
font-size: 14px;
font-weight: 500;
color: #58617a;
}
.shopping_cart_options_num span {
color: #e56600;
}
.shopping_cart_options_cell_btn {
width: 90%;
margin: 0 10%;
}
.shopping_cart_options_cell_btn_act {
width: 90%;
margin: 0 10%;
background-color: #e56600;
color: #fcefd6;
}
.shopping_all_head {
background-color: #e5f0ff;
height: 48px;
padding: 0 20px;
font-weight: 700;
line-height: 48px;
}
.shopping_all_head_item {
text-align: center;
}
.shopping_list_page {
padding: 10px 20px 0;
}
</style>
<style>
.shopping_cart_options_cell .el-checkbox {
font-weight: 700;
}
.shopping_cart_options_cell .el-checkbox__inner:hover {
border-color: #626de9;
}
.shopping_cart_options_cell .el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #626de9;
}
.shopping_cart_options_cell .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #626de9;
border-color: #626de9;
}
.shopping_cart_options_cell
.el-checkbox__input.is-checked
+ .el-checkbox__label {
color: #626de9;
}
.shopping_all_head_item .el-checkbox {
font-weight: 700;
}
.shopping_all_head_item .el-checkbox__inner:hover {
border-color: #626de9;
}
.shopping_all_head_item .el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #626de9;
}
.shopping_all_head_item .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #626de9;
border-color: #626de9;
}
.shopping_all_head_item .el-checkbox__input.is-checked + .el-checkbox__label {
color: #626de9;
}
</style>
src/components/shopping-cart/shopping-cart-list.vue 0 → 100644
View file @ 4f7d9b0f
<template>
<div>
<div class="shopping_list_page">
<ShoppingCartCell
v-for="(item, index) in list"
:cellItem="item"
:cellIndex="index"
:cellCheck="checkLists[index]"
:key="item.id"
:readOnly="readOnly"
@changeState="changeState"
/>
</div>
</div>
</template>
<script>
import ShoppingCartCell from "@/components/shopping-cart/shopping-cart-cell";
export default {
components: {
ShoppingCartCell
},
props: {
readOnly: {
type: Boolean,
default: false
},
checkShopAll: {
type: Boolean
},
list: {
type: Array
},
checkList: {
type: Array,
default: ()=> {[]}
}
},
watch: {
checkList: {
immediate: true, // 这句重要
handler(val) {
console.log("ss")
this.checkLists = val;
}
}
},
data: () => ({
checkedAll: false,
checkLists: []
}),
mounted() {},
methods: {
changeState(val) {
this.$emit("changeState", val);
},
setAllState(val) {
for (let i = 0; i < this.checkLists.length; i++) {
this.$set(this.checkLists, i, val)
}
}
}
};
</script>
src/pages/shop_list_app_store.vue
View file @ 4f7d9b0f
......@@ -5,7 +5,7 @@
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="应用商店" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
<service-list name="应用商店" url="yysdDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
</el-main>
</el-container>
</div>
......
src/pages/shop_list_comprehensive_app.vue
View file @ 4f7d9b0f
......@@ -5,7 +5,7 @@
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="综合应用" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
<service-list name="综合应用" url="zhyyfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
</el-main>
</el-container>
</div>
......
src/pages/shop_list_data.vue
View file @ 4f7d9b0f
......@@ -5,7 +5,7 @@
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="数据服务" url="sjfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
<service-list name="数据服务" url="sjfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
</el-main>
</el-container>
</div>
......
src/pages/shop_list_space_time.vue
View file @ 4f7d9b0f
......@@ -5,7 +5,7 @@
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="时空服务" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
<service-list name="时空服务" url="skfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
</el-main>
</el-container>
</div>
......
src/pages/shopping_cart.vue 0 → 100644
View file @ 4f7d9b0f
<template>
<div class="shopping">
<div class="shopping_title">我的购物车</div>
<ShoppingCart />
</div>
</template>
<script>
// @ is an alias to /src
import ShoppingCart from "@/components/shopping-cart/shopping-cart-com";
export default {
components: {
ShoppingCart
},
data: () => ({
datas: {}
}),
mounted() {},
methods: {}
};
</script>
<style scoped>
.shopping {
width: 1200px;
margin: 0 auto;
}
.shopping_title {
height: 40px;
line-height: 40px;
}
</style>
\ No newline at end of file
src/pages/sjfwDetail.vue
View file @ 4f7d9b0f
......@@ -8,9 +8,14 @@
</el-breadcrumb>
</div>
<service-info :service-data="serviceData"></service-info>
<service-info :data="baseInfo"></service-info>
<service-tabs type="sjfw"></service-tabs>
<service-tabs
detail-url="sjfw"
specification-url="sjfw"
provider-url="sjfw"
comments-url="sjfw"
></service-tabs>
</div>
</template>
......@@ -24,7 +29,10 @@ export default {
serviceTabs,
},
data: () => ({
serviceData: null,
baseInfo: null,
detailData: null,
specification: null,
provider: null,
}),
methods: {
getDataFromApi(_url) {
......@@ -40,9 +48,9 @@ export default {
});
},
init() {
this.getDataFromApi(`/static/serviceDetail.json`).then(
this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
({ sjfw }) => {
this.serviceData = sjfw;
this.baseInfo = sjfw;
},
(error) => {
console.log(error);
......
src/pages/skfwDetail.vue
View file @ 4f7d9b0f
......@@ -8,25 +8,28 @@
</el-breadcrumb>
</div>
<!-- <servive-commodity-info
:service-data="serviceData"
></servive-commodity-info>
<service-info :data="baseInfo"></service-info>
<servive-tabs-info type="sjfw"></servive-tabs-info> -->
<service-tabs
detail-url="skfw"
specification-url="skfw"
provider-url="skfw"
comments-url="skfw"
></service-tabs>
</div>
</template>
<script>
// import serviveCommodityInfo from "@/components/servive-commodity-info";
// import serviveTabsInfo from "@/components/servive-tabs-info";
import serviceInfo from "@/components/service-info";
import serviceTabs from "@/components/service-tabs";
export default {
components: {
// serviveCommodityInfo,
// serviveTabsInfo,
serviceInfo,
serviceTabs,
},
data: () => ({
serviceData: null,
baseInfo: null,
}),
methods: {
getDataFromApi(_url) {
......@@ -42,9 +45,9 @@ export default {
});
},
init() {
this.getDataFromApi(`/static/serviceDetail.json`).then(
this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
({ skfw }) => {
this.serviceData = skfw;
this.baseInfo = skfw;
},
(error) => {
console.log(error);
......
src/pages/yysdDetail.vue
View file @ 4f7d9b0f
......@@ -3,30 +3,37 @@
<div class="sevice_breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item>服务超市</el-breadcrumb-item>
<el-breadcrumb-item>数据服务</el-breadcrumb-item>
<el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
<el-breadcrumb-item>应用商店</el-breadcrumb-item>
<el-breadcrumb-item>应用详情信息</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!-- <servive-commodity-info
:service-data="serviceData"
></servive-commodity-info>
<application-info :data="baseInfo"></application-info>
<servive-tabs-info type="sjfw"></servive-tabs-info> -->
<service-tabs
detail-url="yysd"
provider-url="yysd"
comments-url="yysd"
detail-title="应用详情信息"
comments-title="应用评价信息"
></service-tabs>
</div>
</template>
<script>
// import serviveCommodityInfo from "@/components/servive-commodity-info";
// import serviveTabsInfo from "@/components/servive-tabs-info";
import applicationInfo from "@/components/application-info";
import serviceTabs from "@/components/service-tabs";
export default {
components: {
// serviveCommodityInfo,
// serviveTabsInfo,
applicationInfo,
serviceTabs,
},
data: () => ({
serviceData: null,
baseInfo: null,
detailData: null,
specification: null,
provider: null,
}),
methods: {
getDataFromApi(_url) {
......@@ -42,9 +49,9 @@ export default {
});
},
init() {
this.getDataFromApi(`/static/serviceDetail.json`).then(
this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
({ yysd }) => {
this.serviceData = yysd;
this.baseInfo = yysd;
},
(error) => {
console.log(error);
......
src/pages/zhyyfwDetail.vue
View file @ 4f7d9b0f
......@@ -8,25 +8,28 @@
</el-breadcrumb>
</div>
<!-- <servive-commodity-info
:service-data="serviceData"
></servive-commodity-info>
<service-info :data="baseInfo"></service-info>
<servive-tabs-info type="sjfw"></servive-tabs-info> -->
<service-tabs
detail-url="zhyyfw"
specification-url="zhyyfw"
provider-url="zhyyfw"
comments-url="zhyyfw"
></service-tabs>
</div>
</template>
<script>
// import serviveCommodityInfo from "@/components/servive-commodity-info";
// import serviveTabsInfo from "@/components/servive-tabs-info";
import serviceInfo from "@/components/service-info";
import serviceTabs from "@/components/service-tabs";
export default {
components: {
// serviveCommodityInfo,
// serviveTabsInfo,
serviceInfo,
serviceTabs,
},
data: () => ({
serviceData: null,
baseInfo: null,
}),
methods: {
getDataFromApi(_url) {
......@@ -42,9 +45,9 @@ export default {
});
},
init() {
this.getDataFromApi(`/static/serviceDetail.json`).then(
this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
({ zhyyfw }) => {
this.serviceData = zhyyfw;
this.baseInfo = zhyyfw;
},
(error) => {
console.log(error);
......
src/router/index.js
View file @ 4f7d9b0f
......@@ -111,25 +111,30 @@ export default new Router({
name: "shopAppStoreList",
component: () => import("@/pages/shop_list_app_store"),
},
{
path: "/shop/shopping_cart", // 购物车页
name: "shoppingCart",
component: () => import("@/pages/shopping_cart"),
},
],
},
{
path: "/sjfwDetail",
path: "/sjfwDetail/:id",
name: "sjfwDetail",
component: () => import("@/pages/sjfwDetail"),
}, // 数据服务详情
{
path: "/skfwDetail",
path: "/skfwDetail/:id",
name: "skfwDetail",
component: () => import("@/pages/skfwDetail"),
}, // 时空服务详情
{
path: "/zhyyfwDetail",
path: "/zhyyfwDetail/:id",
name: "zhyyfwDetail",
component: () => import("@/pages/zhyyfwDetail"),
}, // 综合应用服务详情
{
path: "/yysdDetail",
path: "/yysdDetail/:id",
name: "yysdDetail",
component: () => import("@/pages/yysdDetail"),
}, // 应用详情
......
static/serviceBaseInfo.json 0 → 100644
View file @ 4f7d9b0f
{
"sjfw": {
"name": "水路货物周转量情况",
"openLevel": "共享",
"viewCount": "99999",
"acquireCount": "9999",
"providedBy": "贵州省交通运输厅",
"publishTime": "2020-03-12 18:31:12",
"updatedTime": "2020-03-12 18:31:12",
"dataField": "经济建设",
"serviceType": "专题数据服务 企业专题数据服务",
"resourceSummary": "提供水路货物周转量排名和同比增长的专题数据服务",
"specifications": [
{
"name": "访问次数：20/日 访问量：100/日",
"value": 0,
"description": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
},
{
"name": "访问次数：200/日 访问量：1000/日",
"value": 1,
"description": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行200次免费访问，获取1000条数据记录。"
},
{
"name": "访问次数：无上限 访问量：无上限",
"value": 2,
"description": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行任意次免费访问，获取数据记录无上限。"
}
],
"ways": [
{
"name": "按月购买",
"value": 0
},
{
"name": "按年购买",
"value": 1
}
]
},
"skfw": {
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"name": "贵州应急资源地图微服务",
"type": "Map Service",
"openLevel": "共享",
"viewCount": "99999",
"acquireCount": "9999",
"providedBy": "贵州省应急管理厅",
"publishTime": "2020-03-12 18:31:12",
"updatedTime": "2020-03-12 18:31:12",
"dataField": "经济建设",
"serviceType": "时空云服务 专题地图服务",
"resourceSummary": "提供贵州应急资源空间分布展示的专题地图服务，与MO地图合作进行地图资源的摘录和某新服务。",
"specifications": [
{
"name": "访问次数：20/日 访问量：100/日",
"value": 0,
"description": "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问"
},
{
"name": "访问次数：200/日 访问量：1000/日",
"value": 1,
"description": "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问"
},
{
"name": "访问次数：无上限 访问量：无上限",
"value": 2,
"description": "用户服务申请通过审核确认后，每日可对应急地图进行免费访问"
}
],
"ways": [
{
"name": "按月购买",
"value": 0
},
{
"name": "按年购买",
"value": 1
}
]
},
"zhyyfw": {
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"name": "地图视频融合服务",
"openLevel": "共享",
"viewCount": "99999",
"acquireCount": "9999",
"providedBy": "北京比格数据",
"publishTime": "2020-03-12 18:31:12",
"updatedTime": "2020-03-12 18:31:12",
"dataField": "经济建设",
"serviceType": "综合应用服务",
"resourceSummary": "提供视频监控的空间分布展示和视频监控直播的服务，MOUMOU监控服务和直播服务的新服务。",
"specifications": [
{
"name": "访问次数：20/日 访问量：100/日",
"value": 0,
"description": "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问"
},
{
"name": "访问次数：200/日 访问量：1000/日",
"value": 1,
"description": "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问"
},
{
"name": "访问次数：无上限 访问量：无上限",
"value": 2,
"description": "用户服务申请通过审核确认后，每日可对应急地图进行免费访问"
}
],
"ways": [
{
"name": "按月购买",
"value": 0
},
{
"name": "按年购买",
"value": 1
}
]
},
"yysd": {
"img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"name": "mapvideos V1.0",
"providedBy": "北京比格数据",
"publishTime": "2020-03-12 18:31:12",
"acquireCount": "9999",
"serviceType": "综合应用服务",
"dataField": "经济建设",
"specifications": [
{
"name": "申请获取应用镜像部署权限",
"value": 0
},
{
"name": "申请获取应用二次开发权限（需要先行升级为开发者用户）",
"value": 1
}
]
}
}
static/serviceInfo.json
View file @ 4f7d9b0f
This diff is collapsed.
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