94 lines
1.9 KiB
Vue
94 lines
1.9 KiB
Vue
<template>
|
|
<view class='card-view' @click.stop='emits("onChecked",item)'>
|
|
<view class='c-flex-row'>
|
|
<text class='status' v-if='item?.defaultstatus==1'>默认</text>
|
|
<text>
|
|
{{ item?.name }}
|
|
</text>
|
|
<text>
|
|
{{ item?.mobile }}
|
|
</text>
|
|
</view>
|
|
<text class='address'>
|
|
{{ item?.addr }}
|
|
</text>
|
|
|
|
<view class='btn-view c-flex-row'>
|
|
<text @click.stop='emits("onEdit",item)'>编辑</text>
|
|
<text @click.stop='emits("onDelete",item)'>删除</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang='ts' setup>
|
|
|
|
import { PropType } from 'vue';
|
|
|
|
defineProps({
|
|
item: Object as PropType<{ name: string, mobile: string, addr: string, defaultstatus: number }>
|
|
});
|
|
const emits = defineEmits(['onEdit', 'onDelete', 'onChecked']);
|
|
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.card-view {
|
|
margin: 20rpx 30rpx;
|
|
padding: 38rpx 30rpx 30rpx 34rpx;
|
|
|
|
view:nth-of-type(1) {
|
|
.status {
|
|
border-radius: 5rpx;
|
|
border: 1rpx solid #F32B2B;
|
|
color: #F32B2B;
|
|
font-size: 24prx;
|
|
padding: 1rpx 8rpx;
|
|
}
|
|
|
|
text:nth-of-type(2) {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-left: 10rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
text:nth-of-type(3) {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-left: 20rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.address {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
margin-top: 10rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.btn-view {
|
|
display: flex;
|
|
align-self: flex-end;
|
|
align-items: center;
|
|
|
|
text:nth-of-type(n+1) {
|
|
display: flex;
|
|
width: 84rpx;
|
|
height: 48rpx;
|
|
border-radius: 24rpx;
|
|
border: 1rpx solid #F32B2B;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #F32B2B;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
text:nth-of-type(2) {
|
|
border: 1rpx solid #DDDDDD;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
</style>
|