86 lines
5.2 KiB
Vue
86 lines
5.2 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view class="card">
|
|
<view class="row"><text class="label">名称</text><text v-if="!editing" class="value">{{ d.name }}</text><input v-else class="value-input" v-model="form.name" placeholder="必填" /></view>
|
|
<view class="row"><text class="label">联系人</text><text v-if="!editing" class="value">{{ d.contactName || '—' }}</text><input v-else class="value-input" v-model="form.contactName" placeholder="可选" /></view>
|
|
<view class="row"><text class="label">手机</text><text v-if="!editing" class="value">{{ d.mobile || '—' }}</text><input v-else class="value-input" v-model="form.mobile" placeholder="可选" /></view>
|
|
<view class="row"><text class="label">电话</text><text v-if="!editing" class="value">{{ d.phone || '—' }}</text><input v-else class="value-input" v-model="form.phone" placeholder="可选（座机）" /></view>
|
|
<view class="row"><text class="label">地址</text><text v-if="!editing" class="value">{{ d.address || '—' }}</text><input v-else class="value-input" v-model="form.address" placeholder="可选" /></view>
|
|
<view class="row"><text class="label">售价档位</text>
|
|
<text v-if="!editing" class="value">{{ d.priceLevel }}</text>
|
|
<picker v-else :range="priceLabels" :value="priceIdx" @change="onPriceChange"><view class="value">{{ priceLabels[priceIdx] }}</view></picker>
|
|
</view>
|
|
<view class="row"><text class="label">初始应收</text><text v-if="!editing" class="value">¥ {{ Number(d.arOpening||0).toFixed(2) }}</text><input v-else class="value-input" type="digit" v-model.number="form.arOpening" placeholder="0.00" /></view>
|
|
<view class="row"><text class="label">当前应收</text><text class="value emp">¥ {{ (Number(d.receivable||0)).toFixed(2) }}</text></view>
|
|
<view class="row"><text class="label">备注</text><text v-if="!editing" class="value">{{ d.remark || '—' }}</text><input v-else class="value-input" v-model="form.remark" placeholder="—" /></view>
|
|
</view>
|
|
<view class="bottom">
|
|
<button class="ghost" @click="toggleEdit">{{ editing ? '取消' : '编辑' }}</button>
|
|
<button class="primary" v-if="editing" @click="save">保存</button>
|
|
<button class="primary" v-else @click="choose">选择此客户</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { get, put } from '../../common/http.js'
|
|
export default {
|
|
data(){ return { id: null, d: {}, editing: false, form: { name:'', contactName:'', mobile:'', phone:'', address:'', priceLevel:'零售价', arOpening:0, remark:'' }, priceLevels:['零售价','批发价','大单报价'], priceLabels:['零售价','批发价','大单报价'], priceIdx:0 } },
|
|
onLoad(q){ if (q && q.id) { this.id = Number(q.id); this.fetch() } },
|
|
methods: {
|
|
async fetch(){
|
|
try {
|
|
this.d = await get(`/api/customers/${this.id}`)
|
|
// 初始化表单
|
|
this.form = {
|
|
name: this.d.name || '', contactName: this.d.contactName || '', mobile: this.d.mobile || '', phone: this.d.phone || '',
|
|
address: this.d.address || '', priceLevel: this.d.priceLevel || 'retail', arOpening: Number(this.d.arOpening||0), remark: this.d.remark || ''
|
|
}
|
|
const idx = this.priceLevels.indexOf(this.form.priceLevel); this.priceIdx = idx >= 0 ? idx : 0
|
|
} catch(e){ uni.showToast({ title:'加载失败', icon:'none' }) }
|
|
},
|
|
toggleEdit(){ this.editing = !this.editing },
|
|
onPriceChange(e){ this.priceIdx = Number(e.detail.value); this.form.priceLevel = this.priceLevels[this.priceIdx] },
|
|
choose(){
|
|
const pages = getCurrentPages()
|
|
let targetIdx = -1
|
|
for (let i = pages.length - 2; i >= 0; i--) {
|
|
const vm = pages[i] && pages[i].$vm ? pages[i].$vm : null
|
|
if (vm && vm.order) { vm.order.customerId = this.d.id; vm.customerName = this.d.name; targetIdx = i; break }
|
|
}
|
|
if (targetIdx >= 0) {
|
|
const delta = (pages.length - 1) - targetIdx
|
|
uni.navigateBack({ delta })
|
|
} else {
|
|
uni.navigateBack()
|
|
}
|
|
},
|
|
async save(){
|
|
if (!this.form.name) return uni.showToast({ title:'请填写客户名称', icon:'none' })
|
|
try {
|
|
await put(`/api/customers/${this.id}`, this.form)
|
|
uni.showToast({ title:'已保存', icon:'success' })
|
|
this.editing = false
|
|
await this.fetch()
|
|
} catch(e) { uni.showToast({ title: e?.message || '保存失败', icon:'none' }) }
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page { padding-bottom: 140rpx; }
|
|
.card { background:$uni-bg-color-grey; margin: 16rpx; padding: 12rpx 16rpx; border-radius: 16rpx; }
|
|
.row { display:flex; justify-content: space-between; padding: 18rpx 8rpx; border-bottom: 1rpx solid $uni-border-color; }
|
|
.row:last-child { border-bottom: 0; }
|
|
.label { color:$uni-text-color-grey; }
|
|
.value { color:$uni-text-color; max-width: 60%; text-align: right; }
|
|
.value-input { color:$uni-text-color; text-align: right; flex: 1; }
|
|
.emp { color:$uni-color-primary; font-weight: 700; }
|
|
.bottom { position: fixed; left:0; right:0; bottom:0; background:$uni-bg-color-grey; padding: 16rpx 24rpx calc(env(safe-area-inset-bottom) + 16rpx); box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.10); display:flex; gap: 12rpx; }
|
|
.primary { flex:1; background: $uni-color-primary; color:#fff; border-radius: 999rpx; padding: 20rpx 0; }
|
|
.ghost { flex:1; background:$uni-bg-color-grey; color:$uni-color-primary; border: 2rpx solid rgba($uni-color-primary, .35); border-radius: 999rpx; padding: 18rpx 0; }
|
|
</style>
|
|
|
|
|