vue上传图片加水印

<el-form-item label="业主名称">
<el-input v-model="houseForm.owername" disabled style="width: 50%;"></el-input>
</el-form-item>

<el-form-item label="联系电话">
<el-input v-model="houseForm.linkPhone" disabled style="width: 50%;"></el-input>
</el-form-item>
<el-form-item align="center">
<el-button @click.native="next" size="medium">
下一步
<i class="el-icon-caret-right"></i>
</el-button>
</el-form-item>
</el-form>
</el-card>
</el-tab-pane>
<el-tab-pane label="挂牌信息" name="list" :disabled="nextButtonDisabled4" >
<el-card class="box-card">
<el-form ref="listForm" :model="listForm" :rules="rules" label-width="80px">
<el-form-item label="标题" prop="title">
<el-input v-model="listForm.title" style="width: 70%;"></el-input>
</el-form-item>
<el-form-item label="副标题">
<el-input v-model="listForm.subTitle" style="width: 70%;"></el-input>
</el-form-item>
<el-form-item label="行政区" prop="zoneCode">
<el-select v-model="listForm.zoneCode" placeholder="请选择">
<el-option
v-for="item in listSelectForm.zoneItems"
:key="item.code"
:label="item.label"
:value="item.code"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属小区">

<el-input v-model="listForm.propAreaName" placeholder="请输入小区名称" ></el-input>
</el-form-item>
<el-form-item label="重点区域" prop="areaList">
<el-select
v-model="listSelectForm.areaList"
multiple
filterable
allow-create
default-first-option
placeholder="请选择重点区域信息"
style="width: 50%;"
></el-select>
</el-form-item>
<el-form-item label="经纪人员" prop="brokerId">
<el-col :span="6">
<el-select
v-model="listForm.brokerId"
@change="choseStoreBrokers"
placeholder="选择人员"
>
<el-option
v-for="item in brokerList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="联系电话" prop="linkPhone">
<el-input v-model="listForm.linkPhone" style="width: 50%;"></el-input>
</el-form-item>
<el-form-item label="建筑年代" prop="buildYear">
<el-input v-model="listForm.buildYear" style="width: 10%;"></el-input>
</el-form-item>
<el-form-item label="楼层信息">
<el-col :span="6">
<el-form-item label="总层数" prop="totalFloorCount">
<el-input v-model="listForm.totalFloorCount" style="width: 50%;"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="所在楼层" prop="floorPostion">
<el-select v-model="listForm.floorPostion" placeholder="请选择" style="width: 50%;">
<el-option
v-for="item in floorPostionItems"
:key="item.code"
:label="item.label"
:value="item.code"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="房屋用途" prop="houseUse">
<el-select v-model="listForm.houseUse" placeholder="请选择" style="width: 50%;">
<el-option
v-for="item in houseUseItems"
:key="item.code"
:label="item.label"
:value="item.code"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="户型">
<el-col :span="6">
<el-form-item label="室" prop="room">
<el-input v-model="listForm.room" style="width: 50%;"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="厅" prop="hall">
<el-input v-model="listForm.hall" style="width: 50%;"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="卫" prop="bathroom">
<el-input v-model="listForm.bathroom" style="width: 50%;"></el-input>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="其他信息">
<el-col :span="6">
<el-form-item label="房屋朝向" prop="direction">
<el-select v-model="listForm.direction" placeholder="请选择" style="width: 50%;">
<el-option
v-for="item in directionItems"
:key="item.code"
:label="item.label"
:value="item.code"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="装修标准" prop="decoration">
<el-select v-model="listForm.decoration" placeholder="请选择" style="width: 50%;">
<el-option
v-for="item in decorationItems"
:key="item.code"
:label="item.label"
:value="item.code"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="供暖方式" prop="heating">
<el-select v-model="listForm.heating" placeholder="请选择" style="width: 50%;">
<el-option
v-for="item in heatingItems"
:key="item.code"
:label="item.label"
:value="item.code"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="拟售价格" prop="sellPrice">
<el-input v-model="listForm.sellPrice" style="width: 20%;"></el-input>元
</el-form-item>
<el-form-item align="center">
<el-button @click.native="previous " size="medium">
<i class="el-icon-caret-left"></i>
上一步
</el-button>
<el-button @click.native="next" size="medium">
下一步
<i class="el-icon-caret-right"></i>
</el-button>
</el-form-item>
</el-form>
</el-card>
</el-tab-pane>
<el-tab-pane label="房源描述" name="propArea" :disabled="nextButtonDisabled">
<el-form ref="propAreaForm" :model="propAreaForm" label-width="80px">
<el-form-item label="亮点">
<el-input
type="textarea"
:autosize="{ minRows: 3, maxRows: 6}"
placeholder="请输入内容"
v-model="propAreaForm.strengths"
></el-input>
</el-form-item>
<el-form-item label="配套">
<el-input
type="textarea"
:autosize="{ minRows: 3, maxRows: 6}"
placeholder="请输入内容"
v-model="propAreaForm.matching"
></el-input>
</el-form-item>
<el-form-item label="交通">
<el-input
type="textarea"
:autosize="{ minRows: 3, maxRows: 6}"
placeholder="请输入内容"
v-model="propAreaForm.transport"
></el-input>
</el-form-item>
<el-form-item align="center">
<el-button @click.native="previous " size="medium">
<i class="el-icon-caret-left"></i>
上一步
</el-button>
<el-button @click.native="next" size="medium">
下一步
<i class="el-icon-caret-right"></i>
</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="地图标注" name="map" :disabled="nextButtonDisabled1">
<el-row>
<el-col :span="18">
<div id="container" class="map" tabindex="0"></div>
<div id="pickerBox">
<input id="pickerInput" placeholder="输入关键字选取地点" />
<div id="poiInfo"></div>
</div>
</el-col>
<el-col :span="6" style="margin-top:30px">
<el-button @click.native="previous " size="medium">
<i class="el-icon-caret-left"></i>
上一步
</el-button>
<el-button @click.native="next" size="medium">
下一步
<i class="el-icon-caret-right"></i>
</el-button>
<input type="hidden" id="longitude" value />
<input type="hidden" id="latitude" value />
<input id="mapSwitch" type="hidden" value="1" />
<input id="saveUpdataImg" type="hidden" value="1" />
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="房源图片" name="images" :disabled="nextButtonDisabled2">
<el-form>
<el-form-item>
<el-col :span="3" style="margin-top:30px;text-align:center">
<em> 封面图片显示</em>
<br />(最多上传<span style="color:red">1</span>张)
</el-col>
<el-col :span="1" style="margin-top:30px;text-align:center"></el-col>
<el-upload
action="#"
list-type="picture-card"
name="picture"
ref="upload"
:auto-upload='false'
:on-change='imageUploadIndex'
:data="upLoadData"
:on-preview="handlePictureCardPreview"
:on-remove="imageRemove"
accept="image/png, image/jpeg"
:before-remove="beforeRemove"
:file-list="fileList"
multiple
:limit="1"
>
<i class="el-icon-plus" ></i>
</el-upload>
<img src="@/assets/images/logo_shou.png" alt="" id="waterMark" style='display:none'>
</el-form-item>
<el-form-item>
<el-col :span="3" style="margin-top:30px;text-align:center">
<em>其他图片显示</em>
<br />(最多上传<span style="color:red">20</span>张)
</el-col>
<el-col :span="1" style="margin-top:30px;text-align:center"></el-col>
<el-upload
action="#"
list-type="picture-card"
name="picture"
ref="upload"
:data="upLoadDataOther"
:auto-upload='false'
:on-change='imageUploadOther'
:on-preview="handlePictureCardPreview"
:on-remove="imageRemove"
accept="image/png, image/jpeg"
:before-remove="beforeRemove"
:file-list="fileListOther"
multiple
:limit="20"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :append-to-body="true">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
</el-form-item>
<el-form-item>
<el-col :span="3" style="margin-top:30px;text-align:center">
<em>上传视频</em>
<br />(最多上传<span style="color:red">5</span>个)
</el-col>
<el-col :span="1" style="margin-top:30px;text-align:center"></el-col>
<el-col :span="20" style="margin-top:30px">
<el-upload
action="/raptorBrokerServer/service/resold/listHousing/editor/uploadVideo.do"
name="arcVideo"
ref="upload"
:data="upLoadDataVideo"
:on-preview="handleVideoCardPreview"
:on-remove="videoRemove"
accept="video/.MP4,.3GP,.AVI,.WMV,.MPG,.VOB,.FLV,.SWF,.MOV,.mkv"
:before-remove="beforeRemoveVideo"
:file-list="fileListVideo"
multiple
:limit="5"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-col>
<el-dialog :visible.sync="dialogVisibleVideo" :append-to-body="true">
<video width="100%" muted autoplay controls="controls" :src="dialogVideoUrl">您的浏览器不支持播放。</video>
</el-dialog>
</el-form-item>
<el-form-item align="center">
<el-button @click.native="previous" size="medium">
<i class="el-icon-caret-left"></i>上一步
</el-button>
<el-button
@click.native="allSuccess"
icon="el-icon-success"
size="medium"
>完成</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import AMap from "AMap";
import $ from "jquery";
import AMapUI from "AMapUI";
import global_ from "@/components/common/Global.vue";

