103 lines
2.0 KiB
Vue
103 lines
2.0 KiB
Vue
<template>
|
||
<view
|
||
:class="['address-card', {'address-card--empty': !hasContent}]"
|
||
:style="{'border-radius': borderRadius, 'background-color': backgroundColor}"
|
||
>
|
||
<!-- Sign -->
|
||
<u-icon name="map" size="48" />
|
||
|
||
<!-- Content -->
|
||
<view class="content">
|
||
<!-- 地址信息 -->
|
||
<view v-if="hasContent">
|
||
<view class="bold">
|
||
<slot name="header"></slot>
|
||
</view>
|
||
<view class="m-t-10 lighter">
|
||
<slot name="main"></slot>
|
||
</view>
|
||
<view class="m-t-10 xs muted">
|
||
<slot name="footer"></slot>
|
||
</view>
|
||
</view>
|
||
<!-- 不存在地址 -->
|
||
<view v-else>{{ placeholder }}</view>
|
||
</view>
|
||
|
||
<!-- Action Sign -->
|
||
<u-icon v-if="action" name="arrow-right" size="30" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
/**
|
||
* @description 地址卡片
|
||
* @property {Boolean} name 名称
|
||
* @property {Boolean} action suffix图标 (默认值：true)
|
||
* @property {Boolean} hasContent 是否存在内容 (默认值：false)
|
||
* @property {String} placeholder 提示文字 (默认值：设置收货地址)
|
||
* @property {String} borderRadius 圆角
|
||
* @property {String} backgroundColor 背景色 (默认值：#FFFFFF)
|
||
* @example <address-card :has-content="isEmpty" :action="true" />
|
||
*/
|
||
export default {
|
||
name: 'AddressCard',
|
||
|
||
props: {
|
||
// suffix图标
|
||
action: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
|
||
// 是否存在内容
|
||
hasContent: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
|
||
// 提示文字
|
||
placeholder: {
|
||
type: String,
|
||
default: '设置收货地址'
|
||
},
|
||
|
||
// 圆角
|
||
borderRadius: {
|
||
type: String,
|
||
default: 'unset',
|
||
},
|
||
|
||
// 背景色
|
||
backgroundColor: {
|
||
type: String,
|
||
default: '#FFFFFF'
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.address-card {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
min-height: 164rpx;
|
||
padding: 20rpx;
|
||
|
||
&--empty {
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 0 20rpx;
|
||
font-size: $-font-size-md;
|
||
}
|
||
</style>
|