You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
2.5 KiB
123 lines
2.5 KiB
<template>
|
|
<view>
|
|
<template v-if="data">
|
|
<view class="flex user">
|
|
<view>{{ data.name }}</view>
|
|
<view class="flex">
|
|
<text>{{ data.phone }}</text>
|
|
<button v-if="enableCopy" class="btn btn-copy" @click="$utils.copyText(data.phone)">复制</button>
|
|
</view>
|
|
<view class="tag" v-if="data.default">默认</view>
|
|
</view>
|
|
<view class="flex address">
|
|
<image v-if="showIcon" class="icon" src="@/pages_order/static/address/icon-address.png" mode="scaleToFill"></image>
|
|
<view>
|
|
<text class="text">{{ displayAddress }}</text>
|
|
<button v-if="enableCopy" class="btn btn-copy" @click="$utils.copyText(displayAddress)">复制</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view>请选择地址</view>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return null
|
|
}
|
|
},
|
|
showIcon: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
enableCopy: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
displayAddress() {
|
|
if (!this.data) {
|
|
return ''
|
|
}
|
|
const { area, address } = this.data
|
|
|
|
return `${area.join('')}${address}`
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.btn {
|
|
&-copy {
|
|
display: inline-flex;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 1.4;
|
|
color: #7451DE;
|
|
}
|
|
}
|
|
|
|
.user {
|
|
justify-content: flex-start;
|
|
column-gap: 24rpx;
|
|
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
line-height: 1.4;
|
|
color: #181818;
|
|
|
|
.tag {
|
|
padding: 2rpx 14rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
color: #7451DE;
|
|
background: #EFEAFF;
|
|
border: 2rpx solid #7451DE;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.btn-copy {
|
|
margin-left: 24rpx;
|
|
}
|
|
}
|
|
|
|
.address {
|
|
margin-top: 16rpx;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 1.4;
|
|
color: #9B9B9B;
|
|
|
|
.icon {
|
|
flex: none;
|
|
margin: 3px 8rpx 0 0;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.text {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.btn-copy {
|
|
vertical-align: text-bottom;
|
|
}
|
|
}
|
|
|
|
</style>
|