368 lines
6.9 KiB
Vue
368 lines
6.9 KiB
Vue
<template>
|
||
<view class="supply-detail-wrapper">
|
||
<view v-if="show" class="supply-detail-container" style="margin-top: var(--status-bar-height);">
|
||
<!-- 头部 -->
|
||
<view class="header">
|
||
<view class="back-icon" @tap="closePage">
|
||
<u-icon name="arrow-left" color="#333" size="26"></u-icon>
|
||
</view>
|
||
<view class="title">{{packageData.name}}</view>
|
||
<view class="close-icon" @tap="closePage">
|
||
<u-icon name="close" color="#333" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 套餐价格信息 -->
|
||
<view class="price-card">
|
||
<view class="price-title">套餐价格</view>
|
||
<view class="price-info">
|
||
<view class="current-price">
|
||
<text class="price-symbol">¥</text>
|
||
<text class="price-value">{{packageData.price}}</text>
|
||
</view>
|
||
<view class="original-price" v-if="packageData.originalPrice !== packageData.price">¥{{packageData.originalPrice}}</view>
|
||
</view>
|
||
<view class="advance-info" v-if="packageData.advancePayment">
|
||
预付款: ¥{{packageData.advancePayment}}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 套餐内容 -->
|
||
<view class="service-section">
|
||
<view class="section-title">套餐内容</view>
|
||
<view class="service-count">共{{packageData.services ? packageData.services.length : 0}}服务</view>
|
||
|
||
<!-- 服务列表 -->
|
||
<view class="service-list">
|
||
<view
|
||
v-for="(service, index) in packageData.services"
|
||
:key="index"
|
||
class="service-item"
|
||
>
|
||
<view class="service-left">
|
||
<view class="service-icon">
|
||
<u-icon name="heart" color="#FF6600" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="service-right">
|
||
<view class="service-name">{{service.name}}</view>
|
||
<view class="service-price">
|
||
<text class="price-symbol">¥</text>
|
||
<text class="service-price-value">{{service.price}}</text>
|
||
<text class="service-original-price" v-if="service.originalPrice">¥{{service.originalPrice}}</text>
|
||
</view>
|
||
<view class="service-duration">{{service.duration}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 购买按钮 -->
|
||
<view class="buy-button-container">
|
||
<button class="buy-button" @tap="handleBuy">立即购买</button>
|
||
</view>
|
||
|
||
<!-- 购买说明 -->
|
||
<view class="buy-notice">
|
||
<text class="notice-text">订单将由操作人处理，详情请联系客服</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'SupplyItemDetail',
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
packageData: {
|
||
type: Object,
|
||
default: () => ({
|
||
id: 1,
|
||
name: '基础套餐',
|
||
price: '2980',
|
||
originalPrice: '3725',
|
||
advancePayment: '745',
|
||
discount: '8折',
|
||
services: [
|
||
{
|
||
name: '头部护理SPA',
|
||
price: '598',
|
||
originalPrice: '718',
|
||
duration: '60分钟',
|
||
image: '/static/spa1.png'
|
||
},
|
||
{
|
||
name: '臂油SPA',
|
||
price: '618',
|
||
originalPrice: '838',
|
||
duration: '90分钟',
|
||
image: '/static/spa2.png'
|
||
},
|
||
{
|
||
name: '法/LAWF型颜度护理',
|
||
price: '1580',
|
||
originalPrice: '1896',
|
||
duration: '120分钟',
|
||
image: '/static/spa3.png'
|
||
}
|
||
]
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
closePage() {
|
||
this.$emit('close');
|
||
},
|
||
handleBuy() {
|
||
uni.showLoading({
|
||
title: '处理中...'
|
||
});
|
||
|
||
// 模拟购买流程
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '购买成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
// 延迟关闭页面
|
||
setTimeout(() => {
|
||
this.closePage();
|
||
}, 1500);
|
||
}, 2000);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.supply-detail-container {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #f5f7fa;
|
||
z-index: 10000;
|
||
overflow-y: auto;
|
||
transform-origin: right;
|
||
animation: slideInFromRight 0.3s ease;
|
||
}
|
||
|
||
@keyframes slideInFromRight {
|
||
from {
|
||
transform: translateX(100%);
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 15px;
|
||
background-color: #fff;
|
||
border-bottom: 1px solid #eee;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.back-icon {
|
||
width: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.title {
|
||
font-size: 17px;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.close-icon {
|
||
width: 60px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.price-card {
|
||
margin: 15px;
|
||
padding: 15px;
|
||
background-color: #FFFBE6;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.price-title {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.price-info {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.current-price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.price-symbol {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #FF6600;
|
||
}
|
||
|
||
.price-value {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #FF6600;
|
||
}
|
||
|
||
.original-price {
|
||
margin-left: 10px;
|
||
font-size: 16px;
|
||
color: #999;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.advance-info {
|
||
margin-top: 8px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.service-section {
|
||
margin: 15px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.section-title {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.service-count {
|
||
position: absolute;
|
||
right: 30px;
|
||
top: 15px;
|
||
font-size: 12px;
|
||
color: #666;
|
||
background-color: #f5f5f5;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.service-list {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.service-item {
|
||
display: flex;
|
||
padding: 15px 0;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.service-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.service-left {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
margin-right: 15px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.service-icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.service-right {
|
||
flex: 1;
|
||
}
|
||
|
||
.service-name {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.service-price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.service-price-value {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #FF6600;
|
||
}
|
||
|
||
.service-original-price {
|
||
font-size: 14px;
|
||
color: #999;
|
||
text-decoration: line-through;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.service-duration {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.buy-button-container {
|
||
margin: 20px 15px;
|
||
}
|
||
|
||
.buy-button {
|
||
width: 100%;
|
||
height: 45px;
|
||
line-height: 45px;
|
||
text-align: center;
|
||
background-color: #FFBE00;
|
||
color: #ffffff;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
border-radius: 25px;
|
||
border: none;
|
||
}
|
||
|
||
.buy-notice {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.notice-text {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.supply-detail-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style> |