我的备件页面

src/components/parts/spareCell.vue

+<template>
+	<view class="spare-item">
+		<view class="left-view">
+			<u-checkbox v-if="showChecked" icon-size="28" size="40" v-model="item.selected" @change="handleChange" shape="circle"/>
+			<image class="image-view" :src="imageUrl"></image>
+			<view class="info-view">
+				<view class="name-text">{{item.name}}</view>
+				<view>{{remarkText}}</view>
+			</view>
+		</view>
+		<view class="count-view">x{{item.quantity}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			showChecked: { // 是否显示勾选
+			  type: Boolean,
+			  default() {
+				return false
+			  }
+			},
+			item: {
+				type: Object,
+				default() {
+					return {}
+				}
+			},
+			noteText: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				checked: false
+			}
+		},
+		computed: {
+			remarkText() {
+				return this.noteText || this.item.code
+				// return this.info.categoryName + '-' + this.info.brandName
+			},
+			imageUrl() {
+				return this.item.images ? process.uniEnv.systemUrl.apiUrl + this.item.images.split(',').shift() : this.placeholderImage
+			},
+			placeholderImage() {
+				return process.uniEnv.qn_base_url + 'logo.png'
+			},
+		},
+		methods: {
+			handleChange() {
+				this.$emit('change')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.spare-item {
+		display: flex;
+		// width: 100%;
+		justify-content: space-between;
+		align-items: flex-end;
+		// padding: 30rpx;
+		// background-color: #FFFFFF;
+		// border-radius: 12rpx;
+		.left-view {
+			display: flex;
+			align-items: center;
+	
+			.image-view {
+				width: 120rpx;
+				height: 120rpx;
+				margin-right: 20rpx;
+				flex-shrink: 0;
+			}
+	
+			.info-view {
+				font-size: 24rpx;
+				color: #333333;
+	
+				.name-text {
+					font-size: 32rpx;
+					font-weight: bold;
+					color: #333333;
+					margin-bottom: 30rpx;
+				}
+			}
+		}
+	
+		.count-view {
+			font-size: 28rpx;
+			color: #333333;
+		}
+	
+}
+</style>

src/components/submit-bar/index.vue

@@ -2,7 +2,7 @@
   <view class="u-flex bottom" :style="customStyle">
 	 <view class="select-view">
 		<view class="u-flex bottom-left" v-if="showChecked">
-		  <view class="left-list"><u-checkbox icon-size="30" size="40" v-model="checked" @change="selectAll" shape="circle"/></view>
+		  <view class="left-list"><u-checkbox icon-size="28" size="40" v-model="checked" @change="selectAll" shape="circle"/></view>
 		  <view class="left-list">全选</view>
 		</view>
 		<view class="u-flex bottom-center">

src/pages/mine/warehouse/partsDetail.vue

@@ -21,16 +21,9 @@
 				</view>
 			</view>
 			<view class="detail-view">
-				<view class="list-content">
-					<view class="list-item" v-for="(item, index) in info.items" :key="index">
-						<view class="left-view">
-							<image class="image-view" :src="imageUrl(item)"></image>
-							<view class="info-view">
-								<view class="name-text">{{item.name}}</view>
-								<view>{{noteText}}</view>
-							</view>
-						</view>
-						<view class="count-view">x{{item.quantity}}</view>
+				<view class="list-content">
+					<view class="list-item" v-for="(item, index) in info.items" :key="index">
+						<SpareCell :item="item" :noteText="noteText"/>
 					</view>
 				</view>
 				<view class="line-view"></view>
@@ -59,8 +52,12 @@
 	</view>
 </template>
 
-<script>
-	export default {
+<script>
+	import SpareCell from "@/components/parts/spareCell.vue"
+	export default {
+		components: {
+			SpareCell
+		},
 		data() {
 			return {
 				info: {
@@ -163,7 +160,7 @@
 				})
 			},
 			imageUrl(item) {
-				return item.images ? item.images.split(',').shift() : this.placeholderImage
+				return item.images ? process.uniEnv.systemUrl.apiUrl + item.images.split(',').shift() : this.placeholderImage
 			},
 			handleLongpress(key, text) { // 长按复制单号
 				if (key == 'orderNumber') {
@@ -267,45 +264,11 @@
 				}
 
 				.list-content {
-					margin-top: 40rpx;
-					margin-bottom: 40rpx;
+					margin-top: 10rpx;
+					margin-bottom: 10rpx;
 
 					.list-item {
-						display: flex;
-						width: 100%;
-						margin-right: 30rpx;
-						justify-content: space-between;
-						align-items: flex-end;
-						margin-bottom: 40rpx;
-
-						.left-view {
-							display: flex;
-							align-items: flex-start;
-
-							.image-view {
-								width: 120rpx;
-								height: 120rpx;
-								margin-right: 20rpx;
-								flex-shrink: 0;
-							}
-
-							.info-view {
-								font-size: 24rpx;
-								color: #333333;
-
-								.name-text {
-									font-size: 32rpx;
-									font-weight: bold;
-									color: #333333;
-									margin-bottom: 30rpx;
-								}
-							}
-						}
-
-						.count-view {
-							font-size: 28rpx;
-							color: #333333;
-						}
+						margin-bottom: 30rpx;
 					}
 				}