|
@@ -7,7 +7,9 @@
|
|
}
|
|
}
|
|
</route>
|
|
</route>
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
|
+import { getBrokerCard, cardStyleList, cardStyleSave } from '../../../../core/libs/requests'
|
|
import { businessLogo, logoWhite, edit, wechatGreen } from '@/core/libs/svgs'
|
|
import { businessLogo, logoWhite, edit, wechatGreen } from '@/core/libs/svgs'
|
|
|
|
+import { requestToast } from '@designer-hub/app/src/core/utils/common'
|
|
import { NetImages } from '@/core/libs/net-images'
|
|
import { NetImages } from '@/core/libs/net-images'
|
|
import BottomAppBar from '@/components/bottom-app-bar.vue'
|
|
import BottomAppBar from '@/components/bottom-app-bar.vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { storeToRefs } from 'pinia'
|
|
@@ -15,16 +17,19 @@ import { useUserStore } from '@/store/user'
|
|
import DataForm from '@/components/data-form.vue'
|
|
import DataForm from '@/components/data-form.vue'
|
|
import { DataFormSchema } from '@/components/data-form'
|
|
import { DataFormSchema } from '@/components/data-form'
|
|
import { DesignerBasicInfo } from '@designer-hub/app/src/core/libs/models'
|
|
import { DesignerBasicInfo } from '@designer-hub/app/src/core/libs/models'
|
|
|
|
+import { omit } from 'radash'
|
|
|
|
|
|
const { userInfo } = storeToRefs(useUserStore())
|
|
const { userInfo } = storeToRefs(useUserStore())
|
|
-const infos = ref<any[]>(['公司', '职位', '手机', '微信', '邮箱'])
|
|
+const infos = ref<any[]>([])
|
|
const formData = ref({})
|
|
const formData = ref({})
|
|
const schema = ref<DataFormSchema>({
|
|
const schema = ref<DataFormSchema>({
|
|
avatar: {
|
|
avatar: {
|
|
- type: 'TextField',
|
|
+ type: 'ImageUploader',
|
|
label: '头像',
|
|
label: '头像',
|
|
labelWidth: 120,
|
|
labelWidth: 120,
|
|
- props: undefined,
|
|
+ props: {
|
|
|
|
+ limit:1
|
|
|
|
+ },
|
|
},
|
|
},
|
|
name: {
|
|
name: {
|
|
type: 'TextField',
|
|
type: 'TextField',
|
|
@@ -53,75 +58,113 @@ const schema = ref<DataFormSchema>({
|
|
labelWidth: 120,
|
|
labelWidth: 120,
|
|
},
|
|
},
|
|
})
|
|
})
|
|
-const submitUpload = () => {
|
|
+const { data:cardData, run: setCardData } = useRequest(() =>
|
|
- console.log('submitUpload')
|
|
+ getBrokerCard({ brokerId: userInfo.value.userId!.toString() }),
|
|
|
|
+)
|
|
|
|
+const { data:styleData, run: setStyleData } = useRequest(() =>
|
|
|
|
+ cardStyleList(),
|
|
|
|
+)
|
|
|
|
+const changeStyle = (index) => {
|
|
|
|
+ cardData.value.cardStyleUrl = styleData.value[index].url
|
|
|
|
+ formData.value.cardStyleId = styleData.value[index].id
|
|
|
|
+}
|
|
|
|
+const infosChange = (index) => {
|
|
|
|
+ infos.value[index].status = !infos.value[index].status
|
|
}
|
|
}
|
|
|
|
+const submitUpload = async () => {
|
|
|
|
+ console.log("1111")
|
|
|
|
+ const { code } = await requestToast(
|
|
|
|
+ () =>
|
|
|
|
+ cardStyleSave(formData.value),
|
|
|
|
+ { success: true, successTitle: '保存成功' },
|
|
|
|
+ )
|
|
|
|
+ if (code === 0) {
|
|
|
|
+ await setCardData()
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+onLoad(async () => {
|
|
|
|
+ await setCardData()
|
|
|
|
+ await setStyleData()
|
|
|
|
+ infos.value = cardData.value.displayInfo
|
|
|
|
+ formData.value = {
|
|
|
|
+ ...omit(cardData.value, []),
|
|
|
|
+ };
|
|
|
|
+})
|
|
</script>
|
|
</script>
|
|
<template>
|
|
<template>
|
|
<div class="p-[16px] bg-[#FFF]">
|
|
<div class="p-[16px] bg-[#FFF]">
|
|
- <div class="h-185px p-20px relative rounded-[10px] color-[#ffffff] bg-[#2357E9]">
|
|
+ <div class="h-185px p-20px relative rounded-[10px] color-[#ffffff] bg-[#2357E9] overflow-hidden">
|
|
- <wd-img
|
|
+ <div class="absolute w-full h-full top-0 left-0 z-0">
|
|
- :src="businessLogo"
|
|
+ <wd-img :src="cardData.cardStyleUrl" custom-class="w-full h-full"></wd-img>
|
|
- width="78px"
|
|
+ </div>
|
|
- height="27px"
|
|
+ <!-- <div class="absolute z-10"> -->
|
|
- mode="widthFix"
|
|
+ <wd-img
|
|
- custom-class="absolute top-[-20px] left-[-24px]"
|
|
+ :src="businessLogo"
|
|
- />
|
|
+ width="78px"
|
|
- <div class="absolute top-[-1px] left-[0px] z-10">
|
|
+ height="27px"
|
|
- <wd-img
|
|
+ mode="widthFix"
|
|
- :src="logoWhite"
|
|
+ custom-class="absolute top-[-20px] left-[-24px]"
|
|
- width="17px"
|
|
+ />
|
|
- height="17px"
|
|
+ <div class="absolute top-[-1px] left-[0px] z-10">
|
|
- round
|
|
+ <wd-img
|
|
- custom-class="absolute top-[3px] left-[7px] bg-[#0cbe7d]"
|
|
+ :src="logoWhite"
|
|
- />
|
|
+ width="17px"
|
|
- <wd-img
|
|
+ height="17px"
|
|
- :src="NetImages.筑巢荟"
|
|
+ round
|
|
- width="40px"
|
|
+ custom-class="absolute top-[3px] left-[7px] bg-[#0cbe7d]"
|
|
- height="17px"
|
|
+ />
|
|
- custom-class="absolute top-[5px] left-[7px]"
|
|
+ <wd-img
|
|
- />
|
|
+ :src="NetImages.筑巢荟"
|
|
- </div>
|
|
+ width="40px"
|
|
- <div class="h-65px flex justify-between items-center mb-10px">
|
|
+ height="17px"
|
|
- <div class="font-size-22px fw-400">
|
|
+ custom-class="absolute top-[5px] left-[7px]"
|
|
- 李世东
|
|
+ />
|
|
- <text class="font-size-12px ml-10px">平台经纪人</text>
|
|
+ </div>
|
|
- </div>
|
|
+ <div class="h-65px flex justify-between items-center mb-10px relative">
|
|
- <wd-img
|
|
+ <div class="font-size-22px fw-400">
|
|
- :src="`https://image.zhuchaohui.com/zhucaohui/d0533ae0ab4fa6de2526e7088b346f5ff4c82a9e7b5622b75d9db3de64377471.jpg`"
|
|
+ {{ cardData.name }}
|
|
- round
|
|
+ <text class="font-size-12px ml-10px" v-if="infos[1].status">{{ cardData.position }}</text>
|
|
- width="65px"
|
|
+ </div>
|
|
- height="65px"
|
|
+ <wd-img
|
|
- />
|
|
+ :src="cardData.avatar"
|
|
- </div>
|
|
+ round
|
|
- <div class="flex items-center">
|
|
+ width="65px"
|
|
- <wd-icon name="phone" size="15px" color="#ffffff" />
|
|
+ height="65px"
|
|
- <div class="font-size-12px ml-10px">13888888888</div>
|
|
+ />
|
|
- </div>
|
|
+ </div>
|
|
- <div class="flex items-center">
|
|
+ <div class="flex items-center relative">
|
|
- <wd-icon name="phone" size="15px" color="#ffffff" />
|
|
+ <wd-icon name="phone" size="15px" color="#ffffff" />
|
|
- <div class="font-size-12px ml-10px">13888888888</div>
|
|
+ <div class="font-size-12px ml-10px">{{ cardData.phone }}</div>
|
|
- </div>
|
|
+ </div>
|
|
- <div class="flex items-center">
|
|
+ <div class="flex items-center relative" v-if="infos[4].status">
|
|
- <wd-icon name="phone" size="15px" color="#ffffff" />
|
|
+ <wd-icon name="phone" size="15px" color="#ffffff" />
|
|
- <div class="font-size-12px ml-10px">13888888888</div>
|
|
+ <div class="font-size-12px ml-10px">{{ cardData.weChat }}</div>
|
|
- </div>
|
|
+ </div>
|
|
- <div class="flex items-center">
|
|
+ <div class="flex items-center relative" v-if="infos[2].status">
|
|
- <wd-icon name="phone" size="15px" color="#ffffff" />
|
|
+ <wd-icon name="phone" size="15px" color="#ffffff" />
|
|
- <div class="font-size-12px ml-10px">13888888888</div>
|
|
+ <div class="font-size-12px ml-10px">{{ cardData.email }}</div>
|
|
- </div>
|
|
+ </div>
|
|
|
|
+ <div class="flex items-center relative" v-if="infos[3].status">
|
|
|
|
+ <wd-icon name="phone" size="15px" color="#ffffff" />
|
|
|
|
+ <div class="font-size-12px ml-10px">{{ cardData.address }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- </div> -->
|
|
</div>
|
|
</div>
|
|
<!-- 名片样式 -->
|
|
<!-- 名片样式 -->
|
|
<div
|
|
<div
|
|
class="mt-24px mb-18px line-height-26px fw-400 color-[rgba(0,0,0,0.85)] font-size-16px flex justify-between items-center"
|
|
class="mt-24px mb-18px line-height-26px fw-400 color-[rgba(0,0,0,0.85)] font-size-16px flex justify-between items-center"
|
|
>
|
|
>
|
|
<div>名片样式</div>
|
|
<div>名片样式</div>
|
|
- <wd-icon name="arrow-right" size="22px"></wd-icon>
|
|
+ <!-- <wd-icon name="arrow-right" size="22px"></wd-icon> -->
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex justify-between items-center">
|
|
- <div class="w-76px h-42px border-[1px] border-solid border-[#E2E4ED]"></div>
|
|
+ <div class="w-76px h-42px border-[1px] border-solid border-[#E2E4ED]" v-for="(it,i) in styleData" :key="i" @click="changeStyle(i)">
|
|
- <div class="w-76px h-42px border-[1px] border-solid border-[#E2E4ED]"></div>
|
|
+ <wd-img
|
|
- <div class="w-76px h-42px border-[1px] border-solid border-[#E2E4ED]"></div>
|
|
+ :src="it.url"
|
|
|
|
+ width="76px"
|
|
|
|
+ height="42px"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<!-- 展示信息 -->
|
|
<!-- 展示信息 -->
|
|
<div
|
|
<div
|
|
@@ -131,11 +174,13 @@ const submitUpload = () => {
|
|
</div>
|
|
</div>
|
|
<div class="pt-[30px] pb-[15px] mb-[15px] flex items-center overflow-x-auto">
|
|
<div class="pt-[30px] pb-[15px] mb-[15px] flex items-center overflow-x-auto">
|
|
<div
|
|
<div
|
|
- class="selectItem inline-block px-18px py-4px rounded-[2px] bg-[#F3F6FF] mr-10px whitespace-nowrap font-size-14px lh-[24px] fw-400"
|
|
+ class="selectItem inline-block px-18px py-4px rounded-[2px] mr-10px whitespace-nowrap font-size-14px lh-[24px] fw-400"
|
|
|
|
+ :class="it.status?'bg-[#2357E9] text-white':'bg-[#F3F6FF]'"
|
|
v-for="(it, index) in infos"
|
|
v-for="(it, index) in infos"
|
|
:key="index"
|
|
:key="index"
|
|
|
|
+ @click="infosChange(index)"
|
|
>
|
|
>
|
|
- {{ it }}
|
|
+ {{ it.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<wd-gap bg-color="#F2F3F6"></wd-gap>
|
|
<wd-gap bg-color="#F2F3F6"></wd-gap>
|