137 lines
3.1 KiB
Vue
137 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<up-popup :show="show" closeable round="10" @close="close">
|
||
|
|
<view class="address-popup">
|
||
|
|
<view class="head-title">选择提货点</view>
|
||
|
|
<view class="list-admin">
|
||
|
|
<up-search placeholder="请输入提货点名称" @search="searchKeyword" v-model="keyword" @custom="searchKeyword"></up-search>
|
||
|
|
</view>
|
||
|
|
<scroll-view style="height: 600rpx;padding-bottom: 20rpx;" scroll-y>
|
||
|
|
<view class="row" v-for="(item,index) in list" :key="index" @click="addressType=index">
|
||
|
|
<view class="content">
|
||
|
|
<view class="top">
|
||
|
|
<view class="name">{{item.mer_name}}</view>
|
||
|
|
<u-tag v-if="item.distance" style="pointer-events: none;" :text="item.distance" type="success" plain size="mini"></u-tag>
|
||
|
|
</view>
|
||
|
|
<view class="bottom u-line-2">{{item.service_phone}}</view>
|
||
|
|
</view>
|
||
|
|
<image v-if="addressType==index" src="@/static/icon/check.png"></image>
|
||
|
|
<image v-else src="@/static/icon/n-check.png"></image>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
<up-button color="#20B128" shape="circle" @click="submitAddress">确认提货点</up-button>
|
||
|
|
</view>
|
||
|
|
</up-popup>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from "vue"
|
||
|
|
|
||
|
|
const addressType = ref(-1)
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
show: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
list: {
|
||
|
|
type: Array,
|
||
|
|
default: ()=>[]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['close', 'change', 'search']);
|
||
|
|
const close = () => {
|
||
|
|
emit('close');
|
||
|
|
}
|
||
|
|
|
||
|
|
const submitAddress = () => {
|
||
|
|
emit('change', props.list[addressType.value]);
|
||
|
|
}
|
||
|
|
|
||
|
|
const keyword = ref('')
|
||
|
|
const searchKeyword = ()=>{
|
||
|
|
emit('search', keyword.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
const navTo = (url)=>{
|
||
|
|
uni.navigateTo({
|
||
|
|
url: url
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.address-popup {
|
||
|
|
padding: 30rpx;
|
||
|
|
|
||
|
|
.head-title {
|
||
|
|
font-weight: bold;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-admin {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
|
||
|
|
.admin-btn {
|
||
|
|
display: flex;
|
||
|
|
color: #20B128;
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
margin-left: 20rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
color: rgba(#20B128, 0.8);
|
||
|
|
transition: background-color 0.5s;
|
||
|
|
animation: disappear 0.5s 0.5s forwards;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding-bottom: 20rpx;
|
||
|
|
border-bottom: 1rpx solid #f6f6f6;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
.top {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
view {
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom {}
|
||
|
|
}
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes disappear {
|
||
|
|
to {
|
||
|
|
opacity: 0;
|
||
|
|
/* 渐隐 */
|
||
|
|
transform: scale(0);
|
||
|
|
/* 缩小 */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|