库存商品展示优化

ghs/src/pagesStorehouse/components/Commodity.vue

@@ -1,105 +0,0 @@
-<template>
-	<view class="item-cmd_bx">
-		<view class="img_bx">
-			<app-img :src="info.cover" alt="商品图" mode="aspectFit" :height="160" />
-		</view>
-		<view class="cmd-info_bx">
-			<view class="tit">{{ info.itemName || "" }}</view>
-			<view class="kc">{{ info.rank || "" }}级</view>
-			<view class="num-open_bx">
-				<view class="price">￥{{ info.price }}</view>
-				<template v-if="isEdit">
-					<view class="open-bx warn" v-if="type == STOCK_TYPE.WARN">
-						{{ info.stock }}
-					</view>
-					<view class="open-bx" v-else-if="type == STOCK_TYPE.MANAGE">
-						库存{{ info.stock }}
-					</view>
-				</template>
-			</view>
-		</view>
-	</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
-		},
-		isEdit: {
-			type: Boolean,
-			default: 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 {
-		padding-left: 177px;
-		& .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;
-				*.warn {
-					color: $redColor;
-				}
-			}
-		}
-	}
-}
-</style>

ghs/src/pagesStorehouse/components/CommodityStock.vue

@@ -1,22 +1,21 @@
 <template>
 	<view class="item-cmd_bx">
 		<view class="img_bx">
-			<app-img
-				src="https://img.huaml.com/uploads/12358/202005/29/de74c55596d304b85e79154958e8bf57_small.jpeg"
-				alt="商品图"
-				mode="aspectFit"
-				:height="160"
-			/>
+			<app-img :src="info.cover" alt="商品图" mode="aspectFit" :height="160" />
 		</view>
 		<view class="cmd-info_bx">
-			<view class="tit">天使美人</view>
-			<view class="kc">B级</view>
+			<view class="tit">{{ info.itemName || "" }}</view>
+			<view class="kc">{{ info.rank || "" }}级</view>
 			<view class="num-open_bx">
-				<view class="price"><text class="unit">￥</text><text>42</text></view>
-
-				<view :class="['open-bx', { light: type == STOCK_TYPE.WARN }]">
-					库存2/5
-				</view>
+				<view class="price">￥{{ info.price }}</view>
+				<template v-if="isEdit">
+					<view class="open-bx warn" v-if="type == STOCK_TYPE.WARN">
+						{{ info.stock }}
+					</view>
+					<view class="open-bx" v-else-if="type == STOCK_TYPE.MANAGE">
+						库存{{ info.stock }}
+					</view>
+				</template>
 			</view>
 		</view>
 	</view>
@@ -34,6 +33,13 @@ export default {
 		type: {
 			type: String,
 			default: STOCK_TYPE.WARN
+		},
+		isEdit: {
+			type: Boolean,
+			default: true
+		},
+		info: {
+			required: true
 		}
 	},
 	data() {
@@ -85,19 +91,14 @@ export default {
 		& .num-open_bx {
 			display: flex;
 			align-items: center;
-			justify-content: space-between;
 			& .price {
-				font-size: 32upx;
-				color: #333;
-				.unit {
-					font-size: 22upx;
-				}
+				font-size: 28px;
+				color: #999999;
+				flex: 1;
 			}
 			& .open-bx {
-				display: flex;
-				align-items: center;
-				font-size: 32upx;
-				&.light {
+				color: #333333;
+				*.warn {
 					color: $redColor;
 				}
 			}

ghs/src/pagesStorehouse/stockWarn/manage.vue

@@ -91,7 +91,7 @@
 import AppSearchModule from "@/components/module/app-search";
 import AppTabs from "@/components/plugin/tabs";
 import AppWrapperEmpty from "@/components/app-wrapper-empty";
-import CommodityStock from "../components/Commodity";
+import CommodityStock from "../components/CommodityStock";
 import { STOCK_TYPE } from "@/utils/declare";
 import productMins from "@/mixins/product";
 import { selectShop } from "@/mixins";