首页地图
This commit is contained in:
189
src/components/webReleaseActive/index.vue
Normal file
189
src/components/webReleaseActive/index.vue
Normal file
@ -0,0 +1,189 @@
|
||||
<template>123</template>
|
||||
<!-- <template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
width="516px"
|
||||
:before-close="onClose"
|
||||
title="活动申请"
|
||||
center
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-dialog v-model="innerVisible" width="20%" title="" append-to-body>
|
||||
<div>
|
||||
<div class="_contact">请联系平台客服发布活动</div>
|
||||
<div class="_img">
|
||||
<img
|
||||
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F39%2F53%2F71573cc4a35de96.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643849770&t=80c12feeca42dad377bbdde1d6e78f33"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-form ref="formRef" :rules="rules" :model="form" label-width="95px">
|
||||
<el-form-item label="活动名称：" prop="field">
|
||||
<el-input
|
||||
v-model="form.field"
|
||||
maxlength="30"
|
||||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人：" prop="field2">
|
||||
<el-input
|
||||
v-model="form.field2"
|
||||
maxlength="30"
|
||||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人：" prop="field3">
|
||||
<el-input
|
||||
v-model="form.field3"
|
||||
maxlength="30"
|
||||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话：" prop="field4">
|
||||
<el-input
|
||||
v-model="form.field4"
|
||||
maxlength="11"
|
||||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动地点：" prop="field5">
|
||||
<el-input v-model="form.field5"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="人数上限：" prop="field6">
|
||||
<el-input v-model="form.field6"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="报名费用：" prop="field7">
|
||||
<el-input v-model="form.field7">
|
||||
<template #append>元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邀请对象：" prop="field8">
|
||||
<el-checkbox-group v-model="form.field8">
|
||||
<el-checkbox label="专家" />
|
||||
<el-checkbox label="企业" />
|
||||
<el-checkbox label="政府" />
|
||||
<el-checkbox label="事业单位" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动介绍：" prop="field9">
|
||||
<el-input v-model="form.field9" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动封面：" prop="">
|
||||
<ImageUpload v-model:modelValue="form.field10" :isShowTip="false" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-button
|
||||
type="text"
|
||||
style="
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
background-color: #e6e6e6;
|
||||
"
|
||||
@click="onClose"
|
||||
>取消</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button style="width: 100%" class="x_btns" @click="onSubmit"
|
||||
>确定</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const imageUrl = ref("");
|
||||
const props = defineProps({
|
||||
dialogVisible: {
|
||||
required: true,
|
||||
type: Boolean,
|
||||
},
|
||||
});
|
||||
const innerVisible = ref(false);
|
||||
const form = reactive({
|
||||
field: "",
|
||||
field2: "",
|
||||
field3: "",
|
||||
field4: "",
|
||||
field5: "",
|
||||
field6: "",
|
||||
field7: "",
|
||||
field8: [],
|
||||
field9: "",
|
||||
field10: "",
|
||||
});
|
||||
const { proxy } = getCurrentInstance();
|
||||
const rules = ref({
|
||||
field: [{ required: true, message: "活动名称不能为空", trigger: "blur" }],
|
||||
field2: [{ required: true, message: "申请人不能为空", trigger: "blur" }],
|
||||
field3: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
|
||||
field4: [
|
||||
{ required: true, message: "联系电话不能为空", trigger: "blur" },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
field5: [{ required: true, message: "活动地点不能为空", trigger: "blur" }],
|
||||
field6: [{ required: true, message: "人数上限不能为空", trigger: "blur" }],
|
||||
field7: [{ required: true, message: "报名费用不能为空", trigger: "blur" }],
|
||||
field8: [
|
||||
{
|
||||
type: "array",
|
||||
required: true,
|
||||
message: "邀请对象不能为空",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
field9: [{ required: true, message: "活动介绍不能为空", trigger: "blur" }],
|
||||
field10: [{ required: true, message: "活动封面不能为空", trigger: "blur" }],
|
||||
});
|
||||
const emit = defineEmits();
|
||||
function onClose() {
|
||||
proxy.resetForm("formRef");
|
||||
emit("update:dialogVisible", !props.dialogVisible);
|
||||
}
|
||||
/** 提交按钮 */
|
||||
function onSubmit() {
|
||||
innerVisible.value = true; // 需要删除
|
||||
proxy.$refs.formRef.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(rules.value);
|
||||
innerVisible.value = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.el-input__inner) {
|
||||
padding-right: 55px;
|
||||
}
|
||||
._contact {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
._img {
|
||||
margin: 0 auto;
|
||||
margin-top: 12px;
|
||||
width: 236px;
|
||||
height: 236px;
|
||||
padding: 15px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
Reference in New Issue
Block a user