purchase-let/components/shopListPopup.vue

212 lines
4.4 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="list-li border" v-for="(item,index) in list" :key="index" @click="addressType=item.mer_id">
<view class="list-li-top">
<view class="">
<text>{{item.mer_name}}</text>
<text v-if="index==0&&item.distance"
style="background-color: #38BE41;color: white;font-size: 18rpx;margin-left: 24rpx;padding: 0 5rpx;">距离最近</text>
<text v-if="item.distance" class="distance">步行{{item.distance}}</text>
</view>
</view>
<view class="">
{{item.mer_address||''}}
</view>
<view style="color: #999;">
<text v-if="item.service_phone"
@click.stop="onCall(item.service_phone)">{{item.mer_real_name||''}}
{{ item.service_phone||'' }}</text>
</view>
<view class="check">
<image style="width: 36rpx;height: 36rpx" v-if="addressType==item.mer_id"
src="@/static/icon/check.png">
</image>
<image style="width: 36rpx;height: 36rpx" v-else src="@/static/icon/n-check.png"></image>
</view>
</view>
</scroll-view>
<up-button color="#20B128" shape="circle" @click="submitAddress">确认提货点 </up-button>
</view>
<!-- <modal title="是否要拨打电话" :content="`即将拨打电话${phone}`" cancleText="取消" confirmText="拨打" :show="callShow" @close="callShow = false"
@change="onCall" /> -->
</up-popup>
</template>
<script setup>
import {
ref
} from "vue";
import modal from "@/components/modal.vue";
const addressType = ref(-1)
// const callShow = ref(false)
// const phone = ref('');
// const mer_real_name = (e) => {
// callShow.value = true;
// phone.value = e;
// }
const onCall = (e) => {
uni.makePhoneCall({
phoneNumber: e,
success() {
callShow.value = false
}
})
}
const props = defineProps({
show: {
type: Boolean,
default: false
},
list: {
type: Array,
default: () => []
},
})
const emit = defineEmits(['close', 'change', 'search']);
const close = () => {
emit('close');
}
const submitAddress = () => {
let e = props.list.find(item => item.mer_id == addressType.value);
if (addressType.value <= 0 || !e) return uni.$u.toast('请选择提货点');
emit('change', e);
}
const keyword = ref('')
const searchKeyword = () => {
emit('search', keyword.value);
}
const navTo = (url) => {
uni.navigateTo({
url: url
})
}
const setCheck = (e) => {
addressType.value = e;
}
defineExpose({
setCheck
})
</script>
<style scoped lang="scss">
.address-popup {
padding: 30rpx;
.head-title {
font-weight: bold;
text-align: center;
margin-bottom: 20rpx;
padding: 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;
}
}
}
.border {
border-bottom: 1px solid #F3F3F3;
}
.list-li {
padding: 30rpx 0;
font-size: 24rpx;
position: relative;
.list-li-top {
display: flex;
justify-content: space-between;
margin-bottom: 10rpx;
font-size: 30rpx;
}
.distance {
border: 1px solid #40AE36;
font-size: 18rpx;
color: #40AE36;
margin-left: 20rpx;
padding: 0 5rpx;
}
.check {
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
}
}
@keyframes disappear {
to {
opacity: 0;
/* 渐隐 */
transform: scale(0);
/* 缩小 */
}
}
</style>