front-end/ghsApp/src/admin/changePrice/list2.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="globalPy" ref="globalSearchRef" placeholder="这里搜索" @input="searchFn"/>
			</view>
			<view style="padding:0 0upx 0 20upx;" >
				<button class="admin-button-com middle blue" @click="downloadTable()">价格表</button>
			</view>
		</view>

		<view class="scroll-middle_bx">
			<scroll-view scroll-y scroll-with-animation class="tab-view">
				<div v-for="(item, index) in globalClassData" :key="index" class="tab-bar-item" :class="[globalClassIndex == index ? 'active' : '']" :data-current="index" @tap.stop="globalSwitchClass(index,item)">
					<text style="text-align: center;">{{ item.name || "" }}</text>
				</div>
			</scroll-view>
				<scroll-view scroll-y class="right-box"
					:scroll-top="globalScrollTopPlace"
					@scroll="globalGetScroll"
					:scroll-into-view="scroll_into_view" 
					scroll-with-animation="true"
					lower-threshold="100"
					@scrolltolower="globalScrollBottom">

				<block v-if="!$util.isEmpty(globalItemData)">
					<view class="item_list_bx selectAll">
						<view class="item_list_title"></view>

						<view v-if="!$util.isEmpty(globalItemData)">

							<template v-for="(productItem, productIndex) in globalItemData">
								<view style="height:230upx" :key="productIndex">
									<ItemComponent :isPrice="false" :info="productItem" @hideChangeFn="hideChangeFn" :ref="`productRef${productItem.id}`"
									@savePrice="savePrice" @cancelDiscountFn="cancelDiscountFn" @cancelFullOff="cancelFullOff" @cancelPreSellFn="cancelPreSellFn"></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(globalItemData)"/>
					</view>
				</block>

			</scroll-view>
		</view>

      <div class="app-footer">
		<button class="admin-button-com big default" @click="goBatchChange">批量修改</button>
        <button class="admin-button-com big blue" style="width:40vw;" @click="commitPrice">保存修改</button>
      </div>

		<uni-popup ref="globalClassImgRef" 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 globalClassData" :key="index" @tap.stop="globalChangeClass(index,item)" style="margin-bottom:20upx;margin-left:3upx;">
				<image :src="item.cover" 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.name}}</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/Item2";
import productMins from "@/mixins/product2";
import { mapGetters } from "vuex";
import { batchChangePrice,generatePriceTable,cancelDiscountPrice,cancelFullOffFn,cancelPreSell } from '@/api/product'
import { changeFrontHide } from '@/api/item'
export default {
	name: "item_list",
	components: {
		AppSearchModule,
		AppWrapperEmpty,
		ItemComponent
	},
	mixins: [productMins],
	data() {
		return {
			autoLoad: false,
			selectJobType: "stock",
			tabIndex: 0,
			priceList:[],
			showClassRemind:false
		};
	},
	computed:{
		...mapGetters(["getMyShopInfo","getLoginInfo"]),
	},
	onLoad() {
		this.initProduct()
	},
	methods: {
		goBatchChange(){
			this.$util.pageTo({url: '/admin/changePrice/batchChange'})
		},
		hideChangeFn(item,status){
			let that = this
			changeFrontHide({id:item.id,status:status}).then(res=>{
				if(res.code == 1){
					that.$refs[`productRef${item.id}`][0].frontHide = status
				}
			})
		},
		selectFlowerNumFn(){
			this.$refs.globalClassImgRef.open('top')
		},
		hideClassRemind(){

		},
		cancelPreSellFn(item){
			let that = this
			this.$util.confirmModal({content:'确认取消预售？'},() => {
				cancelPreSell({id:item.id}).then(res=>{
					if(res.code == 1){
						that.$msg(res.msg)
					}
				})
			})
		},
		cancelFullOff(item){
			let that = this
			this.$util.confirmModal({content:'确认取消满减？'},() => {
				cancelFullOffFn({id:item.id}).then(res=>{
					if(res.code == 1){
						that.$msg(res.msg)
					}
				})
			})
		},
		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.globalRequestType = 'changePrice'
			this.initData()
		},
		commitPrice(){
			let that = this
			if(this.priceList.length == 0){
				this.$msg('没有修改')
				return;
			}
			this.$util.confirmModal({content:'确认修改？'},() => {
				that.commitChange()
			})
		},
		commitChange(){
			let data = JSON.stringify(this.priceList);
			batchChangePrice({data:data,appVersion:1}).then(res => {
					if(res.code == 1){
						this.priceList = [];
						this.initProduct()
					}
					uni.showToast({ title: '修改成功', icon: 'success', })
				})
		},
		savePrice(price,skPrice,hjPrice,id,status){
			if(this.priceList.length > 0){
				this.priceList.forEach(function(value,index,array){
					if(value.id == id){
						array.splice(index,1)
					}
				});
			}
			if(status == 1){
				this.priceList.push({id:id,price:price,skPrice:skPrice,hjPrice:hjPrice})
			}
		},
		affirm(val) {
			if (val.index === 0) {
				this.modalCancel();
			}
		}
	}
};
</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 {
		padding-bottom:100upx;
		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 - 200upx);
		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;
	}
}
.class-popup-style{
	z-index:999999;
}
</style>