增加商品分组管理模块

2024-09-28 15:06:47 +08:00
parent 106de94d2a
commit 3c7918211e
13 changed files with 2865 additions and 0 deletions
--- a/pageGoodsGroup/edit-group-goods/components/control.vue
+++ b/pageGoodsGroup/edit-group-goods/components/control.vue
@@ -0,0 +1,166 @@
+<template>
+	<view class="control" :style="getComputedStyle()">
+		<view class="u-flex control1" v-if="showControl1">
+			<view class="btn" @click="changeShowControl1">批量管理</view>
+			<view class="btn" @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 u-flex-1 btn " @click="changeIsSelectAll">
+				<view class="u-m-l-28">
+					<my-radio v-model="isSelectAll" >
+						<view class="color-fff">全选</view>
+					</my-radio>
+				</view>
+					<!-- <label class="radio u-m-l-28" >
+						<radio class="scale7" @tap.stop="changeIsSelectAll" :color="ColorMain"  value="" :checked="isSelectAll" />
+						<text>全选</text>
+					</label> -->
+			</view>
+			<view class=" btn u-flex-1  my-bg-main" @click="changeShowControl1">取消</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
+		if(!showControl1.value){
+			isSelectAll.value=false
+		}
+		emits('controlChange',!showControl1.value)
+	}
+
+	let isSelectAll = ref(false)
+
+	function changeIsSelectAll() {
+		console.log('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);
+	}
+
+	.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;
+			box-sizing: border-box;
+		}
+		.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 {
+			overflow: hidden;
+			// padding: 0 28rpx;
+		}
+	}
+</style>