front-end/ghsApp/src/admin/item/list.vue

<template>
	<view class="billing_box_bg">
    <view class="input-wrap">
			<view class="search-bar">
				<app-search-module v-model="py" placeholder="找小菊请输xj" @input="searchFn"/>
			</view>
			<view style="padding:0 0upx 0 20upx;" >
				<button class="admin-button-com middle blue" style="margin-right:8upx;" @click="downPriceTable()">价格表</button>
				<button class="admin-button-com middle blue" style="margin-right:8upx;" @click="pageTo({ url: '/admin/ptItem/itemList' })">导花材</button>
				<button class="admin-button-com middle blue" @click="downBarcodeTable()">条码</button>
			</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" v-if="!$util.isEmpty(classItem.child)"> {{ classItem.className }}</view>
						<template v-for="(productItem, productIndex) in classItem.child">
							<view style="height:240upx" :id="`class_${classIndex}`" :key="productIndex">
								<ItemStock v-if="classItem.isActive" :isPrice="false" :info="productItem" @goToProduct="goToProduct" ></ItemStock>
							</view>
						</template>
					</view>
				</block>
				<block v-else>
					<view style="width: 100%">
						<app-wrapper-empty  title="暂无数据" :is-empty="$util.isEmpty(globalClassItemList)"/>
					</view>
				</block>
			</scroll-view>
		</view>

	</view>
</template>

<script>
import AppSearchModule from "@/components/module/app-search";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ItemStock from "./components/ItemStock";
import { STOCK_TYPE } from "@/utils/declare";
import productMins from "@/mixins/product";
import productContraposeMins from "@/mixins/productContrapose";
import { selectShop } from "@/mixins";
import { mapGetters } from "vuex";
import DorpdownSelect from "@/components/module/shopSelect";
import { getWeixinId } from "@/api/invite/index";
import { generatePriceTable,generateBarcodeTable } from '@/api/product/index'
export default {
	name: "item_list",
	components: {
		AppSearchModule,
		AppWrapperEmpty,
		ItemStock,
		DorpdownSelect
	},
	mixins: [productMins, selectShop,productContraposeMins],
	data() {
		return {
			STOCK_TYPE,
			autoLoad: false,
			pageType: "stock",
			tabIndex: 0,
			getAppIdList:{}
		};
	},
	computed:{
		...mapGetters(["getMyShopInfo","getLoginInfo"]),
	},
	onShow(){
	},
	onLoad() {
		this.shopId = this.getMyShopInfo.id;
		let type = '';
		this.initData({ type, shopId: this.shopId,status:0});

			let that = this
			getWeixinId().then(res => {
				that.getAppIdList = res.data
			});

	},

	methods: {
		downPriceTable(){
			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'})
								}
							});
						}					
					})
				}
			})

		},
		downBarcodeTable(){
			uni.showLoading({title:'下载中',mask:true})
			generateBarcodeTable().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'})
						}
					});
				}					
			})
		},
		goToProduct (id) {
			let that = this
			console.log('admin/ghsProduct/detail?shopId='+ that.loginInfo.shopId+'&id=0&ghsShopAdminId='+that.loginInfo.shopAdminId+'&id='+id)
			uni.navigateToMiniProgram({
				//姜枫-2021.04.13
				appId: that.getAppIdList.hd.miniAppId,
				path: 'admin/ghsProduct/detail?shopId='+ that.loginInfo.shopId+'&ghsShopAdminId='+that.loginInfo.shopAdminId+'&id='+id,
				//develop 开发版 trial 体验版 release 正式版
				envVersion: process.env.NODE_ENV === 'development' ? 'develop' : 'release',
				extraData: {
					'shopId': that.loginInfo.shopId,
					'id': 0,
					'name':'',
				},
				success (res) {
				}
			})
		},
		affirm(val) {
			if (val.index === 0) {
				this.modalCancel();
			} else {
			}
		},
		change(e) {
			if (this.tabIndex == e.index) {
				return false;
			} else {
				uni.showLoading({
					title: "加载中"
				});
				this.tabIndex = e.index;
				let type = "";
				this.initData({ type, shopId: this.shopId });
			}
		},
		scrollTop() {},
		initProductInfo() {
			this.globalClassItemListContrapose = [];
			this.page = 1;
			this.isMore = true;
		},
		selectSussess(val) {
			uni.showLoading({ title: "加载中" })
			this.initProductInfo();
			let type = "";
			this.shopId = val.selectItem.id;
			this.initData({ type, shopId: this.shopId });
		}
	}
};
</script>

<style lang="scss" scoped>
.billing_box_bg {
	height: 100%;
	display: flex;
	flex-direction: column;
	.input-wrap {
		display: flex;
		padding: 22upx 20upx 22upx 30upx;
		.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 - 140upx);
		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;
			}
		}
	}
}
</style>