166 lines
3.5 KiB
Vue
166 lines
3.5 KiB
Vue
<template>
|
|
<view class="control" :style="getComputedStyle()">
|
|
<view class="u-flex control1" v-if="showControl1">
|
|
<!-- <view class="btn" @click="changeShowControl1">批量管理</view> -->
|
|
<view class="btn add font-bold u-font-28 color-fff" @tap="go.to('PAGES_PRODUCT_ADD')">商品添加</view>
|
|
<!-- <view class="color-999 btn u-flex u-row-center" @click="emitToggleCategory">
|
|
<text class="u-m-r-10">{{categoryName||'选择分类'}}</text>
|
|
<view class="arrow-down" :class="{'up':categoryShow}">
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="u-flex control2 u-row-between" v-else>
|
|
<view class="u-flex btn">
|
|
<view class="u-m-r-58">
|
|
<label class="radio" @click="changeIsSelectAll">
|
|
<radio class="scale7" @tap.stop="changeIsSelectAll" :color="ColorMain" value="" :checked="isSelectAll" />
|
|
<text>全选</text>
|
|
</label>
|
|
</view>
|
|
<view class="u-p-l-30 u-p-r-30 my-bg-main" @click="changeShowControl1">取消</view>
|
|
<view class="u-p-l-60 u-p-r-60 borde-r" @click="offShelf">下架</view>
|
|
</view>
|
|
<view class=" u-flex u-row-center btn" @click="emitToggleCategory">
|
|
<text class="u-m-r-10">分类至</text>
|
|
<uni-icons type="right" size="16" color="#fff"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {$tbShopCategory} from '@/http/yskApi/goods.js'
|
|
import go from '@/commons/utils/go.js';
|
|
import {ColorMain} from '@/commons/color.js'
|
|
import {
|
|
onMounted,
|
|
reactive,
|
|
ref
|
|
} from 'vue';
|
|
const props = defineProps({
|
|
bottom: {
|
|
type: [Number, String],
|
|
default: 30
|
|
},
|
|
categoryName:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
categoryShow:{
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
})
|
|
|
|
|
|
let showControl1 = ref(true)
|
|
const emits = defineEmits(['toggleCategory','controlChange','allCheckedChange','offShelf','categoryChange'])
|
|
|
|
function emitToggleCategory() {
|
|
emits('toggleCategory')
|
|
}
|
|
|
|
function changeShowControl1() {
|
|
showControl1.value = !showControl1.value
|
|
emits('controlChange',!showControl1.value)
|
|
}
|
|
|
|
let isSelectAll = ref(false)
|
|
|
|
function changeIsSelectAll() {
|
|
isSelectAll.value = !isSelectAll.value
|
|
emits('allCheckedChange',isSelectAll.value)
|
|
}
|
|
|
|
function getComputedStyle() {
|
|
return {
|
|
bottom: props.bottom + 'rpx'
|
|
}
|
|
}
|
|
//设置是否全选
|
|
function setisSelectAll(checked){
|
|
isSelectAll.value =checked
|
|
}
|
|
defineExpose({
|
|
setisSelectAll
|
|
})
|
|
|
|
//下架
|
|
function offShelf(){
|
|
emits('offShelf')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.scale7 {
|
|
transform: scale(0.7);
|
|
}
|
|
.add{
|
|
background-color: $my-main-color;
|
|
border-radius: 100rpx;
|
|
overflow: hidden;
|
|
}
|
|
.borde-r {
|
|
position: relative;
|
|
|
|
&::after {
|
|
display: block;
|
|
content: '';
|
|
position: absolute;
|
|
top: 20rpx;
|
|
bottom: 20rpx;
|
|
width: 2px;
|
|
background-color: #fff;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.control {
|
|
position: fixed;
|
|
left: 110rpx;
|
|
right: 110rpx;
|
|
z-index: 100;
|
|
background: #3E3A3A;
|
|
border-radius: 100rpx;
|
|
overflow: hidden;
|
|
.btn{
|
|
color: #fff;
|
|
}
|
|
.control1 {
|
|
.arrow-down {
|
|
transform: rotate(90deg);
|
|
transition: all .2s ease-in-out;
|
|
&.up{
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.control1 .btn:not(:last-child)::after {
|
|
display: block;
|
|
content: '';
|
|
position: absolute;
|
|
top: 20rpx;
|
|
bottom: 20rpx;
|
|
width: 2px;
|
|
background-color: #fff;
|
|
right: 0;
|
|
}
|
|
|
|
.control1 .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.control1 .btn,
|
|
.control2 .btn{
|
|
position: relative;
|
|
line-height: 76rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.control2 {
|
|
padding: 0 28rpx;
|
|
}
|
|
}
|
|
</style> |