907 行
23 KiB
Vue
907 行
23 KiB
Vue
<template>
|
||
<view class="create-order-container">
|
||
<!-- 服务大神与项目信息 -->
|
||
<view class="order-card">
|
||
<view class="expert-profile">
|
||
<image class="expert-avatar" :src="expert.avatar" mode="aspectFill" />
|
||
<view class="expert-meta">
|
||
<view class="name-row">
|
||
<text class="expert-name">{{ expert.nickname }}</text>
|
||
<text class="game-tag">{{ expert.game }}</text>
|
||
</view>
|
||
<text class="service-title">{{ selectedService.title }}</text>
|
||
</view>
|
||
<view class="price-single">
|
||
<text class="price-unit">¥{{ selectedService.price }}/{{ selectedService.unit }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 数量/时长步进器 -->
|
||
<view class="order-card">
|
||
<view class="stepper-row">
|
||
<view class="stepper-label">
|
||
<text class="label-main">购买时长</text>
|
||
<text class="label-sub">以{{ selectedService.unit }}为计费单位</text>
|
||
</view>
|
||
<view class="stepper-box">
|
||
<button class="step-btn btn-active" :disabled="hours <= 1" @click="changeHours(-1)">－</button>
|
||
<text class="step-val">{{ hours }} {{ selectedService.unit }}</text>
|
||
<button class="step-btn btn-active" :disabled="hours >= 10" @click="changeHours(1)">＋</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 开黑时段选择 (矢量SVG时段图标) -->
|
||
<view class="order-card">
|
||
<view class="section-title">服务时间</view>
|
||
<view class="time-tabs">
|
||
<view
|
||
class="time-tab btn-active"
|
||
:class="{ active: timeType === 'NOW' }"
|
||
@click="timeType = 'NOW'"
|
||
>
|
||
<view class="tab-title-wrap">
|
||
<image class="tab-svg" :src="ICONS.bolt" mode="aspectFit" />
|
||
<text class="tab-t">即刻出发</text>
|
||
</view>
|
||
<text class="tab-d">付款后立即连麦开黑</text>
|
||
</view>
|
||
<view
|
||
class="time-tab btn-active"
|
||
:class="{ active: timeType === 'APPOINT' }"
|
||
@click="timeType = 'APPOINT'"
|
||
>
|
||
<view class="tab-title-wrap">
|
||
<image class="tab-svg" :src="ICONS.clock" mode="aspectFit" />
|
||
<text class="tab-t">预约时段</text>
|
||
</view>
|
||
<text class="tab-d">今晚 20:30 开打</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 优惠抵扣与履约约定 -->
|
||
<view class="order-card">
|
||
<view class="coupon-row btn-active" @click="selectCoupon">
|
||
<text class="cell-label">优惠券</text>
|
||
<view class="cell-right">
|
||
<text class="coupon-val">-¥{{ discount }} (新人首单立减)</text>
|
||
<text class="arrow">></text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 线下同城专属：商圈场所与消费约定 -->
|
||
<block v-if="isOffline">
|
||
<view class="remark-row">
|
||
<text class="cell-label">碰面场所</text>
|
||
<input class="remark-input" v-model="meetVenue" placeholder="正规场所，如：工体纯K量贩KTV/朝阳大悦城" placeholder-class="ph" />
|
||
</view>
|
||
<view class="expense-row">
|
||
<text class="cell-label">现场消费</text>
|
||
<view class="expense-pills">
|
||
<view
|
||
class="expense-pill btn-active"
|
||
:class="{ active: expenseBurden === 'AA' }"
|
||
@click="expenseBurden = 'AA'"
|
||
>
|
||
AA制各自付
|
||
</view>
|
||
<view
|
||
class="expense-pill btn-active"
|
||
:class="{ active: expenseBurden === 'TREAT' }"
|
||
@click="expenseBurden = 'TREAT'"
|
||
>
|
||
老板请客
|
||
</view>
|
||
<view
|
||
class="expense-pill btn-active"
|
||
:class="{ active: expenseBurden === 'SELF' }"
|
||
@click="expenseBurden = 'SELF'"
|
||
>
|
||
大神自理
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="safety-tip-card">
|
||
<image class="safety-icon-svg" :src="ICONS.shield" mode="aspectFit" />
|
||
<text class="safety-text">绿色阳光陪伴声明：服务仅限在正规公开商业场所进行。双方碰面后将出示 4 位数字核销码进行现场签到，保障双方人身与财产安全。</text>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 线上游戏专属：开黑区服与要求 -->
|
||
<view class="remark-row" v-else>
|
||
<text class="cell-label">开黑要求/游戏ID</text>
|
||
<input class="remark-input" v-model="remark" placeholder="如：微信区/王者星耀段位/包赢" placeholder-class="ph" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 费用明细清单 -->
|
||
<view class="order-card">
|
||
<view class="fee-row">
|
||
<text class="fee-k">服务小计</text>
|
||
<text class="fee-v">¥{{ rawTotal }}</text>
|
||
</view>
|
||
<view class="fee-row coupon-clickable btn-active" @click="openCouponModal">
|
||
<view class="fee-k-wrap">
|
||
<image class="coupon-icon-svg" :src="ICONS.ticket" mode="aspectFit" />
|
||
<text class="fee-k">优惠券抵扣</text>
|
||
</view>
|
||
<view class="fee-v-wrap">
|
||
<text class="fee-v green" v-if="discount > 0">-¥{{ discount }}</text>
|
||
<text class="fee-v muted" v-else>暂无使用优惠券</text>
|
||
<image class="arrow-svg" :src="ICONS.chevronRight" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
<view class="fee-row total-row">
|
||
<text class="fee-k">实付金额</text>
|
||
<text class="fee-v pay-val">¥{{ finalTotal }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部固定结算条 -->
|
||
<view class="bottom-bar">
|
||
<view class="amount-wrap">
|
||
<text class="amount-label">实付：</text>
|
||
<text class="amount-num">¥{{ finalTotal }}</text>
|
||
</view>
|
||
<button class="btn-pay btn-active" @click="handlePay">微信支付</button>
|
||
</view>
|
||
|
||
<!-- 优惠券选择弹窗 -->
|
||
<view class="coupon-modal-mask" v-if="couponModalVisible" @click.self="closeCouponModal">
|
||
<view class="coupon-modal-content">
|
||
<view class="modal-header">
|
||
<text class="modal-title">选择优惠券</text>
|
||
<view class="modal-close" @click="closeCouponModal">
|
||
<image class="close-icon" :src="ICONS.close" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="coupons-list">
|
||
<view
|
||
v-for="item in availableCoupons"
|
||
:key="item.id"
|
||
class="coupon-card btn-active"
|
||
:class="{
|
||
active: currentCoupon && currentCoupon.id === item.id,
|
||
disabled: item.minAmount > 0 && rawTotal < item.minAmount
|
||
}"
|
||
@click="selectCouponItem(item)"
|
||
>
|
||
<view class="coupon-left">
|
||
<text class="coupon-amount-unit" v-if="item.amount > 0">¥</text>
|
||
<text class="coupon-amount-val">{{ item.amount > 0 ? item.amount : '无' }}</text>
|
||
</view>
|
||
<view class="coupon-mid">
|
||
<text class="coupon-card-title">{{ item.title }}</text>
|
||
<text class="coupon-card-desc">
|
||
{{ item.minAmount > 0 ? `满 ¥${item.minAmount} 可用` : (item.amount > 0 ? '无门槛使用' : '放弃使用优惠抵扣') }}
|
||
</text>
|
||
</view>
|
||
<view class="coupon-right">
|
||
<text class="coupon-tag">{{ item.tag }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import { createOrder, getCompanionDetail } from '@/common/api.js';
|
||
import { ICONS } from '@/common/icons.js';
|
||
|
||
const expert = ref({
|
||
id: '',
|
||
nickname: '同城陪伴师',
|
||
avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150',
|
||
game: '同城陪伴',
|
||
price: 68,
|
||
services: []
|
||
});
|
||
const selectedService = ref(null);
|
||
const hours = ref(2);
|
||
const timeType = ref('NOW');
|
||
const discount = ref(10);
|
||
const remark = ref('');
|
||
const meetVenue = ref('朝阳大悦城海底捞');
|
||
const expenseBurden = ref('AA');
|
||
|
||
const isOffline = computed(() => {
|
||
return expert.value && (
|
||
expert.value.track === 'OFFLINE_MEAL' ||
|
||
expert.value.track === 'OFFLINE_DRINK' ||
|
||
expert.value.track === 'OFFLINE_SING' ||
|
||
expert.value.track === 'OFFLINE_PLAY' ||
|
||
expert.value.game === '美食陪吃' ||
|
||
expert.value.game === '下午茶陪喝' ||
|
||
expert.value.game === '同城陪唱' ||
|
||
expert.value.game === '同城陪玩'
|
||
);
|
||
});
|
||
|
||
onLoad(async (query) => {
|
||
const targetId = (query && query.expertId) ? query.expertId : '1';
|
||
try {
|
||
const liveExpert = await getCompanionDetail(targetId);
|
||
if (liveExpert) {
|
||
expert.value = liveExpert;
|
||
if (query && query.serviceId && liveExpert.services) {
|
||
const s = liveExpert.services.find(srv => String(srv.id) === String(query.serviceId));
|
||
if (s) {
|
||
selectedService.value = s;
|
||
} else if (liveExpert.services.length > 0) {
|
||
selectedService.value = liveExpert.services[0];
|
||
}
|
||
} else if (liveExpert.services && liveExpert.services.length > 0) {
|
||
selectedService.value = liveExpert.services[0];
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.warn('[OrderCreate] 获取线上大神详情异常:', err);
|
||
}
|
||
});
|
||
|
||
const rawTotal = computed(() => {
|
||
return (selectedService.value ? selectedService.value.price : 35) * hours.value;
|
||
});
|
||
|
||
const finalTotal = computed(() => {
|
||
const total = rawTotal.value - discount.value;
|
||
return total > 0 ? total : 0;
|
||
});
|
||
|
||
const changeHours = (delta) => {
|
||
hours.value = Math.max(1, Math.min(10, hours.value + delta));
|
||
};
|
||
|
||
const couponModalVisible = ref(false);
|
||
const availableCoupons = ref([
|
||
{ id: 'c1', title: '平台新客专享立减券', amount: 10, minAmount: 0, tag: '新人专享' },
|
||
{ id: 'c2', title: '周末高阶开黑满减券', amount: 20, minAmount: 150, tag: '满150可用' },
|
||
{ id: 'c3', title: '不使用优惠券', amount: 0, minAmount: 0, tag: '不使用' }
|
||
]);
|
||
const currentCoupon = ref(availableCoupons.value[0]);
|
||
|
||
const openCouponModal = () => {
|
||
couponModalVisible.value = true;
|
||
};
|
||
|
||
const closeCouponModal = () => {
|
||
couponModalVisible.value = false;
|
||
};
|
||
|
||
const selectCouponItem = (coupon) => {
|
||
if (coupon.minAmount > 0 && rawTotal.value < coupon.minAmount) {
|
||
uni.showToast({
|
||
title: `该券需订单满 ¥${coupon.minAmount} 可用`,
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
currentCoupon.value = coupon;
|
||
discount.value = coupon.amount;
|
||
closeCouponModal();
|
||
if (coupon.amount > 0) {
|
||
uni.showToast({ title: `已成功应用 -¥${coupon.amount} 优惠`, icon: 'success' });
|
||
} else {
|
||
uni.showToast({ title: '已取消使用优惠券', icon: 'none' });
|
||
}
|
||
};
|
||
|
||
const handlePay = async () => {
|
||
uni.showLoading({ title: '正在拉起微信支付...' });
|
||
try {
|
||
const payload = {
|
||
buyerId: 1001,
|
||
clientName: '超能电竞玩家',
|
||
expertId: expert.value.id,
|
||
companionName: expert.value.nickname,
|
||
expertAvatar: expert.value.avatar,
|
||
track: expert.value.game || (isOffline.value ? '同城生活' : '线上电竞'),
|
||
serviceTitle: selectedService.value ? selectedService.value.title : `${expert.value.game}专属服务`,
|
||
hourlyRate: selectedService.value ? selectedService.value.price : (expert.value.price || 35),
|
||
durationHours: hours.value,
|
||
amount: finalTotal.value,
|
||
location: isOffline.value ? meetVenue.value : (remark.value || '线上语音开黑'),
|
||
expenseBurden: expenseBurden.value === 'AA' ? 'AA制各自付' : (expenseBurden.value === 'CLIENT' ? '客户全包' : '大神自理'),
|
||
remark: remark.value,
|
||
status: '履约中'
|
||
};
|
||
|
||
await createOrder(payload);
|
||
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '支付成功！订单已写入系统',
|
||
icon: 'success',
|
||
duration: 1500
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/pages/order/list'
|
||
});
|
||
}, 1000);
|
||
} catch (err) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: err.message || '下单异常',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.create-order-container {
|
||
min-height: 100vh;
|
||
background-color: #0A0F1D;
|
||
padding: 24rpx 32rpx calc(160rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.order-card {
|
||
background-color: #151D30;
|
||
border-radius: 24rpx;
|
||
padding: 28rpx;
|
||
margin-bottom: 24rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
||
.expert-profile {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.expert-avatar {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 48rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.expert-meta {
|
||
flex: 1;
|
||
|
||
.name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
margin-bottom: 8rpx;
|
||
|
||
.expert-name {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
}
|
||
.game-tag {
|
||
font-size: 20rpx;
|
||
background: rgba(99, 102, 241, 0.2);
|
||
color: #818CF8;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.service-title {
|
||
font-size: 24rpx;
|
||
color: #94A3B8;
|
||
}
|
||
}
|
||
|
||
.price-single {
|
||
.price-unit {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
color: #10B981;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|
||
}
|
||
|
||
.stepper-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.stepper-label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.label-main {
|
||
font-size: 28rpx;
|
||
color: #F8FAFC;
|
||
font-weight: 600;
|
||
}
|
||
.label-sub {
|
||
font-size: 20rpx;
|
||
color: #64748B;
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
|
||
.stepper-box {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border-radius: 16rpx;
|
||
padding: 6rpx;
|
||
|
||
.step-btn {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
line-height: 68rpx;
|
||
padding: 0;
|
||
background: #1E2942;
|
||
color: #FFF;
|
||
font-size: 32rpx;
|
||
border-radius: 14rpx;
|
||
border: none;
|
||
margin: 0;
|
||
transition: transform 0.1s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.92);
|
||
}
|
||
}
|
||
|
||
.step-val {
|
||
font-size: 30rpx;
|
||
color: #F8FAFC;
|
||
font-weight: 600;
|
||
margin: 0 24rpx;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
color: #F8FAFC;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.time-tabs {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
|
||
.time-tab {
|
||
flex: 1;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
text-align: center;
|
||
|
||
&.active {
|
||
background: rgba(99, 102, 241, 0.15);
|
||
border-color: #6366F1;
|
||
|
||
.tab-t {
|
||
color: #818CF8;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.tab-title-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
margin-bottom: 6rpx;
|
||
|
||
.tab-svg {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
.tab-t {
|
||
font-size: 26rpx;
|
||
color: #CBD5E1;
|
||
}
|
||
}
|
||
|
||
.tab-d {
|
||
font-size: 20rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
}
|
||
|
||
.coupon-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
|
||
.cell-label {
|
||
font-size: 26rpx;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
.cell-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.coupon-val {
|
||
font-size: 24rpx;
|
||
color: #10B981;
|
||
font-weight: 600;
|
||
}
|
||
.arrow {
|
||
font-size: 24rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
}
|
||
|
||
.remark-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20rpx;
|
||
|
||
.cell-label {
|
||
font-size: 24rpx;
|
||
color: #64748B;
|
||
width: 220rpx;
|
||
}
|
||
|
||
.remark-input {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
color: #F8FAFC;
|
||
}
|
||
.ph {
|
||
color: #475569;
|
||
}
|
||
}
|
||
|
||
.expense-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||
|
||
.cell-label {
|
||
font-size: 24rpx;
|
||
color: #64748B;
|
||
width: 220rpx;
|
||
}
|
||
|
||
.expense-pills {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
|
||
.expense-pill {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 12rpx;
|
||
|
||
&.active {
|
||
color: #F59E0B;
|
||
background: rgba(245, 158, 11, 0.15);
|
||
border-color: #F59E0B;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.safety-tip-card {
|
||
margin-top: 20rpx;
|
||
background: rgba(16, 185, 129, 0.08);
|
||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||
border-radius: 16rpx;
|
||
padding: 16rpx 20rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12rpx;
|
||
|
||
.safety-icon-svg {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
flex-shrink: 0;
|
||
margin-top: 4rpx;
|
||
}
|
||
.safety-text {
|
||
font-size: 20rpx;
|
||
color: #10B981;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
|
||
.fee-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
margin-bottom: 12rpx;
|
||
|
||
.fee-k {
|
||
color: #94A3B8;
|
||
}
|
||
.fee-v {
|
||
color: #E2E8F0;
|
||
font-weight: 500;
|
||
|
||
&.green {
|
||
color: #10B981;
|
||
}
|
||
}
|
||
|
||
&.coupon-clickable {
|
||
align-items: center;
|
||
padding: 12rpx 0;
|
||
cursor: pointer;
|
||
|
||
.fee-k-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
|
||
.coupon-icon-svg {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.fee-v-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.arrow-svg {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.muted {
|
||
color: #64748B;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.total-row {
|
||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||
padding-top: 16rpx;
|
||
margin-top: 16rpx;
|
||
margin-bottom: 0;
|
||
|
||
.fee-k {
|
||
font-size: 26rpx;
|
||
color: #F8FAFC;
|
||
font-weight: 600;
|
||
}
|
||
.pay-val {
|
||
font-size: 34rpx;
|
||
color: #10B981;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: calc(120rpx + env(safe-area-inset-bottom));
|
||
padding: 0 32rpx env(safe-area-inset-bottom);
|
||
box-sizing: border-box;
|
||
background-color: rgba(21, 29, 48, 0.95);
|
||
backdrop-filter: blur(12px);
|
||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
z-index: 100;
|
||
max-width: 450px;
|
||
margin: 0 auto;
|
||
|
||
.amount-wrap {
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
.amount-label {
|
||
font-size: 24rpx;
|
||
color: #94A3B8;
|
||
}
|
||
.amount-num {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|
||
|
||
.btn-pay {
|
||
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
||
color: #FFF;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
border-radius: 44rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
padding: 0 60rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(16, 185, 129, 0.35);
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.coupon-modal-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
backdrop-filter: blur(8px);
|
||
z-index: 999;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
}
|
||
|
||
.coupon-modal-content {
|
||
width: 100%;
|
||
max-width: 600px;
|
||
background: #151D30;
|
||
border-top-left-radius: 36rpx;
|
||
border-top-right-radius: 36rpx;
|
||
padding: 36rpx 36rpx calc(36rpx + env(safe-area-inset-bottom));
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-bottom: none;
|
||
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.5);
|
||
animation: slideUp 0.25s ease-out;
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
|
||
.modal-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
.modal-close {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.close-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.coupons-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
|
||
.coupon-card {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 20rpx;
|
||
padding: 24rpx;
|
||
transition: all 0.2s;
|
||
|
||
.coupon-left {
|
||
width: 120rpx;
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
color: #F59E0B;
|
||
|
||
.coupon-amount-unit {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
}
|
||
.coupon-amount-val {
|
||
font-size: 44rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.coupon-mid {
|
||
flex: 1;
|
||
padding: 0 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6rpx;
|
||
|
||
.coupon-card-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #F8FAFC;
|
||
}
|
||
.coupon-card-desc {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
}
|
||
}
|
||
|
||
.coupon-right {
|
||
.coupon-tag {
|
||
font-size: 22rpx;
|
||
color: #818CF8;
|
||
background: rgba(99, 102, 241, 0.15);
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
border-color: #F59E0B;
|
||
background: rgba(245, 158, 11, 0.1);
|
||
}
|
||
|
||
&.disabled {
|
||
opacity: 0.45;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.theme-warm {
|
||
.coupon-modal-content {
|
||
background: #FFFFFF;
|
||
border-color: #E7E5E4;
|
||
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.modal-header {
|
||
.modal-title {
|
||
color: #1C1917;
|
||
}
|
||
}
|
||
|
||
.coupons-list {
|
||
.coupon-card {
|
||
background: #FDFBF7;
|
||
border-color: #E7E5E4;
|
||
|
||
.coupon-left {
|
||
color: #EA580C;
|
||
}
|
||
|
||
.coupon-mid {
|
||
.coupon-card-title {
|
||
color: #1C1917;
|
||
}
|
||
.coupon-card-desc {
|
||
color: #78716C;
|
||
}
|
||
}
|
||
|
||
.coupon-right {
|
||
.coupon-tag {
|
||
color: #EA580C;
|
||
background: #FFF7ED;
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
border-color: #EA580C;
|
||
background: #FFF7ED;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|