/* import Cropper from 'cropperjs'
import ImageCompressor from '@xkeshi/image-compressor' */
import FileUpload from "vue-upload-component";
export default {
name: "ListHousingInit",
components: {
FileUpload
},
data() {
var checkPhone = (rule, value, callback) => {
let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/;
// let tel = /^($\d{3,4}$|\d{3,4}-)?\d{7,8}$/; //正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX
let tel = /^0\d{2,3}-?\d{7,8}$/;
if (!mobile.test(value) && !tel.test(value)) {
return callback(new Error("请填写正确的固话或手机号码"));
}
callback();
};
var checkNumber = (rule, value, callback) => {
let number = /^\d+$/; //非负整数

if (!number.test(value)) {
return callback(new Error("请输入正整数"));
}
callback();
};
var checkFloor = (rule, value, callback) => {
if (value === "00") {
//return callback(new Error("请选择所在楼层"));
}
callback();
};
return {
mainLoading: true,
from: "01",
dialogImageUrl: "",
dialogVideoUrl: "",
canChange:true,
dialogVisible: false,
dialogVisibleVideo: false,
disabled: false,
descrSwich:false,
activeName: "house",
floorPostionItems: [
{ code: "01", label: "高" },
{ code: "02", label: "中" },
{ code: "03", label: "低" }
],
directionItems: null,
decorationItems: null,
brokerList: null,
heatingItems: null,
houseUseItems: null,
sysListId: null,
sysList: null,
houseForm: {
houseSite: null,
struArea: 0,
unitArea: 0,
shareArea: 0,
mainArea: 0,
subArea: 0,
carportArea: 0,
houseUse: "01",
owername: "",
linkPhone: ""
},
listFormFlag: 0,
listForm: {
id: null,
sysZoneCode: null,
housingId: null,
housingKey: null,
listInfoId: null,
houseId: null,
houseCode: null,
title: null,
subTitle: null,
zoneCode: null,
propAreaCode: null,
propAreaName: null,
areas: null,
buildYear: null,
totalFloorCount: null,
floorPostion: null,
houseUse: null,
room: null,
hall: null,
bathroom: null,
direction: null,
decoration: null,
heating: null,
sellPrice: null,
linkPhone: "",
brokerId: ""
},
propAreaDisable: 0,
mapDisable: 0,
imagesDisable: 0,
// successDisable: 0,
listDisable: 0,
listSelectForm: {
zoneItems: [],
propAreaList: null,
propAreaFilterList: [],
list: [],
loading: false,
areaList: []
},
propAreaForm: {
listHousingId: null,
strengths: null,
matching: null,
transport: null
},
mapForm: {
id: null,
longitude: "",
latitude: "",
mapSwitch: ""
},
fileList: [],
fileListOther: [],
fileListVideo: [],
upLoadDataVideo:{},
upLoadDataOther: {
listHousingId: null,
isCover: false
},
upLoadData: {
listHousingId: null,
isCover: true
},
rules: {
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
zoneCode: [
{ required: true, message: "请选择行政区", trigger: "change" }
],
brokerId: [
{ required: true, message: "请选择人员", trigger: "change" }
],
linkPhone: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
{ validator: checkPhone, trigger: "blur" }
],
buildYear: [
{ required: true, message: "请输入建筑年代", trigger: "blur" },
{
validator: checkNumber,
message: "请输入四位数数字年份",
trigger: "blur"
}
],
totalFloorCount: [
{ required: true, message: "请输入总层数", trigger: "blur" },
{ validator: checkNumber, trigger: "blur" }
],
floorPostion: [
{ required: true, message: "请选择所在楼层", trigger: "change" },
{ validator: checkFloor, trigger: "change" }
],
houseUse: [
{ required: true, message: "请选择房屋用途", trigger: "change" }
],
room: [
{ required: true, message: "请输入室", trigger: "blur" },
{ validator: checkNumber, trigger: "blur" }
],
hall: [
{ required: true, message: "请输入厅", trigger: "blur" },
{ validator: checkNumber, trigger: "blur" }
],
bathroom: [
{ required: true, message: "请输入卫", trigger: "blur" },
{ validator: checkNumber, trigger: "blur" }
],
direction: [
{ required: true, message: "请选择房屋朝向", trigger: "change" }
],
decoration: [
{ required: true, message: "请选择装修标准", trigger: "change" }
],
heating: [
{ required: true, message: "请选择供暖方式", trigger: "change" }
],
sellPrice: [
{ required: true, message: "请输入拟售价格", trigger: "blur" },
{ validator: checkNumber, trigger: "blur" }
]
}
};
},
props: ["loadWall", "msg", "shareData"],
mounted() {
this.initDicMap();
this.sysListId = this.shareData.sysListId;
this.from = this.shareData.from;
this.initSysList();
},
computed: {
nextButtonDisabled: function() {
if (this.propAreaDisable === 0) return true;
return false;
},
nextButtonDisabled1: function() {
if (this.mapDisable === 0) return true;
return false;
},
nextButtonDisabled2: function() {
if (this.imagesDisable === 0) return true;
return false;
},
// nextButtonDisabled3: function() {
// if (this.successDisable < 1) return true;
// return false;
// },
//true 不能用；false ;能用
nextButtonDisabled4: function() {
if (this.listDisable === 0) return true;
return false;
}
},
methods: {
leaveList(activeName, oldActiveName) {
switch (oldActiveName) {
case "list":
this.saveListHousing("listForm");
if (!this.canChange) {
this.activeName = oldActiveName;
}else{
this.activeName = activeName;
if (this.activeName === 'propArea') {
this.propAreaDisable = 1;
}
}
return this.canChange;
case "propArea":
this.saveDescr();
return this.canChange;
case "map":
this.maker();
return this.canChange;
default:
this.mainLoading = false;
//return true;
};
return this.canChange;
},
tabClick(tab, event) {
},
previous() {
switch (this.activeName) {
case "house":
this.activeName = "list";
break;
case "list":
this.activeName = "house";
break;
case "propArea":
this.activeName = "list";
break;
case "map":
this.activeName = "propArea";
break;
case "images":
this.activeName = "map";
break;
default:
return false;
}
},
next() {
switch (this.activeName) {
case "house":
this.initListHousing();
this.activeName = "list";
this.listDisable = 1;
break;
case "list":
this.activeName = 'propArea';
this.loadDescr();
break;
case "propArea":
this.mapDisable = 1;
this.activeName = 'map';
this.initMap();
break;
case "map":
this.imagesDisable = 1;
this.activeName = 'images';
this.loadImg();
break;
case "images":
this.activeName = "preview";
break;
default:
}
},
initDicMap() {
let data = JSON.parse(sessionStorage.getItem("brokerSession"));
this.brokerName = data.company.sysZoneCode;
global_
.initDicMap(
"direction;decoration;heating;houseUse;zone_" +
data.company.sysZoneCode +
";"
)
.then(
response => {
if (response.data.success) {
this.listSelectForm.zoneItems = response.data.data["zone_" + data.company.sysZoneCode];
//写死楼层信息
// this.floorPostionItems = response.data.data["floorPostion"];
this.directionItems = response.data.data["direction"];
this.decorationItems = response.data.data["decoration"];
this.heatingItems = response.data.data["heating"];
this.houseUseItems = response.data.data["houseUse"];
}
},
error => {
this.$alert(error, "提示");
}
);
},
initListSelectForm() {
this.listSelectForm.propAreaList = [];
this.listSelectForm.propAreaFilterList = [];
this.listSelectForm.list = [];
this.listSelectForm.loading = false;
this.listSelectForm.areaList = [];
},
initSysList() {
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.raptor.resold.sysList,
data: JSON.stringify({ sysListId: this.sysListId })
})
.then(response => {
if (response.data.success) {
this.sysList = response.data.data;
this.houseForm.houseSite = this.sysList.house.houseSite;
this.houseForm.struArea = this.sysList.house.struArea;
this.houseForm.unitArea = this.sysList.house.unitArea;
this.houseForm.shareArea = this.sysList.house.shareArea;
this.houseForm.mainArea = this.sysList.house.mainArea;
this.houseForm.subArea = this.sysList.house.subArea;
this.houseForm.carportArea = this.sysList.house.carportArea;
this.houseForm.houseUse = this.sysList.house.houseUse;
this.houseForm.owername = this.sysList.verifyApp.ownerName;
this.houseForm.linkPhone = this.sysList.verifyApp.linkPhone;
} else {
}
})
.catch(error => {
this.$alert(error, "提示");
})
.finally(f => {
this.mainLoading = false;
});
},
initListHousing() {
this.initListSelectForm();
this.loadPropAreaList();
this.loadBroker();
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.raptor.resold.load,
data: JSON.stringify({ sysListId: this.sysListId })
})
.then(response => {
if (response.data.success) {
if (response.data.flag === "1") {
let listHousing = response.data.data;
this.listFormFlag = 1;
this.mapForm.id = listHousing.id;
this.listForm.id = listHousing.id;
this.listForm.sysZoneCode = listHousing.sysZoneCode;
this.listForm.housingId = listHousing.housingId;
this.listForm.housingKey = listHousing.housingKey;
this.listForm.listInfoId = listHousing.listInfoId;
this.listForm.houseId = listHousing.houseId;
this.listForm.houseCode = listHousing.houseCode;
this.listForm.title = listHousing.title;
this.listForm.subTitle = listHousing.subTitle;
this.listForm.zoneCode = listHousing.zoneCode;
this.listForm.propAreaCode = listHousing.propAreaName;
this.listForm.propAreaName = listHousing.propAreaName;
this.listForm.brokerId = listHousing.brokerId;
this.listForm.areas = listHousing.areas;
//重点区域初始化
if (this.listForm.areas != null) {
let a = this.listForm.areas.substring(0, this.listForm.areas.length - 1);
this.listSelectForm.areaList = a.split(";");
}
this.listForm.linkPhone = listHousing.linkPhone;
this.listForm.buildYear = listHousing.buildYear;
this.listForm.totalFloorCount = listHousing.totalFloorCount;
this.listForm.floorPostion = listHousing.floorPostion === "00" ? "" : listHousing.floorPostion;
this.listForm.houseUse = listHousing.houseUse;
this.listForm.room = listHousing.room;
this.listForm.hall = listHousing.hall;
this.listForm.bathroom = listHousing.bathroom;
this.listForm.direction = listHousing.direction;
this.listForm.decoration = listHousing.decoration;
this.listForm.heating = listHousing.heating;
this.listForm.sellPrice = listHousing.sellPrice;
this.listForm.avgPrice = listHousing.avgPrice;
} else if (response.data.flag === "0") {
this.listFormFlag = 0;
this.listForm.id = null;
this.listForm.sysZoneCode = this.sysList.listInfo.sysZoneCode;
this.listForm.housingId = this.sysList.listInfo.sysHousingId;
this.listForm.housingKey = this.sysList.housing.housingKey;
this.listForm.listInfoId = this.sysList.listInfo.sysListId;
this.listForm.houseId = this.sysList.housing.sysHouseId;
this.listForm.houseCode = this.sysList.housing.sysHouseCode;
this.listForm.title = null;
this.listForm.subTitle = null;
this.listForm.buildYear = null;
this.listForm.totalFloorCount = null;
this.listForm.floorPostion = null;
this.listForm.room = null;
this.listForm.hall = null;
this.listForm.bathroom = null;
this.listForm.decoration = this.sysList.listInfo.decoration;
this.listForm.sellPrice = this.sysList.listInfo.sellPrice;
this.listForm.avgPrice = this.sysList.listInfo.avgPrice;
}
} else {
this.$message({
type: 'error',
message: response.data.message
});
}
})
.catch(error => {
this.$alert(error, "提示");
})
.finally(f => {
this.mainLoading = false;
});
},
saveListHousing(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.mainLoading = true;
this.canChange = true;
let resoldSaveUrl = global_.apiUrl_.raptor.resold.saveAdd;
if (this.listFormFlag === 1) {
resoldSaveUrl = global_.apiUrl_.raptor.resold.saveEdit;
}
let temp = "";
for (let j = 0, len = this.listSelectForm.areaList.length; j < len; j++) {
if (this.listSelectForm.areaList[j].trim() !== "") {
temp += this.listSelectForm.areaList[j] + ";";
}
}
this.listForm.areas = temp;
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: resoldSaveUrl,
data: this.listForm
})
.then(response => {
this.mainLoading = false;
if (response.data.success) {
if (this.listFormFlag === 0) {
this.$emit("setRefreshFlag", true);
}
this.listFormFlag = 1;
this.listForm.id = response.data.data;
this.mapForm.id = response.data.data;
this.$message("挂牌信息已经保存", "提示");
this.canChange = true;
} else {
this.$message({
type: 'error',
message: response.data.message
});
this.activeName = "list";
this.canChange = false;
}
})
.catch(error => {
this.$alert(error, "提示");
this.canChange = false;
})
.finally(f => {
this.mainLoading = false;
});
} else {
this.mainLoading = false;
this.canChange = false;
this.$message({
type: 'error',
message: "必填项填写有误"
});
return false;
}
});
},
loadPropAreaList() {
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.raptor.resold.loadArea,
data: { id: this.listForm.id }
})
.then(response => {
if (response.data.success) {
this.listSelectForm.propAreaList = response.data.data.map(item => {
return { value: item.sysPropAreaCode, label: item.name };
});
} else {
}
})
.catch(error => {
this.$alert(error, "提示");
});
},
remoteMethod(query) {
if (query !== "") {
this.listSelectForm.loading = true;
setTimeout(() => {
this.listSelectForm.loading = false;
this.listSelectForm.propAreaFilterList = this.listSelectForm.propAreaList.filter(
item => {
return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
}
);
}, 200);
} else {
this.listSelectForm.propAreaFilterList = [];
}
},
onSelectedDrug(value) {
let obj = {};
obj = this.listSelectForm.propAreaList.find(item => {
return item.value === value;
});
this.listForm.propAreaName = obj.label;
},
loadDescr() {
this.mainLoading = true;
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.raptor.resold.loadDescr,
data: { id: this.listForm.id }
})
.then(response => {
this.mainLoading = false;
if (response.data.success) {
if(response.data.data === null) {
this.propAreaForm.strengths = '';
this.propAreaForm.matching = '';
this.propAreaForm.transport = '';
}else{
if(!this.descrSwich) {
this.propAreaForm.strengths = response.data.data.strengths;
this.propAreaForm.matching = response.data.data.matching;
this.propAreaForm.transport = response.data.data.transport;
this.descrSwich = true;
}
}
} else {
console.log("id获取失败");
this.$alert('id获取失败', "提示");
}
})
.catch(error => {
this.$alert(error, "提示");
})
.finally(f => {
this.mainLoading = false;
});
},
saveDescr() {
this.mainLoading = true;
this.propAreaForm.listHousingId = this.listForm.id;
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.raptor.resold.saveDescr,
data: this.propAreaForm
})
.then(response => {
if (response.data.success) {
this.$message("房源描述更新完成", "提示");
this.canChange = true;
} else {
this.$message({
type: 'error',
message: response.data.message
});
this.canChange = false;
}
})
.catch(error => {
this.$alert(error, "提示");
})
.finally(f => {
this.mainLoading = false;
});
},
initMap() {
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.raptor.resold.loadMaker,
data: { id: this.listForm.id }
})
.then(response => {
if (response.data.success) {
if (response.data.data === null) {
document.getElementById("longitude").value = 117.970686;
document.getElementById("latitude").value = 37.380841;
} else {
document.getElementById("longitude").value =
response.data.data.longitude;
document.getElementById("latitude").value =
response.data.data.latitude;
}
this.initMapCore();
} else {
this.$alert(response.data.message, '提示')
}
})
.catch(error => {
this.$alert(error, "提示");
})
.finally(f => {
this.mainLoading = false;
});
},
initMapCore() {
if (document.getElementById("mapSwitch").value === '1') {
let a = Number(document.getElementById("longitude").value);
let b = Number(document.getElementById("latitude").value);
let position = [a, b];
var map = new AMap.Map("container", {
resizeEnable: true,
expandZoomRange: true,
zoom: 14,
zooms: [3, 20],
center: position
});
var marker = new AMap.Marker({
position: position
});
map.add(marker);
map.on("click", function(e) {
map.clearMap();
let position = [e.lnglat.getLng(), e.lnglat.getLat()];
document.getElementById("longitude").value = e.lnglat.getLng();
document.getElementById("latitude").value = e.lnglat.getLat();
var marker = new AMap.Marker({
position: position
});
map.add(marker);
});
document.getElementById("mapSwitch").value = 2;
}
AMapUI.loadUI(["misc/PoiPicker"], function(PoiPicker) {
document.getElementById("mapSwitch").value = 2;
var poiPicker = new PoiPicker({
input: "pickerInput"
});
poiPickerReady(poiPicker);
});
function poiPickerReady(poiPicker) {
document.getElementById("mapSwitch").value = 2;
window.poiPicker = poiPicker;
var marker = new AMap.Marker();
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -20)
});
//选取了某个POI
poiPicker.on("poiPicked", function(poiResult) {
document.getElementById("mapSwitch").value = 2;
map.clearMap();
var source = poiResult.source;
var poi = poiResult.item;
var info = {
地点名称: poi.name
};
if (poi.location) {
map.setCenter(poi.location.toString().split(",").map(Number));
}else{
return false
}
marker.setMap(map);
document.getElementById("longitude").value = marker.getPosition().getLng();
document.getElementById("latitude").value = marker.getPosition().getLat();
infoWindow.setMap(map);
marker.setPosition(poi.location);
infoWindow.setPosition(poi.location);
infoWindow.setContent("地点详情: <pre>" + JSON.stringify(info, null, 2) + "</pre>");
infoWindow.open(map, marker.getPosition());
infoWindow.open(map, marker.getPosition());
map.setCenter(marker.getPosition());
});
poiPicker.onCityReady(function() {
poiPicker.suggest("");
});
}
},
maker() {
this.mainLoading = true;
this.mapForm.longitude = document.getElementById("longitude").value;
this.mapForm.latitude = document.getElementById("latitude").value;
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.raptor.resold.maker,
data: this.mapForm
})
.then(response => {
if (response.data.success) {
this.$message("位置标记完成", "提示");
this.canChange = true;
} else {
this.$message({
type: 'error',
message: response.data.message
});
this.canChange = false
}
})
.catch(error => {
this.$alert(error, "提示");
})
.finally(f => {
this.mainLoading = false;
});
},
//图片视频处理方方整理
//上传前文件确认和删除有冲突，暂时放弃上传前文件判断方法
// 从库里下载图片完成后下载视频
loadImg() {
this.upLoadData.listHousingId = this.listForm.id;
this.upLoadDataOther.listHousingId = this.listForm.id;
this.upLoadDataVideo.listHousingId = this.listForm.id;
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.raptor.resold.loadImg,
data: { listHousingId: this.listForm.id }
})
.then(response => {
if (response.data.success) {
this.loadVideo();
this.fileList = [];
this.fileListOther = [];
for (var i = response.data.data.length - 1; i >= 0; i--) {
if (response.data.data[i].isCover) {
this.fileList.push(response.data.data[i]);
} else {
this.fileListOther.push(response.data.data[i]);
}
}
} else {
this.$message({
type: 'error',
message: response.data.message
});
}
})
.catch(error => {
this.$alert(error, "提示");
})
.finally(f => {
this.mainLoading = false;
});
},
//从库里下载视频
loadVideo() {
this.loading = true;
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
//url: global_.apiUrl_.raptor.resold.loadImg,
url: '/raptorBrokerServer/service/resold/listHousing/editor/loadVideo.do',
data: { listHousingId: this.listForm.id }
})
.then(response => {
this.loading = false;
if (response.data.success) {
this.fileListVideo = [];
this.fileListVideo = response.data.data;
} else {
this.$toast(response.data.message);
}
})
.catch(error => {
this.loading = false;
this.$toast('错误' + error);
})
.finally(f => {
this.loading = false;
});
},
//显示查看图片
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
//显示查看视频
handleVideoCardPreview(file) {
this.dialogVideoUrl = '';
this.dialogVideoUrl = file.url;
this.dialogVisibleVideo = true;
},
//加水印代码开始 start==========
//上传封面图片处理（加水印）上传至服务器用的change事件
imageUploadIndex(file, fileList) {
let _this = this;
file.status = 'uploading';
let fileUp = file.raw; ///sssssssss
let waterMark = document.getElementById('waterMark');
let img = new Image()
img.src = file.url;
img.onload = function() {
let canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
let dataURL = ''
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
ctx.globalAlpha = 0.3;
for(let n = 0; n < 8; n++) {
for(let m = 0; m < 8; m++) {
ctx.drawImage(waterMark, canvas.width / 2 * n + 100, canvas.width / 4 * m, canvas.width / 4, canvas.width / 12)
}
}
let imgData = canvas.toDataURL(fileUp.type)
let blob = _this.dataURLtoBlob(imgData);
let content = _this.blobToFile(blob, fileUp.name);//转file
//上传开始
//创建一个新的FormData
let formData = new FormData();
formData.append("listHousingId", _this.listForm.id);
formData.append("isCover", true);
// upload这个名字是后台给的
formData.append("picture", content, fileUp.name);
_this.$axios({
method: "post",
headers: {
"Content-Type": "multipart/form-data"
},
url: '/raptorBrokerServer/service/resold/listHousing/editor/uploadImg.do',
data: formData
})
.then(response => {
if (response.data.success) {
_this.$message("图片上传成功", "提示");
file.status = "ready";
file.id = response.data.id;
}else {
_this.$message(response.data.message, "提示");
}
}).catch(error => {
console.log(error);
this.$message(error, "提示");
})
//上传结束
};
},
//上传前图片处理（加水印）上传至服务器
imageUploadOther(file, fileList) {
let _this = this;
file.status = 'uploading';
let fileUp = file.raw; // 获取file
let waterMark = document.getElementById('waterMark');
let img = new Image()
img.src = file.url;
img.onload = function() {
let canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
let dataURL = ''
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
ctx.globalAlpha = 0.3;
for(let n = 0; n < 8; n++) {
for(let m = 0; m < 8; m++) {
ctx.drawImage(waterMark, canvas.width / 2 * n + 100, canvas.width / 4 * m, canvas.width / 4, canvas.width / 12)
}
}
let imgData = canvas.toDataURL(fileUp.type)
let blob = _this.dataURLtoBlob(imgData);
let content = _this.blobToFile(blob, fileUp.name);//转file
//上传开始
//创建一个新的FormData
let formData = new FormData();
formData.append("listHousingId", _this.listForm.id);
formData.append("isCover", false);
// upload这个名字是后台给的
formData.append("picture", content, fileUp.name);
_this.$axios({
method: "post",
headers: {
"Content-Type": "multipart/form-data"
},
url: '/raptorBrokerServer/service/resold/listHousing/editor/uploadImg.do',
data: formData
})
.then(response => {
if (response.data.success) {
_this.$message("图片上传成功", "提示");
file.status = "ready";
file.id = response.data.id;
}else {
_this.$message(response.data.message, "提示");
}
}).catch(error => {
console.log(error);
this.$message(error, "提示");
})
//上传结束
}; //
},
//blob转换为File
blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
},
// base64转换为Blob
dataURLtoBlob(dataurl) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
//加水印代码结束end==========
//图片视频删除确认，删除操作开始 start==========
//删除前的确认并且手动删除图片
beforeRemove(file, fileList) {
if (file.status === "uploading") {
this.$message.error("图片上传中，请稍后重试!");
return false;
};
this.$confirm("此操作将删除当前图片, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
//删除图片处理
this.imageRemove(file, fileList);
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
return false; // 这是重点,不管上面的操作结果如何都返回false
},
//删除前的确认并且手动删除视频
beforeRemoveVideo(file, fileList) {
if (file.status === "uploading") {
this.$message.error("视频上传中，请稍后重试!");
return false;
};
this.$confirm("此操作将删除当前视频, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
//删除图片处理
this.videoRemove(file, fileList);
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
return false; // 这是重点,不管上面的操作结果如何都返回false
},
//新版图片删除
imageRemove(file, fileList) {
let imageId;
if (!file.id) {
imageId = file.response.id;
}else{
imageId = file.id;
};
if (imageId === null) {
this.$message({
type: 'error',
message: "数据非法"
});
return false
}else {
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.raptor.resold.deleteImg,
data: { listHousingId: this.listForm.id, id: imageId }
})
.then(response => {
if (response.data.success) {
for(let i = 0; i < fileList.length; i++) {
if(fileList[i].response) {
if(fileList[i].response.id === imageId) {
fileList.splice(i, 1)
}
}else {
if(fileList[i].id === imageId) {
fileList.splice(i, 1)
}
}
}
}else {
this.$message({
type: 'error',
message: response.data.message
});
}
})
.catch(error => {
console.log(error);
this.$alert(error, "提示");
});
}
},
videoRemove(file, fileList) {
let imageId;
if (!file.id) {
imageId = file.response.id;
}else{
imageId = file.id;
};
if (imageId === null) {
this.$message({
type: 'error',
message: "数据非法"
});
return false
}else {
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: '/raptorBrokerServer/service/resold/listHousing/editor/deleteVideo.do',
data: { listHousingId: this.listForm.id, id: imageId }
})
.then(response => {
if (response.data.success) {
for(let i = 0; i < fileList.length; i++) {
if(fileList[i].response) {
if(fileList[i].response.id === imageId) {
fileList.splice(i, 1)
}
}else {
if(fileList[i].id === imageId) {
fileList.splice(i, 1)
}
}
}
}else {
this.$message({
type: 'error',
message: response.data.message
});
}
})
.catch(error => {
console.log(error);
this.$alert(error, "提示");
});
}
},
//图片视频删除确认，删除操作结束 end==========
//图片视频处理结束
loadBroker() {
this.mainLoading = true;
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.raptor.resold.loadBroker,
data: { id: this.listForm.id }
})
.then(response => {
this.mainLoading = false;
if (response.data.success) {
if (response.data.brokerList != null) {
this.brokerList = response.data.brokerList;
}
} else {
// alert(response.data.message);
this.$message({
type: 'error',
message: response.data.message
});
}
})
.catch(error => {
this.$alert(error, "提示");
})
.finally(f => {
this.mainLoading = false;
});
},
choseStoreBrokers: function(e) {
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.raptor.resold.loadBroker,
data: { brokerId: e }
})
.then(response => {
if (response.data.success) {
if (response.data.data != null) {
this.listForm.linkPhone = response.data.data.linkPhone;
}
} else {
this.$message({
type: 'error',
message: response.data.message
});
}
})
.catch(error => {
this.$alert(error, "提示");
})
.finally(f => {
this.mainLoading = false;
});
},
saveListHousingBroker() {
this.mainLoading = true;
this.brokerForm.id = this.listForm.id;
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: global_.apiUrl_.raptor.resold.saveBroker,
data: this.brokerForm
})
.then(response => {
if (response.data.success) {
this.$message("更新经纪信息成功", "提示");
} else {
this.$message({
type: 'error',
message: response.data.message
});
}
})
.catch(error => {
this.$alert(error, "提示");
})
.finally(f => {
this.mainLoading = false;
});
},
handleDownload(file) {},
allSuccess() {
this.$message("所有信息保存成功", "提示");
this.$emit("setRefreshFlag", true);
}
}
};
</script>
<style>
#container {
width: 96%;
height: 520px;
margin: 0px;
font-size: 13px;
}
#pickerBox {
position: absolute;
z-index: 99;
top: 20px;
right: 30%;
width: 300px;
}

#pickerInput {
width: 220px;
padding: 5px 5px;
}
#poiInfo {
background: #fff;
}
.amap_lib_placeSearch .poibox.highlight {
background-color: #cae1ff;
}
.amap_lib_placeSearch .poi-more {
display: none !important;
}
</style>

vue上传图片加水印

猜你喜欢