daoji_h5/components/abnor.vue

323 lines
6.4 KiB
Vue
Raw Normal View History

2024-03-21 05:53:51 +00:00
<template>
<view class="abnor" :style="{paddingBottom: percent}">
<view class="abnor-box">
<image mode="aspectFit" class="abnor-image" v-if="pimage" :src="pimage"></image>
<view class="abnor-text" v-if="ptitle">{{ptitle}}</view>
<view @tap.stop="emitAbnorTipTap" class="abnor-tip" :class="[{'tip-flex':!tipMax}]"
:style="{maxWidth:tipMax,textAlign:tipMax?'left':''}" v-if="ptip">
<text v-for="(item,index) in ptip" :key="index"
:style="{color:item.color == 1 ? primaryColor:''}">{{item.text}}</text>
</view>
<block v-if="pbutton">
<block v-for="(item,index) in pbutton" :key="index">
<view class="abnor-btn" :class="btnSize"
:style="{background:item.type == 'confirm' ? primaryColor : '',color:item.type == 'confirm'?'white':''}"
@tap.stop="emitAbnorTap(index)">{{item.text}}</view>
</block>
</block>
</view>
</view>
</template>
<script>
const Types = {
'REQUEST_ERROR': {
image: 'https://lbqny.migugu.com/admin/public/request-error.png',
title: '网络加载失败',
button: [{
text: '点击刷新',
type: 'confirm'
}],
tip: []
},
'NOT_FOUND': {
image: 'https://lbqny.migugu.com/admin/public/not-found.png',
title: '很抱歉,找不到你要访问的页面',
button: [{
text: '返回',
type: 'confirm'
}],
tip: []
},
'DATA': {
image: '/static/img/qs_dingdan.png',
title: '',
button: [],
tip: [{
text: '没有相关数据哦',
color: 0
}]
},
'FOLLOW': {
image: 'https://lbqny.migugu.com/admin/public/no-follow.png',
title: '关注有趣的人',
button: [],
tip: [{
text: '不再错过他们每一条动态',
color: 0
}]
},
'FEED': {
image: 'https://lbqny.migugu.com/admin/public/no-feed.png',
title: '还没有任何反馈哦',
button: [],
tip: []
},
'SHOP': {
image: 'https://lbqny.migugu.com/admin/public/no-shop.png',
title: '稍后再来试试吧~',
button: [],
tip: []
},
'WEIBO': {
image: 'https://lbqny.migugu.com/admin/public/no-weibo.png',
title: '',
button: [],
tip: []
},
'SEARCH': {
image: 'https://lbqny.migugu.com/admin/public/no-search.png',
title: '抱歉!没找到相关商品~',
button: [],
tip: []
},
'TAG': {
image: 'https://lbqny.migugu.com/admin/public/no-tag.png',
title: '',
button: [],
tip: []
},
'MESSAGE': {
image: 'https://lbqny.migugu.com/admin/public/no-message.png',
title: '消息通知空空如也',
button: [],
tip: []
},
'LIVE': {
image: 'https://lbqny.migugu.com/admin/public/no-live.png',
title: '',
button: [],
tip: []
},
'ORDER': {
image: 'https://lbqny.migugu.com/admin/public/no-order.png',
title: "还没有相关订单哦",
button: [],
tip: []
},
'CART': {
image: 'https://lbqny.migugu.com/admin/public/no-car.png',
title: '购物车还是空的哦~',
button: [{
text: '去逛逛',
type: 'confirm'
}],
button: [],
tip: []
},
'FOOTPRINT': {
image: 'https://lbqny.migugu.com/admin/public/no-footprint.png',
title: '你还没有足迹~',
button: [],
tip: []
},
'COUPON': {
image: 'https://lbqny.migugu.com/admin/public/no-coupon.png',
title: '你还没有可用的卡券哦',
button: [],
tip: []
},
'REDUCTION': {
image: 'https://lbqny.migugu.com/admin/reduction/nodata.png',
title: '您当前没有满减券,请向工作人员索取',
button: [],
tip: []
},
'MYTEAM': {
image: 'https://lbqny.migugu.com/admin/public/no-coupon.png',
title: '没有更多了',
button: [],
tip: []
}
}
import {
mapState,
mapActions,
} from 'vuex';
export default {
name: 'abnor',
props: {
type: {
type: String,
default () {
return 'DATA'
}
},
image: {
type: String,
default () {
return ''
}
},
title: {
type: String,
default () {
return ''
}
},
tip: {
type: Array,
default () {
return []
}
},
button: {
type: Array,
default () {
return []
}
},
tipTap: {
type: String,
default () {
return ''
}
},
tipMax: {
type: String,
default () {
return '100%'
}
},
btnSize: {
type: String,
default () {
return 'big'
}
},
percent: {
type: String,
default () {
return '100%'
}
},
},
created() {
this.init();
},
data() {
return {
pimage: '',
ptitle: '',
ptip: '',
pbutton: ''
}
},
computed: mapState({
primaryColor: state => state.config.configInfo.primaryColor,
subColor: state => state.config.configInfo.subColor,
}),
methods: {
emitAbnorTipTap() {
let {
tipTap = ''
} = this
if (!tipTap) return
this.$emit(tipTap);
},
emitAbnorTap(index) {
let {
type
} = this.pbutton[index]
this.$emit(type);
},
init() {
let type = this.type;
if (Types[type]) {
this.pimage = this.image || Types[type].image;
this.ptitle = this.title || Types[type].title;
this.pbutton = this.button && this.button.length > 0 ? this.button : Types[type].button;
this.ptip = this.tip && this.tip.length > 0 ? this.tip : Types[type].tip;
}
}
},
}
</script>
<style lang="scss">
.abnor {
position: relative;
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
.abnor-box {
position: absolute;
display: flex;
top: 0;
bottom: 0;
left: 0;
right: 0;
flex-direction: column;
justify-content: center;
align-items: center;
.abnor-image {
width: 520rpx;
height: 400rpx;
background: transparent;
}
.abnor-text {
margin-top: 30rpx;
color: #333;
font-size: 32rpx;
font-weight: 400;
}
.abnor-tip {
margin: 15rpx 0 10rpx 0;
color: #999;
font-size: 26rpx;
text-align: center;
max-height: 30vh;
overflow: auto;
}
.tip-flex {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.abnor-btn {
min-width: 228rpx;
height: 66rpx;
margin-top: 30rpx;
padding: 0 30rpx;
background-color: #eee;
border: 0 none;
border-radius: 10rpx;
color: #333;
font-size: 28rpx;
text-align: center;
// overflow: hidden;
line-height: 66rpx;
}
.abnor-btn.big {
width: 690rpx;
height: 100rpx;
line-height: 100rpx;
font-size: 32rpx;
margin-top: 40rpx;
border-radius: 50rpx;
}
}
}
</style>