From 91064262d6783437f3e636046602e58a74f50eaa Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Tue, 11 Jun 2024 18:29:02 +0800
Subject: [PATCH] add tid1523 refund modal styly

---
 src/components/order_refund_modal/index.vue        | 161 +++++++++++++++++++++
 .../reservation_site_detail.vue                    |   2 +-
 .../device/pages/order_details/order_details.vue   |   3 +
 3 files changed, 165 insertions(+), 1 deletion(-)
 create mode 100644 src/components/order_refund_modal/index.vue

diff --git a/src/components/order_refund_modal/index.vue b/src/components/order_refund_modal/index.vue
new file mode 100644
index 0000000..5f0fc48
--- /dev/null
+++ b/src/components/order_refund_modal/index.vue
@@ -0,0 +1,161 @@
+<template>
+    <view class="order-refund-modal">
+        <view class="orm-mask">
+            <view class="om-content">
+                <image class="oc-close" mode="aspectFit" src="../../static/images/icon/x_close.png"></image>
+                <view class="oc-title">退款</view>
+                <view class="oc-section">
+                    <view class="os-info">
+                        <view class="oi-name">欧轩智能羽毛球馆（永泰店）</view>
+                        <view class="oi-line">订单编号：20195171564566</view>
+                        <view class="oi-line">手机号码：218316553478</view>
+
+                        <view class="os-ipts">
+                            <view class="oi-item">
+                                <view class="oi-name">
+                                    <text class="on-txt">*</text>
+                                    退款金额
+                                </view>
+                                <view class="oi-right">
+                                    <input class="or-ipt" type="number" />
+                                    <view class="or-tip">可退240元</view>
+                                </view>
+                            </view>
+                            <view class="oi-item">
+                                <view class="oi-name">
+                                    <text class="on-txt">*</text>
+                                    退款积分
+                                </view>
+                                <view class="oi-right">
+                                    <input class="or-ipt" type="number" />
+                                    <view class="or-tip">可退2积分</view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                    
+                </view>
+                <view class="oc-btns">
+                    <view class="ob-item" @click="cancelBtn">取消</view>
+                    <view class="ob-item" @click="confirmBtn">确认</view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            isShow: false
+        }
+    },
+    methods: {
+        cancelBtn() {
+            this.$emit('click:cancel');
+        },
+        confirmBtn() {
+            this.$emit('click:confirm');
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.order-refund-modal{}
+
+.orm-mask{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,.5);
+    z-index: 10;
+}
+.om-content{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding-bottom: 80upx;
+    width: 620upx;
+    border-radius: 10px;
+    background: #fff;
+    .oc-close{
+        position: absolute;
+        top: 30upx;
+        right: 30upx;
+        width: 34upx;
+        height: 34upx;
+    }
+    .oc-title{
+        padding-top: 78upx;
+        text-align: center;
+        @include flcw(32upx, 44upx, #333, 500);
+    }
+    .oc-section{
+        padding: 30upx 30upx 0;
+        @include ctf(center);
+        .os-info{
+            .oi-name{
+                @include flcw(28upx, 48upx, #333);
+            }
+            .oi-line{
+                @include flcw(28upx, 48upx, #9C9C9F);
+            }
+            .os-ipts{
+                padding-top: 34upx;
+                .oi-item{
+                    display: flex;
+                    align-items: flex-start;
+                    .oi-name{
+                        @include flcw(28upx, 56upx, #333333);
+                        .on-txt{
+                            color: #EA5061;
+                        }
+                    }
+                    .oi-right{
+                        margin-left: 16upx;
+                        flex-shrink: 0;
+                        width: 312upx;
+                        .or-ipt{
+                            display: block;
+                            box-sizing: border-box;
+                            padding: 0 20upx;
+                            width: 100%;
+                            height: 56upx;
+                            border-radius: 10upx;
+                            border: 2upx solid #D8D8D8;
+                            @include flcw(28upx, 48upx, #9C9C9F);
+                        }
+                        .or-tip{
+                            padding-left: 8upx;
+                            @include flcw(24upx, 48upx, #EA5061);
+                            @include tHide;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .oc-btns{
+        margin-top: 32upx;
+        padding: 0 54upx;
+        @include ctf(space-between);
+        .ob-item{
+            width: 240upx;
+            height: 88upx;
+            text-align: center;
+            border: 2upx solid $mColor;
+            border-radius: 10upx;
+            @include flcw(32upx, 84upx, $mColor, 500);
+            &+.ob-item{
+                background: $mColor;
+                color: #fff;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/subpackage/device/components/order/reservation_site_detail/reservation_site_detail.vue b/src/subpackage/device/components/order/reservation_site_detail/reservation_site_detail.vue
index 3239102..47a46ed 100644
--- a/src/subpackage/device/components/order/reservation_site_detail/reservation_site_detail.vue
+++ b/src/subpackage/device/components/order/reservation_site_detail/reservation_site_detail.vue
@@ -136,7 +136,7 @@
 
 		</view>
 		<!-- 2022/01/04 PM: 禁用退款功能 -->
-		<!-- <view class="rs-btn" @click="refunndBtn" v-if="orderInfo.pay_status == 1 || orderInfo.pay_status == 2">退款</view> -->
+		<view class="rs-btn" @click="refunndBtn" v-if="orderInfo.pay_status == 1 || orderInfo.pay_status == 2">退款</view>
 		
 	</view>
 </template>
diff --git a/src/subpackage/device/pages/order_details/order_details.vue b/src/subpackage/device/pages/order_details/order_details.vue
index f294e36..74c08af 100644
--- a/src/subpackage/device/pages/order_details/order_details.vue
+++ b/src/subpackage/device/pages/order_details/order_details.vue
@@ -38,6 +38,7 @@
 			ref="ticketCheckModal"
 			@confirm="verifyConfirm"
 		></ticket-check>
+		<order-refund-modal></order-refund-modal>
 	</view>
 </template>
 
@@ -47,6 +48,7 @@
 	import reservationPeopleDetail from '../../components/order/reservation_people_detail/reservation_people_detail.vue';
 	import organizeDetail from '../../components/order/organize_detail/organize_detail.vue';
 	import ticket_check from '../../../../components/order_list/modal/ticket_check.vue';
+	import orderRefundModal from '../../../../components/order_refund_modal/index.vue';
 	import util from '../../../../utils/util';
 	import deviceServer from '../../js/device_server';
 	import deviceApi from '../../js/device_api';
@@ -58,6 +60,7 @@
 			'reservation-people-detail': reservationPeopleDetail,
 			'organize-detail': organizeDetail,
 			'ticket-check': ticket_check,
+			'order-refund-modal': orderRefundModal,
 		},
 		computed:{
 		    titleName(){