181 lines
8.5 KiB
Vue
181 lines
8.5 KiB
Vue
<template>
|
||
<view class="page">
|
||
|
||
<!-- 业务类型侧边切换：销售/进货/收款/资金/盘点 -->
|
||
<view class="content">
|
||
<view class="biz-tabs">
|
||
<view v-for="b in bizList" :key="b.key" :class="['biz', biz===b.key && 'active']" @click="switchBiz(b.key)">{{ b.name }}</view>
|
||
</view>
|
||
|
||
<view class="panel">
|
||
<!-- 期间选择 + 搜索框 + 查询按钮 -->
|
||
<view class="toolbar">
|
||
<view class="period-group">
|
||
<text class="period-label">期间</text>
|
||
<picker mode="date" :value="startDate" @change="onStartChange">
|
||
<view class="date-chip">{{ startDate }}</view>
|
||
</picker>
|
||
<text class="sep">~</text>
|
||
<picker mode="date" :value="endDate" @change="onEndChange">
|
||
<view class="date-chip">{{ endDate }}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="search-row">
|
||
<view class="search">
|
||
<input class="search-input" v-model.trim="query.kw" :placeholder="placeholder" @confirm="reload" />
|
||
</view>
|
||
<button class="btn" size="mini" @click="reload">查询</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="total">合计：¥{{ totalAmount.toFixed(2) }}</view>
|
||
|
||
<!-- 列表 -->
|
||
<scroll-view scroll-y class="list" @scrolltolower="loadMore">
|
||
<block v-if="items.length">
|
||
<view class="item" v-for="it in items" :key="it.id" @click="openDetail(it)">
|
||
<view class="item-left">
|
||
<view class="date">{{ formatDate(it.orderTime || it.txTime || it.createdAt) }}</view>
|
||
<view class="name">{{ it.customerName || it.supplierName || it.accountName || it.remark || '-' }}</view>
|
||
<view class="no">{{ it.orderNo || it.code || it.id }}</view>
|
||
</view>
|
||
<view class="amount" :class="{ in: Number(it.amount||0) >= 0, out: Number(it.amount||0) < 0 }">¥ {{ (it.amount || 0).toFixed(2) }}</view>
|
||
<view class="arrow">›</view>
|
||
</view>
|
||
</block>
|
||
<view v-else class="empty">暂无数据</view>
|
||
</scroll-view>
|
||
|
||
<!-- 右下角新增按钮：根据业务类型跳转对应开单页或创建页 -->
|
||
<view class="fab" @click="onCreate">＋</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { get } from '../../common/http.js'
|
||
|
||
const API_OF = {
|
||
sale: '/api/orders',
|
||
purchase: '/api/purchase-orders',
|
||
collect: '/api/payments',
|
||
fund: '/api/other-transactions',
|
||
stock: '/api/inventories/logs'
|
||
}
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
biz: 'sale',
|
||
bizList: [
|
||
{ key: 'sale', name: '出货' },
|
||
{ key: 'purchase', name: '进货' },
|
||
{ key: 'collect', name: '收款' },
|
||
{ key: 'fund', name: '资金' },
|
||
{ key: 'stock', name: '盘点' }
|
||
],
|
||
range: 'month',
|
||
query: { kw: '' },
|
||
items: [],
|
||
page: 1,
|
||
size: 20,
|
||
finished: false,
|
||
loading: false,
|
||
startDate: '',
|
||
endDate: ''
|
||
}
|
||
},
|
||
computed: {
|
||
placeholder() { return '单据号/客户名称/品名规格/备注' },
|
||
periodLabel() { return this.startDate && this.endDate ? `${this.startDate}~${this.endDate}` : '' },
|
||
totalAmount() { return this.items.reduce((s, it) => s + Number(it.amount || 0), 0) }
|
||
},
|
||
onLoad() {
|
||
const hasToken = (() => { try { return !!uni.getStorageSync('TOKEN') } catch(e){ return false } })()
|
||
if (!hasToken) {
|
||
this.items = []
|
||
this.total = 0
|
||
uni.showToast({ title: '请登录使用该功能', icon: 'none' })
|
||
return
|
||
}
|
||
try { console.log('[detail] onLoad route = pages/detail/index') } catch(e){}
|
||
this.computeRange()
|
||
this.reload()
|
||
},
|
||
methods: {
|
||
switchBiz(k) { if (this.biz === k) return; this.biz = k; this.reload() },
|
||
switchRange(r) { this.range = r; this.computeRange(); this.reload() },
|
||
computeRange() {
|
||
const now = new Date()
|
||
const pad = n => String(n).padStart(2, '0')
|
||
const fmt = d => `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`
|
||
let start = now, end = now
|
||
if (this.range === 'today') { start = end = now }
|
||
else if (this.range === 'week') { const day = now.getDay() || 7; start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - day + 1); end = now }
|
||
else if (this.range === 'month') { start = new Date(now.getFullYear(), now.getMonth(), 1); end = new Date(now.getFullYear(), now.getMonth() + 1, 0) }
|
||
else if (this.range === 'year') { start = new Date(now.getFullYear(), 0, 1); end = new Date(now.getFullYear(), 11, 31) }
|
||
else { start = new Date(now.getFullYear(), now.getMonth(), 1); end = new Date(now.getFullYear(), now.getMonth() + 1, 0) }
|
||
this.startDate = fmt(start); this.endDate = fmt(end)
|
||
},
|
||
reload() { this.items = []; this.page = 1; this.finished = false; this.loadMore() },
|
||
onStartChange(e) { this.startDate = e?.detail?.value || this.startDate; if (this.endDate && this.startDate > this.endDate) this.endDate = this.startDate; this.reload() },
|
||
onEndChange(e) { this.endDate = e?.detail?.value || this.endDate; if (this.startDate && this.endDate < this.startDate) this.startDate = this.endDate; this.reload() },
|
||
async loadMore() {
|
||
if (this.loading || this.finished) return
|
||
this.loading = true
|
||
try {
|
||
const path = API_OF[this.biz] || '/api/orders'
|
||
const params = { kw: this.query.kw, page: this.page, size: this.size, startDate: this.startDate, endDate: this.endDate, biz: this.biz }
|
||
if (this.biz === 'sale') params.type = 'out'
|
||
const res = await get(path, params)
|
||
const list = Array.isArray(res?.list) ? res.list : (Array.isArray(res) ? res : [])
|
||
this.items = this.items.concat(list)
|
||
if (list.length < this.size) this.finished = true
|
||
this.page += 1
|
||
} catch (e) {
|
||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||
} finally { this.loading = false }
|
||
},
|
||
formatDate(s) { if (!s) return ''; try { const d = new Date(s); const pad = n => String(n).padStart(2, '0'); return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}` } catch (_) { return String(s).slice(0,10) } },
|
||
onCreate() { if (this.biz === 'sale') { uni.switchTab({ url: '/pages/order/create' }); return } uni.showToast({ title: '该类型创建页待实现', icon: 'none' }) },
|
||
openDetail(it) { uni.showToast({ title: '详情开发中', icon: 'none' }) }
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.page { display:flex; flex-direction: column; height: 100vh; }
|
||
/* 顶部分段（如需保留，可以隐藏或后续扩展） */
|
||
.seg { display:none; }
|
||
|
||
.content { display:flex; flex:1; min-height: 0; }
|
||
.biz-tabs { width: 140rpx; background:#fff; border-right:2rpx solid $uni-border-color; display:flex; flex-direction: column; }
|
||
.biz { flex:0 0 120rpx; display:flex; align-items:center; justify-content:center; color:$uni-color-primary; }
|
||
.biz.active { background:rgba(76,141,255,0.10); color:$uni-color-primary; font-weight:700; }
|
||
|
||
.panel { flex:1; display:flex; flex-direction: column; background:#fff; margin: 16rpx; border-radius: 16rpx; padding: 12rpx; border:2rpx solid $uni-border-color; }
|
||
.toolbar { display:flex; flex-direction: column; gap: 10rpx; padding: 10rpx 6rpx 6rpx; border-bottom:2rpx solid $uni-border-color; }
|
||
.period-group { display:flex; align-items:center; gap: 8rpx; background:#f6f8fb; border:2rpx solid #e6ebf2; border-radius: 10rpx; padding: 8rpx 10rpx; }
|
||
.period-label { color:#6b778c; }
|
||
.date-chip { padding: 8rpx 12rpx; background:#fff; border:2rpx solid #e6ebf2; border-radius: 8rpx; }
|
||
.sep { color:#99a2b3; padding: 0 6rpx; }
|
||
.search-row { display:flex; align-items:center; gap: 10rpx; }
|
||
.search { flex:1; }
|
||
.search-input { width:100%; background:#fff; border-radius: 12rpx; padding: 12rpx; color:$uni-text-color; border:2rpx solid #e6ebf2; }
|
||
.btn { background:$uni-color-primary; color:#fff; border: none; }
|
||
.total { color:$uni-color-primary; font-weight: 700; padding: 10rpx 6rpx 12rpx; background:#fff; }
|
||
.list { flex:1; }
|
||
.item { display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap: 8rpx; padding: 18rpx 12rpx; border-bottom: 1rpx solid $uni-border-color; }
|
||
.item-left { display:flex; flex-direction: column; }
|
||
.date { color:$uni-text-color-grey; font-size: 24rpx; }
|
||
.name { color:$uni-text-color; margin: 4rpx 0; font-weight: 600; }
|
||
.no { color:#99a2b3; font-size: 22rpx; }
|
||
.amount { color:$uni-text-color; font-weight: 700; text-align:right; }
|
||
.amount.in { color:#16a34a; }
|
||
.amount.out { color:#dc2626; }
|
||
.arrow { color:#8c99b0; font-size: 40rpx; margin-left: 8rpx; }
|
||
.empty { height: 50vh; display:flex; align-items:center; justify-content:center; color:$uni-text-color-grey; }
|
||
.fab { position: fixed; right: 30rpx; bottom: 120rpx; width: 100rpx; height: 100rpx; background:#fff; color:$uni-color-primary; border:2rpx solid $uni-color-primary; border-radius: 50rpx; text-align:center; line-height: 100rpx; font-size: 48rpx; box-shadow: 0 8rpx 20rpx rgba(76,141,255,0.18); }
|
||
</style>
|