20261008
This commit is contained in:
@@ -1,224 +1,358 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>我的名片</span>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>我的名片</span>
|
||||
</div>
|
||||
<p class="text-main" v-if="parseInt(vk.getVuex('$user.userInfo.authStatus')) !== 1">请先完成认证</p>
|
||||
<template
|
||||
v-else-if="parseInt(vk.getVuex('$user.userInfo.authStatus')) === 1 && vk.getVuex('$user.userInfo.businessCard')">
|
||||
<div class="text-main flex justify-start items-center">
|
||||
<info theme="outline" size="18" fill="#a92924" strokeLinecap="square"
|
||||
style="height: 18px"/>
|
||||
<span v-if="parseInt(vk.getVuex('$user.userInfo.businessCard.status')) === 0">名片审核中</span>
|
||||
<span v-if="parseInt(vk.getVuex('$user.userInfo.businessCard.status')) === 2">名片审核失败: {{
|
||||
vk.getVuex('$user.userInfo.businessCard.refuseReason')
|
||||
}}</span>
|
||||
<span v-if="parseInt(vk.getVuex('$user.userInfo.businessCard.status')) === 1">名片审核通过</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 表单开始 -->
|
||||
<vk-data-form
|
||||
v-if="parseInt(vk.getVuex('$user.userInfo.authStatus')) === 1"
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:form-type="form1.props.formType"
|
||||
:columns='form1.props.columns'
|
||||
:loading.sync="form1.props.loading"
|
||||
label-width="140px"
|
||||
input-width="400px"
|
||||
:before-action="form1.props.beforeAction"
|
||||
:show-cancel="false"
|
||||
submit-text="保存名片"
|
||||
:submit-disabled="!!vk.getVuex('$user.userInfo.businessCard') && parseInt(vk.getVuex('$user.userInfo.businessCard.status')) === 0"
|
||||
>
|
||||
<!-- v-slot:editor 中的 editor 对应 columns中的 key, form对应 form1.data keyName 对应 columns中的 key -->
|
||||
<template v-slot:video="{ form, keyName }">
|
||||
<vk-data-upload v-model="form1.data.video" list-type="text" :limit="1"
|
||||
accept="video/*">
|
||||
</vk-data-upload>
|
||||
|
||||
</template>
|
||||
<template v-slot:album="{ form, keyName }">
|
||||
<vk-data-upload v-model="form1.data.album" list-type="picture-card"
|
||||
:limit="albumLimit"
|
||||
accept=".jpg,.jpeg,.png">
|
||||
</vk-data-upload>
|
||||
|
||||
</template>
|
||||
<template v-slot:productImageList="{ form, keyName }">
|
||||
<vk-data-upload v-model="form1.data.productImageList" list-type="picture-card"
|
||||
:limit="productImageLimit"
|
||||
accept=".jpg,.jpeg,.png">
|
||||
</vk-data-upload>
|
||||
|
||||
</template>
|
||||
<template v-slot:exampleImageList="{ form, keyName }">
|
||||
<vk-data-upload v-model="form1.data.exampleImageList" list-type="picture-card"
|
||||
:limit="productImageLimit"
|
||||
accept=".jpg,.jpeg,.png">
|
||||
</vk-data-upload>
|
||||
</template>
|
||||
<template v-slot:map="{ form, keyName }">
|
||||
<div class="mapDiv">
|
||||
<tdt-map :center="center" :zoom="zoom" @click="mapClick">
|
||||
<tdt-marker :position="[form1.data.longitude, form1.data.latitude]" :draggable="false"/>
|
||||
</tdt-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表单开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:form-type="form1.props.formType"
|
||||
:columns='form1.props.columns'
|
||||
:loading.sync="form1.props.loading"
|
||||
label-width="140px"
|
||||
input-width="400px"
|
||||
:before-action="form1.props.beforeAction"
|
||||
:show-cancel="false"
|
||||
submit-text="保存名片"
|
||||
@success="onFormSuccess"
|
||||
>
|
||||
<!-- v-slot:editor 中的 editor 对应 columns中的 key, form对应 form1.data keyName 对应 columns中的 key -->
|
||||
<!-- <template v-slot:editor="{ form, keyName }">
|
||||
<vk-data-input-editor v-model="form[keyName]" placeholder="开始输入" width="750px"></vk-data-input-editor>
|
||||
</template> -->
|
||||
|
||||
</vk-data-form>
|
||||
</el-card>
|
||||
</vk-data-form>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Info} from "@icon-park/vue";
|
||||
import MapInit from '@/util/MapInit'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
companyIntroduction: ''
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "no",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{
|
||||
type: 'group',
|
||||
columns: [
|
||||
{
|
||||
key: "logo",
|
||||
title: "Logo",
|
||||
type: "image",
|
||||
limit: 1
|
||||
},
|
||||
{
|
||||
key: "personalWechat",
|
||||
title: "个人微信",
|
||||
type: "image",
|
||||
limit: 1
|
||||
},
|
||||
{
|
||||
key: "companyWechat",
|
||||
title: "企业微信",
|
||||
type: "image",
|
||||
limit: 1
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
key: "position",
|
||||
title: "职位",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
key: "companyMobile",
|
||||
title: "公司电话",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
key: "managerMobile",
|
||||
title: "负责人电话",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
key: "address",
|
||||
title: "地区",
|
||||
type: "address"
|
||||
},
|
||||
{
|
||||
key: "addressDetail",
|
||||
title: "详细地址",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
key: "email",
|
||||
title: "邮箱",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
key: "website",
|
||||
title: "网址",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
key: "mainBusiness",
|
||||
title: "主营业务",
|
||||
type: "textarea"
|
||||
},
|
||||
{
|
||||
key: "companyIntroduction",
|
||||
title: "企业简介",
|
||||
type: "editor"
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
logo: [{
|
||||
required: true,
|
||||
message: "请上传Logo",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
personalWechat: [{
|
||||
required: true,
|
||||
message: "请上传个人微信",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
companyWechat: [{
|
||||
required: true,
|
||||
message: "请上传企业微信",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
personName: [{
|
||||
required: true,
|
||||
message: "姓名不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
position: [{
|
||||
required: true,
|
||||
message: "职位不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
address: [{
|
||||
required: true,
|
||||
message: "地区不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
addressDetail: [{
|
||||
required: true,
|
||||
message: "详细地址不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
email: [{
|
||||
required: true,
|
||||
message: "邮箱不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
// website: [{
|
||||
// required: true,
|
||||
// message: "logo不能为空",
|
||||
// trigger: ['blur', 'change']
|
||||
// }],
|
||||
mainBusiness: [{
|
||||
required: true,
|
||||
message: "主营业务不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
mainSpotCategoryIds: [{
|
||||
required: true,
|
||||
message: "主营商品不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "update",
|
||||
// 表单是否在请求中
|
||||
loading: false,
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
beforeAction: (formData) => {
|
||||
vk.callFunction({
|
||||
url: 'client/user/kh/addAuth',
|
||||
data: {
|
||||
businessCard: formData
|
||||
},
|
||||
success: (data) => {
|
||||
// 成功后的逻辑
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '保存成功'
|
||||
})
|
||||
}
|
||||
});
|
||||
return false;
|
||||
},
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUserInfo()
|
||||
},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
vk.userCenter.getCurrentUserInfo({
|
||||
success: (data) => {
|
||||
if (data.userInfo.businessCard) {
|
||||
this.form1.data = data.userInfo.businessCard
|
||||
}
|
||||
// 成功后的逻辑
|
||||
console.log('用户信息: ', data);
|
||||
}
|
||||
});
|
||||
|
||||
components: {Info},
|
||||
data() {
|
||||
return {
|
||||
T: null,
|
||||
tMap: null,
|
||||
userInfo: {
|
||||
accountType: 1,
|
||||
userLevel: -1,
|
||||
},
|
||||
productImageLimit: 2,
|
||||
albumLimit: 2,
|
||||
dialogVisible: false,
|
||||
center: [108.358150, 22.826820],
|
||||
zoom: 12,
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
companyIntroduction: '',
|
||||
video: '',
|
||||
longitude: 108.358150,
|
||||
latitude: 22.826820,
|
||||
album: [],
|
||||
productImageList: [],
|
||||
exampleImageList: [],
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "no",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{
|
||||
type: 'group',
|
||||
columns: [
|
||||
{
|
||||
key: "logo",
|
||||
title: "Logo",
|
||||
type: "image",
|
||||
limit: 1
|
||||
},
|
||||
{
|
||||
key: "personalWechat",
|
||||
title: "个人微信",
|
||||
type: "image",
|
||||
limit: 1
|
||||
},
|
||||
{
|
||||
key: "companyWechat",
|
||||
title: "企业微信",
|
||||
type: "image",
|
||||
limit: 1,
|
||||
showRule: (formData) => {
|
||||
console.log('formData', this.userInfo)
|
||||
return parseInt(this.userInfo.accountType) === 2
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
key: "position",
|
||||
title: "职位",
|
||||
type: "text",
|
||||
showRule: (formData) => {
|
||||
return parseInt(this.userInfo.accountType) !== 2
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "companyMobile",
|
||||
title: "公司电话",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
key: "managerMobile",
|
||||
title: "负责人电话",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
key: "address",
|
||||
title: "地区",
|
||||
type: "address"
|
||||
},
|
||||
{
|
||||
key: "addressDetail",
|
||||
title: "详细地址",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
key: "email",
|
||||
title: "有效邮箱",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
key: "website",
|
||||
title: "网址",
|
||||
type: "text",
|
||||
showRule: (formData) => {
|
||||
return parseInt(this.userInfo.accountType) === 2 && parseInt(this.userInfo.userLevel) > 2
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "companyIntroduction",
|
||||
title: "企业简介",
|
||||
type: "editor"
|
||||
},
|
||||
{
|
||||
key: "video",
|
||||
title: "视频",
|
||||
type: "html",
|
||||
showRule: (formData) => {
|
||||
return parseInt(this.userInfo.accountType) === 2 && parseInt(this.userInfo.userLevel) > 2
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "album",
|
||||
title: `首页大图`,
|
||||
type: "html",
|
||||
},
|
||||
{
|
||||
key: "productImageList",
|
||||
title: `产品展示`,
|
||||
type: "html",
|
||||
},
|
||||
{
|
||||
key: "exampleImageList",
|
||||
title: `案例展示`,
|
||||
type: "html",
|
||||
},
|
||||
{
|
||||
key: "map",
|
||||
title: `地图定位`,
|
||||
type: "html",
|
||||
showRule: (formData) => {
|
||||
return parseInt(this.userInfo.accountType) === 2 && parseInt(this.userInfo.userLevel) > 1
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
logo: [{
|
||||
required: true,
|
||||
message: "请上传Logo",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
personalWechat: [{
|
||||
required: true,
|
||||
message: "请上传个人微信",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
personName: [{
|
||||
required: true,
|
||||
message: "姓名不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
address: [{
|
||||
required: true,
|
||||
message: "地区不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
addressDetail: [{
|
||||
required: true,
|
||||
message: "详细地址不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
email: [{
|
||||
required: true,
|
||||
message: "邮箱不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
// website: [{
|
||||
// required: true,
|
||||
// message: "logo不能为空",
|
||||
// trigger: ['blur', 'change']
|
||||
// }],
|
||||
mainBusiness: [{
|
||||
required: true,
|
||||
message: "主营业务不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
mainSpotCategoryIds: [{
|
||||
required: true,
|
||||
message: "主营商品不能为空",
|
||||
trigger: ['blur', 'change']
|
||||
}],
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "update",
|
||||
// 表单是否在请求中
|
||||
loading: false,
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
beforeAction: (formData) => {
|
||||
vk.callFunction({
|
||||
url: 'client/user/kh/addAuth',
|
||||
data: {
|
||||
businessCard: {...formData, status: 0},
|
||||
isBusinessCard: true
|
||||
},
|
||||
success: (data) => {
|
||||
// 成功后的逻辑
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '提交成功,新信息将在审核通过后显示',
|
||||
duration: 5000
|
||||
})
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
return false;
|
||||
},
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUserInfo()
|
||||
|
||||
},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
vk.userCenter.getCurrentUserInfo({
|
||||
success: (data) => {
|
||||
if (data.userInfo.businessCard) {
|
||||
this.form1.data = data.userInfo.businessCard
|
||||
}
|
||||
for (let key in this.userInfo) this.userInfo[key] = data.userInfo[key]
|
||||
if (!data.userInfo.businessCard) {
|
||||
if (this.userInfo.company.mobile) this.form1.data.companyMobile = this.userInfo.company.mobile
|
||||
if (this.userInfo.manager.mobile) this.form1.data.managerMobile = this.userInfo.manager.mobile
|
||||
if (this.userInfo.company.email) this.form1.data.email = this.userInfo.company.email
|
||||
} else {
|
||||
if (data.userInfo.businessCard.album && !Array.isArray(data.userInfo.businessCard.album)) this.form1.data.album = [data.userInfo.businessCard.album]
|
||||
}
|
||||
if (!this.form1.data.longitude) this.form1.data.longitude = 108.358150
|
||||
if (!this.form1.data.latitude) this.form1.data.latitude = 22.826820
|
||||
|
||||
if (this.userInfo.userLevel === 0) {
|
||||
this.albumLimit = 1
|
||||
this.productImageLimit = 2
|
||||
} else if (this.userInfo.userLevel === 1) {
|
||||
this.albumLimit = 2
|
||||
this.productImageLimit = 4
|
||||
} else if (this.userInfo.userLevel === 2) {
|
||||
this.albumLimit = 2
|
||||
this.productImageLimit = 12
|
||||
} else if (this.userInfo.userLevel > 2) {
|
||||
this.albumLimit = 4
|
||||
if (this.userInfo.userLevel > 3) {
|
||||
this.albumLimit = 6
|
||||
}
|
||||
this.productImageLimit = 30
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
mapClick({type, lnglat}) {
|
||||
if (type === "click") {
|
||||
this.form1.data.longitude = parseFloat(lnglat.lng);
|
||||
this.form1.data.latitude = parseFloat(lnglat.lat);
|
||||
this.$message.success("已选择");
|
||||
console.log(this.form1.data.longitude, this.form1.data.latitude)
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.mapDiv {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user