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