380 lines
9.2 KiB
Vue
380 lines
9.2 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<!-- 顶部导航栏 -->
|
||
|
|
<view class="navbar">
|
||
|
|
<view class="nav-back" @tap="goBack">
|
||
|
|
<uni-icons type="back" size="18" color="#fff"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="nav-title">批量删除</view>
|
||
|
|
<view class="nav-more">
|
||
|
|
<uni-icons type="more-filled" size="18" color="#fff"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 搜索栏 -->
|
||
|
|
<view class="search-bar">
|
||
|
|
<view class="search-input">
|
||
|
|
<uni-icons type="search" size="18" color="#999"></uni-icons>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="搜索商品名称、条码"
|
||
|
|
placeholder-class="placeholder"
|
||
|
|
v-model="searchText"
|
||
|
|
@confirm="onSearch"
|
||
|
|
/>
|
||
|
|
<uni-icons type="scan" size="18" color="#999"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="filter-btn" @tap="showFilter = !showFilter">
|
||
|
|
<uni-icons type="filter" size="18" color="#999"></uni-icons>
|
||
|
|
<text>筛选</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 商品列表 -->
|
||
|
|
<scroll-view class="goods-list" scroll-y="true">
|
||
|
|
<!-- 空列表提示 -->
|
||
|
|
<view v-if="goodsList.length === 0" class="empty-tip">
|
||
|
|
<text>暂无商品数据</text>
|
||
|
|
</view>
|
||
|
|
<!-- 商品项 -->
|
||
|
|
<view
|
||
|
|
class="goods-item"
|
||
|
|
v-for="item in goodsList"
|
||
|
|
:key="item.id"
|
||
|
|
>
|
||
|
|
<view class="checkbox-wrap" @tap="toggleSelect(item.id)">
|
||
|
|
<view
|
||
|
|
class="custom-checkbox"
|
||
|
|
:class="{ checked: selectedIds.includes(String(item.id)) }"
|
||
|
|
>
|
||
|
|
<text v-if="selectedIds.includes(String(item.id))" class="check-icon">✓</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="goods-info">
|
||
|
|
<image
|
||
|
|
:src="item.mainImage ? 'http://193.112.94.36:8081' + item.mainImage : '/static/default-goods.png'"
|
||
|
|
class="goods-img"
|
||
|
|
mode="aspectFill"
|
||
|
|
/>
|
||
|
|
<view class="goods-details">
|
||
|
|
<text class="goods-name">{{ item.productName || '未命名商品' }}</text>
|
||
|
|
<text class="goods-barcode">{{ item.productBarCode || '无条码' }}</text>
|
||
|
|
<text class="goods-price">￥{{ item.storePrice ? Number(item.storePrice).toFixed(2) : '0.00' }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
|
||
|
|
<!-- 底部操作栏 -->
|
||
|
|
<view class="bottom-bar" v-if="goodsList.length > 0">
|
||
|
|
<view class="select-all" @tap="toggleSelectAll">
|
||
|
|
<view class="custom-checkbox" :class="{ checked: isAllSelected }">
|
||
|
|
<text v-if="isAllSelected" class="check-icon">✓</text>
|
||
|
|
</view>
|
||
|
|
<text>全选 (已选{{ selectedIds.length }})</text>
|
||
|
|
</view>
|
||
|
|
<button
|
||
|
|
class="delete-btn"
|
||
|
|
:class="{ disabled: selectedIds.length === 0 }"
|
||
|
|
:disabled="selectedIds.length === 0"
|
||
|
|
@tap="onDeleteSelected"
|
||
|
|
>
|
||
|
|
删除商品
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getProductList as fetchProductList, batchDeleteProduct } from '@/api/product'
|
||
|
|
import { getToken, getStoreId } from '@/utils/auth'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
searchText: '',
|
||
|
|
showFilter: false,
|
||
|
|
storeId: null,
|
||
|
|
goodsList: [],
|
||
|
|
selectedIds: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
allCheckboxValues() {
|
||
|
|
return this.goodsList.map(item => ({
|
||
|
|
text: '',
|
||
|
|
value: String(item.id)
|
||
|
|
}));
|
||
|
|
},
|
||
|
|
isAllSelected() {
|
||
|
|
return this.goodsList.length > 0 && this.selectedIds.length === this.goodsList.length;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
const storeId = getStoreId();
|
||
|
|
if (storeId) {
|
||
|
|
this.storeId = storeId;
|
||
|
|
this.getProductList();
|
||
|
|
} else {
|
||
|
|
uni.showToast({ title: '请先选择门店', icon: 'none', duration: 1500 });
|
||
|
|
setTimeout(() => uni.navigateBack(), 1500);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
goBack() {
|
||
|
|
uni.navigateBack();
|
||
|
|
},
|
||
|
|
// 加载商品列表
|
||
|
|
async getProductList(searchParams = {}) {
|
||
|
|
try {
|
||
|
|
if (this.storeId) {
|
||
|
|
searchParams.storeId = this.storeId;
|
||
|
|
}
|
||
|
|
const res = await fetchProductList(searchParams);
|
||
|
|
if (res && res.code === 200 && Array.isArray(res.data)) {
|
||
|
|
this.goodsList = res.data;
|
||
|
|
this.selectedIds = [];
|
||
|
|
} else {
|
||
|
|
uni.showToast({ title: res?.msg || '获取商品失败', icon: 'none' });
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取商品异常:', error);
|
||
|
|
uni.showToast({ title: '网络错误', icon: 'none' });
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 搜索
|
||
|
|
onSearch() {
|
||
|
|
const keyword = this.searchText.trim();
|
||
|
|
if (!keyword) {
|
||
|
|
this.getProductList();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const searchParams = /^\d+$/.test(keyword)
|
||
|
|
? { productBarCode: keyword }
|
||
|
|
: { productName: keyword };
|
||
|
|
this.getProductList(searchParams);
|
||
|
|
},
|
||
|
|
// 单个商品选中/取消
|
||
|
|
toggleSelect(id) {
|
||
|
|
const idStr = String(id);
|
||
|
|
const index = this.selectedIds.indexOf(idStr);
|
||
|
|
if (index > -1) {
|
||
|
|
this.selectedIds.splice(index, 1);
|
||
|
|
} else {
|
||
|
|
this.selectedIds.push(idStr);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 全选/取消全选
|
||
|
|
toggleSelectAll() {
|
||
|
|
if (this.isAllSelected) {
|
||
|
|
this.selectedIds = [];
|
||
|
|
} else {
|
||
|
|
this.selectedIds = this.goodsList.map(item => String(item.id));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 批量删除
|
||
|
|
async onDeleteSelected() {
|
||
|
|
if (this.selectedIds.length === 0) return;
|
||
|
|
|
||
|
|
uni.showModal({
|
||
|
|
title: '确认删除',
|
||
|
|
content: `确定删除选中的${this.selectedIds.length}个商品？删除后不可恢复！`,
|
||
|
|
success: async (res) => {
|
||
|
|
if (res.confirm) {
|
||
|
|
try {
|
||
|
|
const idsToDelete = this.selectedIds.map(id => Number(id));
|
||
|
|
const result = await batchDeleteProduct(idsToDelete);
|
||
|
|
if (result && result.code === 200) {
|
||
|
|
uni.showToast({ title: '删除成功', icon: 'success' });
|
||
|
|
this.getProductList();
|
||
|
|
} else {
|
||
|
|
uni.showToast({ title: result?.msg || '删除失败', icon: 'none' });
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('删除异常:', error);
|
||
|
|
uni.showToast({ title: '网络错误', icon: 'none' });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* 全局容器 */
|
||
|
|
.container {
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
min-height: 100vh;
|
||
|
|
padding-bottom: 80rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 导航栏 */
|
||
|
|
.navbar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 16px;
|
||
|
|
background-color: #e63946;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.nav-title { font-size: 18px; font-weight: 600; }
|
||
|
|
|
||
|
|
/* 搜索栏 */
|
||
|
|
.search-bar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 12px 16px;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
.search-input {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 10px 12px;
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
.search-input input {
|
||
|
|
flex: 1;
|
||
|
|
margin-left: 8px;
|
||
|
|
font-size: 14px;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
.placeholder { color: #999; }
|
||
|
|
.filter-btn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
.filter-btn text { margin-left: 4px; }
|
||
|
|
|
||
|
|
/* 商品列表 */
|
||
|
|
.goods-list {
|
||
|
|
height: calc(100vh - 200px);
|
||
|
|
padding: 16px;
|
||
|
|
}
|
||
|
|
.empty-tip {
|
||
|
|
text-align: center;
|
||
|
|
padding: 40px 0;
|
||
|
|
color: #999;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
.goods-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 12px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 复选框容器 */
|
||
|
|
.checkbox-wrap {
|
||
|
|
width: 80rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 自定义复选框样式 */
|
||
|
|
.custom-checkbox {
|
||
|
|
width: 28rpx;
|
||
|
|
height: 28rpx;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
border: 2rpx solid #ddd;
|
||
|
|
background-color: #fff;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-checkbox.checked {
|
||
|
|
background-color: #e63946;
|
||
|
|
border-color: #e63946;
|
||
|
|
}
|
||
|
|
|
||
|
|
.check-icon {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 18rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 商品信息 */
|
||
|
|
.goods-info {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.goods-img {
|
||
|
|
width: 80rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
.goods-details { flex: 1; }
|
||
|
|
.goods-name {
|
||
|
|
display: block;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.goods-barcode {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #999;
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
.goods-price {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #e63946;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 底部操作栏 */
|
||
|
|
.bottom-bar {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 12px 16px;
|
||
|
|
background-color: #fff;
|
||
|
|
border-top: 1px solid #eee;
|
||
|
|
z-index: 99;
|
||
|
|
}
|
||
|
|
.select-all {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.select-all text { margin-left: 6px; }
|
||
|
|
.delete-btn {
|
||
|
|
padding: 10px 24px;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 16px;
|
||
|
|
background-color: #e63946;
|
||
|
|
color: #fff;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
.delete-btn.disabled {
|
||
|
|
background-color: #ccc;
|
||
|
|
color: #999;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
</style>
|