From d31c1e649ee730969772e97692d5e5862ca182ac Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Sun, 22 Dec 2024 22:31:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E9=A1=B5=E9=9D=A2=E7=AD=89?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TitleTip/index.vue   |   8 +-
 src/pages.json                      |   7 +
 src/pages/order-details/index.vue   | 222 ++++++++++++++++++++++++++++
 src/pages/order-reduction/index.vue | 106 +++++++++++++
 4 files changed, 342 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/order-reduction/index.vue

diff --git a/src/components/TitleTip/index.vue b/src/components/TitleTip/index.vue
index 5784cbc..21ced64 100644
--- a/src/components/TitleTip/index.vue
+++ b/src/components/TitleTip/index.vue
@@ -2,12 +2,18 @@
     <!-- 标题 -->
     <view class="title-tip">
         <view></view>
-        <view> 订单数据 </view>
+        <view>{{ title }} </view>
     </view>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+const props = defineProps({
+    title: {
+        type: String,
+        default: '订单数据',
+    },
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages.json b/src/pages.json
index 499e8f7..494d007 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -98,6 +98,13 @@
                 "navigationStyle": "custom"
             }
         },
+        // 订单减免
+        {
+            "path": "pages/order-reduction/index",
+            "style": {
+                "navigationStyle": "custom"
+            }
+        },
         // 装备列表大厅
         {
             "path": "pages/goods-list/index",
diff --git a/src/pages/order-details/index.vue b/src/pages/order-details/index.vue
index 2fa55d3..5fd333e 100644
--- a/src/pages/order-details/index.vue
+++ b/src/pages/order-details/index.vue
@@ -9,14 +9,153 @@
         <van-tabs v-model:active="activeTabs" swipeable color="#00a288" background="#f0f7f7">
             <van-tab v-for="(t, i) in tabList" :title="t.tab_name"> </van-tab>
         </van-tabs>
+
+        <scroll-view scroll-y style="padding: 10px; box-sizing: border-box">
+            <view class="order-set" v-for="item in 10" :key="item">
+                <van-row>
+                    <van-col span="12">
+                        <view class="company-box">
+                            <van-image
+                                fit="cover"
+                                width="1.5rem"
+                                height="1.2rem"
+                                :src="companyImg"
+                            />
+                            <view class="company-name">
+                                <view> 安徽送变电公司 </view>
+                                <van-image fit="cover" height="0.5rem" :src="companyBg" />
+                            </view>
+                        </view>
+                    </van-col>
+                    <van-col span="10" class="contacts">
+                        <van-tag type="primary">待确认</van-tag>
+                    </van-col>
+                </van-row>
+
+                <view>
+                    <van-row>
+                        <van-col span="24">
+                            <view class="items-info">
+                                <van-image
+                                    fit="cover"
+                                    height="4rem"
+                                    width="4rem"
+                                    :src="companyBg"
+                                />
+                                <view class="info">
+                                    <view style="color: #000">
+                                        测试装备
+                                        <text> 30000 </text>
+                                    </view>
+                                    <view>
+                                        装备编号：1223
+                                        <van-tag type="primary">待确认</van-tag>
+                                    </view>
+                                    <view>装备型号：778</view>
+
+                                    <view> 租赁时长： 2024-9-3 </view>
+                                </view>
+                            </view>
+                        </van-col>
+                    </van-row>
+
+                    <van-row style="margin-top: 14px">
+                        总金额：
+                        <view style="color: var(--van-submit-bar-price-color)">
+                            <text> ￥ </text>
+                            <text style="font-size: 16px; font-weight: bold"> 8000 </text>
+                        </view>
+                    </van-row>
+                    <van-row style="margin-top: 14px">
+                        <van-button style="margin-right: 6px" round type="success" size="small">
+                            发起退租
+                        </van-button>
+                        <van-button
+                            style="margin-right: 6px"
+                            round
+                            type="success"
+                            size="small"
+                            @click="onReturnRepair"
+                        >
+                            退租检修
+                        </van-button>
+                        <van-button
+                            style="margin-right: 6px"
+                            round
+                            type="success"
+                            size="small"
+                            @click="onReduction"
+                        >
+                            发起减免
+                        </van-button>
+                    </van-row>
+                </view>
+            </view>
+        </scroll-view>
+
+        <van-popup
+            v-model:show="showBottom"
+            position="bottom"
+            closeable
+            close-icon="close"
+            :style="{ height: '60%' }"
+        >
+            <van-form
+                label-align="top"
+                style="border-bottom: 1px solid #ccc; margin: 0 10px; padding-bottom: 10px"
+            >
+                <van-cell-group inset>
+                    <van-field name="leaseName" label="请先选择检修类型" required />
+                </van-cell-group>
+                <view style="padding: 0 20px">
+                    <van-button style="margin-right: 6px" type="success" size="small">
+                        维修
+                    </van-button>
+                    <van-button style="margin-right: 6px" type="success" size="small">
+                        报废
+                    </van-button>
+                    <van-button style="margin-right: 6px" type="success" size="small">
+                        丢失
+                    </van-button>
+                </view>
+            </van-form>
+
+            <van-cell-group inset style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)">
+                <van-row>
+                    <van-col span="2"></van-col>
+                    <van-col span="22">
+                        <view class="items-info">
+                            <van-image fit="cover" height="4rem" width="4rem" :src="companyBg" />
+                            <view class="info">
+                                <view style="color: #000">
+                                    测试装备
+                                    <van-tag type="primary">已退租</van-tag>
+                                </view>
+                                <view> 装备编号：1223 </view>
+                                <view>租赁时长：778</view>
+                            </view>
+                        </view>
+                    </van-col>
+                </van-row>
+                <van-row style="padding: 8px 0; border-top: 1px solid #ccc">
+                    <van-col span="12"> 丢失费用：88元 </van-col>
+                    <van-col span="12"> 附件：xxxx </van-col>
+                </van-row>
+            </van-cell-group>
+        </van-popup>
     </view>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { useMemberStore } from '@/stores/index.js'
