|
|
@@ -0,0 +1,273 @@
|
|
|
+<template>
|
|
|
+ <div :class="{connectUs: !mobile, connectUsMobile: mobile}">
|
|
|
+ <div class="toastBox" v-if="isShowToast">
|
|
|
+ <div class="toastArea">
|
|
|
+ <div class="title">行业解决方案专属客服</div>
|
|
|
+ <div class="tips">填写联系方式 立即与专属客服进行沟通</div>
|
|
|
+ <div class="nameCell">
|
|
|
+ <p class="label">联系人</p>
|
|
|
+ <input type="text" v-model="name" maxlength="10">
|
|
|
+ </div>
|
|
|
+ <div class="phoneCell">
|
|
|
+ <p class="label">电话</p>
|
|
|
+ <input type="number" v-model="phone" oninput="if(value.length>5)value=value.slice(0,11)">
|
|
|
+ </div>
|
|
|
+ <div class="submitBtn" @click="handleSubmit">
|
|
|
+ <p>提 交</p>
|
|
|
+ </div>
|
|
|
+ <div class="closeIcon" @click="close"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: ["source", "isShowToast", "sourceId"],
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ name: "",
|
|
|
+ phone: "",
|
|
|
+ mobile: this.$deviceType.isMobile()
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted() {
|
|
|
+ const {realname = '', login_mobile = '', mobile=''} = this.$store.state.userinfo || {}
|
|
|
+ this.name = realname
|
|
|
+ this.phone = login_mobile || mobile
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ close() {
|
|
|
+ this.$emit('close')
|
|
|
+ },
|
|
|
+ handleSubmit() {
|
|
|
+ if (!this.name || !this.phone || this.phone.length < 6) {
|
|
|
+ return this.$message.error('请填写完整的信息')
|
|
|
+ }
|
|
|
+ const UA = ['Mobile 浏览器', 'PC 浏览器', 'Android', 'IOS']
|
|
|
+ let agent = 'PC 浏览器'
|
|
|
+ if (this.$deviceType.android) {
|
|
|
+ agent = 'Android'
|
|
|
+ } else if (this.$deviceType.ios) {
|
|
|
+ agent = 'IOS'
|
|
|
+ } else if (this.$deviceType.isMobile()) {
|
|
|
+ agent = 'Mobile 浏览器'
|
|
|
+ }
|
|
|
+ const { name, phone, source, sourceId } = this
|
|
|
+ let p = {
|
|
|
+ name, mobile: phone, from: source, agent
|
|
|
+ }
|
|
|
+ if (sourceId) {
|
|
|
+ p.providerID = sourceId
|
|
|
+ }
|
|
|
+ this.$axios.$post('/api/kaifawu/contact', p).then(res => {
|
|
|
+ this.$message.success(res.info || '提交成功')
|
|
|
+ this.$emit('close')
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.name = ''
|
|
|
+ this.phone = ''
|
|
|
+ }
|
|
|
+ }).catch(e => {
|
|
|
+ this.$message.error('提交失败,请重试！')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ @import "~@/assets/css/scssCommon.scss";
|
|
|
+.connectUs {
|
|
|
+ .toastBox {
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ z-index: 888;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .toastArea {
|
|
|
+ position: relative;
|
|
|
+ width: 446px;
|
|
|
+ height: 403px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 30px 47px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 19px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(34, 34, 34, 1);
|
|
|
+ line-height: 26px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ line-height: 17px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nameCell, .phoneCell {
|
|
|
+ margin-top: 25px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(25, 34, 46, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ margin-top: 5px;
|
|
|
+ padding: 10px;
|
|
|
+ width: 352px;
|
|
|
+ height: 48px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 3px;
|
|
|
+ border: 1px solid rgba(221, 225, 230, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nameCell {
|
|
|
+ margin-top: 39px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submitBtn {
|
|
|
+ margin-top: 18px;
|
|
|
+ width: 352px;
|
|
|
+ height: 48px;
|
|
|
+ background: rgba(48, 142, 255, 1);
|
|
|
+ box-shadow: 0 2px 6px 0 rgba(48, 142, 255, 0.3);
|
|
|
+ border-radius: 2px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .closeIcon {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 34px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.connectUsMobile {
|
|
|
+ .toastBox {
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ z-index: 888;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .toastArea {
|
|
|
+ position: relative;
|
|
|
+ width: pxtovw(355);
|
|
|
+ height: pxtovw(403);
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: pxtovw(3);
|
|
|
+ padding: pxtovw(30) pxtovw(30);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: pxtovw(19);
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(34, 34, 34, 1);
|
|
|
+ line-height: pxtovw(26);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ margin-top: pxtovw(8);
|
|
|
+ margin-bottom: pxtovw(14);
|
|
|
+ font-size: pxtovw(12);
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ line-height: pxtovw(17);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nameCell, .phoneCell {
|
|
|
+ margin-top: pxtovw(25);
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: pxtovw(14);
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(25, 34, 46, 1);
|
|
|
+ line-height: pxtovw(20);
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ margin-top: pxtovw(5);
|
|
|
+ padding: pxtovw(10);
|
|
|
+ width: pxtovw(295);
|
|
|
+ height: pxtovw(48);
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: pxtovw(3);
|
|
|
+ border: pxtovw(1) solid rgba(221, 225, 230, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nameCell {
|
|
|
+ margin-top: pxtovw(39);
|
|
|
+ }
|
|
|
+
|
|
|
+ .submitBtn {
|
|
|
+ margin-top: pxtovw(18);
|
|
|
+ width: pxtovw(295);
|
|
|
+ height: pxtovw(48);
|
|
|
+ background: rgba(48, 142, 255, 1);
|
|
|
+ box-shadow: 0 pxtovw(2) pxtovw(6) 0 rgba(48, 142, 255, 0.3);
|
|
|
+ border-radius: pxtovw(2);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ p {
|
|
|
+ font-size: pxtovw(14);
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ line-height: pxtovw(20);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .closeIcon {
|
|
|
+ position: absolute;
|
|
|
+ right: pxtovw(20);
|
|
|
+ top: pxtovw(34);
|
|
|
+ width: pxtovw(16);
|
|
|
+ height: pxtovw(16);
|
|
|
+ background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xinfeng