|
|
|
@ -7,17 +7,265 @@
|
|
|
|
|
* @FilePath: /ansu-business/src/views/Console/index.vue
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
11111
|
|
|
|
|
<div>
|
|
|
|
|
<div class="tips">
|
|
|
|
|
<a-space size="large">
|
|
|
|
|
第一步:请完善企业信息后,提交至工作人员审核
|
|
|
|
|
<a-button type="primary" shape="round" size="default">添加小区</a-button>
|
|
|
|
|
</a-space>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<span style="margin-left:30px">
|
|
|
|
|
<div class="top-a">你好,admin</div>
|
|
|
|
|
<div class="top-b">请尽快绑定企业信息,进行下一步</div>
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<a-button type="primary" class="top-c" shape="round" size="default" @click="settled()">入驻企业申请</a-button>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span='18'>
|
|
|
|
|
<div class="card-a">
|
|
|
|
|
<div class="cardTitle">小区后台</div>
|
|
|
|
|
<div class="card-a-content">
|
|
|
|
|
<div v-if="estateList.length">
|
|
|
|
|
<div style="color:#D53131" v-show="!estateList.length">当前尚未添加小区信息</div>
|
|
|
|
|
<div class="cardBox">
|
|
|
|
|
<a-card hoverable style="width: 30%;margin:10px;" v-for="(item,index) in estateList" :key="index">
|
|
|
|
|
<template slot="actions" class="ant-card-actions">
|
|
|
|
|
<span>绑定</span>
|
|
|
|
|
<span>详情</span>
|
|
|
|
|
</template>
|
|
|
|
|
<a-card-meta :title="item.name" :description="'小区地址:'+item.address">
|
|
|
|
|
</a-card-meta>
|
|
|
|
|
</a-card>
|
|
|
|
|
<a-card class="card-add">
|
|
|
|
|
<div class="card-a-content-add">
|
|
|
|
|
点击新建小区
|
|
|
|
|
</div>
|
|
|
|
|
</a-card>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span='6'>
|
|
|
|
|
<div class="card-b">
|
|
|
|
|
<div class="cardTitle">订单列表</div>
|
|
|
|
|
<div class="cardBox" v-if="orderList.length">
|
|
|
|
|
<a-card hoverable v-for="item,index in orderList" :key="index" :title="item.code" style="width: 80%;margin:auto;margin-top:20px">
|
|
|
|
|
<span slot="extra" href="#">{{item.status}}</span>
|
|
|
|
|
<span style="color:#00000073;font-size:14px;display:flex;justify-content:space-between;"><span>购买功能</span> <span style="color:#D53131;">{{'¥'+item.amount}}</span></span>
|
|
|
|
|
<div class="functionBox">
|
|
|
|
|
<div class="functionList" v-for="ele,indexs in item.functionList" :key="indexs">{{ele}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top:10px;">{{item.time}}<span style="color:#00000073;font-size:14px;">到期</span></div>
|
|
|
|
|
<template slot="actions" class="ant-card-actions">
|
|
|
|
|
<span>续费</span>
|
|
|
|
|
<span>解绑</span>
|
|
|
|
|
<span>详情</span>
|
|
|
|
|
<!-- <span>支付</span>
|
|
|
|
|
<span>取消</span> -->
|
|
|
|
|
</template>
|
|
|
|
|
</a-card>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-b-content" v-else>
|
|
|
|
|
<div>当前无订单</div>
|
|
|
|
|
<div>请购买后台功能</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
|
|
|
|
|
</a-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
name: "Console"
|
|
|
|
|
}
|
|
|
|
|
name: "Console",
|
|
|
|
|
data(){
|
|
|
|
|
return{
|
|
|
|
|
orderList:[
|
|
|
|
|
{
|
|
|
|
|
code:'N20212121212',
|
|
|
|
|
status:'付款成功',
|
|
|
|
|
time:'2023/3/3',
|
|
|
|
|
amount:'25000',
|
|
|
|
|
functionList:['基础功能','缴费管理','智慧商城','运营管理','设置']
|
|
|
|
|
},{
|
|
|
|
|
code:'N20212121212',
|
|
|
|
|
status:'付款成功',
|
|
|
|
|
time:'2023/3/3',
|
|
|
|
|
functionList:['基础功能','缴费管理','智慧商城','运营管理','设置']
|
|
|
|
|
},{
|
|
|
|
|
code:'N20212121212',
|
|
|
|
|
status:'付款成功',
|
|
|
|
|
time:'2023/3/3',
|
|
|
|
|
functionList:['基础功能','缴费管理','智慧商城','运营管理','设置']
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
estateList:[
|
|
|
|
|
{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
},{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
},{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
},{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
},{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 单元 250 室 11 单元 250 室 11 单元 250 室 11 单元 250 室 11 单元苏省盐城市建湖县沿河镇 11 单元 250 室 11 单元 250 室 11 单元 250 室苏省盐城市建湖县沿河镇 11 单元 250 室 11 单元 250 室 11 单元 250 室 11 单元 250 室 11 单元 11 单元 250 室 11 单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
},{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 建湖县沿河镇 11 单元 250建湖县沿河镇 11 建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
settled(){
|
|
|
|
|
this.$router.push({name:'settled'})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.tips {
|
|
|
|
|
background: #f7d6d6;
|
|
|
|
|
height: 68px;
|
|
|
|
|
line-height: 68px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #000000d9;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding-left: 40px;
|
|
|
|
|
}
|
|
|
|
|
.top {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
background: #fff;
|
|
|
|
|
height: 132px;
|
|
|
|
|
line-height: 132px;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.top-a{
|
|
|
|
|
font-weight:500;
|
|
|
|
|
font-size:20px;
|
|
|
|
|
color:#000000;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
.top-b{
|
|
|
|
|
color:#000000A6 ;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
}
|
|
|
|
|
.top-c{
|
|
|
|
|
margin-right:30px
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card-a{
|
|
|
|
|
background: #fff;
|
|
|
|
|
margin-right:24px;
|
|
|
|
|
padding-top:10px;
|
|
|
|
|
min-height: 600px;
|
|
|
|
|
.card-a-content{
|
|
|
|
|
color: #00000073;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding: 13px;
|
|
|
|
|
.cardBox{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction:row;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
// justify-content:;
|
|
|
|
|
.card-add{
|
|
|
|
|
width: 30%;
|
|
|
|
|
margin:10px;
|
|
|
|
|
border:1px dashed #9DB7DF;
|
|
|
|
|
border-radius: 3%;
|
|
|
|
|
}
|
|
|
|
|
/deep/.ant-card-body{
|
|
|
|
|
padding-bottom: 50px;
|
|
|
|
|
min-height: 170px;
|
|
|
|
|
}
|
|
|
|
|
/deep/.ant-card {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
/deep/.ant-card-actions{
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
// margin-top: 50px;
|
|
|
|
|
}
|
|
|
|
|
.card-a-content-add{
|
|
|
|
|
color:#9DB7DF;
|
|
|
|
|
font-size:16px;
|
|
|
|
|
cursor:pointer;
|
|
|
|
|
text-align: center;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
line-height: 72px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card-b{
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding-top:10px;
|
|
|
|
|
min-height: 600px;
|
|
|
|
|
.card-b-content{
|
|
|
|
|
margin-top:150px;
|
|
|
|
|
color: #00000073;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
/deep/.ant-card-head{
|
|
|
|
|
background: #205FBD1A;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.cardBox{
|
|
|
|
|
// text-align: center;
|
|
|
|
|
/deep/.ant-card-head{
|
|
|
|
|
background: #205FBD1A;
|
|
|
|
|
}
|
|
|
|
|
/deep/.ant-card-head-title{
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #000000A6;
|
|
|
|
|
}
|
|
|
|
|
.functionBox{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
width: 90%;
|
|
|
|
|
.functionList{
|
|
|
|
|
color: #1F519B;
|
|
|
|
|
border:1px solid #1F519B;
|
|
|
|
|
border-radius: 5%;
|
|
|
|
|
margin: 2px;
|
|
|
|
|
padding:2px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|