256 lines
7.3 KiB
Vue
256 lines
7.3 KiB
Vue
<template>
|
||
<view class="contact-edit">
|
||
<view class="form-group">
|
||
<view class="group-title">{{ isEdit ? '编辑人脉' : '添加人脉' }}</view>
|
||
<view class="form-row">
|
||
<view class="row-label"><text class="req-star">*</text>姓名</view>
|
||
<input class="row-input" :value="form.name" placeholder="请输入姓名"
|
||
@input="e => form.name = e.detail.value" />
|
||
</view>
|
||
<view class="form-row">
|
||
<view class="row-label">手机</view>
|
||
<input class="row-input" type="number" :value="form.mobile" placeholder="手机号(选填)"
|
||
@input="e => form.mobile = e.detail.value" />
|
||
</view>
|
||
<view class="form-row">
|
||
<view class="row-label">公司</view>
|
||
<input class="row-input" :value="form.company" placeholder="公司名称(选填)"
|
||
@input="e => form.company = e.detail.value" />
|
||
</view>
|
||
<view class="form-row">
|
||
<view class="row-label">职位</view>
|
||
<input class="row-input" :value="form.job_title" placeholder="职位(选填)"
|
||
@input="e => form.job_title = e.detail.value" />
|
||
</view>
|
||
<view class="form-row">
|
||
<view class="row-label">微信号</view>
|
||
<input class="row-input" :value="form.wechat" placeholder="微信号(选填)"
|
||
@input="e => form.wechat = e.detail.value" />
|
||
</view>
|
||
<view class="form-row">
|
||
<view class="row-label">邮箱</view>
|
||
<input class="row-input" :value="form.email" placeholder="邮箱(选填)"
|
||
@input="e => form.email = e.detail.value" />
|
||
</view>
|
||
<view class="form-row">
|
||
<view class="row-label">网站</view>
|
||
<input class="row-input" :value="form.website" placeholder="个人主页 / 官网(选填)"
|
||
@input="e => form.website = e.detail.value" />
|
||
</view>
|
||
<view class="form-row">
|
||
<view class="row-label">地址</view>
|
||
<input class="row-input" :value="form.address" placeholder="地址(选填)"
|
||
@input="e => form.address = e.detail.value" />
|
||
</view>
|
||
<view class="form-row remark-row">
|
||
<view class="row-label">备注</view>
|
||
<textarea class="remark-input" :value="form.remark" placeholder="备注(选填)"
|
||
@input="e => form.remark = e.detail.value" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 保存 -->
|
||
<view class="save-bar">
|
||
<button class="save-btn" :disabled="saving" @tap="save">{{ saving ? '保存中…' : '保存' }}</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 与后端 Contact::EDITABLE_FIELDS 对齐(status 由列表归档操作管理, 编辑页不放)
|
||
const FIELDS = ['name', 'mobile', 'company', 'job_title', 'wechat', 'email', 'website', 'address', 'remark'];
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: 0,
|
||
isEdit: false,
|
||
form: {
|
||
name: '', mobile: '', company: '', job_title: '',
|
||
wechat: '', email: '', website: '', address: '', remark: ''
|
||
},
|
||
saving: false,
|
||
fromAdmin: false
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.id = parseInt(options.id || 0, 10) || 0;
|
||
this.isEdit = this.id > 0;
|
||
// from=admin: 商家端人脉管理页复用本编辑页, 保存后回商家端(缺省回员工端)
|
||
this.fromAdmin = options.from === 'admin';
|
||
if (this.isEdit) {
|
||
this.loadDetail();
|
||
}
|
||
},
|
||
onReady() {
|
||
// H5 uni-page-head 挂载早于路由 meta 就绪会回落默认标题 "title", onReady 再兜底一次
|
||
uni.setNavigationBarTitle({ title: '名片' });
|
||
// #ifdef H5
|
||
document.title = '名片';
|
||
// #endif
|
||
},
|
||
methods: {
|
||
loadDetail() {
|
||
this.$cardApi.contactInfo({
|
||
data: { id: this.id },
|
||
success: res => {
|
||
if (res.code == 0) {
|
||
const r = res.data || {};
|
||
FIELDS.forEach(k => {
|
||
if (r[k] !== undefined && r[k] !== null) {
|
||
this.form[k] = String(r[k]);
|
||
}
|
||
});
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.message || '人脉不存在',
|
||
showCancel: false,
|
||
success: () => this.backToList()
|
||
});
|
||
}
|
||
},
|
||
fail: () => {
|
||
uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
|
||
}
|
||
});
|
||
},
|
||
save() {
|
||
if (this.saving) return;
|
||
// 防御式取值: 任何非字符串/undefined 都不会让校验误判或抛错
|
||
const name = String(this.form.name || '').trim();
|
||
if (!name) {
|
||
uni.showToast({ title: '请填写姓名', icon: 'none' });
|
||
return;
|
||
}
|
||
this.form.name = name;
|
||
this.saving = true;
|
||
|
||
const data = { id: this.id, fields: {} };
|
||
FIELDS.forEach(k => { data.fields[k] = this.form[k]; });
|
||
|
||
const onOk = res => {
|
||
this.saving = false;
|
||
if (res.code == 0) {
|
||
uni.showToast({ title: '保存成功', icon: 'success' });
|
||
setTimeout(() => this.backToList(), 600);
|
||
} else {
|
||
// 后端错误文案有时放在 message, 有时放在 data(字符串), 两者都兜住
|
||
const msg = res.message || (typeof res.data === 'string' ? res.data : '') || '保存失败';
|
||
uni.showToast({ title: msg, icon: 'none' });
|
||
}
|
||
};
|
||
const onFail = () => {
|
||
this.saving = false;
|
||
uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
|
||
};
|
||
|
||
// add/update 都走 JSON body，跨端序列化零歧义。
|
||
// ⚠️ 契约差异(见 docs/CARD_API_REFERENCE.md §1.4.2 / §1.4.4):
|
||
// contact/add → 入参是「顶层平铺字段」, name 必须在 body 顶层;
|
||
// contact/update→ 额外兼容 fields 对象。
|
||
// 历史 bug: 新增时也包成 { fields: {...} }, 后端在顶层读不到 name,
|
||
// 返回「请填写姓名」→ 表现为"明明填了姓名还提示填写姓名"。
|
||
// 这里新增按契约平铺, 同时保留一份 fields 兼容旧后端(多余键会被白名单忽略)。
|
||
if (this.isEdit) {
|
||
this.$cardApi.contactUpdate({ data: data, success: onOk, fail: onFail });
|
||
} else {
|
||
const addPayload = Object.assign({}, data.fields, { fields: data.fields });
|
||
this.$cardApi.contactAdd({ data: addPayload, success: onOk, fail: onFail });
|
||
}
|
||
},
|
||
// 鸿蒙安全回列表: $util.redirectTo(禁裸 uni.switchTab/uni.navigateBack 兜底)
|
||
// 商家端(from=admin)回商家端人脉管理, 员工端回「我的人脉」
|
||
backToList() {
|
||
const target = this.fromAdmin ? '/pages_tool/card/admin/contacts' : '/pages_tool/card/contacts';
|
||
this.$util.redirectTo(target);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.contact-edit {
|
||
min-height: 100vh;
|
||
background-color: #f6f7f9;
|
||
padding: 24rpx 24rpx 60rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-group {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 24rpx;
|
||
overflow: hidden;
|
||
|
||
.group-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
padding: 24rpx 24rpx 8rpx;
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.row-label {
|
||
width: 160rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 必填红星(与 card/edit.vue 同款) */
|
||
.req-star {
|
||
color: #f5222d;
|
||
margin-right: 4rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.row-input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.remark-row {
|
||
align-items: flex-start;
|
||
|
||
.remark-input {
|
||
flex: 1;
|
||
min-height: 120rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.save-bar {
|
||
padding: 20rpx 0 0;
|
||
|
||
.save-btn {
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background-color: var(--main-color, #0054a5);
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
border-radius: 44rpx;
|
||
|
||
&[disabled] {
|
||
opacity: 0.6;
|
||
color: #ffffff;
|
||
background-color: var(--main-color, #0054a5);
|
||
}
|
||
}
|
||
}
|
||
</style>
|