front-end/ghsApp/src/admin/changePrice/changeClass.vue

<template>
<view class="app-content" style="background:white;">
	<view class="billing_box_bg">
    <view class="input-wrap">
			<view style="padding:0upx 0upx 0upx 0upx;margin-right:10upx;" >
				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片分类</button>
			</view>
			<view class="search-bar">
				<app-search-module v-model="py" placeholder="输入拼音首字母搜索" @input="searchFn"/>
			</view>
		</view>

		<view class="scroll-middle_bx">
			<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop">
				<div v-for="(item, index) in globalClassItemList" :key="index" class="tab-bar-item" :class="[classIndex == index ? 'active' : '']" :data-current="index" @tap.stop="swichClass(index)">
					<text>{{ item.className || "" }}</text>
				</div>
			</scroll-view>
				<scroll-view scroll-y class="right-box" 
					:scroll-into-view="scroll_into_view" 
					scroll-with-animation="true"
					@scroll="scroll_detail"
					lower-threshold="100"
					@scrolltolower="scroll_bottom">

				<block v-if="!$util.isEmpty(globalClassItemList)">
					<view class="item_list_bx selectAll" v-for="(classItem, classIndex) in globalClassItemList" :key="classIndex" :id="`class_${classIndex}`">
						<view class="item_list_title"> {{ classItem.className }} 
							<text style="float:right;color:#3385FF;margin-right:50upx;font-size:30upx;" @click="getCurrentAll(classIndex)">全选 / 取消</text>
						</view>

						<view v-if="classItem.child && !$util.isEmpty(classItem.child)">

							<template v-for="(productItem, productIndex) in classItem.child">
								<view style="height:230upx" :id="`class_${classIndex}`" :key="productIndex">
									<ItemComponent :ref="`item_${productItem.id}`" v-if="classItem.isActive" :isPrice="false" @checkItem="checkItemEvent" :info="productItem"></ItemComponent>
								</view>
							</template>

						</view>
						<view v-else>
							<view style="height:260upx;text-align:center;color:#CCCCCC;position: relative;">
								<view style="position: absolute;margin:auto;top:130upx;left:0;right:0;bottom:0;">暂无花材</view>
							</view>
						</view>

					</view>
				</block>
				<block v-else>
					<view style="width: 100%">
						<app-wrapper-empty  title="加载中" :is-empty="$util.isEmpty(globalClassItemList)"/>
					</view>
				</block>

			</scroll-view>
		</view>

      <div class="app-footer">
		<button class="admin-button-com big blue" @click="modifyClass()">所选花材移动到</button>
      </div>

		<uni-popup ref="selectFlowerNumRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
			<view style="display:flex;padding:20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">

				<view v-for="(item, index) in globalClassItemList" :key="index" @tap.stop="changeClass(index)" style="margin-bottom:20upx;margin-left:3upx;">
				<image :src="item.classCover" style="width:120upx;height:120upx;border-radius:10upx;"></image>
				<view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:120upx;text-align:center;">{{item.className}}</view>
				</view>

			</view>
		</uni-popup>

		<image v-if="showClassRemind" @click="hideClassRemind" style="position:absolute;width:610upx;height:699upx;top:225upx;left:80upx;z-index:9999;" :src="`${constant.imgUrl}/class_remind.png`"></image>

		<modal-module :show="showClassModel" @cancel="cancelModifyClass" @click="confirmModifyClass" title=" " color="#333" :size="32" padding="30rpx 30rpx" >
			<template slot="customContent">
				<view style="padding:30upx 0">

<view class="module-com input-line-wrap">
	<tui-list-cell class="line-cell" :arrow="true">
		<view class="tui-title">分类</view>
		<picker mode="selector" :value="classId" :range="itemClassData" range-key="name" @change="changeItemClassFn" class="tui-input" >
		<view v-if="Number(classId)>0" style="height:45upx;" >{{ itemClassSelectedData.name }}</view>
		<view class="tui-placeholder" style="height:45upx;" v-else>请选择</view>
		</picker>
	</tui-list-cell>
</view>


				</view>
			</template>
		</modal-module>


	</view>
