134 lines
3.3 KiB
Vue
134 lines
3.3 KiB
Vue
<template>
|
||
<view class="b-load" :style="[Style]" v-show="display">
|
||
<view class="b-load-content">
|
||
<view class="b-load-content-Img">
|
||
<image :src="LoadImg" mode="" :style="[ImgStyle]"></image>
|
||
</view>
|
||
<view class="b-load-content-text" :style="[TextStyle]">
|
||
{{LoadText}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 点餐加载组件
|
||
* @property { Boolean } show 组件显示
|
||
* @property { String } position 加载组件的定位对应css中的定位属性，值为absolute时组件父元素必须是relative
|
||
* @property { String } background 加载组件的背景色，16进的或者rgba都可以
|
||
* @property { String } img 组件加载中图片
|
||
* @property { String } type 加载组件类型
|
||
* @property { String } color 提示文字颜色
|
||
*/
|
||
|
||
// 加载中 load
|
||
// 加载中 close
|
||
// 加载中 orders
|
||
// 加载中 store
|
||
import props from './prop.js';
|
||
import mixin from '@/static/js/mixin/mixin.js'
|
||
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
|
||
export default {
|
||
mixins:[props,mixin,restaurantmixins],
|
||
name: "b-load",
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
computed:{
|
||
display(){
|
||
console.log('组件状态');
|
||
return this['show']
|
||
},
|
||
GetType(){
|
||
return this['type']
|
||
},
|
||
Style(){
|
||
let style = {};
|
||
style['position'] = this['position'];
|
||
style['background-color'] = this['background'];
|
||
style['z-index'] = new Date().getTime();
|
||
return style;
|
||
},
|
||
ImgStyle() {
|
||
return {
|
||
width: `${this['width']}rpx`,
|
||
height: `${this['height']}rpx`
|
||
}
|
||
},
|
||
TextStyle(){
|
||
return {
|
||
color:this['color']
|
||
};
|
||
},
|
||
LoadText() {
|
||
if(this['text'] != ''){
|
||
return this['text'];
|
||
}
|
||
// 加载中
|
||
if (this['GetType'] == 'load') {
|
||
return '加载中，请稍后'
|
||
} else if (this['GetType'] == 'close') {
|
||
// 闭店
|
||
return '抱歉，该门店已打烊'
|
||
|
||
} else if (this['GetType'] == 'orders') {
|
||
// 没有订单
|
||
return '您还没有小食订单 '
|
||
|
||
} else if (this['GetType'] == 'store') {
|
||
// 没有门店
|
||
return '该地区暂无门店信息'
|
||
}
|
||
},
|
||
LoadImg() {
|
||
if(this['img'] != ''){
|
||
return this['img'];
|
||
}
|
||
// 加载中
|
||
if (this['GetType'] == 'load') {
|
||
if(this['BrandInfor']['brand_id'] == 1){
|
||
return this.qnyurl('kdjload.png')
|
||
}else if(this['BrandInfor']['brand_id'] == 10){
|
||
return this.qnyurl('load.gif', 'xbk')
|
||
}else if(this['BrandInfor']['brand_id'] == 13){
|
||
return this.qnyurl('load.png', 'rx')
|
||
}
|
||
} else if (this['GetType'] == 'close') {
|
||
// 闭店
|
||
return this.qnyurl('closureimg.png', 'rx')
|
||
} else if (this['GetType'] == 'orders') {
|
||
// 没有订单
|
||
return this.qnyurl('orderno.png', 'rx')
|
||
} else if (this['GetType'] == 'store') {
|
||
// 没有门店
|
||
return this.qnyurl('default.png', 'rx')
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.b-load {
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
&-content{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items:center;
|
||
flex-direction:column;
|
||
justify-content: center;
|
||
&-text{
|
||
margin-top: 34rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|