Skip to content

C
cloud-platform-ui
Commit 59b3f3bc authored by rencs's avatar rencs
Browse files
Options

10.14 营地验证bug

parent 01262b7b
Hide whitespace changes
Inline Side-by-side
Showing with 782 additions and 647 deletions
src/views/campsiteManage/modal/oneCampsiteModal.vue
View file @ 59b3f3bc
<template>
<!-- 营地：创建、编辑 -->
<div>
<h4>{{title}}</h4>
<h4>{{ title }}</h4>
<el-form :model="form" :rules="rules" ref="form" label-width="90px">
<el-row>
<el-col :span="8">
<el-form-item label="营地名称" prop="name">
<el-input v-model="form.name" placeholder="请输入营地名称" @blur="checkName()"></el-input>
<span v-if="isExist" style="color:red;">标签名已存在</span>
<el-input
v-model="form.name"
placeholder="请输入营地名称"
@blur="checkName()"
></el-input>
<span v-if="isExist" style="color: red">标签名已存在</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="营地地址" prop="addressStr">
<el-input placeholder="请输入营地地址" readonly v-model="form.addressStr" class="input-with-select">
<el-button slot="append" icon="el-icon-edit" @click="selectDestination"></el-button>
<el-input
placeholder="请输入营地地址"
readonly
v-model="form.addressStr"
class="input-with-select"
>
<el-button
slot="append"
icon="el-icon-edit"
@click="selectDestination"
></el-button>
</el-input>
<!-- <el-input v-model="form.addressStr" readonly placeholder="请输入营地地址" :on-icon-click="selectDestination"-->
<!-- icon="edit"></el-input>-->
<!-- <el-input v-model="form.addressStr" readonly placeholder="请输入营地地址" :on-icon-click="selectDestination"-->
<!-- icon="edit"></el-input>-->
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="客服电话" prop="servicePhone">
<el-input v-model="form.servicePhone" placeholder="请输入客服电话"></el-input>
<el-input
v-model="form.servicePhone"
placeholder="请输入客服电话"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="联系人" prop="concat">
<el-input v-model="form.concat" placeholder="请输入联系人"></el-input>
<el-input
v-model="form.concat"
placeholder="请输入联系人"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
<el-input
v-model="form.phone"
placeholder="请输入联系电话"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="营地类型" prop="approvers">
<span v-for="item in form.campsiteTagListVos"
:key="item.id" style="border: 1px solid #ccc; padding: 5px 10px;border-radius: 5px;margin-right: 10px;">{{item.name}}</span>
<el-button size="small" class="el-button el-button--primary" type="button" icon="edit"
@click="editLable(form.campsiteTagListVos)">编辑
<span
v-for="item in form.campsiteTagListVos"
:key="item.id"
style="
border: 1px solid #ccc;
padding: 5px 10px;
border-radius: 5px;
margin-right: 10px;
"
>{{ item.name }}</span
>
<el-button
size="small"
class="el-button el-button--primary"
type="button"
icon="edit"
@click="editLable(form.campsiteTagListVos)"
>编辑
</el-button>
</el-form-item>
<el-row>
<el-col :span="4">
<el-form-item label="热度值">
<el-input v-model="form.hot" placeholder="请输入热度值" type="number" min="0"></el-input>
<el-input
v-model="form.hot"
placeholder="请输入热度值"
type="number"
min="0"
></el-input>
</el-form-item>
</el-col>
</el-row>
<!--BASE_API + -->
<el-form-item label="封面图" :style="{display:'block'}" prop="logo">
<el-form-item label="封面图" :style="{ display: 'block' }" prop="logo">
<el-upload
class="upload-demo"
:headers="getHeaderWithToken"
:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
:action="BASE_API + '/api/universal/file/app/unauth/admin/upload'"
:show-file-list="false"
:on-success="handleAvatarSuccess"
list-type="picture">
<div slot="tip" class="el-upload__tip"><span style="color: red;">建议尺寸：485*485px</span></div>
<img v-if="$utils.isString(form.logo) && !$utils.isEmpty(form.logo)" :src="form.logo"
style="width:300px;max-height:300px;">
<i v-else class="el-icon-plus avatar-uploader-icon"
style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"></i>
list-type="picture"
>
<div slot="tip" class="el-upload__tip">
<span style="color: red">建议尺寸：485*485px</span>
</div>
<img
v-if="$utils.isString(form.logo) && !$utils.isEmpty(form.logo)"
:src="form.logo"
style="width: 300px; max-height: 300px"
/>
<i
v-else
class="el-icon-plus avatar-uploader-icon"
style="
lineheight: 100px;
width: 300px;
height: 100px;
border: 1px dashed #ccc;
"
></i>
</el-upload>
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="alt">
<el-input v-model="form.alt" type="text" placeholder="请输入替代文本"></el-input>
<el-input
v-model="form.alt"
type="text"
placeholder="请输入替代文本"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="img-title">
<el-input v-model="form.imgTitle" type="text" placeholder="请输入图片title"></el-input>
<el-input
v-model="form.imgTitle"
type="text"
placeholder="请输入图片title"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="img-keyword">
<el-input v-model="form.imgKeyword" type="text" placeholder="请输入图片关键字"></el-input>
<el-input
v-model="form.imgKeyword"
type="text"
placeholder="请输入图片关键字"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="img-desc">
<el-input v-model="form.imgDesc" type="text" placeholder="请输入图片描述"></el-input>
<el-input
v-model="form.imgDesc"
type="text"
placeholder="请输入图片描述"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="海报背景" :style="{display:'block'}">
<el-form-item label="海报背景" :style="{ display: 'block' }">
<el-upload
class="upload-demo"
:headers="getHeaderWithToken"
:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
:action="BASE_API + '/api/universal/file/app/unauth/admin/upload'"
:show-file-list="false"
:on-success="handlePosterSuccess"
:on-progress="uploadPosterProcess"
list-type="picture">
<div slot="tip" class="el-upload__tip"><span style="color: red;">建议尺寸：485*485px</span></div>
<el-progress v-show="imgPosterFlag == true" type="circle" :percentage="percent_poster"
style="margin-top: 20px"></el-progress>
<img v-if="$utils.isString(form.posterBackground) && !$utils.isEmpty(form.posterBackground)&& !imgPosterFlag"
:src="form.posterBackground" style="width:300px;max-height:300px;">
<i v-else-if="!imgPosterFlag" class="el-icon-plus avatar-uploader-icon"
style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"></i>
list-type="picture"
>
<div slot="tip" class="el-upload__tip">
<span style="color: red">建议尺寸：485*485px</span>
</div>
<el-progress
v-show="imgPosterFlag == true"
type="circle"
:percentage="percent_poster"
style="margin-top: 20px"
></el-progress>
<img
v-if="
$utils.isString(form.posterBackground) &&
!$utils.isEmpty(form.posterBackground) &&
!imgPosterFlag
"
:src="form.posterBackground"
style="width: 300px; max-height: 300px"
/>
<i
v-else-if="!imgPosterFlag"
class="el-icon-plus avatar-uploader-icon"
style="
lineheight: 100px;
width: 300px;
height: 100px;
border: 1px dashed #ccc;
"
></i>
</el-upload>
</el-form-item>
<el-form-item label="轮播图" :style="{display:'block'}" prop="carouse">
<el-form-item label="轮播图" :style="{ display: 'block' }" prop="carouse">
<el-upload
class="upload-demo"
:headers="getHeaderWithToken"
:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
:action="BASE_API + '/api/universal/file/app/unauth/admin/upload'"
:on-remove="handleRemove"
:file-list="fileList2"
:on-success="handleBannerSuccess"
list-type="picture">
<div slot="tip" class="el-upload__tip">最多上传5张 <span style="color: red;">建议尺寸：1080*644px</span></div>
<el-button v-if="fileList2.length<5" size="small" type="primary">点击上传</el-button>
list-type="picture"
>
<div slot="tip" class="el-upload__tip">
最多上传5张 <span style="color: red">建议尺寸：1080*644px</span>
</div>
<el-button v-if="fileList2.length < 5" size="small" type="primary"
>点击上传</el-button
>
</el-upload>
</el-form-item>
<el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
<el-tab-pane label="营地详情" name="first">
<!--<Editor v-if="activeName2=='first'" @input="handelContentIncrease" :value="form.content" :myQuillEditor="'myQuillEditorContent'" :activeName2="activeName2"></Editor>-->
<div class="editor-container" v-if="activeName2=='first'">
<UE :editorId="activeName2" :defaultMsg="form.content" :config=config ref="ue"
@ready="editorReadyEvent"></UE>
<div class="editor-container" v-if="activeName2 == 'first'">
<UE
:editorId="activeName2"
:defaultMsg="form.content"
:config="config"
ref="ue"
@ready="editorReadyEvent"
></UE>
</div>
</el-tab-pane>
<el-tab-pane label="配套&收费" name="second">
<!--<Editor v-if="activeName2=='second'" @input="handelIntroduceIncrease" :value="form.configure" :myQuillEditor="'myQuillEditorIntroduce'" :activeName2="activeName2"></Editor>-->
<div class="editor-container" v-if="activeName2=='second'">
<UE :editorId="activeName2" :defaultMsg="form.configure" :config=config ref="ue"
@ready="editorReadyEvent"></UE>
<div class="editor-container" v-if="activeName2 == 'second'">
<UE
:editorId="activeName2"
:defaultMsg="form.configure"
:config="config"
ref="ue"
@ready="editorReadyEvent"
></UE>
</div>
</el-tab-pane>
</el-tabs>
......@@ -152,627 +260,654 @@
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" v-if="title=='创建' && !isCreate && campsiteshop_btn_update" @click="create('form')">确 定
<el-button
type="primary"
v-if="title == '创建' && !isCreate && campsiteshop_btn_update"
@click="create('form')"
>确 定
</el-button>
<el-button type="primary" v-if="title=='编辑' && !isCreate && campsiteshop_btn_update" @click="update('form')">确 定
<el-button
type="primary"
v-if="title == '编辑' && !isCreate && campsiteshop_btn_update"
@click="update('form')"
>确 定
</el-button>
</div>
<!--编辑营地地址-->
<campsiteModal v-if="showCampsiteVisible && campsiteshop_btn_update" :obj="campsiteObj"
v-on:campsiteEvent="campsiteEvent"></campsiteModal>
<campsiteModal
v-if="showCampsiteVisible && campsiteshop_btn_update"
:obj="campsiteObj"
v-on:campsiteEvent="campsiteEvent"
></campsiteModal>
<!--编辑营地标签-->
<campsiteLabelModal v-if="editLableVisible && campsiteshop_btn_update" :allLabelList="allLabelList"
:checkList="checkList" v-on:tourLabelEvent="tourLabelEvent"></campsiteLabelModal>
<campsiteLabelModal
v-if="editLableVisible && campsiteshop_btn_update"
:allLabelList="allLabelList"
:checkList="checkList"
v-on:tourLabelEvent="tourLabelEvent"
></campsiteLabelModal>
</div>
</template>
<style>
textarea {
display: none;
}
textarea {
display: none;
}
.info {
border-radius: 10px;
line-height: 20px;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.info {
border-radius: 10px;
line-height: 20px;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.el-upload-list {
display: flex;
width: 100px;
}
.el-upload-list {
display: flex;
width: 100px;
}
.el-upload-list li {
margin-left: 10px;
}
.el-upload-list li {
margin-left: 10px;
}
</style>
<script>
// import Editor from "../../modal/editorTool";//富文本
import UE from '../../modal/Ueditor';//百度ue富文本
import campsiteLabelModal from "../../tourManage/modal/tourLabelModal";//标签
import campsiteModal from "./campsiteModal";//营地地址
import {
getOneCampsiteShop,
campsiteAllTagList,
editCampsiteShop,
addCampsiteShop,
existCampsiteShop
} from 'api/campsiteManage';
// import Editor from "../../modal/editorTool";//富文本
import UE from "../../modal/Ueditor"; //百度ue富文本
import campsiteLabelModal from "../../tourManage/modal/tourLabelModal"; //标签
import campsiteModal from "./campsiteModal"; //营地地址
import {
getOneCampsiteShop,
campsiteAllTagList,
editCampsiteShop,
addCampsiteShop,
existCampsiteShop,
} from "api/campsiteManage";
import {
getSonRegionByCodes,
getRegionByCodes,
} from 'api/base_info/region/';
import { getSonRegionByCodes, getRegionByCodes } from "api/base_info/region/";
import rsCode from '../../../utils/rsCode';
import {
getToken
} from '../../../utils/auth';
import {mapGetters} from 'vuex';
import rsCode from "../../../utils/rsCode";
import { getToken } from "../../../utils/auth";
import { mapGetters } from "vuex";
export default {
props: ["oneRow", "title", "campsiteshop_btn_update"],
name: 'upkeepDialog',
components: {
UE,
campsiteModal,
campsiteLabelModal
},
data() {
var checkPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('手机号不能为空'));
} else {
const reg = /^[1](([3][0-9])|([4][5,7,9])|([5][0-9])|([6][6])|([7][1,2,3,5,6,7,8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
console.log(reg.test(value));
if (reg.test(value)) {
callback();
} else {
return callback(new Error('请输入正确的手机号'));
}
}
};
return {
imgPosterFlag: false,
percent_poster: 0,
BASE_API: process.env.BASE_API,
defaultMsg: '这里是UE测试',
config: {
initialFrameWidth: null,
initialFrameHeight: 350
},
isExist: false,//名称是否已存在
campsiteObj: {},//营地地址
departureList: [],//出发地列表
departureObj: {name: ""},//出发地
pathway: [],//途径地
isCreate: false,//是否点击了创建-确定
fileList2: [],
activeName2: '',//行程亮点
form: {
alt: '',
imgTitle: undefined,
imgKeyword: undefined,
imgDesc: undefined,
id: undefined,
name: undefined,//营地名称
hot: 0,//营地热度
servicePhone: "",//客服电话
phone: "",//联系电话
province: undefined,//省份
provinceName: undefined,//省份名称
city: undefined,//市编号
cityName: undefined,//市名称
address: undefined,//详细地址
latitude: undefined,
longitude: undefined,
content: '',//营地详情
concat: "",//联系人
logo: undefined,//封面图
configure: '',//配套&收费
campsiteTagListVos: [],//营地类型
carouse: [],//banner轮播
posterBackground: '',//海报背景
},
showCampsiteVisible: false,//编辑营地地址
rules: {
name: {
type: 'string',
required: true,
message: '请输入营地名称',
trigger: 'blur'
},
servicePhone: {
type: 'string',
required: true,
message: '请输入客服电话',
trigger: 'blur'
},
phone: {
//validator: checkPhone,
type:'string',
trigger: 'blur',
message: '请输入联系电话',
required: true
},
concat: {
type: 'string',
required: true,
message: '请输入联系人',
trigger: 'blur'
},
addressStr: {
type: 'string',
required: true,
message: '请输入营地地址',
}
},
checkList: [],//已选中的标签
allCompanies: {},
allCompaniesArr: [],
oneTourDialogVisible: false,
editLableVisible: false,//营地标签
allLabelList: [],//全部营地标签
}
export default {
props: ["oneRow", "title", "campsiteshop_btn_update"],
name: "upkeepDialog",
components: {
UE,
campsiteModal,
campsiteLabelModal,
},
data() {
var checkPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error("手机号不能为空"));
} else {
const reg = /^[1](([3][0-9])|([4][5,7,9])|([5][0-9])|([6][6])|([7][1,2,3,5,6,7,8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
console.log(reg.test(value));
if (reg.test(value)) {
callback();
} else {
return callback(new Error("请输入正确的手机号"));
}
}
};
return {
imgPosterFlag: false,
percent_poster: 0,
BASE_API: process.env.BASE_API,
defaultMsg: "这里是UE测试",
config: {
initialFrameWidth: null,
initialFrameHeight: 350,
},
isExist: false, //名称是否已存在
campsiteObj: {}, //营地地址
departureList: [], //出发地列表
departureObj: { name: "" }, //出发地
pathway: [], //途径地
isCreate: false, //是否点击了创建-确定
fileList2: [],
activeName2: "", //行程亮点
form: {
addressStr: undefined,
alt: "",
imgTitle: undefined,
imgKeyword: undefined,
imgDesc: undefined,
id: undefined,
name: undefined, //营地名称
hot: 0, //营地热度
servicePhone: "", //客服电话
phone: "", //联系电话
province: undefined, //省份
provinceName: undefined, //省份名称
city: undefined, //市编号
cityName: undefined, //市名称
address: undefined, //详细地址
latitude: undefined,
longitude: undefined,
content: "", //营地详情
concat: "", //联系人
logo: undefined, //封面图
configure: "", //配套&收费
campsiteTagListVos: [], //营地类型
carouse: [], //banner轮播
posterBackground: "", //海报背景
},
showCampsiteVisible: false, //编辑营地地址
rules: {
name: {
type: "string",
required: true,
message: "请输入营地名称",
trigger: "blur",
},
created() {
this.getAllLabelList();
servicePhone: {
type: "string",
required: true,
message: "请输入客服电话",
trigger: "blur",
},
watch: {
oneTourDialogVisible(newValue, oldValue) {
if (!newValue) {
this.cleanForm();
}
},
phone: {
//validator: checkPhone,
type: "string",
trigger: "blur",
message: "请输入联系电话",
required: true,
},
mounted() {
this.cleanForm();
if (this.title == "编辑") {
let row = this.oneRow;
this.getOne(row.id);
} else {
this.activeName2 = "first";
}
this.oneTourDialogVisible = true;
concat: {
type: "string",
required: true,
message: "请输入联系人",
trigger: "blur",
},
computed: {
getHeaderWithToken() {
return {Authorization: getToken()};
},
addressStr: {
required: true,
message: "请输入营地地址",
trigger: "blur",
},
methods: {
/**
* 判断标签名是否已存在
* */
checkName() {
this.form.name = (this.form.name).trim();
if (!this.form.name) {
return;
}
let params = {
name: this.form.name
};
if (this.title == "编辑") {
params.id = this.form.id;
}
existCampsiteShop(params).then(response => {
if (response.status === 200) {
this.isExist = response.data;
} else {
this.$notify({
title: '失败',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
type: 'error',
duration: 2000
});
}
});
},
handleClick(tab, event) {
console.log(tab, event);
},
/**
* 编辑营地标签
* */
editLable(list) {
console.log(list);
this.editLableVisible = true;
},
/**
* 创建
* */
create(formName) {
const set = this.$refs;
set[formName].validate(valid => {
if (valid) {
let carouse = [];//营地轮播图
this.form.carouse.map(function (item) {
let c = {
id: item.id,
imgUrl: item.imgUrl
};
carouse.push(c);
});
/**
* 营地类别
* */
let campsiteTagDTOS = [];
this.form.campsiteTagListVos.map(function (item) {
campsiteTagDTOS.push(item.id);
});
let params = {
name: this.form.name,//营地名称
logo: this.form.logo,//封面图
content: this.form.content,//营地详情
configure: this.form.configure,//配套&收费
hot: this.form.hot,//营地热度
campsiteTagDTOS: campsiteTagDTOS,//营地类别
carouselDTOS: carouse,//轮播图
concat: this.form.concat,//联系人
servicePhone: this.form.servicePhone,//客服电话
phone: this.form.phone,//联系电话
province: this.campsiteObj.province,//省份
provinceName: this.campsiteObj.provinceName,//省份名称
city: this.campsiteObj.city,//市编号
cityName: this.campsiteObj.cityName,//市名称
address: this.campsiteObj.address,//详细地址
latitude: this.campsiteObj.latitude,
longitude: this.campsiteObj.longitude,
posterBackground: this.form.posterBackground,//海报背景
alt: this.form.alt,
imgTitle: this.form.imgTitle,
imgKeyword: this.form.imgKeyword,
imgDesc: this.form.imgDesc
};
console.log(params);
this.isExistCampsiteShop("create", params);
} else {
return;
}
});
},
/**
* 判断营地名称是否已存在
* */
isExistCampsiteShop(type, datas) {
if (!this.form.name) {
return;
}
let params = {
name: this.form.name
};
if (type == 'update') {//编辑
params.id = this.form.id;
}
existCampsiteShop(params).then(response => {
if (response.status === 200) {
this.isExist = response.data;
if (response.data) {
this.isCreate = false;
}
if (!response.data && type == "update") {//编辑
this.toUpdate(datas);
}
if (!response.data && type == "create") {
//创建
this.toCreate(datas);
}
} else {
this.$notify({
title: '失败',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
type: 'error',
duration: 2000
});
}
});
},
/**
* 编辑
* */
update(formName) {
const set = this.$refs;
set[formName].validate(valid => {
if (valid) {
this.isCreate = true;
let carouse = [];//营地轮播图
this.form.carouse.map(function (item) {
let c = {
id: item.id,
imgUrl: item.imgUrl
};
carouse.push(c);
});
/**
* 营地类别
* */
let campsiteTagDTOS = [];
this.form.campsiteTagListVos.map(function (item) {
campsiteTagDTOS.push(item.id);
});
let params = {
id: this.form.id,
name: this.form.name,//营地名称
logo: this.form.logo,//封面图
content: this.form.content,//营地详情
configure: this.form.configure,//配套&收费
hot: this.form.hot,//营地热度
campsiteTagDTOS: campsiteTagDTOS,//营地类别
carouselDTOS: carouse,//轮播图
concat: this.form.concat,//联系人
servicePhone: this.form.servicePhone,//客服电话
phone: this.form.phone,//联系电话
province: this.campsiteObj.province,//省份
provinceName: this.campsiteObj.provinceName,//省份名称
city: this.campsiteObj.city,//市编号
cityName: this.campsiteObj.cityName,//市名称
address: this.campsiteObj.address,//详细地址
latitude: this.campsiteObj.latitude,
longitude: this.campsiteObj.longitude,
posterBackground: this.form.posterBackground,//海报背景
alt: this.form.alt,
imgTitle: this.form.imgTitle,
imgKeyword: this.form.imgKeyword,
imgDesc: this.form.imgDesc
};
console.log(params);
this.isExistCampsiteShop("update", params);
} else {
return;
}
});
},
/**
* 更新
* */
toUpdate(params) {
editCampsiteShop(params).then(response => {
if (response.status === 200) {
this.$notify({
title: '成功',
message: '编辑成功',
type: 'success',
duration: 2000
});
this.$emit("oneCampsiteDialogEvent", true);
} else {
this.$notify({
title: '编辑失败',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
type: 'error',
duration: 2000
});
}
});
},
/**
* 创建
* */
toCreate(params) {
editCampsiteShop(params).then(response => {
if (response.status === 200) {
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
});
this.$emit("oneCampsiteDialogEvent", true);
} else {
this.$notify({
title: '创建失败',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
type: 'error',
duration: 2000
});
}
});
},
/**
* 获取全部营地类型
* */
getAllLabelList() {
campsiteAllTagList().then(response => {
this.allLabelList = response;
});
},
/**
* 关闭营地地址弹框
* */
campsiteEvent(obj) {
this.showCampsiteVisible = false;
if (obj) {
this.campsiteObj = obj;
let provinceObj = getRegionByCodes([obj.province]);
let cityObj = getRegionByCodes([obj.city]);
this.campsiteObj.provinceName = provinceObj[0].name;
this.campsiteObj.cityName = cityObj[0].name;
this.form.addressStr = this.campsiteObj.provinceName + this.campsiteObj.cityName + this.campsiteObj.address;
console.log(this.campsiteObj);
}
},
/**
* 编辑营地地址
* */
selectDestination() {
let that = this;
this.campsiteObj.showTitle = "营地地址编辑";
this.campsiteObj.eventName = 'campsiteEvent';
this.campsiteObj.keyword = this.campsiteObj.address;
this.showCampsiteVisible = true;
},
/**
* 关闭营地标签弹框
* */
tourLabelEvent(obj) {
let that = this;
this.editLableVisible = false;
let arr = [];
let ckeckList = [];
if (obj) {
this.allLabelList.map(function (item) {
obj.map(function (b) {
if (item.name == b) {
arr.push(item);
ckeckList.push(b);
}
});
});
this.form.campsiteTagListVos = arr;
this.checkList = ckeckList;
console.log(obj);
}
},
/**
* 获取一条营地
* */
getOne(id) {
let that = this;
getOneCampsiteShop(id).then(response => {
this.form = response.data;
this.campsiteObj = {
address: response.data.address,
province: response.data.province,
provinceName: response.data.provinceName,
city: response.data.city,
cityName: response.data.cityName,
latitude: response.data.latitude,
longitude: response.data.longitude,
};
response.data.addressStr = this.campsiteObj.provinceName + this.campsiteObj.cityName + this.campsiteObj.address;
let arr = [];
that.allLabelList.map(function (b) {
response.data.campsiteTagListVos.map(function (item) {
if (item.id == b.id) {
arr.push(item.name);
}
});
});
this.checkList = arr;
},
checkList: [], //已选中的标签
allCompanies: {},
allCompaniesArr: [],
oneTourDialogVisible: false,
editLableVisible: false, //营地标签
allLabelList: [], //全部营地标签
};
},
created() {
this.getAllLabelList();
},
watch: {
oneTourDialogVisible(newValue, oldValue) {
if (!newValue) {
this.cleanForm();
}
},
},
mounted() {
this.cleanForm();
if (this.title == "编辑") {
let row = this.oneRow;
this.getOne(row.id);
} else {
this.activeName2 = "first";
}
this.oneTourDialogVisible = true;
},
computed: {
getHeaderWithToken() {
return { Authorization: getToken() };
},
},
methods: {
/**
* 判断标签名是否已存在
* */
checkName() {
this.form.name = this.form.name.trim();
if (!this.form.name) {
return;
}
let params = {
name: this.form.name,
};
if (this.title == "编辑") {
params.id = this.form.id;
}
existCampsiteShop(params).then((response) => {
if (response.status === 200) {
this.isExist = response.data;
} else {
this.$notify({
title: "失败",
message: rsCode.msg[response.code]
? rsCode.msg[response.code]
: "操作失败！",
type: "error",
duration: 2000,
});
}
});
},
handleClick(tab, event) {
console.log(tab, event);
},
/**
* 编辑营地标签
* */
editLable(list) {
console.log(list);
this.editLableVisible = true;
},
/**
* 创建
* */
create(formName) {
const set = this.$refs;
set[formName].validate((valid) => {
if (valid) {
let carouse = []; //营地轮播图
this.form.carouse.map(function (item) {
let c = {
id: item.id,
imgUrl: item.imgUrl,
};
carouse.push(c);
});
/**
* 营地类别
* */
let campsiteTagDTOS = [];
this.form.campsiteTagListVos.map(function (item) {
campsiteTagDTOS.push(item.id);
});
let params = {
name: this.form.name, //营地名称
logo: this.form.logo, //封面图
content: this.form.content, //营地详情
configure: this.form.configure, //配套&收费
hot: this.form.hot, //营地热度
campsiteTagDTOS: campsiteTagDTOS, //营地类别
carouselDTOS: carouse, //轮播图
concat: this.form.concat, //联系人
servicePhone: this.form.servicePhone, //客服电话
phone: this.form.phone, //联系电话
province: this.campsiteObj.province, //省份
provinceName: this.campsiteObj.provinceName, //省份名称
city: this.campsiteObj.city, //市编号
cityName: this.campsiteObj.cityName, //市名称
address: this.campsiteObj.address, //详细地址
latitude: this.campsiteObj.latitude,
longitude: this.campsiteObj.longitude,
posterBackground: this.form.posterBackground, //海报背景
alt: this.form.alt,
imgTitle: this.form.imgTitle,
imgKeyword: this.form.imgKeyword,
imgDesc: this.form.imgDesc,
};
console.log(params);
this.isExistCampsiteShop("create", params);
} else {
return;
}
});
},
/**
* 判断营地名称是否已存在
* */
isExistCampsiteShop(type, datas) {
if (!this.form.name) {
return;
}
let params = {
name: this.form.name,
};
if (type == "update") {
//编辑
params.id = this.form.id;
}
existCampsiteShop(params).then((response) => {
if (response.status === 200) {
this.isExist = response.data;
if (response.data) {
this.isCreate = false;
}
if (!response.data && type == "update") {
//编辑
this.toUpdate(datas);
}
if (!response.data && type == "create") {
//创建
this.toCreate(datas);
}
} else {
this.$notify({
title: "失败",
message: rsCode.msg[response.code]
? rsCode.msg[response.code]
: "操作失败！",
type: "error",
duration: 2000,
});
}
});
},
/**
* 编辑
* */
update(formName) {
const set = this.$refs;
set[formName].validate((valid) => {
if (valid) {
this.isCreate = true;
let carouse = []; //营地轮播图
this.form.carouse.map(function (item) {
let c = {
id: item.id,
imgUrl: item.imgUrl,
};
carouse.push(c);
});
/**
* 营地类别
* */
let campsiteTagDTOS = [];
this.form.campsiteTagListVos.map(function (item) {
campsiteTagDTOS.push(item.id);
});
let params = {
id: this.form.id,
name: this.form.name, //营地名称
logo: this.form.logo, //封面图
content: this.form.content, //营地详情
configure: this.form.configure, //配套&收费
hot: this.form.hot, //营地热度
campsiteTagDTOS: campsiteTagDTOS, //营地类别
carouselDTOS: carouse, //轮播图
concat: this.form.concat, //联系人
servicePhone: this.form.servicePhone, //客服电话
phone: this.form.phone, //联系电话
province: this.campsiteObj.province, //省份
provinceName: this.campsiteObj.provinceName, //省份名称
city: this.campsiteObj.city, //市编号
cityName: this.campsiteObj.cityName, //市名称
address: this.campsiteObj.address, //详细地址
latitude: this.campsiteObj.latitude,
longitude: this.campsiteObj.longitude,
posterBackground: this.form.posterBackground, //海报背景
alt: this.form.alt,
imgTitle: this.form.imgTitle,
imgKeyword: this.form.imgKeyword,
imgDesc: this.form.imgDesc,
};
console.log(params);
this.isExistCampsiteShop("update", params);
} else {
return;
}
});
},
/**
* 更新
* */
toUpdate(params) {
editCampsiteShop(params).then((response) => {
if (response.status === 200) {
this.$notify({
title: "成功",
message: "编辑成功",
type: "success",
duration: 2000,
});
this.$emit("oneCampsiteDialogEvent", true);
} else {
this.$notify({
title: "编辑失败",
message: rsCode.msg[response.code]
? rsCode.msg[response.code]
: "操作失败！",
type: "error",
duration: 2000,
});
}
});
},
/**
* 创建
* */
toCreate(params) {
editCampsiteShop(params).then((response) => {
if (response.status === 200) {
this.$notify({
title: "成功",
message: "创建成功",
type: "success",
duration: 2000,
});
this.$emit("oneCampsiteDialogEvent", true);
} else {
this.$notify({
title: "创建失败",
message: rsCode.msg[response.code]
? rsCode.msg[response.code]
: "操作失败！",
type: "error",
duration: 2000,
});
}
});
},
/**
* 获取全部营地类型
* */
getAllLabelList() {
campsiteAllTagList().then((response) => {
this.allLabelList = response;
});
},
//轮播
let fileList2 = [];
response.data.carouse.map(function (p) {
let pp = {
id: p.id,
url: p.imgUrl
};
fileList2.push(pp);
});
this.fileList2 = fileList2;
this.activeName2 = "first";
})
},
/**
* 旅游-弹框-取消
* */
cancel() {
this.cleanForm();
this.$emit("oneCampsiteDialogEvent", false);
},
/**
* 配套&收费 富文本
* */
handelIntroduceIncrease(step) {
this.form.configure = step;
},
/**
* 富文本 营地详情
* */
editorReadyEvent(instance) {
let t = this;
instance.addListener('contentChange', () => {
if (t.activeName2 == "first") {
t.form.content = instance.getContent();
} else if (t.activeName2 == "second") {
t.form.configure = instance.getContent();
}
});
},
/**
* 删除banner
* */
handleRemove(file, fileList) {
let list = [];
fileList.map(function (item) {
if (item.url != file.url) {
list.push(item);
}
});
this.fileList2 = list;
let arr = [];
this.form.carouse.map(function (item) {
if (item.imgUrl != file.url) {
arr.push(item);
}
});
this.form.carouse = arr;
},
/**
* 封面图上传
* **/
handleAvatarSuccess(res, file) {
this.form.logo = res.data;
},
/**
* banner上传
* */
handleBannerSuccess(res, file) {
this.fileList2.push({url: res.data});
this.form.carouse.push({imgUrl: res.data});
},
/**
* 海报背景上传
* **/
handlePosterSuccess(res, file) {
this.percent_poster = 0;
this.imgPosterFlag = false;
this.form.posterBackground = res.data;
},
/**
* 海报背景图上传进度
* */
uploadPosterProcess(event, file, fileList) {
this.imgPosterFlag = true;
console.log(event.percent);
this.percent_poster = Math.floor(event.percent);
},
/**
* 清空旅游弹框数据
*/
cleanForm() {
this.campsiteObj = {name: ""};//营地地址
this.fileList2 = [];
this.activeName2 = '';//营地详情
this.form = {
id: undefined,
name: undefined,//营地名称
hot: 0,//营地热度
servicePhone: "",//客服电话
phone: "",//联系电话
province: undefined,//省份
provinceName: undefined,//省份名称
city: undefined,//市编号
cityName: undefined,//市名称
address: undefined,//详细地址
latitude: undefined,
longitude: undefined,
content: '',//营地详情
concat: "",//联系人
logo: undefined,//封面图
configure: '',//配套&收费
campsiteTagListVos: [],//营地类型
carouse: [],//banner轮播
posterBackground: '',
alt: '',
imgTitle:undefined,
imgKeyword:undefined,
imgDesc:undefined
};
this.showCampsiteVisible = false;//编辑营地地址
/**
* 关闭营地地址弹框
* */
campsiteEvent(obj) {
this.showCampsiteVisible = false;
if (obj) {
this.campsiteObj = obj;
let provinceObj = getRegionByCodes([obj.province]);
let cityObj = getRegionByCodes([obj.city]);
this.campsiteObj.provinceName = provinceObj[0].name;
this.campsiteObj.cityName = cityObj[0].name;
this.form.addressStr =
this.campsiteObj.provinceName +
this.campsiteObj.cityName +
this.campsiteObj.address;
console.log(this.campsiteObj);
}
},
/**
* 编辑营地地址
* */
selectDestination() {
let that = this;
this.campsiteObj.showTitle = "营地地址编辑";
this.campsiteObj.eventName = "campsiteEvent";
this.campsiteObj.keyword = this.campsiteObj.address;
this.showCampsiteVisible = true;
},
/**
* 关闭营地标签弹框
* */
tourLabelEvent(obj) {
let that = this;
this.editLableVisible = false;
let arr = [];
let ckeckList = [];
if (obj) {
this.allLabelList.map(function (item) {
obj.map(function (b) {
if (item.name == b) {
arr.push(item);
ckeckList.push(b);
}
});
});
this.form.campsiteTagListVos = arr;
this.checkList = ckeckList;
console.log(obj);
}
},
/**
* 获取一条营地
* */
getOne(id) {
let that = this;
getOneCampsiteShop(id).then((response) => {
this.form = response.data;
this.campsiteObj = {
address: response.data.address,
province: response.data.province,
provinceName: response.data.provinceName,
city: response.data.city,
cityName: response.data.cityName,
latitude: response.data.latitude,
longitude: response.data.longitude,
};
response.data.addressStr =
this.campsiteObj.provinceName +
this.campsiteObj.cityName +
this.campsiteObj.address;
let arr = [];
that.allLabelList.map(function (b) {
response.data.campsiteTagListVos.map(function (item) {
if (item.id == b.id) {
arr.push(item.name);
}
});
});
this.checkList = arr;
//轮播
let fileList2 = [];
response.data.carouse.map(function (p) {
let pp = {
id: p.id,
url: p.imgUrl,
};
fileList2.push(pp);
});
this.fileList2 = fileList2;
this.activeName2 = "first";
});
},
/**
* 旅游-弹框-取消
* */
cancel() {
this.cleanForm();
this.$emit("oneCampsiteDialogEvent", false);
},
/**
* 配套&收费 富文本
* */
handelIntroduceIncrease(step) {
this.form.configure = step;
},
/**
* 富文本 营地详情
* */
editorReadyEvent(instance) {
let t = this;
instance.addListener("contentChange", () => {
if (t.activeName2 == "first") {
t.form.content = instance.getContent();
} else if (t.activeName2 == "second") {
t.form.configure = instance.getContent();
}
}
});
},
/**
* 删除banner
* */
handleRemove(file, fileList) {
let list = [];
fileList.map(function (item) {
if (item.url != file.url) {
list.push(item);
}
});
this.fileList2 = list;
let arr = [];
this.form.carouse.map(function (item) {
if (item.imgUrl != file.url) {
arr.push(item);
}
});
this.form.carouse = arr;
},
/**
* 封面图上传
* **/
handleAvatarSuccess(res, file) {
this.form.logo = res.data;
},
/**
* banner上传
* */
handleBannerSuccess(res, file) {
this.fileList2.push({ url: res.data });
this.form.carouse.push({ imgUrl: res.data });
},
/**
* 海报背景上传
* **/
handlePosterSuccess(res, file) {
this.percent_poster = 0;
this.imgPosterFlag = false;
this.form.posterBackground = res.data;
},
/**
* 海报背景图上传进度
* */
uploadPosterProcess(event, file, fileList) {
this.imgPosterFlag = true;
console.log(event.percent);
this.percent_poster = Math.floor(event.percent);
},
/**
* 清空旅游弹框数据
*/
cleanForm() {
this.campsiteObj = { name: "" }; //营地地址
this.fileList2 = [];
this.activeName2 = ""; //营地详情
this.form = {
id: undefined,
name: undefined, //营地名称
hot: 0, //营地热度
servicePhone: "", //客服电话
phone: "", //联系电话
province: undefined, //省份
provinceName: undefined, //省份名称
city: undefined, //市编号
cityName: undefined, //市名称
address: undefined, //详细地址
latitude: undefined,
longitude: undefined,
content: "", //营地详情
concat: "", //联系人
logo: undefined, //封面图
configure: "", //配套&收费
campsiteTagListVos: [], //营地类型
carouse: [], //banner轮播
posterBackground: "",
alt: "",
imgTitle: undefined,
imgKeyword: undefined,
imgDesc: undefined,
};
this.showCampsiteVisible = false; //编辑营地地址
},
},
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment