leiking
97 lines
2.0 KiB
Vue
97 lines
2.0 KiB
Vue
<template>
|
||
<view class="card item">
|
||
<image v-if="project.cover" class="cover" :src="project.cover" mode="aspectFill" @tap="open" />
|
||
<view class="row between">
|
||
<view class="name" @tap="open">{{ project.name }}</view>
|
||
<view class="price">
|
||
<text class="yen">¥</text>
|
||
<text class="num">{{ project.price }}</text>
|
||
<text class="ori muted" v-if="project.originPrice">¥{{ project.originPrice }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="muted meta">服务时长：{{ project.durationMin }} 分钟</view>
|
||
<view class="muted meta">适合人群：{{ project.fitFor }}</view>
|
||
<view class="muted meta">简介：{{ project.desc }}</view>
|
||
<view class="muted meta">禁忌提醒：{{ project.taboo }}</view>
|
||
<view class="row between ops">
|
||
<view class="btn btn-ghost a" @tap="book">立即预约</view>
|
||
<view class="btn btn-primary b" @tap="buy">立即购买</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'ProjectCard',
|
||
props: {
|
||
project: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
},
|
||
methods: {
|
||
open() {
|
||
uni.navigateTo({ url: `/pages/projects/detail?id=${this.project.id}` })
|
||
},
|
||
book() {
|
||
this.open()
|
||
},
|
||
buy() {
|
||
uni.navigateTo({ url: `/pages/order/confirm?type=coupon&projectId=${this.project.id}` })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.item {
|
||
padding: 22rpx;
|
||
}
|
||
.cover {
|
||
width: 100%;
|
||
height: 260rpx;
|
||
border-radius: 18rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.name {
|
||
font-weight: 950;
|
||
font-size: 34rpx;
|
||
max-width: 520rpx;
|
||
}
|
||
.price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
color: #111827;
|
||
}
|
||
.yen {
|
||
font-size: 24rpx;
|
||
opacity: 0.8;
|
||
}
|
||
.num {
|
||
font-size: 40rpx;
|
||
font-weight: 950;
|
||
}
|
||
.ori {
|
||
margin-left: 10rpx;
|
||
font-size: 24rpx;
|
||
text-decoration: line-through;
|
||
}
|
||
.meta {
|
||
margin-top: 10rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
.ops {
|
||
margin-top: 18rpx;
|
||
gap: 16rpx;
|
||
}
|
||
.a {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
}
|
||
.b {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
}
|
||
</style>
|
||
|