907 lines
23 KiB
Vue
907 lines
23 KiB
Vue
<template>
|
||
<view class="container safe-area-inset-bottom">
|
||
<MessageNotification />
|
||
|
||
<view v-if="loading" class="loading-wrap">
|
||
<u-loading mode="circle" size="48" color="#4175EE"></u-loading>
|
||
</view>
|
||
|
||
<block v-else-if="detail.id">
|
||
<!-- STREAMING_CHUNK:渲染顶部轮播图 -->
|
||
<view class="swiper-section">
|
||
<swiper
|
||
class="swiper"
|
||
indicator-dots
|
||
autoplay
|
||
circular
|
||
indicator-color="rgba(255,255,255,0.6)"
|
||
indicator-active-color="#ffffff"
|
||
>
|
||
<swiper-item v-for="(img, index) in displayImages" :key="index">
|
||
<image
|
||
class="swiper-image"
|
||
:src="img"
|
||
mode="aspectFill"
|
||
@click="previewImage(index)"
|
||
/>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- STREAMING_CHUNK:渲染上浮卡片式基本信息 -->
|
||
<view class="info-container-price">
|
||
<view class="basic-info">
|
||
<!-- 价格区：渐变背景装饰 -->
|
||
<view class="price-panel">
|
||
<view class="price-bg-decor"></view>
|
||
<view class="price-content">
|
||
<view class="price-left" v-if="detail.price_available !== false">
|
||
<text class="symbol">¥</text>
|
||
<text class="amount">{{ detail.price_per_dose }}</text>
|
||
<text class="unit">/贴</text>
|
||
</view>
|
||
<view class="price-left price-left--unavailable" v-else>
|
||
<text class="amount">暂无报价</text>
|
||
</view>
|
||
<view class="sales-box" v-if="detail.sales_count">
|
||
<u-icon name="shopping-cart" size="24" color="#FF8D1A"></u-icon>
|
||
<text class="sales-text">已售 {{ detail.sales_count }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 标题与标签区 -->
|
||
<view class="title-panel">
|
||
<view class="title">
|
||
<text class="title-text">{{ detail.name }}</text>
|
||
</view>
|
||
|
||
<view class="tag-row" v-if="detail.tags && detail.tags.length">
|
||
<view class="tag-item" v-for="(tag, idx) in detail.tags" :key="idx">
|
||
<text class="tag-text">{{ tag }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-container">
|
||
|
||
<!-- STREAMING_CHUNK:渲染图文介绍 -->
|
||
<view class="intro-section" v-if="detail.intro_text || (detail.introduction_images && detail.introduction_images.length)">
|
||
<view class="section-title">
|
||
<view class="title-decor-line"></view>
|
||
<text class="title-text">详情介绍</text>
|
||
</view>
|
||
<view class="intro-text" v-if="detail.intro_text">
|
||
<u-parse :html="detail.intro_text"></u-parse>
|
||
</view>
|
||
<view class="intro-images" v-if="detail.introduction_images && detail.introduction_images.length">
|
||
<image
|
||
v-for="(img, idx) in detail.introduction_images"
|
||
:key="idx"
|
||
:src="img"
|
||
mode="widthFix"
|
||
class="intro-img"
|
||
@click="previewIntroImage(idx)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- STREAMING_CHUNK:渲染适度抬高的悬浮操作按钮 -->
|
||
<view class="footer-spacer"></view>
|
||
<view class="floating-action-bar safe-area-inset-bottom">
|
||
<button
|
||
class="register-btn-float"
|
||
:class="{ 'register-btn-float--disabled': detail.price_available === false }"
|
||
:disabled="detail.price_available === false"
|
||
@click="goRegister"
|
||
>
|
||
<text>去挂号选方</text>
|
||
</button>
|
||
</view>
|
||
</block>
|
||
|
||
<view v-else class="empty-wrap">
|
||
<u-empty text="特色方不存在或已下架" mode="page" margin-top="120"></u-empty>
|
||
</view>
|
||
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<page-container :v-if="registerDrawerShow" :overlay="false" @leave="onPageBackGuardLeave" />
|
||
<!-- #endif -->
|
||
|
||
<!-- STREAMING_CHUNK:渲染包含自定义项的SKU抽屉 -->
|
||
<u-popup
|
||
v-model="registerDrawerShow"
|
||
mode="bottom"
|
||
border-radius="32"
|
||
safe-area-inset-bottom
|
||
closeable
|
||
close-icon-color="#999"
|
||
@close="onRegisterDrawerClose"
|
||
>
|
||
<view class="register-drawer">
|
||
<view class="drawer-header">
|
||
<image class="header-img" :src="displayImages[0]" mode="aspectFill"></image>
|
||
<view class="header-info">
|
||
<view class="header-price">
|
||
<text class="symbol">¥</text>
|
||
<text class="amount">{{ unitPrice }}</text>
|
||
<text class="unit">/贴</text>
|
||
</view>
|
||
<text class="header-stock">
|
||
已选：{{ selectedSkuId === 0 ? '自定义贴数' : (selectedSku ? selectedSku.sku_name : '') }} {{ doseCount }}贴
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="drawer-scroll-area">
|
||
<view class="drawer-section">
|
||
<text class="section-label">规格选择</text>
|
||
<view class="sku-list">
|
||
<!-- STREAMING_CHUNK:自定义贴数 SKU 胶囊 (带动态价格) -->
|
||
<view
|
||
class="sku-item"
|
||
:class="{ 'sku-item--active': Number(selectedSkuId) === 0 }"
|
||
@tap="selectCustomSku"
|
||
>
|
||
<text class="sku-name">自定义贴数</text>
|
||
<text class="sku-price" v-if="detail.price_available !== false && customSkuDisplayPrice > 0">
|
||
¥{{ customSkuDisplayPrice }}
|
||
</text>
|
||
|
||
<view class="active-triangle" v-if="Number(selectedSkuId) === 0">
|
||
<u-icon name="checkbox-mark" size="16" color="#fff" class="triangle-icon"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 真实的 SKU 列表 -->
|
||
<view
|
||
v-for="sku in detail.skus"
|
||
:key="sku.id"
|
||
class="sku-item"
|
||
:class="{ 'sku-item--active': Number(selectedSkuId) === Number(sku.id) }"
|
||
@tap="selectSku(sku)"
|
||
>
|
||
<text class="sku-name">{{ sku.sku_name }}</text>
|
||
<text class="sku-price" v-if="sku.sale_price > 0">¥{{ sku.sale_price }}</text>
|
||
|
||
<view class="active-triangle" v-if="Number(selectedSkuId) === Number(sku.id)">
|
||
<u-icon name="checkbox-mark" size="16" color="#fff" class="triangle-icon"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 步进器部分 -->
|
||
<view class="drawer-section dose-section">
|
||
<text class="section-label">贴数</text>
|
||
<u-number-box
|
||
v-model="doseCount"
|
||
:min="1"
|
||
:max="99"
|
||
integer
|
||
:input-width="90"
|
||
:input-height="56"
|
||
bg-color="#F5F7FA"
|
||
@change="onDoseCountChange"
|
||
></u-number-box>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="drawer-footer">
|
||
<view class="total-info">
|
||
<text class="total-label">预估金额</text>
|
||
<view class="total-price-box">
|
||
<text class="total-symbol">¥</text>
|
||
<text class="total-price">{{ totalPrice }}</text>
|
||
</view>
|
||
</view>
|
||
<button class="confirm-btn" @click="confirmRegister">确认挂号</button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/* STREAMING_CHUNK:引入依赖文件 */
|
||
import {
|
||
getSpecialPrescriptionDetailApi,
|
||
saveSpecialPrescriptionRegisterContext,
|
||
} from '@/request/api/specialPrescription'
|
||
import { calculateSpecialPrescriptionEstimatedTotal } from '@/utils/formatPrice'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: '',
|
||
detail: {},
|
||
doseCount: 1,
|
||
selectedSkuId: 0,
|
||
loading: true,
|
||
registerDrawerShow: false,
|
||
defaultCover: 'https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/mine/avatar_1.png',
|
||
}
|
||
},
|
||
computed: {
|
||
/* STREAMING_CHUNK:计算属性 */
|
||
displayImages() {
|
||
const images = []
|
||
if (this.detail.cover_image) {
|
||
images.push(this.detail.cover_image)
|
||
}
|
||
if (this.detail.introduction_images && this.detail.introduction_images.length) {
|
||
this.detail.introduction_images.forEach((img) => {
|
||
if (img && images.indexOf(img) === -1) {
|
||
images.push(img)
|
||
}
|
||
})
|
||
}
|
||
return images.length ? images : [this.defaultCover]
|
||
},
|
||
hasSkus() {
|
||
return Array.isArray(this.detail.skus) && this.detail.skus.length > 0
|
||
},
|
||
selectedSku() {
|
||
if (!this.hasSkus || Number(this.selectedSkuId) === 0) return null
|
||
return this.detail.skus.find((item) => Number(item.id) === Number(this.selectedSkuId)) || null
|
||
},
|
||
unitPrice() {
|
||
return parseFloat(this.detail.price_per_dose || 0).toFixed(2)
|
||
},
|
||
// 为自定义贴数单独提供展示价格
|
||
customSkuDisplayPrice() {
|
||
return parseFloat(this.detail.price_per_dose || 0).toFixed(2)
|
||
},
|
||
totalPrice() {
|
||
if (this.detail.price_available === false) {
|
||
return '0.00'
|
||
}
|
||
if (this.selectedSku && Number(this.selectedSku.sale_price) > 0) {
|
||
return parseFloat(this.selectedSku.sale_price || 0).toFixed(2)
|
||
}
|
||
return calculateSpecialPrescriptionEstimatedTotal(
|
||
this.detail.price_per_dose,
|
||
this.doseCount,
|
||
)
|
||
},
|
||
},
|
||
watch: {
|
||
/* STREAMING_CHUNK:监听器处理 */
|
||
doseCount(newVal) {
|
||
if (this._suppressDoseSkuClear) {
|
||
return
|
||
}
|
||
this.selectedSkuId = 0
|
||
},
|
||
},
|
||
onLoad(e) {
|
||
this.id = e.id || ''
|
||
if (this.id) {
|
||
this.fetchDetail()
|
||
} else {
|
||
this.loading = false
|
||
}
|
||
},
|
||
methods: {
|
||
/* STREAMING_CHUNK:核心方法与生命周期 */
|
||
getStoreId() {
|
||
return uni.getStorageSync('store_id') || '11001'
|
||
},
|
||
async fetchDetail() {
|
||
this.loading = true
|
||
try {
|
||
const res = await getSpecialPrescriptionDetailApi({
|
||
id: this.id,
|
||
store_id: this.getStoreId(),
|
||
})
|
||
if (res.data?.code === 0 || res.data?.code === '0') {
|
||
this.detail = res.data.result || {}
|
||
this.initSkuSelection()
|
||
} else {
|
||
this.$refs.uToast && this.$refs.uToast.show({
|
||
title: res.data?.message || '加载失败',
|
||
type: 'default',
|
||
icon: false,
|
||
})
|
||
}
|
||
} catch (e) {
|
||
console.error('fetchDetail', e)
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
initSkuSelection() {
|
||
const skus = this.detail.skus || []
|
||
if (skus.length > 0 && this.detail.default_sku_id) {
|
||
const defaultId = Number(this.detail.default_sku_id || 0)
|
||
const defaultSku = skus.find((item) => Number(item.is_default) === 1)
|
||
|| skus.find((item) => Number(item.id) === defaultId)
|
||
|
||
if (defaultSku) {
|
||
this._suppressDoseSkuClear = true
|
||
this.selectedSkuId = Number(defaultSku.id)
|
||
this.doseCount = defaultSku.dose_count || 1
|
||
this.$nextTick(() => {
|
||
this._suppressDoseSkuClear = false
|
||
})
|
||
return
|
||
}
|
||
}
|
||
|
||
this.selectedSkuId = 0
|
||
this.doseCount = 1
|
||
},
|
||
selectCustomSku() {
|
||
this.selectedSkuId = 0
|
||
},
|
||
selectSku(sku) {
|
||
this._suppressDoseSkuClear = true
|
||
if (Number(this.selectedSkuId) === Number(sku.id)) {
|
||
this.selectedSkuId = 0
|
||
} else {
|
||
this.selectedSkuId = Number(sku.id)
|
||
this.doseCount = sku.dose_count || 1
|
||
}
|
||
this.$nextTick(() => {
|
||
this._suppressDoseSkuClear = false
|
||
})
|
||
},
|
||
onDoseCountChange(e) {
|
||
if (this._suppressDoseSkuClear) return
|
||
this.selectedSkuId = 0
|
||
},
|
||
previewImage(index) {
|
||
uni.previewImage({
|
||
urls: this.displayImages,
|
||
current: this.displayImages[index],
|
||
})
|
||
},
|
||
previewIntroImage(index) {
|
||
const urls = this.detail.introduction_images || []
|
||
if (!urls.length) return
|
||
uni.previewImage({
|
||
urls,
|
||
current: urls[index],
|
||
})
|
||
},
|
||
goRegister() {
|
||
if (this.detail.price_available === false) {
|
||
this.$refs.uToast.show({
|
||
title: '当前诊所暂无法报价，请联系诊所',
|
||
type: 'default',
|
||
icon: false,
|
||
})
|
||
return
|
||
}
|
||
const doctorId = this.detail.doctor_id
|
||
if (!doctorId) {
|
||
this.$refs.uToast.show({
|
||
title: '诊所未配置特色方挂号医生',
|
||
type: 'default',
|
||
icon: false,
|
||
})
|
||
return
|
||
}
|
||
this.registerDrawerShow = true
|
||
},
|
||
closeRegisterDrawer() {
|
||
this.registerDrawerShow = false
|
||
},
|
||
onRegisterDrawerClose() {
|
||
this.registerDrawerShow = false
|
||
},
|
||
onPageBackGuardLeave() {
|
||
if (this._suppressPageBackGuardLeave) {
|
||
this._suppressPageBackGuardLeave = false
|
||
return
|
||
}
|
||
if (this.registerDrawerShow) {
|
||
this._suppressPageBackGuardLeave = true
|
||
this.registerDrawerShow = false
|
||
}
|
||
},
|
||
confirmRegister() {
|
||
const doctorId = this.detail.doctor_id
|
||
if (!doctorId) {
|
||
this.$refs.uToast.show({
|
||
title: '诊所未配置特色方挂号医生',
|
||
type: 'default',
|
||
icon: false,
|
||
})
|
||
return
|
||
}
|
||
|
||
const skuId = this.selectedSku
|
||
? Number(this.selectedSku.id)
|
||
: 0
|
||
|
||
const ctx = {
|
||
special_prescription_id: this.detail.id,
|
||
dose_count: this.doseCount,
|
||
sku_id: skuId,
|
||
doctor_id: doctorId,
|
||
}
|
||
saveSpecialPrescriptionRegisterContext(ctx)
|
||
|
||
this._suppressPageBackGuardLeave = true
|
||
this.registerDrawerShow = false
|
||
|
||
let url = `/subPackages/doctor/doctor-userinfo?id=${doctorId}&r_type=0&special_prescription_id=${ctx.special_prescription_id}&special_prescription_dose_count=${ctx.dose_count}`
|
||
if (ctx.sku_id) {
|
||
url += `&special_prescription_sku_id=${ctx.sku_id}`
|
||
}
|
||
uni.navigateTo({ url })
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* STREAMING_CHUNK:定义全局样式与主题变量 */
|
||
$sp-primary: #4175EE;
|
||
$sp-primary-light: #EBF1FF;
|
||
$sp-price: #FF4F23;
|
||
$sp-price-bg: linear-gradient(135deg, #FFF1EB 0%, #FFFAFA 100%);
|
||
$sp-text-main: #222222;
|
||
$sp-text-sub: #666666;
|
||
$sp-text-muted: #999999;
|
||
$sp-bg: #F4F5F7;
|
||
$sp-gradient-btn: linear-gradient(90deg, #5C8CFF 0%, #3567E8 100%);
|
||
|
||
view, text, scroll-view {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.container {
|
||
min-height: 100vh;
|
||
background: $sp-bg;
|
||
/* 调整底部留白，适应稍微降低的悬浮按钮 */
|
||
padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
|
||
//padding-bottom: 50rpx;
|
||
}
|
||
|
||
.loading-wrap,
|
||
.empty-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 70vh;
|
||
}
|
||
|
||
/* 轮播图样式 */
|
||
.swiper-section {
|
||
.swiper {
|
||
height: 750rpx;
|
||
width: 100%;
|
||
background-color: #f8f8f8;
|
||
}
|
||
.swiper-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
/* 详情页面装饰增强 */
|
||
.info-container-price {
|
||
position: relative;
|
||
margin-top: -32rpx;
|
||
z-index: 10;
|
||
padding: 0 24rpx;
|
||
}
|
||
/* 详情页面装饰增强 */
|
||
.info-container {
|
||
position: relative;
|
||
margin-top: -32rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
.basic-info {
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||
margin-bottom: 24rpx;
|
||
|
||
.price-panel {
|
||
position: relative;
|
||
padding: 32rpx 24rpx;
|
||
background: $sp-price-bg;
|
||
|
||
.price-bg-decor {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 200rpx;
|
||
height: 100%;
|
||
background: radial-gradient(circle at 100% 0%, rgba(255, 79, 35, 0.08) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.price-content {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
z-index: 2;
|
||
}
|
||
|
||
.price-left {
|
||
color: $sp-price;
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
.symbol {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.amount {
|
||
font-size: 56rpx;
|
||
font-weight: 800;
|
||
font-family: 'DIN Alternate', sans-serif;
|
||
line-height: 1;
|
||
}
|
||
|
||
.unit {
|
||
font-size: 24rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
&--unavailable .amount {
|
||
font-size: 36rpx;
|
||
color: $sp-text-muted;
|
||
}
|
||
}
|
||
|
||
.sales-box {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(255, 141, 26, 0.1);
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 24rpx;
|
||
|
||
.sales-text {
|
||
font-size: 22rpx;
|
||
color: #E67A15;
|
||
margin-left: 6rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title-panel {
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
color: $sp-text-main;
|
||
line-height: 1.5;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.tag-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
|
||
.tag-item {
|
||
position: relative;
|
||
background: #FAFAFA;
|
||
border: 1rpx solid #EBEBEB;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
|
||
.tag-text {
|
||
font-size: 22rpx;
|
||
color: $sp-text-sub;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.intro-section {
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
padding: 32rpx 24rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 32rpx;
|
||
position: relative;
|
||
|
||
.title-decor-line {
|
||
position: absolute;
|
||
bottom: 4rpx;
|
||
width: 120rpx;
|
||
height: 12rpx;
|
||
background: linear-gradient(90deg, rgba(65, 117, 238, 0.3) 0%, transparent 100%);
|
||
border-radius: 6rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.title-text {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: $sp-text-main;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
.intro-images {
|
||
font-size: 0;
|
||
line-height: 0;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
|
||
.intro-img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.intro-text {
|
||
font-size: 28rpx;
|
||
color: $sp-text-sub;
|
||
line-height: 1.7;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
/* STREAMING_CHUNK:底部适度抬高悬浮操作按钮 */
|
||
.footer-spacer {
|
||
height: 20rpx;
|
||
}
|
||
|
||
.floating-action-bar {
|
||
position: fixed;
|
||
left: 32rpx;
|
||
right: 32rpx;
|
||
/* 调整悬浮高度：降低到 16rpx，更加稳重 */
|
||
//bottom: calc(16rpx + env(safe-area-inset-bottom));
|
||
bottom: 50rpx;
|
||
z-index: 100;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.register-btn-float {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
background: $sp-gradient-btn;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
border-radius: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: none;
|
||
box-shadow: 0 12rpx 24rpx rgba(65, 117, 238, 0.3);
|
||
transition: all 0.3s;
|
||
|
||
&::after { border: none; }
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
box-shadow: 0 6rpx 12rpx rgba(65, 117, 238, 0.2);
|
||
}
|
||
|
||
&--disabled {
|
||
background: #E2E4E8;
|
||
color: #B0B5C1;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 抽屉与包含自定义的精简版SKU样式 */
|
||
.register-drawer {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-height: 75vh;
|
||
|
||
.drawer-header {
|
||
width: 100%;
|
||
padding: 32rpx;
|
||
border-bottom: 1rpx solid #F2F3F5;
|
||
display: flex;
|
||
position: relative;
|
||
padding-right: 80rpx;
|
||
|
||
.header-img {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 12rpx;
|
||
background: $sp-bg;
|
||
margin-right: 24rpx;
|
||
border: 1rpx solid #EBEBEB;
|
||
}
|
||
|
||
.header-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
padding-bottom: 12rpx;
|
||
|
||
.header-price {
|
||
color: $sp-price;
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-bottom: 12rpx;
|
||
|
||
.symbol { font-size: 28rpx; font-weight: 600; }
|
||
.amount { font-size: 48rpx; font-weight: 800; font-family: 'DIN Alternate', sans-serif;}
|
||
.unit { font-size: 24rpx; color: $sp-text-muted; margin-left: 4rpx;}
|
||
}
|
||
|
||
.header-stock {
|
||
font-size: 24rpx;
|
||
color: $sp-text-sub;
|
||
background: #F7F7F7;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
display: inline-block;
|
||
align-self: flex-start;
|
||
}
|
||
}
|
||
}
|
||
|
||
.drawer-scroll-area {
|
||
width: 100%;
|
||
max-height: 50vh;
|
||
padding: 0 32rpx 40rpx;
|
||
}
|
||
|
||
.drawer-section {
|
||
margin-top: 32rpx;
|
||
|
||
.section-label {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: $sp-text-main;
|
||
margin-bottom: 20rpx;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.sku-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.sku-item {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
background: #F5F6F8;
|
||
border: 2rpx solid transparent;
|
||
padding: 14rpx 28rpx;
|
||
border-radius: 40rpx;
|
||
transition: all 0.2s;
|
||
overflow: hidden;
|
||
|
||
.sku-name {
|
||
font-size: 26rpx;
|
||
color: $sp-text-main;
|
||
}
|
||
|
||
.sku-name + .sku-price {
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.sku-price {
|
||
font-size: 24rpx;
|
||
color: $sp-text-sub;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&--active {
|
||
background: $sp-primary-light;
|
||
border-color: $sp-primary;
|
||
|
||
.sku-name {
|
||
color: $sp-primary;
|
||
font-weight: 600;
|
||
}
|
||
.sku-price {
|
||
color: $sp-primary;
|
||
}
|
||
}
|
||
|
||
.active-triangle {
|
||
position: absolute;
|
||
right: -2rpx;
|
||
bottom: -2rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-bottom: 32rpx solid $sp-primary;
|
||
border-left: 32rpx solid transparent;
|
||
|
||
.triangle-icon {
|
||
position: absolute;
|
||
right: 2rpx;
|
||
bottom: -28rpx;
|
||
transform: scale(0.6);
|
||
}
|
||
}
|
||
}
|
||
|
||
.dose-section {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 16rpx;
|
||
|
||
.section-label {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.drawer-footer {
|
||
width: 100%;
|
||
padding: 20rpx 32rpx;
|
||
background: #fff;
|
||
border-top: 1rpx solid #F2F3F5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
|
||
.total-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.total-label {
|
||
font-size: 24rpx;
|
||
color: $sp-text-sub;
|
||
}
|
||
|
||
.total-price-box {
|
||
display: flex;
|
||
align-items: baseline;
|
||
color: $sp-price;
|
||
}
|
||
|
||
.total-symbol {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.total-price {
|
||
font-size: 44rpx;
|
||
font-weight: 800;
|
||
font-family: 'DIN Alternate', sans-serif;
|
||
}
|
||
}
|
||
|
||
.confirm-btn {
|
||
margin: 0;
|
||
width: 280rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: $sp-gradient-btn;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
border-radius: 40rpx;
|
||
border: none;
|
||
|
||
&::after { border: none; }
|
||
}
|
||
}
|
||
}
|
||
</style> |