From 121b714d710cf3c865f4a1b5efe81abec11056d1 Mon Sep 17 00:00:00 2001
From: quanwei <419654421@qq.com>
Date: Sat, 01 Nov 2025 14:36:36 +0800
Subject: [PATCH] 修复名片模板生成失败问题 修复后台名片查看不显示头像和logo问题
---
mobile/manifest.json | 4
admin/app/shop/controller/plus/business/Business.php | 6
shop_vue/src/views/plus/business/business/index.vue | 1484 ++++++++++++++++++++++++++--------------------------
admin/app/shop/controller/plus/business/Template.php | 4
shop_vue/src/views/plus/business/template/add.vue | 140 ++--
admin/app/common/service/business/Poster.php | 4
admin/app/common/model/plus/business/Business.php | 9
7 files changed, 821 insertions(+), 830 deletions(-)
diff --git a/admin/app/common/model/plus/business/Business.php b/admin/app/common/model/plus/business/Business.php
index ce2cc76..58a6405 100644
--- a/admin/app/common/model/plus/business/Business.php
+++ b/admin/app/common/model/plus/business/Business.php
@@ -65,7 +65,7 @@
public function logoImage()
{
$model = self::getCalledModule() ?: 'common';
- return $this->hasOne("app\\$model\\model\\file\\UploadFile", 'file_id', 'logo')->bind(['file_path']);
+ return $this->hasOne("app\\$model\\model\\file\\UploadFile", 'file_id', 'logo');
}
/**
@@ -76,6 +76,11 @@
{
$model = self::getCalledModule() ?: 'common';
return $this->hasOne("app\\$model\\model\\plus\\business\\Grade", 'grade_id', 'grade_id');
+ }
+ public function industry()
+ {
+ $model = self::getCalledModule() ?: 'common';
+ return $this->hasOne("app\\$model\\model\\plus\\business\\Industry", 'industry_id', 'industry_id');
}
/**
@@ -163,6 +168,6 @@
*/
public static function detail($business_card_id)
{
- return (new self())->with(['user', 'image', 'logoImage', 'grade'])->where(['business_card_id' => $business_card_id])->find();
+ return (new self())->with(['user', 'image', 'logoImage', 'grade', 'industry'])->where(['business_card_id' => $business_card_id])->find();
}
}
\ No newline at end of file
diff --git a/admin/app/common/service/business/Poster.php b/admin/app/common/service/business/Poster.php
index 2296aaa..8546466 100644
--- a/admin/app/common/service/business/Poster.php
+++ b/admin/app/common/service/business/Poster.php
@@ -324,11 +324,11 @@
while ($width < ($titleNum * $this->config['address'][0]['fontSize'] + $the_box + $fontX)) {
$titleNum--;
};
- if ($strlen > $titleNum && $titleNum) {
+ if ($strlen > $titleNum && $titleNum>0) {
$strArr = self::mbStrSplit($title, $titleNum);
}
$colorResource=self::colorResource($this->config['address'][0]['color'],$editor);
- if ($strlen > $titleNum && $titleNum) {
+ if ($strlen > $titleNum && $titleNum>0) {
$y = $fontY + 10;
foreach ($strArr as $k => $v) {
if ($k == 0) {
diff --git a/admin/app/shop/controller/plus/business/Business.php b/admin/app/shop/controller/plus/business/Business.php
index 31413d0..2fdc6a8 100644
--- a/admin/app/shop/controller/plus/business/Business.php
+++ b/admin/app/shop/controller/plus/business/Business.php
@@ -66,7 +66,7 @@
$this->processArrayFields($param);
// 查找要编辑的名片
- $model = (new BusinessModel())->get($param['business_card_id']);
+ $model = (new BusinessModel())->where('business_card_id',$param['business_card_id'])->find();
if (!$model) {
return $this->renderError('名片不存在');
}
@@ -81,7 +81,7 @@
if (file_exists($image)) {
unlink($image);
}
-
+ unset($param['sex']);
// 更新数据
if ($model->save($param)) {
return $this->renderSuccess('编辑成功');
@@ -165,6 +165,8 @@
public function detail($business_card_id) {
$data = BusinessModel::detail($business_card_id);
if ($data) {
+ $Qrcode = new Poster($data, 'business');
+ $data['mp'] = $Qrcode->getImage();
return $this->renderSuccess('', $data);
}
return $this->renderError('名片不存在');
diff --git a/admin/app/shop/controller/plus/business/Template.php b/admin/app/shop/controller/plus/business/Template.php
index 9f41648..6f9c3f2 100644
--- a/admin/app/shop/controller/plus/business/Template.php
+++ b/admin/app/shop/controller/plus/business/Template.php
@@ -49,7 +49,7 @@
$paramL['image'] = $Qrcode->getImageE($param['template'], $template_id);
$paramL['style'] = json_encode($param['template'], JSON_UNESCAPED_UNICODE);
if ($model->add($paramL)) {
- return $this->renderSuccess('编辑成功', url('business.template/index'));
+ return $this->renderSuccess('编辑成功');
}
return $this->renderError('编辑失败');
}
@@ -176,7 +176,7 @@
$paramI['image'] = $Qrcode->getImageE($param['template'], $template_id);
$modelBusiness = (new BusinessTemplate())->where(['template_id' => $template_id])->find();
$modelBusiness->where(['template_id' => $template_id])->update($paramI);
- return $this->renderSuccess('添加成功', url('business.template/index'));
+ return $this->renderSuccess('添加成功');
}
return $this->renderError('添加失败');
}
diff --git a/mobile/manifest.json b/mobile/manifest.json
index b8f8b0d..97fabb4 100644
--- a/mobile/manifest.json
+++ b/mobile/manifest.json
@@ -1,6 +1,6 @@
{
"name" : "连盟汇",
- "appid" : "__UNI__AAA479C",
+ "appid" : "__UNI__6A10109",
"description" : "连盟汇",
"versionName" : "1.0.0",
"versionCode" : 100,
@@ -134,7 +134,7 @@
"quickapp" : {},
/* 快应用特有相关 */
"mp-weixin" : {
- "appid" : "wxd6c0cd5d638175bc",
+ "appid" : "wxd03115abc6c4283d",
"setting" : {
"urlCheck" : false,
"es6" : true,
diff --git a/shop_vue/src/views/plus/business/business/index.vue b/shop_vue/src/views/plus/business/business/index.vue
index 8902c90..03e859c 100644
--- a/shop_vue/src/views/plus/business/business/index.vue
+++ b/shop_vue/src/views/plus/business/business/index.vue
@@ -26,13 +26,16 @@
<template slot-scope="scope">
<div class="business-card-info">
<div class="avatar">
- <img v-if="scope.row.image && scope.row.image.file_path" :src="scope.row.image.file_path" alt="头像" class="avatar-img">
+ <img v-if="scope.row.file_path" :src="scope.row.file_path" alt="头像" class="avatar-img">
<div v-else class="avatar-placeholder">默认头像</div>
</div>
<div class="info">
<div class="name">{{ scope.row.name }}</div>
- <div class="position">{{ Array.isArray(scope.row.duties) ? scope.row.duties.join(', ') : scope.row.duties }}</div>
- <div class="company">{{ Array.isArray(scope.row.unit) ? scope.row.unit.join(', ') : scope.row.unit }}</div>
+ <div class="position">
+ {{ Array.isArray(scope.row.duties) ? scope.row.duties.join(', ') : scope.row.duties }}
+ </div>
+ <div class="company">{{ Array.isArray(scope.row.unit) ? scope.row.unit.join(', ') : scope.row.unit }}
+ </div>
</div>
</div>
</template>
@@ -47,9 +50,12 @@
<el-table-column prop="create_time" label="创建时间" width="180" align="center"></el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
- <el-button type="text" v-auth="'/plus/business/business/view'" @click="viewBusiness(scope.row)">查看</el-button>
- <el-button type="text" v-auth="'/plus/business/business/edit'" @click="editBusiness(scope.row)">编辑</el-button>
- <el-button type="text" v-auth="'/plus/business/business/delete'" @click="deleteBusiness(scope.row)"></el-button>
+ <el-button type="text" v-auth="'/plus/business/business/view'"
+ @click="viewBusiness(scope.row)">查看</el-button>
+ <el-button type="text" v-auth="'/plus/business/business/edit'"
+ @click="editBusiness(scope.row)">编辑</el-button>
+ <el-button type="text" v-auth="'/plus/business/business/delete'"
+ @click="deleteBusiness(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
@@ -57,13 +63,8 @@
<!-- 分页 -->
<div class="pagination">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="curPage"
- :page-sizes="[10, 20, 50, 100]"
- :page-size="pageSize"
- layout="total, sizes, prev, pager, next, jumper"
+ <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="curPage"
+ :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="totalDataNumber">
</el-pagination>
</div>
@@ -81,7 +82,8 @@
<div class="img" style="margin-top: 10px;">
<img :src="selectedUser.avatarUrl" width="100" height="100" />
</div>
- <el-tag closable @close="clearSelectedUser" style="margin-top: 10px;">{{ selectedUser.nickName }}</el-tag>
+ <el-tag closable @close="clearSelectedUser"
+ style="margin-top: 10px;">{{ selectedUser.nickName }}</el-tag>
</div>
</el-form-item>
</el-col>
@@ -91,7 +93,7 @@
</el-form-item>
</el-col>
</el-row>
-
+
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="联系电话" prop="mobile">
@@ -107,7 +109,7 @@
</el-form-item>
</el-col>
</el-row>
-
+
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="微信">
@@ -120,7 +122,7 @@
</el-form-item>
</el-col>
</el-row>
-
+
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="座机">
@@ -130,107 +132,97 @@
<el-col :span="12">
<el-form-item label="名片等级">
<el-select v-model="formData.grade_id" placeholder="请选择名片等级">
- <el-option
- v-for="item in gradeList"
- :key="item.grade_id"
- :label="item.name"
- :value="item.grade_id">
+ <el-option v-for="item in gradeList" :key="item.grade_id" :label="item.name" :value="item.grade_id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="行业" prop="industry_id">
- <el-cascader
- v-model="formData.industry_id"
- placeholder="请选择行业"
- :options="industryList"
- :props="{ label: 'name', value: 'industry_id', children: 'child' }"
- style="width: 100%;"
- ></el-cascader>
- </el-form-item>
+ <el-cascader v-model="formData.industry_id" placeholder="请选择行业" :options="industryList"
+ :props="{ label: 'name', value: 'industry_id', children: 'child' }"
+ style="width: 100%;"></el-cascader>
+ </el-form-item>
</el-col>
</el-row>
-
+
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否默认">
- <el-switch
- v-model="formData.is_default"
- :active-value="1"
- :inactive-value="0">
+ <el-switch v-model="formData.is_default" :active-value="1" :inactive-value="0">
</el-switch>
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
-
+
<el-tab-pane label="详细信息" name="detail">
<el-form-item label="职务">
<el-input v-model="formData.duties" placeholder="请输入职务"></el-input>
</el-form-item>
-
+
<el-form-item label="单位">
<el-input v-model="formData.unit" placeholder="请输入单位"></el-input>
</el-form-item>
-
+
<el-form-item label="地区">
<el-select v-model="formData.province_id" placeholder="省" @change="initCity">
- <el-option :label="item.name" :value="item.id" v-for="(item,index) in areaList" :key='index'></el-option>
+ <el-option :label="item.name" :value="item.id" v-for="(item,index) in areaList"
+ :key='index'></el-option>
</el-select>
<el-select v-if="formData.province_id" v-model="formData.city_id" placeholder="市" @change="initRegion">
- <el-option :label="item1.name" :value="item1.id" v-for="(item1,index1) in areaList[formData.province_id]['city']" :key='index1'></el-option>
+ <el-option :label="item1.name" :value="item1.id"
+ v-for="(item1,index1) in areaList[formData.province_id]['city']" :key='index1'></el-option>
</el-select>
<el-select v-if="formData.city_id" v-model="formData.region_id" placeholder="区">
- <el-option :label="item2.name" :value="item2.id" v-for="(item2,index2) in areaList[formData.province_id]['city'][formData.city_id]['region']" :key='index2'></el-option>
+ <el-option :label="item2.name" :value="item2.id"
+ v-for="(item2,index2) in areaList[formData.province_id]['city'][formData.city_id]['region']"
+ :key='index2'></el-option>
</el-select>
</el-form-item>
-
+
<el-form-item label="地址">
<el-input v-model="formData.address" placeholder="请输入地址"></el-input>
</el-form-item>
-
+
<el-form-item label="简介">
- <el-input
- type="textarea"
- v-model="formData.Introduction"
- placeholder="请输入个人或公司简介"
- :rows="3">
+ <el-input type="textarea" v-model="formData.Introduction" placeholder="请输入个人或公司简介" :rows="3">
</el-input>
</el-form-item>
</el-tab-pane>
-
+
<el-tab-pane label="图片设置" name="images">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="头像">
<el-button icon="el-icon-picture" @click="selectAvatar">选择头像</el-button>
- <div v-if="avatarImage" class="image-preview">
- <img :src="avatarImage.file_path" class="preview-img">
- <i class="el-icon-delete delete-icon" @click="clearAvatar"></i>
+ <div>
+ <div v-if="avatarImage" class="image-preview">
+ <img :src="avatarImage.file_path" class="preview-img">
+ <i class="el-icon-delete delete-icon" @click="clearAvatar"></i>
+ </div>
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Logo">
<el-button icon="el-icon-picture" @click="selectLogo">选择Logo</el-button>
- <div v-if="logoImage" class="image-preview">
- <img :src="logoImage.file_path" class="preview-img">
- <i class="el-icon-delete delete-icon" @click="clearLogo"></i>
+ <div>
+ <div v-if="logoImage" class="image-preview">
+ <img :src="logoImage.file_path" class="preview-img">
+ <i class="el-icon-delete delete-icon" @click="clearLogo"></i>
+ </div>
</div>
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
-
+
<el-tab-pane label="模板设置" name="template">
<el-form-item label="选择模板">
<el-select v-model="formData.template_id" placeholder="请选择名片模板" @change="handleTemplateChange">
- <el-option
- v-for="item in templateList"
- :key="item.template_id"
- :label="item.name || '模板' + item.template_id"
- :value="item.template_id">
+ <el-option v-for="item in templateList" :key="item.template_id"
+ :label="item.name || '模板' + item.template_id" :value="item.template_id">
<div class="template-option">
<img :src="item.image" class="template-thumb" />
<span>{{ item.name || '模板' + item.template_id }}</span>
@@ -238,7 +230,7 @@
</el-option>
</el-select>
</el-form-item>
-
+
<el-form-item label="模板预览" v-if="selectedTemplate">
<div class="template-preview">
<img :src="selectedTemplate.image" class="template-image" />
@@ -247,7 +239,7 @@
</el-tab-pane>
</el-tabs>
</el-form>
-
+
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
@@ -271,7 +263,7 @@
</el-form-item>
</el-col>
</el-row>
-
+
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="名片类型">
@@ -284,7 +276,7 @@
</el-form-item>
</el-col>
</el-row>
-
+
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="微信">
@@ -297,7 +289,7 @@
</el-form-item>
</el-col>
</el-row>
-
+
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="座机">
@@ -310,7 +302,7 @@
</el-form-item>
</el-col>
</el-row>
-
+
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否默认">
@@ -320,53 +312,41 @@
</el-row>
</el-form>
</el-tab-pane>
-
+
<el-tab-pane label="详细信息" name="detail">
<el-form label-width="100px">
<el-form-item label="职务">
<span>{{ Array.isArray(detailData.duties) ? detailData.duties.join(', ') : detailData.duties }}</span>
</el-form-item>
-
+
<el-form-item label="单位">
<span>{{ Array.isArray(detailData.unit) ? detailData.unit.join(', ') : detailData.unit }}</span>
</el-form-item>
-
-
<el-row :gutter="20">
<el-col :span="8">
- <el-form-item label="行业ID">
- <span>{{ detailData.industry_id }}</span>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="省份ID">
- <span>{{ detailData.province_id }}</span>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="城市ID">
- <span>{{ detailData.city_id }}</span>
+ <el-form-item label="行业">
+ <span>{{ detailData.industry.name }}</span>
</el-form-item>
</el-col>
</el-row>
-
+
<el-row :gutter="20">
<el-col :span="8">
- <el-form-item label="区域ID">
- <span>{{ detailData.region_id }}</span>
+ <el-form-item label="省份">
+ <span>{{ detailData.region.province }}</span>
</el-form-item>
</el-col>
- <el-col :span="16">
- <el-form-item label="地区信息">
- <span>
- {{ detailData.region ?
- (detailData.region.province + (detailData.region.city ? ' ' + detailData.region.city : '') + (detailData.region.region ? ' ' + detailData.region.region : ''))
- : '' }}
- </span>
+ <el-col :span="8">
+ <el-form-item label="城市">
+ <span>{{ detailData.region.city}}</span>
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="区域">
+ <span>{{ detailData.region.region}}</span>
</el-form-item>
</el-col>
</el-row>
-
<el-form-item label="地址">
<span>{{ Array.isArray(detailData.address) ? detailData.address.join(', ') : detailData.address }}</span>
</el-form-item>
@@ -375,536 +355,539 @@
</el-form-item>
</el-form>
</el-tab-pane>
-
+
<el-tab-pane label="图片信息" name="images">
<el-form label-width="100px">
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="头像ID">
- <span>{{ detailData.file_id }}</span>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="Logo ID">
- <span>{{ detailData.logo }}</span>
- </el-form-item>
- </el-col>
- </el-row>
<el-form-item label="头像预览">
- <img v-if="detailData.image && detailData.image.file_path" :src="detailData.image.file_path" class="preview-image" />
+ <img v-if="detailData.file_path" :src="detailData.file_path" class="preview-image" />
<div v-else class="no-image">暂无头像</div>
</el-form-item>
-
+
<el-form-item label="Logo预览">
- <img v-if="detailData.logoImage && detailData.logoImage.file_path" :src="detailData.logoImage.file_path" class="preview-image" />
+ <img v-if="detailData.logoImage && detailData.logoImage.file_path" :src="detailData.logoImage.file_path"
+ class="preview-image" />
<div v-else class="no-image">暂无Logo</div>
</el-form-item>
</el-form>
</el-tab-pane>
-
- <el-tab-pane label="模板信息" name="template">
+
+ <el-tab-pane label="名片预览" name="template">
<el-form label-width="100px">
- <el-form-item label="模板ID">
- <span>{{ detailData.template_id }}</span>
- </el-form-item>
-
- <el-form-item label="模板预览" v-if="detailData.template">
+ <el-form-item label="名片预览" v-if="detailData.mp">
<div class="template-preview">
- <img :src="detailData.template.image" class="template-image" />
+ <img :src="detailData.mp" class="template-image" />
</div>
- </el-form-item>
-
- <el-form-item label="模板预览" v-else>
- <div class="no-template">暂无模板信息</div>
- </el-form-item>
- </el-form>
- </el-tab-pane>
-
- <el-tab-pane label="时间信息" name="time">
- <el-form label-width="100px">
- <el-form-item label="创建时间">
- <span>{{ detailData.create_time }}</span>
- </el-form-item>
- <el-form-item label="更新时间">
- <span>{{ detailData.update_time }}</span>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
-
+
<div slot="footer" class="dialog-footer">
<el-button @click="detailDialogVisible = false">关 闭</el-button>
</div>
</el-dialog>
-
+
<!-- 用户选择组件 -->
<GetUser :is_open="showUserSelector" @close="handleUserSelect"></GetUser>
-
+
<!-- 图片选择组件 -->
- <Upload
- v-if="showImageSelector"
- :config="uploadConfig"
- :isupload="showImageSelector"
+ <Upload v-if="showImageSelector" :config="uploadConfig" :isupload="showImageSelector"
@returnImgs="handleImageSelect">
</Upload>
</div>
</template>
<script>
-import BusinessApi from '@/api/business.js';
-import StoreApi from '@/api/store.js';
-import GetUser from '@/components/user/GetUser';
-import Upload from '@/components/file/Upload';
+ import BusinessApi from '@/api/business.js';
+ import StoreApi from '@/api/store.js';
+ import GetUser from '@/components/user/GetUser';
+ import Upload from '@/components/file/Upload';
-export default {
- components: {
- GetUser,
- Upload
- },
- data() {
- return {
- loading: false,
- listData: [],
- gradeList: [],
- templateList: [],
- selectedTemplate: null,
- searchForm: {
- search: ''
- },
- formData: {
- business_card_id: '',
- user_id: '',
- name: '',
- sex: 10,
- mobile: '',
- mobile_phone: '',
- wechat: '',
- mailbox: '',
- phone: '',
- duties: '',
- unit: '',
- address: '',
- industry_id: [],
- province_id: '',
- city_id: '',
- region_id: '',
- ilk: '',
- grade_id: '',
- is_default: 0,
- file_id: '',
- logo: '',
- logo_width: '',
- logo_height: '',
- template_id: '',
- Introduction: ''
- },
- detailData: {
- business_card_id: '',
- user_id: '',
- name: '',
- sex: 10,
- mobile: '',
- mobile_phone: '',
- wechat: '',
- mailbox: '',
- phone: '',
- duties: '',
- unit: '',
- address: '',
- industry_id: '',
- province_id: '',
- city_id: '',
- region_id: '',
- ilk: '',
- grade: null,
- is_default: 0,
- file_id: '',
- logo: '',
- logo_width: '',
- logo_height: '',
- template_id: '',
- Introduction: '',
- create_time: '',
- update_time: '',
- region: null
- },
- rules: {
- user_id: [
- { required: true, message: '请输入用户ID', trigger: 'blur' },
- { type: 'number', message: '用户ID必须为数字', trigger: 'blur' }
- ],
- name: [
- { required: true, message: '请输入姓名', trigger: 'blur' }
- ],
- mobile: [
- { required: false, pattern: /^1[3-9]\d{9}$|^$/, message: '请输入正确的手机号', trigger: 'blur' }
- ],
- province_id: [
- { type: 'number', message: '省份ID必须为数字', trigger: 'blur' }
- ],
- city_id: [
- { type: 'number', message: '城市ID必须为数字', trigger: 'blur' }
- ],
- region_id: [
- { type: 'number', message: '区域ID必须为数字', trigger: 'blur' }
- ],
- file_id: [
- { type: 'number', message: '头像ID必须为数字', trigger: 'blur' }
- ],
- logo: [
- { type: 'number', message: 'Logo ID必须为数字', trigger: 'blur' }
- ]
- },
- dialogVisible: false,
- detailDialogVisible: false,
- dialogTitle: '',
- isEdit: false,
- activeTab: 'basic',
- detailActiveTab: 'basic',
- showUserSelector: false,
- showImageSelector: false,
- imageSelectType: '', // 'avatar' or 'logo'
- uploadConfig: {
- total: 1,
- file_type: 'image'
- },
- // 分页相关
- curPage: 1,
- pageSize: 15,
- totalDataNumber: 0,
- industryList: [],
- areaList: [],
- selectedUser: null,
- avatarImage: null,
- logoImage: null,
- };
- },
- filters: {
- sexFilter(val) {
- const sexMap = { 10: '未知', 20: '男', 30: '女' };
- return sexMap[val] || '未知';
- }
- },
- mounted() {
- this.loadData();
- this.loadGradeList();
- this.loadTemplateList();
- this.loadIndustryList(); // 加载行业列表
- this.loadRegionList(); // 加载地区列表
- },
- methods: {
- // 加载数据
- loadData() {
- this.loading = true;
- const params = {
- page: this.curPage,
- listRow: this.pageSize,
- search: this.searchForm.search
+ export default {
+ components: {
+ GetUser,
+ Upload
+ },
+ data() {
+ return {
+ loading: false,
+ listData: [],
+ gradeList: [],
+ templateList: [],
+ selectedTemplate: null,
+ searchForm: {
+ search: ''
+ },
+ formData: {
+ business_card_id: '',
+ user_id: '',
+ name: '',
+ sex: 10,
+ mobile: '',
+ mobile_phone: '',
+ wechat: '',
+ mailbox: '',
+ phone: '',
+ duties: '',
+ unit: '',
+ address: '',
+ industry_id: [],
+ province_id: '',
+ city_id: '',
+ region_id: '',
+ ilk: '',
+ grade_id: '',
+ is_default: 0,
+ file_id: '',
+ logo: '',
+ logo_width: '',
+ logo_height: '',
+ template_id: '',
+ Introduction: ''
+ },
+ detailData: {
+ business_card_id: '',
+ user_id: '',
+ name: '',
+ sex: 10,
+ mobile: '',
+ mobile_phone: '',
+ wechat: '',
+ mailbox: '',
+ phone: '',
+ duties: '',
+ unit: '',
+ address: '',
+ industry_id: '',
+ province_id: '',
+ city_id: '',
+ region_id: '',
+ ilk: '',
+ grade: null,
+ is_default: 0,
+ file_id: '',
+ logo: '',
+ logo_width: '',
+ logo_height: '',
+ template_id: '',
+ Introduction: '',
+ create_time: '',
+ update_time: '',
+ industry:{name:[]},
+ region: {province: "", city: "", region: ""}
+
+ },
+ rules: {
+ user_id: [{
+ required: true,
+ message: '请输入用户ID',
+ trigger: 'blur'
+ },
+ {
+ type: 'number',
+ message: '用户ID必须为数字',
+ trigger: 'blur'
+ }
+ ],
+ name: [{
+ required: true,
+ message: '请输入姓名',
+ trigger: 'blur'
+ }],
+ mobile: [{
+ required: false,
+ pattern: /^1[3-9]\d{9}$|^$/,
+ message: '请输入正确的手机号',
+ trigger: 'blur'
+ }],
+ province_id: [{
+ type: 'number',
+ message: '省份ID必须为数字',
+ trigger: 'blur'
+ }],
+ city_id: [{
+ type: 'number',
+ message: '城市ID必须为数字',
+ trigger: 'blur'
+ }],
+ region_id: [{
+ type: 'number',
+ message: '区域ID必须为数字',
+ trigger: 'blur'
+ }],
+ file_id: [{
+ type: 'number',
+ message: '头像ID必须为数字',
+ trigger: 'blur'
+ }],
+ logo: [{
+ type: 'number',
+ message: 'Logo ID必须为数字',
+ trigger: 'blur'
+ }]
+ },
+ dialogVisible: false,
+ detailDialogVisible: false,
+ dialogTitle: '',
+ isEdit: false,
+ activeTab: 'basic',
+ detailActiveTab: 'basic',
+ showUserSelector: false,
+ showImageSelector: false,
+ imageSelectType: '', // 'avatar' or 'logo'
+ uploadConfig: {
+ total: 1,
+ file_type: 'image'
+ },
+ // 分页相关
+ curPage: 1,
+ pageSize: 15,
+ totalDataNumber: 0,
+ industryList: [],
+ areaList: [],
+ selectedUser: null,
+ avatarImage: null,
+ logoImage: null,
};
-
- BusinessApi.businessList(params).then(res => {
- this.loading = false;
- if (res.data.list) {
- // 适配后端实际返回的数据结构
- this.listData = res.data.list.data || [];
- this.totalDataNumber = res.data.list.total || 0;
- } else {
- this.listData = [];
- this.totalDataNumber = 0;
- }
- }).catch(() => {
- this.loading = false;
- this.$message.error('获取数据失败');
- });
},
-
- // 加载名片等级列表
- loadGradeList() {
- BusinessApi.gradeList().then(res => {
- this.gradeList = res.data.list || [];
- }).catch(() => {
- this.$message.error('获取名片等级失败');
- });
- },
-
- // 加载模板列表
- loadTemplateList() {
- BusinessApi.businessTemplateList().then(res => {
- this.templateList = res.data.list.data || [];
- }).catch(() => {
- this.$message.error('获取名片模板失败');
- });
- },
-
- // 加载行业列表
- loadIndustryList() {
- BusinessApi.industryList().then(res => {
- // 使用树形结构的数据作为行业列表
- this.industryList = res.data.list && res.data.list.tree ? res.data.list.tree : [];
- }).catch(() => {
- this.$message.error('获取行业列表失败');
- });
- },
-
- // 加载地区列表
- loadRegionList() {
- // 参考门店添加页面，调用获取地区数据的API
- BusinessApi.businessList({}, true).then(res => {
- if (res.data && res.data.regionData) {
- this.areaList = res.data.regionData;
- }
- }).catch(() => {
- this.areaList = [];
- });
- },
-
- /*初始化城市id*/
- initCity() {
- this.formData.city_id = '';
- this.formData.region_id = '';
- },
-
- /*初始化区id*/
- initRegion() {
- this.formData.region_id = '';
- },
-
- // 选择用户
- selectUser() {
- this.showUserSelector = true;
- },
-
- // 用户选择回调
- handleUserSelect(selectedUsers) {
- this.showUserSelector = false;
- if (selectedUsers && selectedUsers.params && selectedUsers.params.length > 0) {
- const user = selectedUsers.params[0];
- this.formData.user_id = user.user_id;
- this.selectedUser = user;
- // 自动填充姓名和手机号
- if (user.real_name) {
- this.formData.name = user.real_name;
- }
- if (user.mobile) {
- this.formData.mobile = user.mobile;
- }
+ filters: {
+ sexFilter(val) {
+ const sexMap = {
+ 10: '未知',
+ 20: '男',
+ 30: '女'
+ };
+ return sexMap[val] || '未知';
}
},
-
- // 清除选择的用户
- clearSelectedUser() {
- this.formData.user_id = '';
- this.selectedUser = null;
- },
-
- // 选择头像
- selectAvatar() {
- this.imageSelectType = 'avatar';
- this.uploadConfig = {
- total: 1,
- file_type: 'image'
- };
- this.showImageSelector = true;
- },
-
- // 选择Logo
- selectLogo() {
- this.imageSelectType = 'logo';
- this.uploadConfig = {
- total: 1,
- file_type: 'image'
- };
- this.showImageSelector = true;
- },
-
- // 图片选择回调
- handleImageSelect(images) {
- this.showImageSelector = false;
- if (images && images.length > 0) {
- const fileId = images[0].file_id;
- const fileData = images[0];
- if (this.imageSelectType === 'avatar') {
- this.formData.file_id = fileId;
- this.avatarImage = fileData;
- } else if (this.imageSelectType === 'logo') {
- this.formData.logo = fileId;
- this.logoImage = fileData;
- }
- }
- },
-
- // 清除头像
- clearAvatar() {
- this.formData.file_id = '';
- this.avatarImage = null;
- },
-
- // 清除Logo
- clearLogo() {
- this.formData.logo = '';
- this.logoImage = null;
- },
-
- // 搜索
- search() {
- this.curPage = 1;
+ mounted() {
this.loadData();
+ this.loadGradeList();
+ this.loadTemplateList();
+ this.loadIndustryList(); // 加载行业列表
+ this.loadRegionList(); // 加载地区列表
},
+ methods: {
+ // 加载数据
+ loadData() {
+ this.loading = true;
+ const params = {
+ page: this.curPage,
+ listRow: this.pageSize,
+ search: this.searchForm.search
+ };
- // 重置搜索
- reset() {
- this.searchForm.search = '';
- this.curPage = 1;
- this.loadData();
- },
-
- // 添加名片
- addBusiness() {
- this.dialogTitle = '添加名片';
- this.isEdit = false;
- this.formData = {
- business_card_id: '',
- user_id: '',
- name: '',
- sex: 10,
- mobile: '',
- mobile_phone: '',
- wechat: '',
- mailbox: '',
- phone: '',
- duties: '',
- unit: '',
- address: '',
- industry_id: '',
- province_id: '',
- city_id: '',
- region_id: '',
- ilk: '',
- grade_id: '',
- is_default: 0,
- file_id: '',
- logo: '',
- logo_width: '',
- logo_height: '',
- template_id: '',
- Introduction: ''
- };
- // 清空选择的数据
- this.selectedUser = null;
- this.avatarImage = null;
- this.logoImage = null;
-
- this.activeTab = 'basic';
- this.dialogVisible = true;
- },
-
- // 编辑名片
- editBusiness(row) {
- this.dialogTitle = '编辑名片';
- this.isEdit = true;
- this.formData = {
- business_card_id: row.business_card_id,
- user_id: row.user_id,
- name: row.name,
- sex: row.sex && typeof row.sex === 'object' ?
- (row.sex === '未知' ? 10 : row.sex === '男' ? 20 : 30) :
- (row.sex || 10),
- mobile: row.mobile,
- mobile_phone: row.mobile_phone,
- wechat: row.wechat || '',
- mailbox: row.mailbox || '',
- phone: row.phone || '',
- duties: Array.isArray(row.duties) ? row.duties.join(', ') : (row.duties || ''),
- unit: Array.isArray(row.unit) ? row.unit.join(', ') : (row.unit || ''),
- address: Array.isArray(row.address) ? row.address.join(', ') : (row.address || ''),
- industry_id: row.industry_id || '',
- province_id: row.province_id || '',
- city_id: row.city_id || '',
- region_id: row.region_id || '',
- ilk: row.ilk || '',
- grade_id: row.grade_id,
- is_default: row.is_default,
- file_id: row.file_id || '',
- logo: row.logo || '',
- logo_width: row.logo_width || '',
- logo_height: row.logo_height || '',
- template_id: row.template_id || '',
- Introduction: row.Introduction || ''
- };
-
- // 设置选中的用户
- if (row.user) {
- this.selectedUser = row.user;
- }
-
- // 设置选中的图片
- if (row.image) {
- this.avatarImage = row.image;
- }
-
- if (row.logoImage) {
- this.logoImage = row.logoImage;
- }
-
- // 地区信息已经通过formData绑定，无需额外设置
-
- // 设置选中的模板
- if (row.template_id) {
- this.selectedTemplate = this.templateList.find(template => template.template_id == row.template_id) || null;
- } else {
- this.selectedTemplate = null;
- }
-
- this.activeTab = 'basic';
- this.dialogVisible = true;
- },
-
- // 查看详情
- viewBusiness(row) {
- BusinessApi.businessDetail({ business_card_id: row.business_card_id }).then(res => {
- if (res.code === 1) {
- this.detailData = res.data;
- this.detailActiveTab = 'basic';
- this.detailDialogVisible = true;
- } else {
- this.$message.error(res.msg || '获取详情失败');
- }
- }).catch(() => {
- this.$message.error('获取详情失败');
- });
- },
-
- // 删除名片
- deleteBusiness(row) {
- this.$confirm('确定要删除该名片吗？', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- BusinessApi.businessDelete({ business_card_id: row.business_card_id }).then(res => {
- if (res.code === 1) {
- this.$message.success('删除成功');
- this.loadData();
+ BusinessApi.businessList(params).then(res => {
+ this.loading = false;
+ if (res.data.list) {
+ // 适配后端实际返回的数据结构
+ this.listData = res.data.list.data || [];
+ this.totalDataNumber = res.data.list.total || 0;
} else {
- this.$message.error(res.msg || '删除失败');
+ this.listData = [];
+ this.totalDataNumber = 0;
}
}).catch(() => {
- this.$message.error('删除失败');
+ this.loading = false;
+ this.$message.error('获取数据失败');
});
- }).catch(() => {});
- },
+ },
- // 关闭对话框
- handleClose() {
- this.$refs.formData.resetFields();
- },
+ // 加载名片等级列表
+ loadGradeList() {
+ BusinessApi.gradeList().then(res => {
+ this.gradeList = res.data.list || [];
+ }).catch(() => {
+ this.$message.error('获取名片等级失败');
+ });
+ },
- // 提交表单
- submitForm() {
- this.$refs.formData.validate((valid) => {
+ // 加载模板列表
+ loadTemplateList() {
+ BusinessApi.businessTemplateList().then(res => {
+ this.templateList = res.data.list.data || [];
+ }).catch(() => {
+ this.$message.error('获取名片模板失败');
+ });
+ },
+
+ // 加载行业列表
+ loadIndustryList() {
+ BusinessApi.industryList().then(res => {
+ // 使用树形结构的数据作为行业列表
+ this.industryList = res.data.list && res.data.list.tree ? res.data.list.tree : [];
+ }).catch(() => {
+ this.$message.error('获取行业列表失败');
+ });
+ },
+
+ // 加载地区列表
+ loadRegionList() {
+ // 参考门店添加页面，调用获取地区数据的API
+ BusinessApi.businessList({}, true).then(res => {
+ if (res.data && res.data.regionData) {
+ this.areaList = res.data.regionData;
+ }
+ }).catch(() => {
+ this.areaList = [];
+ });
+ },
+
+ /*初始化城市id*/
+ initCity() {
+ this.formData.city_id = '';
+ this.formData.region_id = '';
+ },
+
+ /*初始化区id*/
+ initRegion() {
+ this.formData.region_id = '';
+ },
+
+ // 选择用户
+ selectUser() {
+ this.showUserSelector = true;
+ },
+
+ // 用户选择回调
+ handleUserSelect(selectedUsers) {
+ this.showUserSelector = false;
+ if (selectedUsers && selectedUsers.params && selectedUsers.params.length > 0) {
+ const user = selectedUsers.params[0];
+ this.formData.user_id = user.user_id;
+ this.selectedUser = user;
+ // 自动填充姓名和手机号
+ if (user.real_name) {
+ this.formData.name = user.real_name;
+ }
+ if (user.mobile) {
+ this.formData.mobile = user.mobile;
+ }
+ }
+ },
+
+ // 清除选择的用户
+ clearSelectedUser() {
+ this.formData.user_id = '';
+ this.selectedUser = null;
+ },
+
+ // 选择头像
+ selectAvatar() {
+ this.imageSelectType = 'avatar';
+ this.uploadConfig = {
+ total: 1,
+ file_type: 'image'
+ };
+ this.showImageSelector = true;
+ },
+
+ // 选择Logo
+ selectLogo() {
+ this.imageSelectType = 'logo';
+ this.uploadConfig = {
+ total: 1,
+ file_type: 'image'
+ };
+ this.showImageSelector = true;
+ },
+
+ // 图片选择回调
+ handleImageSelect(images) {
+ this.showImageSelector = false;
+ if (images && images.length > 0) {
+ const fileId = images[0].file_id;
+ const fileData = images[0];
+ if (this.imageSelectType === 'avatar') {
+ this.formData.file_id = fileId;
+ this.avatarImage = fileData;
+ } else if (this.imageSelectType === 'logo') {
+ this.formData.logo = fileId;
+ this.logoImage = fileData;
+ }
+ }
+ },
+
+ // 清除头像
+ clearAvatar() {
+ this.formData.file_id = '';
+ this.avatarImage = null;
+ },
+
+ // 清除Logo
+ clearLogo() {
+ this.formData.logo = '';
+ this.logoImage = null;
+ },
+
+ // 搜索
+ search() {
+ this.curPage = 1;
+ this.loadData();
+ },
+
+ // 重置搜索
+ reset() {
+ this.searchForm.search = '';
+ this.curPage = 1;
+ this.loadData();
+ },
+
+ // 添加名片
+ addBusiness() {
+ this.dialogTitle = '添加名片';
+ this.isEdit = false;
+ this.formData = {
+ business_card_id: '',
+ user_id: '',
+ name: '',
+ sex: 10,
+ mobile: '',
+ mobile_phone: '',
+ wechat: '',
+ mailbox: '',
+ phone: '',
+ duties: '',
+ unit: '',
+ address: '',
+ industry_id: '',
+ province_id: '',
+ city_id: '',
+ region_id: '',
+ ilk: '',
+ grade_id: '',
+ is_default: 0,
+ file_id: '',
+ logo: '',
+ logo_width: '',
+ logo_height: '',
+ template_id: '',
+ Introduction: ''
+ };
+ // 清空选择的数据
+ this.selectedUser = null;
+ this.avatarImage = null;
+ this.logoImage = null;
+
+ this.activeTab = 'basic';
+ this.dialogVisible = true;
+ },
+
+ // 编辑名片
+ editBusiness(row) {
+ this.dialogTitle = '编辑名片';
+ this.isEdit = true;
+ this.formData = {
+ business_card_id: row.business_card_id,
+ user_id: row.user_id,
+ name: row.name,
+ sex: row.sex && typeof row.sex === 'object' ?
+ (row.sex === '未知' ? 10 : row.sex === '男' ? 20 : 30) : (row.sex || 10),
+ mobile: row.mobile,
+ mobile_phone: row.mobile_phone,
+ wechat: row.wechat || '',
+ mailbox: row.mailbox || '',
+ phone: row.phone || '',
+ duties: Array.isArray(row.duties) ? row.duties.join(', ') : (row.duties || ''),
+ unit: Array.isArray(row.unit) ? row.unit.join(', ') : (row.unit || ''),
+ address: Array.isArray(row.address) ? row.address.join(', ') : (row.address || ''),
+ industry_id: row.industry_id || '',
+ province_id: row.province_id || '',
+ city_id: row.city_id || '',
+ region_id: row.region_id || '',
+ ilk: row.ilk || '',
+ grade_id: row.grade_id,
+ is_default: row.is_default,
+ file_id: row.file_id || '',
+ logo: row.logo || '',
+ logo_width: row.logo_width || '',
+ logo_height: row.logo_height || '',
+ template_id: row.template_id || '',
+ Introduction: row.Introduction || ''
+ };
+
+ // 设置选中的用户
+ if (row.user) {
+ this.selectedUser = row.user;
+ }
+ console.log(row);
+ // 设置选中的图片
+ if (row.file_id) {
+ this.avatarImage = {
+ file_id: row.file_id,
+ file_path: row.file_path
+ };
+ }
+
+ if (row.logoImage) {
+ this.logoImage = row.logoImage;
+ }
+
+ // 地区信息已经通过formData绑定，无需额外设置
+
+ // 设置选中的模板
+ if (row.template_id) {
+ this.selectedTemplate = this.templateList.find(template => template.template_id == row.template_id) || null;
+ } else {
+ this.selectedTemplate = null;
+ }
+
+ this.activeTab = 'basic';
+ this.dialogVisible = true;
+ },
+
+ // 查看详情
+ viewBusiness(row) {
+ BusinessApi.businessDetail({
+ business_card_id: row.business_card_id
+ }).then(res => {
+ if (res.code === 1) {
+ this.detailData = res.data;
+ this.detailActiveTab = 'basic';
+ this.detailDialogVisible = true;
+ } else {
+ this.$message.error(res.msg || '获取详情失败');
+ }
+ }).catch(() => {
+ this.$message.error('获取详情失败');
+ });
+ },
+
+ // 删除名片
+ deleteBusiness(row) {
+ this.$confirm('确定要删除该名片吗？', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
+ }).then(() => {
+ BusinessApi.businessDelete({
+ business_card_id: row.business_card_id
+ }).then(res => {
+ if (res.code === 1) {
+ this.$message.success('删除成功');
+ this.loadData();
+ } else {
+ this.$message.error(res.msg || '删除失败');
+ }
+ }).catch(() => {
+ this.$message.error('删除失败');
+ });
+ }).catch(() => {});
+ },
+
+ // 关闭对话框
+ handleClose() {
+ this.$refs.formData.resetFields();
+ },
+
+ // 提交表单
+ submitForm() {
+ this.$refs.formData.validate((valid) => {
if (valid) {
// 处理数组字段
- const paramsData = { ...this.formData };
+ const paramsData = {
+ ...this.formData
+ };
// 处理行业级联值，取最后一级的值并确保为数字类型
if (Array.isArray(paramsData.industry_id) && paramsData.industry_id.length > 0) {
paramsData.industry_id = Number(paramsData.industry_id[paramsData.industry_id.length - 1]);
@@ -913,202 +896,203 @@
paramsData.industry_id = Number(paramsData.industry_id);
}
- // 处理职务字段
- if (paramsData.duties && typeof paramsData.duties === 'string') {
- paramsData.duties = paramsData.duties.split(',').map(item => item.trim()).filter(item => item);
+ // 处理职务字段
+ if (paramsData.duties && typeof paramsData.duties === 'string') {
+ paramsData.duties = paramsData.duties.split(',').map(item => item.trim()).filter(item => item);
+ }
+
+ // 处理单位字段
+ if (paramsData.unit && typeof paramsData.unit === 'string') {
+ paramsData.unit = paramsData.unit.split(',').map(item => item.trim()).filter(item => item);
+ }
+
+ // 处理地址字段
+ if (paramsData.address && typeof paramsData.address === 'string') {
+ paramsData.address = paramsData.address.split(',').map(item => item.trim()).filter(item => item);
+ }
+
+ const params = {
+ business: paramsData
+ };
+
+ if (this.isEdit) {
+ // 编辑
+ BusinessApi.businessEdit(params).then(res => {
+ if (res.code === 1) {
+ this.$message.success('编辑成功');
+ this.dialogVisible = false;
+ this.loadData();
+ } else {
+ this.$message.error(res.msg || '编辑失败');
+ }
+ }).catch(() => {
+ this.$message.error('编辑失败');
+ });
+ } else {
+ // 添加
+ BusinessApi.businessAdd(params).then(res => {
+ if (res.code === 1) {
+ this.$message.success('添加成功');
+ this.dialogVisible = false;
+ this.loadData();
+ } else {
+ this.$message.error(res.msg || '添加失败');
+ }
+ }).catch(() => {
+ this.$message.error('添加失败');
+ });
+ }
}
+ });
+ },
- // 处理单位字段
- if (paramsData.unit && typeof paramsData.unit === 'string') {
- paramsData.unit = paramsData.unit.split(',').map(item => item.trim()).filter(item => item);
- }
+ // 模板选择变更
+ handleTemplateChange(templateId) {
+ this.selectedTemplate = this.templateList.find(template => template.template_id == templateId) || null;
+ },
- // 处理地址字段
- if (paramsData.address && typeof paramsData.address === 'string') {
- paramsData.address = paramsData.address.split(',').map(item => item.trim()).filter(item => item);
- }
+ // 分页相关方法
+ handleSizeChange(val) {
+ this.pageSize = val;
+ this.curPage = 1;
+ this.loadData();
+ },
- const params = {
- business: paramsData
- };
-
- if (this.isEdit) {
- // 编辑
- BusinessApi.businessEdit(params).then(res => {
- if (res.code === 1) {
- this.$message.success('编辑成功');
- this.dialogVisible = false;
- this.loadData();
- } else {
- this.$message.error(res.msg || '编辑失败');
- }
- }).catch(() => {
- this.$message.error('编辑失败');
- });
- } else {
- // 添加
- BusinessApi.businessAdd(params).then(res => {
- if (res.code === 1) {
- this.$message.success('添加成功');
- this.dialogVisible = false;
- this.loadData();
- } else {
- this.$message.error(res.msg || '添加失败');
- }
- }).catch(() => {
- this.$message.error('添加失败');
- });
- }
- }
- });
- },
-
- // 模板选择变更
- handleTemplateChange(templateId) {
- this.selectedTemplate = this.templateList.find(template => template.template_id == templateId) || null;
- },
-
- // 分页相关方法
- handleSizeChange(val) {
- this.pageSize = val;
- this.curPage = 1;
- this.loadData();
- },
-
- handleCurrentChange(val) {
- this.curPage = val;
- this.loadData();
+ handleCurrentChange(val) {
+ this.curPage = val;
+ this.loadData();
+ }
}
- }
-};
+ };
</script>
<style scoped>
-.common-seach-wrap {
- padding: 20px;
- background-color: #fff;
- min-height: calc(100vh - 60px);
-}
+ .common-seach-wrap {
+ padding: 20px;
+ background-color: #fff;
+ min-height: calc(100vh - 60px);
+ }
-.search-left {
- margin-bottom: 20px;
-}
+ .search-left {
+ margin-bottom: 20px;
+ }
-.business-card-info {
- display: flex;
- align-items: center;
- text-align: left;
-}
+ .business-card-info {
+ display: flex;
+ align-items: center;
+ text-align: left;
+ }
-.avatar {
- margin-right: 15px;
-}
+ .avatar {
+ margin-right: 15px;
+ }
-.avatar-img {
- width: 50px;
- height: 50px;
- border-radius: 50%;
- object-fit: cover;
-}
+ .avatar-img {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
-.avatar-placeholder {
- width: 50px;
- height: 50px;
- border-radius: 50%;
- background-color: #f0f0f0;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #999;
- font-size: 12px;
-}
+ .avatar-placeholder {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background-color: #f0f0f0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #999;
+ font-size: 12px;
+ }
-.info .name {
- font-weight: bold;
- font-size: 16px;
- margin-bottom: 5px;
-}
+ .info .name {
+ font-weight: bold;
+ font-size: 16px;
+ margin-bottom: 5px;
+ }
-.info .position,
-.info .company {
- font-size: 14px;
- color: #666;
- margin-bottom: 3px;
-}
+ .info .position,
+ .info .company {
+ font-size: 14px;
+ color: #666;
+ margin-bottom: 3px;
+ }
-.pagination {
- margin-top: 20px;
- text-align: right;
-}
+ .pagination {
+ margin-top: 20px;
+ text-align: right;
+ }
-.dialog-footer {
- text-align: right;
-}
+ .dialog-footer {
+ text-align: right;
+ }
-.template-option {
- display: flex;
- align-items: center;
-}
+ .template-option {
+ display: flex;
+ align-items: center;
+ }
-.template-thumb {
- width: 40px;
- height: 40px;
- margin-right: 10px;
- object-fit: cover;
-}
+ .template-thumb {
+ width: 40px;
+ height: 40px;
+ margin-right: 10px;
+ object-fit: cover;
+ }
-.template-preview {
- text-align: center;
- margin-top: 10px;
-}
+ .template-preview {
+ text-align: center;
+ margin-top: 10px;
+ }
-.template-image {
- max-width: 100%;
- max-height: 400px;
- border: 1px solid #eee;
- border-radius: 4px;
-}
+ .template-image {
+ max-width: 100%;
+ max-height: 400px;
+ border: 1px solid #eee;
+ border-radius: 4px;
+ }
-.preview-image {
- max-width: 200px;
- max-height: 200px;
- border: 1px solid #eee;
- border-radius: 4px;
-}
+ .preview-image {
+ max-width: 200px;
+ max-height: 200px;
+ border: 1px solid #eee;
+ border-radius: 4px;
+ }
-.no-image,
-.no-template {
- color: #999;
- font-style: italic;
-}
+ .no-image,
+ .no-template {
+ color: #999;
+ font-style: italic;
+ }
-.selected-user {
- margin-top: 10px;
-}
-.img {
- margin-top: 10px;
-}
+ .selected-user {
+ margin-top: 10px;
+ }
-.image-preview {
- position: relative;
- display: inline-block;
- margin-top: 10px;
-}
+ .img {
+ margin-top: 10px;
+ }
-.preview-img {
- width: 100px;
- height: 100px;
- border-radius: 4px;
-}
+ .image-preview {
+ position: relative;
+ display: inline-block;
+ margin-top: 10px;
+ }
-.delete-icon {
- position: absolute;
- top: -8px;
- right: -8px;
- background: #fff;
- border-radius: 50%;
- cursor: pointer;
- color: #F56C6C;
- font-size: 16px;
-}
-</style>
\ No newline at end of file
+ .preview-img {
+ width: 100px;
+ height: 100px;
+ border-radius: 4px;
+ }
+
+ .delete-icon {
+ position: absolute;
+ top: -8px;
+ right: -8px;
+ background: #fff;
+ border-radius: 50%;
+ cursor: pointer;
+ color: #F56C6C;
+ font-size: 16px;
+ }
+</style>
diff --git a/shop_vue/src/views/plus/business/template/add.vue b/shop_vue/src/views/plus/business/template/add.vue
index da24152..876a449 100644
--- a/shop_vue/src/views/plus/business/template/add.vue
+++ b/shop_vue/src/views/plus/business/template/add.vue
@@ -7,7 +7,7 @@
<div class="user" v-loading="loading">
<div class="common-form">名片模板添加</div>
<div class="poster-box d-s-s">
- <div class="left-box">
+ <div class="left-box" style="width: auto;height: auto;">
<div v-if="form.backdrop" class="img"><img v-img-url="form.backdrop.src" /></div>
<div class="userinfo">
<!-- 头像 -->
@@ -18,7 +18,7 @@
:style="'width:' + form.avatar.width + 'px;height:' + form.avatar.width + 'px;top:' + form.avatar.top + 'px;left:' + form.avatar.left + 'px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;color:#999'">
<span>头像</span>
</div>
-
+
<!-- Logo -->
<div v-if="form.logo.display == 1"
class="logo pa"
@@ -27,21 +27,21 @@
:style="'width:' + form.logo.width + 'px;height:' + form.logo.height + 'px;top:' + form.logo.top + 'px;left:' + form.logo.left + 'px;'">
<img v-img-url="form.logo.src" alt="" />
</div>
-
+
<!-- 姓名 -->
<div class="name pa"
v-drag="{type:'name',obj:this}"
:style="'font-size:' + form.name.fontSize + 'px;color:' + form.name.color + ';top:' + form.name.top + 'px;left:' + form.name.left + 'px;'">
这里是姓名
</div>
-
+
<!-- 手机 -->
<div class="mobile pa"
v-drag="{type:'mobile',obj:this}"
:style="'font-size:' + form.mobile.fontSize + 'px;color:' + form.mobile.color + ';top:' + form.mobile.top + 'px;left:' + form.mobile.left + 'px;'">
手机：134xxxxxxxx
</div>
-
+
<!-- 公司 -->
<div v-for="(item, index) in form.unit" :key="'unit' + index"
:class="'unit' + index + ' pa'"
@@ -49,7 +49,7 @@
:style="'font-size:' + form.unit[index].fontSize + 'px;color:' + form.unit[index].color + ';top:' + form.unit[index].top + 'px;left:' + form.unit[index].left + 'px;'">
这是公司
</div>
-
+
<!-- 职位 -->
<div v-for="(item, index) in form.duties" :key="'duties' + index"
:class="'duties' + index + ' pa'"
@@ -57,7 +57,7 @@
:style="'font-size:' + form.duties[index].fontSize + 'px;color:' + form.duties[index].color + ';top:' + form.duties[index].top + 'px;left:' + form.duties[index].left + 'px;'">
这是职位
</div>
-
+
<!-- 地址 -->
<div v-for="(item, index) in form.address" :key="'address' + index"
:class="'address' + index + ' pa'"
@@ -65,28 +65,28 @@
:style="'font-size:' + form.address[index].fontSize + 'px;color:' + form.address[index].color + ';top:' + form.address[index].top + 'px;left:' + form.address[index].left + 'px;'">
地址：广西壮族自治区南宁市江南区壮锦大道八桂绿城·龙湖御景-A栋-2单元xxxx号
</div>
-
+
<!-- 微信 -->
<div class="wechat pa"
v-drag="{type:'wechat',obj:this}"
:style="'font-size:' + form.wechat.fontSize + 'px;color:' + form.wechat.color + ';top:' + form.wechat.top + 'px;left:' + form.wechat.left + 'px;'">
微信：134xxxxxxxx
</div>
-
+
<!-- 邮箱 -->
<div class="mailbox pa"
v-drag="{type:'mailbox',obj:this}"
:style="'font-size:' + form.mailbox.fontSize + 'px;color:' + form.mailbox.color + ';top:' + form.mailbox.top + 'px;left:' + form.mailbox.left + 'px;'">
邮箱：134xxxxxxxx@.xxx.com
</div>
-
+
<!-- 电话 -->
<div class="phone pa"
v-drag="{type:'phone',obj:this}"
:style="'font-size:' + form.phone.fontSize + 'px;color:' + form.phone.color + ';top:' + form.phone.top + 'px;left:' + form.phone.left + 'px;'">
电话：xxx-xxx-xxx
</div>
-
+
<!-- 自定义图标 -->
<div v-for="(item, index) in form.iconL" :key="'iconL' + index"
:class="'iconL' + index + ' pa icon'"
@@ -96,7 +96,7 @@
</div>
</div>
</div>
-
+
<div class="right-box flex-1">
<el-form size="small" ref="form" :model="form" label-width="150px">
<!-- 背景图 -->
@@ -104,7 +104,7 @@
<el-button type="primary" @click="openUpload(1)">上传图片</el-button>
<div class="tips">尺寸建议：宽750像素 高大于(等于)1200像素</div>
</el-form-item>
-
+
<!-- 头像设置 -->
<el-form-item label="是否显示头像">
<el-radio v-model="form.avatar.display" label="1">显示</el-radio>
@@ -124,7 +124,7 @@
<el-input v-model.number="form.avatar.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
</div>
</el-form-item>
-
+
<!-- Logo设置 -->
<el-form-item label="是否显示Logo">
<el-radio v-model="form.logo.display" label="1">显示</el-radio>
@@ -151,7 +151,7 @@
<el-input v-model.number="form.logo.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
</div>
</el-form-item>
-
+
<!-- 姓名设置 -->
<el-form-item label="姓名字体大小" prop="name.fontSize" :rules="[{ required: true, message: '请输入字体大小' }]">
<el-input v-model.number="form.name.fontSize" min="12" type="number" class="max-w460"></el-input>
@@ -166,7 +166,7 @@
<el-input v-model.number="form.name.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
</div>
</el-form-item>
-
+
<!-- 手机设置 -->
<el-form-item label="手机字体大小" prop="mobile.fontSize" :rules="[{ required: true, message: '请输入字体大小' }]">
<el-input v-model.number="form.mobile.fontSize" min="12" type="number" class="max-w460"></el-input>
@@ -181,8 +181,8 @@
<el-input v-model.number="form.mobile.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
</div>
</el-form-item>
-
- <!-- 图标数量设置
+
+ <!-- 图标数量设置
<el-form-item label="图标数量">
<div class="d-s-r">
<el-button type="text" @click="editIcon" :disabled="form.iconL.length <= 0">
@@ -194,7 +194,7 @@
</el-button>
</div>
</el-form-item>-->
-
+
<!-- 图标设置 -->
<div v-for="(item, index) in form.iconL" :key="'icon_setting' + index" class="icon-setting">
<el-form-item :label="'图标' + (index + 1)">
@@ -215,8 +215,8 @@
</div>
</el-form-item>
</div>
-
- <!-- 公司数量设置
+
+ <!-- 公司数量设置
<el-form-item label="公司数量">
<div class="d-s-r">
<el-button type="text" @click="editUnit" :disabled="form.unit.length <= 0">
@@ -228,7 +228,7 @@
</el-button>
</div>
</el-form-item>-->
-
+
<!-- 公司设置 -->
<div v-for="(item, index) in form.unit" :key="'unit_setting' + index" class="unit-setting">
<el-form-item :label="'公司字体大小'">
@@ -245,8 +245,8 @@
</div>
</el-form-item>
</div>
-
- <!-- 职位数量设置
+
+ <!-- 职位数量设置
<el-form-item label="职位数量">
<div class="d-s-r">
<el-button type="text" @click="editDuties" :disabled="form.duties.length <= 0">
@@ -258,13 +258,13 @@
</el-button>
</div>
</el-form-item>-->
-
+
<!-- 职位设置 -->
<div v-for="(item, index) in form.duties" :key="'duties_setting' + index" class="duties-setting">
<el-form-item :label="'职位字体大小'">
<el-input v-model.number="form.duties[index].fontSize" min="12" type="number" class="max-w460"></el-input>
</el-form-item>
- <el-form-item :label="'职位字体颜色'">
+ <el-form-item :label="'职位字体颜色'">
<el-color-picker v-model="form.duties[index].color"></el-color-picker>
</el-form-item>
<el-form-item :label="'职位位置'">
@@ -275,8 +275,8 @@
</div>
</el-form-item>
</div>
-
- <!-- 地址数量设置
+
+ <!-- 地址数量设置
<el-form-item label="地址数量">
<div class="d-s-r">
<el-button type="text" @click="editAddress" :disabled="form.address.length <= 0">
@@ -288,7 +288,7 @@
</el-button>
</div>
</el-form-item>-->
-
+
<!-- 地址设置 -->
<div v-for="(item, index) in form.address" :key="'address_setting' + index" class="address-setting">
<el-form-item :label="'地址字体大小'">
@@ -305,7 +305,7 @@
</div>
</el-form-item>
</div>
-
+
<!-- 微信设置 -->
<el-form-item label="微信字体大小">
<el-input v-model.number="form.wechat.fontSize" min="12" type="number" class="max-w460"></el-input>
@@ -320,7 +320,7 @@
<el-input v-model.number="form.wechat.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
</div>
</el-form-item>
-
+
<!-- 邮箱设置 -->
<el-form-item label="邮箱字体大小">
<el-input v-model.number="form.mailbox.fontSize" min="12" type="number" class="max-w460"></el-input>
@@ -335,7 +335,7 @@
<el-input v-model.number="form.mailbox.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
</div>
</el-form-item>
-
+
<!-- 电话设置 -->
<el-form-item label="电话字体大小">
<el-input v-model.number="form.phone.fontSize" min="12" type="number" class="max-w460"></el-input>
@@ -350,7 +350,7 @@
<el-input v-model.number="form.phone.top" min="0" type="number" class="max-w200" placeholder="上下位置"></el-input>
</div>
</el-form-item>
-
+
<!-- 提交按钮 -->
<div class="common-button-wrapper">
<el-button @click="back">返回</el-button>
@@ -359,7 +359,7 @@
</el-form>
</div>
</div>
-
+
<!-- 上传图片组件 -->
<Upload v-if="isupload" :isupload="isupload" :type="uploadType" :index="uploadIndex" @returnImgs="returnImgsFunc">上传图片</Upload>
</div>
@@ -483,7 +483,7 @@
},
created() {
this.loadData();
-
+
// 在组件创建后初始化拖拽事件
this.$nextTick(() => {
// 通过遍历this.form对象动态调用dragEventArray方法
@@ -499,7 +499,7 @@
const type = binding.value.type;
el.classList.add('drag');
el.classList.add(type);
-
+
// 避免指令和dragEventArray方法重复绑定拖拽事件
// 实际的拖拽逻辑由dragEventArray方法处理
el.style.position = 'absolute';
@@ -511,50 +511,50 @@
dragEventArray(type) {
// 使用类选择器获取对应的元素，更准确高效
const elements = document.querySelectorAll(`.${type}`);
-
+
elements.forEach((el, index) => {
// 检查是否已经绑定过拖拽事件，避免重复绑定
if (el.getAttribute('drag-handler') === 'true') return;
el.setAttribute('drag-handler', 'true');
-
+
// 为每个元素添加拖拽事件
el.onmousedown = (event) => {
event.preventDefault();
-
+
// 计算鼠标按下位置与元素左上角的偏移
let sentX = event.clientX - el.offsetLeft;
let sentY = event.clientY - el.offsetTop;
-
+
// 获取父容器的边界
let parent = el.parentElement;
let l = 0;
let t = 0;
let r = parent.offsetWidth - el.offsetWidth;
let b = parent.offsetHeight - el.offsetHeight;
-
+
document.onmousemove = (event) => {
event.preventDefault();
-
+
// 计算新位置
let slideLeft = event.clientX - sentX;
let slideTop = event.clientY - sentY;
-
+
// 限制在父容器内
slideLeft <= l && (slideLeft = l);
slideLeft >= r && (slideLeft = r);
slideTop <= t && (slideTop = t);
slideTop >= b && (slideTop = b);
-
+
// 更新位置
if (Array.isArray(this.form[type]) && this.form[type][index]) {
// 使用Vue.set确保响应式更新，这样右侧表单的位置输入框也能同步更新
this.$set(this.form[type][index], 'left', slideLeft);
this.$set(this.form[type][index], 'top', slideTop);
-
+
// 直接更新DOM样式，确保视觉效果即时生效
el.style.left = slideLeft + 'px';
el.style.top = slideTop + 'px';
-
+
// 强制Vue更新，确保表单输入框同步更新
this.$forceUpdate();
} else { // 使用Vue.set确保响应式更新，这样右侧表单的位置输入框也能同步更新
@@ -567,17 +567,17 @@
this.$forceUpdate();
}
};
-
+
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
-
+
return false;
};
});
},
-
+
// 加载数据
loadData() {
let self = this;
@@ -599,19 +599,19 @@
console.error('加载数据失败', error);
});
},
-
+
// 拖动处理
dragDiv(x, y, type, index) {
// 确保坐标值有效
x = Math.max(0, x || 0);
y = Math.max(0, y || 0);
-
+
// 确保form对象存在
if (!this.form) {
console.warn('Form object not initialized');
return;
}
-
+
switch (type) {
case 'avatar':
if (this.form.avatar) {
@@ -711,14 +711,14 @@
console.warn('Unknown drag type:', type);
}
},
-
+
// 打开上传
openUpload(type, index) {
this.uploadType = type;
this.uploadIndex = index;
this.isupload = true;
},
-
+
// 返回图片
returnImgsFunc(e) {
if (e && e.length > 0) {
@@ -740,7 +740,7 @@
}
this.isupload = false;
},
-
+
// 添加图标
addIcon() {
this.form.iconL.push({
@@ -754,14 +754,14 @@
this.dragEventArray('iconL');
});
},
-
+
// 减少图标
editIcon() {
if (this.form.iconL.length > 0) {
this.form.iconL.pop();
}
},
-
+
// 添加公司
addUnit() {
const index = this.form.unit.length;
@@ -773,20 +773,20 @@
fontWeight: 100,
type: 'text'
});
-
+
// 添加后重新初始化拖拽事件
this.$nextTick(() => {
this.dragEventArray('unit');
});
},
-
+
// 减少公司
editUnit() {
if (this.form.unit.length > 0) {
this.form.unit.pop();
}
},
-
+
// 添加职位
addDuties() {
const index = this.form.duties.length;
@@ -798,20 +798,20 @@
fontWeight: 400,
type: 'text'
});
-
+
// 添加后重新初始化拖拽事件
this.$nextTick(() => {
this.dragEventArray('duties');
});
},
-
+
// 减少职位
editDuties() {
if (this.form.duties.length > 0) {
this.form.duties.pop();
}
},
-
+
// 添加地址
addAddress() {
const index = this.form.address.length;
@@ -823,34 +823,34 @@
fontWeight: 400,
type: 'text'
});
-
+
// 添加后重新初始化拖拽事件
this.$nextTick(() => {
this.dragEventArray('address');
});
},
-
+
// 减少地址
editAddress() {
if (this.form.address.length > 0) {
this.form.address.pop();
}
},
-
+
// 提交表单
onSubmit() {
let self = this;
self.$refs.form.validate(valid => {
if (valid) {
self.loading = true;
-
+
// 确保必要字段存在
if (!self.form.backdrop.src) {
self.$message.error('请上传背景图');
self.loading = false;
return;
}
-
+
BusinessApi.templateSave({
template: self.form
}, true)
@@ -869,7 +869,7 @@
}
});
},
-
+
// 返回
back() {
this.$router.push('/plus/business/template/index');
@@ -990,4 +990,4 @@
margin-bottom: 10px;
border-radius: 4px;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.2