@@ -9,12 +9,18 @@ export const getRegisterArea = p => get("/registerArea/getRegisterArea", p); | |||
// 提交入驻申请单 | |||
export const submitRequestNote = p => post("/settledRequestNote/save", p); | |||
// 园区服务产品列表筛选数据 | |||
export const getParkServiceProductFilterData = p => get("/parkServiceProduct/getFilterData", p) | |||
// 园区服务产品列表 | |||
export const getParkServiceProduct = p => get("/parkServiceProduct/page", p); | |||
// 园区服务产品详情 | |||
export const getByIdServiceProduct = p => get("/parkServiceProduct/getById", p); | |||
// 物业管理(招商载体)产品列表筛选数据 | |||
export const getPropertyFilterData = p => get("/propertyManagement/getFilterData", p); | |||
// 物业管理产品列表 | |||
export const getPropertyManage = p => get("/propertyManagement/page", p); | |||
@@ -54,7 +54,7 @@ export default { | |||
}, | |||
{ | |||
name: "招商服务", | |||
path: "/service", | |||
path: "/investment-service", | |||
}, | |||
{ | |||
name: "园区企业", |
@@ -46,7 +46,7 @@ export default { | |||
}, | |||
{ | |||
name: "招商服务", | |||
path: "/service", | |||
path: "/investment-service", | |||
}, | |||
{ | |||
name: "园区企业", |
@@ -2,12 +2,14 @@ | |||
import index from "./modules/index"; | |||
// 登录页 | |||
import login from './modules/login'; | |||
// 产品相关 | |||
import product from './modules/product'; | |||
// 物业相关 | |||
import property from './modules/property'; | |||
// // 产品相关 | |||
// import product from './modules/product'; | |||
// // 物业相关 | |||
// import property from './modules/property'; | |||
// 我的相关 | |||
import myRelated from './modules/my-related'; | |||
// 招商服务 | |||
import investmentService from './modules/investment-service'; | |||
export default [ | |||
{ | |||
path: "*", | |||
@@ -15,7 +17,6 @@ export default [ | |||
}, | |||
...index, | |||
...login, | |||
...product, | |||
...property, | |||
...myRelated, | |||
...investmentService, | |||
]; |
@@ -0,0 +1,50 @@ | |||
/** | |||
* | |||
* 招商服务 | |||
* | |||
*/ | |||
export default [ | |||
// 招商服务 | |||
{ | |||
path: "/investment-service", | |||
name: "InvestmentService", | |||
component: () => | |||
import("../../views/investment-service/InvestmentService.vue"), | |||
redirect: "/investment-service/product-list", | |||
children: [ | |||
// 产品列表 | |||
{ | |||
path: "/investment-service/product-list", | |||
name: "ProductList", | |||
component: () => | |||
import("../../views/investment-service/InvestmentServiceList/InvestmentServiceList.vue"), | |||
meta: { | |||
title: "园区服务", | |||
}, | |||
}, | |||
// 产品详情 | |||
{ | |||
path: "/investment-service/product-detail", | |||
name: "ProductDetail", | |||
component: () => | |||
import("../../views/investment-service/product-detail/ProductDetail.vue"), | |||
meta: { | |||
title: "园区服务详情", | |||
}, | |||
}, | |||
{ | |||
path: "/investment-service/property-detail", | |||
name: "PropertyDetail", | |||
component: () => | |||
import("../../views/investment-service/property-detail/PropertyDetail.vue"), | |||
meta: { | |||
title: "招商载体详情", | |||
}, | |||
}, | |||
], | |||
meta: { | |||
title: "招商服务", | |||
}, | |||
}, | |||
]; |
@@ -1,18 +0,0 @@ | |||
/** | |||
* | |||
* 产品路由 | |||
* | |||
*/ | |||
export default [ | |||
// 产品详情 | |||
{ | |||
path: "/product-detail", | |||
name: "ProductDetail", | |||
component: () => | |||
import ("../../views/product/detail/ProductDetail.vue"), | |||
meta: { | |||
title: "产品详情", | |||
}, | |||
}, | |||
]; |
@@ -1,18 +0,0 @@ | |||
/** | |||
* | |||
* 物业路由 | |||
* | |||
*/ | |||
export default [ | |||
// 物业详情 | |||
{ | |||
path: "/property-detail", | |||
name: "PropertyDetail", | |||
component: () => | |||
import ("../../views/property/detail/PropertyDetail.vue"), | |||
meta: { | |||
title: "物业详情", | |||
}, | |||
}, | |||
]; |
@@ -13,8 +13,8 @@ export const routerOpenInNewWindow = routerPath => { | |||
* @returns | |||
*/ | |||
export const formatImg = path => { | |||
return path ? `${process.env.VUE_APP_PARK_DOMAIN}/common/getImg?path=${path}` : ""; | |||
// return path ? `http://192.168.18.236:18888/common/getImg?path=${path}` : ""; | |||
// return path ? `${process.env.VUE_APP_PARK_DOMAIN}/common/getImg?path=${path}` : ""; | |||
return path ? `http://192.168.18.236:18888/common/getImg?path=${path}` : ""; | |||
}; | |||
/** | |||
@@ -37,6 +37,8 @@ export const sendMsg = (status, msg) => { | |||
*/ | |||
export const parseMarkdown = (markdownText) => { | |||
let imgUrl = `http://192.168.18.236:18888/common/getImg?path=`; | |||
// let imgUrl = `${process.env.VUE_APP_PARK_DOMAIN}/common/getImg?path=`; | |||
const htmlText = markdownText | |||
.replace(/^### (.*$)/gim, '<h3>$1</h3>') | |||
.replace(/^## (.*$)/gim, '<h2>$1</h2>') | |||
@@ -44,9 +46,10 @@ export const parseMarkdown = (markdownText) => { | |||
.replace(/^\> (.*$)/gim, '<blockquote>$1</blockquote>') | |||
.replace(/\*\*(.*)\*\*/gim, '<b>$1</b>') | |||
.replace(/\*(.*)\*/gim, '<i>$1</i>') | |||
.replace(/!\[(.*?)\]\((.*?)\)/gim, "<img alt='$1' src='$2' />") | |||
.replace(/!\[(.*?)\]\((.*?)\)/gim, "<img alt='$1' src='" + imgUrl + "$2' />") | |||
.replace(/\[(.*?)\]\((.*?)\)/gim, "<a href='$2'>$1</a>") | |||
.replace(/\n$/gim, '<br />') | |||
.replace(/[\r\n]/g, "<br />") | |||
.replace(/\/filex\/img/g,'') | |||
return htmlText.trim() | |||
} |
@@ -208,14 +208,14 @@ export default { | |||
goDetail(id) { | |||
if (this.activeTab === 0) { | |||
routerOpenInNewWindow({ | |||
path: "/product-detail", | |||
path: "/investment-service/product-detail", | |||
query: { | |||
parkServiceProductId: id, | |||
}, | |||
}); | |||
} else { | |||
routerOpenInNewWindow({ | |||
path: "/property-detail", | |||
path: "/investment-service/property-detail", | |||
query: { | |||
propertyManagementId: id, | |||
}, |
@@ -0,0 +1,98 @@ | |||
<template> | |||
<div class="investment-service" data-1666592457229> | |||
<div class="investment-header"> | |||
<Nav></Nav> | |||
<div class="header-box"> | |||
<div class="breadcrumb-nav"> | |||
<span class="current-position"> | |||
<i class="el-icon-location"></i> 当前位置: | |||
</span> | |||
<span class="current-position link" @click="toPath('/')">首页</span> | |||
<span class="current-position link"> | |||
<i class="el-icon-arrow-right"></i> | |||
</span> | |||
<span class="current-position link active">招商服务</span> | |||
</div> | |||
<div class="content"> | |||
<div class="title">招商服务</div> | |||
<div class="sub-title">Investment promotion service</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="investment-container"> | |||
<router-view></router-view> | |||
</div> | |||
<Footer></Footer> | |||
</div> | |||
</template> | |||
<script> | |||
import Nav from "@components/Header.vue"; | |||
import Footer from "@components/Footer.vue"; | |||
export default { | |||
components: { Nav, Footer }, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.investment-service { | |||
.investment-header { | |||
height: 250px; | |||
background: url("~@/assets/image/product/productDetialHeaderBgc.png") | |||
no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
.header-box { | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
height: 150px; | |||
position: relative; | |||
.breadcrumb-nav { | |||
float: left; | |||
margin-top: 32px; | |||
.current-position { | |||
position: relative; | |||
z-index: 2; | |||
color: #fff; | |||
font-size: 16px; | |||
&.link { | |||
margin-right: 3px; | |||
cursor: pointer; | |||
} | |||
&.active { | |||
font-weight: bold; | |||
} | |||
} | |||
} | |||
.content { | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
width: 100%; | |||
height: 100%; | |||
text-align: center; | |||
color: #fff; | |||
.title { | |||
font-size: 36px; | |||
font-weight: bold; | |||
height: 50px; | |||
line-height: 50px; | |||
margin-top: 36px; | |||
} | |||
.sub-title { | |||
margin-top: 5px; | |||
font-size: 14px; | |||
} | |||
} | |||
} | |||
.investment-container { | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
margin-top: 30px; | |||
padding-bottom: 50px; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,49 @@ | |||
.investment-service-list[data-1666594433609] { | |||
.tab-div { | |||
height: 60px; | |||
line-height: 60px; | |||
@include font(18px, #637485); | |||
.item-tab { | |||
float: left; | |||
padding: 0 65px; | |||
box-sizing: border-box; | |||
border: 1px solid #bcd8e9; | |||
border-bottom: 0; | |||
border-right: 0; | |||
cursor: pointer; | |||
&:last-child { | |||
border-right: 1px solid #bcd8e9; | |||
} | |||
&.active { | |||
background-image: linear-gradient( | |||
135deg, | |||
#42a6fe 0%, | |||
#0070d2 100% | |||
); | |||
color: #fff; | |||
} | |||
} | |||
} | |||
.filter-div { | |||
margin-top: 1px; | |||
border-top: 2px solid #218be8; | |||
background: linear-gradient(to bottom, #cde8fb, #fff); | |||
box-sizing: border-box; | |||
padding: 20px 30px; | |||
.search-div { | |||
text-align: center; | |||
margin-bottom: 20px; | |||
.input_box { | |||
display: inline-block; | |||
} | |||
} | |||
.filter-list-box { | |||
background: #fff; | |||
padding: 37px 50px; | |||
box-sizing: border-box; | |||
} | |||
} | |||
.pagination-div { | |||
text-align: right; | |||
} | |||
} |
@@ -0,0 +1,305 @@ | |||
<template> | |||
<div | |||
data-1666594433609 | |||
class="investment-service-list" | |||
v-loading="pageLoading" | |||
element-loading-text="数据加载中..." | |||
> | |||
<div class="tab-div"> | |||
<div | |||
class="item-tab" | |||
v-for="(tab,inx) of tabs" | |||
:key="inx" | |||
:class="{'active':cutTab == tab.code}" | |||
@click="tabChage(tab)" | |||
>{{ tab.label }}</div> | |||
</div> | |||
<div class="filter-div"> | |||
<div class="search-div"> | |||
<SearchInput @search-data="searchData" /> | |||
</div> | |||
<div class="filter-list-box" v-if="cutTab == 'parkServices'"> | |||
<FilterCard | |||
:title="'产品类型'" | |||
:arrList="productTypeList" | |||
@filterChange="filterChange($event,'productType')" | |||
:key="1" | |||
/> | |||
</div> | |||
<div class="filter-list-box" v-else> | |||
<FilterCard | |||
:title="'人数'" | |||
:arrList="capacityRangeList" | |||
@filterChange="filterChange($event,'capacityRangeId')" | |||
:key="2" | |||
/> | |||
<FilterCard | |||
:title="'面积'" | |||
:arrList="areaRangeList" | |||
@filterChange="filterChange($event,'areaRangeId')" | |||
:key="3" | |||
/> | |||
</div> | |||
</div> | |||
<div class="list-div-box" v-if="cutTab == 'parkServices'"> | |||
<ParkServiceProduct | |||
:list="parkServiceProductList" | |||
v-if="parkServiceProductList.length > 0" | |||
/> | |||
<div v-else class="no_data"> | |||
<empty-data :ifShowDescription="true"></empty-data> | |||
</div> | |||
</div> | |||
<div class="list-div-box" v-else> | |||
<PropertyManage :list="propertyManageList" v-if="propertyManageList.length > 0" /> | |||
<div v-else class="no_data"> | |||
<empty-data :ifShowDescription="true"></empty-data> | |||
</div> | |||
</div> | |||
<div class="pagination-div"> | |||
<Pagination | |||
:currentPage="queryParams.page" | |||
:total="queryParams.total" | |||
@change-page-size="changePageSize" | |||
@change-page="changePage" | |||
/> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import "./InvestmentServiceList.scss"; | |||
import { | |||
getPropertyFilterData, | |||
getParkServiceProductFilterData, | |||
getParkServiceProduct, | |||
getPropertyManage, | |||
} from "@api/index.js"; | |||
import SearchInput from "@views/park-information/components/SearchInput.vue"; | |||
import FilterCard from "./components/FilterCard.vue"; | |||
import ParkServiceProduct from "./components/ParkServiceProduct.vue"; | |||
import PropertyManage from "./components/PropertyManage.vue"; | |||
import Pagination from "@components/Pagination.vue"; | |||
import EmptyData from "@components/EmptyData.vue"; | |||
export default { | |||
components: { | |||
SearchInput, | |||
FilterCard, | |||
ParkServiceProduct, | |||
Pagination, | |||
PropertyManage, | |||
EmptyData, | |||
}, | |||
data() { | |||
return { | |||
pageLoading: false, | |||
tabs: [ | |||
{ | |||
label: "园区服务", | |||
code: "parkServices", | |||
}, | |||
{ | |||
label: "招商载体", | |||
code: "investmentCarrier", | |||
}, | |||
], | |||
cutTab: "parkServices", | |||
// 面积筛选数据 | |||
areaRangeList: [], | |||
// 人数筛选数据 | |||
capacityRangeList: [], | |||
// 产品类型筛选数据 | |||
productTypeList: [], | |||
// 搜索参数 | |||
queryParams: { | |||
page: 1, | |||
pageSize: 10, | |||
keyword: "", | |||
// 产品类型 | |||
productType: "", | |||
// 人数筛选 | |||
capacityRangeId: "", | |||
// 面积筛选 | |||
areaRangeId: "", | |||
total: 0, | |||
}, | |||
// 园区服务列表数据 | |||
parkServiceProductList: [], | |||
// 招商载体数据 | |||
propertyManageList: [], | |||
}; | |||
}, | |||
mounted() { | |||
// 初始化 | |||
this.init(); | |||
}, | |||
methods: { | |||
// 初始化接口 | |||
init() { | |||
this.pageLoading = true; | |||
Promise.all([ | |||
// 招商载体查询数据 | |||
this.getFilterData( | |||
getPropertyFilterData, | |||
"获取招商载体查询数据失败", | |||
(res) => { | |||
if (res.data.status == 0) { | |||
const data = res.data.data; | |||
this.areaRangeList = data.areaRangeList; | |||
this.capacityRangeList = data.capacityRangeList; | |||
} | |||
} | |||
), | |||
// 园区服务查询数据 | |||
this.getFilterData( | |||
getParkServiceProductFilterData, | |||
"获取园区服务查询数据失败", | |||
(res) => { | |||
if (res.data.status == 0) { | |||
const data = res.data.data; | |||
this.productTypeList = data.productTypeList; | |||
} | |||
} | |||
), | |||
]).then(() => { | |||
this.pageLoading = false; | |||
this.areaRangeList.unshift({ id: "", text: "全部" }); | |||
this.capacityRangeList.unshift({ id: "", text: "全部" }); | |||
this.productTypeList.unshift({ id: "", text: "全部" }); | |||
this.getListData(); | |||
}); | |||
}, | |||
// tab切换 | |||
tabChage(tab) { | |||
if (tab.code == this.cutTab) { | |||
return; | |||
} | |||
this.cutTab = tab.code; | |||
this.queryParams.productType = ""; | |||
this.queryParams.capacityRangeId = ""; | |||
this.queryParams.areaRangeId = ""; | |||
this.queryParams.page = 1; | |||
this.queryParams.pageSize = 10; | |||
this.getListData(); | |||
}, | |||
// 分页切换 | |||
changePageSize(v) { | |||
this.queryParams.pageSize = v; | |||
this.getListData(); | |||
}, | |||
changePage(v) { | |||
this.queryParams.page = v; | |||
this.getListData(); | |||
}, | |||
// 获取列表数据 | |||
getListData() { | |||
console.log(this.$cloneDeep(this.queryParams), "this.queryParams"); | |||
if (this.cutTab == "parkServices") { | |||
this.getListApi( | |||
getParkServiceProduct, | |||
"parkServiceProductList" | |||
); | |||
} else { | |||
this.getListApi(getPropertyManage, "propertyManageList"); | |||
} | |||
}, | |||
getListApi(api, key) { | |||
this.pageLoading = true; | |||
this.apiFn( | |||
api, | |||
this.queryParams, | |||
(res) => { | |||
if (res.data.status == 0) { | |||
const data = res.data.data; | |||
// console.log(this.$cloneDeep(data),key) | |||
this[key] = data.list; | |||
this.queryParams.total = data.total; | |||
console.log(data.total, "res.total"); | |||
} else if (res.data.status === 102) { | |||
this.$router.push("/login"); | |||
} else { | |||
this.$message.error(res.data.msg); | |||
} | |||
this.pageLoading = false; | |||
}, | |||
(err) => { | |||
console.log(err); | |||
this.pageLoading = false; | |||
this.$message.error( | |||
"加载列表数据失败,请尝试刷新页面后重试" | |||
); | |||
} | |||
); | |||
}, | |||
// 搜索变化 | |||
searchData(val) { | |||
this.queryParams.keyword = val; | |||
this.queryParams.page = 1; | |||
this.getListData(); | |||
}, | |||
// 过滤变化 | |||
filterChange(val, key) { | |||
this.queryParams.page = 1; | |||
this.queryParams[key] = val; | |||
this.getListData(); | |||
}, | |||
/** | |||
* | |||
* @param {*} api api方法 | |||
* @param {*} params 参数 | |||
* @param {*} cb 成功回调 | |||
* @param {*} catchErr catch失败回调 | |||
*/ | |||
// api | |||
apiFn(api, params, cb, catchErr) { | |||
api(params) | |||
.then((res) => { | |||
cb(res); | |||
}) | |||
.catch((err) => { | |||
catchErr(err); | |||
}); | |||
}, | |||
// 获取分类 | |||
getFilterData(api, errMsg, cb) { | |||
return new Promise((resolve, reject) => { | |||
this.apiFn( | |||
api, | |||
{}, | |||
(res) => { | |||
if (res.data.status == 0) { | |||
cb(res); | |||
} | |||
resolve(); | |||
}, | |||
(err) => { | |||
console.log(err); | |||
reject(); | |||
this.$message.error(errMsg); | |||
} | |||
); | |||
}); | |||
}, | |||
// 园区服务产品列表 | |||
getParkServiceProduct() { | |||
getParkServiceProduct(this.queryParams) | |||
.then((res) => { | |||
if (res.data.status == 0) { | |||
// const data = res.data.data; | |||
// console.log(this.$cloneDeep(data), "data"); | |||
// this.areaRangeList = data.areaRangeList; | |||
// this.capacityRangeList = data.capacityRangeList; | |||
} | |||
resolve(); | |||
}) | |||
.catch((err) => { | |||
console.log(err); | |||
reject(); | |||
this.$message.error("获取园区服务产品列表数据失败"); | |||
}); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -0,0 +1,77 @@ | |||
<template> | |||
<div class="filter-card"> | |||
<div class="title fl">{{ title }}:</div> | |||
<div class="filter-item-box fl"> | |||
<div | |||
class="filter-item fl" | |||
:class="{active:item.id == cutId}" | |||
v-for="(item,inx) of arrList" | |||
:key="inx" | |||
@click="itemChange(item)" | |||
>{{ item.text }}</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
props: { | |||
arrList: { | |||
typeof: Array, | |||
default: () => { | |||
[]; | |||
}, | |||
}, | |||
title: { | |||
typeof: String, | |||
default: "", | |||
}, | |||
}, | |||
data() { | |||
return { | |||
// 当前选中 | |||
cutId: "", | |||
}; | |||
}, | |||
methods: { | |||
itemChange(item) { | |||
if (this.cutId == item) { | |||
return; | |||
} | |||
this.cutId = item.id; | |||
this.$emit("filterChange", item.id); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.filter-card { | |||
height: 58px; | |||
border-bottom: 1px dashed #bcd8e9; | |||
// line-height: 58px; | |||
@include font(16px, #637485); | |||
.title { | |||
color: #444; | |||
font-weight: bold; | |||
width: 100px; | |||
margin-top: 22px; | |||
} | |||
.filter-item-box { | |||
width: calc(100% - 100px); | |||
height: 22px; | |||
margin-top: 22px; | |||
} | |||
.filter-item { | |||
height: 22px; | |||
padding: 0 10px; | |||
box-sizing: border-box; | |||
margin-right: 10px; | |||
cursor: pointer; | |||
&.active { | |||
background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%); | |||
color: #fff; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,86 @@ | |||
<template> | |||
<div class="park-service-product" v-if="list.length > 0"> | |||
<div class="item-list-box fl" v-for="(item,inx) of list" :key="inx" @click="toDetail(item)"> | |||
<div class="item-img"> | |||
<img :src="formatImg(item.productMasterImg)" alt="main-img" /> | |||
</div> | |||
<div class="item-title" :title="item.productName">{{ item.productName }}</div> | |||
<div | |||
class="item-subtitle" | |||
v-if="item.productDescription" | |||
:title="item.productDescription" | |||
>{{ item.productDescription }}</div> | |||
<div class="item-price">¥{{ item.showPrice }}</div> | |||
</div> | |||
<br clear="all" /> | |||
</div> | |||
</template> | |||
<script> | |||
import { formatImg, routerOpenInNewWindow } from "@/utils/common"; | |||
export default { | |||
props: { | |||
list: { | |||
type: Array, | |||
default: () => { | |||
[]; | |||
}, | |||
}, | |||
}, | |||
methods: { | |||
formatImg(productMasterImg) { | |||
return formatImg(productMasterImg ? productMasterImg[0] : ""); | |||
}, | |||
toDetail(item) { | |||
routerOpenInNewWindow({ | |||
path: "/investment-service/product-detail", | |||
query: { | |||
parkServiceProductId: item.parkServiceProductId, | |||
}, | |||
}); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.park-service-product { | |||
.item-list-box { | |||
width: 285px; | |||
box-sizing: border-box; | |||
margin-right: 20px; | |||
margin-bottom: 30px; | |||
height: 300px; | |||
background: linear-gradient(to bottom, #cde8fb, #fff); | |||
padding: 10px; | |||
border: solid 1px rgba($color: #bcd8e9, $alpha: 0.2); | |||
cursor: pointer; | |||
&:nth-child(4n) { | |||
margin-right: 0; | |||
} | |||
.item-img { | |||
width: 265px; | |||
height: 180px; | |||
img { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.item-title { | |||
@include text-ellipsis(); | |||
@include font(18px, #334a5f); | |||
font-weight: bold; | |||
margin: 10px 0; | |||
} | |||
.item-subtitle { | |||
@include text-ellipsis(); | |||
@include font(16px, #637485); | |||
margin-bottom: 8px; | |||
} | |||
.item-price { | |||
@include font(18px, #d9121a); | |||
font-weight: bold; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,176 @@ | |||
<template> | |||
<div class="propertyManage"> | |||
<div class="property-div" v-for="(item,inx) of list" :key="inx" @click="toDetail(item)"> | |||
<div class="main-img fl"> | |||
<img :src="formatImg(item.housingInformationList)" alt="main-img" /> | |||
</div> | |||
<div class="main-content fl"> | |||
<div class="min-title" :title="item.name">{{ item.name }}</div> | |||
<div class="main-address" :title="item.address"> | |||
<span class="main-address-icon"> | |||
<i class="el-icon-location"></i> | |||
</span> | |||
地址:{{ item.address }} | |||
</div> | |||
<div class="main-des"> | |||
<span class="first">最短起租:{{ item.shortestRent }}</span>| | |||
<span>总面积:{{ item.housingInformationList[0].housingArea }}m²</span>| | |||
<span>支付方式:{{ item.payment.housingArea }}</span>| | |||
<span>{{ item.type }}</span> | |||
</div> | |||
<div class="main-advantageList"> | |||
<span | |||
class="item-span" | |||
v-for="(advantage,advantageInx) of item.advantageList" | |||
:key="advantageInx" | |||
:style="getListingColor(advantage)" | |||
>{{ advantage }}</span> | |||
</div> | |||
<div class="main-optional">{{ getOptional(item) }}</div> | |||
</div> | |||
<div class="main-right fr"> | |||
<div class="main-showPrice"> | |||
<span class="main-price">{{ item.housingInformationList[0].price }}</span> | |||
<span>{{ item.housingInformationList[0].unit }}</span> | |||
</div> | |||
<div class="main-showTotalPrice"> | |||
总价:{{ item.housingInformationList[0].showTotalPrice }} | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { routerOpenInNewWindow, formatImg } from "@/utils/common"; | |||
export default { | |||
props: { | |||
list: { | |||
type: Array, | |||
default: () => { | |||
[]; | |||
}, | |||
}, | |||
}, | |||
methods: { | |||
formatImg(imgList) { | |||
let housingImg = imgList ? imgList[0].housingImg : ""; | |||
housingImg = housingImg ? JSON.parse(housingImg)[0] : ""; | |||
return formatImg(housingImg); | |||
}, | |||
toDetail(item) { | |||
routerOpenInNewWindow({ | |||
path: "/investment-service/property-detail", | |||
query: { | |||
propertyManagementId: item.propertyManagementId, | |||
}, | |||
}); | |||
}, | |||
// 获取可选 | |||
getOptional(item) { | |||
let decoration = []; | |||
item.housingInformationList.forEach((el) => { | |||
if (!decoration.includes(el.decoration)) { | |||
decoration.push(el.decoration); | |||
} | |||
}); | |||
return "可选:" + decoration.join("、"); | |||
}, | |||
// 获取房源优势颜色 | |||
getListingColor(item) { | |||
let wuyeguanli_fangyuanyoushi = | |||
this.$store.getters.tabList.wuyeguanli_fangyuanyoushi; | |||
let style = { background: "" }; | |||
wuyeguanli_fangyuanyoushi.forEach((el) => { | |||
if (item == el.text) { | |||
style.background = el.color; | |||
} | |||
}); | |||
return style; | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.property-div { | |||
height: 205px; | |||
box-sizing: border-box; | |||
padding: 10px 20px 15px 10px; | |||
border: solid 1px #bcd8e9; | |||
margin-bottom: 30px; | |||
cursor: pointer; | |||
.main-img { | |||
width: 265px; | |||
height: 180px; | |||
margin-right: 20px; | |||
img { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.main-content { | |||
width: calc(100% - 525px); | |||
.min-title { | |||
@include text-ellipsis(); | |||
@include font(18px, #334a5f); | |||
font-weight: bold; | |||
line-height: 35px; | |||
} | |||
.main-address { | |||
height: 30px; | |||
line-height: 30px; | |||
margin: 10px 0; | |||
@include text-ellipsis(); | |||
@include font(16px, #637485); | |||
.main-address-icon { | |||
color: #1984e3; | |||
font-size: 18px; | |||
} | |||
} | |||
.main-des { | |||
@include font(16px, #637485); | |||
span { | |||
margin-right: 10px; | |||
margin-left: 5px; | |||
&.first { | |||
margin-left: 0; | |||
} | |||
} | |||
} | |||
.main-advantageList { | |||
margin: 10px 0; | |||
overflow: hidden; | |||
height: 22px; | |||
.item-span { | |||
display: inline-block; | |||
height: 22px; | |||
line-height: 22px; | |||
@include font(14px, #fff); | |||
padding: 0 10px; | |||
margin-right: 15px; | |||
} | |||
} | |||
.main-optional { | |||
@include font(16px, #637485); | |||
} | |||
} | |||
.main-right { | |||
width: 240px; | |||
height: 100%; | |||
text-align: center; | |||
@include font(16px,#637485); | |||
.main-showPrice { | |||
margin-top: 65px; | |||
.main-price { | |||
@include font(26px, #d9121a); | |||
margin-right: 2px; | |||
} | |||
} | |||
.main-showTotalPrice { | |||
margin-top: 10px; | |||
} | |||
} | |||
} | |||
</style> |
@@ -1,58 +1,54 @@ | |||
.product-detial[data-1664250138954] { | |||
height: 250px; | |||
background: url("~@/assets/image/product/productDetialHeaderBgc.png") | |||
no-repeat; | |||
background-size: 100% 100%; | |||
.header-box { | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
height: 150px; | |||
position: relative; | |||
.breadcrumb-nav { | |||
float: left; | |||
margin-top: 32px; | |||
.current-position { | |||
position: relative; | |||
z-index: 2; | |||
color: #fff; | |||
font-size: 16px; | |||
&.link { | |||
margin-right: 3px; | |||
cursor: pointer; | |||
} | |||
&.active { | |||
font-weight: bold; | |||
} | |||
} | |||
} | |||
.content { | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
width: 100%; | |||
height: 100%; | |||
text-align: center; | |||
color: #fff; | |||
// height: 250px; | |||
// background: url("~@/assets/image/product/productDetialHeaderBgc.png") | |||
// no-repeat; | |||
// background-size: 100% 100%; | |||
// .header-box { | |||
// width: $wrapWidth; | |||
// margin: 0 auto; | |||
// height: 150px; | |||
// position: relative; | |||
// .breadcrumb-nav { | |||
// float: left; | |||
// margin-top: 32px; | |||
// .current-position { | |||
// position: relative; | |||
// z-index: 2; | |||
// color: #fff; | |||
// font-size: 16px; | |||
// &.link { | |||
// margin-right: 3px; | |||
// cursor: pointer; | |||
// } | |||
// &.active { | |||
// font-weight: bold; | |||
// } | |||
// } | |||
// } | |||
// .content { | |||
// position: absolute; | |||
// left: 0; | |||
// top: 0; | |||
// width: 100%; | |||
// height: 100%; | |||
// text-align: center; | |||
// color: #fff; | |||
.title { | |||
font-size: 36px; | |||
font-weight: bold; | |||
height: 50px; | |||
line-height: 50px; | |||
margin-top: 36px; | |||
} | |||
.sub-title { | |||
margin-top: 5px; | |||
font-size: 14px; | |||
} | |||
} | |||
} | |||
// .title { | |||
// font-size: 36px; | |||
// font-weight: bold; | |||
// height: 50px; | |||
// line-height: 50px; | |||
// margin-top: 36px; | |||
// } | |||
// .sub-title { | |||
// margin-top: 5px; | |||
// font-size: 14px; | |||
// } | |||
// } | |||
// } | |||
.detial-container { | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
margin-top: 30px; | |||
padding-bottom: 50px; | |||
border-top: 2px solid #2c94f0; | |||
.ditial-banner { | |||
height: 387px; | |||
background: linear-gradient(to bottom, #cde8fb, #fff); |
@@ -1,24 +1,5 @@ | |||
<template> | |||
<div class="product-detial" data-1664250138954> | |||
<div class="detial-header"> | |||
<Nav></Nav> | |||
<div class="header-box"> | |||
<div class="breadcrumb-nav"> | |||
<span class="current-position"> | |||
<i class="el-icon-location"></i> 当前位置: | |||
</span> | |||
<span class="current-position link" @click="toPath('/')">首页</span> | |||
<span class="current-position link"> | |||
<i class="el-icon-arrow-right"></i> | |||
</span> | |||
<span class="current-position link active">招商服务</span> | |||
</div> | |||
<div class="content"> | |||
<div class="title">招商服务</div> | |||
<div class="sub-title">Investment promotion service</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="detial-container" v-loading="pageLoading" element-loading-text="数据加载中..."> | |||
<div class="ditial-banner"> | |||
<div class="main-img"> | |||
@@ -30,7 +11,7 @@ | |||
<span class="price-label">价格:</span> | |||
<span class="price-value">¥{{ productDetail.showPrice }}</span> | |||
</div> | |||
<div class="mian-detail" :title="mainDetailText"> | |||
<div class="mian-detail" :title="productDetail.productDescription"> | |||
<span class="mian-detail-span">详情:</span> | |||
{{ productDetail.productDescription }} | |||
</div> | |||
@@ -50,18 +31,14 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<Footer></Footer> | |||
</div> | |||
</template> | |||
<script> | |||
import Nav from "@components/Header.vue"; | |||
import Footer from "@components/Footer.vue"; | |||
import "./ProductDetail.scss"; | |||
import { getByIdServiceProduct } from "@api/index.js"; | |||
import { parseMarkdown,formatImg } from "@/utils/common"; | |||
export default { | |||
components: { Nav, Footer }, | |||
data() { | |||
return { | |||
pageLoading: false, |
@@ -1,52 +1,5 @@ | |||
.property-detial[data-1664250138954] { | |||
height: 250px; | |||
background: url("~@/assets/image/product/productDetialHeaderBgc.png") | |||
no-repeat; | |||
background-size: 100% 100%; | |||
.header-box { | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
height: 150px; | |||
position: relative; | |||
.breadcrumb-nav { | |||
float: left; | |||
margin-top: 32px; | |||
.current-position { | |||
position: relative; | |||
z-index: 2; | |||
color: #fff; | |||
font-size: 16px; | |||
&.link { | |||
margin-right: 3px; | |||
cursor: pointer; | |||
} | |||
&.active { | |||
font-weight: bold; | |||
} | |||
} | |||
} | |||
.content { | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
width: 100%; | |||
height: 100%; | |||
text-align: center; | |||
color: #fff; | |||
.title { | |||
font-size: 36px; | |||
font-weight: bold; | |||
height: 50px; | |||
line-height: 50px; | |||
margin-top: 36px; | |||
} | |||
.sub-title { | |||
margin-top: 5px; | |||
font-size: 14px; | |||
} | |||
} | |||
} | |||
.detial-container { | |||
width: $wrapWidth; | |||
margin: 0 auto; |
@@ -1,24 +1,5 @@ | |||
<template> | |||
<div class="property-detial" data-1664250138954> | |||
<div class="detial-header"> | |||
<Nav></Nav> | |||
<div class="header-box"> | |||
<div class="breadcrumb-nav"> | |||
<span class="current-position"> | |||
<i class="el-icon-location"></i> 当前位置: | |||
</span> | |||
<span class="current-position link" @click="toPath('/')">首页</span> | |||
<span class="current-position link"> | |||
<i class="el-icon-arrow-right"></i> | |||
</span> | |||
<span class="current-position link active">招商服务</span> | |||
</div> | |||
<div class="content"> | |||
<div class="title">招商服务</div> | |||
<div class="sub-title">Investment promotion service</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="detial-container" v-loading="pageLoading" element-loading-text="数据加载中..."> | |||
<div class="ditial-banner"> | |||
<div class="main-img"> | |||
@@ -118,7 +99,6 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<Footer></Footer> | |||
<!-- video预览 --> | |||
<el-dialog :visible.sync="videoPreview.isShow" :close-on-click-modal="false"> | |||
<video |
@@ -365,7 +365,6 @@ export default { | |||
this.isOvertime = true; | |||
time--; | |||
this.word = "已发送" + time + "秒"; | |||
console.log(`测试定时器`); | |||
if (time <= 0) { | |||
this.isOvertime = false; | |||
clearInterval(this.sendTimer); |