增加申请退款、未通过原因页面

src/components/order/action.vue

@@ -17,7 +17,7 @@
             </view>
         </block>
         <block v-if="order.state == models.order.state.NO_SERVICE">
-            <view class="btn" @click.stop="drawbackOrder" :class="{ active: true }">
+            <view class="btn" @click.stop="refundOrder" :class="{ active: true }">
                 <text>申请退款</text>
             </view>
         </block>
@@ -26,7 +26,12 @@
                 <text>重新申请</text>
             </view>
         </block>
-        <block v-if="order.state == models.order.state.ORDER_CLOSE || order.state == models.order.state.ALL_FINISH">
+        <block v-if="order.state == models.order.state.CAN_NOT_REFUND">
+            <view class="btn" @click.stop="showReason" :class="{ active: true }">
+                <text>查看原因</text>
+            </view>
+        </block>
+        <block v-if="order.state == models.order.state.ORDER_CLOSE || order.state == models.order.state.ALL_FINISH || order.state == models.order.state.CAN_NOT_REFUND || order.state == models.order.state.REFUNDED">
             <view class="del" v-if="true" @click.stop="delOrder">
                 <text class="iconfont icon-shanchu"></text>
             </view>
@@ -67,9 +72,13 @@ export default {
             this.$utils.toPage("/pages/worker/appraise?id=" + this.order.worker.id);
         },
         // 退款
