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