uniapp微信小程序 红点提示
从接口获取参数内容，判断是否显示红点，如果值不是0就显示红点，点击红点触发更新隐藏红点。
代码
<template>
<div class="diandian">
<div @click="getEdit">
<slot></slot>
</div>
<div class="dians" v-if="isShow" :style="{right:right+'rpx',top:top+'rpx'}"></div>
</div>
</template>
<script>
import {
mapState,
mapGetters,
mapMutations
} from 'vuex';
import {
stateedit,
stateget
} from '@/config/api.js'
export default {
name: "tabs",
components: {},
props: {
types: {
type: String,
default () {
return '';
}
},
right: {
type: Number,
default () {
return 0;
}
},
top: {
type: Number,
default () {
return 0;
}
},
},
computed: {
...mapGetters(['footerActive', 'states']),
isShow: function() {
var isShow = 0
// ar (integer, optional): 仲裁中 0 没有 1 有 ,
// arbitration (integer, optional): 仲裁中心 0 没有 1 有 ,
// bi (integer, optional): 竞标中 0 没有 1 有 ,
// ca (integer, optional): 已取消 0 没有 1 有 ,
// end (integer, optional): 已完成 0 没有 1 有 ,
// go (integer, optional): 进行中 0 没有 1 有 ,
// id (integer, optional): id-后台填充 ,
// ok (integer, optional): 服务商-待确定 0 没有 1 有 ,
// pay (integer, optional): 代付款 0 没有 1 有 ,
// sar (integer, optional): 服务商-仲裁中 0 没有 1 有 ,
// sbi (integer, optional): 服务商-竞标中 0 没有 1 有 ,
// sca (integer, optional): 服务商-已取消 0 没有 1 有 ,
// send (integer, optional): 服务商-已完成 0 没有 1 有 ,
// sgo (integer, optional): 服务商-进行中 0 没有 1 有 ,
if (this.types == 'all') {
if (this.states.ar || this.states.arbitration || this.states.bi || this.states.ca ||
this.states.end ||
this.states.go ||
this.states.ok ||
this.states.pay ||
this.states.sar ||
this.states.sbi ||
this.states.sca ||
this.states.send ||
this.states.sgo
) {
isShow = true
}
} else if (this.types == 'workers') {
if (this.states.sar ||
this.states.ok ||
this.states.sbi ||
this.states.sca ||
this.states.send ||
this.states.sgo) {
isShow = true
}
} else if (this.types == 'employers') {
if (this.states.ar || this.states.bi || this.states.ca ||
this.states.end ||
this.states.go ||
this.states.pay
) {
isShow = true
}
} else {
if (this.states[this.types]) {
console.log(this.states[this.types])
console.log(this.types)
console.log('有红点' + this.types)
isShow = true
}
}
return isShow
},
},
data() {
return {
datas: {}
}
},
watch: {},
mounted() {},
methods: {
gettypes() {
if (this.types == 'ar') {
this.datas = {
ar: 0
}
}
if (this.types == 'arbitration') {
this.datas = {
arbitration: 0
}
}
if (this.types == 'bi') {
this.datas = {
bi: 0
}
}
if (this.types == 'ca') {
this.datas = {
ca: 0
}
}
if (this.types == 'end') {
this.datas = {
end: 0
}
}
if (this.types == 'go') {
this.datas = {
go: 0
}
}
if (this.types == 'ok') {
this.datas = {
ok: 0
}
}
if (this.types == 'pay') {
this.datas = {
pay: 0
}
}
if (this.types == 'sar') {
this.datas = {
sar: 0
}
}
if (this.types == 'sbi') {
this.datas = {
sbi: 0
}
}
if (this.types == 'sca') {
this.datas = {
sca: 0
}
}
if (this.types == 'send') {
this.datas = {
send: 0
}
}
if (this.types == 'sgo') {
this.datas = {
sgo: 0
}
}
},
getdata() {
var that = this;
var uid = uni.getStorageSync('userid')
if (uid) {
stateget({
id: uid,
}, {
custom: {
auth: true
}
}).then(res => {
if (res.code == 200) {
that.$store.commit('states', res.data);
}
}).catch(err => {
})
}
},
getEdit() {
if (this.types == 'all' || this.types == 'workers' || this.types == 'employers') {} else {
this.editdata()
}
},
// 更新红点
editdata() {
var that = this;
this.gettypes()
stateedit({
userId: uni.getStorageSync('userid'),
...this.datas
}, {
custom: {
auth: true
}
}).then(res => {
if (res.code == 200) {
that.getdata()
}
}).catch(err => {
})
},
}
}
</script>
<style scoped lang="scss">
.dians {
border-radius: 50%;
width: 20rpx;
height: 20rpx;
position: absolute;
margin-left: 30rpx;
top: 0rpx;
right: 0;
background: #FF0000;
}
.diandian {
position: relative;
}
</style>
实例
<template>
<div class="tabbody">
<div class="tabsx" :class="{active:active==1}">
<div class="tabx cur" :class="{active:active==index}" @click="getactive(index)" v-for="(item,index) in list"
:key="index">
<dian v-if="item=='订单' && active==0" :right="-20" :top="0" types="employers">
<span>{{ item }}</span>
</dian>
<span v-else>{{ item }}</span>
</div>
</div>
</div>
</template>
<script>
import dian from '@/components/dian.vue'
export default {
name: "tabs",
components: {
dian
},
props: {
list: {
type: Array,
default () {
return ['关注', '粉丝'];
}
}
},
data() {
return {
active: 0
}
},
watch: {},
mounted() {},
methods: {
getactive(e) {
this.active = e
this.$emit('getactive', e)
},
}
}
</script>
<style lang="scss" scoped>
.tabbody {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
height: 110rpx;
}
.tabsx {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
background: url('https://cdn.hifreeter.com/xiaochengxu/static/tabbg.png') no-repeat;
width: 353rpx;
height: 56rpx;
background-size: 100% 100%;
.tabx {
font-size: 24rpx;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #000000;
display: flex;
justify-content: center;
width: 160rpx;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
span {
font-size: 28rpx;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #7D7D7D;
}
}
.tabx.active {
span {
color: #FFFFFF;
}
}
}
.tabsx.active {
background: url('https://cdn.hifreeter.com/xiaochengxu/static/tabbgactive.png') no-repeat;
width: 353rpx;
height: 56rpx;
background-size: 100% 100%;
}
</style>
