front-end/ghsApp/src/admin/changePrice/batchChange.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 style="text-align: center;">{{ 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="changeSelectItem()">修改所选花材价格</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="cancelModifyModel" @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="false" :hover="false">
								<view class="tui-title">大客价</view>
								<input type="digit" placeholder="请填写大客价" v-model="form.hjPrice" @focus="form.hjPrice=''" placeholder-class="tui-placeholder"/>
							</tui-list-cell>
							<tui-list-cell class="line-cell" :arrow="false" :hover="false">
								<view class="tui-title" style="color:#3385FF;font-weight:bold;">批发价</view>
								<input type="digit" placeholder="请填写批发价" v-model="form.price" @focus="form.price=''" placeholder-class="tui-placeholder"/>
							</tui-list-cell>
							<tui-list-cell class="line-cell" :arrow="false" :hover="false">
								<view class="tui-title">零售价</view>
								<input type="digit" placeholder="请填写零售价" v-model="form.skPrice" @focus="form.skPrice=''" placeholder-class="tui-placeholder"/>
							</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/changeClassItem";
	import productMins from "@/mixins/product";
	import { manyItemChangeOnePrice } from "@/api/product";
	import { mapGetters } from "vuex";
	import ModalModule from "@/components/plugin/modal";
	import TuiListCell from "@/components/plugin/list-cell";
	export default {
		name: "batchChangePrice",
		components: {
			AppSearchModule,
			AppWrapperEmpty,
			ItemComponent,
			ModalModule,
			TuiListCell
		},
		mixins: [productMins],
		data() {
			return {
				autoLoad: false,
				selectJobType: "batchChangePrice",
				tabIndex: 0,
				priceArr:[],
				showClassRemind:false,
				currentList:[],
				showClassModel:false,
				form:{price:'',hjPrice:'',skPrice:''}
			};
		},
		computed:{
			...mapGetters(["getMyShopInfo","getLoginInfo"]),
		},
		onLoad() {
			this.initProduct()
		},
		methods: {
			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()
					})
				}
			},
			changeSelectItem(){
				let that = this
				if(this.$util.isEmpty(this.currentList)){
					this.$msg('请选择花材')
					return false
				}
				this.showClassModel = true
			},
			confirmModifyClass(val){
				if (val.index === 0) {
					this.cancelModifyModel();
					return false
				}
				let that = this
				if(this.$util.isEmpty(this.currentList)){
					this.$msg('请选择花材')
					return false
				}
				if(Number(this.form.price)<=0){
					this.$msg('请填写批发价')
					return false;
				}
				if(Number(this.form.hjPrice)<=0){
					this.$msg('请填写大客价')
					return false;
				}
				if(Number(this.form.skPrice)<=0){
					this.$msg('请填写零售价')
					return false;
				}
				if(Number(this.form.hjPrice) > Number(this.form.price)){
					this.$msg('大客价不能大于批发价')
					return false
				}
				if(Number(this.form.price) > Number(this.form.skPrice)){
					this.$msg('批发价不能大于零售价')
					return false
				}
				this.$util.confirmModal({content:'确认修改？'},() => {
					manyItemChangeOnePrice({ids:JSON.stringify(that.currentList),...that.form}).then(res=>{
						if(res.code == 1){
							that.cancelModifyModel()
							that.$msg(res.msg)
							that.form.price=''
							that.form.skPrice=''
							that.form.hjPrice=''
							that.initProduct()
						}
					})
				})
			},
			cancelModifyModel() {
				this.showClassModel = false;
			},
			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: 30upx;
			font-weight: 600;
			color: #3385FF;
		}
		.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>