utils-CFANZ编程社区

<div class="showFreeTrialInfo relative" v-if="!isTrialSuccess">
<el-row :gutter="20">
<el-col :span="12" :offset="8">
<div
class="showFreeTrialInfoTitle flex justify-between align-center"
>
<div class="showFreeTrialInfoTitleLeft font-size-24">
免费体验
</div>
<div
class="
showFreeTrialInfoTitleRight
font-size-16
flex
align-center
"
>
{{ serviceTel }}
<img
class="showFreeTrialInfoTitleRightImg"
src="@/assets/freeTrial/callPhone.png"
alt
srcset
/>
</div>
</div>
</el-col>
<el-col :span="14" :offset="8" class="showFreeTrialInputAll">
<div class="showFreeTrialInputs flex align-center">
<div class="showFreeTrialInputsLabel font-size-16">姓名</div>
<div class="showFreeTrialInputsLine"></div>
<input
v-model="name"
placeholder="请输入您的联系姓名"
class="showFreeTrialInput font-size-16"
/>
</div>

<div class="getCode font-size-16" @click="getUserCode">
{{ codeText }}
</div>
</div>

<div
class="
showFreeTrialInputs
textarea-ipt
flex
align-center
demandInput
"
>
<el-input
type="textarea"
placeholder="简单描述您的需求（选填）"
v-model="demand"
maxlength="150"
show-word-limit
class="font-size-16 demandInputs"
:rows="3"
></el-input>
</div>
<div class="agreement-checked">
<el-checkbox v-model="promptContent" @click="select(event)"
>确定申请系统体验并提供个人手机号，平台会对您所提供的信息安全保密</el-checkbox
>
</div>

<el-col :span="12" :offset="8" class="text-align-center">
<div class="text-align-center trialSuccessImgs">
<img
class="trialSuccessImg"
src="@/assets/freeTrial/trialSuccess.png"
alt
/>
</div>
<div class="trialSuccess font-size-24">
成功提交，感谢您的咨询！
</div>
<div class="trialSuccessInfo font-size-14">
请留意电话来电，我们的客服将与您联系
</div>
<div class="trialSuccessBtn text-align-center" @click="closePop">
好的
</div>
</el-col>
</el-row>
</div>
</el-dialog>
</div>
</template>
<script>
import { getCode, trial, phone, read } from "@/serve/api/user";

