177 lines
3.6 KiB
Vue
177 lines
3.6 KiB
Vue
<template>
|
||
<view class="store-card">
|
||
<!-- 左侧图片+导航 -->
|
||
<view class="store-left">
|
||
<image class="store-photo" :src="store.photo || '/static/logo.png'" mode="aspectFill"></image>
|
||
<view class="nav-btn" @click.stop="$emit('navigate', store)">
|
||
<image class="nav-icon" src="/static/ic_navigation.png" mode="aspectFit"></image>
|
||
<text class="nav-text">导航</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 右侧信息 -->
|
||
<view class="store-right">
|
||
<view class="store-header">
|
||
<text class="store-name">{{ store.name }}</text>
|
||
<text class="store-type">
|
||
{{ store.type === 'human' ? '人工洗车' : '自助洗车' }}
|
||
</text>
|
||
</view>
|
||
<view class="store-row">
|
||
<image class="row-icon" src="/static/ic_pitch.png" mode="aspectFit"></image>
|
||
<text class="row-text">{{ store.address }}</text>
|
||
</view>
|
||
<view class="store-row">
|
||
<image class="row-icon" src="/static/ic_phone.png" mode="aspectFit"></image>
|
||
<text class="row-text">联系方式：{{ store.phone }}</text>
|
||
</view>
|
||
<view class="store-row coupon-row">
|
||
<image class="row-icon" src="/static/ic_coupon.png" mode="aspectFit"></image>
|
||
<text class="row-text">可用优惠券：{{ store.availableCouponCount || 0 }} 张</text>
|
||
<view class="coupon-link" @click.stop="$emit('viewCoupons', store)">
|
||
<text class="coupon-link-text">点击查看</text>
|
||
<text class="coupon-link-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
</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: 24rpx;
|
||
padding: 28rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
/* 左侧 */
|
||
.store-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-right: 24rpx;
|
||
flex-shrink: 0;
|
||
background: #F5F5F5;
|
||
border-radius: 20rpx;
|
||
border: 2rpx solid #E8E8E8;
|
||
overflow: hidden;
|
||
}
|
||
.store-photo {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
}
|
||
.nav-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
width: 180rpx;
|
||
height: 64rpx;
|
||
background: #fff;
|
||
}
|
||
.nav-btn:active {
|
||
opacity: 0.7;
|
||
}
|
||
.nav-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
.nav-text {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 右侧 */
|
||
.store-right {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.store-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.store-name {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #222;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
flex: 1;
|
||
margin-right: 12rpx;
|
||
}
|
||
.store-type {
|
||
font-size: 22rpx;
|
||
color: #E8A735;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 信息行 */
|
||
.store-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 10rpx;
|
||
line-height: 1.5;
|
||
}
|
||
.row-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 8rpx;
|
||
margin-top: 4rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.row-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
flex: 1;
|
||
}
|
||
|
||
/* 优惠券行 */
|
||
.coupon-row {
|
||
align-items: center;
|
||
margin-bottom: 0;
|
||
}
|
||
.coupon-link {
|
||
display: flex;
|
||
align-items: center;
|
||
background: linear-gradient(135deg, #FFB800, #FF9500);
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 24rpx;
|
||
margin-left: 12rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.coupon-link:active {
|
||
opacity: 0.8;
|
||
}
|
||
.coupon-link-text {
|
||
font-size: 22rpx;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
.coupon-link-arrow {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
margin-left: 4rpx;
|
||
}
|
||
</style>
|