purchase-let/components/addressPopup.vue

137 lines
3.2 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">
<view>常用地址</view>
<view class="admin-btn">
<view class="btn" @click="navTo('/pagesOrder/addressList/addressList')"><up-icon name="edit-pen" color="#20B128"></up-icon></view>
<view class="btn" @click="navTo('/pagesOrder/addressEdit/addressEdit')"><up-icon name="plus" color="#20B128"></up-icon></view>
</view>
</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.real_name}}</view>
<view class="phone">{{item.phone}}</view>
<u-tag v-if="item.is_default" style="pointer-events: none;" text="默认" type="success" plain size="mini"></u-tag>
</view>
<view class="bottom u-line-2">{{item.detail}}</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']);
const close = () => {
emit('close');
}
const submitAddress = () => {
emit('change', props.list[addressType.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>