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.
329 lines
9.2 KiB
329 lines
9.2 KiB
<template>
|
|
<div class="edit-address">
|
|
<div class="edit-address-box" v-if="itemList.cmd == 'GMMDBDCX'">
|
|
<div class="edit-address-title-hd">{{ textInfo.head || '请选择您需要查询的网点信息' }}</div>
|
|
<div class="edit-address-edit-box">
|
|
<van-field
|
|
readonly
|
|
clickable
|
|
label-class="edit-box-cell"
|
|
name="picker"
|
|
v-model="selectedData"
|
|
label="选择省市（必填）"
|
|
placeholder="点击此处选择省市"
|
|
right-icon="arrow"
|
|
@click.stop="!disabled && (isEditShow = true)"
|
|
/>
|
|
<van-field
|
|
readonly
|
|
clickable
|
|
label-class="edit-box-cell"
|
|
name="picker1"
|
|
v-model="selectedData1"
|
|
label="选择区"
|
|
placeholder="点击此处选择区"
|
|
right-icon="arrow"
|
|
@click.stop="!disabled && (isEditShow1 = true)"
|
|
/>
|
|
</div>
|
|
<div class="van-address-edit-btn">
|
|
<van-button
|
|
round
|
|
block
|
|
color="#5A9CFF"
|
|
:disabled="submitDisabled"
|
|
:loading="submitLoad"
|
|
type="info"
|
|
loading-text="变更中..."
|
|
@click.stop="submitInfo"
|
|
>确 认</van-button
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="networkInfo" v-else>
|
|
<template v-if="networkInfo && Array.isArray(networkInfo)">
|
|
<div
|
|
v-for="(item, index) in networkInfo"
|
|
:key="index"
|
|
:style="{ 'border-top': index > 0 ? '1px dashed #666' : '' }"
|
|
>
|
|
<div
|
|
class="networkInfo-title displayleft"
|
|
style="margin: 10px 0; font-size: 16px; align-items: center"
|
|
>
|
|
<img
|
|
src="../assets/images/company.png"
|
|
style="width: 19px; height: 17px; margin-right: 8px"
|
|
alt=""
|
|
/>
|
|
<div>{{ item.intorgName }}</div>
|
|
</div>
|
|
<div class="displayleft" style="margin: 10px 0">
|
|
<div style="width: 110px">地<span style="opacity: 0">地址</span>址：</div>
|
|
<div style="color: #666; flex: 1; font-size: 12px">{{ item.address }}</div>
|
|
</div>
|
|
<div class="displayleft" style="margin: 10px 0">
|
|
<div style="width: 110px">电<span style="opacity: 0">电话</span>话：</div>
|
|
<div style="color: #666; flex: 1; font-size: 12px">
|
|
<div v-if="item.tel" v-html="item.tel"></div>
|
|
</div>
|
|
</div>
|
|
<div class="displayleft" style="margin: 10px 0">
|
|
<div style="width: 110px">营业时间：</div>
|
|
<div style="color: #666; flex: 1; font-size: 12px">
|
|
<div v-if="item.worktime" v-html="item.worktime"></div>
|
|
</div>
|
|
</div>
|
|
<div class="displayleft" style="margin: 10px 0">
|
|
<div style="width: 110px">服务项目：</div>
|
|
<div style="color: #666; flex: 1; font-size: 12px">
|
|
<div v-if="item.shouliquanx" v-html="item.shouliquanx"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="networkInfo == 'noOne'">
|
|
<div style="text-align: left; font-size: 14px; color: #666">
|
|
您好，您所选的区域未设立我司网点，请您选择其他区域
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<van-popup
|
|
class="edit-address-popup-box"
|
|
v-model:show="isEditShow"
|
|
get-container="body"
|
|
position="bottom"
|
|
:duration="0.2"
|
|
>
|
|
<van-picker
|
|
show-toolbar
|
|
value-key="name"
|
|
:columns="provinceCityColumns"
|
|
:item-height="40"
|
|
@cancel="isEditShow = false"
|
|
@confirm="onProvinceCityConfirm"
|
|
/>
|
|
</van-popup>
|
|
|
|
<van-popup
|
|
class="edit-address-popup-box"
|
|
v-model:show="isEditShow1"
|
|
get-container="body"
|
|
position="bottom"
|
|
:duration="0.2"
|
|
>
|
|
<van-picker
|
|
show-toolbar
|
|
value-key="name"
|
|
:columns="districtColumns"
|
|
:item-height="40"
|
|
@cancel="isEditShow1 = false"
|
|
@confirm="onDistrictConfirm"
|
|
/>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, inject, onMounted, nextTick } from 'vue'
|
|
import _ from 'lodash'
|
|
import { Notify, Field, Button, Popup, Picker } from 'vant'
|
|
import { pcaList } from '@/mock/network-code'
|
|
import { Post } from '@/utils/https'
|
|
|
|
const props = defineProps({
|
|
disabled: { type: Boolean, default: false },
|
|
itemList: { type: Object, default: () => ({}) },
|
|
})
|
|
|
|
const store = inject('appStore', null)
|
|
const userId = inject('userId', ref(''))
|
|
const sessionId = inject('sessionId', ref(''))
|
|
const source = inject('source', ref(''))
|
|
const mescrollContent = inject('mescrollContent', ref(null))
|
|
const pcaData = inject('pcaData', ref(null))
|
|
|
|
const isEditShow = ref(false)
|
|
const isEditShow1 = ref(false)
|
|
const provinceCityColumns = ref([])
|
|
const districtColumns = ref([])
|
|
const province = ref('')
|
|
const city = ref('')
|
|
const area = ref('')
|
|
const selectedData = ref('')
|
|
const selectedData1 = ref('')
|
|
const submitLoad = ref(false)
|
|
const submitDisabled = ref(false)
|
|
const networkInfo = ref(null)
|
|
const textInfo = ref({ head: '', tips: '' })
|
|
|
|
onMounted(() => {
|
|
if (props.itemList.cmd != '$gmmdbdcx-da') {
|
|
if (props.itemList.msgText.split('||').length == 3) {
|
|
textInfo.value.head = props.itemList.msgText.split('||')[0]
|
|
textInfo.value.tips = props.itemList.msgText.split('||')[1].replace(/\\n/g, '<br>')
|
|
} else {
|
|
textInfo.value.head = props.itemList.msgText
|
|
}
|
|
}
|
|
provinceCityColumns.value = (
|
|
_.isNull(pcaData.value) || pcaData.value.length === 0 ? pcaList : pcaData.value
|
|
)
|
|
.filter(
|
|
(province) =>
|
|
!['西藏自治区', '香港特别行政区', '澳门特别行政区', '台湾省'].includes(
|
|
province.provinceName
|
|
)
|
|
)
|
|
.map((province) => ({
|
|
name: province.provinceName,
|
|
children: province.childrenList.map((city) => ({ name: city.provinceName })),
|
|
}))
|
|
|
|
submitDisabled.value = props.disabled
|
|
if (props.itemList.cmd == '$gmmdbdcx-da') {
|
|
RequestInfo(props.itemList.msgText)
|
|
}
|
|
nextTick(() => {
|
|
scrollTopBody()
|
|
})
|
|
if (!textInfo.value.head) {
|
|
Post('config/storeConfig')
|
|
.then((res) => {
|
|
textInfo.value = res.data
|
|
})
|
|
.catch((err) => console.log(err))
|
|
}
|
|
})
|
|
|
|
function scrollTopBody() {
|
|
setTimeout(() => {
|
|
try {
|
|
if (mescrollContent.value) {
|
|
mescrollContent.value.scrollTop = mescrollContent.value.scrollHeight || 0
|
|
}
|
|
} catch (error) {
|
|
console.log(error.message)
|
|
}
|
|
}, 300)
|
|
}
|
|
|
|
function verification() {
|
|
if (!selectedData.value) {
|
|
Notify('请选择省/市')
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
function onProvinceCityConfirm(value, itemIndex) {
|
|
const provinceObj = provinceCityColumns.value[itemIndex[0]]
|
|
const cityObj = provinceObj.name
|
|
province.value = provinceObj.name
|
|
city.value = provinceObj.children[itemIndex[1]].name
|
|
isEditShow.value = false
|
|
const originalProvince = (
|
|
_.isNull(pcaData.value) || pcaData.value.length === 0 ? pcaList : pcaData.value
|
|
).find((p) => p.provinceName === province.value)
|
|
const originalCity = originalProvince.childrenList.find((c) => c.provinceName === city.value)
|
|
districtColumns.value = originalCity.childrenList.map((district) => ({
|
|
name: district.provinceName,
|
|
}))
|
|
selectedData.value = `${province.value + city.value}`
|
|
selectedData1.value = ''
|
|
}
|
|
|
|
function onDistrictConfirm(value) {
|
|
area.value = value.name
|
|
isEditShow1.value = false
|
|
selectedData1.value = `${area.value}`
|
|
}
|
|
|
|
function submitInfo() {
|
|
if (!verification()) return
|
|
let info = {
|
|
cmd: '$gmmdbdcx-da',
|
|
customerServiceName: null,
|
|
evaluation: null,
|
|
fromFlag: 2,
|
|
imgUrl: null,
|
|
intentId: '',
|
|
intents: [],
|
|
msgSource: 1,
|
|
msgText: province.value + ',' + city.value + ',' + area.value,
|
|
msgType: '01',
|
|
qaId: props.itemList.qaId,
|
|
reason: null,
|
|
reasonDesc: null,
|
|
reqAndResType: '05',
|
|
seatNum: '洋洋机器人',
|
|
sessionId: sessionId.value,
|
|
source: source.value,
|
|
timestamp: new Date().getTime(),
|
|
userId: 408,
|
|
userName: null,
|
|
voiceData: null,
|
|
voiceUrl: null,
|
|
textInfo: textInfo.value,
|
|
}
|
|
store?.commit?.('set_chatList', info)
|
|
scrollTopBody()
|
|
}
|
|
|
|
function RequestInfo(info) {
|
|
let infoArr = info.split(',')
|
|
let param = { city: infoArr[1], town: infoArr[2] }
|
|
Post('api/counterInfo', param)
|
|
.then((res) => {
|
|
if (typeof res.data == 'object') {
|
|
networkInfo.value = res.data
|
|
} else {
|
|
networkInfo.value = 'noOne'
|
|
}
|
|
scrollTopBody()
|
|
})
|
|
.catch((error) => console.log(error))
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.displayleft {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.edit-address-title-hd {
|
|
font-family: NotoSansHans-Regular;
|
|
font-size: 14px;
|
|
line-height: 21px;
|
|
font-weight: 700;
|
|
color: #333333;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
user-select: text;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.edit-address-edit-box .van-cell {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.edit-address-edit-box .van-cell:not(:last-child)::after {
|
|
left: 0;
|
|
}
|
|
|
|
.edit-address-edit-box :deep(.van-field__label.edit-box-cell) {
|
|
width: 75px;
|
|
}
|
|
|
|
.edit-address-popup-box {
|
|
width: 100%;
|
|
}
|
|
|
|
.edit-address-box .van-address-edit-btn {
|
|
padding: 30px 0 10px 0;
|
|
}
|
|
</style>
|
|
|