406 lines
11 KiB
Vue
406 lines
11 KiB
Vue
<template>
|
||
<view class="destroy-container">
|
||
<common-header title="销毁酒类" theme="common" @back="goBack" />
|
||
|
||
<view class="destroy-content page-content">
|
||
<!-- 扫描区域 -->
|
||
<view class="scan-section">
|
||
<view class="scan-card">
|
||
<uni-icons type="scan" size="80" color="#f44336" />
|
||
<text class="scan-title">扫描二维码销毁酒类</text>
|
||
<text class="scan-desc">请扫描酒类包装上的二维码</text>
|
||
<uni-button type="primary" @click="scanQRCode">
|
||
<uni-icons type="scan" size="20" color="#fff" />
|
||
开始扫描
|
||
</uni-button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 手动输入区域 -->
|
||
<view class="manual-section">
|
||
<uni-card title="手动输入" :is-shadow="false">
|
||
<uni-forms ref="form" :model="formData" :rules="rules" label-width="120">
|
||
<uni-forms-item label="SKU编码" required name="skuSn">
|
||
<uni-easyinput
|
||
v-model="formData.skuSn"
|
||
placeholder="请输入或扫描SKU编码"
|
||
maxlength="20"
|
||
@input="validateSkuSn" />
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item v-if="liquorInfo.name" label="酒类名称">
|
||
<text class="info-text">{{ liquorInfo.name }}</text>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item v-if="liquorInfo.batch" label="生产批次">
|
||
<text class="info-text">{{ liquorInfo.batch }}</text>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item v-if="liquorInfo.productDate" label="生产日期">
|
||
<text class="info-text">{{ liquorInfo.productDate }}</text>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item v-if="liquorInfo.volume" label="规格容量">
|
||
<text class="info-text">{{ liquorInfo.volume }}</text>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item label="销毁原因" required name="reason">
|
||
<uni-data-select
|
||
v-model="formData.reason"
|
||
:localdata="reasonOptions"
|
||
placeholder="请选择销毁原因" />
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item label="销毁数量" required name="quantity">
|
||
<uni-easyinput
|
||
v-model="formData.quantity"
|
||
type="number"
|
||
placeholder="请输入销毁数量"
|
||
:min="1" />
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item label="销毁备注" name="remark">
|
||
<uni-easyinput
|
||
v-model="formData.remark"
|
||
type="textarea"
|
||
placeholder="请输入销毁备注"
|
||
:auto-height="true" />
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
</view>
|
||
|
||
<!-- 销毁确认 -->
|
||
<view class="confirm-section">
|
||
<uni-card title="销毁确认" :is-shadow="false">
|
||
<view class="warning-box">
|
||
<uni-icons type="warning" size="24" color="#f44336" />
|
||
<text class="warning-text">销毁操作不可逆，请谨慎操作！</text>
|
||
</view>
|
||
|
||
<view class="form-actions">
|
||
<uni-button type="default" @click="goBack">取消</uni-button>
|
||
<uni-button
|
||
type="primary"
|
||
@click="confirmDestroy"
|
||
:loading="submitting"
|
||
:disabled="!formData.skuSn || !formData.reason || !formData.quantity">
|
||
确认销毁
|
||
</uni-button>
|
||
</view>
|
||
</uni-card>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import CommonHeader from '@/components/common-header/common-header.vue'
|
||
import { getLiquorInfo, destroyLiquor } from '@/api/common/destroy'
|
||
|
||
export default {
|
||
name: 'DestroyLiquor',
|
||
components: {
|
||
CommonHeader
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
formData: {
|
||
skuSn: '',
|
||
reason: '',
|
||
quantity: 1,
|
||
remark: ''
|
||
},
|
||
liquorInfo: {
|
||
name: '',
|
||
batch: '',
|
||
productDate: '',
|
||
volume: ''
|
||
},
|
||
rules: {
|
||
skuSn: {
|
||
rules: [
|
||
{ required: true, errorMessage: '请输入SKU编码' },
|
||
{ pattern: /^\d{14}$/, errorMessage: 'SKU编码必须为14位数字' }
|
||
]
|
||
},
|
||
reason: {
|
||
rules: [{ required: true, errorMessage: '请选择销毁原因' }]
|
||
},
|
||
quantity: {
|
||
rules: [
|
||
{ required: true, errorMessage: '请输入销毁数量' },
|
||
{ pattern: /^[1-9]\d*$/, errorMessage: '销毁数量必须为正整数' }
|
||
]
|
||
}
|
||
},
|
||
reasonOptions: [
|
||
{ value: '1', text: '过期变质' },
|
||
{ value: '2', text: '质量问题' },
|
||
{ value: '3', text: '包装破损' },
|
||
{ value: '4', text: '批次召回' },
|
||
{ value: '5', text: '库存清理' },
|
||
{ value: '6', text: '其他原因' }
|
||
],
|
||
submitting: false
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// 扫描二维码
|
||
scanQRCode() {
|
||
// #ifdef APP-PLUS
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
console.log('扫码结果:', res.result)
|
||
this.parseQRCode(res.result)
|
||
},
|
||
fail: (err) => {
|
||
console.error('扫码失败:', err)
|
||
this.$modal.showToast('扫码失败，请重试')
|
||
}
|
||
})
|
||
// #endif
|
||
|
||
// #ifdef H5 || MP-WEIXIN
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
console.log('扫码结果:', res.result)
|
||
this.parseQRCode(res.result)
|
||
},
|
||
fail: (err) => {
|
||
console.error('扫码失败:', err)
|
||
this.$modal.showToast('扫码失败，请重试')
|
||
}
|
||
})
|
||
// #endif
|
||
},
|
||
|
||
// 解析二维码
|
||
parseQRCode(qrResult) {
|
||
try {
|
||
// 解析二维码链接: ma.zdtap.com/scan?skuSn=25070296207007
|
||
let url
|
||
if (qrResult.startsWith('http://') || qrResult.startsWith('https://')) {
|
||
url = new URL(qrResult)
|
||
} else {
|
||
// 处理不带协议的链接
|
||
url = new URL(`https://${qrResult}`)
|
||
}
|
||
|
||
const skuSn = url.searchParams.get('skuSn')
|
||
|
||
if (!skuSn) {
|
||
this.$modal.showToast('二维码格式错误，未找到SKU编码')
|
||
return
|
||
}
|
||
|
||
// 验证SKU编码格式（14位数字）
|
||
if (!/^\d{14}$/.test(skuSn)) {
|
||
this.$modal.showToast('SKU编码格式错误，应为14位数字')
|
||
return
|
||
}
|
||
|
||
this.formData.skuSn = skuSn
|
||
this.getLiquorInfoBySkuSn(skuSn)
|
||
this.$modal.showToast('扫码成功！')
|
||
|
||
} catch (error) {
|
||
console.error('解析二维码失败:', error)
|
||
this.$modal.showToast('二维码格式错误，请重新扫描')
|
||
}
|
||
},
|
||
|
||
// 验证SKU编码
|
||
validateSkuSn() {
|
||
if (this.formData.skuSn && /^\d{14}$/.test(this.formData.skuSn)) {
|
||
this.getLiquorInfoBySkuSn(this.formData.skuSn)
|
||
} else {
|
||
this.clearLiquorInfo()
|
||
}
|
||
},
|
||
|
||
// 获取酒类信息
|
||
async getLiquorInfoBySkuSn(skuSn) {
|
||
try {
|
||
const response = await getLiquorInfo(skuSn)
|
||
if (response.code === 200) {
|
||
this.liquorInfo = response.data || {}
|
||
} else {
|
||
// 如果API返回错误，显示默认信息
|
||
this.showDefaultLiquorInfo(skuSn)
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('获取酒类信息失败:', error)
|
||
this.showDefaultLiquorInfo(skuSn)
|
||
}
|
||
},
|
||
|
||
// 显示默认酒类信息
|
||
showDefaultLiquorInfo(skuSn) {
|
||
this.liquorInfo = {
|
||
name: '茅台酒（53度）',
|
||
batch: `MT${skuSn.substring(0, 8)}`,
|
||
productDate: `20${skuSn.substring(0, 2)}-${skuSn.substring(2, 4)}-${skuSn.substring(4, 6)}`,
|
||
volume: '500ml'
|
||
}
|
||
},
|
||
|
||
// 清空酒类信息
|
||
clearLiquorInfo() {
|
||
this.liquorInfo = {
|
||
name: '',
|
||
batch: '',
|
||
productDate: '',
|
||
volume: ''
|
||
}
|
||
},
|
||
|
||
// 确认销毁
|
||
async confirmDestroy() {
|
||
try {
|
||
// 表单验证
|
||
const valid = await this.$refs.form.validate()
|
||
if (!valid) return
|
||
|
||
// 二次确认
|
||
const confirmRes = await this.$modal.showConfirm(
|
||
`确定要销毁SKU编码为 ${this.formData.skuSn} 的酒类吗？\n数量：${this.formData.quantity} 瓶\n此操作不可逆！`
|
||
)
|
||
if (!confirmRes.confirm) return
|
||
|
||
this.submitting = true
|
||
|
||
// 提交销毁请求
|
||
const destroyData = {
|
||
skuSn: this.formData.skuSn,
|
||
reason: this.formData.reason,
|
||
quantity: parseInt(this.formData.quantity),
|
||
remark: this.formData.remark,
|
||
destroyTime: new Date().toISOString(),
|
||
liquorInfo: this.liquorInfo
|
||
}
|
||
|
||
const response = await destroyLiquor(destroyData)
|
||
|
||
if (response.code === 200) {
|
||
this.$modal.showToast('销毁成功！')
|
||
|
||
// 重置表单
|
||
this.resetForm()
|
||
|
||
// 可选：返回上一页
|
||
// setTimeout(() => {
|
||
// uni.navigateBack()
|
||
// }, 1500)
|
||
} else {
|
||
this.$modal.showToast(response.message || '销毁失败')
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('销毁失败:', error)
|
||
this.$modal.showToast('销毁失败，请重试')
|
||
} finally {
|
||
this.submitting = false
|
||
}
|
||
},
|
||
|
||
// 重置表单
|
||
resetForm() {
|
||
this.formData = {
|
||
skuSn: '',
|
||
reason: '',
|
||
quantity: 1,
|
||
remark: ''
|
||
}
|
||
this.clearLiquorInfo()
|
||
},
|
||
|
||
goBack() {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.destroy-container {
|
||
min-height: 100vh;
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
.destroy-content {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.scan-section {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.scan-card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 60rpx 30rpx;
|
||
text-align: center;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.scan-title {
|
||
display: block;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin: 30rpx 0 10rpx;
|
||
}
|
||
|
||
.scan-desc {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.manual-section {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.info-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.confirm-section {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.warning-box {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
background: #fff5f5;
|
||
border: 1px solid #fecaca;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.warning-text {
|
||
font-size: 28rpx;
|
||
color: #dc2626;
|
||
margin-left: 10rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.form-actions uni-button {
|
||
flex: 1;
|
||
}
|
||
</style>
|
||
|