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.
372 lines
10 KiB
372 lines
10 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>
|
|
<van-field
|
|
readonly
|
|
clickable
|
|
label-class="edit-box-cell"
|
|
name="picker1"
|
|
v-model="selectedData1"
|
|
label="选择区"
|
|
placeholder="点击此处选择区"
|
|
right-icon="arrow"
|
|
@click.stop="!disabled && (isEditShow1 = true)"
|
|
>
|
|
</van-field>
|
|
</div>
|
|
|
|
<div class="van-address-edit-btn">
|
|
<van-button
|
|
round
|
|
block
|
|
color="#5A9CFF"
|
|
:disabled="submitDisabled"
|
|
:loading="submitLoad"
|
|
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 ? '1rem dashed #666' : '' }"
|
|
>
|
|
<div
|
|
class="networkInfo-title displayleft"
|
|
style="margin: 10rem 0; font-size: 16rem; align-items: center"
|
|
>
|
|
<img
|
|
src="../assets/images/company.png"
|
|
style="width: 19rem; height: 17rem; margin-right: 8rem"
|
|
alt=""
|
|
/>
|
|
<div>{{ item.intorgName }}</div>
|
|
</div>
|
|
<div class="displayleft" style="margin: 10rem 0">
|
|
<div style="width: 110rem">地<span style="opacity: 0">地址</span>址：</div>
|
|
<div style="color: #666; flex: 1; font-size: 12rem">
|
|
{{ item.address }}
|
|
</div>
|
|
</div>
|
|
<div class="displayleft" style="margin: 10rem 0">
|
|
<div style="width: 110rem">电<span style="opacity: 0">电话</span>话：</div>
|
|
<div style="color: #666; flex: 1; font-size: 12rem">
|
|
<div v-if="item.tel" v-html="item.tel"></div>
|
|
</div>
|
|
</div>
|
|
<div class="displayleft" style="margin: 10rem 0">
|
|
<div style="width: 110rem">营业时间：</div>
|
|
<div style="color: #666; flex: 1; font-size: 12rem">
|
|
<div v-if="item.worktime" v-html="item.worktime"></div>
|
|
</div>
|
|
</div>
|
|
<div class="displayleft" style="margin: 10rem 0">
|
|
<div style="width: 110rem">服务项目：</div>
|
|
<div style="color: #666; flex: 1; font-size: 12rem">
|
|
<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: 14rem; color: #666">
|
|
您好，您所选的区域未设立我司网点，请您选择其他区域
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<van-popup
|
|
class="edit-address-popup-box"
|
|
v-model:show="isEditShow"
|
|
teleport="body"
|
|
position="bottom"
|
|
:duration="0.2"
|
|
>
|
|
<!-- vant Picker 根据 绑定的columns数据，来渲染几级联动，这里我们使用的是二级联动 -->
|
|
<van-picker
|
|
show-toolbar
|
|
:columns="provinceCityColumns"
|
|
:columns-field-names="{ text: 'name' }"
|
|
:item-height="40"
|
|
@cancel="isEditShow = false"
|
|
@confirm="onProvinceCityConfirm"
|
|
/>
|
|
</van-popup>
|
|
|
|
<van-popup
|
|
class="edit-address-popup-box"
|
|
v-model:show="isEditShow1"
|
|
teleport="body"
|
|
position="bottom"
|
|
:duration="0.2"
|
|
>
|
|
<van-picker
|
|
show-toolbar
|
|
:columns="districtColumns"
|
|
:columns-field-names="{ text: 'name' }"
|
|
:item-height="40"
|
|
@cancel="isEditShow1 = false"
|
|
@confirm="onDistrictConfirm"
|
|
/>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, nextTick, onMounted } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { showNotify } from 'vant'
|
|
import _ from 'lodash'
|
|
import { useAppStore } from '@/store/app.js'
|
|
import { Post } from '@/utils/https'
|
|
import { pcaList } from '@/mock/network-code'
|
|
|
|
const props = defineProps({
|
|
disabled: { type: Boolean, default: false },
|
|
itemList: { type: Object, default: () => ({}) },
|
|
})
|
|
|
|
const store = useAppStore()
|
|
const { sessionId, source, mescrollContent, pcaData } = storeToRefs(store)
|
|
|
|
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: '' }) // 提示信息
|
|
|
|
function sourcePcaList() {
|
|
return _.isNull(pcaData.value) || pcaData.value.length === 0 ? pcaList : pcaData.value
|
|
}
|
|
|
|
function scrollTopBody() {
|
|
setTimeout(() => {
|
|
// 滚动到底部
|
|
try {
|
|
const el = mescrollContent.value
|
|
if (el) el.scrollTop = el.scrollHeight || 0
|
|
} catch (error) {
|
|
console.log(error.message)
|
|
}
|
|
}, 300)
|
|
}
|
|
|
|
function verification() {
|
|
if (!selectedData.value) {
|
|
showNotify('请选择省/市')
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
// 省市选择确认
|
|
function onProvinceCityConfirm({ selectedOptions }) {
|
|
const prov = selectedOptions[0] || {}
|
|
const cityOpt = selectedOptions[1] || {}
|
|
province.value = prov.name || ''
|
|
city.value = cityOpt.name || ''
|
|
// 关闭省市选择器
|
|
isEditShow.value = false
|
|
// 从原始省市区数据里取该市下面的区
|
|
const originalProvince = sourcePcaList().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({ selectedOptions }) {
|
|
area.value = selectedOptions[0]?.name || ''
|
|
// 关闭区选择器
|
|
isEditShow1.value = false
|
|
// 更新选中的数据显示
|
|
selectedData1.value = `${area.value}`
|
|
}
|
|
|
|
function submitInfo() {
|
|
if (!verification()) {
|
|
return
|
|
}
|
|
const 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: Date.now(),
|
|
userId: 408,
|
|
userName: null,
|
|
voiceData: null,
|
|
voiceUrl: null,
|
|
textInfo: textInfo.value,
|
|
}
|
|
store.setChatList(info)
|
|
scrollTopBody()
|
|
}
|
|
|
|
function RequestInfo(info) {
|
|
const infoArr = String(info || '').split(',')
|
|
const 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)
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (props.itemList.cmd != '$gmmdbdcx-da') {
|
|
const msgText = String(props.itemList.msgText ?? '')
|
|
const parts = msgText.split('||')
|
|
if (parts.length == 3) {
|
|
textInfo.value.head = parts[0]
|
|
textInfo.value.tips = parts[1].replace(/\\n/g, '<br>')
|
|
} else {
|
|
textInfo.value.head = msgText
|
|
}
|
|
}
|
|
|
|
provinceCityColumns.value = sourcePcaList()
|
|
.filter(
|
|
(prov) =>
|
|
!['西藏自治区', '香港特别行政区', '澳门特别行政区', '台湾省'].includes(prov.provinceName),
|
|
)
|
|
.map((prov) => ({
|
|
name: prov.provinceName,
|
|
children: prov.childrenList.map((cityItem) => ({
|
|
name: cityItem.provinceName,
|
|
})),
|
|
}))
|
|
|
|
submitDisabled.value = props.disabled
|
|
if (props.itemList.cmd == '$gmmdbdcx-da') {
|
|
RequestInfo(props.itemList.msgText)
|
|
}
|
|
nextTick(() => scrollTopBody())
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.displayleft {
|
|
display: flex;
|
|
/* align-items: center; */
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.edit-address-tips-hd {
|
|
font-family: NotoSansHans-Regular;
|
|
font-size: 12rem;
|
|
line-height: 15rem;
|
|
font-weight: 400;
|
|
color: #0047e1;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
-webkit-user-select: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.edit-address-title-hd {
|
|
font-family: NotoSansHans-Regular;
|
|
font-size: 14rem;
|
|
line-height: 21rem;
|
|
font-weight: 700;
|
|
color: #333333;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
-webkit-user-select: text;
|
|
user-select: text;
|
|
padding-bottom: 15rem;
|
|
}
|
|
|
|
.edit-address-edit-box .van-cell {
|
|
padding: 10rem 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: 75rem;
|
|
}
|
|
|
|
.code-btn.code-btn-disabled {
|
|
color: #fff !important;
|
|
opacity: 1;
|
|
border: 0;
|
|
background-color: rgba(1, 193, 96, 0.5);
|
|
}
|
|
|
|
.edit-box-checkbox-item {
|
|
padding: 20rem 0 0 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
.edit-box-checkbox-item :deep(.van-checkbox__label) {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.edit-address-popup-box {
|
|
width: 100%;
|
|
}
|
|
|
|
.edit-address-box .van-address-edit-btn {
|
|
padding: 30rem 0 10rem 0;
|
|
}
|
|
</style>
|
|
|