You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
371 lines
9.4 KiB
371 lines
9.4 KiB
<template>
|
|
<view class="content">
|
|
<uni-nav-bar :fixed="true" color="#ffffff" background-color="#ffffff" :status-bar="true">
|
|
<view slot="left"><text class="nav-title">客户</text></view>
|
|
<view class="nav-search" @click="goSearch">
|
|
<image class="search-icon" src="/static/imgs/client/search-icon.png" />
|
|
<text class="search-text">输入客户名称试试</text>
|
|
</view>
|
|
<view slot="right">
|
|
<view v-if="hasLogin"><image @click="goAddUser" style="width: 40rpx; height: 40rpx" src="/static/imgs/client/user-icon.png"></image></view>
|
|
<view v-else><text class="nav-login" @click="goLogin">登录</text></view>
|
|
</view>
|
|
</uni-nav-bar>
|
|
<div class="map_area">
|
|
<qn-map ref="qnMap" :location="location" :items="packingList" @dragMap="mapChange" @scaleMap="mapChange" @reset="mapChange" @labeltap="showInfo"></qn-map>
|
|
<!-- 元素放在map下面才能展示 -->
|
|
<cover-view class="enquiry-area" v-if="enquiryList && enquiryList.length > 0 && !isClosed">
|
|
<view class="enquiry-header">
|
|
<view class="notice">
|
|
<image style="width: 32rpx; height: 32rpx" src="/static/imgs/client/horn-icon.png"></image>
|
|
<text class="notice_title">【新的询价单】</text>
|
|
</view>
|
|
<image style="width: 24rpx; height: 24rpx" @click="closeNotice" src="/static/imgs/client/close-icon.png"></image>
|
|
</view>
|
|
<view class="notice-content">
|
|
<view class="animation-area">
|
|
<view class="enquiry-content" :style="transitionStyle">
|
|
<view v-for="item in enquiryList" :key="item.id" class="enquiry-item">
|
|
<view>
|
|
<text class="production">{{ item.quotationPaperDetailsDtos[0].productName }}</text>
|
|
</view>
|
|
<view>
|
|
<text class="production">{{ getProductionInfo(item) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="enquiry-submit">
|
|
<text class="text">去报价</text>
|
|
<image style="width: 32rpx; height: 32rpx" src="/static/imgs/client/next-icon.png"></image>
|
|
</view>
|
|
</view>
|
|
</cover-view>
|
|
<cover-view class="list-button" @click="showList"><image style="width: 84rpx; height: 84rpx" src="/static/imgs/client/list-button.png"></image></cover-view>
|
|
<cover-view class="locate-button" @click="locatePosition"><image style="width: 84rpx; height: 84rpx" src="/static/imgs/client/locate-button.png"></image></cover-view>
|
|
<cover-view v-if="hasSelected" class="selected-company">
|
|
<view class="image-area"><image class="image" src="/static/imgs/client/down-arrow-icon.png" @click="hideInfo"></image></view>
|
|
<view style="width: 750rpx"><packing-station-item :info="selectedCompany" /></view>
|
|
</cover-view>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { go2 } from '@/utils/hook.js'
|
|
import wgs84togcj02 from '@/utils/locationTransform.js'
|
|
import qnMap from '@/components/qn-map/qn-map.nvue'
|
|
import packingStationItem from '@/components/bussiness-components/packingStationItem.vue'
|
|
import { getMapCompanyList, getInquiryList, getCompanyInfo } from '@/apis/clientApi'
|
|
export default {
|
|
components: { qnMap, packingStationItem },
|
|
data() {
|
|
return {
|
|
location: {
|
|
latitude: 23.12616,
|
|
longitude: 113.38466
|
|
},
|
|
listParam: {
|
|
latitude: 23.12616,
|
|
longitude: 113.38466,
|
|
km: 5
|
|
},
|
|
transitionTimer: null,
|
|
curIndex: 0,
|
|
packingList: [],
|
|
enquiryList: [],
|
|
isClosed: false,
|
|
hasSelected: false,
|
|
selectedCompany: undefined
|
|
}
|
|
},
|
|
methods: {
|
|
mapChange(data) {
|
|
let params = {
|
|
cooperationState: 0,
|
|
km: 5,
|
|
latitude: data.latitude,
|
|
longitude: data.longitude,
|
|
size: 100
|
|
}
|
|
let diff = Math.ceil(Math.abs(data.scale - 14) / 2)
|
|
params.km = params.km + diff * 10
|
|
params.size = params.size + diff * 100
|
|
this.listParam.latitude = data.latitude
|
|
this.listParam.longitude = data.longitude
|
|
this.listParam.km = params.km
|
|
this.getPackingList(params)
|
|
},
|
|
showList() {
|
|
go2('client-list', { longitude: this.listParam.longitude, latitude: this.listParam.latitude, km: this.listParam.km })
|
|
},
|
|
goSearch() {
|
|
go2('search')
|
|
},
|
|
goLogin() {
|
|
go2('login')
|
|
},
|
|
goAddUser() {
|
|
go2('add-user')
|
|
},
|
|
hideInfo() {
|
|
this.hasSelected = false
|
|
},
|
|
showInfo(index) {
|
|
console.log('index:', index)
|
|
let id = this.packingList[index].enterpriseId
|
|
getCompanyInfo({ enterpriseId: id }).then(res => {
|
|
if (res) {
|
|
this.selectedCompany = res
|
|
this.hasSelected = true
|
|
}
|
|
})
|
|
},
|
|
locatePosition() {
|
|
uni.getLocation({
|
|
// type: 'gcj02',
|
|
type: 'wgs84',
|
|
success: res => {
|
|
console.log('location success', res)
|
|
let result = wgs84togcj02(res.latitude, res.longitude)
|
|
console.log('result:', result)
|
|
const { lat, lon } = result
|
|
this.$refs.qnMap.moveTo({ latitude: lat, longitude: lon })
|
|
},
|
|
fail: err => {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '定位失败:' + err.code
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getProductionInfo(item) {
|
|
let res = []
|
|
item.quotationPaperDetailsDtos[0].paperName && res.push(item.quotationPaperDetailsDtos[0].paperName)
|
|
item.quotationPaperDetailsDtos[0].brandName && res.push(item.quotationPaperDetailsDtos[0].brandName)
|
|
item.quotationPaperDetailsDtos[0].gramWeight && res.push(item.quotationPaperDetailsDtos[0].gramWeight + 'g')
|
|
item.quotationPaperDetailsDtos[0].width &&
|
|
item.quotationPaperDetailsDtos[0].length &&
|
|
res.push(item.quotationPaperDetailsDtos[0].width + '*' + item.quotationPaperDetailsDtos[0].length)
|
|
item.quotationPaperDetailsDtos[0].quantity && res.push(item.quotationPaperDetailsDtos[0].quantity + '张')
|
|
return res.join('/')
|
|
},
|
|
getPackingList(params) {
|
|
getMapCompanyList({
|
|
cooperationState: params.cooperationState,
|
|
km: params.km,
|
|
latitude: params.latitude,
|
|
longitude: params.longitude,
|
|
size: params.size
|
|
}).then(res => {
|
|
if (res) {
|
|
this.packingList = res
|
|
}
|
|
})
|
|
},
|
|
closeNotice() {
|
|
this.isClosed = true
|
|
if (this.transitionTimer) {
|
|
clearInterval(this.transitionTimer)
|
|
this.transitionTimer = null
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
hasLogin() {
|
|
return this.$store.state.qnToken != ''
|
|
},
|
|
transitionStyle() {
|
|
return `transform: translateY(-${this.curIndex * 80}rpx)`
|
|
}
|
|
},
|
|
created() {
|
|
// this.locatePosition()
|
|
getMapCompanyList({
|
|
cooperationState: 0,
|
|
km: 5,
|
|
latitude: this.location.latitude,
|
|
longitude: this.location.longitude,
|
|
size: 100
|
|
}).then(res => {
|
|
if (res) {
|
|
this.packingList = res
|
|
}
|
|
})
|
|
},
|
|
onHide() {
|
|
clearInterval(this.transitionTimer)
|
|
this.transitionTimer = null
|
|
},
|
|
onShow() {
|
|
const token = this.$store.state.qnToken
|
|
if (token) {
|
|
getInquiryList({ pageNum: 1, pageSize: 10 }).then(res => {
|
|
if (res) {
|
|
this.enquiryList = res.records
|
|
if (this.enquiryList.length > 1 && !this.isClosed) {
|
|
this.transitionTimer = setInterval(() => {
|
|
this.curIndex == this.enquiryList.length - 1 ? (this.curIndex = 0) : this.curIndex++
|
|
}, 3000)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
height: 100vh;
|
|
}
|
|
.map_area {
|
|
position: relative;
|
|
width: 750rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
}
|
|
.enquiry-area {
|
|
position: absolute;
|
|
top: 12rpx;
|
|
left: 32rpx;
|
|
width: 686rpx;
|
|
height: 170rpx;
|
|
padding: 20rpx 16rpx;
|
|
background-color: #fffbe8;
|
|
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
.enquiry-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
.notice {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
.notice_title {
|
|
font-size: 28rpx;
|
|
color: #f5222d;
|
|
letter-spacing: 2.33rpx;
|
|
text-align: left;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
.notice-content {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
.animation-area {
|
|
width: 490rpx;
|
|
height: 80rpx;
|
|
overflow: hidden;
|
|
}
|
|
.enquiry-content {
|
|
width: 490rpx;
|
|
transition: all 1s linear;
|
|
.enquiry-item {
|
|
width: 490rpx;
|
|
height: 80rpx;
|
|
.production {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
word-break: break-all;
|
|
padding-top: 10rpx;
|
|
font-size: 26rpx;
|
|
color: #f5222d;
|
|
}
|
|
}
|
|
}
|
|
.enquiry-submit {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
.text {
|
|
font-size: 28rpx;
|
|
color: #2b74ff;
|
|
letter-spacing: 2.33rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.list-button {
|
|
position: absolute;
|
|
bottom: 140rpx;
|
|
right: 32rpx;
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
}
|
|
.locate-button {
|
|
position: absolute;
|
|
bottom: 40rpx;
|
|
right: 32rpx;
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
}
|
|
.nav-login {
|
|
font-size: 28rpx;
|
|
color: #007aff;
|
|
text-align: right;
|
|
}
|
|
.nav-title {
|
|
font-size: 40rpx;
|
|
color: #000000;
|
|
letter-spacing: 0;
|
|
font-weight: 500;
|
|
}
|
|
.nav-search {
|
|
width: 440rpx;
|
|
height: 60rpx;
|
|
background: #f5f6f7;
|
|
border-radius: 16rpx;
|
|
padding-left: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
}
|
|
.search-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
flex: 0 0 auto;
|
|
margin-right: 8rpx;
|
|
}
|
|
.search-text {
|
|
font-size: 25rpx;
|
|
flex: 1 0 auto;
|
|
color: rgba(34, 34, 34, 0.75);
|
|
font-weight: 400;
|
|
}
|
|
.selected-company {
|
|
padding-top: 20rpx;
|
|
width: 750rpx;
|
|
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);
|
|
background-color: #fff;
|
|
.image-area {
|
|
width: 750rpx;
|
|
height: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.image {
|
|
width: 64rpx;
|
|
height: 32rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|