<template>
|
<div class="activity_add">
|
<v-header title="新增/编辑"></v-header>
|
<div class="fm w_row clearfix">
|
<section class="w_col_12 sec">
|
<p class="label" data-require>公司名称：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.name"
|
></el-input>
|
</article>
|
</section>
|
<section class="w_col_12 sec">
|
<p class="label">所属小区：</p>
|
<article>
|
<el-select size="small" v-model="os.areaId">
|
<el-option
|
v-for="(item, index) in communityList"
|
:key="index"
|
:label="item.name"
|
:value="item.villageId"
|
>
|
</el-option>
|
</el-select>
|
</article>
|
</section>
|
<section class="w_col_12 sec">
|
<p class="label">公司地址：</p>
|
<article>
|
<el-input
|
type="textarea"
|
placeholder="请输入"
|
size="small"
|
:rows="5"
|
v-model="os.address"
|
></el-input>
|
</article>
|
</section>
|
<section class="w_col_12 sec">
|
<p class="label">公司logo：</p>
|
<article>
|
<div class="image-box" v-if="os.logo != null && os.logo != ''">
|
<img class="image" :src="os.logo" alt />
|
<img
|
@click="imgclear"
|
class="clear-icon"
|
src="static/image/clear.png"
|
alt
|
/>
|
</div>
|
<div class="avatar" v-else>
|
<v-u
|
:boxWidth="800"
|
:boxHeight="400"
|
:width="650"
|
:height="285"
|
@path="onPath"
|
></v-u>
|
</div>
|
</article>
|
</section>
|
|
<section class="w_col_24 sec">
|
<p class="label">公司简介：</p>
|
<article>
|
<el-input
|
type="textarea"
|
placeholder="请输入"
|
:rows="5"
|
size="small"
|
v-model="os.introduction"
|
></el-input>
|
</article>
|
</section>
|
<section class="w_col_12 sec">
|
<p class="label">评价星级：</p>
|
<article class="aline-center">
|
<el-radio-group v-model="os.star">
|
<el-radio
|
:label="type.value"
|
v-for="type in radioList"
|
:key="type.value"
|
:value="type.value"
|
>{{ type.label }}</el-radio
|
>
|
</el-radio-group>
|
</article>
|
</section>
|
<section class="w_col_12 sec">
|
<p class="label">红色物业：</p>
|
<article>
|
<el-radio-group v-model="os.isRed" size="medium">
|
<el-radio-button :label="1">是</el-radio-button>
|
<el-radio-button :label="2">否</el-radio-button>
|
</el-radio-group>
|
</article>
|
</section>
|
<section class="w_col_12 sec">
|
<p class="label" data-require>联系人姓名：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.contactName"
|
></el-input>
|
</article>
|
</section>
|
<section class="w_col_12 sec">
|
<p class="label" data-require>联系人电话：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
maxlength="11"
|
v-model.number="os.phone"
|
></el-input>
|
</article>
|
</section>
|
<section class="w_col_24 sec">
|
<p class="label" data-require>平台账号：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model.number="os.account"
|
></el-input>
|
</article>
|
</section>
|
<section class="w_col_24 sec">
|
<p class="label" data-require>登录密码：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
type="password"
|
v-model.number="os.password"
|
></el-input>
|
</article>
|
</section>
|
<section class="w_col_12 sec" v-if="!editType">
|
<p class="label" data-require>确认密码：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
type="password"
|
v-model.number="os.confimpassword"
|
></el-input>
|
</article>
|
</section>
|
<section class="w_col_24 sec">
|
<p class="label" data-require>选择角色：</p>
|
<article>
|
<el-select size="small" v-model="os.roleId">
|
<el-option
|
v-for="item in roleList"
|
:key="item.roleId"
|
:label="item.roleName"
|
:value="item.roleId"
|
>
|
</el-option>
|
</el-select>
|
</article>
|
</section>
|
<section class="w_col_24 fl-f">
|
<p class="label-serve"></p>
|
<div class="btns" style="margin-top: 20px">
|
<el-button size="small" type="primary" @click="sub()">提交</el-button>
|
<el-button @click="back" size="small">取消</el-button>
|
</div>
|
</section>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import vE from "com/editor/editor";
|
import vU from "com/upload/upload";
|
import ImgCutter from "vue-img-cutter";
|
import { objCopyPro } from "../../../utils/common";
|
export default {
|
props: {
|
add: { type: Boolean, default: false }, // 添加 编辑
|
title: { type: String, default: "活动" },
|
detail: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
},
|
components: { vE, vU, ImgCutter },
|
data() {
|
return {
|
clearImg: require("../../../../static/image/clear.png"),
|
startnum1: false,
|
endnum1: false,
|
editType: false,
|
imageList: [],
|
id: "", //编辑时的id
|
radioList: [
|
{
|
label: "五星",
|
value: 5,
|
},
|
{
|
label: "四星",
|
value: 4,
|
},
|
{
|
label: "三星",
|
value: 3,
|
},
|
{
|
label: "二星",
|
value: 2,
|
},
|
{
|
label: "一星",
|
value: 1,
|
},
|
],
|
os: {
|
name: "",
|
star: "",
|
areaId: "",
|
contactName: "",
|
phone: "",
|
account: "", // 账号
|
password: "", // 密码
|
roleId: "",
|
confimpassword: "",
|
introduction: "",
|
address: "",
|
logo: "",
|
isRed: 1,
|
},
|
time: "",
|
start: ["", ""],
|
content: "",
|
min: 0,
|
max: 0,
|
minmax: false,
|
roleList: [],
|
communityList: [],
|
};
|
},
|
computed: {},
|
watch: {
|
detail: {
|
handler(n) {
|
this.setDetail(n);
|
},
|
deep: true,
|
},
|
minmax(n) {
|
this.max = n ? -1 : 0;
|
},
|
},
|
methods: {
|
imgclear() {
|
//删除图片
|
this.os.logo = "";
|
},
|
onPath(v) {
|
this.os.logo = v;
|
},
|
clear(index) {
|
this.imageList.splice(index, 1);
|
},
|
back() {
|
//取消 返回上一页
|
this.$router.back();
|
},
|
start1() {
|
this.startnum1 = true;
|
},
|
end1() {
|
this.endnum1 = true;
|
},
|
nBlur() {
|
this.endnum1 = false;
|
this.startnum1 = false;
|
},
|
// 编辑器内容
|
onEdit(v) {
|
this.os.richText = v.html;
|
},
|
// 完成上传赋值
|
onUpload(v) {
|
// console.log(v)
|
this.imageList.push(v);
|
// this.os.cover = v;
|
},
|
// 活动时间：
|
changeStart(v) {
|
if (v && v.length && v[0] && v[1]) {
|
this.os.activityTimeBegin = v[0];
|
this.os.activityTimeEnd = v[1];
|
}
|
},
|
// 报名时间
|
changeTime(v) {
|
if (v && v.length && v[0] && v[1]) {
|
this.os.enrollTimeBegin = v[0];
|
this.os.enrollTimeEnd = v[1];
|
}
|
},
|
// 保存发布
|
sub() {
|
if (!this.os.name) {
|
demo.toast("请输入公司名称");
|
return;
|
}
|
if (!this.os.contactName) {
|
demo.toast("请输入联系人姓名");
|
return;
|
}
|
|
if (!/^1[3-9]\d{9}$/.test(this.os.phone)) {
|
demo.toast("请输入联系人手机号");
|
return false;
|
}
|
|
if (this.editType) {
|
//编辑
|
this.edit();
|
} else {
|
//新增
|
this.adds();
|
}
|
},
|
edit() {
|
//编辑
|
let data = this.os;
|
this.$api.post("comProperty/update", data, (e) => {
|
demo.toast("编辑成功");
|
this.back();
|
});
|
},
|
adds() {
|
// 新增
|
let data = this.os;
|
this.$api.post("comProperty", data, (e) => {
|
demo.toast("新增成功");
|
this.back();
|
});
|
},
|
reset() {
|
this.content = "";
|
this.min = this.max = 0;
|
this.time = ["", ""];
|
this.start = ["", ""];
|
for (let j in this.os) {
|
this.os[j] = "";
|
}
|
},
|
setDetail(v) {
|
if (v.id) {
|
this.os.participationLowestNum = this.min = +(
|
v.participationLowestNum || 0
|
);
|
this.os.participationNum = this.max = +(v.participationNum || 0);
|
this.os.name = v.name;
|
this.content = this.os.richText = v.richText;
|
this.os.address = v.address;
|
this.os.enrollTimeBegin = v.enrollTimeBegin;
|
this.os.enrollTimeEnd = v.enrollTimeEnd;
|
this.os.activityTimeBegin = v.activityTimeBegin;
|
this.os.activityTimeEnd = v.activityTimeEnd;
|
this.os.logo = v.logo;
|
this.os.status = v.status;
|
this.start = [v.activityTimeBegin || "", v.activityTimeEnd || ""];
|
this.time = [v.enrollTimeBegin || "", v.enrollTimeEnd || ""];
|
this.os.id = v.id;
|
}
|
},
|
},
|
created() {},
|
mounted() {
|
this.$api.get(
|
"/systemmanagement/listrolebackstage",
|
{
|
pageNum: 1,
|
pageSize: 99999,
|
},
|
(e) => {
|
this.roleList = e.records;
|
}
|
);
|
this.$api.post("villagemanager/pagevillage", {}, (e) => {
|
this.communityList = e.data.records;
|
if (this.$route.query.row) {
|
this.os = objCopyPro(this.os, JSON.parse(this.$route.query.row));
|
this.editType = true;
|
}
|
});
|
this.setDetail(this.detail);
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.number-title {
|
height: 10px;
|
font-size: 14px;
|
padding-top: 10px;
|
color: #a5a8af;
|
}
|
.aline-center {
|
display: flex;
|
align-items: center;
|
}
|
.imgList {
|
/*width: 100%;*/
|
display: flex;
|
flex-wrap: wrap;
|
.img-box {
|
position: relative;
|
box-sizing: border-box;
|
margin: 4px;
|
width: 104px;
|
height: 104px;
|
.clear {
|
cursor: pointer;
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 20px;
|
height: 20px;
|
}
|
img {
|
width: 104px;
|
height: 104px;
|
}
|
}
|
}
|
.image-box {
|
width: 104px;
|
height: 104px;
|
margin: 5px;
|
position: relative;
|
}
|
|
.clear-icon {
|
cursor: pointer;
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
width: 30px;
|
height: 30px;
|
.image {
|
width: 100%;
|
object-fit: cover;
|
/*width: 300px;*/
|
}
|
}
|
|
.activity_add {
|
overflow-y: scroll;
|
.edit {
|
margin-bottom: 10px;
|
padding: 0 40px;
|
}
|
.sec:last-child {
|
margin-bottom: 0;
|
}
|
.sec {
|
article {
|
max-width: 300px;
|
}
|
}
|
}
|
.fl-f {
|
display: flex;
|
}
|
.label-serve {
|
text-align: right;
|
width: 100px;
|
}
|
</style>
|
