|
|
|
@ -2,19 +2,23 @@
|
|
|
|
import _ from 'lodash'
|
|
|
|
import _ from 'lodash'
|
|
|
|
import axios from 'axios'
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
|
|
|
|
|
|
import { ref , nextTick, onBeforeMount} from 'vue'
|
|
|
|
import { ref, onBeforeMount, onMounted } from 'vue'
|
|
|
|
|
|
|
|
|
|
|
|
import { Cropper } from 'vue-advanced-cropper';
|
|
|
|
import { Cropper } from 'vue-advanced-cropper';
|
|
|
|
import 'vue-advanced-cropper/dist/style.css';
|
|
|
|
import 'vue-advanced-cropper/dist/style.css';
|
|
|
|
|
|
|
|
|
|
|
|
// import Footer from '@/components/Footer.vue'
|
|
|
|
// import Footer from '@/components/Footer.vue'
|
|
|
|
import { useStore } from 'vuex'
|
|
|
|
import { useStore } from 'vuex'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import { useUserStore } from '@/store/user'
|
|
|
|
|
|
|
|
|
|
|
|
import { useRouter } from 'vue-router'
|
|
|
|
import { useRouter } from 'vue-router'
|
|
|
|
|
|
|
|
|
|
|
|
import { showToast } from 'vant'
|
|
|
|
import { showToast, showFailToast, showLoadingToast, showSuccessToast } from 'vant';
|
|
|
|
import { showLoadingToast,showSuccessToast } from 'vant';
|
|
|
|
|
|
|
|
|
|
|
|
import { getUserInfo, updateUserInfo, updateCard, searchConnection, addUserFavi, setUserNfcTpl } from '@/api'
|
|
|
|
|
|
|
|
|
|
|
|
import { getUserInfo, updateUserInfo, updateCard, searchConnection, addUserFavi, setUserNfcTpl} from '@/api'
|
|
|
|
import { updateUserExtra, updateUserLink, updateUserAddon } from '@/api/user';
|
|
|
|
|
|
|
|
|
|
|
|
import imgTp1 from '@/assets/images/tp/tp_1.jpg'
|
|
|
|
import imgTp1 from '@/assets/images/tp/tp_1.jpg'
|
|
|
|
import imgTp2 from '@/assets/images/tp/tp_2.jpg'
|
|
|
|
import imgTp2 from '@/assets/images/tp/tp_2.jpg'
|
|
|
|
@ -24,10 +28,14 @@ import imgTp4 from '@/assets/images/tp/tp_4.jpg'
|
|
|
|
const URL = window.URL || window.webkitURL;
|
|
|
|
const URL = window.URL || window.webkitURL;
|
|
|
|
|
|
|
|
|
|
|
|
const store = useStore()
|
|
|
|
const store = useStore()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const userStore = useUserStore()
|
|
|
|
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
|
|
|
|
const form = ref({addon:[]})
|
|
|
|
const form = ref({ addon: [] })
|
|
|
|
const uInfoForm = ref({addon:[]})
|
|
|
|
|
|
|
|
|
|
|
|
const uInfoForm = ref({ addon: [] })
|
|
|
|
|
|
|
|
|
|
|
|
const genderChecked = ref()
|
|
|
|
const genderChecked = ref()
|
|
|
|
|
|
|
|
|
|
|
|
@ -38,47 +46,51 @@ const fileList = ref([]);
|
|
|
|
const myCrop = ref(null)
|
|
|
|
const myCrop = ref(null)
|
|
|
|
|
|
|
|
|
|
|
|
const tabActive = ref(0)
|
|
|
|
const tabActive = ref(0)
|
|
|
|
|
|
|
|
|
|
|
|
const tabItemObj = ref([
|
|
|
|
const tabItemObj = ref([
|
|
|
|
{title:"基本資料",icon:"fa-id-card-clip"},
|
|
|
|
{ title: "基本資料", icon: "fa-id-card-clip" },
|
|
|
|
{title:"社群分享",icon:"fa-share-nodes"},
|
|
|
|
{ title: "社群分享", icon: "fa-share-nodes" },
|
|
|
|
{title:"人脈資訊",icon:"fa-gem"},
|
|
|
|
{ title: "人脈資訊", icon: "fa-gem" },
|
|
|
|
{title:"版型設定",icon:"fa-layer-group"}
|
|
|
|
{ title: "版型設定", icon: "fa-layer-group" }
|
|
|
|
]);
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
|
|
const crop = ref({
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
img: null,
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const validatorUrl = (val) => {
|
|
|
|
const validatorUrl = (val) => {
|
|
|
|
if(val.length>0){
|
|
|
|
if (val.length > 0) {
|
|
|
|
return /(https?:\/\/|line:\/\/|tel:|mailto:)\S+/.test(val)
|
|
|
|
return /(https?:\/\/|line:\/\/|tel:|mailto:)\S+/.test(val)
|
|
|
|
}else{
|
|
|
|
} else {
|
|
|
|
return true
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const validatorTel = (val) => {
|
|
|
|
const validatorTel = (val) => {
|
|
|
|
if(val.length>0){
|
|
|
|
if (val.length > 0) {
|
|
|
|
return /(\d{2,3}-?|\(\d{2,3}\))\d{3,4}-?\d{4}/.test(val)
|
|
|
|
return /(\d{2,3}-?|\(\d{2,3}\))\d{3,4}-?\d{4}/.test(val)
|
|
|
|
}else{
|
|
|
|
} else {
|
|
|
|
return true
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// START: 基本資料
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const crop = ref({
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
img: null,
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// onMounted(async ()=>{
|
|
|
|
onMounted(async () => {
|
|
|
|
let userRes = await getUserInfo()
|
|
|
|
let userRes = await getUserInfo()
|
|
|
|
if(userRes.code===200){
|
|
|
|
if (userRes.code === 200) {
|
|
|
|
form.value = userRes.data
|
|
|
|
form.value = userRes.data
|
|
|
|
}else{
|
|
|
|
} else {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// })
|
|
|
|
|
|
|
|
if (userRes.data.nfc_addon && (userRes.data.nfc_addon.length > 0)) {
|
|
|
|
if (userRes.data.nfc_addon && (userRes.data.nfc_addon.length > 0)) {
|
|
|
|
form.value.addon = JSON.parse(userRes.data.nfc_addon)
|
|
|
|
form.value.addon = JSON.parse(userRes.data.nfc_addon)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
console.log(form,"form")
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onCrop = () => {
|
|
|
|
const onCrop = () => {
|
|
|
|
const { canvas } = myCrop.value.getResult();
|
|
|
|
const { canvas } = myCrop.value.getResult();
|
|
|
|
@ -108,7 +120,7 @@ const onCrop = () => {
|
|
|
|
if (res.data.code == 200) {
|
|
|
|
if (res.data.code == 200) {
|
|
|
|
form.value.avatar = res.data.data
|
|
|
|
form.value.avatar = res.data.data
|
|
|
|
showSuccessToast('上傳成功');
|
|
|
|
showSuccessToast('上傳成功');
|
|
|
|
}else{
|
|
|
|
} else {
|
|
|
|
showToast.fail('上傳失敗');
|
|
|
|
showToast.fail('上傳失敗');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -118,7 +130,7 @@ const onCrop = () => {
|
|
|
|
return
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const afterRead = async(file, name) => {
|
|
|
|
const afterRead = async (file, name) => {
|
|
|
|
crop.value.show = true
|
|
|
|
crop.value.show = true
|
|
|
|
|
|
|
|
|
|
|
|
const ofile = file.file
|
|
|
|
const ofile = file.file
|
|
|
|
@ -128,10 +140,10 @@ const afterRead = async(file, name) => {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const onAddBtn = () => {
|
|
|
|
const onAddBtn = () => {
|
|
|
|
if(form.value.addon){
|
|
|
|
if (form.value.addon) {
|
|
|
|
form.value.addon.push({icon:'',name:'',link:''})
|
|
|
|
form.value.addon.push({ icon: '', name: '', link: '' })
|
|
|
|
}else{
|
|
|
|
} else {
|
|
|
|
form.value.addon = [{icon:'',name:'',link:''}]
|
|
|
|
form.value.addon = [{ icon: '', name: '', link: '' }]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -160,11 +172,11 @@ const onSubmit = async () => {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
// console.log(form.value,"test");
|
|
|
|
// console.log(form.value,"test");
|
|
|
|
let res = await updateCard(form.value)
|
|
|
|
let res = await updateCard(form.value)
|
|
|
|
if(res.code===200){
|
|
|
|
if (res.code === 200) {
|
|
|
|
showSuccessToast('更新成功')
|
|
|
|
showSuccessToast('更新成功')
|
|
|
|
store.commit('user/setUserInfo',form.value)
|
|
|
|
store.commit('user/setUserInfo', form.value)
|
|
|
|
router.push('/member')
|
|
|
|
router.push('/member')
|
|
|
|
}else{
|
|
|
|
} else {
|
|
|
|
showToast.fail('更新失敗')
|
|
|
|
showToast.fail('更新失敗')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
@ -175,13 +187,13 @@ const userInfoSubmit = async (values) => {
|
|
|
|
message: '資料更新中...',
|
|
|
|
message: '資料更新中...',
|
|
|
|
forbidClick: true,
|
|
|
|
forbidClick: true,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
console.log("test",values);
|
|
|
|
console.log("test", values);
|
|
|
|
let res = await updateUserInfo(values)
|
|
|
|
let res = await updateUserInfo(values)
|
|
|
|
if(res.code===200){
|
|
|
|
if (res.code === 200) {
|
|
|
|
showSuccessToast('更新成功')
|
|
|
|
showSuccessToast('更新成功')
|
|
|
|
store.commit('user/setUserInfo',values)
|
|
|
|
store.commit('user/setUserInfo', values)
|
|
|
|
router.push('/member')
|
|
|
|
router.push('/member')
|
|
|
|
}else{
|
|
|
|
} else {
|
|
|
|
showToast.fail('更新失敗')
|
|
|
|
showToast.fail('更新失敗')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
@ -203,17 +215,53 @@ const userExtraSubmit = async (values) => {
|
|
|
|
// message: '資料更新中...',
|
|
|
|
// message: '資料更新中...',
|
|
|
|
// forbidClick: true,
|
|
|
|
// forbidClick: true,
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
console.log("test",values);
|
|
|
|
let res = await updateUserExtra(values)
|
|
|
|
let res = await updateUserInfo(values)
|
|
|
|
if (res.code === 200) {
|
|
|
|
if(res.code===200){
|
|
|
|
|
|
|
|
showSuccessToast('更新成功')
|
|
|
|
showSuccessToast('更新成功')
|
|
|
|
store.commit('user/setUserInfo',values)
|
|
|
|
// router.push('/member')
|
|
|
|
router.push('/member')
|
|
|
|
} else {
|
|
|
|
}else{
|
|
|
|
showFailToast('更新失敗')
|
|
|
|
showToast.fail('更新失敗')
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// END: 基本資料
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// START: 社群分享
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const userLinkSubmit = async (values) => {
|
|
|
|
|
|
|
|
// showLoadingToast({
|
|
|
|
|
|
|
|
// duration: 0,
|
|
|
|
|
|
|
|
// message: '資料更新中...',
|
|
|
|
|
|
|
|
// forbidClick: true,
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
let res = await updateUserLink(values)
|
|
|
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
|
|
|
showSuccessToast('更新成功')
|
|
|
|
|
|
|
|
// router.push('/member')
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
showFailToast('更新失敗')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const userAddonSubmit = async (values) => {
|
|
|
|
|
|
|
|
// showLoadingToast({
|
|
|
|
|
|
|
|
// duration: 0,
|
|
|
|
|
|
|
|
// message: '資料更新中...',
|
|
|
|
|
|
|
|
// forbidClick: true,
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
console.log(form.value.addon)
|
|
|
|
|
|
|
|
let res = await updateUserAddon(form.value.addon)
|
|
|
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
|
|
|
showSuccessToast('更新成功')
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
showFailToast('更新失敗')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// END: 社群分享
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// START: 人脈資源
|
|
|
|
// START: 人脈資源
|
|
|
|
|
|
|
|
|
|
|
|
const search = ref({
|
|
|
|
const search = ref({
|
|
|
|
@ -241,7 +289,7 @@ const tab2OnSearch = async () => {
|
|
|
|
|
|
|
|
|
|
|
|
const handleSearch = async () => {
|
|
|
|
const handleSearch = async () => {
|
|
|
|
let res = await searchConnection(search.value);
|
|
|
|
let res = await searchConnection(search.value);
|
|
|
|
if(res.code===200){
|
|
|
|
if (res.code === 200) {
|
|
|
|
tab2list.value = res.data;
|
|
|
|
tab2list.value = res.data;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
@ -272,9 +320,9 @@ const tab2ListonLoad = () => {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleAddFavi = async (uf_user_id) => {
|
|
|
|
const handleAddFavi = async (uf_user_id) => {
|
|
|
|
let res = await addUserFavi({uf_user_id});
|
|
|
|
let res = await addUserFavi({ uf_user_id });
|
|
|
|
|
|
|
|
|
|
|
|
if(res.code===200){
|
|
|
|
if (res.code === 200) {
|
|
|
|
return showToast({
|
|
|
|
return showToast({
|
|
|
|
message: '已加入好友',
|
|
|
|
message: '已加入好友',
|
|
|
|
duration: 1000,
|
|
|
|
duration: 1000,
|
|
|
|
@ -291,7 +339,7 @@ const handleAddFavi = async (uf_user_id) => {
|
|
|
|
const tab3list = ref([]);
|
|
|
|
const tab3list = ref([]);
|
|
|
|
onBeforeMount(async () => {
|
|
|
|
onBeforeMount(async () => {
|
|
|
|
let res = await setUserNfcTpl();
|
|
|
|
let res = await setUserNfcTpl();
|
|
|
|
if(res.code===200){
|
|
|
|
if (res.code === 200) {
|
|
|
|
tab3list.value = res.data;
|
|
|
|
tab3list.value = res.data;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
@ -305,16 +353,16 @@ onBeforeMount(async () => {
|
|
|
|
<h5 class="text-white mb-1"><strong>會員資料</strong></h5>
|
|
|
|
<h5 class="text-white mb-1"><strong>會員資料</strong></h5>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template #left>
|
|
|
|
<template #left>
|
|
|
|
<h4><i class="fa-solid fa-angle-left text-white" :style="{opacity:0.5}"></i></h4>
|
|
|
|
<h4><i class="fa-solid fa-angle-left text-white" :style="{ opacity: 0.5 }"></i></h4>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</van-nav-bar>
|
|
|
|
</van-nav-bar>
|
|
|
|
|
|
|
|
|
|
|
|
<van-tabs class="van-tabs" :lazy-render="true" v-model:active="tabActive">
|
|
|
|
<van-tabs class="van-tabs" :lazy-render="true" v-model:active="tabActive">
|
|
|
|
<van-tab v-for="(item,index) in tabItemObj" :key="index">
|
|
|
|
<van-tab v-for="(item, index) in tabItemObj" :key="index">
|
|
|
|
<template #title>
|
|
|
|
<template #title>
|
|
|
|
<div class="tab_item">
|
|
|
|
<div class="tab_item">
|
|
|
|
<i :class="`fa-solid ${item.icon} fa-2x mb-1`"></i>
|
|
|
|
<i :class="`fa-solid ${item.icon} fa-2x mb-1`"></i>
|
|
|
|
<p class="mb-3">{{item.title}}</p>
|
|
|
|
<p class="mb-3">{{ item.title }}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</van-tab>
|
|
|
|
</van-tab>
|
|
|
|
@ -326,127 +374,48 @@ onBeforeMount(async () => {
|
|
|
|
<div class="text-center p-4">
|
|
|
|
<div class="text-center p-4">
|
|
|
|
<van-uploader :after-read="afterRead" :max-count="1" name="avatar" class="mb-4">
|
|
|
|
<van-uploader :after-read="afterRead" :max-count="1" name="avatar" class="mb-4">
|
|
|
|
<div class="upload-main">
|
|
|
|
<div class="upload-main">
|
|
|
|
<img
|
|
|
|
<img class="upload-img avatar" :src="form.avatar" alt="" v-if="form.avatar" />
|
|
|
|
class="upload-img avatar"
|
|
|
|
<img class="upload-img avatar" src="@/assets/images/upload.jpg" alt="" v-else />
|
|
|
|
:src="form.avatar"
|
|
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
|
|
v-if="form.avatar"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
class="upload-img avatar"
|
|
|
|
|
|
|
|
src="@/assets/images/upload.jpg"
|
|
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
|
|
v-else
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<div class="ml-3">
|
|
|
|
<div class="ml-3">
|
|
|
|
<p class="text-skyBlue mb-2">上傳圖片，預設為Line頭像</p>
|
|
|
|
<p class="text-skyBlue mb-2">上傳圖片，預設為Line頭像</p>
|
|
|
|
<van-button class="btn-darkBlue" icon="plus" block size="small">上傳檔案</van-button>
|
|
|
|
<van-button class="btn-darkBlue" icon="plus" block size="small">上傳檔案</van-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</van-uploader>
|
|
|
|
</van-uploader>
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="form.mark" rows="3" type="textarea" maxlength="100" name="mark" placeholder="請輸入100字以內的簡介"
|
|
|
|
v-model="form.mark"
|
|
|
|
show-word-limit :style="{ border: '1px #e3e3e3 solid', borderRadius: '6px' }" />
|
|
|
|
rows="3"
|
|
|
|
|
|
|
|
type="textarea"
|
|
|
|
|
|
|
|
maxlength="100"
|
|
|
|
|
|
|
|
name="mark"
|
|
|
|
|
|
|
|
placeholder="請輸入100字以內的簡介"
|
|
|
|
|
|
|
|
show-word-limit
|
|
|
|
|
|
|
|
:style="{border:'1px #e3e3e3 solid',borderRadius:'6px'}"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="form.real_name" label="姓名" name="real_name" placeholder="請輸入您的姓名"
|
|
|
|
v-model="form.real_name"
|
|
|
|
:rules="[{ required: true, message: '姓名為必填' }]" />
|
|
|
|
label="姓名"
|
|
|
|
<van-field v-model="form.company" label="公司名稱" name="company" placeholder="請輸入您的公司名稱"
|
|
|
|
name="real_name"
|
|
|
|
:rules="[{ required: true, message: '公司名稱必填' }]" />
|
|
|
|
placeholder="請輸入您的姓名"
|
|
|
|
<van-field v-model="form.title" label="職稱" name="title" placeholder="請輸入您的職稱" />
|
|
|
|
:rules="[{ required: true, message: '姓名為必填' }]"
|
|
|
|
<van-field v-model="form.phone" label="手機" name="phone" type="tel" placeholder="Ex. 0900000001 不要有空格"
|
|
|
|
/>
|
|
|
|
:rules="[{ required: true, message: '手機號必填' }, { pattern: /\d{10}/, message: '手機號格式錯誤' }]" />
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="form.tel" label="市話" name="tel" type="tel" placeholder="請輸入您的市話"
|
|
|
|
v-model="form.company"
|
|
|
|
:rules="[{ validator: validatorTel, message: '市話格式不正確,Ex. 02xxxx or 02-xxxx' }]" />
|
|
|
|
label="公司名稱"
|
|
|
|
<van-field v-model="form.email" label="Email" name="email" placeholder="請輸入您的Email"
|
|
|
|
name="company"
|
|
|
|
:rules="[{ required: true, message: 'Email必填' }, { pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/, message: 'Email格式錯誤' }]" />
|
|
|
|
placeholder="請輸入您的公司名稱"
|
|
|
|
<van-field v-model="form.address" label="住址" name="address" placeholder="請輸入您的地址" />
|
|
|
|
:rules="[{ required: true, message: '公司名稱必填' }]"
|
|
|
|
<van-field v-model="form.age" label="年齡" name="age" placeholder="請輸入您的年齡" />
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.title"
|
|
|
|
|
|
|
|
label="職稱"
|
|
|
|
|
|
|
|
name="title"
|
|
|
|
|
|
|
|
placeholder="請輸入您的職稱"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.phone"
|
|
|
|
|
|
|
|
label="手機"
|
|
|
|
|
|
|
|
name="phone"
|
|
|
|
|
|
|
|
type="tel"
|
|
|
|
|
|
|
|
placeholder="Ex. 0900000001 不要有空格"
|
|
|
|
|
|
|
|
:rules="[{ required: true, message: '手機號必填' },{ pattern: /\d{10}/ , message: '手機號格式錯誤' }]"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.tel"
|
|
|
|
|
|
|
|
label="市話"
|
|
|
|
|
|
|
|
name="tel"
|
|
|
|
|
|
|
|
type="tel"
|
|
|
|
|
|
|
|
placeholder="請輸入您的市話"
|
|
|
|
|
|
|
|
:rules="[{ validator: validatorTel, message: '市話格式不正確,Ex. 02xxxx or 02-xxxx' }]"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.email"
|
|
|
|
|
|
|
|
label="Email"
|
|
|
|
|
|
|
|
name="email"
|
|
|
|
|
|
|
|
placeholder="請輸入您的Email"
|
|
|
|
|
|
|
|
:rules="[{ required: true, message: 'Email必填' },{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.address"
|
|
|
|
|
|
|
|
label="住址"
|
|
|
|
|
|
|
|
name="address"
|
|
|
|
|
|
|
|
placeholder="請輸入您的地址"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.age"
|
|
|
|
|
|
|
|
label="年齡"
|
|
|
|
|
|
|
|
name="age"
|
|
|
|
|
|
|
|
placeholder="請輸入您的年齡"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field name="sex" label="性別">
|
|
|
|
<van-field name="sex" label="性別">
|
|
|
|
<template #input>
|
|
|
|
<template #input>
|
|
|
|
<van-radio-group
|
|
|
|
<van-radio-group v-model="genderChecked" direction="horizontal" checked-color="#345068">
|
|
|
|
v-model="genderChecked"
|
|
|
|
|
|
|
|
direction="horizontal"
|
|
|
|
|
|
|
|
checked-color="#345068"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<van-radio name="0">男</van-radio>
|
|
|
|
<van-radio name="0">男</van-radio>
|
|
|
|
<van-radio name="1">女</van-radio>
|
|
|
|
<van-radio name="1">女</van-radio>
|
|
|
|
</van-radio-group>
|
|
|
|
</van-radio-group>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</van-field>
|
|
|
|
</van-field>
|
|
|
|
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="form.area" label="區域" name="area" placeholder="請選擇縣市區域" />
|
|
|
|
v-model="form.area"
|
|
|
|
<van-field v-model="form.work" label="工作性質" name="work" placeholder="請選擇工作性質" />
|
|
|
|
label="區域"
|
|
|
|
|
|
|
|
name="area"
|
|
|
|
|
|
|
|
placeholder="請選擇縣市區域"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.work"
|
|
|
|
|
|
|
|
label="工作性質"
|
|
|
|
|
|
|
|
name="work"
|
|
|
|
|
|
|
|
placeholder="請選擇工作性質"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<van-field readonly>
|
|
|
|
<van-field readonly>
|
|
|
|
<template #label>是否公開<br/>資料搜尋</template>
|
|
|
|
<template #label>是否公開<br />資料搜尋</template>
|
|
|
|
<template #input>
|
|
|
|
<template #input>
|
|
|
|
<van-switch
|
|
|
|
<van-switch v-model="searchChecked" @update:model-value="searchOnUpdateValue" size="18px"
|
|
|
|
v-model="searchChecked"
|
|
|
|
active-color="#345068" inactive-color="#888888" />
|
|
|
|
@update:model-value="searchOnUpdateValue"
|
|
|
|
|
|
|
|
size="18px"
|
|
|
|
|
|
|
|
active-color="#345068"
|
|
|
|
|
|
|
|
inactive-color="#888888"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</van-field>
|
|
|
|
</van-field>
|
|
|
|
|
|
|
|
|
|
|
|
@ -460,88 +429,44 @@ onBeforeMount(async () => {
|
|
|
|
</van-form>
|
|
|
|
</van-form>
|
|
|
|
</van-cell-group>
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
<van-cell-group inset v-if="userStore.userData.level === 3">
|
|
|
|
<van-form @submit="userExtraSubmit">
|
|
|
|
<van-form @submit="userExtraSubmit">
|
|
|
|
<van-cell class="text-center bg-lightPink py-3">
|
|
|
|
<van-cell class="text-center bg-lightPink py-3">
|
|
|
|
<template #title>
|
|
|
|
<template #title>
|
|
|
|
<h6 class="text-darkBlue"><strong>人脈資訊</strong></h6>
|
|
|
|
<h6 class="text-darkBlue"><strong>人脈資訊</strong></h6>
|
|
|
|
|
|
|
|
<div style="text-align: center;">
|
|
|
|
|
|
|
|
下面為客製型會員專屬提供被搜尋
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</van-cell>
|
|
|
|
</van-cell>
|
|
|
|
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="form.introduction" name="introduction" placeholder="請輸入簡短的自我介紹" label-align="top">
|
|
|
|
v-model="form.introduction"
|
|
|
|
|
|
|
|
name="introduction"
|
|
|
|
|
|
|
|
placeholder="請輸入簡短的自我介紹"
|
|
|
|
|
|
|
|
label-align="top"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<template #label>
|
|
|
|
<template #label>
|
|
|
|
<i class="fa-solid fa-gem text-darkBlue"></i> 一句話介紹自己
|
|
|
|
<i class="fa-solid fa-gem text-darkBlue"></i> 一句話介紹自己
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</van-field>
|
|
|
|
</van-field>
|
|
|
|
|
|
|
|
|
|
|
|
<van-divider
|
|
|
|
<van-divider :style="{
|
|
|
|
:style="{
|
|
|
|
|
|
|
|
color: '#345068',
|
|
|
|
color: '#345068',
|
|
|
|
borderColor: '#345068',
|
|
|
|
borderColor: '#345068',
|
|
|
|
padding: '0 16px',
|
|
|
|
padding: '0 16px',
|
|
|
|
}"
|
|
|
|
}"><strong>貴人資源共享</strong></van-divider>
|
|
|
|
><strong>貴人資源共享</strong></van-divider
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div style="text-align: center;">
|
|
|
|
|
|
|
|
下面為客製型會員專屬提供被搜尋
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<van-collapse v-model="resourceActive" accordion>
|
|
|
|
<van-collapse v-model="resourceActive" accordion>
|
|
|
|
<van-collapse-item title="工商簡介" name="3">
|
|
|
|
<van-collapse-item title="工商簡介" name="3">
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="form.exchange" rows="3" type="textarea" name="exchange" maxlength="100"
|
|
|
|
v-model="form.exchange"
|
|
|
|
placeholder="請填寫工商簡介" show-word-limit />
|
|
|
|
rows="3"
|
|
|
|
<van-field v-model="form.exchange_link" label="分享網址：" name="exchange_link" placeholder="需求連結" />
|
|
|
|
type="textarea"
|
|
|
|
|
|
|
|
name="exchange"
|
|
|
|
|
|
|
|
maxlength="100"
|
|
|
|
|
|
|
|
placeholder="請填寫工商簡介"
|
|
|
|
|
|
|
|
show-word-limit
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.exchange_link"
|
|
|
|
|
|
|
|
label="分享網址："
|
|
|
|
|
|
|
|
name="exchange_link"
|
|
|
|
|
|
|
|
placeholder="需求連結"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</van-collapse-item>
|
|
|
|
</van-collapse-item>
|
|
|
|
<van-collapse-item title="我能分享的資源" name="1">
|
|
|
|
<van-collapse-item title="我能分享的資源" name="1">
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="form.supply" rows="3" type="textarea" maxlength="100" name="supply"
|
|
|
|
v-model="form.supply"
|
|
|
|
placeholder="請填寫能分享的資源" show-word-limit />
|
|
|
|
rows="3"
|
|
|
|
<van-field v-model="form.supply_link" label="分享網址：" name="supply_link" placeholder="分享網址"
|
|
|
|
type="textarea"
|
|
|
|
:rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. http://' }]" />
|
|
|
|
maxlength="100"
|
|
|
|
|
|
|
|
name="supply"
|
|
|
|
|
|
|
|
placeholder="請填寫能分享的資源"
|
|
|
|
|
|
|
|
show-word-limit
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.supply_link"
|
|
|
|
|
|
|
|
label="分享網址："
|
|
|
|
|
|
|
|
name="supply_link"
|
|
|
|
|
|
|
|
placeholder="分享網址"
|
|
|
|
|
|
|
|
:rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. http://' }]"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</van-collapse-item>
|
|
|
|
</van-collapse-item>
|
|
|
|
<van-collapse-item title="我需要的資源" name="2">
|
|
|
|
<van-collapse-item title="我需要的資源" name="2">
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="form.demand" rows="3" type="textarea" maxlength="100" name="demand"
|
|
|
|
v-model="form.demand"
|
|
|
|
placeholder="請填寫需要的的資源" show-word-limit />
|
|
|
|
rows="3"
|
|
|
|
<van-field v-model="form.demand_link" label="分享網址：" name="demand_link" placeholder="需求連結" />
|
|
|
|
type="textarea"
|
|
|
|
|
|
|
|
maxlength="100"
|
|
|
|
|
|
|
|
name="demand"
|
|
|
|
|
|
|
|
placeholder="請填寫需要的的資源"
|
|
|
|
|
|
|
|
show-word-limit
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.demand_link"
|
|
|
|
|
|
|
|
label="分享網址："
|
|
|
|
|
|
|
|
name="demand_link"
|
|
|
|
|
|
|
|
placeholder="需求連結"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</van-collapse-item>
|
|
|
|
</van-collapse-item>
|
|
|
|
</van-collapse>
|
|
|
|
</van-collapse>
|
|
|
|
|
|
|
|
|
|
|
|
@ -556,43 +481,14 @@ onBeforeMount(async () => {
|
|
|
|
|
|
|
|
|
|
|
|
<div class="content cnt1" v-show="tabActive === 1">
|
|
|
|
<div class="content cnt1" v-show="tabActive === 1">
|
|
|
|
<van-cell-group inset>
|
|
|
|
<van-cell-group inset>
|
|
|
|
<van-form @submit="onSubmit">
|
|
|
|
<van-form @submit="userLinkSubmit">
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="form.url" label="個人網頁" name="url" placeholder="請輸入您的個人網頁" />
|
|
|
|
v-model="form.nfcurl"
|
|
|
|
<van-field v-model="form.line" label="Line" name="line" placeholder="請輸入您的Line ID" />
|
|
|
|
label="個人網頁"
|
|
|
|
<van-field v-model="form.facebook" label="Facebook" name="facebook" placeholder="請輸入您的Facebook" />
|
|
|
|
name=""
|
|
|
|
<van-field v-model="form.ig" label="IG" name="ig" placeholder="請輸入您的IG" />
|
|
|
|
placeholder="請輸入您的個人網頁"
|
|
|
|
<van-field v-model="form.youTube" label="YouTube" name="youtube" placeholder="請輸入您的YouTube" />
|
|
|
|
/>
|
|
|
|
<van-field v-model="form.wechat" label="WeChat" name="wechat" placeholder="請輸入您的WeChat" />
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="form.tiktok" label="Tiktok" name="tiktok" placeholder="請輸入您的Tiktok" />
|
|
|
|
v-model="form.line"
|
|
|
|
|
|
|
|
label="Line"
|
|
|
|
|
|
|
|
name=""
|
|
|
|
|
|
|
|
placeholder="請輸入您的Line ID"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.facebook"
|
|
|
|
|
|
|
|
label="Facebook"
|
|
|
|
|
|
|
|
name=""
|
|
|
|
|
|
|
|
placeholder="請輸入您的Facebook"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.ig"
|
|
|
|
|
|
|
|
label="IG"
|
|
|
|
|
|
|
|
name=""
|
|
|
|
|
|
|
|
placeholder="請輸入您的IG"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.youTube"
|
|
|
|
|
|
|
|
label="YouTube"
|
|
|
|
|
|
|
|
name=""
|
|
|
|
|
|
|
|
placeholder="請輸入您的YouTube"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
|
|
|
v-model="form.wechat"
|
|
|
|
|
|
|
|
label="WeChat"
|
|
|
|
|
|
|
|
name=""
|
|
|
|
|
|
|
|
placeholder="請輸入您的WeChat"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="px-5 py-4">
|
|
|
|
<div class="px-5 py-4">
|
|
|
|
<van-button block class="btn-darkBlue" native-type="submit">
|
|
|
|
<van-button block class="btn-darkBlue" native-type="submit">
|
|
|
|
@ -603,7 +499,7 @@ onBeforeMount(async () => {
|
|
|
|
</van-cell-group>
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
<van-cell-group inset>
|
|
|
|
<van-form @submit="onSubmit">
|
|
|
|
<van-form @submit="userAddonSubmit">
|
|
|
|
<van-cell class="bg-lightPink">
|
|
|
|
<van-cell class="bg-lightPink">
|
|
|
|
<template #title>
|
|
|
|
<template #title>
|
|
|
|
<h6 class="text-darkBlue"><strong>相關連結</strong></h6>
|
|
|
|
<h6 class="text-darkBlue"><strong>相關連結</strong></h6>
|
|
|
|
@ -615,28 +511,22 @@ onBeforeMount(async () => {
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</van-cell>
|
|
|
|
</van-cell>
|
|
|
|
|
|
|
|
|
|
|
|
<van-field v-for="(item,idx) in form.addon" :key="idx">
|
|
|
|
<van-field v-for="(item, idx) in form.addon" :key="idx">
|
|
|
|
<template #label>
|
|
|
|
<template #label>
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="item.name" name="" maxlength="10" placeholder="請輸入您的連結名稱"
|
|
|
|
v-model="item.name"
|
|
|
|
:rules="[{ required: true, message: '連結名稱必填' }]" />
|
|
|
|
name=""
|
|
|
|
|
|
|
|
maxlength="10"
|
|
|
|
|
|
|
|
placeholder="請輸入您的連結名稱"
|
|
|
|
|
|
|
|
:rules="[{ required: true, message: '連結名稱必填' }]"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template #input>
|
|
|
|
<template #input>
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="item.link" name="" placeholder="請輸入您的按鈕連結"
|
|
|
|
v-model="item.link"
|
|
|
|
:rules="[{ required: true, message: '按鈕連結必填' }]" />
|
|
|
|
name=""
|
|
|
|
|
|
|
|
placeholder="請輸入您的按鈕連結"
|
|
|
|
|
|
|
|
:rules="[{ required: true, message: '按鈕連結必填' }]"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template #button>
|
|
|
|
<template #button>
|
|
|
|
<van-button size="small" class="ml-1 btn-tomatoRed" icon="delete-o" hairline @click="onDelBtn(idx)"></van-button>
|
|
|
|
<van-button size="small" class="ml-1 btn-tomatoRed" icon="delete-o" hairline
|
|
|
|
<van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-up" hairline @click="onMoveBtn(0,idx)"></van-button>
|
|
|
|
@click="onDelBtn(idx)"></van-button>
|
|
|
|
<van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-down" plain hairline @click="onMoveBtn(1,idx)"></van-button>
|
|
|
|
<van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-up" hairline
|
|
|
|
|
|
|
|
@click="onMoveBtn(0, idx)"></van-button>
|
|
|
|
|
|
|
|
<van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-down" plain hairline
|
|
|
|
|
|
|
|
@click="onMoveBtn(1, idx)"></van-button>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</van-field>
|
|
|
|
</van-field>
|
|
|
|
|
|
|
|
|
|
|
|
@ -674,43 +564,22 @@ onBeforeMount(async () => {
|
|
|
|
<div class="content cnt2" v-show="tabActive === 2">
|
|
|
|
<div class="content cnt2" v-show="tabActive === 2">
|
|
|
|
<van-cell-group inset>
|
|
|
|
<van-cell-group inset>
|
|
|
|
<van-row align="center">
|
|
|
|
<van-row align="center">
|
|
|
|
<van-col span="8">
|
|
|
|
<van-col span="12">
|
|
|
|
<van-field
|
|
|
|
<van-field v-model="tab2result" is-link readonly name="picker" :border="false" placeholder="請選擇"
|
|
|
|
v-model="tab2result"
|
|
|
|
@click="tab2showPicker = true" />
|
|
|
|
is-link
|
|
|
|
|
|
|
|
readonly
|
|
|
|
|
|
|
|
name="picker"
|
|
|
|
|
|
|
|
:border="false"
|
|
|
|
|
|
|
|
placeholder="請選擇"
|
|
|
|
|
|
|
|
@click="tab2showPicker = true"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<van-popup v-model:show="tab2showPicker" position="bottom">
|
|
|
|
<van-popup v-model:show="tab2showPicker" position="bottom">
|
|
|
|
<van-picker
|
|
|
|
<van-picker :columns="tab2columns" @confirm="tab2OnConfirm" @cancel="tab2showPicker = false" />
|
|
|
|
:columns="tab2columns"
|
|
|
|
|
|
|
|
@confirm="tab2OnConfirm"
|
|
|
|
|
|
|
|
@cancel="tab2showPicker = false"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</van-popup>
|
|
|
|
</van-popup>
|
|
|
|
</van-col>
|
|
|
|
</van-col>
|
|
|
|
<van-col span="16">
|
|
|
|
<van-col span="12">
|
|
|
|
<van-search
|
|
|
|
<van-search v-model="search.keyword" placeholder="請輸入搜尋關鍵字" @search="tab2OnSearch" />
|
|
|
|
v-model="search.keyword"
|
|
|
|
|
|
|
|
placeholder="請輸入搜尋關鍵字"
|
|
|
|
|
|
|
|
@search="tab2OnSearch"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</van-col>
|
|
|
|
</van-col>
|
|
|
|
</van-row>
|
|
|
|
</van-row>
|
|
|
|
</van-cell-group>
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
<van-cell-group inset>
|
|
|
|
<van-list
|
|
|
|
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="tab2ListonLoad"
|
|
|
|
v-model:loading="loading"
|
|
|
|
class="accordion" id="accordion">
|
|
|
|
:finished="finished"
|
|
|
|
|
|
|
|
finished-text="没有更多了"
|
|
|
|
|
|
|
|
@load="tab2ListonLoad"
|
|
|
|
|
|
|
|
class="accordion"
|
|
|
|
|
|
|
|
id="accordion"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<!-- <van-cell v-for="item in list" :key="item" :title="item" > -->
|
|
|
|
<!-- <van-cell v-for="item in list" :key="item" :title="item" > -->
|
|
|
|
<!-- <van-cell v-for="item in tab2list" :key="item" :title="item">
|
|
|
|
<!-- <van-cell v-for="item in tab2list" :key="item" :title="item">
|
|
|
|
<template #title>
|
|
|
|
<template #title>
|
|
|
|
@ -732,24 +601,27 @@ onBeforeMount(async () => {
|
|
|
|
<div class="left">
|
|
|
|
<div class="left">
|
|
|
|
<div class="avatar"><img :src="item.avatar"></div>
|
|
|
|
<div class="avatar"><img :src="item.avatar"></div>
|
|
|
|
<div class="text">
|
|
|
|
<div class="text">
|
|
|
|
<h5 class="name ellipsis">{{item.real_name}}</h5>
|
|
|
|
<h5 class="name ellipsis">{{ item.real_name }}</h5>
|
|
|
|
<div class="desc ellipsis">@{{item.note}}</div>
|
|
|
|
<div class="desc ellipsis">@{{ item.note }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="right">
|
|
|
|
<div class="right">
|
|
|
|
<van-button size="normal" class="border-0" data-toggle="collapse" :href="`#c${index}`" role="button" aria-expanded="false" :aria-controls="`c${index}`">
|
|
|
|
<van-button size="normal" class="border-0" data-toggle="collapse" :href="`#c${index}`" role="button"
|
|
|
|
|
|
|
|
aria-expanded="false" :aria-controls="`c${index}`">
|
|
|
|
<h5><i class="fa-solid fa-layer-group text-darkBlue"></i></h5>
|
|
|
|
<h5><i class="fa-solid fa-layer-group text-darkBlue"></i></h5>
|
|
|
|
</van-button>
|
|
|
|
</van-button>
|
|
|
|
<van-button size="normal" class="border-0" @click="handleAddFavi(item.user_id)"><h5><i class="fa-solid fa-comment-medical text-darkBlue"></i></h5></van-button>
|
|
|
|
<van-button size="normal" class="border-0" @click="handleAddFavi(item.user_id)">
|
|
|
|
|
|
|
|
<h5><i class="fa-solid fa-comment-medical text-darkBlue"></i></h5>
|
|
|
|
|
|
|
|
</van-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bottom collapse" :id="`c${index}`" data-parent="#accordion">
|
|
|
|
<div class="bottom collapse" :id="`c${index}`" data-parent="#accordion">
|
|
|
|
<h6 class="text-darkBlue"><strong>我能分享的資源</strong></h6>
|
|
|
|
<h6 class="text-darkBlue"><strong>我能分享的資源</strong></h6>
|
|
|
|
<div class="desc">{{item.supply}}</div>
|
|
|
|
<div class="desc">{{ item.supply }}</div>
|
|
|
|
<div class="url py-2">網址：<a :href="item.supply_link" class="text-moBlue">{{item.supply_link}}</a></div>
|
|
|
|
<div class="url py-2">網址：<a :href="item.supply_link" class="text-moBlue">{{ item.supply_link }}</a></div>
|
|
|
|
<hr/>
|
|
|
|
<hr />
|
|
|
|
<h6 class="text-darkBlue"><strong>我需要的資源</strong></h6>
|
|
|
|
<h6 class="text-darkBlue"><strong>我需要的資源</strong></h6>
|
|
|
|
<div class="desc">{{item.demand}}</div>
|
|
|
|
<div class="desc">{{ item.demand }}</div>
|
|
|
|
<div class="url py-2">網址：<a :href="item.demand_link" class="text-moBlue">{{item.demand_link}}</a></div>
|
|
|
|
<div class="url py-2">網址：<a :href="item.demand_link" class="text-moBlue">{{ item.demand_link }}</a></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
@ -770,12 +642,7 @@ onBeforeMount(async () => {
|
|
|
|
</van-cell>
|
|
|
|
</van-cell>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="block">
|
|
|
|
<div class="block">
|
|
|
|
<van-image
|
|
|
|
<van-image width="100%" position="top" fit="cover" :src="imgTp1" />
|
|
|
|
width="100%"
|
|
|
|
|
|
|
|
position="top"
|
|
|
|
|
|
|
|
fit="cover"
|
|
|
|
|
|
|
|
:src="imgTp1"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="d-flex justify-content-center py-3">
|
|
|
|
<div class="d-flex justify-content-center py-3">
|
|
|
|
@ -794,9 +661,7 @@ onBeforeMount(async () => {
|
|
|
|
<van-col span="12" v-for="(item, index) in tab3list" :key="index">
|
|
|
|
<van-col span="12" v-for="(item, index) in tab3list" :key="index">
|
|
|
|
<div class="imgBtn" :data-id="index">
|
|
|
|
<div class="imgBtn" :data-id="index">
|
|
|
|
<div class="imgCnt">
|
|
|
|
<div class="imgCnt">
|
|
|
|
<van-image
|
|
|
|
<van-image :src="imgTp1" />
|
|
|
|
:src="imgTp1"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</van-col>
|
|
|
|
</van-col>
|
|
|
|
@ -810,15 +675,9 @@ onBeforeMount(async () => {
|
|
|
|
<h5 class="text-center mt-3">檔案裁切上傳</h5>
|
|
|
|
<h5 class="text-center mt-3">檔案裁切上傳</h5>
|
|
|
|
<div class="cropper-section">
|
|
|
|
<div class="cropper-section">
|
|
|
|
<div class="crop-area">
|
|
|
|
<div class="crop-area">
|
|
|
|
<cropper
|
|
|
|
<cropper class="cropper" ref="myCrop" :src="crop.img" :stencil-props="{
|
|
|
|
class="cropper"
|
|
|
|
|
|
|
|
ref="myCrop"
|
|
|
|
|
|
|
|
:src="crop.img"
|
|
|
|
|
|
|
|
:stencil-props="{
|
|
|
|
|
|
|
|
aspectRatio: 1 / 1,
|
|
|
|
aspectRatio: 1 / 1,
|
|
|
|
}"
|
|
|
|
}" :auto-zoom="true" />
|
|
|
|
:auto-zoom="true"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<van-button round class="btn-tomatoRed rounded-pill w-50 mt-3" size="small" @click="onCrop">
|
|
|
|
<van-button round class="btn-tomatoRed rounded-pill w-50 mt-3" size="small" @click="onCrop">
|
|
|
|
裁切確認
|
|
|
|
裁切確認
|
|
|
|
@ -832,47 +691,54 @@ onBeforeMount(async () => {
|
|
|
|
<style src="@/assets/css/main.css"></style>
|
|
|
|
<style src="@/assets/css/main.css"></style>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
.cnt2{
|
|
|
|
.cnt2 {
|
|
|
|
.van-list{
|
|
|
|
.van-list {
|
|
|
|
.list-item{
|
|
|
|
.list-item {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
padding: 15px 0;
|
|
|
|
padding: 15px 0;
|
|
|
|
margin:0 15px;
|
|
|
|
margin: 0 15px;
|
|
|
|
border-bottom: 1px #e3e3e3 solid;
|
|
|
|
border-bottom: 1px #e3e3e3 solid;
|
|
|
|
.left{
|
|
|
|
|
|
|
|
flex:1 0 0%;
|
|
|
|
.left {
|
|
|
|
|
|
|
|
flex: 1 0 0%;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
.avatar{
|
|
|
|
|
|
|
|
|
|
|
|
.avatar {
|
|
|
|
width: 55px;
|
|
|
|
width: 55px;
|
|
|
|
min-width: 55px;
|
|
|
|
min-width: 55px;
|
|
|
|
aspect-ratio: 1/1;
|
|
|
|
aspect-ratio: 1/1;
|
|
|
|
border-radius: 50%;
|
|
|
|
border-radius: 50%;
|
|
|
|
margin-right: 10px;
|
|
|
|
margin-right: 10px;
|
|
|
|
overflow: hidden;
|
|
|
|
overflow: hidden;
|
|
|
|
img{
|
|
|
|
|
|
|
|
width:100%;
|
|
|
|
img {
|
|
|
|
height:100%;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
|
|
object-fit: cover;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.name{
|
|
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.right{
|
|
|
|
|
|
|
|
flex:0 0 auto;
|
|
|
|
.right {
|
|
|
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.bottom{
|
|
|
|
|
|
|
|
flex:1 0 100%;
|
|
|
|
.bottom {
|
|
|
|
|
|
|
|
flex: 1 0 100%;
|
|
|
|
border: 1px #e3e3e3 solid;
|
|
|
|
border: 1px #e3e3e3 solid;
|
|
|
|
border-radius: 10px;
|
|
|
|
border-radius: 10px;
|
|
|
|
padding: 0 10px;
|
|
|
|
padding: 0 10px;
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
transition: all .2s;
|
|
|
|
transition: all .2s;
|
|
|
|
&.show{
|
|
|
|
|
|
|
|
|
|
|
|
&.show {
|
|
|
|
padding: 10px;
|
|
|
|
padding: 10px;
|
|
|
|
margin: 5px 0;
|
|
|
|
margin: 5px 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -881,16 +747,17 @@ onBeforeMount(async () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cnt3{
|
|
|
|
.cnt3 {
|
|
|
|
.block{
|
|
|
|
.block {
|
|
|
|
height:500px;
|
|
|
|
height: 500px;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
background-color: #000;
|
|
|
|
background-color: #000;
|
|
|
|
padding: 20px 35px;
|
|
|
|
padding: 20px 35px;
|
|
|
|
overflow: hidden;
|
|
|
|
overflow: hidden;
|
|
|
|
overflow-y: auto;
|
|
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.imgBtn{
|
|
|
|
|
|
|
|
|
|
|
|
.imgBtn {
|
|
|
|
padding: 10px;
|
|
|
|
padding: 10px;
|
|
|
|
margin: 10px;
|
|
|
|
margin: 10px;
|
|
|
|
background-color: #333;
|
|
|
|
background-color: #333;
|
|
|
|
@ -899,14 +766,18 @@ onBeforeMount(async () => {
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
transform: scale(1);
|
|
|
|
transform: scale(1);
|
|
|
|
transition: all .3s;
|
|
|
|
transition: all .3s;
|
|
|
|
&.active,&:hover{
|
|
|
|
|
|
|
|
|
|
|
|
&.active,
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
transform: scale(1.02);
|
|
|
|
transform: scale(1.02);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.imgCnt{
|
|
|
|
|
|
|
|
width:100%;
|
|
|
|
.imgCnt {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
height: 150px;
|
|
|
|
height: 150px;
|
|
|
|
img{
|
|
|
|
|
|
|
|
width:100%;
|
|
|
|
img {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
|
|
object-fit: cover;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
