uu
This commit is contained in:
aihe
parent
40befb69bd
commit
7ee98eeb19
185
components/buns-address-sheet/buns-address-sheet.vue
Normal file
185
components/buns-address-sheet/buns-address-sheet.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<tpx-dialog :show="show" title="请选择地区" @onClose="handleCloseModal()">
|
||||
<view style="position: relative;height: calc(70vh);">
|
||||
<tpx-layout>
|
||||
<template v-slot:body>
|
||||
<u-steps direction="column" activeColor="#B12D29" inactiveColor="#B12D29" dot="true">
|
||||
<u-steps-item v-for="(item, index) in submitVals.regNames">
|
||||
<template v-slot:desc>
|
||||
<view :class="`pl-20 ${curTabIndex == index?'clr-prm':''}`" @click="changeCurTab(index)">
|
||||
{{item}}
|
||||
</view>
|
||||
</template>
|
||||
</u-steps-item>
|
||||
</u-steps>
|
||||
|
||||
<view class="showselect-list">
|
||||
<view v-for="(item, index) in curShowData" class="showselect-group">
|
||||
<view v-if="item.letters" class="pr-20">{{item.letters}}</view>
|
||||
<view>
|
||||
<view v-for="(sItem, sIndex) in item.data" :class="`showselect-item`" @click="selectItemRegion(sItem)">
|
||||
{{sItem.name}}
|
||||
<view v-if="submitVals.regIds.indexOf(sItem.id) > -1?'active':''">
|
||||
<u-icon name="checkbox-mark" size="32" :bold="true"
|
||||
:custom-style="`'color:#B12D29;'`"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
<view class="blcok-white-noradius" style="margin-top: 0;margin-bottom: 0;">
|
||||
<u-button @click="handleSubmitValue()" type="primary" size="large" shape="circle"
|
||||
custom-style="height:80rpx;font-size: 30rpx;">确认</u-button>
|
||||
</view>
|
||||
</template>
|
||||
</tpx-layout>
|
||||
</view>
|
||||
</tpx-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getEmisCountry,
|
||||
getEmisRegion
|
||||
} from "@/common/api"
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
show(v) {
|
||||
if (v) {
|
||||
this.submitVals = JSON.parse(JSON.stringify(this.value))
|
||||
this.initData()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
curShowData() {
|
||||
const ret = []
|
||||
let letterMap = {}
|
||||
this.curList.map(t => {
|
||||
const firstUpCase = (t.nameEn || '').toLocaleUpperCase()[0]
|
||||
if (!letterMap[firstUpCase]) {
|
||||
letterMap[firstUpCase] = []
|
||||
}
|
||||
letterMap[firstUpCase].push(t)
|
||||
})
|
||||
Object.keys(letterMap).sort((a, b)=> a - b > 0).map((key) => {
|
||||
ret.push({
|
||||
letters: key,
|
||||
data: letterMap[key]
|
||||
})
|
||||
})
|
||||
return ret
|
||||
}
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
default () {
|
||||
return false
|
||||
}
|
||||
},
|
||||
value: {
|
||||
default () {
|
||||
return {
|
||||
regIds: [],
|
||||
regNames: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curTabIndex: 0,
|
||||
curCountryList: [], // { id , name, nameEn }
|
||||
curList: [], // { id , name, nameEn }
|
||||
submitVals: {
|
||||
regIds: [],
|
||||
regNames: []
|
||||
},
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
const res = await getEmisCountry()
|
||||
this.curCountryList = this.curList = res.rows || []
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
unmounted() {},
|
||||
|
||||
methods: {
|
||||
initData() {
|
||||
if (this.submitVals.regIds.length == 0) {
|
||||
let item = this.curCountryList.filter(t => t.name == '中国')[0]
|
||||
// 默认选择中国
|
||||
this.selectItemRegion(item)
|
||||
}
|
||||
},
|
||||
async getListData({
|
||||
parentId
|
||||
} = {}) {
|
||||
let countryId = this.submitVals.regIds[0] // 最外层是国家id
|
||||
if (parentId == countryId) {
|
||||
parentId = undefined
|
||||
}
|
||||
const res = await getEmisRegion({
|
||||
parentId,
|
||||
countryId
|
||||
})
|
||||
const list = res.rows || []
|
||||
list.map(t => {
|
||||
t.name = t.regionName
|
||||
t.nameEn = t.regionNameEn
|
||||
})
|
||||
this.curList = list
|
||||
},
|
||||
changeCurTab(index) {
|
||||
this.curTabIndex = index
|
||||
if (index == 0) {
|
||||
this.curList = this.curCountryList
|
||||
} else {
|
||||
this.getListData()
|
||||
}
|
||||
},
|
||||
selectItemRegion(item = {}) {
|
||||
// 选择数据变化，需清除下所有层级选中数据
|
||||
if (item.id != this.submitVals[this.curTabIndex]) {
|
||||
this.submitVals.regIds.length = this.curTabIndex
|
||||
this.submitVals.regNames.length = this.curTabIndex
|
||||
this.submitVals.regIds.push(item.id)
|
||||
this.submitVals.regNames.push(item.name)
|
||||
}
|
||||
this.getListData({
|
||||
parentId: item.id
|
||||
})
|
||||
},
|
||||
handleCloseModal() {
|
||||
this.$emit('update:show', false)
|
||||
},
|
||||
handleSubmitValue() {
|
||||
const val = this.submitVals
|
||||
this.$emit('onSure', val)
|
||||
this.$emit('update:value', val)
|
||||
this.handleCloseModal()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.showselect-list{
|
||||
|
||||
}
|
||||
.showselect-group {
|
||||
display: flex;
|
||||
}
|
||||
.showselect-item{
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;;
|
||||
}
|
||||
</style>
|
||||
@ -68,6 +68,7 @@
|
||||
methods: {
|
||||
handleCloseModal() {
|
||||
this.$emit('update:show', false)
|
||||
this.$emit('onClose')
|
||||
},
|
||||
handleSubmitValue() {
|
||||
const val = this.submitVals
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<u-input shape="circle" :placeholder="placeholder" :modelValue="value" :clearable="clearable"
|
||||
:custom-style="inputStyle"
|
||||
:custom-style="inputStyle" :readonly="readonly"
|
||||
:placeholder-style="`color: #999;${placeholderStyle};` " @change="handleChange"
|
||||
>
|
||||
<template v-if="suffix" #suffix>
|
||||
@ -35,6 +35,11 @@
|
||||
return false
|
||||
}
|
||||
},
|
||||
readonly: {
|
||||
default () {
|
||||
return false
|
||||
}
|
||||
},
|
||||
value: {
|
||||
default () {
|
||||
return ''
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<u-textarea shape="circle" placeholder-style="color: #0E0708; "
|
||||
<u-textarea shape="circle" placeholder-style=""
|
||||
:modelValue="value" :clearable="true" :placeholder="placeholder"
|
||||
custom-style="border:0;border-radius: 10rpx;background-color: #F6F6F6;padding: 15rpx 20rpx;" height="160"
|
||||
></u-textarea>
|
||||
|
||||
@ -12,7 +12,6 @@
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="blcok-white radius-20">
|
||||
<view class="">
|
||||
|
||||
@ -27,9 +26,9 @@
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
<view class="mt-40">
|
||||
<tpx-select placeholder="所在地区" v-model:value="country" :list="[]" custom-style="border:0;"
|
||||
></tpx-select>
|
||||
<view class="mt-40 pos-rlt">
|
||||
<tpx-input v-model:value="submitParam.address" placeholder="所在地区"></tpx-input>
|
||||
<view @click="handleDialogClick(addressModal)" class="pos-abt-all"></view>
|
||||
</view>
|
||||
|
||||
<view class="mt-30">
|
||||
@ -81,10 +80,10 @@
|
||||
</view>
|
||||
</template>
|
||||
</tpx-layout>
|
||||
<buns-address-sheet v-model:show="addressModal.show" v-model:value="submitParam"></buns-address-sheet>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import getCdnUrl from "@/common/getCdnUrl"
|
||||
import {
|
||||
ordStaEnum,
|
||||
ordStatusList,
|
||||
@ -109,7 +108,12 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addressModal: {
|
||||
show: false
|
||||
},
|
||||
submitParam: {
|
||||
regIds: [],
|
||||
regNames: [],
|
||||
type: 1,
|
||||
otherDes: ''
|
||||
}
|
||||
@ -128,8 +132,6 @@
|
||||
|
||||
},
|
||||
methods: {
|
||||
getCdnUrl,
|
||||
|
||||
initData() {
|
||||
// uni.showLoading({
|
||||
// title: '加载中'
|
||||
@ -144,6 +146,9 @@
|
||||
handleSubmit() {
|
||||
|
||||
},
|
||||
handleDialogClick(curModal) {
|
||||
curModal.show = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user