From 73b874c72ad55eb9eef21c36160ac0de58f0189e Mon Sep 17 00:00:00 2001
From: quanwei <419654421@qq.com>
Date: Thu, 05 Feb 2026 10:30:43 +0800
Subject: [PATCH] 优化名片
---
mobile/pages/plus/business/add.vue | 1137 +++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 829 insertions(+), 308 deletions(-)
diff --git a/mobile/pages/plus/business/add.vue b/mobile/pages/plus/business/add.vue
index 9c21efd..c2193c7 100644
--- a/mobile/pages/plus/business/add.vue
+++ b/mobile/pages/plus/business/add.vue
@@ -1,232 +1,293 @@
-<template>
- <view>
+ <template>
+ <view>
<form @submit="add">
- <view
- style="display: flex;justify-content: center;position: relative;overflow: hidden;border-radius: 30rpx;"
- v-for="(item,index) in templateList" v-if="item.template_id==template_id" :key="index">
- <view v-for="(item,index) in item.style.icon" :key="index"
- :style="'position:absolute;display: flex;left:'+item.left+'px;top:'+item.top+'px;width:'+item.width+'px;height:'+item.height+'px;'">
- <image :src="item.src" :style="'width:'+item.width+'px;height:'+item.height+'px;'"></image>
- </view>
- <view v-for="(item,index) in item.style.address" :key="index"
- :style="'position:absolute;left:'+item.left+'px;top:'+item.top+'px;color:'+item.color+';font-size:'+item.fontSize+'px;'">
- 地址：{{(business.address[index]||selectCity!='选择省 市 区')?(selectCity!='选择省 市 区'?selectCity:'')+business.address[index]:'未填写地址'}}
- </view>
- <view v-for="(item,index) in item.style.unit" :key="index"
- :style="'position:absolute;left:'+item.left+'px;top:'+item.top+'px;color:'+item.color+';font-size:'+item.fontSize+'px;'">
- {{business.unit[index]?business.unit[index]:'未填写公司'}}
- </view>
- <!-- <view v-for="(item,index) in item.style.position" :key="index"
- :style="'position:absolute;left:'+item.left+'px;top:'+item.top+'px;color:'+item.color+';font-size:'+item.fontSize+'px;'">
- {{business.position[index]?business.position[index]:'未填职位'}}
- </view> -->
- <view
- :style="'position:absolute;left:'+item.style.duties[0].left+'px;top:'+item.style.duties[0].top+'px;color:'+item.style.duties[0].color+';font-size:'+item.style.duties[0].fontSize+'px;'">
- {{business.duties[0]?business.duties[0]:'未填写职位'}}
- </view>
- <view v-if="business.mailbox"
- :style="'position:absolute;left:'+item.style.mailbox.left+'px;top:'+item.style.mailbox.top+'px;color:'+item.style.mailbox.color+';font-size:'+item.style.mailbox.fontSize+'px;'">
- 邮箱：{{business.mailbox?business.mailbox:'未填写邮箱'}}
- </view>
- <view
- :style="'position:absolute;left:'+item.style.mobile.left+'px;top:'+item.style.mobile.top+'px;color:'+item.style.mobile.color+';font-size:'+item.style.mobile.fontSize+'px;'">
- 手机：{{business.mobile?business.mobile:'未填写手机'}}{{business.mobile_phone?' / '+business.mobile_phone:''}}
- </view>
- <view
- :style="'position:absolute;left:'+item.style.wechat.left+'px;top:'+item.style.wechat.top+'px;color:'+item.style.wechat.color+';font-size:'+item.style.wechat.fontSize+'px;'">
- 微信：{{business.wechat?business.wechat:'未填写微信'}}
- </view>
- <view
- :style="'position:absolute;left:'+item.style.name.left+'px;top:'+item.style.name.top+'px;color:'+item.style.name.color+';font-size:'+item.style.name.fontSize+'px;'">
- {{business.name?business.name:'未填写姓名'}}
- </view>
- <view v-if="business.phone"
- :style="'position:absolute;left:'+item.style.phone.left+'px;top:'+item.style.phone.top+'px;color:'+item.style.phone.color+';font-size:'+item.style.phone.fontSize+'px;'">
- 电话：{{business.phone?business.phone:'未填写电话'}}
- </view>
- <image class="tup"
- :style="'width:'+item.style.backdrop.width+'px;height:'+item.style.backdrop.height+'px;'"
- :src="item.style.backdrop.src"></image>
- <view v-if="item.style.avatar.display==1"
- :style="'position:absolute;left:'+item.style.avatar.left+'px;top:'+item.style.avatar.top+'px;width:'+item.style.avatar.width+'px;height:'+item.style.avatar.width+'px;'+(item.style.avatar.style=='circle'?'border-radius:'+item.style.avatar.width+'px;overflow: hidden;':'overflow: hidden;')">
- <image :src="file_path?file_path:item.style.avatar.src"
- :style="'width:'+item.style.avatar.width+'px;height:'+item.style.avatar.width+'px;'">
- </image>
- </view>
- <view v-if="item.style.logo.display==1" class="logo_h" ref="logo_h"
- :style="'position:absolute;left:'+item.style.logo.left+'px;top:'+item.style.logo.top+'px;width:'+item.style.logo.width+'px;height:'+item.style.logo.height+'px;'+(item.style.logo.style=='circle'?'border-radius:'+item.style.logo.width+'px;overflow: hidden;':'overflow: hidden;')">
- <image :src="logo_path?logo_path:item.style.logo.src" class="logo_h" ref="logo_h"></image>
- </view>
+ <!-- 名片预览区域 -->
+ <view class="business-card-preview"
+ v-for="(templateItem,templateIndex) in templateList" v-if="templateItem.template_id==template_id" :key="templateIndex">
+
+ <!-- 图标装饰 -->
+ <view v-for="(item,index) in templateItem.style.icon" :key="index"
+ class="card-icon"
+ :style="{position:'absolute',display:'flex',left:item.left+'px',top:item.top+'px',width:item.width+'px',height:item.height+'px'}">
+ <image :src="item.src" :style="{width:item.width+'px',height:item.height+'px'}"></image>
+ </view>
+
+ <!-- 预览区域 - 支持多个公司和职位 -->
+ <scroll-view scroll-y="true" class="card-scroll-unit"
+ :style="{position:'absolute',left:(templateItem.style.unit[0].left||0)+'px',top:(templateItem.style.unit[0].top||0)+'px',width:unitWidth+'px',height:unitHeight+'px'}">
+ <view v-for="(companyItem, idx) in business.unit" :key="idx"
+ class="card-text-item"
+ :style="{color:(templateItem.style.unit[0].color||'#333'),fontSize:(templateItem.style.unit[0].fontSize||14)+'px',marginBottom:((templateItem.style.unit[0].fontSize||14)*0.5)+'px'}">
+ {{companyItem||'未填写公司'}}
+ </view>
+ </scroll-view>
+
+ <scroll-view scroll-y="true" class="card-scroll-duties"
+ :style="{position:'absolute',left:(templateItem.style.duties[0].left||0)+'px',top:(templateItem.style.duties[0].top||0)+'px',width:dutiesWidth+'px',height:dutiesHeight+'px'}">
+ <view v-for="(dutiesItem, idx) in business.duties" :key="idx"
+ class="card-text-item"
+ :style="{color:(templateItem.style.duties[0].color||'#333'),fontSize:(templateItem.style.duties[0].fontSize||14)+'px',lineHeight:1.5,marginBottom:((templateItem.style.duties[0].fontSize||14)*0.5)+'px'}">
+ {{dutiesItem||'未填写职位'}}
+ </view>
+ </scroll-view>
+
+ <!-- 地址 -->
+ <view v-for="(item,index) in templateItem.style.address" :key="index"
+ class="card-text"
+ :style="{position:'absolute',left:item.left+'px',top:item.top+'px',color:item.color,fontSize:item.fontSize+'px',maxWidth:addressMaxWidth+'px'}">
+ 地址：{{(business.address[index]||selectCity!='选择省 市 区')?(selectCity!='选择省 市 区'?selectCity:'')+business.address[index]:'未填写地址'}}
+ </view>
+
+ <!-- 邮箱 -->
+ <view v-if="business.mailbox"
+ class="card-text"
+ :style="{position:'absolute',left:templateItem.style.mailbox.left+'px',top:templateItem.style.mailbox.top+'px',color:templateItem.style.mailbox.color,fontSize:templateItem.style.mailbox.fontSize+'px',maxWidth:mailboxMaxWidth+'px'}">
+ 邮箱：{{business.mailbox?business.mailbox:'未填写邮箱'}}
+ </view>
+
+ <!-- 手机 -->
+ <view class="card-text"
+ :style="{position:'absolute',left:templateItem.style.mobile.left+'px',top:templateItem.style.mobile.top+'px',color:templateItem.style.mobile.color,fontSize:templateItem.style.mobile.fontSize+'px',maxWidth:mobileMaxWidth+'px'}">
+ 手机：{{business.mobile?business.mobile:'未填写手机'}}{{business.mobile_phone?' / '+business.mobile_phone:''}}
+ </view>
+
+ <!-- 微信 -->
+ <view class="card-text"
+ :style="{position:'absolute',left:templateItem.style.wechat.left+'px',top:templateItem.style.wechat.top+'px',color:templateItem.style.wechat.color,fontSize:templateItem.style.wechat.fontSize+'px',maxWidth:wechatMaxWidth+'px'}">
+ 微信：{{business.wechat?business.wechat:'未填写微信'}}
+ </view>
+
+
+ <!-- 姓名 -->
+ <view class="card-text"
+ :style="{position:'absolute',left:templateItem.style.name.left+'px',top:templateItem.style.name.top+'px',color:templateItem.style.name.color,fontSize:templateItem.style.name.fontSize+'px',maxWidth:nameMaxWidth+'px'}">
+ {{business.name?business.name:'未填写姓名'}}
+ </view>
+
+ <!-- 电话 -->
+ <view v-if="business.phone"
+ class="card-text"
+ :style="{position:'absolute',left:templateItem.style.phone.left+'px',top:templateItem.style.phone.top+'px',color:templateItem.style.phone.color,fontSize:templateItem.style.phone.fontSize+'px',maxWidth:phoneMaxWidth+'px'}">
+ 电话：{{business.phone?business.phone:'未填写电话'}}
+ </view>
+
+ <!-- 背景图 -->
+ <image class="tup card-backdrop"
+ :style="{width:templateItem.style.backdrop.width+'px',height:templateItem.style.backdrop.height+'px'}"
+ :src="templateItem.style.backdrop.src"></image>
+
+ <!-- 头像 -->
+ <view v-if="templateItem.style.avatar.display==1"
+ class="card-avatar"
+ :class="{'avatar-circle': templateItem.style.avatar.style==='circle'}"
+ style="position:absolute"
+ :style="{left:templateItem.style.avatar.left+'px',top:templateItem.style.avatar.top+'px',width:templateItem.style.avatar.width+'px',height:templateItem.style.avatar.width+'px'}">
+ <image :src="file_path?file_path:templateItem.style.avatar.src"
+ :style="{width:templateItem.style.avatar.width+'px',height:templateItem.style.avatar.width+'px'}">
+ </image>
+ </view>
+
+ <!-- Logo -->
+ <view v-if="templateItem.style.logo.display==1"
+ class="card-logo"
+ :class="{'logo-circle': templateItem.style.logo.style==='circle'}"
+ ref="logo_h"
+ style="position:absolute"
+ :style="{left:templateItem.style.logo.left+'px',top:templateItem.style.logo.top+'px',width:templateItem.style.logo.width+'px',height:templateItem.style.logo.height+'px'}">
+ <image :src="logo_path?logo_path:templateItem.style.logo.src" class="logo_h" ref="logo_h"></image>
+ </view>
</view>
<view class="fds">
<view>
- <scroll-view scroll-x="true">
- <view style="width: 100%;white-space: nowrap;">
- <view class="mpxz" v-for="(item,index) in templateList" :key="index"
- @tap="radioChange(index)">
- <view class="zjc" v-if="item.template_id==template_id">
+ <scroll-view scroll-x="true">
+ <view style="width: 100%;white-space: nowrap;">
+ <view class="mpxz" v-for="(item,index) in templateList" :key="index"
+ @tap="radioChange(index)">
+ <view class="zjc" v-if="item.template_id==template_id">
+ </view>
+ <image class="mpxz-image" :src="item.image" mode="aspectFit"></image>
+ </view>
+ </view>
+ </scroll-view>
+ </view>
+ <view class="lxfx">
+ <view class="lxfxbiaoti">名片类型：</view>
+ <view class="lxfxnrr">
+ <picker @change="changeIlk" :range="ilkList" :range-key="'name'" class="lxfxneirong"
+ mode="selector">
+ <view class="picker-content">
+ {{selectedIlk.name || '请选择名片类型'}}
+ <text class="icon iconfont icon-jiantou"></text>
+ </view>
+ <input style="display: none;" name='ilk' v-model="business.ilk" type="text">
+ </picker>
+ </view>
+ </view>
+ <view class="grxx" @click="is_avatar=true" v-show="avatar_display==1" style="overflow: hidden;">
+ <view class="biaoti">
+ 头像
+ </view>
+ <view class="tx" style="margin-left: 30rpx;">
+ <image class="logo" :src="file_path||'@/static/shop/login/qietu_1054.png'" mode="heightFix"></image>
+ <Upload v-if="is_avatar" @getImgs="handleAvatarUpload" :imageList="[file_path]"></Upload>
+ </view>
+ </view>
+ <view @click="is_logo=true" v-show="logo_display==1">
+ <view class="biaoti">
+ logo
+ </view>
+ <view class="logo" style="overflow: hidden;">
+ <image class="logo" :src="logo_path||'@/static/shop/login/qietu_1054.png'" mode="heightFix"></image>
+ <Upload v-if="is_logo" @getImgs="handleLogoUpload" :imageList="[logo_path]"></Upload>
+ </view>
+ </view>
+ <view>
+ <view class="biaoti">
+ 联系方式
+ </view>
+ <view>
+ <view class="lxfx">
+ <view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>姓名：</view>
+ <view class="lxfxnrr">
+ <input placeholder="请输入姓名" name='name' v-model="business.name" class="lxfxneirong"
+ type="text">
+ </view>
+ </view>
+ <view class="lxfx">
+ <view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>手机：</view>
+ <view class="lxfxnrr">
+ <input @input="sjh" placeholder="输入手机号" v-model="mobile" class="lxfxneirong"
+ type="text">
+ <input style="display: none;" name="mobile" v-model="business.mobile"
+ class="lxfxneirong" type="text">
+ <input style="display: none;" name="mobile_phone" v-model="business.mobile_phone"
+ class="lxfxneirong" type="text">
+ </view>
+ </view>
+
+ <view class="lxfx">
+ <view class="lxfxbiaoti">座机：</view>
+ <view class="lxfxnrr"><input placeholder="请输入电话" v-model="business.phone" name="phone"
+ class="lxfxneirong" type="text">
+ </view>
+ </view>
+ <view class="lxfx">
+ <view class="lxfxbiaoti">微信：</view>
+ <view class="lxfxnrr"><input class="lxfxneirong" name="wechat" v-model="business.wechat"
+ placeholder="请输入微信" type="text">
+ </view>
+ </view>
+ <view class="lxfx">
+ <view class="lxfxbiaoti">邮箱：</view>
+ <view class="lxfxnrr"><input class="lxfxneirong" name="mailbox" v-model="business.mailbox"
+ placeholder="请输入邮箱" type="text">
+ </view>
+ </view>
+ </view>
+ </view>
+ <view style="padding-bottom: 300rpx;">
+ <view class="biaoti">
+ 详细信息
+ </view>
+ <view>
+ <view v-for="(item,index) in companyList" :key="index" class="company-item">
+ <view class="company-header">
+ <text class="company-title">公司/职位 {{index+1}}</text>
+ <text class="delete-btn" v-if="companyList.length > 1" @tap="deleteCompany(index)">删除</text>
+ </view>
+ <view class="lxfx">
+ <view class="lxfxbiaoti">公司名称：</view>
+ <view class="lxfxnrr">
+ <input placeholder="请输入公司名称" :name="'unit['+index+']'"
+ v-model="companyList[index].unit" @input="syncBusinessFromCompanyList"
+ class="lxfxneirong" type="text">
+ </view>
+ </view>
+ <view class="lxfx">
+ <view class="lxfxbiaoti">职位：</view>
+ <view class="lxfxnrr">
+ <input placeholder="请输入职位" :name="'duties['+index+']'"
+ v-model="companyList[index].duties" @input="syncBusinessFromCompanyList"
+ class="lxfxneirong" type="text">
+ </view>
+ </view>
+ </view>
+ <view class="add-company-btn" @tap="addCompany">
+ <text class="icon iconfont icon-add"></text>
+ <text>添加公司/职位</text>
+ </view>
+ <view class="lxfx" @tap="industryClose">
+ <view class="lxfxbiaoti">行业：</view>
+ <view class="lxfxnrr">
+ <input class="lxfxneirong" :value="industryNmae" disabled readonly>
+ <input style="display: none;" type="hidden" name="industry_id"
+ v-model="business.industry_id">
+ </view>
+ </view>
+ <view class="lxfx" >
+ <view class="lxfxbiaoti">所在地区：</view>
+ <view class="lxfxnrr">
+ <input class="lxfxneirong" :value="selectCity" disabled="true"
+ @click="chooseLocation" placeholder="请选择省市区">
+ <input style="display: none;" type="hidden" name="province_id"
+ v-model="business.province_id">
+ <input style="display: none;" type="hidden" name="city_id" v-model="business.city_id">
+ <input style="display: none;" type="hidden" name="region_id"
+ v-model="business.region_id">
+ </view>
+ </view>
+ <view class="lxfx" >
+ <view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>地址：</view>
+ <view class="lxfxnrr">
+ <input placeholder="请输入详细地址" name="address[0]" v-model="business.address[0]"
+ class="lxfxneirong" type="text">
+ </view>
+ </view>
+ <view class="lxfx">
+ <view class="lxfxbiaoti">简介：</view>
+ <view class="lxfxnrr">
+ <textarea placeholder="请输入个人或公司简介" maxlength="-1" name="Introduction" v-model="business.Introduction"
+ class="lxfxneirong" :auto-height="true"></textarea>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="anu">
+ <button form-type="submit" class="tijiao">保存名片</button>
+ <input type="text" style="display: none;" name="file_id" :value="file_id">
+ <input type="text" style="display: none;" name="logo" :value="logo_id">
+ <input type="text" style="display: none;" name="logo_height" :value="logo_height">
+ <input type="text" style="display: none;" name="logo_width" :value="logo_width">
+ <input type="text" style="display: none;" name="longitude" :value="business.longitude">
+ <input type="text" style="display: none;" name="latitude" :value="business.latitude">
+ </view>
+ <Popup :show="industryShow" :width="screenWidth" type="bottom" :closeable="true" @close="industryClose">
+ <view class="industry-popup">
+ <view class="industry-title">选择行业</view>
+ <scroll-view scroll-y="true" style="height: 600rpx;">
+ <!-- 递归展示行业树形结构 -->
+ <view v-for="item in industryList" :key="item.industry_id">
+ <view class="industry-item" @tap="selectIndustry" :data-id="item.industry_id"
+ :class="{ 'selected': business.industry_id == item.industry_id }">
+ {{ item.name }}
+ </view>
+ <!-- 显示子行业 -->
+ <view v-if="item.child && item.child.length > 0" class="industry-child">
+ <view class="industry-item industry-child-item" v-for="child in item.child"
+ :key="child.industry_id" @tap="selectIndustry" :data-id="child.industry_id"
+ :class="{ 'selected': business.industry_id == child.industry_id }">
+ {{ child.name }}
</view>
- <image class="mpxz-image" :src="item.image" mode="aspectFit"></image>
</view>
</view>
</scroll-view>
</view>
- <view class="lxfx">
- <view class="lxfxbiaoti">名片类型：</view>
- <view class="lxfxnrr">
- <input placeholder="请备注名片的用途" name='ilk' v-model="business.ilk" class="lxfxneirong" type="text">
- </view>
- </view>
- <view class="grxx" @click="is_avatar=true" v-show="avatar_display==1" style="overflow: hidden;">
- <view class="biaoti">
- 头像
- </view>
- <view class="tx" style="margin-left: 30rpx;">
- <image class="logo" :src="file_path" mode="heightFix"></image>
- <Upload v-if="is_avatar" @getImgs="handleAvatarUpload" :imageList="[file_path]"></Upload>
- </view>
- </view>
- <view @click="is_logo=true" v-show="logo_display==1">
- <view class="biaoti">
- logo
- </view>
- <view class="logo" style="overflow: hidden;">
- <image class="logo" :src="logo_path" mode="heightFix"></image>
- <Upload v-if="is_logo" @getImgs="handleLogoUpload" :imageList="[logo_path]"></Upload>
- </view>
- </view>
- <view>
- <view class="biaoti">
- 联系方式
- </view>
- <view>
- <view class="lxfx">
- <view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>姓名：</view>
- <view class="lxfxnrr">
- <input placeholder="请输入姓名" name='name' v-model="business.name" class="lxfxneirong"
- type="text">
- </view>
- </view>
- <view class="lxfx">
- <view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>手机：</view>
- <view class="lxfxnrr">
- <input @input="sjh" placeholder="输入手机号，多个手机号用/隔开" v-model="mobile" class="lxfxneirong"
- type="text">
- <input style="display: none;" name="mobile" v-model="business.mobile"
- class="lxfxneirong" type="text">
- <input style="display: none;" name="mobile_phone" v-model="business.mobile_phone"
- class="lxfxneirong" type="text">
- </view>
- </view>
-
- <view class="lxfx">
- <view class="lxfxbiaoti">座机：</view>
- <view class="lxfxnrr"><input placeholder="请输入电话" v-model="business.phone" name="phone"
- class="lxfxneirong" type="text">
- </view>
- </view>
- <view class="lxfx">
- <view class="lxfxbiaoti">微信：</view>
- <view class="lxfxnrr"><input class="lxfxneirong" name="wechat" v-model="business.wechat"
- placeholder="请输入微信" type="text">
- </view>
- </view>
- <view class="lxfx">
- <view class="lxfxbiaoti">邮箱：</view>
- <view class="lxfxnrr"><input class="lxfxneirong" name="mailbox" v-model="business.mailbox"
- placeholder="请输入邮箱" type="text">
- </view>
- </view>
- </view>
- </view>
- <view style="padding-bottom: 120rpx;">
- <view class="biaoti">
- 详细信息
- </view>
- <view>
- <view v-for="(item,index) in unit" :key="index">
- <view class="lxfx">
- <view class="lxfxbiaoti">单位名称：</view>
- <view class="lxfxnrr">
- <input placeholder="请输入单位名称" :name="'unit['+index+']'"
- v-model="business.unit[index]" class="lxfxneirong" type="text">
- </view>
- </view>
- <view class="lxfx">
- <view class="lxfxbiaoti">职位：</view>
- <view class="lxfxnrr">
- <input placeholder="请输入职位" :name="'duties['+index+']'"
- v-model="business.duties[index]" class="lxfxneirong" type="text">
- </view>
- </view>
- </view>
- <view class="lxfx" @tap="industryClose">
- <view class="lxfxbiaoti">行业：</view>
- <view class="lxfxnrr">
- <input class="lxfxneirong" :value="industryNmae" disabled readonly>
- <input style="display: none;" type="hidden" name="industry_id" v-model="business.industry_id">
- </view>
- </view>
- <view class="lxfx">
- <view class="lxfxbiaoti">所在地区：</view>
- <view class="lxfxnrr">
- <input class="lxfxneirong" :value="selectCity" disabled="true" @click="showMulLinkageThreePicker" placeholder="请选择省市区">
- <input style="display: none;" type="hidden" name="province_id" v-model="business.province_id">
- <input style="display: none;" type="hidden" name="city_id" v-model="business.city_id">
- <input style="display: none;" type="hidden" name="region_id" v-model="business.region_id">
- </view>
- </view>
- <view class="lxfx">
- <view class="lxfxbiaoti"><text style="color: #fa3534;">*</text>地址：</view>
- <view class="lxfxnrr">
- <input placeholder="请输入详细地址" name="address[0]" v-model="business.address[0]"
- class="lxfxneirong" type="text">
- </view>
- </view>
- <view class="lxfx">
- <view class="lxfxbiaoti">简介：</view>
- <view class="lxfxnrr">
- <textarea placeholder="请输入个人或公司简介" name="Introduction" v-model="business.Introduction"
- class="lxfxneirong" :auto-height="true"></textarea>
- </view>
- </view>
- </view>
- </view>
- <view class="anu">
- <button form-type="submit" class="tijiao">保存名片</button>
- <input type="text" style="display: none;" name="file_id" :value="file_id">
- <input type="text" style="display: none;" name="logo" :value="logo_id">
- <input type="text" style="display: none;" name="logo_height" :value="logo_height">
- <input type="text" style="display: none;" name="logo_width" :value="logo_width">
- </view>
- <Popup :show="industryShow" :width="screenWidth" type="bottom" :closeable="true" @close="industryClose">
- <view class="industry-popup">
- <view class="industry-title">选择行业</view>
- <scroll-view scroll-y="true" style="height: 600rpx;">
- <!-- 递归展示行业树形结构 -->
- <view v-for="item in industryList" :key="item.industry_id">
- <view class="industry-item"
- @tap="selectIndustry" :data-id="item.industry_id"
- :class="{ 'selected': business.industry_id == item.industry_id }">
- {{ item.name }}
- </view>
- <!-- 显示子行业 -->
- <view v-if="item.child && item.child.length > 0" class="industry-child">
- <view class="industry-item industry-child-item"
- v-for="child in item.child" :key="child.industry_id"
- @tap="selectIndustry" :data-id="child.industry_id"
- :class="{ 'selected': business.industry_id == child.industry_id }">
- {{ child.name }}
- </view>
- </view>
- </view>
- </scroll-view>
- </view>
- </Popup>
- <mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
- </view>
- </form>
- </view>
+ </Popup>
+ <mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area"
+ :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
+ </view>
+ </form>
+</view>
</template>
<script>
@@ -235,72 +296,80 @@
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
components: {
- Upload,
- Popup,
- mpvueCityPicker
- },
- data() {
- return {
- // 模板相关
- templateList: [], // 模板列表
- templateShow: false, // 模板弹窗显示状态
- template_id: 0, // 当前选中的模板ID
- templateIndex: 0, // 当前选中的模板索引
- // 业务数据
- business: {
- name: '', // 姓名
- mobile: '', // 手机号
- mobile_phone: '', // 备用手机号
- duties: [], // 职位
- phone: '', // 电话
- mailbox: '', // 邮箱
- wechat: '', // 微信
- unit: [], // 单位名称
- position: [], // 职位信息
- address: [], // 地址
- industry_id: 0, // 行业ID
- province_id: 0, // 省份ID
- city_id: 0, // 城市ID
- region_id: 0, // 区域ID
- Introduction: '' // 简介
- },
- // 辅助输入
- mobile: '', // 用于输入的手机号（支持多手机号）
- // 业务状态
- business_card_id: 0, // 名片ID（用于编辑）
- // 图片相关
- file_id: 0, // 头像文件ID
- file_path: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132", // 头像路径
- logo_id: 0, // Logo文件ID
- logo_path: "http://lblmh.com/image/diy/logo_top.png", // Logo路径
- // 布局相关
- unit: [], // 单位信息数组
- logo_height: 0, // Logo高度
- logo_width: 0, // Logo宽度
- avatar_width: 0, // 头像宽度
- // 显示控制
- avatar_display: 1, // 头像显示状态
- logo_display: 1, // Logo显示状态
- position: [], // 位置信息
- is_business: 0, // 业务类型
- duties: '', // 职位字符串
- positionNum: 0, // 位置数量
- is_avatar: false, // 头像上传弹窗状态
- is_logo: false, // Logo上传弹窗状态
- // 行业相关
- industryList: [], // 行业列表
- industryShow: false, // 行业选择弹窗状态
- industryNmae:'请选择行业', // 选中的行业名称
- screenWidth:0, // 屏幕宽度
- // 区域选择相关
- cityPickerValueDefault: [0, 0, 0], // 地区选择器默认值
- selectCity: '选择省 市 区', // 选中的地区显示
- region: {}, // 地区信息
- is_load: false, // 数据加载状态
- province: [], // 省份数据
- city: [], // 城市数据
- area: [] // 区域数据
- }
+ Upload,
+ Popup,
+ mpvueCityPicker
+ },
+ data() {
+ return {
+ // 模板相关
+ templateList: [], // 模板列表
+ templateShow: false, // 模板弹窗显示状态
+ template_id: 0, // 当前选中的模板ID
+ templateIndex: 0, // 当前选中的模板索引
+ // 业务数据
+ business: {
+ name: '', // 姓名
+ mobile: '', // 手机号
+ mobile_phone: '', // 备用手机号
+ duties: [], // 职位
+ phone: '', // 电话
+ mailbox: '', // 邮箱
+ wechat: '', // 微信
+ unit: [], // 单位名称
+ position: [], // 职位信息
+ address: [], // 地址
+ industry_id: 0, // 行业ID
+ province_id: 0, // 省份ID
+ city_id: 0, // 城市ID
+ region_id: 0, // 区域ID
+ Introduction: '', // 简介
+ ilk: '' ,// 名片类型
+ latitude:0,
+ longitude:0
+ },
+ // 名片类型
+ ilkList: [], // 类型列表
+ selectedIlk: {}, // 选中的类型
+ // 辅助输入
+ mobile: '', // 用于输入的手机号（支持多手机号）
+ // 业务状态
+ business_card_id: 0, // 名片ID（用于编辑）
+ // 图片相关
+ file_id: 0, // 头像文件ID
+ file_path: "", // 头像路径
+ logo_id: 0, // Logo文件ID
+ logo_path: "", // Logo路径
+ // 布局相关
+ unit: [], // 单位信息数组
+ logo_height: 0, // Logo高度
+ logo_width: 0, // Logo宽度
+ avatar_width: 0, // 头像宽度
+ // 公司职位列表
+ companyList: [], // 公司职位列表
+ // 显示控制
+ avatar_display: 1, // 头像显示状态
+ logo_display: 1, // Logo显示状态
+ position: [], // 位置信息
+ is_business: 0, // 业务类型
+ duties: '', // 职位字符串
+ positionNum: 0, // 位置数量
+ is_avatar: false, // 头像上传弹窗状态
+ is_logo: false, // Logo上传弹窗状态
+ // 行业相关
+ industryList: [], // 行业列表
+ industryShow: false, // 行业选择弹窗状态
+ industryNmae: '请选择行业', // 选中的行业名称
+ screenWidth: 0, // 屏幕宽度
+ // 区域选择相关
+ cityPickerValueDefault: [0, 0, 0], // 地区选择器默认值
+ selectCity: '选择省 市 区', // 选中的地区显示
+ region: {}, // 地区信息
+ is_load: false, // 数据加载状态
+ province: [], // 省份数据
+ city: [], // 城市数据
+ area: [] // 区域数据
+ }
},
onLoad(e) {
if (e.business_card_id) {
@@ -309,13 +378,240 @@
})
this.business_card_id = e.business_card_id
this.getBusiness(e.business_card_id)
+ } else {
+ // 新增时默认添加一个公司职位
+ this.addCompany();
}
this.getTemplate();
this.getIndustryList();
+ this.getIlkList();
// 初始化区域选择器数据
this.initRegionData();
},
+ computed: {
+ // 计算公司列表高度
+ unitHeight() {
+ const fontSize = (this.templateList.find(t => t.template_id === this.template_id)?.style?.unit?.[0]?.fontSize) || 14;
+ const lineHeight = fontSize * 1.5; // 行高 = 字体大小 * 1.5
+ const lineSpacing = fontSize * 0.5; // 行间距 = 字体大小 * 0.5
+ const itemCount = this.business.unit ? this.business.unit.length : 0;
+ // 估算高度：每个公司可能占用最多3行，乘以行高，加上行间距，再加上padding
+ const estimatedLinesPerItem = 3;
+ const height = (lineHeight * estimatedLinesPerItem + lineSpacing) * itemCount + 20;
+ return Math.max(height, 80); // 确保最小高度为80px
+ },
+ // 计算职位列表高度
+ dutiesHeight() {
+ const fontSize = (this.templateList.find(t => t.template_id === this.template_id)?.style?.duties?.[0]?.fontSize) || 14;
+ const lineHeight = fontSize * 1.5; // 行高 = 字体大小 * 1.5
+ const lineSpacing = fontSize * 0.5; // 行间距 = 字体大小 * 0.5
+ const itemCount = this.business.duties ? this.business.duties.length : 0;
+ // 估算高度：每个职位可能占用最多3行，乘以行高，加上行间距，再加上padding
+ const estimatedLinesPerItem = 3;
+ const height = (lineHeight * estimatedLinesPerItem + lineSpacing) * itemCount + 20;
+ return Math.max(height, 80); // 确保最小高度为80px
+ },
+ // 计算公司容器的合适宽度（智能判断右边是否有其他字段）
+ unitWidth() {
+ const template = this.templateList.find(t => t.template_id === this.template_id);
+ if (!template || !template.style?.unit?.[0]) return 150;
+ return this.calculateFieldMaxWidth(template.style.unit[0].left, template.style.unit[0].top);
+ },
+ // 计算职位容器的合适宽度（智能判断右边是否有其他字段）
+ dutiesWidth() {
+ const template = this.templateList.find(t => t.template_id === this.template_id);
+ if (!template || !template.style?.duties?.[0]) return 150;
+ return this.calculateFieldMaxWidth(template.style.duties[0].left, template.style.duties[0].top);
+ },
+ // 地址字段的最大宽度
+ addressMaxWidth() {
+ const template = this.templateList.find(t => t.template_id === this.template_id);
+ if (!template || !template.style?.address?.[0]) return 200;
+ return this.calculateFieldMaxWidth(template.style.address[0].left, template.style.address[0].top);
+ },
+ // 邮箱字段的最大宽度
+ mailboxMaxWidth() {
+ const template = this.templateList.find(t => t.template_id === this.template_id);
+ if (!template || !template.style?.mailbox) return 200;
+ return this.calculateFieldMaxWidth(template.style.mailbox.left, template.style.mailbox.top);
+ },
+ // 手机字段的最大宽度
+ mobileMaxWidth() {
+ const template = this.templateList.find(t => t.template_id === this.template_id);
+ if (!template || !template.style?.mobile) return 200;
+ return this.calculateFieldMaxWidth(template.style.mobile.left, template.style.mobile.top);
+ },
+ // 微信字段的最大宽度
+ wechatMaxWidth() {
+ const template = this.templateList.find(t => t.template_id === this.template_id);
+ if (!template || !template.style?.wechat) return 200;
+ return this.calculateFieldMaxWidth(template.style.wechat.left, template.style.wechat.top);
+ },
+ // 姓名字段的最大宽度
+ nameMaxWidth() {
+ const template = this.templateList.find(t => t.template_id === this.template_id);
+ if (!template || !template.style?.name) return 200;
+ return this.calculateFieldMaxWidth(template.style.name.left, template.style.name.top);
+ },
+ // 电话字段的最大宽度
+ phoneMaxWidth() {
+ const template = this.templateList.find(t => t.template_id === this.template_id);
+ if (!template || !template.style?.phone) return 200;
+ return this.calculateFieldMaxWidth(template.style.phone.left, template.style.phone.top);
+ }
+ },
+ watch: {
+ // 监听companyList变化,同步到business对象
+ // 不使用deep监听,只在数组引用变化时同步
+ // 这样可以避免深度监听导致的多次同步
+ companyList: {
+ handler(newVal, oldVal) {
+ if (newVal && newVal.length > 0) {
+ this.syncBusinessFromCompanyList();
+ }
+ }
+ }
+ },
methods: {
+ // 智能计算文本字段的最大宽度（供computed调用）
+ // 根据右边是否有其他字段来动态计算maxWidth
+ calculateFieldMaxWidth(left, top) {
+ const template = this.templateList.find(t => t.template_id === this.template_id);
+ if (!template || !template.style?.backdrop) return 200;
+
+ const backdropWidth = template.style.backdrop.width || 375;
+ const rightFields = [];
+
+ // 收集所有可能的字段
+ const fields = [];
+
+ // 公司
+ if (template.style.unit && template.style.unit[0]) {
+ fields.push({
+ name: 'unit',
+ left: template.style.unit[0].left,
+ top: template.style.unit[0].top,
+ width: template.style.unit[0].width
+ });
+ }
+
+ // 职位
+ if (template.style.duties && template.style.duties[0]) {
+ fields.push({
+ name: 'duties',
+ left: template.style.duties[0].left,
+ top: template.style.duties[0].top,
+ width: template.style.duties[0].width
+ });
+ }
+
+ // 姓名
+ if (template.style.name) {
+ fields.push({
+ name: 'name',
+ left: template.style.name.left,
+ top: template.style.name.top,
+ width: template.style.name.width
+ });
+ }
+
+ // 地址
+ if (template.style.address && template.style.address[0]) {
+ fields.push({
+ name: 'address',
+ left: template.style.address[0].left,
+ top: template.style.address[0].top,
+ width: template.style.address[0].width
+ });
+ }
+
+ // 邮箱
+ if (template.style.mailbox) {
+ fields.push({
+ name: 'mailbox',
+ left: template.style.mailbox.left,
+ top: template.style.mailbox.top,
+ width: template.style.mailbox.width
+ });
+ }
+
+ // 手机
+ if (template.style.mobile) {
+ fields.push({
+ name: 'mobile',
+ left: template.style.mobile.left,
+ top: template.style.mobile.top,
+ width: template.style.mobile.width
+ });
+ }
+
+ // 微信
+ if (template.style.wechat) {
+ fields.push({
+ name: 'wechat',
+ left: template.style.wechat.left,
+ top: template.style.wechat.top,
+ width: template.style.wechat.width
+ });
+ }
+
+ // 电话
+ if (template.style.phone) {
+ fields.push({
+ name: 'phone',
+ left: template.style.phone.left,
+ top: template.style.phone.top,
+ width: template.style.phone.width
+ });
+ }
+
+ // 找出右边最近的字段
+ // 判断标准: left > 当前left, 且top在合理范围内(±20px)
+ const TOLERANCE = 20;
+ for (let field of fields) {
+ if (field.left > left && Math.abs(field.top - top) <= TOLERANCE) {
+ rightFields.push(field);
+ }
+ }
+
+ // 如果右边有字段,取最近的一个的左边距
+ if (rightFields.length > 0) {
+ rightFields.sort((a, b) => a.left - b.left);
+ return Math.max(rightFields[0].left - left, 50);
+ }
+
+ // 如果右边没有字段,使用名片边缘
+ return Math.max(backdropWidth - left - 10, 100);
+ },
+ // 打开地图选择地址 by lyzflash
+ chooseLocation(n) {
+ let self=this;
+ uni.chooseLocation({
+ success: function (res) {
+ console.log(res);
+ self.business.longitude=res.longitude;
+ self.business.latitude=res.latitude;
+ self.location_address=res.address;
+ self.business.address[0]=res.name;
+ // 获取省市区
+ self.setLocationAddress();
+ }
+ });
+ },
+
+ // 获取掉省市区 by lyzflash
+ setLocationAddress() {
+ let self = this;
+ self._get('user.address/setLocationAddress', {
+ address: self.location_address
+ }, function(res) {
+ /* self.address.location_address = res.data.short_address; */
+ self.business.province_id = res.data.cityCode[0];
+ self.business.city_id = res.data.cityCode[1];
+ self.business.region_id = res.data.cityCode[2];
+ self.selectCity = res.data.region;
+ });
+ },
templateClose() {
this.templateShow = !this.templateShow
},
@@ -400,24 +696,47 @@
this.business.duties = duties
},
handleAvatarUpload(imgs) {
+ this.is_avatar = false
if (imgs && imgs.length > 0) {
this.file_path = imgs[0].file_path
this.file_id = imgs[0].file_id
- this.is_avatar = false
}
},
handleLogoUpload(imgs) {
+ this.is_logo = false
if (imgs && imgs.length > 0) {
this.logo_path = imgs[0].file_path
this.logo_id = imgs[0].file_id
}
},
+ // 获取名片类型列表
+ getIlkList() {
+ let _this = this;
+ this._post('plus.business.business/getIlk', {}, res => {
+ if (res.data) {
+ // 转换为数组格式便于picker使用
+ _this.ilkList = Object.keys(res.data).map(key => ({
+ id: key,
+ name: res.data[key]
+ }));
+ }
+ })
+ },
+ // 切换名片类型
+ changeIlk(e) {
+ const index = e.detail.value;
+ this.selectedIlk = this.ilkList[index];
+ this.business.ilk = this.selectedIlk.id;
+ },
getTemplate() {
let _this = this;
- const systemInfo = uni.getSystemInfoSync()
- this.screenWidth=systemInfo.screenWidth*2-70;
+ const systemInfo = uni.getSystemInfoSync();
+ // 使用实际屏幕宽度减去左右边距 (20rpx * 2 = 40rpx = 20px)
+ const displayWidth = systemInfo.screenWidth - 20;
+ this.screenWidth = displayWidth * 2; // 保存为rpx宽度
+
this._post('plus.business.template/getList', {
- screenWidth: systemInfo.screenWidth
+ screenWidth: displayWidth // 传递实际显示宽度(px)
}, res => {
this.templateList = res.data;
this.template_id ? '' : this.template_id = this.templateList[0].template_id
@@ -458,6 +777,10 @@
this.template_id = res.data.template_id;
this.unit = res.data.unit;
this.position = res.data.position;
+
+ // 初始化公司职位列表
+ this.initCompanyList();
+
this.mobile = this.business.mobile + (this.business.mobile_phone ? '/' + this.business
.mobile_phone : '');
this.business.duties.forEach(function(item, index) {
@@ -465,11 +788,34 @@
})
this.file_id = res.data.file_id;
this.logo_id = res.data.logo
- res.data.file_path ? this.file_path = res.data.file_path : "";
- res.data.logo ? this.logo_path = res.data.logo_image.file_path : "";
+ res.data.file_id ? this.file_path = res.data.file_path : "";
+ res.data.logo ? this.logo_path = res.data.logoImage.file_path : "";
res.data.logo_width ? this.logo_width = res.data.logo_width : 0;
res.data.logo_height ? this.logo_height = res.data.logo_height : 0;
-
+
+ // 设置名片类型
+ if (this.business.ilk !== undefined && this.business.ilk !== '') {
+ // 等待类型列表加载完成后设置选中项
+ if (this.ilkList && this.ilkList.length > 0) {
+ // 尝试根据id查找，id可能是字符串或数字
+ const ilkId = String(this.business.ilk);
+ this.selectedIlk = this.ilkList.find(item => item.id === ilkId) || {};
+ } else {
+ // 如果类型列表还没加载完成，先获取列表再设置
+ this._post('plus.business.business/getIlk', {}, res => {
+ if (res.data) {
+ _this.ilkList = Object.keys(res.data).map(key => ({
+ id: key,
+ name: res.data[key]
+ }));
+ // 尝试根据id查找，id可能是字符串或数字
+ const ilkId = String(_this.business.ilk);
+ _this.selectedIlk = _this.ilkList.find(item => item.id ===
+ ilkId) || {};
+ }
+ })
+ }
+ }
// 设置行业名称
if (this.business.industry_id) {
// 先等待行业列表加载完成再查找名称
@@ -480,18 +826,19 @@
this._post('plus.business.industry/getIndustryTree', {}, res => {
if (res.data) {
_this.industryList = res.data.tree;
- _this.findIndustryName(_this.industryList, _this.business.industry_id);
+ _this.findIndustryName(_this.industryList, _this.business
+ .industry_id);
}
})
}
}
-
+
// 设置地区显示值
if (this.business.region && this.business.region.province) {
let region = this.business.region;
this.selectCity = `${region.province} ${region.city} ${region.region}`;
}
-
+
this.getTemplate();
}
@@ -531,13 +878,61 @@
this.is_business = templateList.style.is_business;
},
+ // 初始化公司职位列表
+ initCompanyList() {
+ let unitLength = Array.isArray(this.business.unit) ? this.business.unit.length : 0;
+ if (unitLength > 0) {
+ // 根据现有数据生成公司职位列表
+ this.companyList = [];
+ for (let i = 0; i < unitLength; i++) {
+ this.companyList.push({
+ unit: this.business.unit[i] || '',
+ duties: this.business.duties[i] || ''
+ });
+ }
+ } else {
+ // 如果没有数据,至少添加一个
+ this.companyList = [{ unit: '', duties: '' }];
+ }
+
+ // 不在这里调用syncBusinessFromCompanyList,因为watch会自动同步
+ // 这样可以避免数据被意外重置
+ },
+
+ // 添加公司职位
+ addCompany() {
+ this.companyList.push({
+ unit: '',
+ duties: ''
+ });
+ // 移除syncBusinessFromCompanyList调用,watch会处理
+ },
+
+ // 删除公司职位
+ deleteCompany(index) {
+ if (this.companyList.length <= 1) {
+ this.showError('至少保留一个公司/职位');
+ return;
+ }
+ this.companyList.splice(index, 1);
+ // 移除syncBusinessFromCompanyList调用,watch会处理
+ },
+
+ // 从公司职位列表同步到business对象
+ syncBusinessFromCompanyList() {
+ if (this.companyList && this.companyList.length > 0) {
+ this.business.unit = this.companyList.map(item => item.unit);
+ this.business.duties = this.companyList.map(item => item.duties);
+ }
+ }
+
}
}
</script>
<style>
.lxfx {
- height: 100rpx;
+ min-height: 100rpx;
align-items: center;
display: flex;
border-bottom: #dce3ec 1rpx solid;
@@ -608,7 +1003,7 @@
}
.biaoti {
- color: #37bde6;
+ color: #D41003;
font-size: 40rpx;
padding: 20rpx 0rpx;
}
@@ -657,6 +1052,83 @@
border-radius: 30rpx;
}
+ /* 名片预览样式优化 */
+ .business-card-preview {
+ position: sticky;
+ top: 0;
+ z-index: 99999;
+ overflow: visible;
+ border-radius: 30rpx;
+ margin: 20rpx;
+ background-color: #f5f5f5;
+ width: calc(100% - 40rpx);
+ min-height: 450rpx;
+ }
+
+ .card-backdrop {
+ border-radius: 30rpx;
+ }
+
+ .card-icon {
+ z-index: 10;
+ }
+
+ .card-text {
+ white-space: normal;
+ word-break: break-word;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ overflow: hidden;
+ max-width: 100%;
+ line-height: 1.5;
+ }
+
+ .card-scroll-unit,
+ .card-scroll-duties {
+ overflow: hidden;
+ overflow-y: auto;
+ background-color: transparent;
+ box-sizing: border-box;
+ }
+
+ .card-text-item {
+ word-break: break-word;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ white-space: normal;
+ padding: 2px 4px;
+ line-height: 1.5;
+ margin-bottom: 4px; /* 行间距 */
+ }
+
+ .card-avatar,
+ .card-logo {
+ overflow: hidden;
+ }
+
+ .card-avatar.avatar-circle {
+ border-radius: 50%;
+ }
+
+ .card-logo.logo-circle {
+ border-radius: 50%;
+ }
+
+ .card-avatar image,
+ .card-logo image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .picker-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 100rpx;
+ color: #333;
+ }
+
.anu {
position: fixed;
bottom: 0rpx;
@@ -668,45 +1140,94 @@
.tijiao {
width: 30%;
- background-color: #37bde6;
+ background-color: #D41003;
margin-left: 35%;
color: #fff;
}
-
+
.industry-popup {
padding: 20rpx;
}
-
+
.industry-title {
text-align: center;
font-size: 36rpx;
font-weight: bold;
margin-bottom: 20rpx;
- color: #37bde6;
+ color: #D41003;
}
-
+
.industry-item {
padding: 20rpx;
border-bottom: 1rpx solid #e5e5e5;
font-size: 32rpx;
}
-
+
.industry-item.selected {
- color: #37bde6;
+ color: #D41003;
}
-
+
.industry-item:active {
background-color: #f5f5f5;
}
-
+
/* 子行业样式 */
.industry-child {
background-color: #f8f8f8;
}
-
+
.industry-child-item {
padding-left: 60rpx;
font-size: 30rpx;
color: #666;
}
+
+ /* 公司职位样式 */
+ .company-item {
+ background-color: #f9f9f9;
+ border-radius: 12rpx;
+ padding: 20rpx;
+ margin-bottom: 20rpx;
+ }
+
+ .company-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16rpx;
+ padding-bottom: 12rpx;
+ border-bottom: 1rpx solid #e5e5e5;
+ }
+
+ .company-title {
+ font-size: 28rpx;
+ font-weight: bold;
+ color: #333;
+ }
+
+ .delete-btn {
+ font-size: 26rpx;
+ color: #fa3534;
+ padding: 4rpx 12rpx;
+ background-color: rgba(250, 53, 52, 0.1);
+ border-radius: 4rpx;
+ }
+
+ .add-company-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 24rpx;
+ margin-top: 20rpx;
+ border: 2rpx dashed #D41003;
+ border-radius: 12rpx;
+ color: #D41003;
+ font-size: 28rpx;
+ background-color: rgba(212, 16, 3, 0.05);
+ }
+
+ .add-company-btn .icon {
+ margin-right: 8rpx;
+ font-size: 32rpx;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.2