export default {
name: "freePop",
data() {
return {
showFreeTrial: false,
promptContent: false,
name: "", //姓名
mobile: "", //手机号码
code: "", //验证码
demand: "", //需求
codeText: "获取验证码",
isTrialSuccess: false,
serviceTel: "",
};
},
created() {
phone({})
.then((res) => {
this.serviceTel = res.data.data.serviceTel;
})
.catch((err) => {});
},
methods: {
//免费体验按钮
getExperience() {
this.showFreeTrial = true;
},
//获取验证码
getUserCode() {
if (this.codeText !== "获取验证码") return;
if (!this.mobile) {
this.$message.closeAll();
this.$message.error("请填写手机号~", "error");
return;
}
var phone_rules =
/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
if (!phone_rules.test(this.mobile)) {
this.$message.closeAll();
this.$message.error("输入的手机号不符合规则!", "error");
return;
}

getCode({ type: 4, mobile: this.mobile }).then((res) => {
//倒计时
this.validateBtn();
});
},
//验证码倒计时
validateBtn() {
//倒计时
let time = 60;
let timer = setInterval(() => {
if (time == 0) {
clearInterval(timer);
this.disabled = false;
this.codeText = "获取验证码";
} else {
this.codeText = time + "秒后重试";
this.disabled = true;
time--;
}
}, 1000);
},
select(e) {
this.promptContent = e.target.checked;
},

//保存表单
getSaveDemand() {
if (!this.name) {
this.$message.closeAll();
this.$message.error("请输入姓名~", "error");
return;
}
if (!this.mobile) {
this.$message.closeAll();
this.$message.error("请填写手机号~", "error");
return;
}
var phone_rules =
/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
if (!phone_rules.test(this.mobile)) {
this.$message.closeAll();
this.$message.error("输入的手机号不符合规则!", "error");
return;
}
if (!this.code || this.code.length != 6) {
this.$message.closeAll();
this.$message.error("请输入验证码或验证码有误~", "error");
return;
}

if (this.promptContent == false) {
this.$message({
message: "请阅读并勾选同意相关协议",
type: "error",
});
return;
}
// read
let params = {
accessType: 1,
code: this.code,
demand: this.demand,
name: this.name,
phone: this.mobile,
};
let deviceDta = {
mobile: this.mobile,
type: this.promptContent == true ? 15 : "",
};
read(deviceDta)
.then((res) => {
this.promptContent = false;
})
.catch((err) => {});
trial(params)
.then((res) => {
this.isTrialSuccess = true;
this.code = "";
this.demand = "";
this.name = "";
this.phone = "";
})
.catch((err) => {});
},
//显示成功弹窗
showSuccess() {
this.isTrialSuccess = true;
this.showFreeTrial = true;
},
//关闭弹窗
closePop() {
this.showFreeTrial = false;
this.isTrialSuccess = false;
},
},
};
</script>
<style lang="scss" scoped>
.showFreeTrialPop {
border-radius: 0.08rem !important;
}
.showFreeTrialPopImg {
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 8;
}
.showFreeTrialInfo {
z-index: 9;
padding-top: 0.53rem;
padding-bottom: 0.53rem;
}
.showFreeTrialInfoTitle {
color: #0064ff;
}
.showFreeTrialInfoTitleRightImg {
width: 0.2rem;
height: 0.2rem;
margin-left: 0.08rem;
}
.isTrialSuccessImgs {
margin-left: 0;
margin-right: 0.08rem;
}
// 协议勾选
.agreement-checked {
margin-top: 0.14rem;
/deep/.el-checkbox {
font-size: 0.12rem !important;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a6abc3;
display: flex;
align-items: center;
justify-content: flex-start;
}
}

// 输入框
.showFreeTrialInputAll {
margin-top: 0.12rem;
}
.showFreeTrialInputs {
height: 46px;
background: rgba(255, 255, 255, 1);
border-radius: 0.04rem;
border: 0.01rem solid rgba(215, 231, 255, 1);
padding: 0 0.12rem;
margin-top: 0.12rem;
}
.textarea-ipt {
height: auto;
}
// 需求输入框
.demandInput {
border-radius: 0.04rem;
border: none;
padding: 0;
margin-top: 0.24rem;
}
.demandInputs {
color: #a6abc3;
}
.showFreeTrialInputsLabel {
color: #3a3c4a;
width: 0.84rem;
}
.showFreeTrialInputsLine {
width: 0.01rem;
height: 0.24rem;
background: rgba(215, 231, 255, 1);
}
.showFreeTrialInput {
border: none;
margin-left: 0.12rem;
outline: 0;
}
// 获取验证码
.getCode {
color: #444;
cursor: pointer;
}
.experience {
height: 42px;
background: rgba(0, 100, 255, 1);
border-radius: 0.04rem;
cursor: pointer;
color: #ffffff;
}
// 提交成功
.isTrialSuccessImg {
padding-top: 0.3rem !important;
padding-bottom: 1.13rem !important;
}
.showFreeTrialInfoTitleRight {
color: #0064ff;
}
// 提交成功图片
.trialSuccessImgs {
height: 0.7rem;
}
.trialSuccessImg {
width: 0.7rem;
height: 0.7rem;
}
.trialSuccess {
margin-top: 0.33rem;
color: #3a3c4a;
}
.trialSuccessInfo {
margin-top: 0.19rem;
color: #4e5061;
}
.trialSuccessBtn {
width: 2.4rem;
height: 0.42rem;
line-height: 0.42rem;
background: rgba(0, 100, 255, 1);
border-radius: 0.04rem;
color: #fff;
margin: 0.48rem auto 0 auto;
cursor: pointer;
}
.closeImg {
top: -0.31rem;
width: 0.14rem;
height: 0.14rem;
right: 0.17rem;
cursor: pointer;
}
</style>