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.
150 lines
2.7 KiB
150 lines
2.7 KiB
1 year ago
|
<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>
|