478 行
11 KiB
Vue
478 行
11 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>
|
||
<view class="remark-row">
|
||
<text class="cell-label">开黑要求/游戏ID</text>
|
||
<input class="remark-input" v-model="remark" placeholder="如：QQ区/王者段位/包赢" 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">
|
||
<text class="fee-k">优惠券抵扣</text>
|
||
<text class="fee-v green">-¥{{ discount }}</text>
|
||
</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>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import { EXPERTS_LIST } from '@/common/mock.js';
|
||
import { ICONS } from '@/common/icons.js';
|
||
|
||
const expert = ref(EXPERTS_LIST[0]);
|
||
const selectedService = ref(EXPERTS_LIST[0].services[0]);
|
||
const hours = ref(2);
|
||
const timeType = ref('NOW');
|
||
const discount = ref(10);
|
||
const remark = ref('');
|
||
|
||
onLoad((query) => {
|
||
if (query && query.expertId) {
|
||
const e = EXPERTS_LIST.find(item => item.id === query.expertId);
|
||
if (e) {
|
||
expert.value = e;
|
||
if (query.serviceId && e.services) {
|
||
const s = e.services.find(srv => srv.id === query.serviceId);
|
||
if (s) selectedService.value = s;
|
||
} else if (e.services && e.services.length > 0) {
|
||
selectedService.value = e.services[0];
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
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 selectCoupon = () => {
|
||
uni.showToast({ title: '已自动匹配最高优惠券 -¥10', icon: 'none' });
|
||
};
|
||
|
||
const handlePay = () => {
|
||
uni.showLoading({ title: '正在拉起微信支付...' });
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '支付成功！服务已生成',
|
||
icon: 'success',
|
||
duration: 1500
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/pages/order/list'
|
||
});
|
||
}, 1200);
|
||
}, 1000);
|
||
};
|
||
</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;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
&.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;
|
||
}
|
||
}
|
||
</style>
|