front-end/ghsApp/src/admin/changePrice/removeList.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" :info="productItem" @checkItem="checkItemEvent"></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="recoverSelect">移到停用</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>

	</view>
</view>
</template>
<script>
import AppSearchModule from "@/components/module/app-search";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ItemComponent from "./components/removeItem";
import productMins from "@/mixins/product";
import { mapGetters } from "vuex";
import { batchRecover } from "@/api/item";
export default {
	name: "removeList",
	components: {
		AppSearchModule,
		AppWrapperEmpty,
		ItemComponent
	},
	mixins: [productMins],
	data() {
		return {
			autoLoad: false,
			selectJobType: "stock",
			tabIndex: 0,
			priceArr:[],
			showClassRemind:false,
			currentList:[]
		};
	},
	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()
				})
			}
		},
		recoverSelect(){
			let that = this
			if(this.$util.isEmpty(this.currentList)){
				this.$msg('请选择花材')
				return false
			}
			this.$util.confirmModal({content:'确认所选花材移到停用列表？'},() => {
				batchRecover({ids:JSON.stringify(that.currentList)}).then(res=>{
					if(res.code == 1){
						that.$msg(res.msg)
					}
				})
			})
		},
		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')
		},
		hideClassRemind(){

		},
		cancelDiscountFn(item){
			let that = this
			this.$util.confirmModal({content:'确认取消？'},() => {
				cancelDiscountPrice({id:item.id}).then(res=>{
					if(res.code == 1){
						that.$msg(res.msg)
					}
				})
			})
		},
		downloadTable(){
			let level = 0
			let levelList = ['个人价', '花店价']
			uni.showActionSheet({
				itemList: levelList,
				success: function (respond) {
					level = respond.tapIndex
					uni.showLoading({title:'下载中',mask:true})
					generatePriceTable({level:level}).then(res => {
						if(res.code == 1){
							uni.hideLoading()
							let file = res.data.file
							let shortFile = res.data.shortFile
							uni.downloadFile({
								url: file,
								header: {"Content-Type": 'application/vnd.ms-excel'},
								filePath: `${wx.env.USER_DATA_PATH}/${shortFile}`,
								success: (res) => {
									if (res.statusCode === 200) {
										wx.saveFileToDisk({
											filePath: res.filePath,
											success: function(res) {
												console.log(res)
											},
											fail:function(res) {
												console.log(res)
											}
										})
									}
								},
								fail:()=>{
									uni.showToast({title:'请用电脑打开小程序下载',mask:true,icon:'none'})
								}
							});
						}					
					})
				}
			})
		},
		initProduct(){
			this.initData({ requestType:'removeList'})
		},
		commitPrice(){
			let that = this
			if(this.priceArr.length == 0){
				this.$msg('没有修改')
				return;
			}
			this.$util.confirmModal({content:'确认修改？'},() => {
				that.commitChange()
			})
		},
		commitChange(){
			let data = JSON.stringify(this.priceArr);
			batchChangePrice({data}).then(res => {
					if(res.code == 1){
						this.priceArr = [];
						this.initProduct()
					}
					this.$msg(res.msg)					
				})
		},
		savePrice(price,skPrice,id){
			if(this.priceArr.length > 0){
				this.priceArr.forEach(function(value,index,array){
					if(value.id == id){
						array.splice(index,1)
					}
				});
			}
			this.priceArr.push({id:id,price:price,skPrice:skPrice})
		},
		affirm(val) {
			if (val.index === 0) {
				this.modalCancel();
			}
		},
		scrollTop() {},
		initProductInfo() {
			this.globalClassItemListContrapose = [];
			this.page = 1;
			this.isMore = true;
		}
	}
};
</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>