初始化
This commit is contained in:
1297
pages/queryAddr/addresData.js
Normal file
1297
pages/queryAddr/addresData.js
Normal file
File diff suppressed because it is too large
Load Diff
270
pages/queryAddr/queryAddr.vue
Normal file
270
pages/queryAddr/queryAddr.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user