</view>
</template>
<script>
import AppSearchModule from "@/components/module/app-search";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ItemComponent from "./components/outItem";
import productMins from "@/mixins/product";
import { batchModifyClass } from "@/api/product";
import { mapGetters } from "vuex";
import ModalModule from "@/components/plugin/modal";
import TuiListCell from "@/components/plugin/list-cell";
import { getAllItemClass } from "@/api/item-class";
export default {
	name: "outlist",
	components: {
		AppSearchModule,
		AppWrapperEmpty,
		ItemComponent,
		ModalModule,
		TuiListCell
	},
	mixins: [productMins],
	data() {
		return {
			autoLoad: false,
			selectJobType: "stock",
			tabIndex: 0,
			priceArr:[],
			showClassRemind:false,
			currentList:[],
			itemClassData:[],
			itemClassSelectedData:{},
			classId:0,
			showClassModel:false
		};
	},
	computed:{
		...mapGetters(["getMyShopInfo","getLoginInfo"]),
	},
	onLoad() {
		this.initProduct()

		getAllItemClass().then(res => {
			if (this.$util.isEmpty(res.data)){
				return false;
			}
			this.itemClassData = res.data;
		})

	},
	methods: {
		changeItemClassFn(e) {
			this.itemClassSelectedData = this.itemClassData[e.detail.value];
			this.classId = this.itemClassSelectedData.id;
		},
		getCurrentAll(index){
			let that = this
			let child = this.globalClassItemList[index] && this.globalClassItemList[index].child ? this.globalClassItemList[index].child : []
			if(!this.$util.isEmpty(child)){
				child.forEach((item) => {
					let id = item.id
					let current = 'item_'+id
					that.$refs[current][0].checkEvent()
				})
			}
		},
		modifyClass(){
			this.showClassModel = true
		},
		confirmModifyClass(val){
			if (val.index === 0) {
				this.cancelModifyClass();
				return false
			}
			let that = this
			if(this.$util.isEmpty(this.currentList)){
				this.$msg('请选择花材')
				return false
			}
			if(Number(this.classId)==0){
				this.$msg('请选择分类')
				return false
			}
			this.$util.confirmModal({content:'确认移动？'},() => {
				batchModifyClass({ids:JSON.stringify(that.currentList),classId:that.classId}).then(res=>{
					if(res.code == 1){
						that.cancelModifyClass()
						that.$msg(res.msg)
						that.initProduct()
					}
				})
			})
		},
		cancelModifyClass() {
			this.showClassModel = false;
			this.classId = 0
			this.itemClassSelectedData = {}
		},
		checkItemEvent(item,check) {
			let id = item.id
			if(check == true){
				const index = this.currentList.indexOf(id);
				if (index == -1) {
					this.currentList.push(id)
				}
			}else{
				const index = this.currentList.indexOf(id);
				if (index > -1) {
					this.currentList.splice(index, 1)
				}
			}
		},
		changeClass(index){
			this.$refs.selectFlowerNumRef.close()
			this.swichClass(index)
		},
		selectFlowerNumFn(){
			this.$refs.selectFlowerNumRef.open('top')
		},
		initProduct(){
			this.initData({ requestType:'itemList',status:0,delStatus:0})
		}
	}
};
</script>

<style lang="scss" scoped>
.billing_box_bg {
	height: 100%;
	background: white;
	display: flex;
	background:white;
	flex-direction: column;
	.input-wrap {
		display: flex;
		padding: 22upx 20upx 22upx 13upx;
		.search-bar {
			flex: 1;
		}
		.city-select {
			display: flex;
			flex-shrink: 0;
			align-items: center;
			margin-right: 15upx;
			margin-left: 45upx;
			background-color: #ffff;
			.iconfont {
				margin-left: 20upx;
				font-size: 30upx;
			}
		}
	}
	.scroll-middle_bx {
		flex: 1;
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.tab-view {
		height: calc(100vh - 140upx);
		width: 170upx;
		flex-shrink: 0;
		background-color: #f0f2f6;
		.tab-bar-item {
			position: relative;
			width: 170upx;
			height: 90upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26upx;
			color: #444;
			font-weight: 400;
			.tag {
				display: flex;
				padding: 0 20upx;
				align-items: center;
				position: absolute;
				right: 0;
				top: 0;
				height: 32upx;
				background: #ff2842;
				border-radius: 16upx;
				color: #fff;
				font-size: 20upx;
			}
      &:last-child{
        margin-bottom: 110upx;
      }
		}

		.active {
			position: relative;
			color: $mainColor;
			font-size: 26upx;
			background: #fff;
		}

		.active::before {
			content: "";
			position: absolute;
			border-left: 8upx solid $mainColor;
			height: 100%;
			left: 0;
		}
	}
	.right-box {
		height: calc(100vh - 230upx);
		flex: 1;
		box-sizing: border-box;
	}
	.item_list_bx {
		padding: 40upx 16upx;
	}
	.item_list_title {
		margin-bottom: 20upx;
		font-size: 24upx;
		font-weight: 600;
		color: #666666;
	}
	.select-cmd_bx {
		& .kc {
			color: #999999;
			font-size: 28upx;
			font-weight: 400;
			margin-bottom: 60upx;
			text-align: center;
			margin-top: 10upx;
		}
		& .num_bx {
			display: flex;
			align-items: center;
			margin-bottom: 80upx;
			& > input {
				width: 212upx;
				height: 80upx;
				border: 1upx solid #dddddd;
				border-radius: 4upx;
				text-align: center;
				margin-right: 24upx;
			}
		}
	}
	.app-footer {
		justify-content: space-evenly;
		z-index: 9999;
		.admin-button-com {
			width: 60%;
		}
		button{
			width:600upx;
		}
	}
}
.class-popup-style{
	z-index:999999;
}
</style>