75 lines
3.5 KiB
Vue
75 lines
3.5 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view class="form">
|
|
<view class="field"><text class="label">账户名称</text><input class="input" v-model="form.name" placeholder="必填"/></view>
|
|
<view class="field" @click="showType=true">
|
|
<text class="label">账户类型</text>
|
|
<text class="value">{{ typeLabel(form.type) }}</text>
|
|
</view>
|
|
<view v-if="form.type==='bank'" class="field"><text class="label">银行名称</text><input class="input" v-model="form.bankName" placeholder="选填"/></view>
|
|
<view v-if="form.type==='bank'" class="field"><text class="label">银行账号</text><input class="input" v-model="form.bankAccount" placeholder="选填"/></view>
|
|
<view class="field"><text class="label">当前余额</text><input class="input" type="number" v-model="form.openingBalance" placeholder="0.00"/></view>
|
|
</view>
|
|
<view class="actions">
|
|
<button class="primary" @click="save">保存</button>
|
|
</view>
|
|
<uni-popup ref="popup" type="bottom" v-model="showType">
|
|
<view class="sheet">
|
|
<view class="sheet-item" v-for="t in types" :key="t.key" @click="form.type=t.key;showType=false">{{ t.name }}</view>
|
|
<view class="sheet-cancel" @click="showType=false">取消</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { post, put, get } from '../../common/http.js'
|
|
export default {
|
|
data(){
|
|
return {
|
|
id: null,
|
|
form: { name: '', type: 'cash', bankName: '', bankAccount: '', openingBalance: '' },
|
|
showType: false,
|
|
types: [
|
|
{ key: 'cash', name: '现金' },
|
|
{ key: 'bank', name: '银行存款' },
|
|
{ key: 'wechat', name: '微信' },
|
|
{ key: 'alipay', name: '支付宝' },
|
|
{ key: 'other', name: '其他' }
|
|
]
|
|
}
|
|
},
|
|
onLoad(q){ this.id = q && q.id ? Number(q.id) : null; if (this.id) this.load(); },
|
|
methods: {
|
|
typeLabel(t){ const m = {cash:'现金', bank:'银行存款', wechat:'微信', alipay:'支付宝', other:'其他'}; return m[t]||t },
|
|
async load(){ try { const list = await get('/api/accounts'); const a = (Array.isArray(list)?list:(list?.list||[])).find(x=>x.id==this.id); if (a) { this.form={ name:a.name, type:a.type, bankName:a.bank_name||a.bankName||'', bankAccount:a.bank_account||a.bankAccount||'', openingBalance:'' } } } catch(e){} },
|
|
async save(){
|
|
if (!this.form.name) { uni.showToast({ title: '请输入名称', icon: 'none' }); return }
|
|
try {
|
|
const body = { ...this.form, openingBalance: Number(this.form.openingBalance||0) }
|
|
if (this.id) await put(`/api/accounts/${this.id}`, body)
|
|
else await post('/api/accounts', { ...body, status: 1 })
|
|
uni.showToast({ title: '已保存', icon: 'success' })
|
|
setTimeout(()=>uni.navigateBack(), 300)
|
|
} catch(e) { uni.showToast({ title: '保存失败', icon: 'none' }) }
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page { display:flex; flex-direction: column; height: 100vh; }
|
|
.form { background:$uni-bg-color-grey; }
|
|
.field { display:flex; align-items:center; justify-content: space-between; padding: 18rpx 20rpx; border-bottom:1rpx solid $uni-border-color; }
|
|
.label { color:$uni-text-color-grey; }
|
|
.input { flex:1; text-align: right; color:$uni-text-color; }
|
|
.value { color:$uni-text-color; }
|
|
.actions { margin-top: 20rpx; padding: 0 20rpx; }
|
|
.primary { width: 100%; background: $uni-color-primary; color:#fff; border-radius: 8rpx; padding: 22rpx 0; }
|
|
.sheet { background:$uni-bg-color-grey; }
|
|
.sheet-item { padding: 26rpx; text-align:center; border-bottom:1rpx solid $uni-border-color; }
|
|
.sheet-cancel { padding: 26rpx; text-align:center; color:$uni-text-color-grey; }
|
|
</style>
|
|
|
|
|