+import companyImg from '@/static/goods/company-img.png'
+import companyBg from '@/static/goods/company-bg.png'
+import cartImg from '@/static/cart/cart.png'
 import { onLoad } from '@dcloudio/uni-app'
+const showBottom = ref(false)
 const activeTabs = ref(0)
+
 const tabList = ref([
     { tab_name: '全部' },
     { tab_name: '待出库' },
@@ -30,6 +169,17 @@ const tabList = ref([
 const onClickLeft = () => {
     uni.navigateBack()
 }
+// 发起减免
+const onReduction = () => {
+    uni.navigateTo({
+        url: '/pages/order-reduction/index',
+    })
+}
+
+// 退租检修
+const onReturnRepair = () => {
+    showBottom.value = true
+}
 onLoad(() => {})
 </script>
 
@@ -40,4 +190,76 @@ onLoad(() => {})
     box-sizing: border-box;
     background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
 }
+
+.order-set {
+    padding: 10px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    border-radius: 6px;
+    background-color: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+    .van-row {
+        padding: 2px 0;
+        display: flex;
+        align-items: center;
+    }
+}
+.company-box {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    .company-name {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+        view {
+            padding-left: 6px;
+            font-size: 13px;
+            font-weight: bold;
+        }
+
+        .van-image {
+            width: 100%;
+        }
+    }
+}
+.items-info {
+    display: flex;
+    align-items: center;
+
+    .info {
+        font-size: 12px;
+        flex: 1;
+
+        view {
+            width: 100%;
+            padding: 1px 0 1px 10px;
+            font-size: 12px;
+            color: #6f6f6f;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .van-image {
+                margin: 0 4px;
+            }
+        }
+
+        & view:first-child {
+            font-size: 14px;
+            font-weight: bold;
+        }
+    }
+}
+
+:deep(.van-field__value) {
+    display: none;
+}
+
+:deep(.van-cell-group--inset) {
+    padding: 10px;
+    margin-top: 10px;
+}
 </style>
diff --git a/src/pages/order-reduction/index.vue b/src/pages/order-reduction/index.vue
new file mode 100644
index 0000000..4eb8726
--- /dev/null
+++ b/src/pages/order-reduction/index.vue
@@ -0,0 +1,106 @@
+<template>
+    <!-- 订单详情-->
+    <view class="h5-container order-reduction">
+        <view
+            style="
+                padding: 15px 0;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            "
+        >
+            <view>
+                <van-icon name="arrow-left" @click="onClickLeft" />
+                <text style="color: #000"> 发起减免 </text>
+            </view>
+
+            <view>
+                <van-button style="margin-right: 6px" round type="success" size="small">
+                    取消
+                </van-button>
+                <van-button style="margin-right: 6px" round type="success" size="small">
+                    保存
+                </van-button>
+            </view>
+        </view>
+
+        <van-cell-group inset>
+            <view>订单编号：890</view>
+            <view>装备数量：890</view>
+            <view>退租时间：890</view>
+            <view>结算单位：890</view>
+        </van-cell-group>
+
+        <scroll-view scroll-y style="background-color: #fff; padding: 10px; box-sizing: border-box">
+            <view style="display: flex; align-items: center; justify-content: space-between">
+                <view>
+                    <TitleTip :title="`租赁费用减免`" />
+                </view>
+                <van-button style="margin-right: 6px" round type="success" size="small">
+                    新增
+                </van-button>
+            </view>
+
+            <view> 设备1 </view>
+
+            <van-form label-width="100px">
+                <van-cell-group inset>
+                    <van-field
+                        name="leaseName"
+                        placeholder="请选择关联装备"
+                        label="关联装备"
+                        required
+                        :rules="[{ required: true, message: '请输入需求名称' }]"
+                    />
+
+                    <van-field name="areaName" label="租赁单价" required disabled />
+
+                    <van-field name="address" label="租期" required disabled />
+
+                    <van-field
+                        name="person"
+                        placeholder="请选择实际租期"
+                        label="实际租期"
+                        required
+                        :rules="[{ required: true, message: '请选择实际租期' }]"
+                    />
+                    <van-field name="pattern" label="减免天数" required disabled />
+
+                    <van-field label="实际租赁天数" disabled />
+                    <van-field label="减免费用" disabled />
+                </van-cell-group>
+            </van-form>
+        </scroll-view>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useMemberStore } from '@/stores/index.js'
+import TitleTip from '@/components/TitleTip'
+import { onLoad } from '@dcloudio/uni-app'
+
+const onClickLeft = () => {
+    uni.navigateBack()
+}
+
+onLoad(() => {})
+</script>
+
+<style lang="scss" scoped>
+.order-reduction {
+    padding: 10px;
+    color: #333;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
+}
+
+.van-cell-group view {
+    padding: 6px 10px;
+}
+
+:deep(.van-cell-group--inset) {
+    margin: 0;
+    margin-bottom: 10px;
+}
+</style>