浏览代码

feat:仓库列表更多信息、商品描述、筛选图标更换

zhangxin 1 月之前
父节点
当前提交
bf6c6e284c
共有 4 个文件被更改,包括 311 次插入196 次删除
  1. 3 4
      pages/wareHouse/components/edit.vue
  2. 222 168
      pages/wareHouse/index.vue
  3. 86 24
      pages/wareHouse/styles/index.scss
  4. 二进制
      static/icons/select.png

+ 3 - 4
pages/wareHouse/components/edit.vue

@@ -37,9 +37,7 @@
37 37
                         </view>
38 38
                     </u-form-item>
39 39
                     <u-form-item label="商品描述(详细的描述让用户更好的了解您的产品)" required prop="desc" borderBottom>
40
-                        <u--textarea v-model="formData.desc" clearable placeholder="95新 WHZ19219H CHANEL香奈儿链条单肩包
41
-21开 牛皮 尺寸25 4 15
42
-配件中溯卡" count autoHeight maxlength="250" :height="150" confirmType="done"></u--textarea>
40
+                        <u--textarea v-model="formData.desc" clearable count autoHeight maxlength="250" :height="150" confirmType="done"></u--textarea>
43 41
                     </u-form-item>
44 42
                     <u-form-item label="来源" prop="origin" borderBottom>
45 43
                         <u--textarea v-model="formData.origin" clearable placeholder="请输入来源" count autoHeight maxlength="250" height="100" confirmType="done"></u--textarea>
