Files
jjx-wap-sign-only/components/user/card.vue
T
2026-10-08 18:36:23 +08:00

771 lines
31 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template> <!-- 我的名片 -->
<view>
<view class="layout layout-card">
<view class="card-title m-top-10">我的名片</view>
<template v-if="userInfo.authStatus === 0">
<text class="text-25 text-main">请先完成认证</text>
</template>
<template v-else>
<view class="card-body" v-if="userInfo">
<!-- 基础信息 -->
<view class="company flex m-top-20 justify-around">
<view class="logo">
<!-- <image class="full" src="/static/img/company.png" mode=""></image> -->
<u-upload
:disabled="!isInput"
:deletable="isInput"
:fileList="logo"
@afterRead="afterRead($event, 'logo')"
@delete="deletePic($event, 'logo')"
:maxCount="1"
width="120rpx"
height="120rpx"
></u-upload>
<u--text align="center" size="12" text="Logo"></u--text>
</view>
<view class="logo mx-25">
<!-- <image class="full" src="/static/img/company.png" mode=""></image> -->
<u-upload
:disabled="!isInput"
:deletable="isInput"
:fileList="personalWechat"
@afterRead="afterRead($event, 'personalWechat')"
@delete="deletePic($event, 'personalWechat')"
:maxCount="1"
width="120rpx"
height="120rpx"
></u-upload>
<u--text align="center" size="12" text="个人微信"></u--text>
</view>
<view class="logo" v-if="userInfo.accountType === 2">
<!-- <image class="full" src="/static/img/company.png" mode=""></image> -->
<u-upload
:disabled="!isInput"
:deletable="isInput"
:fileList="companyWechat"
@afterRead="afterRead($event, 'companyWechat')"
@delete="deletePic($event, 'companyWechat')"
:maxCount="1"
width="120rpx"
height="120rpx"
></u-upload>
<u--text align="center" size="12" text="企业微信"></u--text>
</view>
</view>
<view class="detail flex-1 p-left-20">
<view class="p flex justify-start align-center">
<view class="lb flex justify-start align-center">
<u-icon name="phone" size="18"></u-icon>
<view class="text">公司电话:</view>
</view>
<!-- <u--text prefixIcon="phone" iconStyle="font-size: 19px" text="电话:"></u--text> -->
<view class="vl flex-1">
<u--input v-if="isInput" v-model="userInfo.businessCard.companyMobile"
placeholder="请输入内容"></u--input>
<text v-else>{{ userInfo.businessCard.companyMobile }}</text>
</view>
</view>
</view>
<view class="detail flex-1 p-left-20">
<view class="p flex justify-start align-center">
<view class="lb flex justify-start align-center">
<u-icon name="phone" size="18"></u-icon>
<view class="text">负责人电话:</view>
</view>
<!-- <u--text prefixIcon="phone" iconStyle="font-size: 19px" text="电话:"></u--text> -->
<view class="vl flex-1">
<u--input v-if="isInput" v-model="userInfo.businessCard.managerMobile"
placeholder="请输入内容"></u--input>
<text v-else>{{ userInfo.businessCard.managerMobile }}</text>
</view>
</view>
</view>
<view class="detail flex-1 p-left-20" v-if="userInfo.accountType === 1">
<view class="p flex justify-start align-center m-top-10">
<view class="lb flex justify-start align-center">
<u-icon name="account" size="18"></u-icon>
<view class="text">职位:</view>
</view>
<template v-if="isInput">
<template>
<view class="m-right-30"></view>
<u--input v-if="isInput" v-model="userInfo.businessCard.position"
placeholder="请输入职位"></u--input>
</template>
</template>
<template v-else>
<text class="xm p-left-10">{{ userInfo.businessCard.managerMobile }}</text>
<text class="job p-left-20" v-if="userInfo.accountType === 1">
{{ userInfo.businessCard.position }}
</text>
</template>
</view>
</view>
<!-- 联系信息 -->
<view class="detail m-top-10">
<view class="p flex justify-start align-center">
<view class="lb flex justify-start align-center">
<u-icon name="map" size="18"></u-icon>
<view class="text">地址:</view>
</view>
<view class="vl flex-1" @click="showAddress">
<u--input
v-if="isInput"
placeholder="请选择地址"
v-model="addressRegion"
suffixIcon="arrow-down"
suffixIconStyle="color: #999;font-size:28rpx"
:disabled="true"
disabledColor="#fff"
style="pointer-events:none"
></u--input>
<text v-else-if="!isInput && userInfo.businessCard.address">{{
userInfo.businessCard.address.province.name
}}{{ userInfo.businessCard.address.city.name }}{{
userInfo.businessCard.address.area.name
}}{{ userInfo.businessCard.addressDetail }}
</text>
</view>
</view>
<view v-if="isInput" class="p flex justify-start align-center">
<view class="lb"></view>
<view class="vl flex-1">
<u--input v-if="isInput" v-model="userInfo.businessCard.addressDetail"
placeholder="请输入详细地址"></u--input>
</view>
</view>
<view class="p flex justify-start align-center">
<view class="lb flex justify-start align-center">
<u-icon name="email" size="18"></u-icon>
<view class="text">邮箱:</view>
</view>
<view class="vl flex-1">
<u--input v-if="isInput" v-model="userInfo.businessCard.email"
placeholder="请输入内容"></u--input>
<text v-else>{{ userInfo.businessCard.email }}</text>
</view>
</view>
<view class="p flex justify-start align-center"
v-if="userInfo.accountType === 2 && parseInt(this.userInfo.userLevel) > 2">
<view class="lb flex justify-start align-center">
<u-icon name="ie" size="18"></u-icon>
<view class="text">网址:</view>
</view>
<view class="vl flex-1">
<u--input v-if="isInput" v-model="userInfo.businessCard.website"
placeholder="请输入内容"></u--input>
<u--text v-else mode="link" :text="userInfo.businessCard.website"
:href="userInfo.businessCard.website"></u--text>
</view>
</view>
<view class="p flex justify-start align-center"
v-if="userInfo.accountType === 2 && parseInt(this.userInfo.userLevel) > 2">
<view class="lb flex justify-start align-center">
<u-icon name="play-circle-fill" size="18"></u-icon>
<view class="text">视频:</view>
</view>
<view class="vl flex-1">
<u-upload
accept="video"
:fileList="userInfo.businessCard.video"
@afterRead="afterReadVideo"
@delete="deletePicVideo"
:maxCount="1"
width="70"
height="70"
:disabled="!isInput"
:deletable="isInput"
></u-upload>
</view>
</view>
<view class="p flex justify-start align-center">
<view class="lb flex justify-start align-center">
<u-icon name="photo" size="18"></u-icon>
<view class="text">首页大图:</view>
</view>
<view class="vl flex-1">
<u-upload
accept="image"
:fileList="album"
@afterRead="afterReadMulti($event, 'album')"
@delete="deleteMulti($event, 'album')"
:maxCount="albumLimit"
width="70"
height="70"
:disabled="!isInput"
:deletable="isInput"
multiple
></u-upload>
</view>
</view>
<view class="p flex flex-col justify-start items-start">
<view class="lb flex justify-start align-center mb-15">
<u-icon name="photo-fill" size="18"></u-icon>
<view class="text">产品展示:</view>
</view>
<view class="vl flex-1">
<u-upload
accept="image"
:fileList="productImageList"
@afterRead="afterReadMulti($event, 'productImageList')"
@delete="deleteMulti($event, 'productImageList')"
:maxCount="productImageLimit"
width="70"
height="70"
:disabled="!isInput"
:deletable="isInput"
multiple
></u-upload>
</view>
</view>
<view class="p flex flex-col justify-start items-start">
<view class="lb flex justify-start align-center mb-15">
<u-icon name="bookmark" size="18"></u-icon>
<view class="text">案例展示:</view>
</view>
<view class="vl flex-1">
<u-upload
accept="image"
:fileList="exampleImageList"
@afterRead="afterReadMulti($event, 'exampleImageList')"
@delete="deleteMulti($event, 'exampleImageList')"
:maxCount="productImageLimit"
width="70"
height="70"
:disabled="!isInput"
:deletable="isInput"
multiple
></u-upload>
</view>
</view>
<template v-if="userInfo.accountType === 2 && parseInt(userInfo.userLevel) > 1">
<view class="p flex justify-start align-center">
<view class="lb flex justify-start align-center">
<u-icon name="bookmark" size="18"></u-icon>
<view class="text">地图定位:</view>
</view>
</view>
<div class="mapDiv">
<tdt-map :center="center" :zoom="zoom" @click="mapClick">
<tdt-marker
:position="[userInfo.businessCard.longitude, userInfo.businessCard.latitude]"
:draggable="false"/>
</tdt-map>
</div>
</template>
</view>
<view class="p flex flex-col justify-start items-start m-top-30 ">
<view class="lb flex justify-start align-center mb-15">
<view class="text red">企业简介:</view>
</view>
<view class="vl flex-1">
<template v-if="isInput">
<view class="editor_toolbox">
<view style="display: flex;">
<i class="iconfont icon-undo" data-method="undo" @click="edit"/>
<i class="iconfont icon-redo" data-method="redo" @click="edit"/>
<i class="iconfont icon-img" data-method="insertImg" @click="edit"/>
<i class="iconfont icon-text" data-method="insertText" @click="edit"/>
<i class="iconfont icon-clear" @click="clear"/>
</view>
</view>
<mp-html ref="article" container-style="padding:20px;height:600rpx"
:content="userInfo.businessCard.companyIntroduction"
domain="https://mp-html.oss-cn-hangzhou.aliyuncs.com" :tag-style="tagStyle"
:editable="isInput"/>
</template>
<u-parse :content="userInfo.businessCard.companyIntroduction" v-else></u-parse>
</view>
</view>
</view>
<u-button v-if="!isInput" class="public-btn" text="修改名片信息" @click="changeEdit"></u-button>
<view class="flex justify-between items-center">
<view class="mx-15 flex-1">
<u-button v-if="isInput" class="public-btn" text="提交修改" @click="save"></u-button>
</view>
<view class="mx-15 flex-1">
<u-button v-if="isInput" class="public-btn-plain" text="取消" @click="isInput = false"></u-button>
</view>
</view>
</template>
</view>
<AddressSelect ref="AddressSelect" @confirm="regionConfirm"/>
</view>
</template>
<script>
import MpHtml from "@/mp-html/components/mp-html/mp-html.vue";
import AddressSelect from "@/components/AddressSelect.vue";
import dayjs from "dayjs";
import md5 from "js-md5";
export default {
components: {AddressSelect, MpHtml},
props: {
userData: {
type: Object
}
},
data() {
return {
center: [108.358150, 22.826820],
zoom: 12,
isInput: false,
tagIndex: -1,
userInfo: {
businessCard: {
logo: '',
personalWechat: '',
companyWechat: '',
position: '',
companyMobile: '',
managerMobile: '',
address: '',
addressDetail: '',
email: '',
website: '',
companyIntroduction: '',
video: [],
longitude: 108.358150,
latitude: 22.826820,
}
},
addressRegion: '',
tagStyle: {
table: 'box-sizing:border-box;border-top:1px solid #dfe2e5;border-left:1px solid #dfe2e5',
th: 'border-right:1px solid #dfe2e5;border-bottom:1px solid #dfe2e5',
td: 'border-right:1px solid #dfe2e5;border-bottom:1px solid #dfe2e5',
li: 'margin:5px 0'
},
logo: [],
album: [],
productImageList: [],
exampleImageList: [],
personalWechat: [],
companyWechat: [],
albumLimit: 1,
productImageLimit: 1,
};
},
methods: {
save() {
this.userInfo.businessCard.companyIntroduction = this.$refs.article.getContent()
if (this.userInfo.businessCard.video) this.userInfo.businessCard.video = this.userInfo.businessCard.video[0].url
vk.callFunction({
url: 'client/user/kh/addAuth',
data: {
businessCard: {...this.userInfo.businessCard, status: 0},
isBusinessCard: true
},
success: (data) => {
this.$message.success('提交成功')
setTimeout(() => {
this.isInput = false
}, 1000)
}
});
},
showAddress() {
this.$refs.AddressSelect.open(this.userInfo.businessCard.address);
},
regionConfirm({province, city, area}) {
this.userInfo.businessCard.addressRegion = {province, city, area}
this.addressRegion = `${province.name}${city.name}${area.name}`
},
clear() {
uni.showModal({
title: '提示',
content: '确定清空内容吗?',
success: res => {
if (res.confirm)
this.$refs.article.clear()
}
})
},
edit(e) {
this.$refs.article[e.currentTarget.dataset.method](e.currentTarget.dataset.param)
},
afterRead({file}, field) {
uniCloud.uploadFile({
filePath: file.url,
cloudPath: dayjs().format('YYYY/MM/DD') + '/' + file.name,
success: ({fileID}) => {
uniCloud.getTempFileURL({
fileList: [fileID]
}).then(res => {
this[field] = [{url: res.fileList[0].tempFileURL}]
this.userInfo.businessCard[field] = res.fileList[0].tempFileURL
})
}
})
},
deletePic({index}, field) {
this[field] = []
this.userInfo.businessCard[field] = null
},
afterReadMulti({file}, field) {
for (let i = 0; i < file.length; i++) {
const item = file[i]
const suffix = item.name.split('.').pop()
uniCloud.uploadFile({
filePath: item.url,
cloudPath: dayjs().format('YYYY/MM/DD') + '/' + md5(item.name + Date.now().toString()) + `.${suffix}`,
success: ({fileID}) => {
uniCloud.getTempFileURL({
fileList: [fileID]
}).then(res => {
this[field].push({url: res.fileList[0].tempFileURL})
this.userInfo.businessCard[field].push(res.fileList[0].tempFileURL)
console.log(this[field])
})
}
})
}
},
deleteMulti({index}, field) {
this[field].splice(index, 1)
this.userInfo.businessCard[field].splice(index, 1)
},
changeEdit() {
this.isInput = true
this.$nextTick(() => {
this.$refs.article.getSrc = (type, value) => {
return new Promise((resolve, reject) => {
uni.chooseImage({
count: value === undefined ? 9 : 1,
success: res => {
uni.showLoading({
title: '上传中'
});
(async () => {
const arr = []
for (let item of res.tempFiles) {
const uploadRes = await this.uploadImg(item)
arr.push(uploadRes)
}
return arr
})().then(res => {
uni.hideLoading()
resolve(res)
})
},
fail: reject
})
})
}
})
},
uploadImg(item) {
const suffix = item.name.split('.').pop()
return new Promise((resolve, reject) => {
uniCloud.uploadFile({
filePath: item.path,
cloudPath: dayjs().format('YYYY/MM/DD') + '/' + md5(item.name + Date.now().toString()) + `.${suffix}`,
success: ({fileID}) => {
uniCloud.getTempFileURL({
fileList: [fileID]
}).then(uploadRes => {
resolve(uploadRes.fileList[0].tempFileURL)
})
}
})
})
},
afterReadVideo({file}) {
if (file.type !== 'video') {
uni.showToast({
title: '请上传MP4文件',
icon: 'none'
})
return
}
uniCloud.uploadFile({
filePath: file.url,
cloudPath: dayjs().format('YYYY/MM/DD') + '/' + md5(file.name + Date.now().toString()) + '.mp4',
success: ({fileID}) => {
uniCloud.getTempFileURL({
fileList: [fileID]
}).then(res => {
this.userInfo.businessCard.video = [{url: res.fileList[0].tempFileURL}]
})
}
})
},
deletePicVideo() {
this.userInfo.businessCard.video = []
},
mapClick({type, lnglat}) {
if (type === "click") {
this.userInfo.businessCard.longitude = parseFloat(lnglat.lng);
this.userInfo.businessCard.latitude = parseFloat(lnglat.lat);
this.$message.success("已选择");
this.$forceUpdate()
}
}
},
mounted() {
this.userInfo = JSON.parse(JSON.stringify(this.userData))
if (this.userInfo.businessCard.address)
this.addressRegion = `${this.userInfo.businessCard.address.province.name}${this.userInfo.businessCard.address.city.name}${this.userInfo.businessCard.address.area.name}`
if (this.userInfo.businessCard.logo) this.logo = [{
url: this.userInfo.businessCard.logo,
}]
if (this.userInfo.businessCard.personalWechat) this.personalWechat = [{
url: this.userInfo.businessCard.personalWechat,
}]
if (this.userInfo.businessCard.companyWechat) this.companyWechat = [{
url: this.userInfo.businessCard.companyWechat,
}]
if (this.userInfo.businessCard.video) this.userInfo.businessCard.video = [{url: this.userInfo.businessCard.video}]
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
}
if (this.userInfo.businessCard.album) this.album = this.userInfo.businessCard.album.map(i => {
return {url: i}
})
if (this.userInfo.businessCard.productImageList) this.productImageList = this.userInfo.businessCard.productImageList.map(i => {
return {url: i}
})
if (this.userInfo.businessCard.exampleImageList) this.exampleImageList = this.userInfo.businessCard.exampleImageList.map(i => {
return {url: i}
})
}
}
</script>
<style lang="scss">
.tag-box {
.item {
padding: 10rpx 10rpx;
font-size: 26rpx;
line-height: 40rpx;
color: #333333;
}
.active {
color: #A92924;
}
}
.layout-card {
padding: 10rpx 30rpx;
.card-title {
position: relative;
padding-left: 20rpx;
font-size: 28rpx;
font-weight: 600;
line-height: 48rpx;
color: #A92924;
&:before {
position: absolute;
left: 0;
top: 50%;
z-index: 9;
margin-top: -14rpx;
content: '';
width: 6rpx;
height: 28rpx;
background: #A92924;
}
}
.card-tip {
font-size: 26rpx;
line-height: 48rpx;
color: #333333;
}
.company {
.logo {
width: 120rpx;
// height: 120rpx;
height: auto;
}
.info {
.name-text {
max-width: 380rpx;
font-size: 30rpx;
line-height: 40rpx;
color: #666666;
}
.name-icon {
width: 80rpx;
height: 32rpx;
}
.xm {
font-size: 28rpx;
line-height: 40rpx;
color: #666666;
}
.job {
font-size: 24rpx;
line-height: 40rpx;
color: #999999;
}
}
}
.detail {
padding: 10rpx 0;
.p {
position: relative;
padding: 14rpx 0;
.lb {
width: 220rpx;
height: auto;
.text {
padding-left: 6rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #666666;
}
}
.vl {
min-height: 40rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #666666;
}
}
}
.public-btn {
width: 100%;
margin-top: 60rpx;
color: #ffffff;
background: #A92924;
}
.public-btn-plain {
width: 100%;
margin-top: 60rpx;
color: #A92924;
border: 1px solid #A92924;
}
}
.editor_toolbox {
width: 100%;
background-color: #ededed;
padding: 5px;
box-sizing: border-box;
}
@font-face {
font-family: "iconfont";
src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}
.iconfont {
flex: 1;
text-align: center;
font-family: "iconfont" !important;
font-size: 22px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-undo:before {
content: "\eb75";
}
.icon-redo:before {
content: "\eb71";
}
.icon-img:before {
content: "\e9ee";
}
.icon-video:before {
content: "\e9f0";
}
.icon-link:before {
content: "\eb05";
}
.icon-text:before {
content: "\ecdf";
}
.icon-line:before {
content: "\e7fd";
}
.icon-heading:before {
content: "\e735";
}
.icon-heading:before {
content: "\e735";
}
.icon-quote:before {
content: "\eb09";
}
.icon-table:before {
content: "\eb0a";
}
.icon-code:before {
content: "\e9ba";
}
.icon-emoji:before {
content: "\e7a1";
}
.icon-template:before {
content: "\e73d";
}
.icon-clear:before {
content: "\e6fc";
}
.icon-load:before {
content: "\e65d";
}
.icon-edit:before {
content: "\eb03";
}
.icon-save:before {
content: "\e747";
}
.mapDiv {
width: 100%;
height: 300px;
}
</style>