687 lines
15 KiB
Vue
687 lines
15 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 搜索栏 -->
|
||
<view class="search-section">
|
||
<view class="search-bar">
|
||
<input
|
||
class="search-input"
|
||
v-model="keyword"
|
||
placeholder="搜索商品名称"
|
||
@confirm="search"
|
||
/>
|
||
<button class="add-btn" @click="addProduct">+</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分类侧栏 + 商品列表 -->
|
||
<view class="content-wrapper">
|
||
<!-- 左侧分类 -->
|
||
<scroll-view scroll-y class="category-sidebar">
|
||
<view class="category-item" :class="{ active: !categoryId }" @click="selectCategory('')">
|
||
全部
|
||
</view>
|
||
<view v-for="cat in categories" :key="cat.categoryId" class="category-item" :class="{ active: categoryId === cat.categoryId }" @click="selectCategory(cat.categoryId)">
|
||
{{ cat.name }}
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 右侧商品列表 -->
|
||
<scroll-view scroll-y class="product-scroll">
|
||
<view class="product-list">
|
||
<view
|
||
v-for="item in productList"
|
||
:key="item.productId"
|
||
class="product-item"
|
||
>
|
||
<view class="product-info" @click="editProduct(item)">
|
||
<view class="product-header">
|
||
<text class="product-name">{{ item.name }}</text>
|
||
<text class="product-category" v-if="item.categoryName">{{ item.categoryName }}</text>
|
||
</view>
|
||
<text class="product-spec">{{ item.spec || '-' }}</text>
|
||
<view class="product-price">
|
||
<text class="price">¥{{ item.price }}</text>
|
||
<text class="unit">/{{ item.unit }}</text>
|
||
</view>
|
||
<view class="product-status">
|
||
<text :class="['status', item.status === 1 ? 'on' : 'off']">
|
||
{{ item.status === 1 ? '上架' : '下架' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="product-actions">
|
||
<view class="action-btn" @click="toggleStatus(item)">
|
||
{{ item.status === 1 ? '下架' : '上架' }}
|
||
</view>
|
||
<view class="action-btn delete" @click="deleteProduct(item)">
|
||
删除
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view v-if="productList.length === 0" class="empty">
|
||
<text>暂无商品</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 商品表单弹窗 -->
|
||
<view class="modal" v-if="showModal">
|
||
<view class="modal-mask" @click="closeModal"></view>
|
||
<view class="modal-content">
|
||
<view class="modal-header">
|
||
<text>{{ isEdit ? '编辑商品' : '新增商品' }}</text>
|
||
<text class="close-btn" @click="closeModal">×</text>
|
||
</view>
|
||
<view class="modal-body">
|
||
<view class="form-item">
|
||
<text class="label"><text class="required">*</text>分类</text>
|
||
<picker :range="categories" range-key="name" @change="onCategoryChange">
|
||
<view class="picker">
|
||
{{ form.categoryId ? getCategoryName(form.categoryId) : '请选择分类' }}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label"><text class="required">*</text>商品名称</text>
|
||
<input class="input" v-model="form.name" placeholder="请输入商品名称" />
|
||
</view>
|
||
<view class="form-row size-row">
|
||
<view class="form-item half">
|
||
<text class="label">长度(mm)</text>
|
||
<input class="input" type="digit" v-model="form.length" maxlength="5" />
|
||
</view>
|
||
<view class="form-item half">
|
||
<text class="label">宽度(mm)</text>
|
||
<input class="input" type="digit" v-model="form.width" maxlength="5" />
|
||
</view>
|
||
<view class="form-item half">
|
||
<text class="label">面积(m²)</text>
|
||
<input class="input" type="digit" v-model="form.area" disabled />
|
||
</view>
|
||
</view>
|
||
<view class="form-row">
|
||
<view class="form-item half">
|
||
<text class="label">颜色</text>
|
||
<input class="input" v-model="form.spec" />
|
||
</view>
|
||
<view class="form-item half">
|
||
<text class="label"><text class="required">*</text>单位</text>
|
||
<input class="input" v-model="form.unit" placeholder="如：个、箱、米" />
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label"><text class="required">*</text>价格</text>
|
||
<input class="input" type="digit" v-model="form.price" placeholder="请输入价格" />
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label">备注</text>
|
||
<textarea class="textarea" v-model="form.remark" />
|
||
</view>
|
||
</view>
|
||
<view class="modal-footer">
|
||
<button class="cancel-btn" @click="closeModal">取消</button>
|
||
<button class="confirm-btn" @click="saveProduct">保存</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import productApi from '@/api/product'
|
||
import { canManageProduct } from '@/utils/auth'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
keyword: '',
|
||
categoryId: '',
|
||
productList: [],
|
||
categories: [],
|
||
showModal: false,
|
||
isEdit: false,
|
||
form: {
|
||
productId: '',
|
||
categoryId: '',
|
||
name: '',
|
||
spec: '',
|
||
unit: '',
|
||
price: '',
|
||
length: '',
|
||
width: '',
|
||
area: '',
|
||
remark: '',
|
||
status: 1
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
if (!canManageProduct()) {
|
||
uni.showToast({ title: '无权限', icon: 'none' })
|
||
uni.navigateBack()
|
||
return
|
||
}
|
||
this.loadCategories()
|
||
this.loadProducts()
|
||
},
|
||
computed: {
|
||
computedArea() {
|
||
const l = parseFloat(this.form.length)
|
||
const w = parseFloat(this.form.width)
|
||
// 长度(mm) × 宽度(mm) ÷ 1000000 = 面积(m²)
|
||
if (!isNaN(l) && !isNaN(w) && l > 0 && w > 0) {
|
||
return (l * w / 1000000).toFixed(4)
|
||
}
|
||
return ''
|
||
}
|
||
},
|
||
watch: {
|
||
computedArea(val) {
|
||
this.form.area = val
|
||
}
|
||
},
|
||
methods: {
|
||
async loadCategories() {
|
||
try {
|
||
const categories = await productApi.getCategories()
|
||
this.categories = categories || []
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
},
|
||
async loadProducts() {
|
||
try {
|
||
const res = await productApi.getAllProducts({
|
||
keyword: this.keyword,
|
||
categoryId: this.categoryId,
|
||
page: 1,
|
||
pageSize: 100
|
||
})
|
||
this.productList = res.records || []
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
},
|
||
selectCategory(id) {
|
||
this.categoryId = id
|
||
this.loadProducts()
|
||
},
|
||
search() {
|
||
this.loadProducts()
|
||
},
|
||
addProduct() {
|
||
this.isEdit = false
|
||
this.form = {
|
||
productId: '',
|
||
name: '',
|
||
spec: '',
|
||
unit: '',
|
||
price: '',
|
||
categoryId: '',
|
||
length: '',
|
||
width: '',
|
||
area: '',
|
||
remark: '',
|
||
status: 1
|
||
}
|
||
this.showModal = true
|
||
},
|
||
editProduct(item) {
|
||
this.isEdit = true
|
||
this.form = { ...item }
|
||
this.showModal = true
|
||
},
|
||
closeModal() {
|
||
this.showModal = false
|
||
},
|
||
onCategoryChange(e) {
|
||
const index = e.detail.value
|
||
this.form.categoryId = this.categories[index].categoryId
|
||
},
|
||
getCategoryName(categoryId) {
|
||
const cat = this.categories.find(c => c.categoryId === categoryId)
|
||
return cat ? cat.name : ''
|
||
},
|
||
async saveProduct() {
|
||
if (!this.form.categoryId) {
|
||
uni.showToast({ title: '请选择分类', icon: 'none' })
|
||
return
|
||
}
|
||
if (!this.form.name) {
|
||
uni.showToast({ title: '请输入商品名称', icon: 'none' })
|
||
return
|
||
}
|
||
if (!this.form.unit) {
|
||
uni.showToast({ title: '请输入单位', icon: 'none' })
|
||
return
|
||
}
|
||
if (!this.form.price) {
|
||
uni.showToast({ title: '请输入价格', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
try {
|
||
const formData = JSON.parse(JSON.stringify(this.form))
|
||
if (this.isEdit) {
|
||
await productApi.updateProduct(formData.productId, formData)
|
||
uni.showToast({ title: '更新成功', icon: 'success' })
|
||
} else {
|
||
await productApi.createProduct(formData)
|
||
uni.showToast({ title: '创建成功', icon: 'success' })
|
||
}
|
||
this.closeModal()
|
||
this.loadProducts()
|
||
} catch (e) {
|
||
console.error(e)
|
||
uni.showToast({ title: e.message || '操作失败', icon: 'none' })
|
||
}
|
||
},
|
||
async toggleStatus(item) {
|
||
const newStatus = item.status === 1 ? 0 : 1
|
||
try {
|
||
await productApi.updateProduct(item.productId, {
|
||
status: newStatus
|
||
})
|
||
uni.showToast({ title: newStatus === 1 ? '已上架' : '已下架', icon: 'success' })
|
||
this.loadProducts()
|
||
} catch (e) {
|
||
console.error(e)
|
||
uni.showToast({ title: '操作失败', icon: 'none' })
|
||
}
|
||
},
|
||
async deleteProduct(item) {
|
||
uni.showModal({
|
||
title: '确认删除',
|
||
content: `确定要删除商品"${item.name}"吗？`,
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
await productApi.deleteProduct(item.productId)
|
||
uni.showToast({ title: '删除成功', icon: 'success' })
|
||
this.loadProducts()
|
||
} catch (e) {
|
||
console.error(e)
|
||
uni.showToast({ title: '删除失败', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
}
|
||
|
||
/* 搜索区域 */
|
||
.search-section {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.search-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 50rpx;
|
||
padding: 0 20rpx;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.add-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
background: #3cc51f;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 50%;
|
||
font-size: 36rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
/* 内容区域：侧栏+列表 */
|
||
.content-wrapper {
|
||
display: flex;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 分类侧栏 */
|
||
.category-sidebar {
|
||
width: 160rpx;
|
||
background: #fff;
|
||
flex-shrink: 0;
|
||
border-right: 1rpx solid #eee;
|
||
}
|
||
|
||
.category-item {
|
||
padding: 28rpx 16rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
text-align: center;
|
||
border-left: 6rpx solid transparent;
|
||
}
|
||
|
||
.category-item.active {
|
||
background: #f8f9fa;
|
||
color: #667eea;
|
||
font-weight: bold;
|
||
border-left-color: #667eea;
|
||
}
|
||
|
||
/* 商品列表 */
|
||
.product-scroll {
|
||
flex: 1;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.product-list {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.search-bar {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
height: 70rpx;
|
||
padding: 0 20rpx;
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.search-btn {
|
||
width: 120rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
background: #3cc51f;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 8rpx;
|
||
margin-left: 20rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.add-btn {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
background: #1890ff;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 8rpx;
|
||
margin-left: 20rpx;
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.product-list {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.product-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 24rpx;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
}
|
||
|
||
.product-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
display: block;
|
||
}
|
||
|
||
.product-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.product-category {
|
||
font-size: 22rpx;
|
||
color: #667eea;
|
||
background: #f0f0ff;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.product-spec {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 8rpx;
|
||
display: block;
|
||
}
|
||
|
||
.product-price {
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.price {
|
||
color: #ff4d4f;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.unit {
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.product-status {
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.status {
|
||
font-size: 22rpx;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.status.on {
|
||
background: #e6f7ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.status.off {
|
||
background: #fff7e6;
|
||
color: #fa8c16;
|
||
}
|
||
|
||
.product-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 8rpx 20rpx;
|
||
background: #e6f7ff;
|
||
color: #1890ff;
|
||
border-radius: 4rpx;
|
||
font-size: 24rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.action-btn.delete {
|
||
background: #fff1f0;
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.empty {
|
||
padding: 100rpx;
|
||
text-align: center;
|
||
color: #999;
|
||
}
|
||
|
||
/* 弹窗 */
|
||
.modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
.modal-mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.modal-content {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #fff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
max-height: 80vh;
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.close-btn {
|
||
font-size: 48rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 30rpx;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.form-row .half {
|
||
flex: 1;
|
||
}
|
||
|
||
.size-row {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.size-row .half {
|
||
flex: 1;
|
||
}
|
||
|
||
.form-row.three .half {
|
||
flex: 1;
|
||
}
|
||
|
||
.label {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.required {
|
||
color: #ff4d4f;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.input[disabled] {
|
||
background: #f5f5f5;
|
||
color: #999;
|
||
}
|
||
|
||
.input {
|
||
width: 100%;
|
||
height: 70rpx;
|
||
padding: 0 20rpx;
|
||
background: #fff;
|
||
border: 2rpx solid #e5e5e5;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.picker {
|
||
width: 100%;
|
||
height: 70rpx;
|
||
padding: 0 20rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
line-height: 70rpx;
|
||
}
|
||
|
||
.textarea {
|
||
width: 100%;
|
||
height: 150rpx;
|
||
padding: 20rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.modal-footer {
|
||
display: flex;
|
||
padding: 30rpx;
|
||
border-top: 1rpx solid #f5f5f5;
|
||
}
|
||
|
||
.cancel-btn, .confirm-btn {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 40rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.cancel-btn {
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.confirm-btn {
|
||
background: #3cc51f;
|
||
color: #fff;
|
||
}
|
||
</style>
|