<template>
|
<el-container>
|
<el-header height="80px">
|
<page-header></page-header>
|
</el-header>
|
<el-main>
|
<el-carousel :interval="8000" height="250px" class="slider-area">
|
<el-carousel-item style="background:url(https://auod-bucket-wms.oss-ap-southeast-2.aliyuncs.com/Upload/Site/slider3.jpg);background-position-y: -150px;">
|
<div class="container">
|
<div class="slide-content-wrapper">
|
<div class="slide-content">
|
<h2>上传身份证号 </h2>
|
<p>请在发货后12小时内上传收货人身份证正反两面清晰扫描件，以便及时办理相关通关手续。 </p>
|
</div>
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
|
<!-- Cowork Start -->
|
<section class="container cowork-area">
|
<el-row>
|
<el-col :span="6" :xs="24" class="card-left">
|
<div class="search-box">
|
<div class="title">门店查询</div>
|
</div>
|
<div class="search-region">
|
<div class="title">门店名称：</div>
|
<el-input v-model="consignorValue" class="w-100pc margin-bottom-10" @keyup.enter.native="getConsignor"></el-input>
|
<el-button type="primary" @click="getConsignor">查询</el-button>
|
</div>
|
<div class="search-result">
|
<div class="search-box">
|
<div class="title">查询结果</div>
|
</div>
|
<ul>
|
<li v-for="(item,index) in consignorList" :key="index" @click="getPointsToMap(item)">
|
<i class="el-icon-yrt-dingwei4 icon"></i>
|
<div class="content">
|
<div class="name">{{ item.consignorName }}</div>
|
<div class="address">{{ item.Address }}</div>
|
<div class="tel">联系电话：{{ item.Mobile }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</el-col>
|
<el-col :span="18" :xs="24" class="card-main">
|
<!-- <img src="/static/user/card/map.png" style="width:100%;height:99%;"> -->
|
<bing-maps-layer style="width:100%;height:99%;" @getLocationNums="getLocationNums" @getcenter="getcenter"></bing-maps-layer>
|
</el-col>
|
</el-row>
|
</section>
|
<!-- Cowork End -->
|
</el-main>
|
<el-footer height="auto">
|
<!-- Footer Start -->
|
<page-footer></page-footer>
|
<!-- Footer End -->
|
</el-footer>
|
</el-container>
|
</template>
|
|
<script>
|
import pageHeader from "./components/header.vue";
|
import pageFooter from "./components/footer.vue";
|
import bingMapsLayer from "./components/bingMap.vue";
|
|
export default {
|
components: {
|
pageHeader,
|
pageFooter,
|
bingMapsLayer
|
},
|
data() {
|
return {
|
// 身份证正面URL
|
cardPositive: null,
|
// 身份证反面URL
|
cardNegative: null,
|
// 识别数据
|
formData: {},
|
// 步骤
|
step: 1,
|
// step1隐藏
|
hiddenStep1: false,
|
// step2隐藏
|
hiddenStep2: true,
|
// step3隐藏
|
hiddenStep3: true,
|
consignorList: [],
|
consignorValue: null,
|
pointList: []
|
};
|
},
|
methods: {
|
handleCardSuccess() {},
|
beforeCardUpload() {},
|
// 开始识别身份证信息
|
startCardValue() {
|
this.step = 2;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = false;
|
this.hiddenStep3 = true;
|
},
|
// 返回第一步
|
onGo1() {
|
this.step = 1;
|
this.hiddenStep1 = false;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = true;
|
},
|
// 开始识别身份证信息
|
onSubmit() {
|
this.step = 2;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = false;
|
},
|
getConsignor() {
|
if (!this.consignorValue) {
|
this.$message.error("请输入门店名称！");
|
return;
|
}
|
var url = "/api/basicInfo/base/consignor/getList";
|
var params = { consignorName: this.consignorValue };
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.consignorList = res.data;
|
if (this.consignorList) {
|
this.consignorList.forEach(element => {
|
this.pointList.push(element);
|
});
|
// this.pointToMapAll();
|
}
|
}
|
},
|
true
|
);
|
},
|
getPointsToMap(point) {
|
// eslint-disable-next-line
|
let map = new Microsoft.Maps.Map("#localMap", {
|
credentials:
|
"AgzeobkGvmpdZTFuGa7_6gkaHH7CXHKsFiTQlBvi55x-QLZLh1rSjhd1Da9bfPhD",
|
// eslint-disable-next-line
|
center: new Microsoft.Maps.Location(point.Lng, point.Lat)
|
});
|
var center = map.getCenter();
|
// eslint-disable-next-line
|
var pin = new Microsoft.Maps.Pushpin(center, {
|
title: point.consignorName, // 图钉的标题
|
subTitle: point.Address, // 图钉主体文字
|
text: "1", // 图钉内的文字
|
color: "red" // 纯色图钉
|
});
|
map.entities.push(pin);
|
},
|
pointToMapAll() {
|
if (!this.pointList) {
|
return;
|
}
|
// eslint-disable-next-line
|
var map = new Microsoft.Maps.Map("#localMap", {});
|
this.pointList.forEach(item => {
|
// eslint-disable-next-line
|
let pin = new Microsoft.Maps.Pushpin(
|
map.getCenter(item.Lng, item.Lat),
|
{
|
title: item.consignorName, // 图钉的标题
|
subTitle: item.Address, // 图钉主体文字
|
text: "1", // 图钉内的文字
|
color: "red" // 纯色图钉
|
}
|
);
|
// add the pushpin to the map
|
map.entities.push(pin);
|
});
|
},
|
// 重新上传
|
reStartCard() {
|
this.step = 1;
|
this.hiddenStep1 = false;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = true;
|
},
|
// 定义触发点击标记返回经纬度的事件函数
|
getLocationNums(...data) {
|
// 这里的data中即子组件bingMap返回的点击获取的经纬度值
|
},
|
getcenter() {}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
@import "@/styles/user.scss";
|
</style>
|
|
<style lang="scss" scoped>
|
.el-header {
|
background-color: white;
|
padding: 10px;
|
}
|
.el-main {
|
background-color: white;
|
padding: 0px;
|
.slide-content-wrapper {
|
display: inline-table;
|
width: 100%;
|
margin-top: 50px;
|
}
|
.slide-content {
|
display: table-cell;
|
text-align: center;
|
vertical-align: middle;
|
}
|
.slide-content h2 {
|
color: #fff;
|
font-family: "Playfair Display", serif;
|
font-size: 40px;
|
font-weight: 400;
|
margin-bottom: 20px;
|
text-transform: capitalize;
|
-webkit-animation-delay: 0.7s;
|
animation-delay: 0.7s;
|
-webkit-animation-duration: 1s;
|
animation-duration: 1s;
|
-webkit-animation-fill-mode: both;
|
animation-fill-mode: both;
|
-webkit-animation-name: fadeOutDown;
|
animation-name: fadeOutDown;
|
}
|
.slide-content p {
|
color: #fff;
|
font-family: "Lato", sans-serif;
|
font-size: 20px;
|
font-weight: 400;
|
margin-bottom: 30px;
|
-webkit-animation-delay: 0.8s;
|
animation-delay: 0.8s;
|
-webkit-animation-duration: 1s;
|
animation-duration: 1s;
|
-webkit-animation-fill-mode: both;
|
animation-fill-mode: both;
|
-webkit-animation-name: fadeOutDown;
|
animation-name: fadeOutDown;
|
}
|
.slide-content .banner-btn {
|
-webkit-animation-delay: 1.2s;
|
animation-delay: 1.2s;
|
-webkit-animation-duration: 1s;
|
animation-duration: 1s;
|
-webkit-animation-fill-mode: both;
|
animation-fill-mode: both;
|
-webkit-animation-name: fadeOutDown;
|
animation-name: fadeOutDown;
|
}
|
.slider-area .el-carousel__item.is-active .slide-content h2,
|
.slider-area .el-carousel__item.is-active .slide-content p,
|
.slider-area .el-carousel__item.is-active .banner-btn {
|
-webkit-animation-name: fadeInUp;
|
animation-name: fadeInUp;
|
}
|
.slider-area .el-carousel__item.is-active .banner-btn {
|
-webkit-animation-name: fadeInUp;
|
animation-name: fadeInUp;
|
}
|
|
.card-left {
|
padding: 20px 20px 50px;
|
border-right: 1px solid #e4e7ed;
|
.search-box {
|
border-bottom: 2px solid #e4e7ed;
|
padding-top: 2px;
|
padding-bottom: 13px;
|
margin-bottom: 10px;
|
position: relative;
|
&:after {
|
content: " ";
|
position: absolute;
|
bottom: -2px;
|
width: 100px;
|
border-bottom: 2px solid #409eff;
|
}
|
}
|
.search-region {
|
.title {
|
padding: 10px 0;
|
}
|
}
|
.search-result {
|
margin-top: 20px;
|
ul {
|
margin: 0;
|
padding: 0;
|
li {
|
margin: 0;
|
padding: 0;
|
margin-bottom: 10px;
|
border-bottom: 1px solid #e4e7ed;
|
.icon {
|
font-size: 20px;
|
float: left;
|
color: #888;
|
}
|
.content {
|
margin-left: 30px;
|
.name {
|
font-size: 15px;
|
padding-bottom: 10px;
|
}
|
.address {
|
font-size: 14px;
|
line-height: 1.5;
|
padding-bottom: 10px;
|
}
|
.tel {
|
font-size: 14px;
|
padding-bottom: 10px;
|
}
|
}
|
}
|
}
|
}
|
}
|
.card-main {
|
padding: 0;
|
height: 800px;
|
border-right: 1px solid #e4e7ed;
|
}
|
}
|
.el-footer {
|
padding: 0;
|
}
|
/* 手机屏 */
|
@media screen and (max-width: 480px) {
|
.container {
|
padding-left: 0px;
|
padding-right: 0px;
|
}
|
.el-main {
|
.card-left {
|
padding: 20px 20px 10px;
|
}
|
.card-main {
|
padding: 20px 20px 50px;
|
border-left: 0px solid #e4e7ed;
|
}
|
}
|
}
|
</style>
|