-        drawbackOrder() {
+        refundOrder() {
-            // this.$emit("drawbackOrder");
+            // this.$emit("refundOrder");
-            this.$utils.toPage("/pages/order/drawback?id=" + this.order.worker.id);
+            this.$utils.toPage("/pages/order/refund?id=" + this.order.worker.id);
+        },
+        // 查看未通过原因
+        showReason() {
+            this.$utils.toPage("/pages/order/refund?type=reason&id=" + this.order.worker.id);
         },
         // 重新提交
         reapplyOrder() {

src/core/models/order.js

@@ -5,13 +5,26 @@ export default {
         CUSTOM_PRICE: 3,
     },
     state: {
+        // 订单关闭
         ORDER_CLOSE: -2,
+        // 未支付
         NO_PAY: -1,
+        // 等待师傅报价
         NO_PRICE: 0,
+        // 等待您选择师傅
         NO_SELECT_WORKER: 1,
+        // 等待师傅上门
         NO_SERVICE: 2,
+        // 完成订单
         NO_APPRAISE: 3,
+        // 服务完结
         ALL_FINISH: 4,
+        // 已申请退款
+        APPLY_REFUND: 6,
+        // 已退款
+        REFUNDED: 7,
+        // 无法退款
+        CAN_NOT_REFUND: 8,
     },
     getOrderStateTextColor(state) {
         switch (state) {
@@ -23,6 +36,16 @@ export default {
                 return '#000000';
             case this.state.NO_SERVICE:
                 return '#000000';
+            case this.state.NO_APPRAISE:
+                return '#000000';
+            case this.state.ALL_FINISH:
+                return '#000000';
+            case this.state.APPLY_REFUND:
+                return '#000000';
+            case this.state.REFUNDED:
+                return '#000000';
+            case this.state.CAN_NOT_REFUND:
+                return '#000000';
             default:
                 return '#ff0000';
         }
@@ -37,6 +60,16 @@ export default {
                 return '等待您选择师傅';
             case this.state.NO_SERVICE:
                 return '等待师傅上门';
+            case this.state.NO_APPRAISE:
+                return '完成订单';
+            case this.state.ALL_FINISH:
+                return '服务完结';
+            case this.state.APPLY_REFUND:
+                return '已提交申请';
+            case this.state.REFUNDED:
+                return '已退款';
+            case this.state.CAN_NOT_REFUND:
+                return '未通过';
             default:
                 return '未知状态';
         }

src/pages.json

@@ -67,6 +67,12 @@
 				"navigationBarTitleText": "评价师傅"
 			}
 		},
+		{
+			"path": "pages/order/refund",
+			"style": {
+				"navigationBarTitleText": "申请退款"
+			}
+		},
 		{
 			"path": "pages/demand/demand",
 			"style": {

src/pages/order/order.vue

@@ -161,7 +161,7 @@ export default {
                     ],
                 },
                 {
-                    type: "drawback",
+                    type: "refund",
                     name: "退款记录",
                     more: true,
                     list: [
@@ -173,7 +173,7 @@ export default {
                             createTime: "2022-10-18 10:56:34",
                             serviceTime: "2022-10-18 10:56:34",
                             orderType: 1,
-                            state: 1,
+                            state: 8,
                             worker: {
                                 id: 1,
                                 name: "张师傅",

src/pages/order/refund.vue

@@ -0,0 +1,252 @@
+<template>
+    <app-layout :title="pageTitle">
+        <view class="order-id">
+            <text class="title">订单编号：</text>
+            <text class="value">{{ orderId }}</text>
+        </view>
+        <view class="price">
+            <view class="title-box">申请退款</view>
+            <view class="price-box">
+                <text class="number">¥{{ parsePrice(price) }}</text>
+                <view v-if="type == 'apply'" class="modify-icon" @click="showEditModal = true">
+                    <text class="iconfont icon-bianji"></text>
+                    <text class="text">修改金额</text>
+                </view>
+            </view>
+        </view>
+        <view class="form-container explain">
+            <block v-if="type == 'apply'">
+                <view class="textarea-item">
+                    <view class="title-box">
+                        <text>需求说明</text>
+                        <text class="desc">您还可输入{{ maxlength - content.length }}个字</text>
+                    </view>
+                    <view class="textarea-box">
+                        <textarea
+                            v-model="content"
+                            :maxlength="maxlength"
+                            class="textarea"
+                            placeholder="请您详细填写需求说明"
+                            placeholder-class="placeholder-style-3"
+                        />
+                    </view>
+                </view>
+            </block>
+            <block v-else>
+                <view class="textarea-item">
+                    <view class="title-box">
+                        <text>驳回原因</text>
+                    </view>
+                    <view class="textarea-box">
+                        <text class="textarea">{{ content }}</text>
+                    </view>
+                </view>
+            </block>
+            <view class="upload-item">
+                <block v-for="(item, index) in images" :key="index">
+                    <view class="image-box">
+                        <image class="image" :src="item.src" mode="aspectFill" />
+                    </view>
+                </block>
+                <view v-if="type == 'apply'" class="image-box upload" @click="chooseImage">
+                    <text class="iconfont icon-shangchuantupian"></text>
+                    <text class="text">上传图片</text>
+                </view>
+            </view>
+        </view>
+        <view v-if="type == 'apply'" class="save-form-btn">
+            <view class="btn" @click="save">提交</view>
+        </view>
+        <widget-modal :show="showEditModal" title="修改退款金额" @close="showEditModal = false">
+            <view class="price-box">
+                <view class="price-input">
+                    <view class="input-box">
+                        <input
+                            class="input"
+                            type="number"
+                            v-model="price"
+                            placeholder="请输入退款金额"
+                            placeholder-class="placeholder-style-3"
+                        />
+                        <text class="iconfont icon-qingchu" @click="price = 0"></text>
+                    </view>
+                    <text class="util">元</text>
+                </view>
+                <view class="submit-price" @click="showEditModal = false">
+                    <text>确认</text>
+                </view>
+            </view>
+        </widget-modal>
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+import WidgetModal from "@/components/widgets/modal";
+export default {
+    name: "order-refund",
+    data() {
+        return {
+            type: "apply",
+            pageTitle: "申请退款",
+            showEditModal: false,
+            maxlength: 200,
+            id: 1,
+            orderId: "xxgfdkgn1223",
+            price: 306,
+            content: "这个是申请内容",
+            images: [],
+        };
+    },
+    components: {
+        AppLayout,
+        WidgetModal,
+    },
+    onLoad(e) {
+        if (e.type && e.type == "reason") {
+            this.type = "reason";
+            this.pageTitle = "未通过原因";
+            uni.setNavigationBarTitle({
+                title: this.pageTitle,
+            });
+        }
+    },
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {
+        parsePrice(data) {
+            let num = parseFloat(data);
+            return num > 0 ? num.toFixed(2) : 0;
+        },
+        chooseImage() {
+            uni.chooseImage({
+                sizeType: ["compressed"],
+                sourceType: ["album"],
+                success(res) {
+                    console.log(JSON.stringify(res.tempFilePaths));
+                },
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.order-id {
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #ffffff;
+    .title {
+        font-size: 28rpx;
+        color: #999999;
+    }
+}
+.order-id {
+    padding: 22rpx 40rpx;
+    margin-bottom: 18rpx;
+    .value {
+        font-size: 28rpx;
+        color: #000000;
+    }
+}
+.price {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 40rpx;
+    margin-bottom: 18rpx;
+    background-color: #ffffff;
+    .title-box {
+        font-size: 28rpx;
+        color: #000000;
+    }
+    .price-box {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 20rpx;
+        .number {
+            font-size: 48rpx;
+            font-weight: bold;
+            color: #000000;
+        }
+    }
+    .modify-icon {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        .iconfont {
+            font-size: 46rpx;
+            color: #999999;
+        }
+        .text {
+            display: inline-block;
+            font-size: 24rpx;
+            color: #999999;
+            margin-top: 6rpx;
+        }
+    }
+}
+.form-container.explain {
+    width: 100%;
+    margin-top: 0;
+    .textarea-item {
+        padding: 30rpx 40rpx;
+        .title-box {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .desc {
+            font-size: 24rpx;
+            color: #999999;
+        }
+        .textarea-box {
+            border: 0;
+        }
+        .textarea {
+            padding: 0;
+        }
+    }
+    .upload-item {
+        padding: 0 40rpx 30rpx 40rpx;
+    }
+}
+.price-box {
+    .submit-price {
+        width: 100%;
+        height: 68rpx;
+        background: #7286f1;
+        text-align: center;
+        line-height: 68rpx;
+        font-size: 32rpx;
+        color: #ffffff;
+    }
+    .price-input {
+        display: flex;
+        justify-content: space-between;
+        margin: 35rpx 0 50rpx 0;
+        line-height: 72rpx;
+        .input-box {
+            display: flex;
+        }
+        .input {
+            width: 450rpx;
+            height: 72rpx;
+            border: 2rpx solid #d8d8d8;
+            box-sizing: border-box;
+            padding: 4rpx;
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #000000;
+            text-align: center;
+        }
+        .iconfont {
+            margin-left: 18rpx;
+        }
+    }
+}
+</style>