|
|
|
|
@ -3,13 +3,6 @@
|
|
|
|
|
<van-nav-bar :title="title" />
|
|
|
|
|
<van-form @submit="onSubmit">
|
|
|
|
|
<van-cell-group inset>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.real_name"
|
|
|
|
|
label="真實姓名"
|
|
|
|
|
name=""
|
|
|
|
|
required
|
|
|
|
|
:rules="[{ required: true, message: '真實姓名必填' }]"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.phone"
|
|
|
|
|
label="手機號碼"
|
|
|
|
|
@ -20,56 +13,50 @@
|
|
|
|
|
{ required: true, message: '手機號必填' },
|
|
|
|
|
{ pattern: /\d{10}/, message: '手機號格式錯誤' },
|
|
|
|
|
]"
|
|
|
|
|
v-if="$route.query.type == 'line'"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.email"
|
|
|
|
|
label="Email"
|
|
|
|
|
name=""
|
|
|
|
|
required
|
|
|
|
|
placeholder="Ex. example@gmail.com "
|
|
|
|
|
:rules="[{ required: true, message: 'Email必填' }]"
|
|
|
|
|
/>
|
|
|
|
|
<template v-if="!isRegister">
|
|
|
|
|
<div style="margin: 16px">
|
|
|
|
|
<van-button round block type="primary" @click="onCheckPhone">
|
|
|
|
|
檢查手機號碼
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else-if="isRegister">
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.real_name"
|
|
|
|
|
label="真實姓名"
|
|
|
|
|
name=""
|
|
|
|
|
required
|
|
|
|
|
:rules="[{ required: true, message: '真實姓名必填' }]"
|
|
|
|
|
/>
|
|
|
|
|
<van-field
|
|
|
|
|
v-model="form.email"
|
|
|
|
|
label="Email"
|
|
|
|
|
name=""
|
|
|
|
|
required
|
|
|
|
|
placeholder="Ex. example@gmail.com "
|
|
|
|
|
:rules="[{ required: true, message: 'Email必填' }]"
|
|
|
|
|
/>
|
|
|
|
|
<div style="margin: 16px">
|
|
|
|
|
<van-button round block type="primary" native-type="submit">
|
|
|
|
|
送出註冊
|
|
|
|
|
</van-button>
|
|
|
|
|
<br />
|
|
|
|
|
<van-button round block type="default" @click="leaveReg">
|
|
|
|
|
以後在說
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
<div style="margin: 16px">
|
|
|
|
|
<van-button round block type="primary" native-type="submit">
|
|
|
|
|
送出註冊
|
|
|
|
|
</van-button>
|
|
|
|
|
<br />
|
|
|
|
|
<van-button round block type="default" @click="leaveReg">
|
|
|
|
|
以後在說
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</van-form>
|
|
|
|
|
<van-overlay :show="crop.show" @click="crop.show = false" />
|
|
|
|
|
<div class="cropper-section" v-if="crop.show">
|
|
|
|
|
<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 type="primary" size="small" plain @click="onClose"
|
|
|
|
|
>取消</van-button
|
|
|
|
|
>
|
|
|
|
|
<van-button type="success" size="small" plain @click="onCrop"
|
|
|
|
|
>剪裁</van-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
import Cookies from "js-cookie";
|
|
|
|
|
|
|
|
|
|
import { ref } from "vue";
|
|
|
|
|
import { ref, onMounted, computed } from "vue";
|
|
|
|
|
|
|
|
|
|
import { useStore } from "vuex";
|
|
|
|
|
import router from "@/router";
|
|
|
|
|
@ -77,10 +64,7 @@ import { useRoute } from "vue-router";
|
|
|
|
|
|
|
|
|
|
import { Toast } from "vant";
|
|
|
|
|
|
|
|
|
|
import { Cropper } from "vue-advanced-cropper";
|
|
|
|
|
import "vue-advanced-cropper/dist/style.css";
|
|
|
|
|
|
|
|
|
|
import { register, checkLineId } from "@/api";
|
|
|
|
|
import { register, checkLineId, checkPhone } from "@/api";
|
|
|
|
|
|
|
|
|
|
const URL = window.URL || window.webkitURL;
|
|
|
|
|
|
|
|
|
|
@ -89,18 +73,16 @@ const route = useRoute();
|
|
|
|
|
const store = useStore();
|
|
|
|
|
|
|
|
|
|
const form = ref({
|
|
|
|
|
verify: route.query.verify || null,
|
|
|
|
|
aid: route.query.aid || undefined,
|
|
|
|
|
phone: "",
|
|
|
|
|
real_name: "",
|
|
|
|
|
email: "",
|
|
|
|
|
// verify: route.query.verify || null,
|
|
|
|
|
// aid: route.query.aid || undefined,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const title = ref("註冊成為會員");
|
|
|
|
|
|
|
|
|
|
const myCrop = ref(null);
|
|
|
|
|
|
|
|
|
|
const crop = ref({
|
|
|
|
|
show: false,
|
|
|
|
|
img: null,
|
|
|
|
|
});
|
|
|
|
|
const isRegister = ref(true);
|
|
|
|
|
|
|
|
|
|
if (route.query.verify) {
|
|
|
|
|
title.value = "會員開通";
|
|
|
|
|
@ -116,60 +98,56 @@ const validatorUrl = (val) => {
|
|
|
|
|
|
|
|
|
|
const leaveReg = () => {
|
|
|
|
|
// window.location.replace("/error.html");
|
|
|
|
|
router.push('/login')
|
|
|
|
|
router.push("/login");
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
|
|
|
|
|
Toast.loading({
|
|
|
|
|
duration: 0,
|
|
|
|
|
message: "圖片上傳中...",
|
|
|
|
|
forbidClick: true,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let res = await axios.post(
|
|
|
|
|
`${process.env.VUE_APP_API_URL}/user/uploadAvatar`,
|
|
|
|
|
imgFile,
|
|
|
|
|
{}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (res.data.code == 200) {
|
|
|
|
|
form.value.avatar = res.data.data;
|
|
|
|
|
Toast.success("上傳成功");
|
|
|
|
|
} else {
|
|
|
|
|
Toast.fail("上傳失敗");
|
|
|
|
|
}
|
|
|
|
|
}, "image/jpeg");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onClose = () => {
|
|
|
|
|
crop.value.show = false;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const afterRead = async (file, name) => {
|
|
|
|
|
crop.value.show = true;
|
|
|
|
|
const sso_domain = computed(()=>{
|
|
|
|
|
return store.state.sso_domain
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const ofile = file.file;
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
isRegister.value = route.query.type == "mobile" ? true : false;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
crop.value.img = URL.createObjectURL(ofile);
|
|
|
|
|
return;
|
|
|
|
|
const onCheckPhone = async () => {
|
|
|
|
|
if (form.value.phone.length == 10) {
|
|
|
|
|
let { id_token } = JSON.parse(sessionStorage.getItem("reg"));
|
|
|
|
|
let res = await checkPhone({ token: id_token, phone: form.value.phone });
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
Toast("您已是會員，已幫您綁定手機號碼");
|
|
|
|
|
Cookies.set("token", res.data.token, {
|
|
|
|
|
expires: 365,
|
|
|
|
|
domain: sso_domain.value,
|
|
|
|
|
});
|
|
|
|
|
Cookies.set("uid", res.data.uid, {
|
|
|
|
|
expires: 365,
|
|
|
|
|
domain: sso_domain.value,
|
|
|
|
|
});
|
|
|
|
|
router.push("/");
|
|
|
|
|
} else if (res.code === 201) {
|
|
|
|
|
Toast("您是我們的新會員，請輸入基本資料");
|
|
|
|
|
isRegister.value = true;
|
|
|
|
|
} else if (res.code === 202) {
|
|
|
|
|
Toast("該手機號已綁定Line帳號,請使用Line登入，或更換手機號碼");
|
|
|
|
|
router.push('/login')
|
|
|
|
|
} else if (res.code === 401) {
|
|
|
|
|
Toast("line 登入已過期");
|
|
|
|
|
return router.push("/login");
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
Toast("手機號碼格式錯誤");
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onSubmit = async () => {
|
|
|
|
|
let { id_token } = JSON.parse(sessionStorage.getItem("reg"));
|
|
|
|
|
let token = null;
|
|
|
|
|
if (route.query.type == "line") {
|
|
|
|
|
let { id_token } = JSON.parse(sessionStorage.getItem("reg"));
|
|
|
|
|
token = id_token;
|
|
|
|
|
} else {
|
|
|
|
|
token = sessionStorage.getItem("reg");
|
|
|
|
|
form.value.phone = token;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Toast.loading({
|
|
|
|
|
duration: 0,
|
|
|
|
|
@ -181,7 +159,11 @@ const onSubmit = async () => {
|
|
|
|
|
form.value.refer_code = Cookies.get("refer_code");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let regRes = await register({ token: id_token, ...form.value });
|
|
|
|
|
let regRes = await register({
|
|
|
|
|
token: token,
|
|
|
|
|
type: route.query.type,
|
|
|
|
|
...form.value,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (regRes.code === 500) {
|
|
|
|
|
Toast("line 登入已過期");
|
|
|
|
|
|
