10/17
张同海
1 year ago
parent
44290b8767
commit
24aefaeee1
@ -0,0 +1,86 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="dialogVisible"
|
||||||
|
width="30%"
|
||||||
|
:before-close="
|
||||||
|
() => {
|
||||||
|
dialogVisible = false;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="main">
|
||||||
|
<p class="title">订舱信息</p>
|
||||||
|
<p>{{ DialogData.portLoading }} —— {{ DialogData.portDischarge }}</p>
|
||||||
|
<p>{{ DialogData.carrier }} —— {{ `ETD: ${DialogData.etd}` }}</p>
|
||||||
|
<p>
|
||||||
|
{{ DialogData.ctnList[0].cntName }}*{{ DialogData.ctnList[0].ctnNum }}
|
||||||
|
</p>
|
||||||
|
<p class="title">所选服务</p>
|
||||||
|
<div class="serviceBox">
|
||||||
|
<div
|
||||||
|
class="serviceUnit"
|
||||||
|
v-for="item in DialogData.serviceItemList"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
{{ item.value }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="OKSend"> 确定发送 </el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { ref } from "@vue/reactivity";
|
||||||
|
export default {
|
||||||
|
setup(props, ctx) {
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const DialogData = ref({});
|
||||||
|
const OpenDialog = (data) => {
|
||||||
|
DialogData.value = data;
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
const OffDialog = () => {
|
||||||
|
dialogVisible.value = false;
|
||||||
|
};
|
||||||
|
const OKSend = () => {
|
||||||
|
ctx.emit("OKSend", DialogData.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
dialogVisible,
|
||||||
|
DialogData,
|
||||||
|
OpenDialog,
|
||||||
|
OffDialog,
|
||||||
|
OKSend,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.main {
|
||||||
|
font-size: 16px;
|
||||||
|
p {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
&.title {
|
||||||
|
color: #027db4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.serviceBox {
|
||||||
|
display: flex;
|
||||||
|
.serviceUnit {
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #000;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
background: #70b603;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,184 @@
|
|||||||
|
<template>
|
||||||
|
<div class="main">
|
||||||
|
<el-tabs tab-position="left" class="demo-tabs">
|
||||||
|
<el-tab-pane label="更改手机号">
|
||||||
|
<div class="UnitBox">
|
||||||
|
<el-form
|
||||||
|
:model="form"
|
||||||
|
label-width="120px"
|
||||||
|
class="ChangPhoneForm"
|
||||||
|
ref="ruleFormRef"
|
||||||
|
>
|
||||||
|
<el-form-item label="原手机号">
|
||||||
|
<el-input v-model="form.phone" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="原手机验证码">
|
||||||
|
<div class="bind_code">
|
||||||
|
<el-input
|
||||||
|
v-model="form.checkCode"
|
||||||
|
size="large"
|
||||||
|
placeholder="验证码"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
@click="bindforgetSendCode(form.phone)"
|
||||||
|
class="codebtn"
|
||||||
|
:disabled="disabled"
|
||||||
|
>
|
||||||
|
{{ btnText }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="新手机号">
|
||||||
|
<el-input v-model="form.newPhone" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="新手机验证码">
|
||||||
|
<div class="bind_code">
|
||||||
|
<el-input
|
||||||
|
v-model="form.newCheckCode"
|
||||||
|
size="large"
|
||||||
|
placeholder="验证码"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
@click="bindforgetSendCode(form.newPhone, 'new')"
|
||||||
|
class="codebtn"
|
||||||
|
:disabled="newdisabled"
|
||||||
|
>
|
||||||
|
{{ newbtnText }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="onSubmit">更改</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<!-- <el-tab-pane label="Config">Config</el-tab-pane>
|
||||||
|
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||||
|
<el-tab-pane label="Task">Task</el-tab-pane> -->
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { UserChangPhone, genRegisterCheckCode } from "@/api/Index";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
export default {
|
||||||
|
name: "ViewUserinfo",
|
||||||
|
setup() {
|
||||||
|
const ruleFormRef = ref();
|
||||||
|
const form = ref({});
|
||||||
|
const disabled = ref(false);
|
||||||
|
const btnText = ref("获取验证码");
|
||||||
|
const newdisabled = ref(false);
|
||||||
|
const newbtnText = ref("获取验证码");
|
||||||
|
const bindforgetSendCode = (phoneData, type) => {
|
||||||
|
ruleFormRef.value.validateField("phone", (errorMessage) => {
|
||||||
|
if (errorMessage) {
|
||||||
|
console.log();
|
||||||
|
// captchaSms({ phonenumber: RegData.value.phone }).then((res) => {
|
||||||
|
// console.log(res);
|
||||||
|
// });
|
||||||
|
if (type == "new") {
|
||||||
|
newdisabled.value = true;
|
||||||
|
newbtnText.value = "发送中...";
|
||||||
|
} else {
|
||||||
|
disabled.value = true;
|
||||||
|
btnText.value = "发送中...";
|
||||||
|
}
|
||||||
|
genRegisterCheckCode({ phone: phoneData }).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
let i = 0;
|
||||||
|
|
||||||
|
let time = () => {
|
||||||
|
if (i < 60) {
|
||||||
|
setTimeout(() => {
|
||||||
|
++i;
|
||||||
|
if (type == "new") {
|
||||||
|
newbtnText.value = `${60 - i}s`;
|
||||||
|
} else {
|
||||||
|
btnText.value = `${60 - i}s`;
|
||||||
|
}
|
||||||
|
time();
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
if (type == "new") {
|
||||||
|
newdisabled.value = false;
|
||||||
|
newbtnText.value = "获取验证码";
|
||||||
|
} else {
|
||||||
|
disabled.value = false;
|
||||||
|
btnText.value = "获取验证码";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
time();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log(errorMessage);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const onSubmit = () => {
|
||||||
|
UserChangPhone(form.value).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage({
|
||||||
|
message: res.message,
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
ruleFormRef,
|
||||||
|
form,
|
||||||
|
disabled,
|
||||||
|
btnText,
|
||||||
|
newdisabled,
|
||||||
|
newbtnText,
|
||||||
|
bindforgetSendCode,
|
||||||
|
onSubmit,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #fff;
|
||||||
|
.demo-tabs {
|
||||||
|
height: 100%;
|
||||||
|
.UnitBox {
|
||||||
|
.ChangPhoneForm {
|
||||||
|
width: 500px;
|
||||||
|
.bind_code {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.codebtn {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
right: 1px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: PingFang SC-Medium, PingFang SC;
|
||||||
|
color: #1b3dd1;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 10px;
|
||||||
|
border: none;
|
||||||
|
border-left: 1px solid #1b3dd1;
|
||||||
|
border-radius: 0;
|
||||||
|
&:hover {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue