From 0d04d60f456b1902c1e27b9586652649df3963d4 Mon Sep 17 00:00:00 2001
From: quanwei <419654421@qq.com>
Date: Tue, 11 Nov 2025 18:33:51 +0800
Subject: [PATCH] 名片联盟币支付(前端)
---
mobile/pages/plus/business/add.vue | 1183 +++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 750 insertions(+), 433 deletions(-)
diff --git a/mobile/pages/plus/business/add.vue b/mobile/pages/plus/business/add.vue
index dc91edb..f3e00fc 100644
--- a/mobile/pages/plus/business/add.vue
+++ b/mobile/pages/plus/business/add.vue
@@ -1,495 +1,812 @@
<template>
<view>
- <header-bar title="编辑名片" :isBack="true" @click="back"></header-bar>
- <scroll-view scroll-y="true" class="scroll-view">
- <!-- 名片预览区域 -->
- <view class="preview-section">
- <view class="preview-title">名片预览</view>
- <view class="preview-card" :style="previewStyle">
- <image v-if="business.background_image" class="preview-bg" :src="business.background_image" mode="aspectFill"></image>
- <view class="preview-content">
- <image v-if="file_path" class="preview-avatar" :src="file_path" mode="aspectFill"></image>
- <view class="preview-info">
- <view class="preview-name">{{business.real_name || '姓名'}}</view>
- <view class="preview-company">{{business.company_name || '公司名称'}}</view>
- <view class="preview-position">{{business.position || '职位'}}</view>
- </view>
- </view>
+ <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>
-
- <!-- 模板选择 -->
- <view class="template-section">
- <view class="section-title">选择模板</view>
- <scroll-view scroll-x="true" class="template-scroll">
- <view class="template-item" v-for="(template, index) in templateList" :key="index"
- :class="{active: template_id === template.template_id}" @click="selectTemplate(index)">
- <image class="template-img" :src="template.preview_image" mode="aspectFill"></image>
- </view>
- </scroll-view>
- </view>
-
- <!-- 表单内容 -->
- <form @submit="submitForm" class="form-section">
- <!-- 基本信息 -->
- <view class="form-group">
- <view class="group-title">基本信息</view>
-
- <!-- 头像上传 -->
- <view class="form-item" v-if="avatar_display">
- <view class="item-label">头像</view>
- <view class="upload-area" @click="uploadImage('avatar')">
- <image v-if="file_path" class="upload-img" :src="file_path" mode="aspectFill"></image>
- <view v-else class="upload-placeholder">
- <text class="icon iconfont icon-camera"></text>
- <text>上传头像</text>
+ <view 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">
+ </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 class="form-item">
- <view class="item-label">姓名</view>
- <input type="text" class="item-input" v-model="business.real_name" placeholder="请输入姓名" name="real_name" />
+ </view>
+ <view class="grxx" @click="is_avatar=true" v-show="avatar_display==1" style="overflow: hidden;">
+ <view class="biaoti">
+ 头像
</view>
-
- <!-- 公司名称 -->
- <view class="form-item">
- <view class="item-label">公司名称</view>
- <input type="text" class="item-input" v-model="business.company_name" placeholder="请输入公司名称" name="company_name" />
+ <view 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 class="form-item">
- <view class="item-label">职位</view>
- <input type="text" class="item-input" v-model="business.position" placeholder="请输入职位" name="position" />
+ </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>
- <!-- 公司Logo -->
- <view class="form-item" v-if="logo_display">
- <view class="item-label">公司Logo</view>
- <view class="upload-area" @click="uploadImage('logo')">
- <image v-if="logo_path" class="upload-img" :src="logo_path" mode="aspectFill"></image>
- <view v-else class="upload-placeholder">
- <text class="icon iconfont icon-camera"></text>
- <text>上传Logo</text>
+ <view 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 class="form-group">
- <view class="group-title">联系方式</view>
-
- <!-- 手机号 -->
- <view class="form-item">
- <view class="item-label">手机号</view>
- <input type="number" class="item-input" v-model="business.phone" placeholder="请输入手机号" name="phone" />
+ <view style="padding-bottom: 120rpx;">
+ <view class="biaoti">
+ 详细信息
</view>
-
- <!-- 备用电话 -->
- <view class="form-item">
- <view class="item-label">备用电话</view>
- <input type="number" class="item-input" v-model="business.mobile" placeholder="请输入备用电话" name="mobile" />
- </view>
-
- <!-- 邮箱 -->
- <view class="form-item">
- <view class="item-label">邮箱</view>
- <input type="text" class="item-input" v-model="business.email" placeholder="请输入邮箱" name="email" />
- </view>
-
- <!-- 地址 -->
- <view class="form-item">
- <view class="item-label">地址</view>
- <input type="text" class="item-input" v-model="business.address" placeholder="请输入地址" name="address" />
+ <view>
+ <view 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="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="请输入个人或公司简介" name="Introduction" v-model="business.Introduction"
+ class="lxfxneirong" :auto-height="true"></textarea>
+ </view>
+ </view>
</view>
</view>
-
- <!-- 详细信息 -->
- <view class="form-group">
- <view class="group-title">详细信息</view>
-
- <!-- 个人简介 -->
- <view class="form-item">
- <view class="item-label">个人简介</view>
- <textarea class="item-textarea" v-model="business.intro" placeholder="请输入个人简介" name="intro" />
- </view>
-
- <!-- 业务范围 -->
- <view class="form-item">
- <view class="item-label">业务范围</view>
- <textarea class="item-textarea" v-model="business.business_scope" placeholder="请输入业务范围" name="business_scope" />
- </view>
+ <view 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>
-
- <!-- 保存按钮 -->
- <view class="submit-section">
- <button form-type="submit" class="submit-btn">保存</button>
- </view>
- </form>
- </scroll-view>
-
- <!-- 上传图片组件 -->
- <Upload v-if="isUpload" @getImgs="handleUpload" @close="closeUpload"></Upload>
+ <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>
</template>
<script>
+ import Popup from '@/components/uni-popup.vue';
import Upload from '@/components/upload/uploadOne.vue';
+ import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
components: {
- Upload
+ Upload,
+ Popup,
+ mpvueCityPicker
},
data() {
return {
+ // 模板相关
+ templateList: [], // 模板列表
+ templateShow: false, // 模板弹窗显示状态
+ template_id: 0, // 当前选中的模板ID
+ templateIndex: 0, // 当前选中的模板索引
+ // 业务数据
business: {
- real_name: '',
- company_name: '',
- position: '',
- phone: '',
- mobile: '',
- email: '',
- address: '',
- intro: '',
- business_scope: '',
- background_image: ''
+ 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
},
- templateList: [],
- template_id: '',
- file_id: '',
- file_path: '',
- logo_id: '',
- logo_path: '',
- business_card_id: '',
- avatar_display: true,
- logo_display: true,
- isUpload: false,
- uploadType: '',
- previewStyle: {}
- };
- },
- onLoad(options) {
- if (options.business_card_id) {
- this.business_card_id = options.business_card_id;
- this.getBusinessDetail();
+ // 名片类型
+ 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, // 头像宽度
+ // 显示控制
+ 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: [] // 区域数据
}
- this.getTemplateList();
+ },
+ onLoad(e) {
+ if (e.business_card_id) {
+ uni.setNavigationBarTitle({
+ title: '编辑名片'
+ })
+ this.business_card_id = e.business_card_id
+ this.getBusiness(e.business_card_id)
+ }
+ this.getTemplate();
+ this.getIndustryList();
+ this.getIlkList();
+ // 初始化区域选择器数据
+ this.initRegionData();
},
methods: {
- back() {
- uni.navigateBack();
- },
- // 获取模板列表
- getTemplateList() {
- let _this = this;
- uni.getSystemInfo({ success: function(res) { _this.systemInfo = res; } });
- _this._post('plus.business/template/getList', { screenWidth: _this.systemInfo.screenWidth }, function(res) {
- _this.templateList = res.data;
- if (_this.templateList.length > 0 && !_this.template_id) {
- _this.template_id = _this.templateList[0].template_id;
- _this.selectTemplate(0);
+ // 打开地图选择地址 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();
}
});
},
- // 获取名片详情
- getBusinessDetail() {
+
+ // 获取掉省市区 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
+ },
+ industryClose() {
+ this.industryShow = !this.industryShow
+ },
+ getIndustryList() {
let _this = this;
- _this._post('plus.business/business/detail', { business_card_id: _this.business_card_id }, function(res) {
+ this._post('plus.business.industry/getIndustryTree', {}, res => {
if (res.data) {
- _this.business = res.data;
- _this.template_id = res.data.template_id;
- _this.file_id = res.data.file_id;
- _this.file_path = res.data.file_path || '';
- _this.logo_id = res.data.logo_id;
- _this.logo_path = res.data.logo_path || '';
- // 找到对应模板并应用样式
- _this.templateList.forEach((template, index) => {
- if (template.template_id === _this.template_id) {
- _this.selectTemplate(index);
+ _this.industryList = res.data.tree;
+ }
+ })
+ },
+ selectIndustry(e) {
+ const industryId = e.target.dataset.id;
+ console.log(industryId);
+ this.business.industry_id = industryId;
+ // 查找选中的行业名称
+ this.findIndustryName(this.industryList, industryId);
+ this.industryShow = false;
+ },
+ findIndustryName(industryList, industryId) {
+ for (let item of industryList) {
+ if (item.industry_id == industryId) {
+ this.industryNmae = item.name;
+ return;
+ }
+ if (item.child && item.child.length > 0) {
+ for (let child of item.child) {
+ if (child.industry_id == industryId) {
+ this.industryNmae = child.name;
+ return;
}
- });
+ }
+ }
+ }
+ },
+ // 初始化区域数据
+ initRegionData() {
+ let self = this;
+ self._get('settings/getRegion', {}, function(res) {
+ if (res.data) {
+ self.province = res.data.regionData[0];
+ self.city = res.data.regionData[1];
+ self.area = res.data.regionData[2];
+ self.is_load = true;
}
});
},
- // 选择模板
- selectTemplate(index) {
- const template = this.templateList[index];
- this.template_id = template.template_id;
- // 应用模板样式
- this.avatar_display = template.style?.avatar?.display !== false;
- this.logo_display = template.style?.logo?.display !== false;
- this.previewStyle = {
- backgroundColor: template.style?.background?.color || '#37bde6',
- color: template.style?.text?.color || '#fff'
- };
- // 如果有背景图优先级高于背景色
- if (template.background_image) {
- this.business.background_image = template.background_image;
- }
+ // 显示区域选择器
+ showMulLinkageThreePicker() {
+ this.$refs.mpvueCityPicker.show();
},
- // 上传图片
- uploadImage(type) {
- this.uploadType = type;
- this.isUpload = true;
+ // 选择区域后的回调
+ onConfirm(e) {
+ this.region = e.label.split(' ');
+ this.selectCity = e.label;
+ this.business.province_id = e.cityCode[0];
+ this.business.city_id = e.cityCode[1];
+ this.business.region_id = e.cityCode[2];
},
- // 处理上传结果
- handleUpload(data) {
- if (data && data.length > 0) {
- const file = data[0];
- if (this.uploadType === 'avatar') {
- this.file_id = file.file_id;
- this.file_path = file.file_path;
- } else if (this.uploadType === 'logo') {
- this.logo_id = file.file_id;
- this.logo_path = file.file_path;
- }
- }
- this.closeUpload();
- },
- // 关闭上传组件
- closeUpload() {
- this.isUpload = false;
- this.uploadType = '';
- },
- // 表单提交
- submitForm(e) {
- const formData = e.detail.value;
-
- // 表单验证
- if (!formData.real_name) {
- this.showError('请输入姓名');
- return false;
- }
- if (!formData.phone) {
- this.showError('请输入手机号');
- return false;
- }
-
- // 组装提交数据
- const submitData = {
- ...formData,
- template_id: this.template_id,
- file_id: this.file_id,
- logo_id: this.logo_id
- };
-
- // 判断是新增还是编辑
- let url = 'plus.business/business/add';
- if (this.business_card_id) {
- url = 'plus.business/business/edit';
- submitData.business_card_id = this.business_card_id;
- }
-
- // 提交表单
+ sjh(e) {
let _this = this;
- _this._post(url, submitData, function(res) {
- _this.showSuccess(res.msg, function() {
- uni.navigateBack();
+ let mobile = e.detail.value.split('/');
+ if (mobile.length > 2) {
+ this.showError('最多只能添加两个', function() {
+ _this.mobile = mobile[0] + '/' + mobile[1]
});
- });
- }
+ return false
+ }
+ console.log(mobile)
+ this.business.mobile = mobile[0]
+ this.business.mobile_phone = mobile[1]
+ },
+ jw(e) {
+ let duties = e.detail.value.split('/');
+ if (duties.length > 3) {
+ this.showError('最多只能添加三个');
+ return false
+ }
+ 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
+ }
+ },
+ 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;
+ this._post('plus.business.template/getList', {
+ screenWidth: systemInfo.screenWidth
+ }, res => {
+ this.templateList = res.data;
+ this.template_id ? '' : this.template_id = this.templateList[0].template_id
+ _this.avatar_display = this.templateList[0].style.avatar.display;
+ _this.is_business = this.templateList[0].style.is_business;
+ _this.logo_display = this.templateList[0].style.logo.display;
+ _this.templateList.forEach(function(res, index) {
+ if (res.template_id == _this.template_id) {
+ _this.radioChange(index)
+ }
+ })
+
+ /* uni.getImageInfo({
+ src: _this.logo_path,
+ success: function(image) {
+ console.log(image);
+ _this.logo_width=image.width
+ _this.logo_height=image.height
+ _this.templateList.forEach(function(res, index) {
+ let typel = _this.templateList[index].style.logo,
+ px = _this.templateList[index].px;
+ _this.templateList[index].style.logo.width = (image.width * px)
+ _this.templateList[index].style.logo.height = (image.height * px)
+ })
+ }
+
+ }); */
+ console.log(_this.templateList);
+ })
+ },
+ getBusiness(business_card_id) {
+ let _this = this;
+ this._post('plus.business.business/detail', {
+ business_card_id: business_card_id
+ }, res => {
+ if (res.data) {
+ this.business = res.data;
+ this.template_id = res.data.template_id;
+ this.unit = res.data.unit;
+ this.position = res.data.position;
+ this.mobile = this.business.mobile + (this.business.mobile_phone ? '/' + this.business
+ .mobile_phone : '');
+ this.business.duties.forEach(function(item, index) {
+ _this.duties = _this.duties + (item ? (index != 0 ? '/' + item : item) : '');
+ })
+ this.file_id = res.data.file_id;
+ this.logo_id = res.data.logo
+ 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) {
+ // 先等待行业列表加载完成再查找名称
+ if (this.industryList && this.industryList.length > 0) {
+ this.findIndustryName(this.industryList, this.business.industry_id);
+ } else {
+ // 如果行业列表还没加载完成，先获取列表再查找
+ this._post('plus.business.industry/getIndustryTree', {}, res => {
+ if (res.data) {
+ _this.industryList = res.data.tree;
+ _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();
+
+ }
+ })
+ },
+ add(e) {
+ let formDate = e.detail.value;
+ formDate.template_id = this.template_id;
+ /* formDate.unit=this.business.unit;
+ formDate.duties=this.business.duties;
+ formDate.address=this.business.address; */
+ console.log(formDate);
+ let url = 'plus.business.business/add'
+ if (this.business_card_id) {
+ url = 'plus.business.business/edit'
+ Object.assign(formDate, {
+ business_card_id: this.business_card_id,
+ })
+ }
+ this._post(url, formDate, res => {
+ this.showSuccess(res.msg, res => {
+ uni.navigateBack()
+ })
+ })
+ },
+ radioChange(e) {
+ let templateList = this.templateList[e];
+ //style = JSON.parse(templateList.style);
+ this.template_id = templateList.template_id;
+ this.template_id = templateList.template_id;
+ this.templateIndex = e;
+ this.unit = templateList.style.unit;
+ this.positionNum = templateList.style.positionNum;
+ this.position = templateList.style.position;
+ this.avatar_display = templateList.style.avatar.display;
+ this.logo_display = templateList.style.logo.display;
+ this.is_business = templateList.style.is_business;
+ },
+
}
- };
+ }
</script>
-<style lang="scss">
- .scroll-view {
- height: calc(100vh - 80rpx);
+<style>
+ .lxfx {
+ height: 100rpx;
+ align-items: center;
+ display: flex;
+ border-bottom: #dce3ec 1rpx solid;
+ padding: 10rpx 0;
}
- .preview-section {
- background: #fff;
- padding: 30rpx;
+ .mpxz {
+ width: 25%;
+ margin-right: 2%;
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 120rpx;
+ }
+
+ .zjc {
+ z-index: 2;
+ background-color: #0000008f;
+ height: 120rpx;
+ position: absolute;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 10rpx;
+ }
+
+ .mpxz-image {
+ height: 100rpx;
+ width: 93%;
+ border-radius: 10rpx;
+ }
+
+ .fds {
+ padding: 0rpx 20rpx;
+ background-color: #fff;
+ }
+
+ .toxian {
+ margin-top: 10rpx;
+ width: 170rpx;
+ height: 170rpx;
+ float: left;
+ }
+
+ .xinxx {
+ height: 50rpx;
+ margin-top: 17rpx;
+ }
+
+ .shurubiaoti {
+ width: 20%;
+ text-align: right;
+ display: inline-block;
+ line-height: 50rpx;
+ }
+
+ .shurunrr {
+ display: inline-block;
+ height: 50rpx;
+ width: calc(80% - 180rpx);
+ }
+
+ .shuruneirong {
+ display: flex;
+ line-height: 50rpx;
+ }
+
+ .biaoti {
+ color: #D41003;
+ font-size: 40rpx;
+ padding: 20rpx 0rpx;
+ }
+
+ .logo {
+ height: 100rpx;
+ margin-left: 30rpx;
+ }
+
+ .lxfxbiaoti {
+ display: inline-block;
+ }
+
+ .lxfxnrr {
+ width: 80%;
+ display: inline-flex;
+ height: 100%;
+ }
+
+ .lxfxneirong {
+ height: 100%;
+ width: 100%;
+ }
+
+ .xzmc {
+ line-height: 50rpx;
+ }
+
+ .xz {
+ border: 1rpx solid #cbd4de;
+ width: 50%;
+ line-height: 50rpx;
+ text-align: center;
+ display: inline-block;
+ color: #777b80;
+ }
+
+ .scroll-mpmb {
+ height: 1000rpx;
+ margin-top: 20rpx;
+ }
+
+ .tup {
+ height: 450rpx;
+ width: 90%;
+ border-radius: 30rpx;
+ }
+
+ .picker-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 100rpx;
+ color: #333;
+ }
+
+ .anu {
+ position: fixed;
+ bottom: 0rpx;
+ width: 100%;
+ padding: 10rpx 0rpx;
+ background-color: #fff;
+ z-index: 99;
+ }
+
+ .tijiao {
+ width: 30%;
+ 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;
-
- .preview-title {
- font-size: 32rpx;
- font-weight: bold;
- color: #333;
- margin-bottom: 20rpx;
- }
-
- .preview-card {
- height: 400rpx;
- border-radius: 20rpx;
- overflow: hidden;
- position: relative;
-
- .preview-bg {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 1;
- }
-
- .preview-content {
- position: relative;
- z-index: 2;
- display: flex;
- align-items: center;
- padding: 40rpx;
- color: #fff;
-
- .preview-avatar {
- width: 150rpx;
- height: 150rpx;
- border-radius: 50%;
- border: 4rpx solid #fff;
- }
-
- .preview-info {
- margin-left: 30rpx;
-
- .preview-name {
- font-size: 44rpx;
- font-weight: bold;
- margin-bottom: 10rpx;
- }
-
- .preview-company {
- font-size: 32rpx;
- margin-bottom: 8rpx;
- opacity: 0.9;
- }
-
- .preview-position {
- font-size: 28rpx;
- opacity: 0.8;
- }
- }
- }
- }
+ color: #D41003;
}
- .template-section {
- background: #fff;
- padding: 30rpx;
- margin-bottom: 20rpx;
-
- .section-title {
- font-size: 32rpx;
- font-weight: bold;
- color: #333;
- margin-bottom: 20rpx;
- }
-
- .template-scroll {
- white-space: nowrap;
- padding-bottom: 10rpx;
-
- .template-item {
- display: inline-block;
- width: 200rpx;
- height: 140rpx;
- margin-right: 20rpx;
- border-radius: 10rpx;
- overflow: hidden;
- border: 2rpx solid transparent;
-
- &.active {
- border-color: #37bde6;
- }
-
- .template-img {
- width: 100%;
- height: 100%;
- }
- }
- }
+ .industry-item {
+ padding: 20rpx;
+ border-bottom: 1rpx solid #e5e5e5;
+ font-size: 32rpx;
}
- .form-section {
- background: #fff;
- padding: 30rpx;
+ .industry-item.selected {
+ color: #D41003;
+ }
- .form-group {
- margin-bottom: 40rpx;
+ .industry-item:active {
+ background-color: #f5f5f5;
+ }
- .group-title {
- font-size: 32rpx;
- font-weight: bold;
- color: #333;
- margin-bottom: 20rpx;
- }
+ /* 子行业样式 */
+ .industry-child {
+ background-color: #f8f8f8;
+ }
- .form-item {
- display: flex;
- align-items: center;
- padding: 20rpx 0;
- border-bottom: 1rpx solid #f0f0f0;
-
- .item-label {
- width: 160rpx;
- font-size: 28rpx;
- color: #666;
- }
-
- .item-input {
- flex: 1;
- font-size: 28rpx;
- color: #333;
- padding: 0;
- }
-
- .item-textarea {
- flex: 1;
- font-size: 28rpx;
- color: #333;
- padding: 0;
- height: 150rpx;
- text-align: left;
- }
-
- .upload-area {
- width: 150rpx;
- height: 150rpx;
- border-radius: 10rpx;
- overflow: hidden;
- background: #f5f5f5;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .upload-img {
- width: 100%;
- height: 100%;
- }
-
- .upload-placeholder {
- text-align: center;
-
- .icon {
- font-size: 48rpx;
- color: #999;
- margin-bottom: 10rpx;
- }
-
- text {
- font-size: 24rpx;
- color: #999;
- }
- }
- }
- }
-
- .submit-section {
- margin-top: 60rpx;
- margin-bottom: 40rpx;
-
- .submit-btn {
- width: 100%;
- background: #37bde6;
- color: #fff;
- border: none;
- border-radius: 10rpx;
- padding: 28rpx 0;
- font-size: 32rpx;
- font-weight: bold;
- }
- }
+ .industry-child-item {
+ padding-left: 60rpx;
+ font-size: 30rpx;
+ color: #666;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.2