修复名片模板生成失败问题 修复后台名片查看不显示头像和logo问题

quanwei

2025-11-01 121b714d710cf3c865f4a1b5efe81abec11056d1

修复名片模板生成失败问题
修复后台名片查看不显示头像和logo问题

 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();
    }
}

 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) {

 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('名片不存在');

 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('添加失败');
    }

 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,

 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>
  .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>

 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>
</style>