270 lines
6.5 KiB
Vue
270 lines
6.5 KiB
Vue
<template>
|
|
<view class="queryAddr">
|
|
<u-navbar title="地址查询" autoBack bg-color="#fff0e7" placeholder></u-navbar>
|
|
<view class="queryAddr-list">
|
|
<scroll-view :scroll-y="true" style="height: 100%;">
|
|
<view class="v-card">
|
|
<view class="v-address-title">
|
|
<view class="label">
|
|
选择地区
|
|
</view>
|
|
<view class="v-select" @click="showPicker">
|
|
<text>{{columns[0][value[0]]}}</text> <u-icon name="arrow-down-fill"></u-icon>
|
|
</view>
|
|
<view class="v-select" @click="showPicker">
|
|
<text>{{columns[1][value[1]]}}</text> <u-icon name="arrow-down-fill"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="v-address-title">
|
|
<view class="label">
|
|
选择类型
|
|
</view>
|
|
<view class="v-select">
|
|
<text>看守所</text> <u-icon name="arrow-down-fill"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="address-details">
|
|
<u-row gutter="20rpx" style="width: 100%;">
|
|
<u-col :span="6" v-for="item in jailList" :key="item.id">
|
|
<view class="address-details-item" @click="viewDetails(item)">
|
|
<view class="add" @click.stop="selectAddr(item)">
|
|
<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M24 16V32" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 24L32 24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</view>
|
|
<view class="address-title">
|
|
<text>{{item.title}}</text>
|
|
|
|
</view>
|
|
<view class="address-text" style="padding-top: 20rpx;">
|
|
<text>{{item.address}}</text>
|
|
<view class="" @click.stop>
|
|
<Copy :text="getAddress(item)" successText="地址已复制" @click.stop></Copy>
|
|
</view>
|
|
</view>
|
|
<view class="phone" style="height: 40rpx; padding-top: 20rpx;">
|
|
<text>{{item.phone[0]}}</text>
|
|
<view class="" @click.stop>
|
|
<Copy :text="item.phone[0]" ></Copy>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<u-picker :show="show" ref="uPicker" @change="changeHandler" :columns="columns" @confirm="confirm"
|
|
@cancel="cancel"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getJailListApi
|
|
} from '@/request/yyf.js'
|
|
import AllAddress from './addresData.js'
|
|
import Copy from '@/components/Copy/Copy.vue';
|
|
export default {
|
|
components: {
|
|
Copy
|
|
},
|
|
data() {
|
|
return {
|
|
checkboxValue: [],
|
|
state: '',
|
|
value: [0, 0],
|
|
city: '',
|
|
type: '',
|
|
jailList: [],
|
|
show: false,
|
|
columns: [
|
|
['中国', '美国'],
|
|
['深圳', '厦门', '上海', '拉萨']
|
|
],
|
|
}
|
|
},
|
|
onLoad() {
|
|
let data = [AllAddress.map(item => item.name)]
|
|
data[1] = ['所有']
|
|
data[1].push(...AllAddress[0].city.map(item => item.name))
|
|
this.columns = data
|
|
this.getJailList()
|
|
console.log(data);
|
|
},
|
|
methods: {
|
|
addAddress() {
|
|
this.$Router.push('/pages/addAddr/addAddr');
|
|
},
|
|
async changeHandler(e) {
|
|
if (e.columnIndex) {
|
|
|
|
} else {
|
|
this.columns.splice(1, 1, AllAddress[e.index].city.map(item => item.name))
|
|
}
|
|
this.value.splice(e.columnIndex, 1, e.index)
|
|
this.getJailList()
|
|
|
|
},
|
|
editAddress() {
|
|
|
|
},
|
|
async getJailList() {
|
|
let queryData
|
|
if (this.value[1]) {
|
|
queryData = {
|
|
province: this.columns[1][this.value[1]]
|
|
}
|
|
} else {
|
|
queryData = {
|
|
province: this.columns[0][this.value[0]]
|
|
}
|
|
}
|
|
let {
|
|
data
|
|
} = await getJailListApi(queryData)
|
|
this.jailList = data.data.data
|
|
console.log(data.data.data);
|
|
},
|
|
showPicker() {
|
|
this.show = true;
|
|
},
|
|
confirm(e) {
|
|
this.show = false;
|
|
},
|
|
cancel() {
|
|
this.show = false;
|
|
},
|
|
getAddress({ address }) {
|
|
let res = '';
|
|
let addr1 = this.columns[0][this.value[0]];
|
|
let addr2 = this.columns[1][this.value[1]];
|
|
|
|
if(addr2 != '所有') {
|
|
res = addr1 + addr2 + address;
|
|
} else {
|
|
res = addr1 + address;
|
|
}
|
|
|
|
return res;
|
|
},
|
|
viewDetails({ id }) {
|
|
this.$Router.push({
|
|
path: '/pages/addrDetails/addrDetails',
|
|
query: {
|
|
id
|
|
}
|
|
})
|
|
},
|
|
selectAddr({ address }) {
|
|
console.log(address);
|
|
let res = '';
|
|
let addr1 = this.columns[0][this.value[0]];
|
|
let addr2 = this.columns[1][this.value[1]];
|
|
|
|
if(addr2 != '所有') {
|
|
res = addr1 + addr2 + address;
|
|
} else {
|
|
res = addr1 + address;
|
|
}
|
|
|
|
uni.$emit('addAddress', res);
|
|
this.$Router.back();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.queryAddr {
|
|
box-sizing: border-box;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 30rpx 30rpx 40rpx;
|
|
|
|
.queryAddr-list {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
|
|
.v-card {
|
|
padding: 20rpx 40rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
|
|
|
.v-address-title {
|
|
padding: 10rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.v-select {
|
|
margin-left: 10rpx;
|
|
width: 234rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 14rpx 0;
|
|
background: #FFEFE7;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
text {
|
|
padding-right: 40rpx;
|
|
font-family: OPPOSans-Medium, OPPOSans;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.address-details {
|
|
|
|
.address-details-item {
|
|
position: relative;
|
|
margin-top: 20rpx;
|
|
box-sizing: border-box;
|
|
// width: 335rpx;
|
|
padding: 31rpx 40rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
|
|
|
.address-title {
|
|
padding-bottom: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.address-text {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 13rpx 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 24rpx;
|
|
font-family: OPPOSans-Medium, OPPOSans;
|
|
font-weight: 500;
|
|
color: #ababab;
|
|
line-height: 28rpx;
|
|
|
|
}
|
|
|
|
.phone {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.add {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |