96 lines
2.0 KiB
Vue
96 lines
2.0 KiB
Vue
<template>
|
||
<view class="store-card">
|
||
<image class="store-photo" :src="store.photo" mode="aspectFill"></image>
|
||
<view class="store-info">
|
||
<view class="store-name">{{ store.name }}</view>
|
||
<view class="store-meta">
|
||
<text class="store-type">{{ store.type === 'human' ? '人工洗车店' : '无人洗车店' }}</text>
|
||
</view>
|
||
<view class="store-address">{{ store.address }}</view>
|
||
<view class="store-phone">联系方式：{{ store.phone }}</view>
|
||
<view class="store-coupon-count">可用优惠券：{{ store.couponCount || 0 }} 张</view>
|
||
</view>
|
||
<view class="store-actions">
|
||
<button class="btn btn-coupon" size="mini" @click="$emit('viewCoupons', store)">查看优惠券</button>
|
||
<button class="btn btn-nav" size="mini" @click="$emit('navigate', store)">导航</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'StoreCard',
|
||
props: {
|
||
store: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
},
|
||
emits: ['viewCoupons', 'navigate']
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.store-card {
|
||
display: flex;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
.store-photo {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 12rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.store-info {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
}
|
||
.store-name {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
.store-meta {
|
||
margin-bottom: 6rpx;
|
||
}
|
||
.store-type {
|
||
font-size: 22rpx;
|
||
color: #007aff;
|
||
background: rgba(0, 122, 255, 0.1);
|
||
padding: 2rpx 12rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
.store-address,
|
||
.store-phone,
|
||
.store-coupon-count {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
.store-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
margin-left: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.btn {
|
||
border-radius: 8rpx;
|
||
font-size: 22rpx;
|
||
}
|
||
.btn-coupon {
|
||
background: #007aff;
|
||
color: #fff;
|
||
}
|
||
.btn-nav {
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
}
|
||
</style>
|