dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端

Browse Source
This commit is contained in:
xvv 2024-07-06 15:02:47 +08:00
parent aaa5ca3c24
commit 4d8dfc98af
5 changed files with 136 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
fuintAdmin_zt/src/assets/images/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
fuintAdmin_zt/src/assets/images/l-one.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
fuintAdmin_zt/src/assets/images/l-three.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
fuintAdmin_zt/src/assets/images/l-two.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

325
fuintAdmin_zt/src/views/Service/index.vue
View File

@ -1,177 +1,67 @@
<template>
<div class="app-container">
<el-card >
<el-row :gutter="24">
<el-form ref="queryParams" :model="queryParams" label-width="40px">
<el-col :span="4">
<el-form-item label="名称">
<el-input v-model="queryParams.storeName"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="状态">
<el-select v-model="queryParams.status" placeholder="店铺状态">
<el-option label="启用" value="qy"></el-option>
<el-option label="禁用" value="jy"></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item label="套餐">
<el-select v-model="form.region" placeholder="店铺套餐">
<el-option label="店铺套餐一" value="shanghai"></el-option>
<el-option label="店铺套餐二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-col> -->
<!-- <el-col :span="6">
<el-form-item label="时间">
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col> -->
<el-col :span="4">
<el-button type="primary" icon="el-icon-search" @click="getlist()">搜索</el-button>
<el-button type="" icon="el-icon-refresh" @click="res()">重置</el-button>
</el-col>
</el-form>
</el-row>
</el-card>
<el-card style="margin-top: 20px" v-for="(item,index) in arrlist" :key="index">
<div slot="header" class="clearfix">
<span>{{item.storeName || ''}}</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">进入</el-button>-->
<div class="bannser">
<img src="../../assets/images/banner.png" alt="" >
</div>
<div class="box-wrap">
<div class="zong-box" v-for="(items,index) in item.storeList" :key="index" >
<div class="pur-box" @click="godetails(items.id)">
<el-tag type="success" v-if="items.status=='qy'">启用</el-tag>
<el-tag type="danger" v-else>禁用</el-tag>
<div class="disper-box">
<div class="box-img">
<img v-if="items.logo" :src="imagePath + items.logo" style="width: 96px;height: 96px">
<img v-else src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width: 96px;height: 96px">
<div class="b-bs">
<div class="left-box">
<div class="san-box">
<div>
<img src="../../assets/images/l-one.png" style="width: 80px;height: 80px">
</div>
<div>
<div class="title">{{items.name || ''}}</div>
<div class="box-hui">
<div>注册时间：</div>
<div>{{ items.createTime.substring(0,10) || ''}}</div>
</div>
<div class="box-hui">
<div>联系人：</div>
<div>{{items.contact || '暂无'}}</div>
</div>
<div class="box-hui">
<div>联系电话：</div>
<div>{{items.phone || '暂无'}}</div>
<div class="r-title">568</div>
<div class="r-size">合作油站总数</div>
</div>
</div>
</div>
</div>
<div class="hui-bottom">
<div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
<div>
<div class="shang-biao">{{item.storeList.length || 0}}</div>
<div class="xia-biao">创建门店数（个）</div>
<img src="../../assets/images/l-two.png" style="width: 80px;height: 80px">
</div>
<div>
<!-- <div class="shang-biao">{{ items.userNum}}</div> -->
<div class="shang-biao">{{ items.userNum}}</div>
<div class="xia-biao">会员数（人）</div>
<div class="r-title">568</div>
<div class="r-size">合作油站总数</div>
</div>
</div>
<div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
<div>
<img src="../../assets/images/l-three.png" style="width: 80px;height: 80px">
</div>
<div>
<div class="shang-biao">{{ items.orderNum}}</div>
<div class="xia-biao">支付订单（笔）</div>
<div class="r-title">568</div>
<div class="r-size">合作油站总数</div>
</div>
</div>
</div>
<div class="right-box">
<div class="title_">
<div>通知中心</div>
<div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">更多 <i class="el-icon-arrow-right"></i> </div>
</div>
<div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>
</div>
</div>
<div class="b-bs">
<div class="left-box-t"> </div>
<div class="right-box-t"> </div>
</div>
</el-card>
</div>
</template>
<script>
import { Storelist,getUserNumApi,
getOrderNumApi } from "@/api/service/service";
export default {
name: 'service',
dicts: ['zhzt'],
data(){
return{
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
form: {},
imagePath: process.env.VUE_APP_SERVER_URL,
arrlist:[],
value1:'',
queryParams: {
storeName: '',
status: '',
pageNo: 1,
pageSize: 10,
},
}
},
async mounted() {
await this.getlist()
},
methods:{
async getlist(){
await Storelist(this.queryParams).then(res=>{
console.log(res)
this.arrlist = res.data.records
})
},
res() {
this.queryParams= {
storeName: '',
status: '',
pageNo: 1,
pageSize: 10,
}
this.getlist()
},
godetails(id){
this.$router.push({
path:'/Service/details',
query:{
id:id
}
})
},
}
}
@ -183,84 +73,105 @@ getOrderNumApi } from "@/api/service/service";
width: 100%;
height: 100%;
/* height: 100vh; */
background: white;
background: #f4f5f9;
}
.ding-top{
.bannser{
width: 100%;
height: 230px;
border-radius: 8px;
overflow: hidden;
img{
width: 100%;
height: 100%;
}
}
.b-bs{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.left-box{
background: #FFFFFF;
border-radius: 10px 10px 10px 10px;
border: 1px solid #FFFFFF;
height: 192px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 15px;
}
.left-box-t{
box-sizing: border-box;
padding: 15px;
border-radius: 8px;
background: #fff;
border: 1px solid #FFFFFF;
height: 380px;
}
.box-dis{
.right-box{
width: 435px;
border-radius: 8px;
background: #fff;
border: 1px solid #FFFFFF;
height: 192px;
box-sizing: border-box;
padding: 15px;
}
.right-box-t{
width: 435px;
border-radius: 8px;
background: #fff;
border: 1px solid #FFFFFF;
height: 380px;
box-sizing: border-box;
padding: 15px;
}
.san-box{
width: 360px;
height: 150px;
box-sizing: border-box;
border-radius: 8px;
background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
margin: 15px 0px;
margin-right: 15px;
box-sizing: border-box;
padding: 20px 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
.r-title{
font-weight: bold;
font-size: 42px;
color: #FFFFFF;
text-align: center;
}
.clearfix:after {
clear: both
}
.box-wrap{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.zong-box{
width: 18%;
overflow: hidden;
border-radius: 8px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
margin-bottom: 30px;
margin-right: 30px;
}
.pur-box{
width: 100%;
padding: 10px;
}
.disper-box{
display: flex;
margin-top: 10px;
}
.box-img{
width: 96px;
height: 96px;
border-radius: 8px;
overflow: hidden;
margin-right: 10px;
}
.box-hui{
display: flex;
align-items: center;
.r-size{
font-size: 14px;
color: #99a9bf;
margin-top: 4px;
color: #FFFFFF;
}
.title{
font-size: 18px;
.title_{
font-size: 16px;
color: #333333;
font-weight: bold;
}
.hui-bottom{
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-around;
background: #fafafc;
padding: 20px 10px;
}
.shang-biao{
font-size: 16px;
font-weight: bold;
justify-content: space-between;
width: 100%;
text-align: center;
}
.xia-biao{
.hang_{
width: 100%;
text-align: center;
font-size: 12px;
white-space: nowrap; //不换行
overflow: hidden; //超出部分隐藏
text-overflow: ellipsis; //文本溢出显示省略号
font-size: 14px;
color: #777777;
margin: 14px auto;
overflow: auto;
}
</style>