143 lines
3.1 KiB
Vue
143 lines
3.1 KiB
Vue
<template>
|
||
<view class="lists">
|
||
<block v-if="lists.length > 0">
|
||
<view class="header-flex">
|
||
门店数量{{total}}
|
||
<view class="add-btn" @click="$Router.push({name: 'shopCreate'})">添加门店</view>
|
||
</view>
|
||
<view class="lists-item" v-for="(item, index) in lists" :key="index" @click="$Router.push({name: 'shopCreate', params: { id: item.store_id }})">
|
||
<view class="header">
|
||
<image class="logo" :src="item.cover" mode="aspectFill"></image>
|
||
<view class="title">{{item.name}}</view>
|
||
<view class="time"><text>营业时间{{item.start_time}} 至 {{item.end_time}}</text></view>
|
||
<view class="icons">
|
||
<uni-icons type="arrowright" color="#999" size="18"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="address">店铺地址：{{item.address}}</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="list-null">
|
||
<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
|
||
<view class="sub-title">暂未创建店铺/部门</view>
|
||
<view class="sub-btn" @click="$Router.push({name: 'shopCreate'})">创建</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { shops } from '@/apis/interfaces/shop'
|
||
export default {
|
||
data() {
|
||
return {
|
||
lists: [],
|
||
total: 0
|
||
};
|
||
},
|
||
onShow(){
|
||
shops().then(res => {
|
||
this.lists = res.data
|
||
this.total = res.page.total
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 添加员工header
|
||
.header-flex{
|
||
background: white;
|
||
padding: ($padding/2) $padding;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: $margin - 10;
|
||
line-height: 60rpx;
|
||
color: $text-gray;
|
||
.add-btn{
|
||
background: $mian-color;
|
||
color: white;
|
||
width: 150rpx;
|
||
text-align: center;
|
||
font-size: $title-size-m;
|
||
}
|
||
}
|
||
// 空提示
|
||
.list-null{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
padding-bottom: 20vh;
|
||
box-sizing: border-box;
|
||
background: white;
|
||
text-align: center;
|
||
@extend .vertical;
|
||
.sub-title{
|
||
color: $text-gray;
|
||
font-size: $title-size-m;
|
||
}
|
||
.icon{
|
||
width: 288rpx;
|
||
}
|
||
.sub-btn{
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
text-align: center;
|
||
background: $mian-color;
|
||
color: white;
|
||
display: inline-block;
|
||
margin-top: $margin*2;
|
||
}
|
||
}
|
||
// 列表
|
||
.lists-item{
|
||
background: white;
|
||
margin: $margin;
|
||
border-radius: $radius/2;
|
||
padding: $padding;
|
||
.header{
|
||
position: relative;
|
||
padding-left: 128rpx;
|
||
padding-right: 100rpx;
|
||
min-height: 108rpx;
|
||
padding-bottom: $padding - 10;
|
||
.logo{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.title{
|
||
line-height: 60rpx;
|
||
font-size: $title-size;
|
||
font-weight: bold;
|
||
}
|
||
.time{
|
||
line-height: 40rpx;
|
||
font-size: $title-size-sm;
|
||
text{
|
||
background-color: $border-color-lg;
|
||
color: $text-gray;
|
||
padding: 0 $padding/2;
|
||
}
|
||
}
|
||
.icons{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
line-height: 108rpx;
|
||
}
|
||
}
|
||
.address{
|
||
border-top: solid 1rpx $border-color;
|
||
padding-top: $padding - 10;
|
||
font-size: $title-size-m;
|
||
color: $text-gray;
|
||
left: 50rpx;
|
||
}
|
||
}
|
||
</style>
|