You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

149 lines
2.7 KiB

<template>
<uni-popup ref="popup">
<view class="uni-bg-white">
<view class="uni-flex uni-row u-col-center space-between">
<text class="title_popup">请选择库存状态</text>
<image class="icon_close" @click="close()" src="/static/icons_ui/icon_close.svg"></image>
</view>
<u-line class="line_color"></u-line>
<view class="slot-content">
<view class="item-box">
<view class="item" v-for="(item, index) in list">
<!-- u-button自带点击变换颜色 -->
<u-button class="button" @tap="tagClick(item)" :key="index"
:class="[mIndex==index ? 'active' : '']">
<text :class="statusStyle(item.value)">{{item.text}}</text>
</u-button>
</view>
</view>
</view>
</view>
</uni-popup>
</template>
<script>
import {
getInventoryStatusStyle
} from '@/common/directory.js';
import {
getInventoryStatusArray
} from '@/common/array.js';
export default {
emits: ['updateStatus'],
data() {
return {
show: false,
mIndex: 0,
list: [],
}
},
props: {
status: {
type: String,
default: ""
},
},
watch: {
status: {
handler(newName, oldName) {
this.list = getInventoryStatusArray();
for (var i = 0; i < this.list.length; i++) {
if (this.list[i].value == this.status) {
this.mIndex = i;
break
}
}
},
immediate: true,
deep: true
}
},
mounted() {
},
onLoad() {
},
methods: {
open() {
this.$refs.popup.open('center')
},
close() {
this.$refs.popup.close()
},
statusStyle: function(val) {
return getInventoryStatusStyle(val);
},
tagClick(item) {
this.$emit('updateStatus', item.value);
this.close();
},
}
}
</script>
<style scoped lang="scss">
.slot-content {
background-color: #FFFFFF;
}
.slot-content .item-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
padding-bottom: 20rpx;
}
.slot-content {
background-color: #FFFFFF;
.item-box {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: space-between;
padding-bottom: 20rpx;
.item {
width: 33.3%;
align-items: center;
display: flex;
flex-direction: row;
}
.button {
width: 100%;
align-items: center;
display: flex;
flex-direction: row;
// border: 0.5px solid $uni-border-color;
color: $uni-border-color;
padding: 10rpx 10rpx;
margin: 20rpx 20rpx 0rpx 20rpx;
hover-start-time: 10; //点击变换颜色时间
}
.active {
background-color: #3C9CFF;
}
}
}
.active {
border: 1rpx solid #3C9CFF;
}
.content {
margin-left: 10rpx;
margin-right: 10rpx;
font-size: 32rpx;
}
</style>