zhangdi
1 day ago
parent
b6d29c78be
commit
ba6a0161ee
6 changed files with 900 additions and 12 deletions
@ -0,0 +1,32 @@ |
||||
import http from '@/http/api.js' |
||||
|
||||
// 查询人员
|
||||
const getRoleUser = (code) => { |
||||
return http.request({ |
||||
url: `/blade-system/user/list-all-by-role-alias?roleAlias=warehouse_keeper`, |
||||
method: 'GET' |
||||
}) |
||||
} |
||||
// 扫描物料号查询数据
|
||||
const getScanSubmit = (params) => { |
||||
return http.request({ |
||||
url: `/blade-wms/combox/config/getStockByStorehouseAndGoods`, |
||||
method: 'get', |
||||
params |
||||
}) |
||||
} |
||||
// 新增
|
||||
const addIssue = data => {
|
||||
return http.request({ |
||||
url: '/blade-wms/stOtherOutRecord/submit', |
||||
method: 'post', |
||||
data |
||||
}); |
||||
}; |
||||
|
||||
|
||||
export default { |
||||
getRoleUser, |
||||
getScanSubmit, |
||||
addIssue |
||||
} |
||||
@ -0,0 +1,845 @@ |
||||
<template> |
||||
<ifrm> |
||||
<uni-forms ref="wrForm" class="formBox" style="margin-bottom: 140rpx;"> |
||||
<uni-forms-item> |
||||
<input type="text" :focus="partCodeFcous" @confirm="partCodeBlur" v-model="partCodeInfo" |
||||
class="uni-input-border" placeholder="请扫描物料号" /> |
||||
</uni-forms-item> |
||||
<view class="tableBox"> |
||||
<t-table> |
||||
<t-tr> |
||||
<t-td>出库原因</t-td> |
||||
<t-td> |
||||
<uni-data-select v-model="stOtherOutRecord.outType" |
||||
:localdata="useTypeOptions"></uni-data-select> |
||||
</t-td> |
||||
</t-tr> |
||||
<t-tr> |
||||
<t-td>领料人员</t-td> |
||||
<t-td> |
||||
<uni-data-select v-model="stOtherOutRecord.userId" :localdata="userData"></uni-data-select> |
||||
</t-td> |
||||
</t-tr> |
||||
<t-tr> |
||||
<t-td>备注</t-td> |
||||
<t-td> |
||||
<input name="loginPwd" placeholder="请输入" v-model="stOtherOutRecord.memo" type="text" /> |
||||
</t-td> |
||||
</t-tr> |
||||
<t-tr> |
||||
<t-td>物料号</t-td> |
||||
<t-td> |
||||
{{ stOtherOutRecord.partCode }} |
||||
</t-td> |
||||
</t-tr> |
||||
<t-tr> |
||||
<t-td>物料名称</t-td> |
||||
<t-td> |
||||
{{ stOtherOutRecord.partName }} |
||||
</t-td> |
||||
</t-tr> |
||||
</t-table> |
||||
|
||||
</view> |
||||
<view class="material-list-box" v-if="outbankScanList.length > 0"> |
||||
<view class="list-header"> |
||||
<text class="header-title">物料明细 ({{ outbankScanList.length }})</text> |
||||
</view> |
||||
<view class="card-container"> |
||||
<view class="material-card" v-for="(item, index) in outbankScanList" :key="index"> |
||||
<view class="card-row"> |
||||
<view class="label">批次号:</view> |
||||
<view class="value">{{ item.piNo }}</view> |
||||
</view> |
||||
<view class="card-row"> |
||||
<view class="label">型号/牌号:</view> |
||||
<view class="value">{{ item.materialModel }}</view> |
||||
</view> |
||||
<view class="card-row"> |
||||
<view class="label">炉批号:</view> |
||||
<view class="value">{{ item.stovePiNo }}</view> |
||||
</view> |
||||
<view class="card-row"> |
||||
<view class="label">库存数量:</view> |
||||
<view class="value">{{ item.usableQuantity }}</view> |
||||
</view> |
||||
<view class="card-row"> |
||||
<view class="label">计量单位:</view> |
||||
<view class="value">{{ item.unitName }}</view> |
||||
</view> |
||||
<view class="card-row"> |
||||
<view class="label">仓库/库位:</view> |
||||
<view class="value">{{ item.shName }} / {{ item.location }}</view> |
||||
</view> |
||||
<view class="card-row input-row"> |
||||
<view class="label">出库数量:</view> |
||||
<input type="number" class="qty-input" v-model="item.outQuantity" placeholder="输入数量" /> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view v-else class="empty-tip"> |
||||
<text>暂无物料，请扫描上方物料号</text> |
||||
</view> |
||||
</uni-forms> |
||||
<view class="footer-action"> |
||||
<button @click="handleSubmit" class="submit-btn" :disabled="outbankScanList.length === 0">提交</button> |
||||
</view> |
||||
</ifrm> |
||||
</template> |
||||
<script> |
||||
import ifrm from "@/pages/index/ifrm"; |
||||
import tTable from "@/components/t-table/t-table.vue"; |
||||
import tTh from "@/components/t-table/t-th.vue"; |
||||
import tTr from "@/components/t-table/t-tr.vue"; |
||||
import tTd from "@/components/t-table/t-td.vue"; |
||||
export default { |
||||
components: { |
||||
ifrm, |
||||
tTable, |
||||
tTh, |
||||
tTr, |
||||
tTd, |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
partCodeInfo: "", |
||||
partCodeFcous: true, |
||||
stOtherOutRecord: { |
||||
outType: 4, |
||||
partCode: '', |
||||
partName: '', |
||||
memo:'' |
||||
}, |
||||
useTypeOptions: [ |
||||
{ |
||||
value: 0, |
||||
text: '报废出库', |
||||
}, |
||||
{ |
||||
value: 1, |
||||
text: '料头出库', |
||||
}, |
||||
{ |
||||
value: 2, |
||||
text: '超额出库', |
||||
}, |
||||
{ |
||||
value: 3, |
||||
text: '复检出库', |
||||
}, |
||||
{ |
||||
value: 4, |
||||
text: '领用出库', |
||||
}, |
||||
{ |
||||
value: 5, |
||||
text: '库转移', |
||||
}, |
||||
{ |
||||
value: 6, |
||||
text: '退货出库', |
||||
}, |
||||
{ |
||||
value: 7, |
||||
text: '物料出库', |
||||
}, |
||||
{ |
||||
value: 8, |
||||
text: '班组提请', |
||||
}, |
||||
], |
||||
// 新增：物料列表数据 |
||||
materialList: [], |
||||
userData: [],// |
||||
outbankScanList: [],//物料列表 |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.getUserList(); |
||||
}, |
||||
methods: { |
||||
// 查询用户列表 |
||||
getUserList() { |
||||
this.$u.api.getRoleUser().then((res) => { |
||||
this.userData = res.data; |
||||
|
||||
this.userData.forEach((item) => { |
||||
item.text = item.name + '/' + item.code; |
||||
item.value = item.id; |
||||
}); |
||||
}); |
||||
}, |
||||
// 扫描物料号 |
||||
partCodeBlur(val) { |
||||
this.$u.api.getScanSubmit({ goodsCode: this.partCodeInfo }).then((res) => { |
||||
this.partCodeInfo = '' |
||||
this.outbankScanList = res.data; |
||||
if (this.outbankScanList.length > 0) { |
||||
this.stOtherOutRecord.partCode = this.outbankScanList[0].goodsCode; |
||||
this.stOtherOutRecord.partName = this.outbankScanList[0].goodsName; |
||||
} |
||||
this.outbankScanList.forEach(item => { |
||||
item.outQuantity = item.outQuantity == -1 ? 0 : item.outQuantity; |
||||
}); |
||||
|
||||
}); |
||||
}, |
||||
handleSubmit() { |
||||
if (this.stOtherOutRecord.outType === null || this.stOtherOutRecord.outType === undefined || this.stOtherOutRecord.outType === '') { |
||||
uni.showToast({ |
||||
title: '请选择出库原因', |
||||
icon: 'none' |
||||
}); |
||||
return; |
||||
} |
||||
if (!this.stOtherOutRecord.userId) { |
||||
uni.showToast({ |
||||
title: '请选择领料人员', |
||||
icon: 'none' |
||||
}); |
||||
return; |
||||
} |
||||
const validMaterials = []; |
||||
for (let item of this.outbankScanList) { |
||||
const qty = Number(item.outQuantity); |
||||
const stock = Number(item.usableQuantity); |
||||
|
||||
// 跳过数量为 0 或空的项 |
||||
if (!qty || qty <= 0) continue; |
||||
|
||||
// 校验：出库数量 > 库存数量 |
||||
if (qty > stock) { |
||||
uni.showToast({ |
||||
title: `物料 ${item.materialModel} 出库数量(${qty}) 大于库存(${stock})`, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}); |
||||
return; // 终止提交 |
||||
} |
||||
|
||||
validMaterials.push(item); |
||||
} |
||||
|
||||
if (validMaterials.length === 0) { |
||||
uni.showToast({ title: '请填写至少一项物料的出库数量', icon: 'none' }); |
||||
return; |
||||
} |
||||
|
||||
console.log('出库数据', validMaterials) |
||||
uni.showLoading({ |
||||
title: "提交中...", |
||||
}); |
||||
let params = { |
||||
outList: validMaterials, |
||||
stOtherOutRecord: this.stOtherOutRecord, |
||||
}; |
||||
this.$u.api.addIssue(params).then((res) => { |
||||
uni.showToast({ |
||||
title: `出库成功`, |
||||
icon: "none", |
||||
}); |
||||
this.partCodeFcous = true |
||||
this.stOtherOutRecord = { |
||||
outType: 4, |
||||
partCode: '', |
||||
partName: '', |
||||
memo:'' |
||||
}; |
||||
this.outbankScanList =[] |
||||
uni.hideLoading(); |
||||
}); |
||||
|
||||
|
||||
// let query = { |
||||
// boxBarcode: this.boxCode || "", //箱条码 |
||||
// endWcId: this.endCenterIndex, |
||||
// startStationCode: this.startCode, |
||||
// }; |
||||
// this.$u.api |
||||
// .boxBindingTesk(query) |
||||
// .then((res) => { |
||||
// uni.showToast({ |
||||
// title: `成功配送至 ${this.endCenter}!`, |
||||
// icon: "none", |
||||
// }); |
||||
// uni.hideLoading(); |
||||
|
||||
// this.startCode = ""; |
||||
// this.boxCode = "" |
||||
// this.startData = null; |
||||
// this.startInputFocus = true; |
||||
// }) |
||||
// .catch((err) => { |
||||
// uni.hideLoading(); |
||||
// this.startCode = ""; |
||||
// this.boxCode = "" |
||||
// this.startData = null; |
||||
// this.startInputFocus = true; |
||||
// }); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.page-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100vh; |
||||
background-color: #ffffff; |
||||
user-select: none; |
||||
font-size: 26rpx; |
||||
position: relative; |
||||
} |
||||
|
||||
.header { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 6rpx 16rpx; |
||||
background-color: #1d4ed8; |
||||
color: #ffffff; |
||||
flex-shrink: 0; |
||||
z-index: 20; |
||||
} |
||||
|
||||
.header-title { |
||||
font-weight: bold; |
||||
font-size: 28rpx; |
||||
letter-spacing: 1rpx; |
||||
} |
||||
|
||||
.content-scroll { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
display: flex; |
||||
flex-direction: column; |
||||
background-color: #ffffff; |
||||
} |
||||
|
||||
.module { |
||||
padding: 16rpx; |
||||
border-bottom: 4rpx solid #e2e8f0; |
||||
} |
||||
|
||||
.module-header { |
||||
display: flex; |
||||
align-items: center; |
||||
color: #1e293b; |
||||
font-weight: bold; |
||||
margin-bottom: 8rpx; |
||||
} |
||||
|
||||
.module-icon { |
||||
font-size: 32rpx; |
||||
margin-right: 8rpx; |
||||
} |
||||
|
||||
.module-title { |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.scan-input { |
||||
width: 100%; |
||||
padding: 16rpx; |
||||
background-color: #ffffff; |
||||
border: 4rpx solid #94a3b8; |
||||
border-radius: 4rpx; |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
color: #0f172a; |
||||
} |
||||
|
||||
.scan-input::placeholder { |
||||
color: #94a3b8; |
||||
font-weight: normal; |
||||
} |
||||
|
||||
.box-info { |
||||
margin-top: 12rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
background-color: #f8fafc; |
||||
padding: 12rpx; |
||||
border-radius: 4rpx; |
||||
border: 2rpx solid #e2e8f0; |
||||
} |
||||
|
||||
.info-section { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 4rpx; |
||||
flex: 1; |
||||
} |
||||
|
||||
.info-text { |
||||
color: #475569; |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.info-value { |
||||
font-weight: bold; |
||||
color: #0f172a; |
||||
margin-left: 4rpx; |
||||
} |
||||
|
||||
.info-value-center { |
||||
font-weight: bold; |
||||
color: #1d4ed8; |
||||
margin-left: 4rpx; |
||||
} |
||||
|
||||
.details-btn { |
||||
color: #1d4ed8; |
||||
background-color: #dbeafe; |
||||
font-weight: bold; |
||||
border: 2rpx solid #bfdbfe; |
||||
font-size: 26rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.details-btn:active { |
||||
background-color: #bfdbfe; |
||||
} |
||||
|
||||
.arrow { |
||||
margin-left: 4rpx; |
||||
font-size: 24rpx; |
||||
} |
||||
|
||||
.start-confirm { |
||||
margin-top: 8rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
font-weight: bold; |
||||
color: #059669; |
||||
} |
||||
|
||||
.check-icon { |
||||
font-size: 28rpx; |
||||
margin-right: 8rpx; |
||||
} |
||||
|
||||
.confirm-text { |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.picker-input { |
||||
width: 100%; |
||||
padding: 16rpx; |
||||
} |
||||
|
||||
.picker-disabled { |
||||
opacity: 0.5; |
||||
} |
||||
|
||||
.picker-value { |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
color: #0f172a; |
||||
} |
||||
|
||||
.picker-placeholder { |
||||
font-size: 28rpx; |
||||
color: #94a3b8; |
||||
} |
||||
|
||||
.footer { |
||||
padding: 16rpx; |
||||
background-color: #f1f5f9; |
||||
border-top: 2rpx solid #cbd5e1; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.submit-btn { |
||||
width: 100%; |
||||
background-color: #1d4ed8; |
||||
color: #ffffff; |
||||
padding: 20rpx; |
||||
border-radius: 4rpx; |
||||
font-weight: bold; |
||||
font-size: 30rpx; |
||||
border: none; |
||||
} |
||||
|
||||
.submit-btn:active { |
||||
background-color: #1e40af; |
||||
} |
||||
|
||||
.btn-disabled { |
||||
opacity: 0.5; |
||||
background-color: rgba(29, 78, 216, 0.5); |
||||
} |
||||
|
||||
/* Popup Styles */ |
||||
.popup-overlay { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
z-index: 100; |
||||
display: flex; |
||||
align-items: flex-end; |
||||
} |
||||
|
||||
.popup-content { |
||||
background-color: #ffffff; |
||||
border-radius: 16rpx 16rpx 0 0; |
||||
max-height: 70vh; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
border-top: 4rpx solid #94a3b8; |
||||
} |
||||
|
||||
.popup-header { |
||||
padding: 24rpx; |
||||
background-color: #ffffff; |
||||
border-bottom: 4rpx solid #e2e8f0; |
||||
flex-shrink: 0; |
||||
text-align: center; |
||||
} |
||||
|
||||
.popup-title { |
||||
font-weight: bold; |
||||
font-size: 30rpx; |
||||
color: #0f172a; |
||||
text-align: center; |
||||
} |
||||
|
||||
.popup-scroll { |
||||
flex: 1; |
||||
padding: 24rpx; |
||||
overflow-y: auto; |
||||
width: auto; |
||||
} |
||||
|
||||
.popup-orders { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 16rpx; |
||||
} |
||||
|
||||
.popup-order-item { |
||||
background-color: #f8fafc; |
||||
padding: 16rpx; |
||||
border: 2rpx solid #cbd5e1; |
||||
border-radius: 4rpx; |
||||
} |
||||
|
||||
.popup-order-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-bottom: 8rpx; |
||||
} |
||||
|
||||
.popup-order-no { |
||||
font-weight: bold; |
||||
color: #0f172a; |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.popup-order-qty { |
||||
color: #1d4ed8; |
||||
font-weight: bold; |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.popup-order-name { |
||||
color: #475569; |
||||
font-size: 24rpx; |
||||
} |
||||
|
||||
.popup-footer { |
||||
padding: 16rpx; |
||||
background-color: #f1f5f9; |
||||
border-top: 2rpx solid #cbd5e1; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.popup-close-btn { |
||||
width: 100%; |
||||
background-color: #ffffff; |
||||
border: 4rpx solid #94a3b8; |
||||
color: #1e293b; |
||||
padding: 16rpx; |
||||
border-radius: 4rpx; |
||||
font-weight: bold; |
||||
font-size: 28rpx; |
||||
} |
||||
|
||||
.popup-close-btn:active { |
||||
background-color: #e2e8f0; |
||||
} |
||||
|
||||
.help-tip { |
||||
position: absolute; |
||||
top: 45%; |
||||
left: 0; |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
pointer-events: none; |
||||
opacity: 0.5; |
||||
z-index: 10; |
||||
} |
||||
|
||||
.tip-content { |
||||
background-color: #1e293b; |
||||
color: #ffffff; |
||||
font-size: 20rpx; |
||||
padding: 8rpx 16rpx; |
||||
border-radius: 4rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.tip-icon { |
||||
margin-right: 8rpx; |
||||
font-size: 24rpx; |
||||
} |
||||
|
||||
.tip-text { |
||||
font-size: 20rpx; |
||||
} |
||||
|
||||
.bottom-input-row { |
||||
display: flex; |
||||
gap: 10px; |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
.weight-input-wrapper { |
||||
flex: 1; |
||||
} |
||||
|
||||
.submit-btn { |
||||
width: 88px; |
||||
height: 50px; |
||||
background-color: #155dfc; |
||||
border-radius: 10px; |
||||
color: #ffffff; |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
||||
0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
border: none; |
||||
padding: 0; |
||||
line-height: 50px; |
||||
} |
||||
|
||||
.submit-btn.disabled { |
||||
opacity: 0.5; |
||||
} |
||||
|
||||
.mode-switch { |
||||
display: flex; |
||||
width: 140px; |
||||
height: 34px; |
||||
border-radius: 4px; |
||||
border: 1px solid rgba(21, 93, 252, 1); |
||||
overflow: hidden; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
.switch-btn { |
||||
flex: 1; |
||||
text-align: center; |
||||
line-height: 32px; |
||||
font-size: 14px; |
||||
color: rgba(21, 93, 252, 1); |
||||
background-color: #fff; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.switch-btn.active { |
||||
background-color: rgba(21, 93, 252, 1); |
||||
color: #fff; |
||||
} |
||||
|
||||
.label-left { |
||||
flex-direction: row !important; |
||||
margin-top: 20rpx; |
||||
} |
||||
|
||||
/* 底部固定按钮区域 */ |
||||
.footer-action { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
padding: 20rpx 32rpx; |
||||
background-color: #ffffff; |
||||
border-top: 2rpx solid #e2e8f0; |
||||
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05); |
||||
z-index: 50; |
||||
} |
||||
|
||||
.picker-input { |
||||
width: 100%; |
||||
padding: 16rpx; |
||||
} |
||||
|
||||
.picker-value { |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
color: #0f172a; |
||||
} |
||||
|
||||
.picker-placeholder { |
||||
font-size: 28rpx; |
||||
color: #94a3b8; |
||||
} |
||||
|
||||
/* 禁用状态 */ |
||||
.picker-input.disabled { |
||||
opacity: 0.5; |
||||
background-color: #f1f5f9; |
||||
} |
||||
|
||||
.uni-input-border { |
||||
margin-bottom: 20rpx; |
||||
} |
||||
|
||||
.required-label { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.required-mark { |
||||
color: #ff0000; |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
margin-right: 4rpx; |
||||
} |
||||
|
||||
/* 空数据提示样式 */ |
||||
.empty-tip-picker { |
||||
width: 100%; |
||||
padding: 16rpx; |
||||
background-color: #f8fafc; |
||||
border: 2rpx solid #e2e8f0; |
||||
border-radius: 4rpx; |
||||
margin-bottom: 20rpx; |
||||
} |
||||
|
||||
.empty-text { |
||||
color: #94a3b8; |
||||
font-size: 28rpx; |
||||
text-align: center; |
||||
display: block; |
||||
} |
||||
|
||||
.uni-input-border { |
||||
margin-bottom: 20rpx; |
||||
} |
||||
|
||||
/* 物料列表容器 */ |
||||
.material-list-box { |
||||
margin-top: 20rpx; |
||||
background-color: #ffffff; |
||||
border-radius: 8rpx; |
||||
padding: 10rpx; |
||||
} |
||||
|
||||
.list-header { |
||||
padding: 10rpx 5rpx; |
||||
border-bottom: 1px solid #f0f0f0; |
||||
margin-bottom: 10rpx; |
||||
} |
||||
|
||||
.header-title { |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
color: #333; |
||||
} |
||||
|
||||
.card-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 15rpx; |
||||
} |
||||
|
||||
/* 单个物料卡片 */ |
||||
.material-card { |
||||
background-color: #f8fafc; |
||||
border: 1px solid #e2e8f0; |
||||
border-radius: 8rpx; |
||||
padding: 15rpx; |
||||
position: relative; |
||||
} |
||||
|
||||
.card-row { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 8rpx; |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.card-row:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.label { |
||||
color: #64748b; |
||||
width: 140rpx; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.value { |
||||
color: #0f172a; |
||||
font-weight: 500; |
||||
flex: 1; |
||||
} |
||||
|
||||
/* 删除按钮 */ |
||||
.delete-btn { |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
line-height: 36rpx; |
||||
text-align: center; |
||||
background-color: #fee2e2; |
||||
color: #ef4444; |
||||
border-radius: 50%; |
||||
font-size: 30rpx; |
||||
margin-left: 10rpx; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
/* 数量输入框行 */ |
||||
.input-row { |
||||
margin-top: 5rpx; |
||||
padding-top: 5rpx; |
||||
border-top: 1px dashed #cbd5e1; |
||||
} |
||||
|
||||
.qty-input { |
||||
flex: 1; |
||||
height: 50rpx; |
||||
line-height: 50rpx; |
||||
background-color: #fff; |
||||
border: 1px solid #cbd5e1; |
||||
border-radius: 4rpx; |
||||
padding: 0 10rpx; |
||||
font-size: 26rpx; |
||||
text-align: right; |
||||
} |
||||
|
||||
/* 空状态提示 */ |
||||
.empty-tip { |
||||
text-align: center; |
||||
padding: 40rpx 0; |
||||
color: #94a3b8; |
||||
font-size: 26rpx; |
||||
} |
||||
</style> |
||||
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 29 KiB |
Loading…
Reference in new issue