|
|
|
|
@ -2,19 +2,19 @@
|
|
|
|
|
import _ from 'lodash'
|
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
|
|
|
|
import { ref , nextTick} from 'vue'
|
|
|
|
|
import { ref , nextTick, onBeforeMount} from 'vue'
|
|
|
|
|
|
|
|
|
|
import { Cropper } from 'vue-advanced-cropper';
|
|
|
|
|
import 'vue-advanced-cropper/dist/style.css';
|
|
|
|
|
|
|
|
|
|
import Footer from '@/components/Footer.vue'
|
|
|
|
|
// import Footer from '@/components/Footer.vue'
|
|
|
|
|
import { useStore } from 'vuex'
|
|
|
|
|
import { useRouter } from 'vue-router'
|
|
|
|
|
|
|
|
|
|
import { showToast } from 'vant'
|
|
|
|
|
import { showLoadingToast,showSuccessToast } from 'vant';
|
|
|
|
|
|
|
|
|
|
import { getUserInfo , updateCard , getMovie } from '@/api'
|
|
|
|
|
import { getUserInfo , updateCard , searchConnection, addUserFavi, setUserNfcTpl} from '@/api'
|
|
|
|
|
|
|
|
|
|
const URL = window.URL || window.webkitURL;
|
|
|
|
|
|
|
|
|
|
@ -22,7 +22,8 @@ const store = useStore()
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
|
|
const form = ref({addon:[]})
|
|
|
|
|
const activeName = ref(0)
|
|
|
|
|
|
|
|
|
|
const genderChecked = ref()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const fileList = ref([]);
|
|
|
|
|
@ -63,7 +64,6 @@ const validatorTel = (val) => {
|
|
|
|
|
let userRes = await getUserInfo()
|
|
|
|
|
if(userRes.code===200){
|
|
|
|
|
form.value = userRes.data
|
|
|
|
|
console.log(form);
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
@ -110,10 +110,6 @@ const onCrop = () => {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onClose = () =>{
|
|
|
|
|
crop.value.show = false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const afterRead = async(file, name) => {
|
|
|
|
|
crop.value.show = true
|
|
|
|
|
|
|
|
|
|
@ -159,12 +155,89 @@ const onSubmit = async () => {
|
|
|
|
|
if(res.code===200){
|
|
|
|
|
showSuccessToast('更新成功')
|
|
|
|
|
store.commit('user/setUserInfo',form.value)
|
|
|
|
|
router.push('/')
|
|
|
|
|
router.push('/member')
|
|
|
|
|
}else{
|
|
|
|
|
showToast.fail('更新失敗')
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const searchChecked = ref(true);
|
|
|
|
|
const searchOnUpdateValue = (newValue) => {
|
|
|
|
|
showConfirmDialog({
|
|
|
|
|
title: '提醒',
|
|
|
|
|
message: '是否切换开关？',
|
|
|
|
|
}).then(() => {
|
|
|
|
|
searchChecked.value = newValue;
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const tab2result = ref('');
|
|
|
|
|
const tab2showPicker = ref(false);
|
|
|
|
|
const tab2columns = [
|
|
|
|
|
{ text: '台北', value: 'Taipei' },
|
|
|
|
|
{ text: '桃園', value: 'Taoyuan' },
|
|
|
|
|
{ text: '台中', value: 'Taichung' },
|
|
|
|
|
{ text: '彰化', value: 'Changhua' },
|
|
|
|
|
{ text: '高雄', value: 'Kaohsiung' },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const tab2list = ref([]);
|
|
|
|
|
const tab2Loading = ref(false);
|
|
|
|
|
const tab2Finished = ref(false);
|
|
|
|
|
const tab2TodoLists = ref([]);
|
|
|
|
|
const tab2AddFriend = ref([]);
|
|
|
|
|
onBeforeMount(async () => {
|
|
|
|
|
let res = await searchConnection();
|
|
|
|
|
console.log(res);
|
|
|
|
|
if(res.code===200){
|
|
|
|
|
tab2list.value = res.data;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
res = await addUserFavi({uf_user_id:form.value.user_id});
|
|
|
|
|
// console.log(res);
|
|
|
|
|
if(res.code===200){
|
|
|
|
|
tab2AddFriend.value = res.data;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
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 tab2OnConfirm = ({ selectedOptions }) => {
|
|
|
|
|
tab2result.value = selectedOptions[0]?.text;
|
|
|
|
|
tab2showPicker.value = false;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const tab2searchValue = ref('');
|
|
|
|
|
const tab2OnSearch = () => {
|
|
|
|
|
// tab2TodoLists = tab2list.filter(tab2searchValue);
|
|
|
|
|
// console.log(tab2TodoLists)
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const tab3list = ref([]);
|
|
|
|
|
onBeforeMount(async () => {
|
|
|
|
|
let res = await setUserNfcTpl();
|
|
|
|
|
console.log(res);
|
|
|
|
|
if(res.code===200){
|
|
|
|
|
tab3list.value = res.data;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
@ -189,7 +262,7 @@ const onSubmit = async () => {
|
|
|
|
|
</van-tab>
|
|
|
|
|
</van-tabs>
|
|
|
|
|
|
|
|
|
|
<div class="content" v-show="tabActive === 0">
|
|
|
|
|
<div class="content cnt0" v-show="tabActive === 0">
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
<van-form @submit="onSubmit">
|
|
|
|
|
<div class="text-center p-4">
|
|
|
|
|
@ -274,65 +347,43 @@ const onSubmit = async () => {
|
|
|
|
|
placeholder="請輸入您的地址"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.url"
|
|
|
|
|
v-model="form.age"
|
|
|
|
|
label="年齡"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的年齡"
|
|
|
|
|
/>
|
|
|
|
|
<van-field name="radio" label="性別">
|
|
|
|
|
<template #input>
|
|
|
|
|
<van-radio-group v-model="checked" direction="horizontal">
|
|
|
|
|
<van-radio-group
|
|
|
|
|
v-model="genderChecked"
|
|
|
|
|
direction="horizontal"
|
|
|
|
|
checked-color="#345068"
|
|
|
|
|
>
|
|
|
|
|
<van-radio name="1">男</van-radio>
|
|
|
|
|
<van-radio name="2">女</van-radio>
|
|
|
|
|
</van-radio-group>
|
|
|
|
|
</template>
|
|
|
|
|
</van-field>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="fieldValue"
|
|
|
|
|
is-link
|
|
|
|
|
readonly
|
|
|
|
|
v-model="form.area"
|
|
|
|
|
label="區域"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請選擇縣市區域"
|
|
|
|
|
@click="show = true"
|
|
|
|
|
/>
|
|
|
|
|
<van-popup v-model:show="show" round position="bottom">
|
|
|
|
|
<van-cascader
|
|
|
|
|
v-model="cascaderValue"
|
|
|
|
|
title="請選擇縣市區域"
|
|
|
|
|
:options="options"
|
|
|
|
|
@close="show = false"
|
|
|
|
|
@finish="onFinish"
|
|
|
|
|
/>
|
|
|
|
|
</van-popup>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="fieldValue"
|
|
|
|
|
is-link
|
|
|
|
|
readonly
|
|
|
|
|
v-model="form.work"
|
|
|
|
|
label="工作性質"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請選擇工作性質"
|
|
|
|
|
@click="show = true"
|
|
|
|
|
/>
|
|
|
|
|
<van-popup v-model:show="show" round position="bottom">
|
|
|
|
|
<van-cascader
|
|
|
|
|
v-model="cascaderValue"
|
|
|
|
|
title="請選擇工作性質"
|
|
|
|
|
:options="options"
|
|
|
|
|
@close="show = false"
|
|
|
|
|
@finish="onFinish"
|
|
|
|
|
/>
|
|
|
|
|
</van-popup>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<van-field readonly>
|
|
|
|
|
<template #label>是否公開<br/>資料搜尋</template>
|
|
|
|
|
<template #input>
|
|
|
|
|
<van-switch
|
|
|
|
|
v-model="adSwitchStatus"
|
|
|
|
|
@update:model-value="onUpdateValue"
|
|
|
|
|
v-model="searchChecked"
|
|
|
|
|
@update:model-value="searchOnUpdateValue"
|
|
|
|
|
size="18px"
|
|
|
|
|
active-color="#345068"
|
|
|
|
|
inactive-color="#888888"
|
|
|
|
|
@ -351,168 +402,338 @@ const onSubmit = async () => {
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
<van-form @submit="onSubmit12">
|
|
|
|
|
<van-nav-bar class="bg-lightPink">
|
|
|
|
|
<van-form @submit="onSubmit">
|
|
|
|
|
<van-cell class="text-center bg-lightPink py-3">
|
|
|
|
|
<template #title>
|
|
|
|
|
<h6 class="text-darkBlue"><strong>人脈資訊</strong></h6>
|
|
|
|
|
</template>
|
|
|
|
|
</van-nav-bar>
|
|
|
|
|
</van-cell>
|
|
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.note"
|
|
|
|
|
name="pattern"
|
|
|
|
|
placeholder="請輸入簡短的自我介紹"
|
|
|
|
|
label-align="top"
|
|
|
|
|
>
|
|
|
|
|
<template #label>
|
|
|
|
|
<h6><i class="fa-regular fa-gem text-darkBlue"></i> 一句話介紹自己</h6>
|
|
|
|
|
<i class="fa-regular fa-gem text-darkBlue"></i> 一句話介紹自己
|
|
|
|
|
</template>
|
|
|
|
|
</van-field>
|
|
|
|
|
|
|
|
|
|
<van-collapse v-model="activeName" accordion>
|
|
|
|
|
<van-collapse accordion>
|
|
|
|
|
<van-collapse-item name="1">
|
|
|
|
|
<template #title>
|
|
|
|
|
<h6><i class="fa-regular fa-gem text-darkBlue"></i> 我能分享的資源</h6>
|
|
|
|
|
<i class="fa-regular fa-gem text-darkBlue"></i> 我能分享的資源
|
|
|
|
|
</template>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.supply"
|
|
|
|
|
rows="3"
|
|
|
|
|
type="textarea"
|
|
|
|
|
maxlength="100"
|
|
|
|
|
placeholder="請填寫能分享的資源"
|
|
|
|
|
show-word-limit
|
|
|
|
|
>
|
|
|
|
|
</van-field>
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.supply_link"
|
|
|
|
|
name="pattern"
|
|
|
|
|
placeholder="分享網址"
|
|
|
|
|
:rules="[
|
|
|
|
|
{ validator: validatorUrl, message: '網址格式不正確,Ex. http://' },
|
|
|
|
|
]"
|
|
|
|
|
/>
|
|
|
|
|
</van-collapse-item>
|
|
|
|
|
<van-collapse-item title="标题2" name="2">
|
|
|
|
|
技术无非就是那些开发它的人的共同灵魂。
|
|
|
|
|
<van-collapse-item name="2">
|
|
|
|
|
<template #title>
|
|
|
|
|
<i class="fa-regular fa-gem text-darkBlue"></i> 我需要的資源
|
|
|
|
|
</template>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.demand"
|
|
|
|
|
rows="3"
|
|
|
|
|
type="textarea"
|
|
|
|
|
maxlength="100"
|
|
|
|
|
placeholder="請填寫能分享的資源"
|
|
|
|
|
show-word-limit
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.demand_link"
|
|
|
|
|
name="pattern"
|
|
|
|
|
placeholder="需求連結"
|
|
|
|
|
/>
|
|
|
|
|
</van-collapse-item>
|
|
|
|
|
<van-collapse-item title="标题3" name="3">
|
|
|
|
|
在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
|
|
|
|
|
<van-collapse-item name="3">
|
|
|
|
|
<template #title>
|
|
|
|
|
<i class="fa-regular fa-gem text-darkBlue"></i> 菁英交流資訊
|
|
|
|
|
</template>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.exchange"
|
|
|
|
|
rows="3"
|
|
|
|
|
type="textarea"
|
|
|
|
|
maxlength="100"
|
|
|
|
|
placeholder="請填寫能分享的資源"
|
|
|
|
|
show-word-limit
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.exchange_link"
|
|
|
|
|
name="pattern"
|
|
|
|
|
placeholder="需求連結"
|
|
|
|
|
/>
|
|
|
|
|
</van-collapse-item>
|
|
|
|
|
</van-collapse>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="p-5">
|
|
|
|
|
<van-button block class="btn-darkBlue" native-type="submit">
|
|
|
|
|
確認修改
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</van-form>
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="content" v-show="tabActive === 1" v-for="(v,idx) in form.addon" :key="idx"> -->
|
|
|
|
|
<div class="content" v-show="tabActive === 1">
|
|
|
|
|
|
|
|
|
|
<div class="content cnt1" v-show="tabActive === 1">
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
<van-form @submit="onSubmit2">
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.real_name"
|
|
|
|
|
label="姓名"
|
|
|
|
|
name="pattern"
|
|
|
|
|
placeholder="請輸入您的姓名"
|
|
|
|
|
:rules="[{ required: true, message: '姓名為必填' }]"
|
|
|
|
|
/>
|
|
|
|
|
<van-form @submit="onSubmit">
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.company"
|
|
|
|
|
label="公司名稱"
|
|
|
|
|
v-model="form.nfcurl"
|
|
|
|
|
label="個人網頁"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的公司名稱"
|
|
|
|
|
:rules="[{ required: true, message: '公司名稱必填' }]"
|
|
|
|
|
placeholder="請輸入您的個人網頁"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.title"
|
|
|
|
|
label="職稱"
|
|
|
|
|
v-model="form.line"
|
|
|
|
|
label="Line"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的職稱"
|
|
|
|
|
placeholder="請輸入您的Line ID"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.phone"
|
|
|
|
|
label="手機"
|
|
|
|
|
v-model="form.facebook"
|
|
|
|
|
label="Facebook"
|
|
|
|
|
name=""
|
|
|
|
|
type="tel"
|
|
|
|
|
placeholder="Ex. 0900000001 不要有空格"
|
|
|
|
|
:rules="[{ required: true, message: '手機號必填' },{ pattern: /\d{10}/ , message: '手機號格式錯誤' }]"
|
|
|
|
|
placeholder="請輸入您的Facebook"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.tel"
|
|
|
|
|
label="市話"
|
|
|
|
|
v-model="form.ig"
|
|
|
|
|
label="IG"
|
|
|
|
|
name=""
|
|
|
|
|
type="tel"
|
|
|
|
|
placeholder="請輸入您的市話"
|
|
|
|
|
:rules="[{ validator: validatorTel, message: '市話格式不正確,Ex. 02xxxx or 02-xxxx' }]"
|
|
|
|
|
placeholder="請輸入您的IG"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.email"
|
|
|
|
|
label="Email"
|
|
|
|
|
v-model="form.youTube"
|
|
|
|
|
label="YouTube"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的Email"
|
|
|
|
|
:rules="[{ required: true, message: 'Email必填' },{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]"
|
|
|
|
|
placeholder="請輸入您的YouTube"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.address"
|
|
|
|
|
label="住址"
|
|
|
|
|
v-model="form.wechat"
|
|
|
|
|
label="WeChat"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的地址"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.url"
|
|
|
|
|
label="年齡"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的年齡"
|
|
|
|
|
placeholder="請輸入您的WeChat"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<div class="p-5">
|
|
|
|
|
<div class="px-5 py-4">
|
|
|
|
|
<van-button block class="btn-darkBlue" native-type="submit">
|
|
|
|
|
確認修改
|
|
|
|
|
<h6>確認修改</h6>
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</van-form>
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
<!-- <van-cell-group inset>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
<van-button type="primary" icon="arrow-up" plain hairline @click="onMoveBtn(0,idx)">上移</van-button>
|
|
|
|
|
<van-button type="primary" icon="arrow-down" plain hairline @click="onMoveBtn(1,idx)">下移</van-button>
|
|
|
|
|
<van-button type="danger" icon="delete-o" plain hairline @click="onDelBtn(idx)">刪除</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
<van-field
|
|
|
|
|
label="名稱"
|
|
|
|
|
name=""
|
|
|
|
|
v-model="form.addon[idx].name"
|
|
|
|
|
placeholder="按鈕名稱"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
label="連結"
|
|
|
|
|
name=""
|
|
|
|
|
v-model="form.addon[idx].link"
|
|
|
|
|
placeholder="按鈕連結"
|
|
|
|
|
/>
|
|
|
|
|
<div class="add-btn" @click="onAddBtn">
|
|
|
|
|
<van-button type="success" plain hairline>新增按鈕</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</van-cell-group> -->
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
<van-form @submit="onSubmit">
|
|
|
|
|
<van-cell class="bg-lightPink">
|
|
|
|
|
<template #title>
|
|
|
|
|
<h6 class="text-darkBlue"><strong>相關連結</strong></h6>
|
|
|
|
|
</template>
|
|
|
|
|
<template #value>
|
|
|
|
|
<van-button size="small" class="btn-outline-darkBlue" @click="onAddBtn">
|
|
|
|
|
<h6>新增連結</h6>
|
|
|
|
|
</van-button>
|
|
|
|
|
</template>
|
|
|
|
|
</van-cell>
|
|
|
|
|
|
|
|
|
|
<van-field v-for="(item,idx) in form.addon" :key="idx">
|
|
|
|
|
<template #label>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="item.name"
|
|
|
|
|
name=""
|
|
|
|
|
maxlength="10"
|
|
|
|
|
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 @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>
|
|
|
|
|
</van-field>
|
|
|
|
|
|
|
|
|
|
<!-- <van-swipe-cell v-for="(item,idx) in form.addon" :key="idx">
|
|
|
|
|
<template #left>
|
|
|
|
|
<van-button type="danger" icon="delete-o" plain hairline @click="onDelBtn(idx)">刪除</van-button>
|
|
|
|
|
</template>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="item.name"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的連結名稱"
|
|
|
|
|
:rules="[{ required: true, message: '連結名稱必填' }]"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="item.link"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的按鈕連結"
|
|
|
|
|
:rules="[{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]"
|
|
|
|
|
/>
|
|
|
|
|
<template #right>
|
|
|
|
|
<van-button type="primary" icon="arrow-up" plain hairline @click="onMoveBtn(0,idx)">上移</van-button>
|
|
|
|
|
<van-button type="primary" icon="arrow-down" plain hairline @click="onMoveBtn(1,idx)">下移</van-button>
|
|
|
|
|
</template>
|
|
|
|
|
</van-swipe-cell> -->
|
|
|
|
|
|
|
|
|
|
<div class="px-5 py-4">
|
|
|
|
|
<van-button block class="btn-darkBlue" native-type="submit">
|
|
|
|
|
<h6>確認修改</h6>
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</van-form>
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content" v-show="tabActive === 2">
|
|
|
|
|
|
|
|
|
|
<div class="content cnt2" v-show="tabActive === 2">
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
<form action="/">
|
|
|
|
|
<van-search
|
|
|
|
|
v-model="value"
|
|
|
|
|
show-action
|
|
|
|
|
placeholder="请输入搜索关键词"
|
|
|
|
|
@search="onSearch"
|
|
|
|
|
@cancel="onCancel"
|
|
|
|
|
/>
|
|
|
|
|
<van-list
|
|
|
|
|
v-model:loading="loading"
|
|
|
|
|
:finished="finished"
|
|
|
|
|
finished-text="没有更多了"
|
|
|
|
|
@load="onLoad"
|
|
|
|
|
>
|
|
|
|
|
<van-cell v-for="item in list" :key="item" :title="item" />
|
|
|
|
|
</van-list>
|
|
|
|
|
</form>
|
|
|
|
|
<van-row align="center">
|
|
|
|
|
<van-col span="8">
|
|
|
|
|
<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
|
|
|
|
|
:columns="tab2columns"
|
|
|
|
|
@confirm="tab2OnConfirm"
|
|
|
|
|
@cancel="tab2showPicker = false"
|
|
|
|
|
/>
|
|
|
|
|
</van-popup>
|
|
|
|
|
</van-col>
|
|
|
|
|
<van-col span="16">
|
|
|
|
|
<van-search
|
|
|
|
|
v-model="tab2searchValue"
|
|
|
|
|
placeholder="請輸入搜尋關鍵字"
|
|
|
|
|
@search="tab2OnSearch"
|
|
|
|
|
/>
|
|
|
|
|
</van-col>
|
|
|
|
|
</van-row>
|
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
<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>
|
|
|
|
|
<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 size="normal" class="border-0"><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=""></a></div>
|
|
|
|
|
<hr/>
|
|
|
|
|
<h6 class="text-darkBlue"><strong>我需要的資源</strong></h6>
|
|
|
|
|
<div class="desc">{{item.demand}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</van-list>
|
|
|
|
|
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content" v-show="tabActive === 3">
|
|
|
|
|
|
|
|
|
|
<div class="content cnt3" v-show="tabActive === 3">
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
test3
|
|
|
|
|
<van-form @submit="onSubmit">
|
|
|
|
|
<van-cell class="text-center bg-lightPink py-3">
|
|
|
|
|
<template #title>
|
|
|
|
|
<h6 class="text-darkBlue"><strong>感應式版型切換</strong></h6>
|
|
|
|
|
</template>
|
|
|
|
|
</van-cell>
|
|
|
|
|
|
|
|
|
|
<div class="text-center bg-dark px-5 pt-3">
|
|
|
|
|
<van-image
|
|
|
|
|
width="100%"
|
|
|
|
|
height="500"
|
|
|
|
|
position="top"
|
|
|
|
|
fit="cover"
|
|
|
|
|
src="/src/assets/images/tp/tp_1.jpg"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="d-flex justify-content-center py-3">
|
|
|
|
|
<van-button class="btn-tomatoRed px-5 mr-2">
|
|
|
|
|
預覽
|
|
|
|
|
</van-button>
|
|
|
|
|
<van-button class="btn-darkBlue px-5" native-type="submit">
|
|
|
|
|
確認修改
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</van-form>
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
<van-row>
|
|
|
|
|
<van-col span="12" v-for="(item, index) in tab3list" :key="index">
|
|
|
|
|
<div class="imgBtn">
|
|
|
|
|
<div class="imgCnt">{{ item }}
|
|
|
|
|
<van-image
|
|
|
|
|
src="/src/assets/images/tp/tp_1.jpg"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</van-col>
|
|
|
|
|
</van-row>
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@ -544,5 +765,76 @@ const onSubmit = async () => {
|
|
|
|
|
<style src="@/assets/css/main.css"></style>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.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;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cnt3{
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
bruce68410
3 years ago
