|
|
<script setup>
|
|
|
import _ from 'lodash'
|
|
|
import axios from 'axios'
|
|
|
|
|
|
import { ref, onBeforeMount, onMounted } from 'vue'
|
|
|
|
|
|
import { Cropper } from 'vue-advanced-cropper';
|
|
|
import 'vue-advanced-cropper/dist/style.css';
|
|
|
|
|
|
import { useUserStore } from '@/store/user'
|
|
|
|
|
|
import { useRouter } from 'vue-router'
|
|
|
|
|
|
import { showToast, showFailToast, showLoadingToast, showSuccessToast, showConfirmDialog } from 'vant';
|
|
|
|
|
|
import { getUserInfo, updateUserInfo, updateCard, searchConnection, addUserFavi, setUserNfcTpl } from '@/api'
|
|
|
|
|
|
import { updateUserExtra, updateUserLink, getUserExtra, updateUserAddon } from '@/api/user';
|
|
|
import { getAreaList, getWorkList } from '@/api/system';
|
|
|
|
|
|
import imgTp1 from '@/assets/images/tp/tp_1.jpg'
|
|
|
import imgTp2 from '@/assets/images/tp/tp_2.jpg'
|
|
|
import imgTp3 from '@/assets/images/tp/tp_3.jpg'
|
|
|
import imgTp4 from '@/assets/images/tp/tp_4.jpg'
|
|
|
import { computed } from 'vue';
|
|
|
|
|
|
const URL = window.URL || window.webkitURL;
|
|
|
|
|
|
const userStore = useUserStore()
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
const form = ref({ addon: [] })
|
|
|
|
|
|
const genderChecked = ref()
|
|
|
|
|
|
const resourceActive = ref('1');
|
|
|
|
|
|
const fileList = ref([]);
|
|
|
|
|
|
const myCrop = ref(null)
|
|
|
|
|
|
const tabActive = ref(0)
|
|
|
|
|
|
const tabItemObj = ref([
|
|
|
{ title: "基本資料", icon: "fa-id-card-clip" },
|
|
|
{ title: "更多連結", icon: "fa-share-nodes" },
|
|
|
{ title: "菁英資訊", icon: "fa-gem" },
|
|
|
{ title: "NFC版型", icon: "fa-layer-group" }
|
|
|
]);
|
|
|
|
|
|
const beforeChange = (index) => {
|
|
|
return new Promise((resolve) => {
|
|
|
if (index === 1) {
|
|
|
if (form.value.level === 0) {
|
|
|
showConfirmDialog({
|
|
|
title: '會員資格開通提醒',
|
|
|
message: '本功能為標準型以上之付費功能，是否前往立即開通？',
|
|
|
confirmButtonText: "立即開通"
|
|
|
}).then(() => {
|
|
|
router.push('/shop');
|
|
|
}).catch(() => {
|
|
|
// on cancel
|
|
|
});
|
|
|
}else{
|
|
|
resolve(true);
|
|
|
}
|
|
|
}else{
|
|
|
resolve(true);
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const validatorUrl = (val) => {
|
|
|
if (val.length > 0) {
|
|
|
return /(https?:\/\/|line:\/\/|tel:|mailto:)\S+/.test(val)
|
|
|
} else {
|
|
|
return true
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const validatorTel = (val) => {
|
|
|
if (val.length > 0) {
|
|
|
return /(\d{2,3}-?|\(\d{2,3}\))\d{3,4}-?\d{4}/.test(val)
|
|
|
} else {
|
|
|
return true
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// START: 基本資料
|
|
|
|
|
|
|
|
|
const crop = ref({
|
|
|
show: false,
|
|
|
img: null,
|
|
|
})
|
|
|
|
|
|
onMounted(async () => {
|
|
|
let userRes = await getUserInfo()
|
|
|
if (userRes.code === 200) {
|
|
|
form.value = userRes.data
|
|
|
}
|
|
|
|
|
|
//取得區域資料
|
|
|
let areaRes = await getAreaList()
|
|
|
if (areaRes.code === 200) {
|
|
|
areaColumns.value = areaRes.data
|
|
|
//取得區域名稱
|
|
|
if (areaRes.data.length > 0) {
|
|
|
const findRes = _.find(areaRes.data, { value: form.value.area })
|
|
|
if (findRes) {
|
|
|
areaName.value = findRes.text
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//取得工作性質資料
|
|
|
let workRes = await getWorkList()
|
|
|
if (workRes.code === 200) {
|
|
|
workColumns.value = workRes.data
|
|
|
//取得工作性質名稱
|
|
|
if (workRes.data.length > 0) {
|
|
|
|
|
|
const findRes = _.find(workRes.data, { value: form.value.work })
|
|
|
if (findRes) {
|
|
|
workName.value = findRes.text
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (userRes.data.nfc_addon && (userRes.data.nfc_addon.length > 0)) {
|
|
|
form.value.nfc_addon = JSON.parse(userRes.data.nfc_addon)
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
const onCrop = () => {
|
|
|
const { canvas } = myCrop.value.getResult();
|
|
|
if (canvas) {
|
|
|
const imgFile = new FormData();
|
|
|
canvas.toBlob(async (blob) => {
|
|
|
let ufile = new File([blob], "image.jpg");
|
|
|
imgFile.append("user_id", form.value.user_id)
|
|
|
imgFile.append("fileType", "IMAGE")
|
|
|
imgFile.append('file', ufile)
|
|
|
|
|
|
crop.value.show = false
|
|
|
|
|
|
showLoadingToast({
|
|
|
duration: 0,
|
|
|
message: '圖片上傳中...',
|
|
|
forbidClick: true,
|
|
|
});
|
|
|
|
|
|
let res = await axios.post(
|
|
|
`${import.meta.env.VITE_APP_API_URL}/user/uploadAvatar`,
|
|
|
imgFile,
|
|
|
{
|
|
|
}
|
|
|
)
|
|
|
|
|
|
if (res.data.code == 200) {
|
|
|
form.value.avatar = res.data.data
|
|
|
showSuccessToast('上傳成功');
|
|
|
} else {
|
|
|
showToast.fail('上傳失敗');
|
|
|
}
|
|
|
|
|
|
}, 'image/jpeg');
|
|
|
}
|
|
|
|
|
|
return
|
|
|
}
|
|
|
|
|
|
const afterRead = async (file, name) => {
|
|
|
crop.value.show = true
|
|
|
|
|
|
const ofile = file.file
|
|
|
crop.value.img = URL.createObjectURL(ofile);
|
|
|
// crop.value.img = ofile
|
|
|
return
|
|
|
};
|
|
|
|
|
|
const onAddBtn = () => {
|
|
|
if (form.value.nfc_addon) {
|
|
|
form.value.nfc_addon.push({ icon: '', name: '', link: '' })
|
|
|
} else {
|
|
|
form.value.nfc_addon = [{ icon: '', name: '', link: '' }]
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const onDelBtn = (index) => {
|
|
|
form.value.nfc_addon.splice(index, 1)
|
|
|
}
|
|
|
|
|
|
const onMoveBtn = (type, index) => {
|
|
|
if (type === 0) {
|
|
|
if (index !== 0) {
|
|
|
[form.value.nfc_addon[index], form.value.nfc_addon[index - 1]] = [form.value.nfc_addon[index - 1], form.value.nfc_addon[index]]
|
|
|
}
|
|
|
} else {
|
|
|
if (index + 1 !== form.value.nfc_addon.length) {
|
|
|
[form.value.nfc_addon[index + 1], form.value.nfc_addon[index]] = [form.value.nfc_addon[index], form.value.nfc_addon[index + 1]]
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
const onFailed = (errorInfo) => {
|
|
|
console.log('failed', errorInfo);
|
|
|
showFailToast('請確認欄位填寫是否完整');
|
|
|
if(errorInfo.errors[0].name === 'url'){
|
|
|
tabActive.value = 1
|
|
|
return
|
|
|
}
|
|
|
tabActive.value = 0
|
|
|
return
|
|
|
};
|
|
|
|
|
|
const onSubmit = async () => {
|
|
|
showLoadingToast({
|
|
|
duration: 0,
|
|
|
message: '資料更新中...',
|
|
|
forbidClick: true,
|
|
|
});
|
|
|
|
|
|
// let res = await getUserInfo(form.value)
|
|
|
let res = await updateUserInfo(form.value)
|
|
|
|
|
|
if (res.code === 200) {
|
|
|
await userStore.getUserData();
|
|
|
|
|
|
showSuccessToast('更新成功')
|
|
|
} else {
|
|
|
showFailToast('更新失敗')
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const searchChecked = ref(true);
|
|
|
const searchOnUpdateValue = (newValue) => {
|
|
|
showConfirmDialog({
|
|
|
title: '提醒',
|
|
|
message: '是否切换開關？',
|
|
|
}).then(() => {
|
|
|
searchChecked.value = newValue;
|
|
|
});
|
|
|
};
|
|
|
|
|
|
|
|
|
// 區域
|
|
|
const showAreaPicker = ref(false);
|
|
|
const areaColumns = ref([]);
|
|
|
const areaName = ref('');
|
|
|
|
|
|
const onAreaConfirm = (value) => {
|
|
|
areaName.value = value.selectedOptions[0].text
|
|
|
form.value.area = value.selectedOptions[0].value
|
|
|
showAreaPicker.value = false
|
|
|
}
|
|
|
|
|
|
// 工作性質
|
|
|
const showWorkPicker = ref(false);
|
|
|
const workColumns = ref([]);
|
|
|
const workName = ref('');
|
|
|
|
|
|
const onWorkConfirm = (value) => {
|
|
|
workName.value = value.selectedOptions[0].text
|
|
|
form.value.work = value.selectedOptions[0].value
|
|
|
showWorkPicker.value = false
|
|
|
}
|
|
|
|
|
|
// END: 基本資料
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// START: 人脈資源
|
|
|
|
|
|
const search = ref({
|
|
|
type: 0,
|
|
|
keyword: '',
|
|
|
})
|
|
|
|
|
|
const tab2result = ref('菁英所需要的資源');
|
|
|
const tab2showPicker = ref(false);
|
|
|
const loading = ref(false);
|
|
|
const finished = ref(false);
|
|
|
|
|
|
const tab2columns = [
|
|
|
{ text: '菁英所需要的資源', value: 0 },
|
|
|
{ text: '菁英能提供的資源', value: 1 },
|
|
|
];
|
|
|
|
|
|
const tab2OnConfirm = ({ selectedOptions }) => {
|
|
|
tab2result.value = selectedOptions[0].text;
|
|
|
search.value.type = selectedOptions[0].value;
|
|
|
tab2showPicker.value = false;
|
|
|
handleSearch();
|
|
|
};
|
|
|
|
|
|
const tab2OnSearch = async () => {
|
|
|
handleSearch();
|
|
|
};
|
|
|
|
|
|
const handleSearch = async () => {
|
|
|
showLoadingToast({
|
|
|
message: '人脈搜尋中...',
|
|
|
forbidClick: true,
|
|
|
});
|
|
|
|
|
|
let res = await searchConnection(search.value);
|
|
|
if (res.code === 200) {
|
|
|
tab2list.value = res.data;
|
|
|
console.log(tab2list.value)
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 打開名片
|
|
|
const openNfcCard = (item) => {
|
|
|
window.open(`${item.nfcurl}`, '_blank');
|
|
|
};
|
|
|
|
|
|
const tab2list = ref([]);
|
|
|
|
|
|
const tab2Loading = ref(false);
|
|
|
const tab2Finished = ref(false);
|
|
|
const tab2TodoLists = ref([]);
|
|
|
const tab2AddFriend = ref([]);
|
|
|
|
|
|
const tab2ListonLoad = () => {
|
|
|
// 异步更新数据
|
|
|
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
|
|
|
// setTimeout(() => {
|
|
|
// for (let i = 0; i < 10; i++) {
|
|
|
// tab2list.value.push(tab2list.value.length + 1);
|
|
|
// }
|
|
|
|
|
|
// // 加载状态结束
|
|
|
// tab2Loading.value = false;
|
|
|
|
|
|
// // 数据全部加载完成
|
|
|
// if (tab2list.value.length >= 40) {
|
|
|
// tab2Finished.value = true;
|
|
|
// }
|
|
|
// }, 1000);
|
|
|
};
|
|
|
|
|
|
const handleAddFavi = async (uf_user_id) => {
|
|
|
console.log(uf_user_id)
|
|
|
let res = await addUserFavi({ uf_user_id });
|
|
|
|
|
|
if (res.code === 200) {
|
|
|
return showToast({
|
|
|
message: '已加入好友',
|
|
|
duration: 1000,
|
|
|
});
|
|
|
}
|
|
|
return showToast({
|
|
|
message: '加入失敗',
|
|
|
duration: 1000,
|
|
|
});
|
|
|
}
|
|
|
// END: 人脈資源
|
|
|
|
|
|
|
|
|
const tab3list = ref([
|
|
|
{
|
|
|
id: 0,
|
|
|
image: imgTp1,
|
|
|
},
|
|
|
{
|
|
|
id: 1,
|
|
|
image: imgTp2,
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
image: imgTp3,
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
image: imgTp4,
|
|
|
}
|
|
|
]);
|
|
|
|
|
|
|
|
|
const selectedTpl = computed(() => {
|
|
|
if (form.value.nfc_template) {
|
|
|
return tab3list.value[form.value.nfc_template].image
|
|
|
} else {
|
|
|
return tab3list.value[0].image
|
|
|
}
|
|
|
})
|
|
|
|
|
|
const handleSelectTpl = (id) => {
|
|
|
form.value.nfc_template = id
|
|
|
}
|
|
|
|
|
|
const handleChangeTplSubmit = async () => {
|
|
|
let res = await setUserNfcTpl(form.value.nfc_template);
|
|
|
if (res.code === 200) {
|
|
|
showSuccessToast('修改成功')
|
|
|
} else {
|
|
|
showFailToast('修改失敗')
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="member page">
|
|
|
<van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
|
|
|
<template #title>
|
|
|
<h5 class="text-white mb-1"><strong>會員資料</strong></h5>
|
|
|
</template>
|
|
|
<template #left>
|
|
|
<h4><i class="fa-solid fa-angle-left text-white" :style="{ opacity: 0.5 }"></i></h4>
|
|
|
</template>
|
|
|
</van-nav-bar>
|
|
|
|
|
|
<van-tabs class="van-tabs" :lazy-render="true" v-model:active="tabActive" :ellipsis="false" :before-change="beforeChange">
|
|
|
<van-tab v-for="(item, index) in tabItemObj" :key="index">
|
|
|
<template #title>
|
|
|
<div class="tab_item">
|
|
|
<i :class="`fa-solid ${item.icon} fa-2x mb-1`"></i>
|
|
|
<p class="mb-3">{{ item.title }}</p>
|
|
|
</div>
|
|
|
</template>
|
|
|
</van-tab>
|
|
|
</van-tabs>
|
|
|
<van-form @submit="onSubmit" @failed="onFailed">
|
|
|
<div class="content cnt0" v-show="tabActive === 0">
|
|
|
<van-cell-group inset>
|
|
|
<div class="text-center p-4">
|
|
|
<van-uploader :after-read="afterRead" :max-count="1" name="avatar" class="mb-4">
|
|
|
<div class="upload-main">
|
|
|
<img class="upload-img avatar" :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">
|
|
|
<p class="text-skyBlue mb-2">上傳圖片，預設為Line頭像</p>
|
|
|
<van-button class="btn-darkBlue" icon="plus" block size="small">上傳檔案</van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-uploader>
|
|
|
<van-field v-model="form.mark" rows="3" type="textarea" maxlength="100" name="mark" placeholder="請輸入100字以內的簡介"
|
|
|
show-word-limit :style="{ border: '1px #e3e3e3 solid', borderRadius: '6px' }" />
|
|
|
</div>
|
|
|
|
|
|
<van-field v-model="form.real_name" label="姓名" name="real_name" placeholder="請輸入您的姓名"
|
|
|
:rules="[{ required: true, message: '姓名為必填' }]" />
|
|
|
<van-field v-model="form.company" label="公司名稱" name="company" placeholder="請輸入您的公司名稱"
|
|
|
:rules="[{ required: true, message: '公司名稱必填' }]" />
|
|
|
<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="性別">
|
|
|
<template #input>
|
|
|
<van-radio-group v-model="form.sex" direction="horizontal" checked-color="#5b7b94">
|
|
|
<van-radio :name="1">男</van-radio>
|
|
|
<van-radio :name="0">女</van-radio>
|
|
|
</van-radio-group>
|
|
|
</template>
|
|
|
</van-field>
|
|
|
|
|
|
<van-field v-model="areaName" is-link readonly name="area" label="區域" placeholder="請選擇區域"
|
|
|
@click="showAreaPicker = true" />
|
|
|
<van-popup v-model:show="showAreaPicker" position="bottom">
|
|
|
<van-picker :columns="areaColumns" confirm-button-text="確認" cancel-button-text="取消" @confirm="onAreaConfirm"
|
|
|
@cancel="showAreaPicker = false" />
|
|
|
</van-popup>
|
|
|
|
|
|
<van-field v-model="workName" is-link readonly name="work" label="工作性質" placeholder="請選擇工作性質"
|
|
|
@click="showWorkPicker = true" />
|
|
|
<van-popup v-model:show="showWorkPicker" position="bottom">
|
|
|
<van-picker :columns="workColumns" confirm-button-text="確認" cancel-button-text="取消" @confirm="onWorkConfirm"
|
|
|
@cancel="showWorkPicker = false" />
|
|
|
</van-popup>
|
|
|
|
|
|
<van-field readonly>
|
|
|
<template #label>是否公開<br />資料搜尋</template>
|
|
|
<template #input>
|
|
|
<van-switch v-model="searchChecked" @update:model-value="searchOnUpdateValue" size="18px"
|
|
|
active-color="#5b7b94" inactive-color="#888888" />
|
|
|
</template>
|
|
|
</van-field>
|
|
|
</van-cell-group>
|
|
|
|
|
|
<van-cell-group inset>
|
|
|
<van-cell class="text-center bg-lightPink py-3">
|
|
|
<template #title>
|
|
|
<h6 class="text-darkBlue"><strong>多元菁英人脈資訊</strong></h6>
|
|
|
<div style="text-align: center;">
|
|
|
下面為<span class="text-danger">客製型會員</span>專屬提供被搜尋
|
|
|
</div>
|
|
|
</template>
|
|
|
</van-cell>
|
|
|
|
|
|
<van-field v-model="form.introduction" name="introduction" placeholder="請輸入簡短的自我介紹" label-align="top">
|
|
|
<template #label>
|
|
|
<i class="fa-solid fa-gem text-darkBlue"></i> 一句話介紹自己
|
|
|
</template>
|
|
|
</van-field>
|
|
|
|
|
|
<van-divider :style="{
|
|
|
color: '#345068',
|
|
|
borderColor: '#345068',
|
|
|
padding: '0 16px',
|
|
|
}"><strong>貴人資源共享</strong></van-divider>
|
|
|
<van-collapse v-model="resourceActive" accordion>
|
|
|
<van-collapse-item title="工商簡介" name="1">
|
|
|
<van-field v-model="form.exchange" rows="5" type="textarea" name="exchange" maxlength="250"
|
|
|
placeholder="請填寫工商簡介" show-word-limit />
|
|
|
<van-field v-model="form.exchange_link" label="分享網址：" name="exchange_link" placeholder="需求連結" />
|
|
|
</van-collapse-item>
|
|
|
<van-collapse-item title="我能分享的資源" name="2">
|
|
|
<van-field v-model="form.supply" rows="5" type="textarea" maxlength="250" 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 title="我需要的資源" name="3">
|
|
|
<van-field v-model="form.demand" rows="5" type="textarea" maxlength="250" name="demand"
|
|
|
placeholder="請填寫需要的的資源" show-word-limit />
|
|
|
<van-field v-model="form.demand_link" label="分享網址：" name="demand_link" placeholder="需求連結" />
|
|
|
</van-collapse-item>
|
|
|
</van-collapse>
|
|
|
</van-cell-group>
|
|
|
|
|
|
<van-sticky position="bottom">
|
|
|
<div class="bottomBtnCnt">
|
|
|
<van-button block class="btn-darkBlue" native-type="submit">確認修改</van-button>
|
|
|
</div>
|
|
|
</van-sticky>
|
|
|
</div>
|
|
|
|
|
|
<div class="content cnt1" v-show="tabActive === 1">
|
|
|
<van-cell-group inset>
|
|
|
<van-field v-model="form.url" label="個人網頁" name="url" placeholder="請輸入您的個人網頁"
|
|
|
:rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. https://' }]"/>
|
|
|
<van-field v-model="form.line" label="Line" name="line" placeholder="請輸入您的Line ID" />
|
|
|
<van-field v-model="form.facebook" label="Facebook" name="facebook" placeholder="請輸入您的Facebook" />
|
|
|
<van-field v-model="form.ig" label="IG" name="ig" placeholder="請輸入您的IG" />
|
|
|
<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 v-model="form.tiktok" label="Tiktok" name="tiktok" placeholder="請輸入您的Tiktok" />
|
|
|
</van-cell-group>
|
|
|
|
|
|
<van-cell-group inset>
|
|
|
<van-cell class="bg-lightPink">
|
|
|
<template #title>
|
|
|
<h6 class="text-darkBlue"><strong>相關連結</strong></h6>
|
|
|
</template>
|
|
|
<template #value>
|
|
|
<van-button size="small" @click="onAddBtn">
|
|
|
<h6>新增連結</h6>
|
|
|
</van-button>
|
|
|
</template>
|
|
|
</van-cell>
|
|
|
<van-field v-for="(item, idx) in form.nfc_addon" :key="idx">
|
|
|
<template #label>
|
|
|
<van-field v-model="item.name" name="" maxlength="15" placeholder="請輸入名稱"
|
|
|
:rules="[{ required: true, message: '連結名稱必填' }]" />
|
|
|
</template>
|
|
|
<template #input>
|
|
|
<van-field v-model="item.link" name="" placeholder="請輸入您的按鈕連結"
|
|
|
:rules="[{ required: true, message: '按鈕連結必填' }]" />
|
|
|
</template>
|
|
|
<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-skyBlue" icon="arrow-up" hairline
|
|
|
:disabled="idx === 0"
|
|
|
@click="onMoveBtn(0, idx)"></van-button>
|
|
|
<van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-down" plain hairline
|
|
|
:disabled="idx === form.nfc_addon.length - 1"
|
|
|
@click="onMoveBtn(1, idx)"></van-button>
|
|
|
</template>
|
|
|
</van-field>
|
|
|
</van-cell-group>
|
|
|
|
|
|
<van-sticky position="bottom">
|
|
|
<div class="bottomBtnCnt">
|
|
|
<van-button block class="btn-darkBlue" native-type="submit">確認修改</van-button>
|
|
|
</div>
|
|
|
</van-sticky>
|
|
|
</div>
|
|
|
</van-form>
|
|
|
|
|
|
<div class="content cnt2" v-show="tabActive === 2">
|
|
|
<van-cell-group inset>
|
|
|
<van-row gutter="0" align="center">
|
|
|
<van-col span="9">
|
|
|
<van-field v-model="tab2result" is-link readonly name="picker" :border="false" placeholder="請選擇"
|
|
|
@click="tab2showPicker = true" />
|
|
|
<van-popup v-model:show="tab2showPicker" position="bottom">
|
|
|
<van-picker confirm-button-text="確認" cancel-button-text="取消" :columns="tab2columns" @confirm="tab2OnConfirm"
|
|
|
@cancel="tab2showPicker = false" />
|
|
|
</van-popup>
|
|
|
</van-col>
|
|
|
<van-col span="15">
|
|
|
<van-search v-model="search.keyword" show-action placeholder="請輸入搜尋關鍵字" @search="tab2OnSearch">
|
|
|
<template #action>
|
|
|
<van-button class="btn-darkBlue" @click="tab2OnSearch">
|
|
|
搜索
|
|
|
</van-button>
|
|
|
</template>
|
|
|
</van-search>
|
|
|
</van-col>
|
|
|
</van-row>
|
|
|
</van-cell-group>
|
|
|
|
|
|
<van-cell-group inset>
|
|
|
<van-list v-model:loading="loading" :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 tab2list" :key="item" :title="item">
|
|
|
<template #title>
|
|
|
<div class="list-item">
|
|
|
<div class="avatar"><img :src="item.avatar"></div>
|
|
|
<div class="text">
|
|
|
<h5 class="name ellipsis">{{item.real_name}}</h5>
|
|
|
<div class="desc ellipsis">@{{item.note}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template #value>
|
|
|
<van-button size="normal" class="border-0"><h5><i class="fa-solid fa-layer-group text-darkBlue"></i></h5></van-button>
|
|
|
<van-button size="normal" class="border-0"><h5><i class="fa-solid fa-comment-medical text-darkBlue"></i></h5></van-button>
|
|
|
</template>
|
|
|
</van-cell> -->
|
|
|
|
|
|
<div class="list-item" v-for="(item, index) in tab2list" :key="index">
|
|
|
<div class="left" @click="openNfcCard(item)">
|
|
|
<div class="avatar"><img :src="item.avatar"></div>
|
|
|
<div class="text">
|
|
|
<h5 class="name ellipsis">{{ item.real_name }}</h5>
|
|
|
<div class="desc ellipsis">@{{ item.introduction }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<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}`">
|
|
|
<h5><i class="fa-solid fa-layer-group text-darkBlue"></i></h5>
|
|
|
</van-button>
|
|
|
<van-button v-if="(item.is_favorite) == 0" 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 class="bottom collapse" :id="`c${index}`" data-parent="#accordion">
|
|
|
<h6 class="text-darkBlue"><strong>我能分享的資源</strong></h6>
|
|
|
<div class="desc">{{ item.supply }}</div>
|
|
|
<div class="url py-2">網址：<a :href="item.supply_link" target="_blank" class="text-moBlue">{{ item.supply_link
|
|
|
}}</a></div>
|
|
|
<hr />
|
|
|
<h6 class="text-darkBlue"><strong>我需要的資源</strong></h6>
|
|
|
<div class="desc">{{ item.demand }}</div>
|
|
|
<div class="url py-2">網址：<a :href="item.demand_link" target="_blank" class="text-moBlue">{{ item.demand_link
|
|
|
}}</a></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</van-list>
|
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content cnt3" v-show="tabActive === 3">
|
|
|
<van-form>
|
|
|
<van-cell-group inset>
|
|
|
<div class="block">
|
|
|
<van-image width="100%" position="top" fit="cover" :src="selectedTpl" />
|
|
|
</div>
|
|
|
</van-cell-group>
|
|
|
|
|
|
<van-cell-group inset>
|
|
|
<van-cell class="text-center bg-lightPink py-3">
|
|
|
<template #title>
|
|
|
<h6 class="text-darkBlue"><strong>NFC感應式版型切換</strong></h6>
|
|
|
</template>
|
|
|
</van-cell>
|
|
|
|
|
|
<van-row>
|
|
|
<van-col span="12" v-for="(item, index) in tab3list" :key="index">
|
|
|
<div class="imgBtn" :data-id="index" @click="handleSelectTpl(item.id)">
|
|
|
<div class="imgCnt">
|
|
|
<van-image :src="item.image" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-col>
|
|
|
</van-row>
|
|
|
</van-cell-group>
|
|
|
|
|
|
<van-sticky position="bottom">
|
|
|
<div class="bottomBtnCnt">
|
|
|
<van-button block class="btn-darkBlue" @click="handleChangeTplSubmit">確認修改</van-button>
|
|
|
</div>
|
|
|
</van-sticky>
|
|
|
</van-form>
|
|
|
</div>
|
|
|
|
|
|
<!-- <Footer/> -->
|
|
|
|
|
|
<van-overlay :show="crop.show" @click="crop.show = false" />
|
|
|
<div class="cropper-section" v-if="crop.show">
|
|
|
<h5 class="text-center">檔案裁切上傳</h5>
|
|
|
<div class="crop-area">
|
|
|
<cropper class="cropper" ref="myCrop" :src="crop.img" :stencil-props="{
|
|
|
aspectRatio: 1 / 1,
|
|
|
}" :auto-zoom="true" />
|
|
|
</div>
|
|
|
<div class="crop-btn">
|
|
|
<van-button round class="btn-darkBlue rounded-pill w-50" size="small" @click="() => { crop.show = false }">
|
|
|
取消
|
|
|
</van-button>
|
|
|
<van-button round class="btn-tomatoRed rounded-pill w-50" size="small" @click="onCrop">
|
|
|
裁切確認
|
|
|
</van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style src="@/assets/css/main.css"></style>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.member {
|
|
|
.content {
|
|
|
min-height: calc(100vh - 142px);
|
|
|
padding-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.cnt2 {
|
|
|
.van-list {
|
|
|
.list-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
padding: 15px 0;
|
|
|
margin: 0 15px;
|
|
|
border-bottom: 1px #e3e3e3 solid;
|
|
|
|
|
|
.left {
|
|
|
flex: 1 0 0%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.avatar {
|
|
|
width: 55px;
|
|
|
min-width: 55px;
|
|
|
aspect-ratio: 1/1;
|
|
|
border-radius: 50%;
|
|
|
margin-right: 10px;
|
|
|
overflow: hidden;
|
|
|
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.name {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
flex: 0 0 auto;
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
flex: 1 0 100%;
|
|
|
border: 1px #e3e3e3 solid;
|
|
|
border-radius: 10px;
|
|
|
padding: 0 10px;
|
|
|
margin: 0;
|
|
|
transition: all .2s;
|
|
|
|
|
|
&.show {
|
|
|
padding: 10px;
|
|
|
margin: 5px 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.van-search,
|
|
|
.van-search-content {
|
|
|
padding-left: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.cnt3 {
|
|
|
.block {
|
|
|
height: 50vh;
|
|
|
text-align: center;
|
|
|
background-color: #000;
|
|
|
padding: 20px 35px;
|
|
|
overflow: hidden;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.imgBtn {
|
|
|
padding: 10px;
|
|
|
margin: 10px;
|
|
|
background-color: #333;
|
|
|
border-radius: 10px;
|
|
|
overflow: hidden;
|
|
|
cursor: pointer;
|
|
|
transform: scale(1);
|
|
|
transition: all .3s;
|
|
|
|
|
|
&.active,
|
|
|
&:hover {
|
|
|
transform: scale(1.02);
|
|
|
}
|
|
|
|
|
|
.imgCnt {
|
|
|
width: 100%;
|
|
|
height: 150px;
|
|
|
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.cropper-section {
|
|
|
margin: 0 auto;
|
|
|
position: fixed;
|
|
|
text-align: center;
|
|
|
top: 50px;
|
|
|
height: 350px;
|
|
|
width: 100%;
|
|
|
max-width: 500px;
|
|
|
background: hsl(0, 0%, 87%);
|
|
|
z-index: 8888;
|
|
|
|
|
|
.crop-area {
|
|
|
margin: 5 auto;
|
|
|
width: 100%;
|
|
|
// height: 330px;
|
|
|
}
|
|
|
|
|
|
.crop-btn {
|
|
|
text-align: center;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</style> |
