1326 lines
50 KiB
Vue
1326 lines
50 KiB
Vue
<template>
|
||
<div class="archives">
|
||
<div class="user-info">
|
||
<div class="avatar">
|
||
<a-upload
|
||
v-model:fileList="fileList"
|
||
name="avatar"
|
||
list-type="picture-card"
|
||
class="avatar-uploader"
|
||
:show-upload-list="false"
|
||
:customRequest="uploadspic"
|
||
@change="handleChange"
|
||
>
|
||
<a-avatar :size="85" shape="circle" :src="userinfo.img">
|
||
<template v-slot:icon><UserOutlined /></template>
|
||
</a-avatar>
|
||
<div class="mengceng" style="width: 85px; height: 85px">
|
||
{{ lan.$t("xiugaitouxiang") }}
|
||
</div>
|
||
</a-upload>
|
||
|
||
<div class="user-name" v-if="showname">
|
||
<div
|
||
class="update-btn"
|
||
|
||
style="color: #fff; cursor: unset"
|
||
>
|
||
{{ lan.$t("xiugai") }}
|
||
</div>
|
||
<div class="value">{{ userinfo.name }}</div>
|
||
<div class="update-btn" @click="updateUserName">
|
||
{{ lan.$t("xiugai") }}
|
||
</div>
|
||
</div>
|
||
<div class="user-name" v-else>
|
||
<a-input
|
||
size="small"
|
||
v-model:value="userinfo.name"
|
||
:placeholder="lan.$t('shuruxinnicheng')"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-box basic">
|
||
<div class="title">{{ lan.$t("jibenxinxi") }}</div>
|
||
<div class="main-container">
|
||
<div class="input-box country">
|
||
<div class="label">{{ lan.$t("laiziguojia") }}</div>
|
||
<a-select
|
||
v-model:value="userinfo.country"
|
||
style="width: 171px"
|
||
size="small"
|
||
ref="select"
|
||
show-search
|
||
:getPopupContainer="
|
||
(triggerNode) => triggerNode.parentNode
|
||
"
|
||
>
|
||
<a-select-option
|
||
v-for="(item, index) in chiveslist[0]"
|
||
:key="index"
|
||
:value="item.name"
|
||
>
|
||
{{ item.name }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<div class="input-box address">
|
||
<div class="label">{{ lan.$t("juzhudi") }}</div>
|
||
<a-input
|
||
size="small"
|
||
v-model:value="userinfo.live"
|
||
:placeholder="lan.$t('shurujuzhudi')"
|
||
/>
|
||
</div>
|
||
<div class="input-box teach-lang">
|
||
<div class="label">{{ lan.$t("jiaoshou") }}</div>
|
||
<a-select
|
||
v-model:value="userinfo.tlanguageValue"
|
||
style="width: 171px"
|
||
size="small"
|
||
show-search
|
||
ref="select"
|
||
:getPopupContainer="
|
||
(triggerNode) => triggerNode.parentNode
|
||
"
|
||
>
|
||
<a-select-option
|
||
v-for="(item, index) in interestslist"
|
||
:key="index"
|
||
:value="parseInt(item.value)"
|
||
>
|
||
{{ item.name }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<div class="input-box speak-lang">
|
||
<div class="label">{{ lan.$t("wohaihuishuo") }}</div>
|
||
<div class="speak-array">
|
||
<div class="lang-items">
|
||
<div
|
||
class="speak-item"
|
||
v-for="(lang, indexs) in userinfo.willsay"
|
||
:key="indexs"
|
||
>
|
||
<a-select
|
||
v-model:value="lang.name"
|
||
style="width: 171px"
|
||
size="small"
|
||
ref="select"
|
||
show-search
|
||
@change="choosewillsay"
|
||
:getPopupContainer="
|
||
(triggerNode) =>
|
||
triggerNode.parentNode
|
||
"
|
||
>
|
||
<a-select-option
|
||
v-for="(item,
|
||
index) in chiveslist[1]"
|
||
:key="index"
|
||
:value="item.name"
|
||
>
|
||
{{ item.name }}
|
||
</a-select-option>
|
||
</a-select>
|
||
<div class="proficiency">
|
||
<div class="p-title">
|
||
{{ lan.$t("shuliandu") }}
|
||
</div>
|
||
<div class="value">
|
||
<!-- <a-rate v-model:value="lang.proficiency" style="fontSize: 15px">
|
||
<template v-slot:character><img src="" style="width: 10px;height: 10px;background-color: #0f0;"/>{{}}</template>
|
||
</a-rate> -->
|
||
<img
|
||
@click="setlevel(indexs, i)"
|
||
v-for="i in 5"
|
||
:key="i"
|
||
:src="
|
||
lang.level >= i
|
||
? smilet
|
||
: smile
|
||
"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="update-btn" @click="addSpeakLang">
|
||
{{ lan.$t("jixutianjia") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="input-box native-lang">
|
||
<div class="label">{{ lan.$t("muyu") }}</div>
|
||
<!-- <a-select
|
||
v-model:value="userinfo.mtongue"
|
||
style="width: 171px"
|
||
size="small"
|
||
ref="select"
|
||
:getPopupContainer="triggerNode => triggerNode.parentNode"
|
||
>
|
||
<a-select-option v-for="(item, index) in chiveslist[1]" :key="index" :value="item.name">
|
||
{{ item.name }}
|
||
</a-select-option>
|
||
</a-select> -->
|
||
<a-input
|
||
size="small"
|
||
v-model:value="userinfo.mtongue"
|
||
:placeholder="lan.$t('xindemuyu')"
|
||
/>
|
||
</div>
|
||
<div class="input-box video-lang">
|
||
<div class="label">{{ lan.$t("duanshipin") }}</div>
|
||
<a-upload
|
||
list-type="picture"
|
||
:customRequest="uploads"
|
||
:beforeUpload="beforeVideoUpload"
|
||
>
|
||
<div class="upload-image">
|
||
<PlaySquareOutlined
|
||
style="fontsize: 22px"
|
||
v-if="uploadprogress == 0"
|
||
/>
|
||
<a-progress
|
||
type="circle"
|
||
:percent="uploadprogress"
|
||
:width="80"
|
||
v-else
|
||
/>
|
||
</div>
|
||
</a-upload>
|
||
<div class="demand">
|
||
<p class="one-line-hide">
|
||
{{ lan.$t("shipinyaoqiu") }}
|
||
</p>
|
||
<p class="one-line-hide">
|
||
1.{{ lan.$t("shipinyaoqiu1") }}
|
||
</p>
|
||
<p class="one-line-hide">
|
||
2.{{ lan.$t("shipinyaoqiu2") }}
|
||
</p>
|
||
<p class="one-line-hide">
|
||
3.{{ lan.$t("shipinyaoqiu3") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="input-box introduce">
|
||
<div class="label">{{ lan.$t("ziwojieshao") }}</div>
|
||
<a-textarea
|
||
v-model:value="userinfo.desc"
|
||
class="introduce-textarea"
|
||
:placeholder="lan.$t('gerenjieshao')"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-box contact">
|
||
<div class="title">{{ lan.$t("lianxifangshi") }}</div>
|
||
<div class="main-container">
|
||
<div class="input-box mailbox">
|
||
<div class="label">{{ lan.$t("youxiang") }}</div>
|
||
<a-input
|
||
size="small"
|
||
v-model:value="userinfo.email"
|
||
:placeholder="lan.$t('shuruyouxiang')"
|
||
/>
|
||
</div>
|
||
<div class="input-box phone-box">
|
||
<div class="label">{{ lan.$t("shoujihao") }}</div>
|
||
<div class="phone">{{ userinfo.mobile }}</div>
|
||
<div class="update-btn" @click="togglePhoneModal(true)">
|
||
{{ lan.$t("genghuanshoujihao") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-box system-setting">
|
||
<div class="title">{{ lan.$t("xitongshezhi") }}</div>
|
||
<div class="main-container">
|
||
<div class="input-box password-box">
|
||
<div class="label">{{ lan.$t("mima") }}</div>
|
||
<div class="password">************</div>
|
||
<div
|
||
class="update-btn"
|
||
@click="togglePasswordModal(true)"
|
||
>
|
||
{{lan.$t("xiugaimima")}}
|
||
</div>
|
||
</div>
|
||
<div class="input-box time-zone-box">
|
||
<div class="label">{{ lan.$t("shiqu") }}</div>
|
||
<a-select
|
||
v-model:value="userinfo.zoneStr"
|
||
style="width: 171px"
|
||
size="small"
|
||
ref="select"
|
||
show-search
|
||
:getPopupContainer="
|
||
(triggerNode) => triggerNode.parentNode
|
||
"
|
||
>
|
||
<a-select-option
|
||
v-for="(item, index) in zonelist"
|
||
:key="index"
|
||
:value="item.city + item.gmt"
|
||
>
|
||
{{ item.city }}{{ item.gmt }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<div class="input-box currency-box">
|
||
<div class="label">{{ lan.$t("huobi") }}</div>
|
||
<a-select
|
||
style="width: 171px"
|
||
size="small"
|
||
ref="select"
|
||
:getPopupContainer="
|
||
(triggerNode) => triggerNode.parentNode
|
||
"
|
||
@change="currencychange"
|
||
v-model:value="currencyindex"
|
||
>
|
||
<a-select-option
|
||
v-for="(item, index) in currencylist"
|
||
:key="index"
|
||
:value="item.value"
|
||
>
|
||
{{ item.name }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<div class="input-box time-zone">
|
||
<div class="label">{{ lan.$t("yuyan") }}</div>
|
||
<a-select
|
||
v-model:value="userinfo.languageValue"
|
||
style="width: 171px"
|
||
size="small"
|
||
ref="select"
|
||
:getPopupContainer="
|
||
(triggerNode) => triggerNode.parentNode
|
||
"
|
||
>
|
||
<a-select-option
|
||
v-for="(item, index) in languages"
|
||
:key="index"
|
||
:value="item.value"
|
||
>
|
||
{{ item.name }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-container">
|
||
<a-modal
|
||
centered
|
||
:footer="null"
|
||
:getContainer="modalNode"
|
||
dialogClass="modal-dialog"
|
||
v-model:visible="updatePhoneVisible"
|
||
@cancel="hidePhoneModal"
|
||
>
|
||
<template v-slot:closeIcon>
|
||
<img src="@/static/images/delete.png" class="close" />
|
||
</template>
|
||
<!-- 换绑手机号第一步 -->
|
||
<div
|
||
class="public-class phone-container"
|
||
v-if="!isSecondStep"
|
||
>
|
||
<div class="title">
|
||
{{ lan.$t("wanchengrenzheng") }}
|
||
</div>
|
||
<div class="title sub-title">
|
||
{{ lan.$t("shuru") }} {{ userinfo.mobile }}
|
||
{{ lan.$t("shoudaodeyzm") }}
|
||
</div>
|
||
<div class="form-box">
|
||
<div class="form-item">
|
||
<label class="label">{{
|
||
lan.$t("shoujiyanzhengma")
|
||
}}</label>
|
||
<a-input
|
||
size="small"
|
||
v-model:value="verificationCode"
|
||
/>
|
||
<div
|
||
@click="
|
||
sendVerificationCode(
|
||
userinfo.code + userinfo.mobile
|
||
)
|
||
"
|
||
class="confirm-btn"
|
||
>
|
||
{{ lan.$t("huoquyanzhengma")
|
||
}}<span v-if="remainTime > 0"
|
||
>（{{ remainTime }}s）</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div @click="nextPhoneStep" class="confirm-btn">
|
||
{{ lan.$t("xiayibu") }}
|
||
</div>
|
||
</div>
|
||
<!-- 换绑手机号第二步 -->
|
||
<div
|
||
class="public-class phone-container second-step"
|
||
v-else
|
||
>
|
||
<div class="title">
|
||
{{ lan.$t("bangdingxinhaoma") }}
|
||
</div>
|
||
<div class="form-box">
|
||
<div class="form-item">
|
||
<label class="label">{{
|
||
lan.$t("shoujihao")
|
||
}}</label>
|
||
<!-- <a-input size="small" v-model:value="bindPhone.number" /> -->
|
||
<a-input-group compact class="telbox">
|
||
<a-select
|
||
:default-value="quhaolist[0].code"
|
||
size="small"
|
||
@change="getquhao"
|
||
>
|
||
<a-select-option
|
||
v-for="(i, j) in quhaolist"
|
||
:key="j"
|
||
:value="i.code"
|
||
>
|
||
{{ i.name }}+{{ i.code }}
|
||
</a-select-option>
|
||
<!-- <a-select-option value="Jiangsu"> Jiangsu </a-select-option> -->
|
||
</a-select>
|
||
<div class="line"></div>
|
||
<a-input
|
||
v-model:value="mynewtel"
|
||
size="small"
|
||
:placeholder="lan.$t('shurushouji')"
|
||
/>
|
||
</a-input-group>
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="label">{{
|
||
lan.$t("shoujiyanzhengma")
|
||
}}</label>
|
||
<a-input
|
||
size="small"
|
||
v-model:value="bindPhone.code"
|
||
/>
|
||
<div
|
||
@click="
|
||
sendVerificationCode(myquhao + mynewtel)
|
||
"
|
||
class="confirm-btn"
|
||
>
|
||
{{ lan.$t("huoquyanzhengma")
|
||
}}<span v-if="remainTime > 0"
|
||
>（{{ remainTime }}s）</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div @click="updatePhoneNumber" class="confirm-btn">
|
||
{{ lan.$t("bangdingshouji") }}
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<!-- 修改密码 -->
|
||
<a-modal
|
||
centered
|
||
:footer="null"
|
||
:getContainer="modalNode"
|
||
dialogClass="modal-dialog"
|
||
v-model:visible="updatePasswordVisible"
|
||
@cancel="hidePasswordModal"
|
||
>
|
||
<template v-slot:closeIcon>
|
||
<img src="@/static/images/delete.png" class="close" />
|
||
</template>
|
||
<div class="public-class password-container">
|
||
<div class="title">
|
||
{{ lan.$t("xiugaizhanghaomima") }}
|
||
</div>
|
||
<div class="form-box">
|
||
<div class="form-item">
|
||
<label class="label">{{
|
||
lan.$t("yuanmima")
|
||
}}</label>
|
||
<a-input-password
|
||
size="small"
|
||
:visibilityToggle="false"
|
||
v-model:value="passwordForm.original"
|
||
/>
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="label">{{
|
||
lan.$t("xinmima")
|
||
}}</label>
|
||
<a-input-password
|
||
size="small"
|
||
:visibilityToggle="false"
|
||
v-model:value="passwordForm.password"
|
||
/>
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="label">{{
|
||
lan.$t("xinmimatwo")
|
||
}}</label>
|
||
<a-input-password
|
||
size="small"
|
||
:visibilityToggle="false"
|
||
v-model:value="passwordForm.topassword"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div @click="updateUserPassword" class="confirm-btn">
|
||
{{ lan.$t("xiugaimima") }}
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
<div class="submit-btn" @click="submitInfo">
|
||
{{ lan.$t("baocun") }}
|
||
</div>
|
||
</div>
|
||
<nav-bottom></nav-bottom>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import {
|
||
computed,
|
||
defineComponent,
|
||
onMounted,
|
||
reactive,
|
||
Ref,
|
||
ref,
|
||
toRaw,
|
||
watch,
|
||
} from "vue";
|
||
import { UserOutlined, PlaySquareOutlined } from "@ant-design/icons-vue";
|
||
import NavBottom from "@/components/NavBottom.vue";
|
||
import { uploadflie } from "@/utils/vod";
|
||
import store from "@/store";
|
||
import smile from "@/static/images/smile.png";
|
||
import smilet from "@/static/images/smilet.png";
|
||
import {
|
||
changetel,
|
||
checksmscode,
|
||
editpassword,
|
||
editsystemsetting,
|
||
getarchives,
|
||
getcurrencys,
|
||
getlanguages,
|
||
getquhaolist,
|
||
getzonelist,
|
||
interests,
|
||
putmember,
|
||
sendsms,
|
||
} from "@/api/index";
|
||
import { message } from "ant-design-vue";
|
||
import { useI18n } from "@/utils/i18n";
|
||
|
||
export default defineComponent({
|
||
name: "Archives",
|
||
components: {
|
||
UserOutlined,
|
||
PlaySquareOutlined,
|
||
NavBottom,
|
||
},
|
||
setup() {
|
||
const lan: any = useI18n();
|
||
interface SpeakItem {
|
||
lang: string;
|
||
proficiency: number;
|
||
}
|
||
const otherSpeak: Array<SpeakItem> = [
|
||
{
|
||
lang: "请选择",
|
||
proficiency: 0,
|
||
},
|
||
];
|
||
const userinfo = computed(() => {
|
||
return store.state.userinfo;
|
||
});
|
||
// 表单数据
|
||
const currencyindex = ref<string>(userinfo.value.currency);
|
||
const formData = ref(toRaw(userinfo.value));
|
||
watch(userinfo, () => {
|
||
formData.value = toRaw(userinfo.value);
|
||
// console.log(lan.$s(), formData.value.languageValue)
|
||
if(lan.$s() != formData.value.languageValue){
|
||
location.reload();
|
||
}
|
||
console.log(userinfo.value.currencyValue, "listsssss");
|
||
currencyindex.value = userinfo.value.currency;
|
||
console.log(currencyindex.value, "listsssss");
|
||
});
|
||
const modalNode = () =>
|
||
document.getElementsByClassName("modal-container")[0];
|
||
|
||
const chiveslist = ref<any>([[], []]);
|
||
const languages = ref<unknown>([]);
|
||
const quhaolist = ref<any>([]);
|
||
const myquhao = ref<string>("");
|
||
|
||
const mynewtel = ref<string>("");
|
||
|
||
const isSecondStep: Ref<boolean> = ref(false);
|
||
const currencylist = ref<any>([
|
||
{
|
||
alias: "CNY",
|
||
code: "104110041000",
|
||
createdAt: "2020-08-19 11:54:59",
|
||
deletedAt: null,
|
||
dictionaryid: 241,
|
||
name: "人民币￥",
|
||
position: 1,
|
||
publish: 1,
|
||
updatedAt: "2020-08-19 11:54:59",
|
||
value: "1",
|
||
},
|
||
]);
|
||
const zonelist = ref<any>([
|
||
{
|
||
city: "中途岛",
|
||
gmt: "GMT-11:00",
|
||
id: "Pacific/Midway",
|
||
zoneid: 1,
|
||
},
|
||
]);
|
||
const interestslist = ref<any>([
|
||
{
|
||
"dictionaryid": 202,
|
||
"name": "中文",
|
||
"alias": "",
|
||
"code": "104110001000",
|
||
"position": 1,
|
||
"publish": 1,
|
||
"value": "1",
|
||
"deleted_at": null,
|
||
"created_at": "2020-08-13 18:17:18",
|
||
"updated_at": "2020-08-13 18:17:18"
|
||
}
|
||
])
|
||
onMounted(async () => {
|
||
chiveslist.value = await getarchives();
|
||
languages.value = await getlanguages();
|
||
quhaolist.value = await getquhaolist();
|
||
myquhao.value = quhaolist.value[0].code;
|
||
currencylist.value = await getcurrencys();
|
||
zonelist.value = await getzonelist();
|
||
interestslist.value = await interests();
|
||
// currencyindex.value=userinfo.value.currencyValue
|
||
console.log(userinfo.value);
|
||
});
|
||
|
||
/**
|
||
* 修改用户名
|
||
* @return { void }
|
||
*/
|
||
const showname = ref(true);
|
||
function updateUserName(): void {
|
||
console.log("修改");
|
||
showname.value = false;
|
||
}
|
||
/**
|
||
* 添加我还会说语言
|
||
* @return { void }
|
||
*/
|
||
function addSpeakLang(): void {
|
||
formData.value.willsay.push({
|
||
name: "请选择",
|
||
level: 0,
|
||
});
|
||
formData.value.willsayValue.push({
|
||
name: "",
|
||
level: 0,
|
||
});
|
||
}
|
||
// 验证码
|
||
const verificationCode: Ref<string> = ref(""),
|
||
updatePhoneVisible: Ref<boolean> = ref(false);
|
||
/**
|
||
* 关闭手机对话框 清空数据
|
||
*/
|
||
function hidePhoneModal(): void {
|
||
verificationCode.value = "";
|
||
isSecondStep.value = false;
|
||
console.log("close");
|
||
}
|
||
/**
|
||
* 显示修改手机号对话框
|
||
*/
|
||
function togglePhoneModal(value: boolean): void {
|
||
updatePhoneVisible.value = value;
|
||
if (!value) {
|
||
hidePhoneModal();
|
||
}
|
||
}
|
||
// 获取验证码间隔
|
||
const remainTime: Ref<number> = ref(0);
|
||
/**
|
||
* 计算验证码倒计时
|
||
*/
|
||
function computedVerificationCode(): void {
|
||
remainTime.value = 60;
|
||
const timer = setInterval(() => {
|
||
if (remainTime.value > 0) {
|
||
remainTime.value--;
|
||
} else {
|
||
clearInterval(timer);
|
||
}
|
||
}, 1000);
|
||
}
|
||
/**
|
||
* 发送验证码
|
||
*/
|
||
function sendVerificationCode(tel: string): void {
|
||
if (remainTime.value === 0) {
|
||
computedVerificationCode();
|
||
console.log(tel, "send");
|
||
sendsms(tel, 0);
|
||
}
|
||
}
|
||
// 绑定手机号是否是第二步
|
||
interface BindPhoneItem {
|
||
number: string | number;
|
||
code: string | number;
|
||
}
|
||
const bindPhone: BindPhoneItem = reactive({
|
||
number: "",
|
||
code: "",
|
||
});
|
||
/**
|
||
* 绑定手机号下一步
|
||
*/
|
||
async function nextPhoneStep(): Promise<void> {
|
||
remainTime.value = 0;
|
||
if (!isSecondStep.value) {
|
||
console.log(formData.value.code);
|
||
if (verificationCode.value == "") {
|
||
return;
|
||
}
|
||
const res = await checksmscode(
|
||
formData.value.code + formData.value.mobile,
|
||
verificationCode.value
|
||
);
|
||
console.log(res, "0.0");
|
||
if (res) {
|
||
isSecondStep.value = true;
|
||
}
|
||
// isSecondStep.value = true;
|
||
}
|
||
|
||
// isSecondStep.value = true;
|
||
}
|
||
/**
|
||
* 修改手机号
|
||
* @return { void }
|
||
*/
|
||
async function updatePhoneNumber(): Promise<void> {
|
||
console.log("修改手机号");
|
||
console.log(mynewtel.value, myquhao.value, bindPhone.code);
|
||
const res = await checksmscode(
|
||
myquhao.value + mynewtel.value,
|
||
bindPhone.code.toString()
|
||
);
|
||
console.log(res, "xiugai");
|
||
if (res) {
|
||
const res1 = await changetel(mynewtel.value);
|
||
if (res1) {
|
||
store.dispatch("setUserInfo");
|
||
updatePhoneVisible.value = false;
|
||
}
|
||
}
|
||
}
|
||
function getquhao(e?: any) {
|
||
console.log(e);
|
||
myquhao.value = e.toString();
|
||
}
|
||
// 是否显示修改密码框
|
||
const updatePasswordVisible: Ref<boolean> = ref(false);
|
||
interface PassWord {
|
||
original?: string;
|
||
password?: string;
|
||
topassword?: string;
|
||
}
|
||
const passwordForm: PassWord = reactive({
|
||
original: "",
|
||
password: "",
|
||
topassword: "",
|
||
});
|
||
/**
|
||
* 密码对话框清空数据
|
||
*/
|
||
function hidePasswordModal(): void {
|
||
passwordForm.original = "";
|
||
passwordForm.password = "";
|
||
passwordForm.topassword = "";
|
||
}
|
||
/**
|
||
* 显示修改密码对话框
|
||
*/
|
||
function togglePasswordModal(value: boolean): void {
|
||
updatePasswordVisible.value = value;
|
||
if (!value) {
|
||
hidePasswordModal();
|
||
}
|
||
}
|
||
/**
|
||
* 修改密码
|
||
* @return { void }
|
||
*/
|
||
function updateUserPassword(): void {
|
||
console.log(toRaw(passwordForm));
|
||
if (
|
||
toRaw(passwordForm).password === toRaw(passwordForm).topassword
|
||
) {
|
||
if (toRaw(passwordForm).original != "") {
|
||
// console.log(toRaw(passwordForm).password);
|
||
editpassword(toRaw(passwordForm));
|
||
togglePasswordModal(false);
|
||
} else {
|
||
message.error(lan.$t('yuanmimaweikong'));
|
||
}
|
||
} else {
|
||
message.error(lan.$t('mimabuyizhi'));
|
||
}
|
||
}
|
||
/**
|
||
* 提交表单
|
||
* @return { void }
|
||
*/
|
||
async function submitInfo(): Promise<void> {
|
||
// for(let i in toRaw(formData.value).willsay){
|
||
// console.log(toRaw(formData.value).willsay[i])
|
||
// }
|
||
const uesrinfo = toRaw(formData.value);
|
||
// for (let m = 0; m < toRaw(chiveslist.value).length; m++) {
|
||
// for (const i in uesrinfo.willsayValue) {
|
||
// // console.log(toRaw(formData.value).willsayValue[i])
|
||
|
||
// if (typeof uesrinfo.willsay[i].name == "string") {
|
||
// // console.log(toRaw(chiveslist.value))
|
||
// if (
|
||
// uesrinfo.willsay[i].name ==
|
||
// toRaw(chiveslist.value)[m].name
|
||
// ) {
|
||
// uesrinfo.willsayValue[i].name = toRaw(
|
||
// chiveslist.value
|
||
// )[m].languageid;
|
||
// }
|
||
// } else {
|
||
// uesrinfo.willsayValue[i].name =
|
||
// uesrinfo.willsay[i].name;
|
||
// }
|
||
|
||
// uesrinfo.willsayValue[i].level = uesrinfo.willsay[i].level;
|
||
// }
|
||
// }
|
||
|
||
for(const i in uesrinfo.willsay){
|
||
if(uesrinfo.willsay[i].name == '请选择'){
|
||
console.log(111)
|
||
break;
|
||
}
|
||
for(const j in chiveslist.value[1]){
|
||
if(uesrinfo.willsay[i].name == chiveslist.value[1][j].name){
|
||
uesrinfo.willsay[i].name = chiveslist.value[1][j].languageid
|
||
}
|
||
console.log(uesrinfo.willsay[i].name, chiveslist.value[1][j].name)
|
||
}
|
||
}
|
||
const arr: any = {};
|
||
for(const i in uesrinfo.willsay){
|
||
// const a: any = {};
|
||
if(uesrinfo.willsay[i].name == '请选择'){
|
||
console.log(111)
|
||
break;
|
||
}
|
||
arr[uesrinfo.willsay[i].name] = uesrinfo.willsay[i].level
|
||
// arr.push(a);
|
||
// arr.push({uesrinfo.willsay[i].name})
|
||
}
|
||
uesrinfo.willsay = arr;
|
||
console.log(uesrinfo);
|
||
|
||
// console.log(toRaw(formData.value));
|
||
// if (uesrinfo.currency == "") {
|
||
// if (uesrinfo.currencyValue != "") {
|
||
// for (let i = 0; i < currencylist.value.length; i++) {
|
||
// if (
|
||
// uesrinfo.currencyValue ==
|
||
// currencylist.value[i].name
|
||
// ) {
|
||
// uesrinfo.currency = currencylist.value[i].value;
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
// eslint-disable-next-line
|
||
const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
|
||
console.log(userinfo.value.email);
|
||
// console.log();
|
||
// for (let i = 0; i < currencylist.value.length; i++) {
|
||
// if (
|
||
// uesrinfo.currencyValue ==
|
||
// currencylist.value[i].name
|
||
// ) {
|
||
// uesrinfo.currency = currencylist.value[i].value;
|
||
// }
|
||
// }
|
||
for(const i in chiveslist.value[0]){
|
||
if(chiveslist.value[0][i].name == uesrinfo.country){
|
||
uesrinfo.countryValue = chiveslist.value[0][i].id
|
||
}
|
||
}
|
||
for(const i in zonelist.value){
|
||
if((zonelist.value[i].city + zonelist.value[i].gmt) == uesrinfo.zoneStr){
|
||
uesrinfo.zoneid = zonelist.value[i].zoneid
|
||
}
|
||
// console.log(zonelist.value[i].city + zonelist.value[i].gmt, uesrinfo.zoneStr)
|
||
}
|
||
if (reg.test(userinfo.value.email)) {
|
||
putmember(uesrinfo);
|
||
} else {
|
||
message.error(lan.$t('youxiangcuowu'));
|
||
}
|
||
}
|
||
|
||
// uploadflie()3.
|
||
|
||
function setlevel(index: number, level: number) {
|
||
store.state.userinfo.willsay[index].level = level;
|
||
}
|
||
|
||
/**
|
||
* 上传视频
|
||
*/
|
||
interface AntUpload {
|
||
action: string;
|
||
data: unknown;
|
||
file: File;
|
||
}
|
||
const uploadprogress: Ref<number> = ref(0);
|
||
async function uploads(file: AntUpload) {
|
||
uploadprogress.value = 0;
|
||
|
||
const res = await uploadflie(file.file, (info: any) => {
|
||
console.log(info);
|
||
uploadprogress.value = info.percent.toFixed(2) * 100;
|
||
});
|
||
userinfo.value.video = res.video.url;
|
||
}
|
||
|
||
if (formData.value.video != "") {
|
||
uploadprogress.value = 100;
|
||
}
|
||
watch(formData, () => {
|
||
if (formData.value.video != "" && uploadprogress.value == 0) {
|
||
uploadprogress.value = 100;
|
||
}
|
||
console.log(formData.value.country)
|
||
});
|
||
|
||
function choosewillsay(e?: any) {
|
||
console.log(formData.value.willsayValue);
|
||
console.log(e);
|
||
}
|
||
|
||
function currencychange(e?: any) {
|
||
console.log(e);
|
||
userinfo.value.currencyValue = e;
|
||
// editsystemsetting({currency:e})
|
||
}
|
||
async function uploadspic(file: AntUpload) {
|
||
const res = await uploadflie(file.file, (info: any) => {
|
||
console.log(info);
|
||
// uploadpicprogress.value = info.percent.toFixed(2) * 100;
|
||
});
|
||
console.log(res);
|
||
|
||
// picinfo.fileId=res.fileId
|
||
// picinfo.url=res.video.url
|
||
formData.value.img = res.video.url;
|
||
}
|
||
// function selguojia(e: any){
|
||
// userinfo.value.countryValue = e;
|
||
// console.log(e)
|
||
// }
|
||
|
||
return {
|
||
modalNode,
|
||
formData,
|
||
updateUserName,
|
||
addSpeakLang,
|
||
verificationCode,
|
||
updatePhoneVisible,
|
||
hidePhoneModal,
|
||
sendVerificationCode,
|
||
remainTime,
|
||
isSecondStep,
|
||
nextPhoneStep,
|
||
bindPhone,
|
||
updatePhoneNumber,
|
||
togglePhoneModal,
|
||
updatePasswordVisible,
|
||
togglePasswordModal,
|
||
hidePasswordModal,
|
||
passwordForm,
|
||
updateUserPassword,
|
||
submitInfo,
|
||
userinfo: formData,
|
||
uploads,
|
||
smile,
|
||
smilet,
|
||
setlevel,
|
||
chiveslist,
|
||
languages,
|
||
uploadprogress,
|
||
choosewillsay,
|
||
mynewtel,
|
||
quhaolist,
|
||
getquhao,
|
||
myquhao,
|
||
currencylist,
|
||
zonelist,
|
||
currencychange,
|
||
currencyindex,
|
||
showname,
|
||
uploadspic,
|
||
lan,
|
||
interestslist
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.archives {
|
||
width: 100%;
|
||
min-width: 700px;
|
||
background-color: #ffffff;
|
||
padding: 46px;
|
||
border-radius: 17px;
|
||
position: relative;
|
||
.telbox {
|
||
margin-left: 15px;
|
||
font-size: 12px;
|
||
}
|
||
.update-btn {
|
||
font-size: 11px;
|
||
color: #08ae98;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
.user-info {
|
||
margin-bottom: 42px;
|
||
.avatar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
margin-bottom: 30px;
|
||
.user-name {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
margin-top: 11px;
|
||
font-weight: bold;
|
||
.value {
|
||
font-size: 17px;
|
||
color: #111111;
|
||
margin: 0 10px;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
.form-box {
|
||
margin-bottom: 20px;
|
||
.title {
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
color: #111111;
|
||
margin-bottom: 28px;
|
||
}
|
||
.main-container {
|
||
margin-left: 17px;
|
||
::v-deep(.input-box) {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 28px;
|
||
.label {
|
||
width: 60px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: #808080;
|
||
margin-right: 30px;
|
||
line-height: 23px;
|
||
align-self: flex-start;
|
||
}
|
||
.ant-input {
|
||
width: 171px;
|
||
padding: 6px 11px;
|
||
border-radius: 3px;
|
||
border: 1px solid #dcdfe0;
|
||
font-size: 11px;
|
||
color: #3f3f3f;
|
||
}
|
||
.ant-select {
|
||
font-size: 12px;
|
||
color: #3f3f3f;
|
||
}
|
||
.ant-select-dropdown {
|
||
.ant-select-dropdown-menu-item {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
.speak-lang {
|
||
.speak-array {
|
||
display: flex;
|
||
.lang-items {
|
||
.speak-item {
|
||
display: flex;
|
||
align-items: center;
|
||
&:not(:last-child) {
|
||
margin-bottom: 28px;
|
||
}
|
||
.proficiency {
|
||
margin: 0 107px 0 17px;
|
||
display: flex;
|
||
align-items: center;
|
||
.p-title {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: #808080;
|
||
margin-right: 14px;
|
||
}
|
||
.value {
|
||
display: flex;
|
||
> img {
|
||
width: 15px;
|
||
height: 15px;
|
||
margin-right: 6px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.update-btn {
|
||
align-self: flex-end;
|
||
}
|
||
}
|
||
}
|
||
.video-lang {
|
||
.upload-image {
|
||
width: 171px;
|
||
height: 96px;
|
||
border: 1px solid #dcdfe0;
|
||
border-radius: 3px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 17px;
|
||
}
|
||
.demand {
|
||
line-height: 17px;
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
color: #808080;
|
||
// width: 134px;
|
||
p {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
.introduce {
|
||
.ant-input {
|
||
width: 359px;
|
||
}
|
||
.introduce-textarea {
|
||
height: 85px;
|
||
min-height: 85px;
|
||
max-height: 85px;
|
||
}
|
||
}
|
||
.phone-box {
|
||
.phone {
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
color: #404040;
|
||
margin-right: 112px;
|
||
}
|
||
}
|
||
.password-box {
|
||
.password {
|
||
margin-right: 123px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep(.modal-dialog) {
|
||
.close {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
.ant-modal-content {
|
||
box-sizing: border-box;
|
||
padding: 25px 30px;
|
||
width: 569px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 4px 6px 0px rgba(102, 102, 102, 0.07);
|
||
border-radius: 28px;
|
||
.public-class {
|
||
.title {
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
color: #111111;
|
||
}
|
||
.form-box {
|
||
.form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
.label {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: #7f7f7f;
|
||
}
|
||
}
|
||
}
|
||
.confirm-btn {
|
||
display: inline-block;
|
||
border-radius: 2px;
|
||
background: #07ad97;
|
||
font-size: 9px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
height: 22px;
|
||
line-height: 22px;
|
||
padding: 0 17px;
|
||
}
|
||
|
||
// .confirm-btn:hover {
|
||
// background: #07ad97;
|
||
// }
|
||
}
|
||
.password-container {
|
||
.title {
|
||
margin-bottom: 30px;
|
||
}
|
||
.form-box {
|
||
margin-bottom: 50px;
|
||
.form-item {
|
||
.label {
|
||
width: 90px;
|
||
margin-right: 10px;
|
||
}
|
||
&:not(:last-child) {
|
||
margin-bottom: 28px;
|
||
}
|
||
.ant-input-password {
|
||
width: 170px;
|
||
font-size: 11px;
|
||
color: #3f3f3f;
|
||
// .ant-input {
|
||
// letter-spacing: 0;
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.phone-container {
|
||
.sub-title {
|
||
margin: 16px 0 40px;
|
||
}
|
||
.form-box {
|
||
margin-bottom: 50px;
|
||
.form-item {
|
||
.label {
|
||
width: 80px;
|
||
margin-right: 10px;
|
||
}
|
||
.ant-input {
|
||
width: 170px;
|
||
font-size: 11px;
|
||
color: #3f3f3f;
|
||
margin-right: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.second-step {
|
||
.title {
|
||
margin-bottom: 33px;
|
||
}
|
||
.form-box {
|
||
.form-item {
|
||
&:not(:last-child) {
|
||
margin-bottom: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.submit-btn {
|
||
width: 63px;
|
||
height: 23px;
|
||
background: #08ae98;
|
||
border-radius: 3px;
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: 23px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
// .submit-btn:hover {
|
||
// background: #08ae98;
|
||
// }
|
||
}
|
||
::v-deep(.ant-upload-list) {
|
||
display: none;
|
||
}
|
||
.avatar-uploader {
|
||
width: unset;
|
||
padding: 0;
|
||
border: none;
|
||
background-color: none;
|
||
position: relative;
|
||
&::v-deep(.ant-upload) {
|
||
padding: 0;
|
||
border: none;
|
||
background-color: #fff;
|
||
width: unset;
|
||
height: unset;
|
||
}
|
||
.mengceng {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
opacity: 0;
|
||
font-size: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
background-color: #000;
|
||
border-radius: 50%;
|
||
line-height: 1;
|
||
&:hover {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |