From 005a042e41fc57c732faa1715cb5e2cbf3293cda Mon Sep 17 00:00:00 2001 From: xuyiming Date: Sat, 9 May 2020 18:28:24 +0800 Subject: [PATCH] add page --- src/pages/sjfwDetail.vue | 70 +++++++--------- src/pages/skfwDetail.vue | 73 +++++++---------- src/pages/yysdDetail.vue | 67 +++++++++++++++ src/pages/zhyyfwDetail.vue | 72 +++++++---------- src/router/index.js | 5 ++ static/serviceDetail.json | 161 +++++++++++++++++++++++++++++++++++++ 6 files changed, 314 insertions(+), 134 deletions(-) create mode 100644 src/pages/yysdDetail.vue create mode 100644 static/serviceDetail.json diff --git a/src/pages/sjfwDetail.vue b/src/pages/sjfwDetail.vue index 05114e4..20d32a6 100644 --- a/src/pages/sjfwDetail.vue +++ b/src/pages/sjfwDetail.vue @@ -24,51 +24,35 @@ export default { serviveContent, }, data: () => ({ - serviceData: { - 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, + serviceData: 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/serviceDetail.json`).then( + ({ sjfw }) => { + this.serviceData = sjfw; }, - ], + (error) => { + console.log(error); + } + ); }, - }), - methods: {}, - mounted() {}, + }, + mounted() { + this.init(); + }, }; diff --git a/src/pages/skfwDetail.vue b/src/pages/skfwDetail.vue index fc5f441..f633258 100644 --- a/src/pages/skfwDetail.vue +++ b/src/pages/skfwDetail.vue @@ -24,54 +24,35 @@ export default { serviveContent, }, data: () => ({ - serviceData: { - 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, + serviceData: 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/serviceDetail.json`).then( + ({ skfw }) => { + this.serviceData = skfw; }, - ], + (error) => { + console.log(error); + } + ); }, - }), - mounted() {}, - methods: {}, + }, + mounted() { + this.init(); + }, }; diff --git a/src/pages/yysdDetail.vue b/src/pages/yysdDetail.vue new file mode 100644 index 0000000..0a41144 --- /dev/null +++ b/src/pages/yysdDetail.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/src/pages/zhyyfwDetail.vue b/src/pages/zhyyfwDetail.vue index 774781c..e002ea2 100644 --- a/src/pages/zhyyfwDetail.vue +++ b/src/pages/zhyyfwDetail.vue @@ -24,53 +24,35 @@ export default { serviveContent, }, data: () => ({ - serviceData: { - 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, + serviceData: 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/serviceDetail.json`).then( + ({ zhyyfw }) => { + this.serviceData = zhyyfw; }, - ], + (error) => { + console.log(error); + } + ); }, - }), - mounted() {}, - methods: {}, + }, + mounted() { + this.init(); + }, }; diff --git a/src/router/index.js b/src/router/index.js index 2f6c1b0..c26d8d1 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -97,6 +97,11 @@ export default new Router({ name: "zhyyfwDetail", component: () => import("@/pages/zhyyfwDetail"), }, // 综合应用服务详情 + { + path: "/yysdDetail", + name: "yysdDetail", + component: () => import("@/pages/yysdDetail"), + }, // 应用详情 { path: "/workplace", name: "workPlace", diff --git a/static/serviceDetail.json b/static/serviceDetail.json new file mode 100644 index 0000000..1375346 --- /dev/null +++ b/static/serviceDetail.json @@ -0,0 +1,161 @@ +{ + "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": { + "name": "mapvideos V1.0", + "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 + } + ] + } +} -- 2.26.0