|
|
@@ -0,0 +1,260 @@
|
|
|
+<template>
|
|
|
+ <div class="formContent">
|
|
|
+ <el-form ref="form" :model="formData" :rules="rules" label-width="85px">
|
|
|
+ <div class="formContent-item_title">广告信息</div>
|
|
|
+ <el-form-item label="广告名称" prop="name">
|
|
|
+ <el-input v-model="formData.name" clearable placeholder="请输入广告标题名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="主题图片" prop="cover">
|
|
|
+ <div class="clickUpload">
|
|
|
+ <div class="clickUpText" @click="clickUpload()">
|
|
|
+ <img class="dataImg" v-if="!!formData.cover" :src="formData.cover" />
|
|
|
+ <template v-else>
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="ashText">图片像素为1080 px * 540 px，jpg/png/图片格式,文件大小在2M内</div>
|
|
|
+ <el-upload
|
|
|
+ style="display: none"
|
|
|
+ :headers="token"
|
|
|
+ ref="upload"
|
|
|
+ limit="1"
|
|
|
+ action="/sc-community/upload/uploadFile"
|
|
|
+ :on-success="uploadsuccess"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ :auto-upload="true"
|
|
|
+ name="file"
|
|
|
+ >
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="广告链接">
|
|
|
+ <el-input v-model="formData.link" clearable placeholder="请输入广告页面的链接地址"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="formContent-item_title">投放社区</div>
|
|
|
+ <el-form-item label="投放小区" prop="communityIds" :rules="communityRules(formData.communityIds)">
|
|
|
+ <div class="formComtent">
|
|
|
+ <el-checkbox class="allComm" :indeterminate="checkAccessControl" v-model="checkAll" @change="handleCheckAllChange"
|
|
|
+ >全部</el-checkbox
|
|
|
+ >
|
|
|
+ <el-checkbox-group v-model="formData.communityIds" @change="handleCheckedChange">
|
|
|
+ <el-checkbox class="commItem" v-for="(item, index) in organList" :label="item.id" :key="index">{{
|
|
|
+ item.communityName
|
|
|
+ }}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="formContent-item_title">投放时间</div>
|
|
|
+ <el-form-item label="巡更日期" prop="startDate">
|
|
|
+ <el-date-picker
|
|
|
+ class="width100"
|
|
|
+ v-model="effectiveDate"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="选择开始日期"
|
|
|
+ end-placeholder="选择结束日期"
|
|
|
+ @change="effectiveDateToggle"
|
|
|
+ :editable="false"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: ['params'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formData: {
|
|
|
+ communityIds: [],
|
|
|
+ cover: '',
|
|
|
+ endTime: '',
|
|
|
+ link: '',
|
|
|
+ name: '',
|
|
|
+ startTime: ''
|
|
|
+ },
|
|
|
+ checkAll: false,
|
|
|
+ checkAccessControl: false,
|
|
|
+ organList: [],
|
|
|
+ effectiveDate: [],
|
|
|
+ token: {
|
|
|
+ [localStorage.getItem('SC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('SC_token')
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [this.$valid.inputRequired('广告名称')],
|
|
|
+ cover: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: `图片不能为空`,
|
|
|
+ trigger: 'change',
|
|
|
+ validator(rule, value, cb) {
|
|
|
+ if (!value) {
|
|
|
+ cb(new Error());
|
|
|
+ } else {
|
|
|
+ cb();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ uploadsuccess(response, file, fileList) {
|
|
|
+ this.$refs.upload.clearFiles();
|
|
|
+ if (0 === response.status) {
|
|
|
+ this.formData.cover = response.data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const isJPG = ['image/jpg', 'image/png'].includes(file.type);
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isJPG) {
|
|
|
+ this.$message.error('上传图片只能是 JPG,PNG 格式!');
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
+ }
|
|
|
+ return isLt2M;
|
|
|
+ },
|
|
|
+ clickUpload() {
|
|
|
+ this.$refs['upload'].$refs['upload-inner'].handleClick();
|
|
|
+ },
|
|
|
+ effectiveDateToggle(va) {
|
|
|
+ let arr = va;
|
|
|
+ if (!arr) {
|
|
|
+ arr = ['', ''];
|
|
|
+ }
|
|
|
+ this.formData.startTime = arr[0];
|
|
|
+ this.formData.endTime = arr[1];
|
|
|
+ },
|
|
|
+ getOrgTreeList() {
|
|
|
+ this.$http.get('/sc-community/assets/community/list').then(({ status, data, msg }) => {
|
|
|
+ if (status === 0 && data) {
|
|
|
+ this.organList = data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCheckAllChange(val) {
|
|
|
+ let checked = this.organList.map((item) => {
|
|
|
+ return item.id;
|
|
|
+ });
|
|
|
+ this.formData.communityIds = val ? checked : [];
|
|
|
+ this.checkAccessControl = false;
|
|
|
+ },
|
|
|
+ handleCheckedChange(val) {
|
|
|
+ let checkedCount = val.length;
|
|
|
+ this.checkAll = checkedCount === this.organList.length;
|
|
|
+ this.checkAccessControl = checkedCount > 0 && checkedCount < this.organList.length;
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ var loading = this.$loading();
|
|
|
+ this.$http
|
|
|
+ .post('/sc-community/advertising/add', this.formData)
|
|
|
+ .then(({ status, msg }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ this.$message.success(msg);
|
|
|
+ this.params.callback();
|
|
|
+ this.$emit('close');
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg);
|
|
|
+ }
|
|
|
+ loading.close();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ loading.close();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ communityRules(val) {
|
|
|
+ return {
|
|
|
+ required: true,
|
|
|
+ message: `请选择小区`,
|
|
|
+ trigger: 'change',
|
|
|
+ validator(rule, value, cb) {
|
|
|
+ if (!val.length) {
|
|
|
+ cb(new Error());
|
|
|
+ } else {
|
|
|
+ cb();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getOrgTreeList();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import '@assets/css/public-style.scss';
|
|
|
+.formContent {
|
|
|
+ /deep/ .el-form-item__content {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .clickUpload {
|
|
|
+ width: 100%;
|
|
|
+ height: rem(270);
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #e0e1e3;
|
|
|
+ margin-bottom: rem(20);
|
|
|
+ .clickUpText {
|
|
|
+ height: 100%;
|
|
|
+ line-height: rem(270);
|
|
|
+ text-align: center;
|
|
|
+ .dataImg {
|
|
|
+ object-fit: cover;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .formComtent {
|
|
|
+ width: 100%;
|
|
|
+ max-height: rem(187);
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #e0e1e3;
|
|
|
+ .allComm {
|
|
|
+ height: rem(30);
|
|
|
+ background: #f8fcff;
|
|
|
+ border-radius: 2px;
|
|
|
+ width: 100%;
|
|
|
+ padding-left: rem(15);
|
|
|
+ }
|
|
|
+ .commItem {
|
|
|
+ display: block;
|
|
|
+ margin: 0 rem(15);
|
|
|
+ }
|
|
|
+ .el-checkbox-group {
|
|
|
+ overflow: auto;
|
|
|
+ height: calc(100% - #{rem(30)});
|
|
|
+ margin-right: rem(10);
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ z-index: 11;
|
|
|
+ width: rem(6);
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track,
|
|
|
+ &::-webkit-scrollbar-corner {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: rem(6);
|
|
|
+ width: rem(6);
|
|
|
+ background: #e2e2e2;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track-piece {
|
|
|
+ background: transparent;
|
|
|
+ width: rem(6);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Shannon_mu