花材列表

ghsApp/src/admin/home/apply.vue

@@ -39,7 +39,7 @@
                             {
                             name: "花材",
                             img: `${this.$constant.imgUrl}/ghs/home/hcgl.png`,
-                            url: "/pagesStorehouse/flower/manage"
+                            url: "/admin/item/list"
                             },
                             {
                             name: "门店",

ghsApp/src/admin/item/components/CommodityStock.vue

@@ -0,0 +1,132 @@
+<template>
+	<view class="item-cmd_bx">
+		<view class="img_bx">
+			<app-img :src="info.cover" alt="花材" mode="aspectFit" :height="160" />
+		</view>
+		<navigator :url="`/pagesStorehouse/stockWarn/detailed?id=${info.itemId}`" class="cmd-info_bx active">
+			<view class="tit">{{ info.itemName || "" }}</view>
+			<view class="kc">{{ info.rank || "" }}级</view>
+			<view class="num-open_bx">
+				<view class="price" v-if="isPrice">￥{{ info.price }}</view>
+				<template>
+					<view class="open-bx">
+						库存 <text style="margin-left: 10rpx;font-size: 20rpx">{{ info.stock }}</text>
+					</view>
+				</template>
+			</view>
+		</navigator>
+
+	</view>
+</template>
+
+<script>
+import { STOCK_TYPE } from "@/utils/declare";
+import AppImg from "@/components/app-img";
+export default {
+	name: "Commodity",
+	components: {
+		AppImg
+	},
+	props: {
+		type: {
+			type: String,
+			default: STOCK_TYPE.WARN
+		},
+		isPrice: {
+			type: Boolean,
+			default: true
+		},
+		isEdit: {
+			type: Boolean,
+			default: true
+		},
+		info: {
+			required: true
+		}
+	},
+	data() {
+		return {
+			STOCK_TYPE
+		};
+	},
+	methods: {
+		customNum() {
+			this.$emit("customNum");
+		},
+		addEvent() {
+			this.$emit("add");
+		},
+		subtractEvent() {
+			this.$emit("subtract");
+		},
+		delEvent() {
+			this.$emit("del");
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.item-cmd_bx {
+	position: relative;
+	margin-bottom: 20px;
+	.img_bx {
+		height: 160px;
+		width: 160px;
+		position: absolute;
+		left: 0px;
+		top: 0px;
+	}
+	.cmd-info_bx {
+		position: relative;
+		padding-left: 177px;
+		&.active{
+			&:before{
+				content: ' ';
+				height: 22rpx;
+				width: 22rpx;
+				border-width: 2rpx 2rpx 0 0;
+				border-color: #b2b2b2;
+				border-style: solid;
+				-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+				transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+				position: absolute;
+				top: 50%;
+				margin-top: -12rpx;
+				right: 30rpx;
+			}
+		}
+
+		& .tit {
+			font-size: 28px;
+			font-weight: 400;
+			color: #333333;
+			padding-top: 10px;
+		}
+		& .kc {
+			color: #999999;
+			font-size: 24px;
+			padding: 10px 0 24px;
+		}
+		& .num-open_bx {
+			display: flex;
+			align-items: center;
+			& .price {
+				font-size: 28px;
+				color: #999999;
+				flex: 1;
+			}
+			& .open-bx {
+				color: #333333;
+				text{
+					font-size: 24rpx;
+					font-weight: 700;
+				}
+				*.warn {
+					color: $redColor;
+				}
+			}
+		}
+	}
+}
+</style>

ghsApp/src/admin/item/list.vue

@@ -0,0 +1,249 @@
+<template>
+	<view class="billing_box_bg">
+    <app-tabs :tabs="tabs" :currentTab="tabIndex" @change="change" itemWidth="50%"/>
+    <view class="input-wrap">
+			<view class="search-bar">
+				<app-search-module v-model="py" placeholder="输入商品名拼音首字母查询" @input="searchFn"/>
+			</view>
+
+		<i class="iconfont icontianjiakehu"></i>
+			<span>添加</span>
+
+		</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 filterProductInfo" :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">
+				<!--内容部分 start -->
+				<block v-if="!$util.isEmpty(filterProductInfo)">
+					<view class="item_list_bx selectAll" v-for="(classItem, classIndex) in filterProductInfo" :key="classIndex" :id="`class_${classIndex}`">
+						<view class="item_list_title" v-if="!$util.isEmpty(classItem.child)"> {{ classItem.className }}</view>
+						<text v-if="tabs[tabIndex].name=='库存预警'&&$util.isEmpty(classItem.child)">当前库存充足</text>
+						<template v-for="(productItem, productIndex) in classItem.child">
+							<view style="height: 200rpx" :id="`class_${classIndex}`" :key="classIndex">
+								<CommodityStock v-if="classItem.isActive"
+								:isPrice="false"
+								:type="tabs[tabIndex].key"
+								:key="productIndex"
+								:info="productItem"
+							></CommodityStock>
+							</view>
+						</template>
+					</view>
+				</block>
+				<block v-else>
+					<view style="width: 100%">
+						<app-wrapper-empty  title="暂无数据" :is-empty="$util.isEmpty(filterProductInfo)"/>
+					</view>
+				</block>
+				<!--内容部分 end -->
+
+			</scroll-view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+import AppSearchModule from "@/components/module/app-search";
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
+import CommodityStock from "./components/CommodityStock";
+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/dorpdownSelect";
+export default {
+	name: "stock_manage",
+	components: {
+		AppSearchModule,
+		AppWrapperEmpty,
+		CommodityStock,
+		DorpdownSelect
+	},
+	mixins: [productMins, selectShop,productContraposeMins],
+	data() {
+		return {
+			STOCK_TYPE,
+			autoLoad: false, //不自动请求数据  自定义请求
+			pageType: "stock",
+			tabIndex: 0
+		};
+	},
+	computed:{
+		...mapGetters(["getMyShopInfo","getLoginInfo"]),
+	},
+	onLoad() {
+		this.shopId = this.getMyShopInfo.id;
+		let type = '';
+		this.initData({ type, shopId: this.shopId });
+	},
+
+	methods: {
+		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;
+				this.tabs[this.tabIndex].key;
+				let type = "";
+				this.initData({ type, shopId: this.shopId });
+			}
+		},
+		scrollTop() {},
+		initProductInfo() {
+			this.filterProductInfoContrapose = [];
+			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: 22px 20px 22px 30px;
+		.search-bar {
+			flex: 1;
+		}
+		.city-select {
+			display: flex;
+			flex-shrink: 0;
+			align-items: center;
+			margin-right: 15upx;
+			margin-left: 45px;
+			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: 100%;
+		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 20px;
+				align-items: center;
+				position: absolute;
+				right: 0;
+				top: 0;
+				height: 32px;
+				background: #ff2842;
+				border-radius: 16px;
+				color: #fff;
+				font-size: 20px;
+			}
+      &:last-child{
+        margin-bottom: 110upx;
+      }
+		}
+
+		.active {
+			position: relative;
+			color: $mainColor;
+			font-size: 26px;
+			background: #fff;
+		}
+
+		.active::before {
+			content: "";
+			position: absolute;
+			border-left: 8upx solid $mainColor;
+			height: 100%;
+			left: 0;
+		}
+	}
+	.right-box {
+		height: 100%;
+		flex: 1;
+		box-sizing: border-box;
+	}
+	.item_list_bx {
+		padding: 40px 16px;
+	}
+	.item_list_title {
+		margin-bottom: 20px;
+		font-size: 24px;
+		font-weight: 600;
+		color: #666666;
+	}
+	.select-cmd_bx {
+		& .kc {
+			color: #999999;
+			font-size: 28px;
+			font-weight: 400;
+			margin-bottom: 60px;
+			text-align: center;
+			margin-top: 10px;
+		}
+		& .num_bx {
+			display: flex;
+			align-items: center;
+			margin-bottom: 80px;
+			& > input {
+				width: 212px;
+				height: 80px;
+				border: 1px solid #dddddd;
+				border-radius: 4px;
+				text-align: center;
+				margin-right: 24px;
+			}
+		}
+	}
+}
+</style>

ghsApp/src/pages.json

@@ -167,7 +167,6 @@
 				}
 			]
 		},
-
 		{
 			"root": "pagesShare",
 			"pages": [
@@ -763,6 +762,17 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "admin/item",
+			"pages": [
+				{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "花材列表"
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

ghsApp/src/pagesStorehouse/stockWarn/manage.vue

@@ -111,11 +111,11 @@ export default {
 			tabIndex: 0,
 			tabs: [
 				{
-					name: "库存预警",
+					name: "库存不足",
 					key: STOCK_TYPE.WARN
 				},
 				{
-					name: "库存管理",
+					name: "库存明细",
 					key: STOCK_TYPE.MANAGE
 				}
 			]