小程序产品库完成
This commit is contained in:
aixianling
367
src/components/AiAreaPicker/AiAreaPicker.vue
Normal file
367
src/components/AiAreaPicker/AiAreaPicker.vue
Normal file
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<section class="AiAreaPicker">
|
||||
<ai-search-popup mode="bottom" ref="areaSelector" length="85%">
|
||||
<div slot="btn" @tap="handleInit">
|
||||
<slot v-if="$slots.default"/>
|
||||
<div v-else class="areaSelector">
|
||||
<image :src="locationIcon" class="location"/>
|
||||
<div v-text="currentArea.name"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="areaSelector" id="areaSelector">
|
||||
<div class="fixedTop">
|
||||
<b>选择地区</b>
|
||||
<em>选择区域</em>
|
||||
<div class="selectedArea" v-if="hasSelected">
|
||||
<p v-for="area in fullArea" :key="area.id" v-text="area.name"/>
|
||||
<p v-if="selected.type==5" v-text="selected.name"/>
|
||||
</div>
|
||||
<div/>
|
||||
<span v-if="all" v-text="`省`" @click="selectNode({}, -1)"/>
|
||||
<span v-for="(area,i) in fullArea" :key="area.id" v-text="area.levelLabel"
|
||||
@click="selectNode(area, i)"/>
|
||||
</div>
|
||||
</div>
|
||||
<scroll-view class="fill pendingList" :style="{height: height}" scroll-y>
|
||||
<div class="pendingItem flexRow" flex v-for="op in pending" :key="op.id" @tap="getChild(op)">
|
||||
<div class="fill" :class="{ self: index == op.id }" v-html="op.name"/>
|
||||
<u-icon v-if="index == op.id" name="checkbox-mark" color="#4181FF"/>
|
||||
</div>
|
||||
</scroll-view>
|
||||
<div class="bottomBtns">
|
||||
<div @click="closePopup">取消</div>
|
||||
<div class="primary fill" @click="handleSelect">确定</div>
|
||||
</div>
|
||||
</ai-search-popup>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiSearchPopup from './AiSearchPopup'
|
||||
import AiCell from './AiCell.vue'
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AiAreaPicker',
|
||||
components: {AiCell, AiSearchPopup},
|
||||
props: {
|
||||
areaId: {default: ''},
|
||||
name: {default: ''},
|
||||
value: String,
|
||||
all: Boolean,
|
||||
icon: {default: "location.svg"},
|
||||
isHideTown: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
dataRange() {
|
||||
let rules = [10, 8, 6, 3, 0],
|
||||
level = 0
|
||||
if (this.all) return (level = 0)
|
||||
rules.some((e, i) => {
|
||||
let reg = new RegExp(`0{${e}}`, 'g')
|
||||
if (reg.test(this.areaId || this.user.areaId || this.$areaId)) {
|
||||
return (level = i)
|
||||
}
|
||||
})
|
||||
return level
|
||||
},
|
||||
currentArea() {
|
||||
return this.fullArea?.slice(-1)?.[0] || {}
|
||||
},
|
||||
locationIcon() {
|
||||
return this.$cdn + this.icon
|
||||
},
|
||||
pending() {
|
||||
return this.list.map(e => ({...e, levelLabel: this.levelLabels[e.type]}))
|
||||
},
|
||||
hasSelected() {
|
||||
return this.fullArea?.length > 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fullArea: [],
|
||||
index: '',
|
||||
list: [],
|
||||
height: '500px',
|
||||
levelLabels: ["省", "市", "县/区", "镇/街道", "村/社区"],
|
||||
selected: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
areaId(v) {
|
||||
v && this.getFullArea()
|
||||
},
|
||||
|
||||
fullArea: {
|
||||
handler(v) {
|
||||
this.$nextTick(() => {
|
||||
if (v) {
|
||||
this.scrollHeight()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.handleInit()
|
||||
this.$refs.areaSelector.showPopup()
|
||||
},
|
||||
scrollHeight () {
|
||||
var obj = this.createSelectorQuery()
|
||||
obj.select('#areaSelector').boundingClientRect()
|
||||
obj.exec(rect => {
|
||||
if (rect.length) {
|
||||
this.height = `calc(100% - ${rect[0].height}px)`
|
||||
}
|
||||
})
|
||||
},
|
||||
getFullArea() {
|
||||
let areaId = this.areaId || (this.all ? '' : this.$areaId)
|
||||
return this.$instance.post('/admin/area/getAllParentAreaId', null, {
|
||||
withoutToken: true,
|
||||
params: {areaId},
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
res.data.forEach((e) => {
|
||||
e && (e.levelLabel = this.levelLabels[e.type])
|
||||
})
|
||||
if (res.data.length > 1) {
|
||||
this.fullArea = res.data.reverse().slice(this.dataRange)
|
||||
} else {
|
||||
this.fullArea = res.data
|
||||
}
|
||||
return this.fullArea
|
||||
}
|
||||
})
|
||||
},
|
||||
getChildAreas(id) {
|
||||
id && this.$instance.post('/admin/area/queryAreaByParentId', null, {
|
||||
withoutToken: true,
|
||||
params: {id},
|
||||
}).then((res) => {
|
||||
if (res.data.length) {
|
||||
this.list = res.data
|
||||
let self = this.fullArea.find((e) => e.id == this.areaId)
|
||||
if (self.id && !this.isHideTown) {
|
||||
this.list.unshift(self)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
isVillage (areaId) {
|
||||
return areaId.substr(areaId.length - 3, 3) != '000'
|
||||
},
|
||||
|
||||
getProvinces() {
|
||||
this.$instance.post('/admin/area/queryProvinceList', null, {withoutToken: true}).then((res) => {
|
||||
if (res?.data) {
|
||||
this.list = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSelect() {
|
||||
this.$emit('select', this.index)
|
||||
let fullName = ''
|
||||
this.fullArea.forEach(v => {
|
||||
fullName = fullName + v.name
|
||||
})
|
||||
|
||||
if (this.selected.type == 5) {
|
||||
fullName = fullName + this.selected.name
|
||||
}
|
||||
this.$emit('update:fullName', fullName)
|
||||
this.$emit('update:name', this.selected.name)
|
||||
this.closePopup()
|
||||
},
|
||||
getChild(op) {
|
||||
if (op.id != this.index) {
|
||||
if (op.type < 5 && (/0{3}$/g.test(this.index) || !this.index)) {
|
||||
this.fullArea.push(op)
|
||||
this.getChildAreas(op.id)
|
||||
}
|
||||
this.selected = op
|
||||
this.index = op.id
|
||||
}
|
||||
},
|
||||
selectNode(area, i) {
|
||||
this.fullArea.splice(i + 1, this.fullArea.length - i)
|
||||
if (this.all && !area.id) {
|
||||
this.index = ''
|
||||
this.getProvinces()
|
||||
} else {
|
||||
this.index = area.id
|
||||
this.getChildAreas(area.id)
|
||||
}
|
||||
},
|
||||
handleInit() {
|
||||
this.index = this.value || this.areaId
|
||||
|
||||
if (this.all && !this.areaId && !this.currentArea.id) {
|
||||
this.getProvinces()
|
||||
|
||||
return false
|
||||
}
|
||||
this.getFullArea().then(() => {
|
||||
this.getChildAreas(this.currentArea.id || this.areaId)
|
||||
})
|
||||
},
|
||||
closePopup() {
|
||||
this.$refs.areaSelector?.handleSelect()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiAreaPicker {
|
||||
::v-deep .areaSelector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
line-height: 112px;
|
||||
margin-right: 72px;
|
||||
position: relative;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -26px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 100%);
|
||||
width: 40px;
|
||||
height: 8px;
|
||||
background: #4181FF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 96px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.selectedArea {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
max-width: calc(100vw - 128px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 32px;
|
||||
height: 80px;
|
||||
background: #ECF2FF;
|
||||
border-radius: 40px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #4181FF !important;
|
||||
margin: 16px 0 32px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fixedTop {
|
||||
// position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
border-bottom: 4px solid #f5f5f5;
|
||||
z-index: 1;
|
||||
text-align: start;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.u-drawer-content {
|
||||
|
||||
.areaSelector {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .pendingList {
|
||||
padding: 0 32px 120px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.pendingItem {
|
||||
color: #333;
|
||||
height: 104px;
|
||||
text-align: start;
|
||||
|
||||
.self {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.bottomBtns {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 120px;
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #3671EE;
|
||||
background: #fff;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > div {
|
||||
padding: 0 92px;
|
||||
line-height: 88px;
|
||||
height: 88px;
|
||||
border: 1px solid #A0C0FF;
|
||||
border-radius: 16px;
|
||||
|
||||
&.primary {
|
||||
color: #fff;
|
||||
background: #4181FF;
|
||||
border-color: #4181FF;
|
||||
}
|
||||
|
||||
& + div {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location {
|
||||
width: 28px;
|
||||
height: 80px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
src/components/AiAreaPicker/AiCell.vue
Normal file
76
src/components/AiAreaPicker/AiCell.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<section class="AiCell" :class="{bottomBorder,alignCenter,topLabel}">
|
||||
<div class="label" :class="{title}">
|
||||
<slot v-if="$slots.label" name="label"/>
|
||||
<span v-else>{{ label }}</span>
|
||||
</div>
|
||||
<div class="content" :class="{topLabel}">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AiCell",
|
||||
props: {
|
||||
label: {default: ""},
|
||||
bottomBorder: Boolean,
|
||||
topLabel: Boolean,
|
||||
title: Boolean,
|
||||
alignCenter: Boolean
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiCell {
|
||||
display: flex;
|
||||
min-height: 72px;
|
||||
font-size: 30px;
|
||||
color: #333;
|
||||
padding: 14px 0;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
|
||||
&.bottomBorder {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
&.alignCenter {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.topLabel {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.label {
|
||||
min-width: 60px;
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
color: #999;
|
||||
|
||||
|
||||
&.title {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
min-height: 40px;
|
||||
max-width: 500px;
|
||||
text-align: right;
|
||||
|
||||
&.topLabel {
|
||||
text-align: start;
|
||||
margin-top: 16px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
src/components/AiAreaPicker/AiSearchPopup.vue
Normal file
94
src/components/AiAreaPicker/AiSearchPopup.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<section class="AiSearchPopup">
|
||||
<u-popup v-model="show" :length="length" closeable :mode="mode" border-radius="32">
|
||||
<slot v-if="$slots.default"/>
|
||||
<div class="searchPane" v-else>
|
||||
<div class="title">{{ title }}</div>
|
||||
<u-search v-model="search" :placeholder="placeholder" :show-action="false" @search="getList()" :focus="show"/>
|
||||
<div class="result">
|
||||
<div class="option" v-for="(op,i) in list" :key="i" @tap="handleSelect(op)">{{ op[ops.label] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
<div @tap="show=true">
|
||||
<slot name="btn"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AiSearchPopup",
|
||||
props: {
|
||||
title: {default: "搜索"},
|
||||
placeholder: {default: "请搜索"},
|
||||
ops: {default: () => ({label: 'label', search: 'name'})},
|
||||
url: String,
|
||||
mode: {default: "right"},
|
||||
length: {default: "100%"}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
search: "",
|
||||
list: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(v) {
|
||||
!v && this.$emit('close')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.url && this.$instance.post(this.url, null, {
|
||||
params: {[this.ops.search]: this.search}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.list = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
showPopup() {
|
||||
this.show = true
|
||||
},
|
||||
handleSelect(op) {
|
||||
this.$emit('select', op)
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiSearchPopup {
|
||||
::v-deep .searchPane {
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.result {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user