feat: 申请退款

zjk

2025-12-30 94dd834b49d191d61aebe023d7183e57fd730f9f

feat: 申请退款

 miniprogram/pages/orderDetail/orderDetail.vue

@@ -27,12 +27,20 @@
                    <view class="label">票号</view>
                    <view class="value">
                        <view :class="{ 'text-ellipsis': true }">46456245634567457356</view>
                        <view class="btn">复制</view>
                        <view class="btn" @click="copyCode('46456245634567457356')">复制</view>
                    </view>
                </view>
                <view class="item px-46">
                    <view class="label">2025-12-31 12:00后到期</view>
                    <view class="btn">申请退款</view>
                <view class="item px-46" v-if="true">
                    <view class="label" style="font-weight: bold;">2025-12-31 12:00后到期</view>
                    <view class="btn" @click="toRefund">申请退款</view>
                </view>
                <view class="item px-46" v-else-if="false">
                    <view class="label">消费时间</view>
                    <view class="value">2025-09-09 11:09:09</view>
                </view>
                <view class="item px-46" v-else>
                    <view class="label">退款时间</view>
                    <view class="value">2025-09-09 11:09:09</view>
                </view>
            </view>
            <!-- 订单信息 -->
@@ -123,13 +131,33 @@
</template>

<script setup lang="ts">
import { ref } from 'vue'

const orderId = ref('')

const copyCode = (code) => {
    uni.setClipboardData({
        data: code,
        success: () => {
            uni.showToast({
                title: "复制成功",
                icon: "success",
            });
        },
    });
};

const toRefund = () => {
    uni.navigateTo({
        url: "/pages/orderDetail/refund?orderId=" + orderId.value,
    });
};

const toAgreement = () => {
    uni.navigateTo({
        url: "/pagesA/agreement/agreement?title=用户注册隐私协议&type=1",
    });
};

</script>

<style>
@@ -163,20 +191,23 @@
            width: 365rpx;
            height: 365rpx;
            position: relative;

            image {
                width: 100%;
                height: 100%;
            }

            .ellipsis {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(255,255,255,0.7);
                background: rgba(255, 255, 255, 0.7);
                display: flex;
                align-items: center;
                justify-content: center;

                image {
                    width: 285rpx;
                    height: 231rpx;

 miniprogram/pages/orderDetail/refund.vue

@@ -1,13 +1,70 @@
<template>
    <view class="container">
        <u-navbar title="申请退款" :border-bottom="false" background="transparent" :is-fixed="false" title-bold></u-navbar>
        <view class="pt-27 px-27">
        <u-navbar title="申请退款" :border-bottom="false" background="transparent" title-bold></u-navbar>
        <view class="pt-27 px-27 content">
            <view class="list-item">
                <view class="item-top flex j-between a-center">
                    <view class="name">青城后山成人票</view>
                    <view class="status">待使用</view>
                </view>

                <view class="good-info flex mt-31">
                    <image src="/static/image/mine/contact.png" class="w-154 h-154 br-19" mode="aspectFill"></image>

                    <view class="info ml-27">
                        <view class="use-time mt-5 flex a-center">下单时间
                            <view class="value">2025-09-09</view>
                        </view>
                        <view class="use-time flex mt-9 a-center">使用日期
                            <view class="value">2025-09-09 周五</view>
                        </view>
                        <view class="use-time flex mt-9 a-center">使用时段
                            <view class="value">16：00</view>
                        </view>
                    </view>
                </view>
                <view class="price-Btn flex j-between a-center pl-27 pr-27 mt-19">
                    <view class="price flex a-center">
                        <view class="unit fs-27">￥</view>
                        20.00
                    </view>
                </view>
            </view>
            <view class="refund">
                <view class="title">退款原因</view>
                <u-input v-model="value" type="textarea" :clearable="false"
                    placeholder-style="font-size: 23rpx; color: rgba(0, 0, 0, 0.45);" />
            </view>
        </view>
        <view class="submit-btn flex j-center a-center" @click="submit">提交申请</view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { refund } from '@/api/order'

const value = ref('')



const submit = async () => {
    if (!value.value) {
        uni.showToast({
            title: '请输入退款原因',
            icon: 'none'
        })
        return
    }
    // await refund({
    //     orderId: orderId.value,
    //     reason: value.value
    // })
    uni.showToast({
        title: '申请退款成功',
        icon: 'none'
    })
}
</script>

<style>
@@ -19,12 +76,117 @@
<style lang="scss">
.container {
    width: 100%;
    // height: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(6, 197, 132, 0.4) 0%, rgba(6, 197, 132, 0) 317rpx);
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .content {
        flex: 1;
    }

    .list-item {
        width: 696.15rpx;
        height: 388.46rpx;
        background: url('/static/image/mine/orderBg.png') no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
    }

    .item-top {
        padding-top: 30.77rpx;
        margin-left: 26.92rpx;
        margin-right: 26.92rpx;
        padding-bottom: 30.77rpx;
        // border-bottom: 2rpx dashed #DADADA;

        .name {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 27rpx;
            color: #191F3F;
        }

        .status {
            width: 104rpx;
            height: 46rpx;
            background: #D9FFF2;
            border-radius: 12rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 25rpx;
            color: #06C584;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .good-info {
        padding: 0 28.85rpx 0rpx 26.92rpx;
    }

    .use-time {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 23rpx;
        color: rgba(0, 0, 0, 0.65);

        .value {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 23rpx;
            color: #191F3F;
            margin-left: 46.15rpx;
        }
    }

    .price {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 38.46rpx;
        color: #FF6257;
    }

    .refund {
        margin-top: 38rpx;

        .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.85);
            line-height: 46rpx;
            margin-bottom: 15rpx;
        }

        :deep(.u-input__textarea) {
            background: rgba(0, 0, 0, 0.04);
            border-radius: 19rpx;
            min-height: 306rpx !important;
            height: 306rpx;
            padding: 27rpx 31rpx;
            box-sizing: border-box;
            font-size: 23rpx;
        }
    }

    .submit-btn {
        width: 596rpx;
        height: 96rpx;
        background: linear-gradient(270deg, #08C866 0%, #06C584 100%);
        box-shadow: 0rpx 4rpx 25rpx 0rpx rgba(6, 197, 132, 0.15), 0rpx 8rpx 19rpx 0rpx rgba(6, 197, 132, 0.19);
        border-radius: 67rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #FFFFFF;
        margin: 0 auto;
    }
}
</style>