@@ -444,10 +442,11 @@ export default {
444 442
 实价:${res.data.actualPrice || ''}
445 443
 型号:${res.data.model || ''}
446 444
 编码:${res.data.indentifyCode || ''}
447
-日期:${res.data.cardYear || ''}
445
+日期:${res.data.cardYear || res.data.cardDate || ''}
448 446
 备注:${res.data.productDesc || ''}
449 447
 付款方式:${this.paymentTabList.find(item => item.value == res.data.payType)?.name || ''}
450 448
 `
449
+                this.formData.desc = `99新,${[res.data.dictLabel, res.data.model, res.data.cardYear || res.data.cardDate, res.data.productDesc].filter(item => item).join('-')}`
451 450
             }
452 451
         })
453 452
     },

+ 222 - 168
pages/wareHouse/index.vue

@@ -14,8 +14,7 @@
14 14
 				<view class="btn-group">
15 15
 					<u-button type="success" shape="circle" plain size="mini" @click="openOrderList">开单记录</u-button>
16 16
 					<order-list ref="orderListRef"></order-list>
17
-					<u-button type="primary" shape="circle" plain size="mini"
18
-						@click="navigateToFakeRegistration">假货登记</u-button>
17
+					<u-button type="primary" shape="circle" plain size="mini" @click="navigateToFakeRegistration">假货登记</u-button>
19 18
 				</view>
20 19
 			</view>
21 20
 			<view class="data-cards">
@@ -39,9 +38,8 @@
39 38
 			</view>
40 39
 
41 40
 			<view class="category-tabs-wrap">
42
-				<u-tabs :list="tabList" :is-scroll="true" active-color="#007aff" inactive-color="#666666"
43
-					font-size="28rpx" keyName="dictLabel" border-bottom="none" @change="switchTab"
44
-					class="u-tabs-custom"></u-tabs>
41
+				<u-tabs :list="tabList" :is-scroll="true" active-color="#007aff" inactive-color="#666666" font-size="28rpx"
42
+					keyName="dictLabel" border-bottom="none" @change="switchTab" class="u-tabs-custom"></u-tabs>
45 43
 			</view>
46 44
 
47 45
 			<view class="filter-bar">
@@ -53,37 +51,37 @@
53 51
 				</view>
54 52
 				<view class="price-layout-btn">
55 53
 					<view class="price-btn" type="text" @click="priceVisibleChange">
56
-						<u-icon :name="priceVisible ? 'eye' : 'eye-off'" size="18" color="#1890ff"
57
-							class="price-icon"></u-icon>
54
+						<u-icon :name="priceVisible ? 'eye' : 'eye-off'" size="18" color="#1890ff" class="price-icon"></u-icon>
58 55
 						<text class="price-text">价格可见</text>
59 56
 					</view>
60 57
 					<view class="dept-btn" @click="recycleDeptClick">
61 58
 						<image src="/static/icons/dept.png" mode="aspectFill"></image>
62 59
 					</view>
63
-					<ba-tree-picker :selectParent="true" ref="recycleDeptRef" :multiple='false'
64
-							@select-change="deptSeletchang" border title="机构部门" :localdata="deptList" valueKey="deptId"
65
-							textKey="deptName" childrenKey="children" :selectedValues="deptId"
66
-							:personNames="deptName" />
60
+					<ba-tree-picker :selectParent="true" ref="recycleDeptRef" :multiple='false' @select-change="deptSeletchang"
61
+						border title="机构部门" :localdata="deptList" valueKey="deptId" textKey="deptName" childrenKey="children"
62
+						:selectedValues="deptId" :personNames="deptName" />
67 63
 					<view class="layout-btn" type="text" size="mini" @click="openSearchFilter">
68
-						<u-icon name="grid" size="20" color="#666666"></u-icon>
64
+						<image class="filter-icon" src="/static/icons/select.png" mode="aspectFill"></image>
65
+						筛选
66
+						<!-- <u-icon name="grid" size="20" color="#666666"></u-icon> -->
69 67
 						<!-- 筛选列 品牌、价格范围、位置、回收时间、回收人员、鉴定人员、商品属性 -->
70 68
 					</view>
71 69
 					<searchFilter ref="searchFilter" @confirm="handleSearch"></searchFilter>
72 70
 				</view>
73 71
 			</view>
74 72
 
75
-			<scroll-view ref="scrollView" class="goods-list" scroll-y @scrolltolower="handleLoadMore" @scroll="handleScroll" enable-back-to-top>
73
+			<scroll-view ref="scrollView" class="goods-list" scroll-y @scrolltolower="handleLoadMore" @scroll="handleScroll"
74
+				enable-back-to-top>
76 75
 				<view @click.stop="clickItem(goods)" class="goods-item" v-for="(goods, goodsIndex) in goodsList"
77 76
 					:key="`goods-${goodsIndex}`">
78 77
 					<u-swipe-action ref="swipeRef">
79 78
 						<u-swipe-action-item :options="swipeOptions" @click="(e) => handleSwipeClick(e, goods, goodsIndex)">
80 79
 							<view class="goods-info">
81 80
 								<view class="goods-img-container">
82
-									<image class="goods-img" :src="goods.imgUrl ? goods.imgUrl : '/static/no-img.png'"
83
-										mode="aspectFill" lazy-load></image>
81
+									<image class="goods-img" :src="goods.imgUrl ? goods.imgUrl : '/static/no-img.png'" mode="aspectFill"
82
+										lazy-load></image>
84 83
 									<!-- <image class="goods-img" src="/static/no-img.png" mode="aspectFill" lazy-load></image> -->
85
-									<view
86
-										:class="['stock-indicator', goods.downStatus == '1' ? 'up-indicator' : 'down-indicator']">
84
+									<view :class="['stock-indicator', goods.downStatus == '1' ? 'up-indicator' : 'down-indicator']">
87 85
 									</view>
88 86
 								</view>
89 87
 								<view class="info-content">
@@ -103,27 +101,27 @@
103 101
 										<view class="price-item" v-if="isWareHouseRole">
104 102
 											<text class="price-type">成本价</text>
105 103
 											<text class="price">¥{{ priceVisible ? goods.costPrice || '-' : '****'
106
-												}}</text>
104
+											}}</text>
107 105
 										</view>
108 106
 										<view class="price-item" v-if="isWareHouseRole">
109 107
 											<text class="price-type">销售价</text>
110 108
 											<text class="price sales">¥{{ priceVisible ? goods.salePrice || '-' : '****'
111
-												}}</text>
109
+											}}</text>
112 110
 										</view>
113 111
 										<view class="price-item" v-if="isWareHouseRole">
114 112
 											<text class="price-type">同行价</text>
115 113
 											<text class="price">¥{{ priceVisible ? goods.peerPrice || '-' : '****'
116
-												}}</text>
114
+											}}</text>
117 115
 										</view>
118 116
 										<view class="price-item">
119 117
 											<text class="price-type">代理价</text>
120 118
 											<text class="price">¥{{ priceVisible ? goods.agentPrice || '-' : '****'
121
-												}}</text>
119
+											}}</text>
122 120
 										</view>
123 121
 										<view class="price-item" v-if="isWareHouseRole">
124 122
 											<text class="price-type">实价</text>
125 123
 											<text class="price">¥{{ priceVisible ? goods.actualPrice || '-' : '****'
126
-												}}</text>
124
+											}}</text>
127 125
 										</view>
128 126
 										<view class="price-item" v-if="isWareHouseRole">
129 127
 											<text class="price-type">指导价</text>
@@ -132,6 +130,8 @@
132 130
 
133 131
 									</view>
134 132
 
133
+
134
+
135 135
 									<!-- <view class="others">
136 136
 									<view class="other-item stock" >得</view>
137 137
 									<view class="other-item">得</view>
@@ -144,6 +144,46 @@
144 144
 									</view>
145 145
 									<text class="goods-stock">数量:{{ goods.stock || 0 }}</text>
146 146
 								</view>
147
+
148
+							</view>
149
+							<!-- 更多信息区域 -->
150
+							<view class="more-info-container">
151
+								<view class="more-info-header" @click.stop="toggleMoreInfo(goods)">
152
+									<text class="more-info-title">更多信息</text>
153
+									<u-icon :name="goods.showMoreInfo ? 'arrow-up' : 'arrow-down'" size="14" color="#666666"></u-icon>
154
+								</view>
155
+								<transition name="more-info">
156
+									<view class="more-info-content" v-if="goods.showMoreInfo">
157
+										<view class="info-row">
158
+											<text class="info-label">回收时间:</text>
159
+											<text class="info-value">{{ formatterTime(goods.recycleTime) }}</text>
160
+										</view>
161
+										<view class="info-row">
162
+											<text class="info-label">入库时间:</text>
163
+											<text class="info-value">{{ formatterTime(goods.warehouseDate) }}</text>
164
+										</view>
165
+										<view class="info-row">
166
+											<text class="info-label">商品位置:</text>
167
+											<text class="info-value">{{ goods.productPosition || '-' }}</text>
168
+										</view>
169
+										<view class="info-row">
170
+											<text class="info-label">鉴定人员:</text>
171
+											<text class="info-value">{{ goods.identifyingPerson || '-' }}</text>
172
+										</view>
173
+										<view class="info-row">
174
+											<text class="info-label">回收人员:</text>
175
+											<text class="info-value">{{ goods.recyclePerson || '-' }}</text>
176
+										</view>
177
+										<view class="info-row">
178
+											<text class="info-label">是否入库:</text>
179
+											<text class="info-value">{{ goods.stockStatus == '1' ? '已入库' : '未入库' }}</text>
180
+										</view>
181
+										<view class="info-row">
182
+											<text class="info-label">付款方式:</text>
183
+											<text class="info-value">{{ payFormatter(goods.payType) }}</text>
184
+										</view>
185
+									</view>
186
+								</transition>
147 187
 							</view>
148 188
 						</u-swipe-action-item>
149 189
 					</u-swipe-action>
@@ -162,6 +202,7 @@ import searchFilter from './components/searchFilter.vue'
162 202
 import moreInfo from './components/moreInfo.vue'
163 203
 import { permissionCheck } from '../../utils/util.js'
164 204
 import orderList from './components/orderList/index.vue'
205
+import { paymentTabList } from './js/public.js'
165 206
 import jtimePickerPopup from '@/uni_modules/jtime-picker-popup/components/JTimePicker/JTimePicker.vue';
166 207
 export default {
167 208
 	components: {
@@ -171,120 +212,133 @@ export default {
171 212
 		jtimePickerPopup
172 213
 	},
173 214
 	data() {
174
-			return {
175
-				searchString: '',//搜索编号、名称、品牌...
176
-				type: '',
177
-				searchInfo: {},
178
-				pageNum: 1,
179
-				pageSize: 10,
180
-				curSortType: {
181
-					id: 4,
215
+		return {
216
+			searchString: '',//搜索编号、名称、品牌...
217
+			type: '',
218
+			searchInfo: {},
219
+			pageNum: 1,
220
+			pageSize: 10,
221
+			curSortType: {
222
+				id: 4,
223
+				label: '按入库最新',
224
+			},
225
+			wareHouseCard: {
226
+				totalCost: '-',
227
+				uploadCostToday: '-',
228
+				outStockToday: '-',
229
+				totalNum: '-'
230
+			},
231
+			tabList: [],
232
+			goodsList: [
233
+				// {
234
+				// 	id:'123456754',//商品库存id
235
+				// 	name:'Rolex',//商品名称
236
+				// 	model:'Submariner Date 126610LN',//型号
237
+				// 	costPrice:'12345',//成本价格
238
+				// 	salesPrice:'12345',//销售价格
239
+				// 	peerPrice:'12345',//同行价格
240
+				// 	agentPrice:'12345',//代理价格
241
+				// 	stock:'12345',//库存数量
242
+				// 	imgUrl:'https://xiaohulu-crm.oss-cn-shanghai.aliyuncs.com/crm/2026/01/06/1767677335839-1767677330379.jpg',//商品图片
243
+				// 	platform:[]//同步平台,此功能暂时不做,先定义一个字段
244
+				// }
245
+			],
246
+			sortPickerShow: false,
247
+			sortColumns: [[
248
+				{
249
+					label: '按最久未下载',
250
+					id: 1
251
+				},
252
+				{
253
+					label: '按最近更新',
254
+					id: 2
255
+				},
256
+				{
257
+					label: '按最久更新',
258
+					id: 3
259
+				},
260
+				{
182 261
 					label: '按入库最新',
262
+					id: 4
263
+				},
264
+				{
265
+					label: '按入库最久',
266
+					id: 5
267
+				},
268
+				{
269
+					label: '按价格最高',
270
+					id: 6
271
+				},
272
+				{
273
+					label: '按价格最低',
274
+					id: 7
183 275
 				},
184
-				wareHouseCard: {
185
-					totalCost: '-',
186
-					uploadCostToday: '-',
187
-					outStockToday: '-',
188
-					totalNum: '-'
276
+			]],
277
+			priceVisible: true,
278
+			searchPopShow: false,
279
+			total: 0,
280
+			moreOptions: {},
281
+			moreOptionsShow: false,
282
+			isWareHouseRole: permissionCheck('WAREHOUSER', false),
283
+			swipeOptions: [
284
+				{
285
+					text: '删除',
286
+					style: {
287
+						backgroundColor: '#f56c6c'
288
+					}
189 289
 				},
190
-				tabList: [],
191
-				goodsList: [
192
-					// {
193
-					// 	id:'123456754',//商品库存id
194
-					// 	name:'Rolex',//商品名称
195
-					// 	model:'Submariner Date 126610LN',//型号
196
-					// 	costPrice:'12345',//成本价格
197
-					// 	salesPrice:'12345',//销售价格
198
-					// 	peerPrice:'12345',//同行价格
199
-					// 	agentPrice:'12345',//代理价格
200
-					// 	stock:'12345',//库存数量
201
-					// 	imgUrl:'https://xiaohulu-crm.oss-cn-shanghai.aliyuncs.com/crm/2026/01/06/1767677335839-1767677330379.jpg',//商品图片
202
-					// 	platform:[]//同步平台,此功能暂时不做,先定义一个字段
203
-					// }
204
-				],
205
-				sortPickerShow: false,
206
-				sortColumns: [[
207
-					{
208
-						label: '按最久未下载',
209
-						id: 1
210
-					},
211
-					{
212
-						label: '按最近更新',
213
-						id: 2
214
-					},
215
-					{
216
-						label: '按最久更新',
217
-						id: 3
218
-					},
219
-					{
220
-						label: '按入库最新',
221
-						id: 4
222
-					},
223
-					{
224
-						label: '按入库最久',
225
-						id: 5
226
-					},
227
-					{
228
-						label: '按价格最高',
229
-						id: 6
230
-					},
231
-					{
232
-						label: '按价格最低',
233
-						id: 7
234
-					},
235
-				]],
236
-				priceVisible: true,
237
-				searchPopShow: false,
290
+			],
291
+			isSwipeClick: false,
292
+			deptList: [],
293
+			deptId: '',
294
+			deptName: '',
295
+			// 保存页面状态
296
+			pageState: {
297
+				pageNum: 1,
298
+				goodsList: [],
238 299
 				total: 0,
239
-				moreOptions: {},
240
-				moreOptionsShow: false,
241
-				isWareHouseRole: permissionCheck('WAREHOUSER', false),
242
-				swipeOptions: [
243
-					{
244
-						text: '删除',
245
-						style: {
246
-							backgroundColor: '#f56c6c'
247
-						}
248
-					},
249
-				],
250
-				isSwipeClick: false,
251
-				deptList: [],
252
-				deptId: '',
253
-				deptName: '',
254
-				// 保存页面状态
255
-				pageState: {
256
-					pageNum: 1,
257
-					goodsList: [],
258
-					total: 0,
259
-					scrollTop: 0
260
-				}
261
-			};
262
-		},
300
+				scrollTop: 0
301
+			},
302
+			paymentTabList: paymentTabList
303
+		};
304
+	},
263 305
 	onLoad() {
264 306
 		this.getTypeList();
265 307
 	},
266 308
 	methods: {
309
+		toggleMoreInfo(goods) {
310
+			this.$set(goods, 'showMoreInfo', !goods.showMoreInfo);
311
+		},
312
+		formatterTime(time) {
313
+			if (!time) {
314
+				return '-'
315
+			}
316
+			return this.$dayjs(time).format('YYYY-MM-DD')
317
+		},
318
+		payFormatter(payType) {
319
+			return paymentTabList.find(item => item.value == payType)?.name || '-'
320
+		},
267 321
 		getDeptListAll() {
268
-            const params = {
269
-                isDept:2
270
-            }
271
-            uni.$u.api.getDeptListAll(params).then(res => {
272
-                if(res.data.length > 0){
273
-                    this.deptList = res.data;
274
-                }else{
275
-                    uni.$u.toast('暂无机构部门');
276
-                }
277
-            })
278
-        },
322
+			const params = {
323
+				isDept: 2
324
+			}
325
+			uni.$u.api.getDeptListAll(params).then(res => {
326
+				if (res.data.length > 0) {
327
+					this.deptList = res.data;
328
+				} else {
329
+					uni.$u.toast('暂无机构部门');
330
+				}
331
+			})
332
+		},
279 333
 		deptSeletchang(ids, names) {
280
-            this.deptId = ids[0] || '';
334
+			this.deptId = ids[0] || '';
281 335
 			this.deptName = names[0] || '';
282 336
 			this.handleSearch();
283
-        },
337
+		},
284 338
 		recycleDeptClick() {
285 339
 			this.getDeptListAll();
286
-            this.$refs.recycleDeptRef._show();
287
-        },
340
+			this.$refs.recycleDeptRef._show();
341
+		},
288 342
 		showMoreOptions(goods) {
289 343
 			this.moreOptions = goods;
290 344
 			this.$refs.moreInfoRef.showMoreInfo();
@@ -351,10 +405,10 @@ export default {
351 405
 				this.handleToDetail(item);
352 406
 			}
353 407
 		},
354
-		handleSwipeClick(e, item,goodsIndex) {
408
+		handleSwipeClick(e, item, goodsIndex) {
355 409
 			if (e.index == 0) {//删除
356 410
 				this.isSwipeClick = true;
357
-				if(!permissionCheck('WAREHOUSER')) return false 
411
+				if (!permissionCheck('WAREHOUSER')) return false
358 412
 				uni.$u.api.wareHouseDelete({
359 413
 					id: item.id
360 414
 				}).then(() => {
@@ -407,54 +461,54 @@ export default {
407 461
 			});
408 462
 		},
409 463
 		openOrderList() {
410
-				this.$refs.orderListRef.openList();
411
-			},
412
-			handleScroll(e) {
413
-				this.pageState.scrollTop = e.detail.scrollTop;
414
-			},
415
-			// 保存当前页面状态
416
-			savePageState() {
417
-				this.pageState.pageNum = this.pageNum;
418
-				this.pageState.goodsList = [...this.goodsList];
419
-				this.pageState.total = this.total;
420
-			},
421
-			// 恢复页面状态
422
-				restorePageState() {
423
-					if (this.pageState.goodsList.length > 0) {
424
-						this.pageNum = this.pageState.pageNum;
425
-						this.goodsList = [...this.pageState.goodsList];
426
-						this.total = this.pageState.total;
427
-						this.$nextTick(() => {
428
-							if (this.pageState.scrollTop > 0) {
429
-								if (this.$refs.scrollView) {
430
-									setTimeout(() => {
431
-										try {
432
-											this.$refs.scrollView.$el.scrollTop = this.pageState.scrollTop;
433
-										} catch (e) {
434
-											console.log('设置滚动位置失败:', e);
435
-										}
436
-									}, 100);
464
+			this.$refs.orderListRef.openList();
465
+		},
466
+		handleScroll(e) {
467
+			this.pageState.scrollTop = e.detail.scrollTop;
468
+		},
469
+		// 保存当前页面状态
470
+		savePageState() {
471
+			this.pageState.pageNum = this.pageNum;
472
+			this.pageState.goodsList = [...this.goodsList];
473
+			this.pageState.total = this.total;
474
+		},
475
+		// 恢复页面状态
476
+		restorePageState() {
477
+			if (this.pageState.goodsList.length > 0) {
478
+				this.pageNum = this.pageState.pageNum;
479
+				this.goodsList = [...this.pageState.goodsList];
480
+				this.total = this.pageState.total;
481
+				this.$nextTick(() => {
482
+					if (this.pageState.scrollTop > 0) {
483
+						if (this.$refs.scrollView) {
484
+							setTimeout(() => {
485
+								try {
486
+									this.$refs.scrollView.$el.scrollTop = this.pageState.scrollTop;
487
+								} catch (e) {
488
+									console.log('设置滚动位置失败:', e);
437 489
 								}
438
-							}
439
-						});
440
-						return true;
490
+							}, 100);
491
+						}
441 492
 					}
442
-					return false;
443
-				},
444
-		},
445
-		onShow() {
446
-			// 尝试恢复页面状态
447
-			if (!this.restorePageState()) {
448
-				// 如果没有保存的状态,重新加载第一页
449
-				this.pageNum = 1;
450
-				this.getList();
493
+				});
494
+				return true;
451 495
 			}
452
-			this.getCard();
453
-		},
454
-		onHide() {
455
-			// 页面隐藏时保存状态
456
-			this.savePageState();
496
+			return false;
457 497
 		},
498
+	},
499
+	onShow() {
500
+		// 尝试恢复页面状态
501
+		if (!this.restorePageState()) {
502
+			// 如果没有保存的状态,重新加载第一页
503
+			this.pageNum = 1;
504
+			this.getList();
505
+		}
506
+		this.getCard();
507
+	},
508
+	onHide() {
509
+		// 页面隐藏时保存状态
510
+		this.savePageState();
511
+	},
458 512
 	onPullDownRefresh() {
459 513
 		this.pageNum = 1;
460 514
 		this.getList();

+ 86 - 24
pages/wareHouse/styles/index.scss

@@ -108,7 +108,6 @@
108 108
       margin-right: 0;
109 109
     }
110 110
   }
111
-
112 111
 }
113 112
 
114 113
 /* 搜索框区域 */
@@ -212,7 +211,6 @@
212 211
     display: flex;
213 212
     justify-content: space-between;
214 213
     align-items: center;
215
-
216 214
     .price-btn {
217 215
       background: transparent;
218 216
       padding: 0;
@@ -236,16 +234,21 @@
236 234
       background: transparent;
237 235
       font-size: 22rpx;
238 236
       color: #333;
239
-      width: 60rpx;
240 237
       height: 60rpx;
241 238
       display: flex;
242 239
       align-items: center;
240
+      gap: 6rpx;
243 241
       justify-content: center;
244 242
       flex-shrink: 0;
243
+      margin-left: 10rpx;
244
+      .filter-icon {
245
+        width: 35rpx;
246
+        height: 35rpx;
247
+      }
245 248
     }
246
-    .dept-btn{
247
-      margin-left:18rpx;
248
-      image{
249
+    .dept-btn {
250
+      margin-left: 18rpx;
251
+      image {
249 252
         width: 30rpx;
250 253
         height: 30rpx;
251 254
       }
@@ -357,24 +360,24 @@
357 360
         .price-group {
358 361
           display: grid;
359 362
           grid-template-columns: repeat(2, 1fr);
360
-            .price-item {
361
-              display: flex;
362
-              flex-direction: column;
363
-              justify-content: flex-start;
364
-
365
-              .price-type {
366
-                color: #d1d5db;
367
-                font-size: 24rpx;
368
-              }
369
-
370
-              .price {
371
-                font-weight: 700;
372
-              }
373
-
374
-              .sales {
375
-                color: red;
376
-              }
363
+          .price-item {
364
+            display: flex;
365
+            flex-direction: column;
366
+            justify-content: flex-start;
367
+
368
+            .price-type {
369
+              color: #d1d5db;
370
+              font-size: 24rpx;
371
+            }
372
+
373
+            .price {
374
+              font-weight: 700;
375
+            }
376
+
377
+            .sales {
378
+              color: red;
377 379
             }
380
+          }
378 381
         }
379 382
 
380 383
         .others {
@@ -419,8 +422,67 @@
419 422
         }
420 423
       }
421 424
     }
425
+    /* 更多信息区域 */
426
+    .more-info-container {
427
+      margin-top: 20rpx;
428
+      border-top: 1px solid #f0f0f0;
429
+      padding-top: 20rpx;
430
+
431
+      .more-info-header {
432
+        display: flex;
433
+        align-items: center;
434
+        justify-content: center;
435
+        cursor: pointer;
436
+
437
+        .more-info-title {
438
+          font-size: 28rpx;
439
+          color: #666666;
440
+          margin-right: 10rpx;
441
+        }
442
+      }
443
+
444
+      .more-info-content {
445
+        padding: 10rpx 0;
446
+        display: grid;
447
+        grid-template-columns: repeat(2, 1fr);
448
+        gap: 20rpx;
449
+
450
+        .info-row {
451
+          display: flex;
452
+          align-items: center;
453
+          margin-bottom: 10rpx;
454
+
455
+          .info-label {
456
+            font-size: 26rpx;
457
+            color: #999999;
458
+            min-width: 140rpx;
459
+          }
460
+
461
+          .info-value {
462
+            font-size: 26rpx;
463
+            color: #333333;
464
+            flex: 1;
465
+          }
466
+        }
467
+      }
468
+    }
422 469
   }
470
+}
471
+
472
+/* 更多信息展开收起动画 */
473
+.more-info-enter-active,
474
+.more-info-leave-active {
475
+  transition: all 0.3s ease;
476
+  max-height: 500rpx;
477
+  opacity: 1;
478
+  overflow: hidden;
479
+}
423 480
 
481
+.more-info-enter,
482
+.more-info-leave-to {
483
+  max-height: 0;
484
+  opacity: 0;
485
+  padding: 0;
424 486
 }
425 487
 
426 488
 /* 添加按钮 */
@@ -443,4 +505,4 @@
443 505
   &:active {
444 506
     transform: scale(0.95);
445 507
   }
446
-}
508
+}

二进制
static/icons/select.png