1.0
This commit is contained in:
solosw
@@ -0,0 +1,672 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="warehouse-list">
|
||||
<view class="warehouse-item" v-for="(item, index) in warehouseList" :key="item.id">
|
||||
<view class="product-card">
|
||||
<image :src="getFullImageUrl(getFirstImage(item.product_images))"
|
||||
class="product-image"
|
||||
mode="aspectFill"
|
||||
@error="onImageError"></image>
|
||||
<view v-if="!getFirstImage(item.product_images)" class="default-product">
|
||||
<uni-icons type="image" size="60" color="#666"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{ item.product_name }}</text>
|
||||
<view class="product-stats">
|
||||
<text class="stats-text">库存 {{ item.quantity }}件</text>
|
||||
<text class="stats-text">{{ getProductTypeText(item.product_type) }}</text>
|
||||
<text class="stats-text" v-if="item.status === 0">已出售</text>
|
||||
</view>
|
||||
<view class="product-price">
|
||||
<text class="purchase-price">购买价：¥{{ (item.purchase_price * item.quantity).toFixed(2) }}</text>
|
||||
<text class="current-price">当前价值：¥{{ (item.warehouse_price * item.quantity).toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="product-actions">
|
||||
<button v-if="item.status === 1"
|
||||
class="action-btn sell-btn"
|
||||
@click="sellProduct(item)">
|
||||
立即挂售
|
||||
</button>
|
||||
<button v-else-if="item.status === 0"
|
||||
class="action-btn disabled-btn"
|
||||
disabled>
|
||||
不可出售
|
||||
</button>
|
||||
<button v-else
|
||||
class="action-btn sold-btn"
|
||||
disabled>
|
||||
已出售
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-if="warehouseList.length === 0 && !loading">
|
||||
<uni-icons type="home" size="100" color="#ccc"></uni-icons>
|
||||
<text class="empty-text">仓库暂无商品</text>
|
||||
</view>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<view class="bottom-tip" v-if="warehouseList.length > 0">
|
||||
<text class="tip-text">没有更多了</text>
|
||||
</view>
|
||||
|
||||
<!-- 挂售弹窗 -->
|
||||
<uni-popup ref="sellPopup" type="bottom" border-radius="10px 10px 0 0">
|
||||
<view class="sell-popup">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">商品挂售</text>
|
||||
<uni-icons type="close" @click="closeSellPopup" class="close-btn"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="popup-content" v-if="selectedItem">
|
||||
<view class="product-summary">
|
||||
<image :src="getFullImageUrl(getFirstImage(selectedItem.product_images))"
|
||||
class="summary-image"
|
||||
mode="aspectFill"></image>
|
||||
<view class="summary-info">
|
||||
<text class="summary-name">{{ selectedItem.product_name }}</text>
|
||||
<text class="summary-stock">库存：{{ selectedItem.quantity }}件</text>
|
||||
<text class="summary-price">仓库价值：¥{{ selectedItem.warehouse_price }}/件</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sell-form">
|
||||
<view class="form-item">
|
||||
<text class="form-label">挂售数量</text>
|
||||
<view class="quantity-selector">
|
||||
<button class="quantity-btn" @click="decreaseQuantity" :disabled="sellQuantity <= 1">-</button>
|
||||
<input type="number" v-model.number="sellQuantity" class="quantity-input" :max="selectedItem.quantity" min="1">
|
||||
<button class="quantity-btn" @click="increaseQuantity" :disabled="sellQuantity >= selectedItem.quantity">+</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">出售价格</text>
|
||||
<view class="price-input-wrap">
|
||||
<text class="price-symbol">¥</text>
|
||||
<input disabled type="digit" v-model="sellPrice" class="price-input" placeholder="请输入出售价格">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">商品描述</text>
|
||||
<textarea v-model="sellDescription" class="description-input" placeholder="请描述商品的具体情况..." maxlength="500"></textarea>
|
||||
</view>
|
||||
|
||||
<!-- <view class="form-item">
|
||||
<text class="form-label">商品成色</text>
|
||||
<view class="condition-selector">
|
||||
<view class="condition-item"
|
||||
v-for="condition in conditionOptions"
|
||||
:key="condition.value"
|
||||
:class="{ active: sellCondition === condition.value }"
|
||||
@click="sellCondition = condition.value">
|
||||
<text>{{ condition.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="sell-summary">
|
||||
<text class="summary-text">挂售 {{ sellQuantity }} 件，总价值 ¥{{ (sellPrice * sellQuantity).toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="popup-footer">
|
||||
<button class="cancel-btn" @click="closeSellPopup">取消</button>
|
||||
<button class="confirm-btn" @click="confirmSell" :disabled="!canSubmit">确认挂售</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
warehouseList: [],
|
||||
loading: false,
|
||||
// 挂售相关数据
|
||||
selectedItem: null,
|
||||
sellQuantity: 1,
|
||||
sellPrice: '',
|
||||
sellDescription: '',
|
||||
sellCondition: '九成新',
|
||||
conditionOptions: [
|
||||
{ label: '全新', value: '全新' },
|
||||
{ label: '九成新', value: '九成新' },
|
||||
{ label: '八成新', value: '八成新' },
|
||||
{ label: '七成新', value: '七成新' },
|
||||
{ label: '六成新', value: '六成新' },
|
||||
{ label: '其他', value: '其他' }
|
||||
],
|
||||
submitting: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canSubmit() {
|
||||
return this.sellQuantity > 0 &&
|
||||
this.sellQuantity <= (this.selectedItem?.quantity || 0) &&
|
||||
this.sellPrice > 0 &&
|
||||
this.sellDescription.trim() &&
|
||||
!this.submitting
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 检查登录状态
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.loadWarehouse()
|
||||
},
|
||||
onShow() {
|
||||
this.loadWarehouse()
|
||||
},
|
||||
methods: {
|
||||
// 获取完整的图片URL
|
||||
getFullImageUrl(url) {
|
||||
return request.getImageUrl(url)
|
||||
},
|
||||
|
||||
// 获取商品的第一张图片
|
||||
getFirstImage(images) {
|
||||
if (!images) return ''
|
||||
if (typeof images === 'string') {
|
||||
return images.split(',')[0].trim()
|
||||
}
|
||||
if (Array.isArray(images) && images.length > 0) {
|
||||
return images[0]
|
||||
}
|
||||
return ''
|
||||
},
|
||||
|
||||
// 获取商品类型文本
|
||||
getProductTypeText(type) {
|
||||
return type === 1 ? '一级商品' : '二级商品'
|
||||
},
|
||||
|
||||
// 图片加载错误处理
|
||||
onImageError() {
|
||||
console.log('图片加载失败')
|
||||
},
|
||||
|
||||
// 加载仓库数据
|
||||
async loadWarehouse() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await request.get('/back/user/warehouse', {
|
||||
page: 1,
|
||||
page_size: 50
|
||||
})
|
||||
|
||||
if (res.success) {
|
||||
this.warehouseList = res.data.list || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载仓库失败：', error)
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 挂售商品
|
||||
sellProduct(item) {
|
||||
if (item.quantity <= 0) {
|
||||
uni.showToast({
|
||||
title: '库存不足，无法挂售',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 设置选中商品并重置表单
|
||||
this.selectedItem = item
|
||||
this.sellQuantity = 1
|
||||
this.sellPrice = item.warehouse_price.toString()
|
||||
this.sellDescription = `${item.product_name} - 来自个人仓库`
|
||||
this.sellCondition = '九成新'
|
||||
this.submitting = false
|
||||
|
||||
// 打开挂售弹窗
|
||||
this.$refs.sellPopup.open()
|
||||
},
|
||||
|
||||
// 关闭挂售弹窗
|
||||
closeSellPopup() {
|
||||
this.$refs.sellPopup.close()
|
||||
this.selectedItem = null
|
||||
},
|
||||
|
||||
// 减少数量
|
||||
decreaseQuantity() {
|
||||
if (this.sellQuantity > 1) {
|
||||
this.sellQuantity--
|
||||
}
|
||||
},
|
||||
|
||||
// 增加数量
|
||||
increaseQuantity() {
|
||||
if (this.sellQuantity < this.selectedItem.quantity) {
|
||||
this.sellQuantity++
|
||||
}
|
||||
},
|
||||
|
||||
// 确认挂售
|
||||
async confirmSell() {
|
||||
if (!this.canSubmit) return
|
||||
|
||||
this.submitting = true
|
||||
try {
|
||||
const sellData = {
|
||||
quantity: this.sellQuantity,
|
||||
price: parseFloat(this.sellPrice),
|
||||
description: this.sellDescription.trim(),
|
||||
condition: this.sellCondition
|
||||
}
|
||||
|
||||
const res = await request.post(`/back/user/warehouse/${this.selectedItem.id}/sell`, sellData)
|
||||
|
||||
if (res.success) {
|
||||
uni.showToast({
|
||||
title: '挂售成功',
|
||||
icon: 'success'
|
||||
})
|
||||
this.closeSellPopup()
|
||||
this.loadWarehouse() // 重新加载仓库数据
|
||||
} else {
|
||||
throw new Error(res.message || '挂售失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('挂售失败：', error)
|
||||
uni.showToast({
|
||||
title: error.message || '挂售失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.submitting = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.warehouse-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.warehouse-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.default-product {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 15rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.product-stats {
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.stats-text {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.current-price {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #FF4444;
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sell-btn {
|
||||
background-color: #FF4444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.disabled-btn {
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.sold-btn {
|
||||
background-color: #f0f0f0;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.purchase-price {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 200rpx 0;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.empty-state uni-icons {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 底部提示 */
|
||||
.bottom-tip {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* 挂售弹窗样式 */
|
||||
.sell-popup {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding: 0;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
padding: 10rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
flex: 1;
|
||||
padding: 30rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.product-summary {
|
||||
display: flex;
|
||||
margin-bottom: 40rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.summary-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.summary-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.summary-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.summary-stock,
|
||||
.summary-price {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.sell-form {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 15rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.quantity-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quantity-btn {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quantity-btn:disabled {
|
||||
background-color: #f5f5f5;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
text-align: center;
|
||||
border: 1rpx solid #ddd;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
font-size: 28rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.price-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.price-symbol {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.price-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.description-input {
|
||||
width: 100%;
|
||||
min-height: 120rpx;
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.condition-selector {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.condition-item {
|
||||
padding: 15rpx 25rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.condition-item.active {
|
||||
border-color: #FF4444;
|
||||
background-color: #FF4444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sell-summary {
|
||||
padding: 20rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.summary-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
display: flex;
|
||||
padding: 30rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.cancel-btn,
|
||||
.confirm-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #FF4444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.confirm-btn:disabled {
|
||||
background-color: #ccc;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user