141 lines
3.2 KiB
Vue
141 lines
3.2 KiB
Vue
<template>
|
|
<view class="b-shop-load" v-show="display">
|
|
<view :style="[position]" class="content">
|
|
<view class="Status-Img">
|
|
<image :src="Img" :style="[Style]" class="img"></image>
|
|
</view>
|
|
<!-- 提示文字 -->
|
|
<view class="Prompt-Text">
|
|
{{Text}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 父组件必须存在position: relative;属性
|
|
/**
|
|
* @param { String } type
|
|
* */
|
|
import mixin from '@/static/js/mixin/mixin.js'
|
|
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
|
|
export default {
|
|
name: "b-shop-load",
|
|
mixins: [mixin,restaurantmixins],
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: "120"
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: "120"
|
|
},
|
|
// 需要带入单位
|
|
offset:{
|
|
type:[Array,String],
|
|
default:'content'
|
|
},
|
|
show:{
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
},
|
|
computed: {
|
|
// 动态监听
|
|
display(){
|
|
console.log('组件计算属性',this['show']);
|
|
return this['show']
|
|
},
|
|
// 动态监听
|
|
GetType() {
|
|
return this['type'];
|
|
},
|
|
Style() {
|
|
return {
|
|
width: `${this['width']}rpx`,
|
|
height: `${this['height']}rpx`
|
|
}
|
|
},
|
|
|
|
Text() {
|
|
// 加载中
|
|
if (this['GetType'] == 'load') {
|
|
return '加载中，请稍后'
|
|
} else if (this['GetType'] == 'close') {
|
|
// 闭店
|
|
return '抱歉，该门店已打烊'
|
|
|
|
} else if (this['GetType'] == 'orders') {
|
|
// 没有订单
|
|
return '您还没有小食订单 '
|
|
|
|
} else if (this['GetType'] == 'store') {
|
|
// 没有门店
|
|
return '该地区暂无门店信息'
|
|
}
|
|
},
|
|
Img() {
|
|
// 加载中
|
|
if (this['GetType'] == 'load') {
|
|
if(this['BrandInfor']['brand_id'] == 1){
|
|
return this.qnyurl('load.png', 'rx')
|
|
}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'] == 19){
|
|
return this.qnyurl('load.png', 'dyp')
|
|
}
|
|
} 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')
|
|
}
|
|
},
|
|
|
|
position(){
|
|
if(typeof this['offset'] == 'string' && this['offset'] == 'content'){
|
|
return {top:'50%',left:'50%',transform:'translate(-50%,-50%)'}
|
|
}
|
|
return {top:this['offset'][0],left:this['offset'][1]}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.b-shop-load {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-color: #ffffff;
|
|
z-index: 10000;
|
|
.content{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
}
|
|
.Prompt-Text {
|
|
margin-top: 34rpx;
|
|
color: #999999;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
</style>
|