|
|
@@ -1,81 +1,111 @@
|
|
|
<template>
|
|
|
<div class="silderWrap">
|
|
|
<div class="silderList">
|
|
|
- <div class="silderItem">
|
|
|
- <img src="@/assets/images/silder/silder4.svg"
|
|
|
- alt="">
|
|
|
+ <div class="silderItem" @click="visiable =true">
|
|
|
+ <img src="@/assets/images/silder/silder4.svg" alt />
|
|
|
<p>申请入驻</p>
|
|
|
<div class="line"></div>
|
|
|
</div>
|
|
|
- <el-popover placement="left"
|
|
|
- trigger="hover">
|
|
|
+ <el-popover placement="left" trigger="hover">
|
|
|
<div>
|
|
|
<p class="hoverTitle">咨询电话：</p>
|
|
|
<p class="hoverMsg">4008851569</p>
|
|
|
</div>
|
|
|
- <div class="silderItem"
|
|
|
- slot="reference">
|
|
|
- <img src="@/assets/images/silder/silder2.svg"
|
|
|
- alt="">
|
|
|
+ <div class="silderItem" slot="reference">
|
|
|
+ <img src="@/assets/images/silder/silder2.svg" alt />
|
|
|
<p>电话咨询</p>
|
|
|
<div class="line"></div>
|
|
|
</div>
|
|
|
</el-popover>
|
|
|
- <el-popover placement="left"
|
|
|
- trigger="hover">
|
|
|
+ <el-popover placement="left" trigger="hover">
|
|
|
<div>
|
|
|
<div class="code-item">
|
|
|
- <img src="../assets/images/download.png"
|
|
|
- width="111px"
|
|
|
- height="111px"
|
|
|
- alt />
|
|
|
+ <img src="../assets/images/download.png" width="111px" height="111px" alt />
|
|
|
<p>扫码下载APP</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="silderItem"
|
|
|
- slot="reference">
|
|
|
- <img src="@/assets/images/silder/silder3.svg"
|
|
|
- alt="">
|
|
|
+ <div class="silderItem" slot="reference">
|
|
|
+ <img src="@/assets/images/silder/silder3.svg" alt />
|
|
|
<p>APP下载</p>
|
|
|
<div class="line"></div>
|
|
|
</div>
|
|
|
</el-popover>
|
|
|
- <el-popover placement="left"
|
|
|
- trigger="hover">
|
|
|
+ <el-popover placement="left" trigger="hover">
|
|
|
<div>
|
|
|
<div class="code-item">
|
|
|
- <img src="../assets/images/public-code.jpg"
|
|
|
- width="111px"
|
|
|
- height="111px"
|
|
|
- alt />
|
|
|
+ <img src="../assets/images/public-code.jpg" width="111px" height="111px" alt />
|
|
|
<p>微信订阅号</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="silderItem"
|
|
|
- slot="reference">
|
|
|
- <img src="@/assets/images/silder/silder1.svg"
|
|
|
- alt="">
|
|
|
+ <div class="silderItem" slot="reference">
|
|
|
+ <img src="@/assets/images/silder/silder1.svg" alt />
|
|
|
<p>关注微信</p>
|
|
|
<!-- <div class="line"></div> -->
|
|
|
</div>
|
|
|
</el-popover>
|
|
|
</div>
|
|
|
- <div class="goTop"
|
|
|
- v-if="showgo"
|
|
|
- @click="gotop">
|
|
|
- <img src="@/assets/images/silder/silder5.svg"
|
|
|
- alt="">
|
|
|
+ <div class="goTop" v-if="showgo" @click="gotop">
|
|
|
+ <img src="@/assets/images/silder/silder5.svg" alt />
|
|
|
</div>
|
|
|
+ <el-dialog
|
|
|
+ title="申请入驻"
|
|
|
+ :visible.sync="visiable"
|
|
|
+ append-to-body
|
|
|
+ width="500px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ destroy-on-close
|
|
|
+ >
|
|
|
+ <el-form ref="form" :model="form" :rules="maskRules">
|
|
|
+ <el-form-item prop="name">
|
|
|
+ <el-input v-model="form.name" placeholder="请输入机构名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="city">
|
|
|
+ <el-input v-model="form.city" placeholder="请输入所在城市"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="linkman ">
|
|
|
+ <el-input v-model="form.linkman " placeholder="请输入联系人姓名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="phone">
|
|
|
+ <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <p>我们会在您提交信息后24小时内与您取得联系，请保持电话畅通</p>
|
|
|
+ <el-form-item>
|
|
|
+ <div class="submitBtn" @click="submitInfo">提交</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import axios from "axios";
|
|
|
export default {
|
|
|
- data () {
|
|
|
+ props: ["showForm"],
|
|
|
+ data() {
|
|
|
return {
|
|
|
- showgo: false
|
|
|
- }
|
|
|
-
|
|
|
- }, mounted () {
|
|
|
+ showgo: false,
|
|
|
+ visiable: false,
|
|
|
+ form: {
|
|
|
+ name: "",
|
|
|
+ city: "",
|
|
|
+ contantName: "",
|
|
|
+ phone: "",
|
|
|
+ },
|
|
|
+ maskRules: {
|
|
|
+ name: [{ required: true, message: "请输入机构名称" }],
|
|
|
+ city: [{ required: true, message: "请输入所在城市" }],
|
|
|
+ linkman: [{ required: true, message: "请输入联系人姓名" }],
|
|
|
+ phone: [
|
|
|
+ { required: true, message: "请输入手机号" },
|
|
|
+ {
|
|
|
+ pattern: /^1[3456789]\d{9}$/,
|
|
|
+ message: "请输入正确的手机号",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
var vm = this;
|
|
|
window.onscroll = function () {
|
|
|
if (document.documentElement.scrollTop > 300) {
|
|
|
@@ -83,14 +113,47 @@ export default {
|
|
|
} else {
|
|
|
vm.showgo = false;
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
methods: {
|
|
|
- gotop () {
|
|
|
+ gotop() {
|
|
|
scrollTo(0, 0);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ submitInfo() {
|
|
|
+ this.$refs["form"].validate((res) => {
|
|
|
+ if (res) {
|
|
|
+ console.log("发送请求");
|
|
|
+ axios({
|
|
|
+ url: "/api-user/tenantApply/add",
|
|
|
+ method: "post",
|
|
|
+ data:this.form,
|
|
|
+ headers: {
|
|
|
+ "Content-type": "application/x-www-form-urlencoded",
|
|
|
+ },
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.$message.success("发送成功");
|
|
|
+ this.visiable = false;
|
|
|
+ } else {
|
|
|
+ this.$message.error("发送失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ showForm(val) {
|
|
|
+ this.visiable = val;
|
|
|
+ },
|
|
|
+ visiable(val) {
|
|
|
+ this.$emit("changeStatus", val);
|
|
|
+ if (!val) {
|
|
|
+ this.$refs["form"].resetFields();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.silderWrap {
|
|
|
@@ -172,4 +235,15 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.submitBtn {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ background-color: #2dc7aa;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-top: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
</style>
|
