alls
This commit is contained in:
我是个攻城狮
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="visible"
|
||||
:show-close="false"
|
||||
:close-on-click-modal="true"
|
||||
:close-on-press-escape="true"
|
||||
append-to-body
|
||||
custom-class="global-apply-dialog"
|
||||
@closed="resetForm"
|
||||
>
|
||||
<div class="dialog-body">
|
||||
<div class="dialog-title-row">
|
||||
<img class="sparkle left" :src="sparkleImg" alt="" />
|
||||
<h2>立即申请</h2>
|
||||
<img class="sparkle right" :src="sparkleImg" alt="" />
|
||||
</div>
|
||||
|
||||
<el-form ref="applyForm" :model="form" :rules="rules" label-position="top" class="apply-form">
|
||||
<el-form-item label="您的称呼" prop="name">
|
||||
<el-input v-model.trim="form.name" maxlength="20" placeholder="请输入您的称呼" class="dialog-control" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input v-model.trim="form.phone" maxlength="11" placeholder="请输入联系电话" class="dialog-control" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="角色类型" prop="roleType">
|
||||
<el-select v-model="form.roleType" placeholder="请选择角色类型" class="dialog-control">
|
||||
<el-option v-for="option in roleOptions" :key="option" :label="option" :value="option" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="所属机构">
|
||||
<el-input v-model.trim="form.organization" maxlength="50" placeholder="选填，如无可不填" class="dialog-control" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="需求类型（可多选）">
|
||||
<el-checkbox-group v-model="form.demandTypes" class="demand-group">
|
||||
<el-checkbox v-for="option in demandOptions" :key="option" :label="option">{{ option }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="需求说明">
|
||||
<el-input
|
||||
v-model.trim="form.description"
|
||||
type="textarea"
|
||||
resize="none"
|
||||
maxlength="100"
|
||||
:rows="4"
|
||||
placeholder="请简要描述您的需求，输入内容100个字以内"
|
||||
class="dialog-textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<button type="button" class="submit-btn" @click="submitForm">提交申请</button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { applyDialogBus } from '@/utils/applyDialog';
|
||||
import sparkleImg from '@/assets/img/zs1.png';
|
||||
|
||||
function createEmptyForm() {
|
||||
return {
|
||||
name: '',
|
||||
phone: '',
|
||||
roleType: '',
|
||||
organization: '',
|
||||
demandTypes: [],
|
||||
description: '',
|
||||
source: ''
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'GlobalApplyDialog',
|
||||
data() {
|
||||
const validatePhone = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入联系电话'));
|
||||
return;
|
||||
}
|
||||
if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback(new Error('请输入正确的联系电话'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
};
|
||||
|
||||
return {
|
||||
visible: false,
|
||||
sparkleImg,
|
||||
form: createEmptyForm(),
|
||||
roleOptions: ['个人主播', 'MCN机构'],
|
||||
demandOptions: ['我要扶持', '我要培训', '我要接单', '我要资金', '我要资产评估'],
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入您的称呼', trigger: 'blur' }],
|
||||
phone: [{ required: true,validator: validatePhone, trigger: 'blur' }],
|
||||
roleType: [{ required: true, message: '请选择角色类型', trigger: 'change' }]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
applyDialogBus.$on('open', this.handleOpen);
|
||||
},
|
||||
beforeDestroy() {
|
||||
applyDialogBus.$off('open', this.handleOpen);
|
||||
},
|
||||
methods: {
|
||||
handleOpen(payload = {}) {
|
||||
this.visible = true;
|
||||
this.form = {
|
||||
...createEmptyForm(),
|
||||
...payload,
|
||||
demandTypes: Array.isArray(payload.demandTypes) ? payload.demandTypes : []
|
||||
};
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.applyForm) {
|
||||
this.$refs.applyForm.clearValidate();
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm() {
|
||||
this.form = createEmptyForm();
|
||||
if (this.$refs.applyForm) {
|
||||
this.$refs.applyForm.resetFields();
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs.applyForm.validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
this.visible = false;
|
||||
this.$message.success('申请已提交');
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.global-apply-dialog {
|
||||
width: 646px !important;
|
||||
height: 914px;
|
||||
background: #ffffff;
|
||||
box-shadow: 2px 2px 10px 0 rgba(164, 177, 238, 0.3), 0 0 1px 0 rgba(0, 0, 0, 0.08) !important;
|
||||
border-radius: 20px !important;
|
||||
border: 1px solid #e2e8f0 !important;
|
||||
margin-top: 4vh !important;
|
||||
}
|
||||
.el-dialo{
|
||||
width: 646px;
|
||||
height: 914px;
|
||||
}
|
||||
|
||||
.global-apply-dialog .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.global-apply-dialog .el-dialog__body {
|
||||
width: 646px;
|
||||
height: 914px;
|
||||
padding: 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
width: 646px;
|
||||
height: 914px;
|
||||
padding: 59px 69px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dialog-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.dialog-title-row h2 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: #3D3D3D;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
width: 39px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.sparkle.left {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.sparkle.right {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.apply-form {
|
||||
margin-top: 62px;
|
||||
}
|
||||
|
||||
.apply-form .el-form-item {
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.apply-form .el-form-item:last-of-type {
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.apply-form .el-form-item__label {
|
||||
min-width: 68px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 0 14px;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #1e293b;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
|
||||
display: none !important;
|
||||
}
|
||||
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after {
|
||||
content: '*';
|
||||
color: #b58cff;
|
||||
margin-left: 4px;
|
||||
|
||||
}
|
||||
|
||||
.el-checkbox__label{
|
||||
font-weight: 400 !important;
|
||||
font-size: 15px !important;
|
||||
color: #3B3B3B !important;
|
||||
}
|
||||
|
||||
.dialog-control,
|
||||
.dialog-textarea {
|
||||
width: 508px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.dialog-control .el-input__inner,
|
||||
.dialog-control .el-textarea__inner,
|
||||
.dialog-textarea .el-textarea__inner {
|
||||
width: 508px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.dialog-control .el-input__inner {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
.dialog-textarea .el-textarea__inner {
|
||||
height: 90px;
|
||||
min-height: 90px !important;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.dialog-control .el-input__inner::placeholder,
|
||||
.dialog-textarea .el-textarea__inner::placeholder {
|
||||
color: #b3bdd3;
|
||||
}
|
||||
|
||||
.demand-group {
|
||||
width: 508px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.demand-group .el-checkbox {
|
||||
margin-right: 0;
|
||||
color: #3a4560;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.demand-group .el-checkbox__inner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
border-color: #d7dfef;
|
||||
}
|
||||
|
||||
.demand-group .el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.demand-group .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background: #7b63f6;
|
||||
border-color: #7b63f6;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
display: block;
|
||||
width: 208px;
|
||||
height: 52px;
|
||||
margin: 24px auto 0;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(90deg, #5f66ec 0%, #9557f6 100%);
|
||||
box-shadow: 0 8px 24px rgba(120, 99, 246, 0.24);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.global-apply-dialog {
|
||||
width: calc(100vw - 24px);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
height: auto;
|
||||
padding: 36px 20px 28px;
|
||||
}
|
||||
|
||||
.dialog-control,
|
||||
.dialog-textarea,
|
||||
.dialog-control .el-input__inner,
|
||||
.dialog-textarea .el-textarea__inner,
|
||||
.demand-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<div v-for="(item, i) in options" :key="item.searchValue" :class="i != 0 ? 'item' : ''">
|
||||
<el-input v-model="item.value" clearable :placeholder="item.label" size="small" />
|
||||
</div>
|
||||
<slot></slot>
|
||||
<div class="item">
|
||||
<el-button type="primary" @click="search" size="small">搜索</el-button>
|
||||
</div>
|
||||
<slot name="add"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "Search",
|
||||
components: {},
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: "",
|
||||
searchValue: "",
|
||||
};
|
||||
},
|
||||
created () { },
|
||||
methods: {
|
||||
search () {
|
||||
this.$emit("search", this.options);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.item {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.item {
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
import Vue from 'vue'
|
||||
import Search from './Search'
|
||||
import Nav from '@/views/front/components/Nav.vue'
|
||||
import Footer from '@/views/front/components/Footer.vue'
|
||||
import { returnValue } from '@/utils/index'
|
||||
function piugin () {
|
||||
Vue.component('Search', Search)
|
||||
Vue.component('Nav', Nav)
|
||||
Vue.component('Footer', Footer)
|
||||
Vue.prototype.returnValue = returnValue
|
||||
}
|
||||
|
||||
export default piugin
|
||||
Reference in New Issue
Block a user