203 lines
4.1 KiB
Vue
203 lines
4.1 KiB
Vue
<template>
|
|
<view class="b-restaurant-state">
|
|
<!-- 肯德基 -->
|
|
<template v-if="BrandInfor['brand_id'] == 1">
|
|
<view class="b-restaurant-state-KDJ" :style="{
|
|
'backgroundColor':type == 1?activation:inactivated,
|
|
'color':type == 1?activationcolor:inactivatedcolor,
|
|
}">
|
|
{{ type | state}}
|
|
</view>
|
|
</template>
|
|
<!-- 奈雪 -->
|
|
<template v-if="BrandInfor['brand_id'] == 2">
|
|
<view class="b-restaurant-state-NX">
|
|
<view class="b-restaurant-state-NX-Name">
|
|
{{Brand()['BrandName']}}
|
|
</view>
|
|
<view class="b-restaurant-state-NX-Tiem">
|
|
{{item['open_time']}}-{{item['close_time']}}
|
|
<!-- 07:30-20:00 -->
|
|
<!-- 今日休息中 -->
|
|
</view>
|
|
<view class="b-restaurant-state-NX-status" v-if="!item['is_open']">
|
|
未营业
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<!-- 瑞幸 -->
|
|
<template v-if="BrandInfor['brand_id'] == 13">
|
|
<view class="b-restaurant-state-RX">
|
|
<view class="b-restaurant-state-RX-Name">
|
|
{{Brand()['BrandName']}}
|
|
</view>
|
|
<view class="b-restaurant-state-RX-Tiem">
|
|
{{item['open_time']}}-{{item['close_time']}}
|
|
<!-- 07:30-20:00 -->
|
|
<!-- 今日休息中 -->
|
|
</view>
|
|
<view class="b-restaurant-state-RX-status" v-if="!item['is_open']">
|
|
未营业
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 混入
|
|
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
|
/**
|
|
* @店铺状态组件
|
|
* */
|
|
import {
|
|
mapGetters,
|
|
} from 'vuex';
|
|
export default {
|
|
mixins:[restaurantmixins],
|
|
name: "b-restaurant-state",
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
// 状态
|
|
type: {
|
|
type: [Number,String],
|
|
default: 1
|
|
},
|
|
// 营业中背景色
|
|
activation: {
|
|
type: String,
|
|
default: '#C63836'
|
|
},
|
|
// 营业中文字颜色
|
|
activationcolor: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
// 未营业背景色
|
|
inactivated: {
|
|
type: String,
|
|
default: '#F6F6F6'
|
|
},
|
|
// 未营业文字颜色
|
|
inactivatedcolor: {
|
|
type: String,
|
|
default: '#999999'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
// 获取品牌Id
|
|
BrandInfor: 'shopping/BrandInfor',
|
|
}),
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
|
|
filters: {
|
|
state(v) {
|
|
switch (v) {
|
|
case 1:
|
|
return '点餐';
|
|
case 0:
|
|
return '未营业';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 肯德基样式
|
|
.b-restaurant-state-KDJ {
|
|
width: 96rpx;
|
|
height: 32rpx;
|
|
font-size: $FONTSIZE24;
|
|
text-align: center;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
// 瑞幸咖啡
|
|
.b-restaurant-state-RX {
|
|
width: auto;
|
|
height: 38rpx;
|
|
border-radius: 5rpx;
|
|
display: flex;
|
|
|
|
&-Name {
|
|
width: 111rpx;
|
|
color: #ffffff;
|
|
font-size: $FONTSIZE24;
|
|
background: linear-gradient(-77deg, $THEMECOLOR6, #83ACFF);
|
|
line-height: 38rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
&-Tiem {
|
|
border: 1rpx solid $THEMECOLOR6;
|
|
color: #83ACFF;
|
|
line-height: 32rpx;
|
|
font-size: $FONTSIZE24;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
&-status {
|
|
width: 91rpx;
|
|
height: 38rpx;
|
|
background: #FFFFFF;
|
|
border: 1rpx solid #CCCCCC;
|
|
border-radius: 5rpx;
|
|
color: #CCCCCC;
|
|
font-size: $FONTSIZE24;
|
|
margin-left: 10rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
// 奈雪
|
|
// 瑞幸咖啡
|
|
.b-restaurant-state-NX {
|
|
width: auto;
|
|
height: 38rpx;
|
|
border-radius: 5rpx;
|
|
display: flex;
|
|
|
|
&-Name {
|
|
width: 111rpx;
|
|
color: #ffffff;
|
|
font-size: $FONTSIZE24;
|
|
background: linear-gradient(-77deg, #9BC419, #B0D342);
|
|
line-height: 38rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
&-Tiem {
|
|
border-top: 1rpx solid $themeBackColor-2-1;
|
|
border-bottom: 1rpx solid $themeBackColor-2-1;
|
|
border-right: 1rpx solid $themeBackColor-2-1;
|
|
color: $themeBackColor-2-1;
|
|
line-height: 32rpx;
|
|
font-size: $FONTSIZE24;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
&-status {
|
|
width: 91rpx;
|
|
height: 38rpx;
|
|
background: #FFFFFF;
|
|
border: 1rpx solid #CCCCCC;
|
|
border-radius: 5rpx;
|
|
color: #CCCCCC;
|
|
font-size: $FONTSIZE24;
|
|
margin-left: 10rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|