<template>
|
<view>
|
<header-bar title="编辑名片" :isBack="true" @click="back"></header-bar>
|
<scroll-view scroll-y="true" class="scroll-view">
|
<!-- 名片预览区域 -->
|
<view class="preview-section">
|
<view class="preview-title">名片预览</view>
|
<view class="preview-card" :style="previewStyle">
|
<image v-if="business.background_image" class="preview-bg" :src="business.background_image" mode="aspectFill"></image>
|
<view class="preview-content">
|
<image v-if="file_path" class="preview-avatar" :src="file_path" mode="aspectFill"></image>
|
<view class="preview-info">
|
<view class="preview-name">{{business.real_name || '姓名'}}</view>
|
<view class="preview-company">{{business.company_name || '公司名称'}}</view>
|
<view class="preview-position">{{business.position || '职位'}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 模板选择 -->
|
<view class="template-section">
|
<view class="section-title">选择模板</view>
|
<scroll-view scroll-x="true" class="template-scroll">
|
<view class="template-item" v-for="(template, index) in templateList" :key="index"
|
:class="{active: template_id === template.template_id}" @click="selectTemplate(index)">
|
<image class="template-img" :src="template.preview_image" mode="aspectFill"></image>
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 表单内容 -->
|
<form @submit="submitForm" class="form-section">
|
<!-- 基本信息 -->
|
<view class="form-group">
|
<view class="group-title">基本信息</view>
|
|
<!-- 头像上传 -->
|
<view class="form-item" v-if="avatar_display">
|
<view class="item-label">头像</view>
|
<view class="upload-area" @click="uploadImage('avatar')">
|
<image v-if="file_path" class="upload-img" :src="file_path" mode="aspectFill"></image>
|
<view v-else class="upload-placeholder">
|
<text class="icon iconfont icon-camera"></text>
|
<text>上传头像</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 姓名 -->
|
<view class="form-item">
|
<view class="item-label">姓名</view>
|
<input type="text" class="item-input" v-model="business.real_name" placeholder="请输入姓名" name="real_name" />
|
</view>
|
|
<!-- 公司名称 -->
|
<view class="form-item">
|
<view class="item-label">公司名称</view>
|
<input type="text" class="item-input" v-model="business.company_name" placeholder="请输入公司名称" name="company_name" />
|
</view>
|
|
<!-- 职位 -->
|
<view class="form-item">
|
<view class="item-label">职位</view>
|
<input type="text" class="item-input" v-model="business.position" placeholder="请输入职位" name="position" />
|
</view>
|
|
<!-- 公司Logo -->
|
<view class="form-item" v-if="logo_display">
|
<view class="item-label">公司Logo</view>
|
<view class="upload-area" @click="uploadImage('logo')">
|
<image v-if="logo_path" class="upload-img" :src="logo_path" mode="aspectFill"></image>
|
<view v-else class="upload-placeholder">
|
<text class="icon iconfont icon-camera"></text>
|
<text>上传Logo</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 联系方式 -->
|
<view class="form-group">
|
<view class="group-title">联系方式</view>
|
|
<!-- 手机号 -->
|
<view class="form-item">
|
<view class="item-label">手机号</view>
|
<input type="number" class="item-input" v-model="business.phone" placeholder="请输入手机号" name="phone" />
|
</view>
|
|
<!-- 备用电话 -->
|
<view class="form-item">
|
<view class="item-label">备用电话</view>
|
<input type="number" class="item-input" v-model="business.mobile" placeholder="请输入备用电话" name="mobile" />
|
</view>
|
|
<!-- 邮箱 -->
|
<view class="form-item">
|
<view class="item-label">邮箱</view>
|
<input type="text" class="item-input" v-model="business.email" placeholder="请输入邮箱" name="email" />
|
</view>
|
|
<!-- 地址 -->
|
<view class="form-item">
|
<view class="item-label">地址</view>
|
<input type="text" class="item-input" v-model="business.address" placeholder="请输入地址" name="address" />
|
</view>
|
</view>
|
|
<!-- 详细信息 -->
|
<view class="form-group">
|
<view class="group-title">详细信息</view>
|
|
<!-- 个人简介 -->
|
<view class="form-item">
|
<view class="item-label">个人简介</view>
|
<textarea class="item-textarea" v-model="business.intro" placeholder="请输入个人简介" name="intro" />
|
</view>
|
|
<!-- 业务范围 -->
|
<view class="form-item">
|
<view class="item-label">业务范围</view>
|
<textarea class="item-textarea" v-model="business.business_scope" placeholder="请输入业务范围" name="business_scope" />
|
</view>
|
</view>
|
|
<!-- 保存按钮 -->
|
<view class="submit-section">
|
<button form-type="submit" class="submit-btn">保存</button>
|
</view>
|
</form>
|
</scroll-view>
|
|
<!-- 上传图片组件 -->
|
<Upload v-if="isUpload" @getImgs="handleUpload" @close="closeUpload"></Upload>
|
</view>
|
</template>
|
|
<script>
|
import Upload from '@/components/upload/uploadOne.vue';
|
export default {
|
components: {
|
Upload
|
},
|
data() {
|
return {
|
business: {
|
real_name: '',
|
company_name: '',
|
position: '',
|
phone: '',
|
mobile: '',
|
email: '',
|
address: '',
|
intro: '',
|
business_scope: '',
|
background_image: ''
|
},
|
templateList: [],
|
template_id: '',
|
file_id: '',
|
file_path: '',
|
logo_id: '',
|
logo_path: '',
|
business_card_id: '',
|
avatar_display: true,
|
logo_display: true,
|
isUpload: false,
|
uploadType: '',
|
previewStyle: {}
|
};
|
},
|
onLoad(options) {
|
if (options.business_card_id) {
|
this.business_card_id = options.business_card_id;
|
this.getBusinessDetail();
|
}
|
this.getTemplateList();
|
},
|
methods: {
|
back() {
|
uni.navigateBack();
|
},
|
// 获取模板列表
|
getTemplateList() {
|
let _this = this;
|
uni.getSystemInfo({ success: function(res) { _this.systemInfo = res; } });
|
_this._post('plus.business/template/getList', { screenWidth: _this.systemInfo.screenWidth }, function(res) {
|
_this.templateList = res.data;
|
if (_this.templateList.length > 0 && !_this.template_id) {
|
_this.template_id = _this.templateList[0].template_id;
|
_this.selectTemplate(0);
|
}
|
});
|
},
|
// 获取名片详情
|
getBusinessDetail() {
|
let _this = this;
|
_this._post('plus.business/business/detail', { business_card_id: _this.business_card_id }, function(res) {
|
if (res.data) {
|
_this.business = res.data;
|
_this.template_id = res.data.template_id;
|
_this.file_id = res.data.file_id;
|
_this.file_path = res.data.file_path || '';
|
_this.logo_id = res.data.logo_id;
|
_this.logo_path = res.data.logo_path || '';
|
// 找到对应模板并应用样式
|
_this.templateList.forEach((template, index) => {
|
if (template.template_id === _this.template_id) {
|
_this.selectTemplate(index);
|
}
|
});
|
}
|
});
|
},
|
// 选择模板
|
selectTemplate(index) {
|
const template = this.templateList[index];
|
this.template_id = template.template_id;
|
// 应用模板样式
|
this.avatar_display = template.style?.avatar?.display !== false;
|
this.logo_display = template.style?.logo?.display !== false;
|
this.previewStyle = {
|
backgroundColor: template.style?.background?.color || '#37bde6',
|
color: template.style?.text?.color || '#fff'
|
};
|
// 如果有背景图优先级高于背景色
|
if (template.background_image) {
|
this.business.background_image = template.background_image;
|
}
|
},
|
// 上传图片
|
uploadImage(type) {
|
this.uploadType = type;
|
this.isUpload = true;
|
},
|
// 处理上传结果
|
handleUpload(data) {
|
if (data && data.length > 0) {
|
const file = data[0];
|
if (this.uploadType === 'avatar') {
|
this.file_id = file.file_id;
|
this.file_path = file.file_path;
|
} else if (this.uploadType === 'logo') {
|
this.logo_id = file.file_id;
|
this.logo_path = file.file_path;
|
}
|
}
|
this.closeUpload();
|
},
|
// 关闭上传组件
|
closeUpload() {
|
this.isUpload = false;
|
this.uploadType = '';
|
},
|
// 表单提交
|
submitForm(e) {
|
const formData = e.detail.value;
|
|
// 表单验证
|
if (!formData.real_name) {
|
this.showError('请输入姓名');
|
return false;
|
}
|
if (!formData.phone) {
|
this.showError('请输入手机号');
|
return false;
|
}
|
|
// 组装提交数据
|
const submitData = {
|
...formData,
|
template_id: this.template_id,
|
file_id: this.file_id,
|
logo_id: this.logo_id
|
};
|
|
// 判断是新增还是编辑
|
let url = 'plus.business/business/add';
|
if (this.business_card_id) {
|
url = 'plus.business/business/edit';
|
submitData.business_card_id = this.business_card_id;
|
}
|
|
// 提交表单
|
let _this = this;
|
_this._post(url, submitData, function(res) {
|
_this.showSuccess(res.msg, function() {
|
uni.navigateBack();
|
});
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.scroll-view {
|
height: calc(100vh - 80rpx);
|
}
|
|
.preview-section {
|
background: #fff;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
|
.preview-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 20rpx;
|
}
|
|
.preview-card {
|
height: 400rpx;
|
border-radius: 20rpx;
|
overflow: hidden;
|
position: relative;
|
|
.preview-bg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 1;
|
}
|
|
.preview-content {
|
position: relative;
|
z-index: 2;
|
display: flex;
|
align-items: center;
|
padding: 40rpx;
|
color: #fff;
|
|
.preview-avatar {
|
width: 150rpx;
|
height: 150rpx;
|
border-radius: 50%;
|
border: 4rpx solid #fff;
|
}
|
|
.preview-info {
|
margin-left: 30rpx;
|
|
.preview-name {
|
font-size: 44rpx;
|
font-weight: bold;
|
margin-bottom: 10rpx;
|
}
|
|
.preview-company {
|
font-size: 32rpx;
|
margin-bottom: 8rpx;
|
opacity: 0.9;
|
}
|
|
.preview-position {
|
font-size: 28rpx;
|
opacity: 0.8;
|
}
|
}
|
}
|
}
|
}
|
|
.template-section {
|
background: #fff;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
|
.section-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 20rpx;
|
}
|
|
.template-scroll {
|
white-space: nowrap;
|
padding-bottom: 10rpx;
|
|
.template-item {
|
display: inline-block;
|
width: 200rpx;
|
height: 140rpx;
|
margin-right: 20rpx;
|
border-radius: 10rpx;
|
overflow: hidden;
|
border: 2rpx solid transparent;
|
|
&.active {
|
border-color: #37bde6;
|
}
|
|
.template-img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
|
.form-section {
|
background: #fff;
|
padding: 30rpx;
|
|
.form-group {
|
margin-bottom: 40rpx;
|
|
.group-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 20rpx;
|
}
|
|
.form-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
.item-label {
|
width: 160rpx;
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
.item-input {
|
flex: 1;
|
font-size: 28rpx;
|
color: #333;
|
padding: 0;
|
}
|
|
.item-textarea {
|
flex: 1;
|
font-size: 28rpx;
|
color: #333;
|
padding: 0;
|
height: 150rpx;
|
text-align: left;
|
}
|
|
.upload-area {
|
width: 150rpx;
|
height: 150rpx;
|
border-radius: 10rpx;
|
overflow: hidden;
|
background: #f5f5f5;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.upload-img {
|
width: 100%;
|
height: 100%;
|
}
|
|
.upload-placeholder {
|
text-align: center;
|
|
.icon {
|
font-size: 48rpx;
|
color: #999;
|
margin-bottom: 10rpx;
|
}
|
|
text {
|
font-size: 24rpx;
|
color: #999;
|
}
|
}
|
}
|
}
|
|
.submit-section {
|
margin-top: 60rpx;
|
margin-bottom: 40rpx;
|
|
.submit-btn {
|
width: 100%;
|
background: #37bde6;
|
color: #fff;
|
border: none;
|
border-radius: 10rpx;
|
padding: 28rpx 0;
|
font-size: 32rpx;
|
font-weight: bold;
|
}
|
}
|
}
|
</style>
|
