前端
This commit is contained in:
xvv
parent
aaa5ca3c24
commit
4d8dfc98af
BIN
fuintAdmin_zt/src/assets/images/banner.png
Normal file
BIN
fuintAdmin_zt/src/assets/images/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
fuintAdmin_zt/src/assets/images/l-one.png
Normal file
BIN
fuintAdmin_zt/src/assets/images/l-one.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
fuintAdmin_zt/src/assets/images/l-three.png
Normal file
BIN
fuintAdmin_zt/src/assets/images/l-three.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
fuintAdmin_zt/src/assets/images/l-two.png
Normal file
BIN
fuintAdmin_zt/src/assets/images/l-two.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
@ -1,177 +1,67 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-card >
|
<div class="bannser">
|
||||||
<el-row :gutter="24">
|
<img src="../../assets/images/banner.png" alt="" >
|
||||||
<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>
|
</div>
|
||||||
<div class="box-wrap">
|
<div class="b-bs">
|
||||||
<div class="zong-box" v-for="(items,index) in item.storeList" :key="index" >
|
<div class="left-box">
|
||||||
<div class="pur-box" @click="godetails(items.id)">
|
<div class="san-box">
|
||||||
<el-tag type="success" v-if="items.status=='qy'">启用</el-tag>
|
<div>
|
||||||
<el-tag type="danger" v-else>禁用</el-tag>
|
<img src="../../assets/images/l-one.png" style="width: 80px;height: 80px">
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hui-bottom">
|
<div>
|
||||||
<div>
|
<div class="r-title">568</div>
|
||||||
<div class="shang-biao">{{item.storeList.length || 0}}</div>
|
<div class="r-size">合作油站总数</div>
|
||||||
<div class="xia-biao">创建门店数（个）</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
|
||||||
<!-- <div class="shang-biao">{{ items.userNum}}</div> -->
|
<div>
|
||||||
<div class="shang-biao">{{ items.userNum}}</div>
|
<img src="../../assets/images/l-two.png" style="width: 80px;height: 80px">
|
||||||
<div class="xia-biao">会员数（人）</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<div class="r-title">568</div>
|
||||||
<div class="shang-biao">{{ items.orderNum}}</div>
|
<div class="r-size">合作油站总数</div>
|
||||||
<div class="xia-biao">支付订单（笔）</div>
|
</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="r-title">568</div>
|
||||||
|
<div class="r-size">合作油站总数</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Storelist,getUserNumApi,
|
|
||||||
getOrderNumApi } from "@/api/service/service";
|
|
||||||
export default {
|
export default {
|
||||||
name: 'service',
|
|
||||||
dicts: ['zhzt'],
|
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
form: {
|
form: {},
|
||||||
name: '',
|
|
||||||
region: '',
|
|
||||||
date1: '',
|
|
||||||
date2: '',
|
|
||||||
delivery: false,
|
|
||||||
type: [],
|
|
||||||
resource: '',
|
|
||||||
desc: ''
|
|
||||||
},
|
|
||||||
imagePath: process.env.VUE_APP_SERVER_URL,
|
imagePath: process.env.VUE_APP_SERVER_URL,
|
||||||
|
|
||||||
arrlist:[],
|
|
||||||
value1:'',
|
|
||||||
queryParams: {
|
|
||||||
storeName: '',
|
|
||||||
status: '',
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async mounted() {
|
|
||||||
await this.getlist()
|
|
||||||
},
|
|
||||||
methods:{
|
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%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
/* height: 100vh; */
|
/* height: 100vh; */
|
||||||
background: white;
|
background: #f4f5f9;
|
||||||
}
|
}
|
||||||
.ding-top{
|
.bannser{
|
||||||
width: 100%;
|
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;
|
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{
|
||||||
display: flex;
|
width: 435px;
|
||||||
align-items: center;
|
border-radius: 8px;
|
||||||
}
|
background: #fff;
|
||||||
|
border: 1px solid #FFFFFF;
|
||||||
.clearfix:before,
|
height: 192px;
|
||||||
.clearfix:after {
|
box-sizing: border-box;
|
||||||
display: table;
|
padding: 15px;
|
||||||
content: "";
|
|
||||||
}
|
}
|
||||||
.clearfix:after {
|
.right-box-t{
|
||||||
clear: both
|
width: 435px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #FFFFFF;
|
||||||
|
height: 380px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 15px;
|
||||||
}
|
}
|
||||||
.box-wrap{
|
.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;
|
||||||
|
}
|
||||||
|
.r-title{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 42px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.r-size{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.title_{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
}
|
||||||
.zong-box{
|
.hang_{
|
||||||
width: 18%;
|
width: 100%;
|
||||||
overflow: hidden;
|
white-space: nowrap; //不换行
|
||||||
border-radius: 8px;
|
overflow: hidden; //超出部分隐藏
|
||||||
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
text-overflow: ellipsis; //文本溢出显示省略号
|
||||||
margin-bottom: 30px;
|
font-size: 14px;
|
||||||
margin-right: 30px;
|
color: #777777;
|
||||||
}
|
margin: 14px auto;
|
||||||
.pur-box{
|
overflow: auto;
|
||||||
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;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #99a9bf;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
font-size: 18px;
|
|
||||||
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;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.xia-biao{
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user