|
|
|
|
@ -22,6 +22,7 @@ const store = useStore()
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
|
|
const form = ref({addon:[]})
|
|
|
|
|
const activeName = ref(0)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const fileList = ref([]);
|
|
|
|
|
@ -62,6 +63,7 @@ const validatorTel = (val) => {
|
|
|
|
|
let userRes = await getUserInfo()
|
|
|
|
|
if(userRes.code===200){
|
|
|
|
|
form.value = userRes.data
|
|
|
|
|
console.log(form);
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
@ -177,7 +179,7 @@ const onSubmit = async () => {
|
|
|
|
|
</van-nav-bar>
|
|
|
|
|
|
|
|
|
|
<van-tabs class="van-tabs" :lazy-render="true" v-model:active="tabActive">
|
|
|
|
|
<van-tab v-for="(item, index) in tabItemObj">
|
|
|
|
|
<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>
|
|
|
|
|
@ -187,30 +189,40 @@ const onSubmit = async () => {
|
|
|
|
|
</van-tab>
|
|
|
|
|
</van-tabs>
|
|
|
|
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
|
|
|
|
<van-cell-group v-show="tabActive === 0">
|
|
|
|
|
<div class="content" v-show="tabActive === 0">
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
<van-form @submit="onSubmit">
|
|
|
|
|
<van-uploader :after-read="afterRead" :max-count="1" name="averter" class="my-4">
|
|
|
|
|
<div class="upload-main">
|
|
|
|
|
<img
|
|
|
|
|
class="upload-img"
|
|
|
|
|
:src="form.avatar"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="form.avatar"
|
|
|
|
|
/>
|
|
|
|
|
<img
|
|
|
|
|
class="upload-img"
|
|
|
|
|
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 type="primary" size="small">上傳檔案</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</van-uploader>
|
|
|
|
|
<div class="text-center p-4">
|
|
|
|
|
<van-uploader :after-read="afterRead" :max-count="1" name="averter" class="mb-4">
|
|
|
|
|
<div class="upload-main">
|
|
|
|
|
<img
|
|
|
|
|
class="upload-img"
|
|
|
|
|
:src="form.avatar"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="form.avatar"
|
|
|
|
|
/>
|
|
|
|
|
<img
|
|
|
|
|
class="upload-img"
|
|
|
|
|
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"
|
|
|
|
|
placeholder="請輸入100字以內的簡介"
|
|
|
|
|
show-word-limit
|
|
|
|
|
:style="{border:'1px #e3e3e3 solid',borderRadius:'6px'}"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.real_name"
|
|
|
|
|
@ -263,53 +275,198 @@ const onSubmit = async () => {
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.url"
|
|
|
|
|
label="網址"
|
|
|
|
|
label="年齡"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的網址"
|
|
|
|
|
:rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. http://' }]"
|
|
|
|
|
placeholder="請輸入您的年齡"
|
|
|
|
|
/>
|
|
|
|
|
<van-field name="radio" label="性別">
|
|
|
|
|
<template #input>
|
|
|
|
|
<van-radio-group v-model="checked" direction="horizontal">
|
|
|
|
|
<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
|
|
|
|
|
label="區域"
|
|
|
|
|
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
|
|
|
|
|
label="工作性質"
|
|
|
|
|
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"
|
|
|
|
|
size="18px"
|
|
|
|
|
active-color="#345068"
|
|
|
|
|
inactive-color="#888888"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</van-field>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="p-5">
|
|
|
|
|
<van-button block class="btn-darkBlue" native-type="submit">
|
|
|
|
|
確認修改
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</van-form>
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
<van-form @submit="onSubmit12">
|
|
|
|
|
<van-nav-bar class="bg-lightPink">
|
|
|
|
|
<template #title>
|
|
|
|
|
<h6 class="text-darkBlue"><strong>人脈資訊</strong></h6>
|
|
|
|
|
</template>
|
|
|
|
|
</van-nav-bar>
|
|
|
|
|
|
|
|
|
|
<van-field
|
|
|
|
|
name="pattern"
|
|
|
|
|
placeholder="請輸入簡短的自我介紹"
|
|
|
|
|
label-align="top"
|
|
|
|
|
>
|
|
|
|
|
<template #label>
|
|
|
|
|
<h6><i class="fa-regular fa-gem text-darkBlue"></i> 一句話介紹自己</h6>
|
|
|
|
|
</template>
|
|
|
|
|
</van-field>
|
|
|
|
|
|
|
|
|
|
<van-collapse v-model="activeName" accordion>
|
|
|
|
|
<van-collapse-item name="1">
|
|
|
|
|
<template #title>
|
|
|
|
|
<h6><i class="fa-regular fa-gem text-darkBlue"></i> 我能分享的資源</h6>
|
|
|
|
|
</template>
|
|
|
|
|
<van-field
|
|
|
|
|
rows="3"
|
|
|
|
|
type="textarea"
|
|
|
|
|
maxlength="100"
|
|
|
|
|
placeholder="請填寫能分享的資源"
|
|
|
|
|
show-word-limit
|
|
|
|
|
>
|
|
|
|
|
</van-field>
|
|
|
|
|
<van-field
|
|
|
|
|
name="pattern"
|
|
|
|
|
placeholder="分享網址"
|
|
|
|
|
/>
|
|
|
|
|
</van-collapse-item>
|
|
|
|
|
<van-collapse-item title="标题2" name="2">
|
|
|
|
|
技术无非就是那些开发它的人的共同灵魂。
|
|
|
|
|
</van-collapse-item>
|
|
|
|
|
<van-collapse-item title="标题3" name="3">
|
|
|
|
|
在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
|
|
|
|
|
</van-collapse-item>
|
|
|
|
|
</van-collapse>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</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">
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
<van-form @submit="onSubmit2">
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.real_name"
|
|
|
|
|
label="姓名"
|
|
|
|
|
name="pattern"
|
|
|
|
|
placeholder="請輸入您的姓名"
|
|
|
|
|
:rules="[{ required: true, message: '姓名為必填' }]"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.line"
|
|
|
|
|
label="Line"
|
|
|
|
|
v-model="form.company"
|
|
|
|
|
label="公司名稱"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的Line ID"
|
|
|
|
|
placeholder="請輸入您的公司名稱"
|
|
|
|
|
:rules="[{ required: true, message: '公司名稱必填' }]"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.facebook"
|
|
|
|
|
label="Facebook"
|
|
|
|
|
v-model="form.title"
|
|
|
|
|
label="職稱"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的臉書連結"
|
|
|
|
|
placeholder="請輸入您的職稱"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.ig"
|
|
|
|
|
label="IG"
|
|
|
|
|
v-model="form.phone"
|
|
|
|
|
label="手機"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的IG ID"
|
|
|
|
|
type="tel"
|
|
|
|
|
placeholder="Ex. 0900000001 不要有空格"
|
|
|
|
|
:rules="[{ required: true, message: '手機號必填' },{ pattern: /\d{10}/ , message: '手機號格式錯誤' }]"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.youtube"
|
|
|
|
|
label="YouTube"
|
|
|
|
|
v-model="form.tel"
|
|
|
|
|
label="市話"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的Youtube連結"
|
|
|
|
|
type="tel"
|
|
|
|
|
placeholder="請輸入您的市話"
|
|
|
|
|
:rules="[{ validator: validatorTel, message: '市話格式不正確,Ex. 02xxxx or 02-xxxx' }]"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.mark"
|
|
|
|
|
rows="3"
|
|
|
|
|
autosize
|
|
|
|
|
label="簡介"
|
|
|
|
|
type="textarea"
|
|
|
|
|
maxlength="100"
|
|
|
|
|
placeholder="請輸入簡介"
|
|
|
|
|
show-word-limit
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<van-button round block type="primary" native-type="submit">
|
|
|
|
|
送出
|
|
|
|
|
</van-button>
|
|
|
|
|
v-model="form.email"
|
|
|
|
|
label="Email"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的Email"
|
|
|
|
|
:rules="[{ required: true, message: 'Email必填' },{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.address"
|
|
|
|
|
label="住址"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的地址"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.url"
|
|
|
|
|
label="年齡"
|
|
|
|
|
name=""
|
|
|
|
|
placeholder="請輸入您的年齡"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<div class="p-5">
|
|
|
|
|
<van-button block class="btn-darkBlue" native-type="submit">
|
|
|
|
|
確認修改
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</van-form>
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
<van-cell-group v-show="tabActive === 1" v-for="(v,idx) in form.addon" :key="idx">
|
|
|
|
|
<!-- <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>
|
|
|
|
|
@ -330,36 +487,56 @@ const onSubmit = async () => {
|
|
|
|
|
<div class="add-btn" @click="onAddBtn">
|
|
|
|
|
<van-button type="success" plain hairline>新增按鈕</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
<van-cell-group v-show="tabActive === 2">
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
<van-cell-group v-show="tabActive === 3">
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
</van-cell-group> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content" 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-cell-group>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content" v-show="tabActive === 3">
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
test3
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <Footer/> -->
|
|
|
|
|
|
|
|
|
|
<van-overlay :show="crop.show" @click="crop.show = false" />
|
|
|
|
|
<div class="cropper-section" v-if="crop.show">
|
|
|
|
|
<div class="crop-area">
|
|
|
|
|
<cropper
|
|
|
|
|
<van-popup class="cropPopup" v-model:show="crop.show" closeable>
|
|
|
|
|
<h5 class="text-center mt-3">檔案裁切上傳</h5>
|
|
|
|
|
<div class="cropper-section">
|
|
|
|
|
<div class="crop-area">
|
|
|
|
|
<cropper
|
|
|
|
|
class="cropper"
|
|
|
|
|
ref="myCrop"
|
|
|
|
|
:src="crop.img"
|
|
|
|
|
:stencil-props="{
|
|
|
|
|
aspectRatio: 1/1
|
|
|
|
|
aspectRatio: 1 / 1,
|
|
|
|
|
}"
|
|
|
|
|
:auto-zoom="true"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="crop-btn">
|
|
|
|
|
<van-button type="primary" size="small" plain @click="onClose">取消</van-button>
|
|
|
|
|
<van-button type="success" size="small" plain @click="onCrop">剪裁</van-button>
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<van-button round class="btn-tomatoRed rounded-pill w-50 mt-3" size="small" @click="onCrop">
|
|
|
|
|
裁切確認
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</van-popup>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -367,42 +544,5 @@ const onSubmit = async () => {
|
|
|
|
|
<style src="@/assets/css/main.css"></style>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.upload-main{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.upload-img{
|
|
|
|
|
width: 80px;
|
|
|
|
|
aspect-ratio: 1/1;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cropper {
|
|
|
|
|
height: 300px;
|
|
|
|
|
// width: 300px;
|
|
|
|
|
background: #DDD;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cropper-section{
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
position: fixed;
|
|
|
|
|
text-align: center;
|
|
|
|
|
top: 50px;
|
|
|
|
|
// left: 0;
|
|
|
|
|
height: 350px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 500px;
|
|
|
|
|
background: #DDD;
|
|
|
|
|
z-index: 8888;
|
|
|
|
|
.crop-area{
|
|
|
|
|
margin: 5 auto;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 330px;
|
|
|
|
|
}
|
|
|
|
|
.crop-btn{
|
|
|
|
|
background-color: #666;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
bruce68410
3 years ago