167 lines
4.6 KiB
Vue
167 lines
4.6 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'];
|
||
// 判断是否需要设置层级
|
||
if (typeof this['zIndex'] == 'string' && !isNaN(+this['zIndex']) || typeof this['zIndex'] == 'number') {
|
||
style['z-index'] = this['zIndex'];
|
||
};
|
||
|
||
// if(typeof this['zindex'] == 'string' && this['zindex'] == 'none'){
|
||
|
||
// }
|
||
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['BrandInfor']['brand_id'] == 5) {
|
||
return this.qnyurl('load.png?', 'mdl');
|
||
} else if (this['BrandInfor']['brand_id'] == 19) {
|
||
return this.qnyurl('load.png?', 'dyp');
|
||
}else if (this['BrandInfor']['brand_id'] == 2) {
|
||
// return this.qnyurl('load.png', 'nx');
|
||
}
|
||
} else if (this['GetType'] == 'close') {
|
||
// 闭店
|
||
if (this['BrandInfor']['brand_id'] == 2) {
|
||
return this.qnyurl('closureimg.png','nx');
|
||
}
|
||
return this.qnyurl('closureimg.png', 'rx');
|
||
} else if (this['GetType'] == 'orders') {
|
||
if (this['BrandInfor']['brand_id'] == 2) {
|
||
return this.qnyurl('orderno.png','nx');
|
||
}
|
||
return this.qnyurl('orderno.png', 'rx');
|
||
// 没有订单
|
||
// if (this['BrandInfor']['brand_id'] == 13) {
|
||
// return this.qnyurl('orderno.png', 'rx');
|
||
// } else if (this['BrandInfor']['brand_id'] == 13) {
|
||
// return this.qnyurl('orderno.png', 'rx');
|
||
// } else if (this['BrandInfor']['brand_id'] == 13) {
|
||
// return this.qnyurl('orderno.png', 'rx');
|
||
// } else if (this['BrandInfor']['brand_id'] == 13) {
|
||
// return this.qnyurl('orderno.png', 'rx');
|
||
// }
|
||
} else if (this['GetType'] == 'store') {
|
||
// 没有门店
|
||
if (this['BrandInfor']['brand_id'] == 2) {
|
||
return this.qnyurl('closureimg.png','nx');
|
||
}
|
||
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>
|