增加退款、申诉

src/App.vue

@@ -214,5 +214,41 @@ export default {
             color: #999999;
         }
     }
+    .upload-item {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0 30rpx;
+        .image-box {
+            width: 133.2rpx;
+            height: 133.2rpx;
+            background: rgba(184, 180, 179, 0);
+            box-sizing: border-box;
+            border-radius: 25rpx;
+            overflow: hidden;
+            border: 1px solid #f7f7f7;
+            .image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .image-box.upload {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            color: #999999;
+            border-radius: 0;
+            border: 1px solid #999999;
+            .iconfont {
+                font-size: 50rpx;
+                line-height: 50rpx;
+            }
+            .text {
+                font-size: 24rpx;
+                margin-top: 18rpx;
+                line-height: 24rpx;
+            }
+        }
+    }
 }
 </style>

src/components/order/action.vue

@@ -18,6 +18,13 @@
             <block v-if="order.state == 6">
                 <view class="btn normal">已完成</view>
             </block>
+            <block v-if="order.state == 7">
+                <view class="btn" @click.stop="refund">同意退款</view>
+                <view class="btn" @click.stop="appeal">申诉</view>
+            </block>
+            <block v-if="order.state == 8">
+                <view class="btn normal">退款成功</view>
+            </block>
         </block>
         <block v-if="order.listType == 't3'">
             <block v-if="order.state == 2">
@@ -55,6 +62,34 @@ export default {
         confirmPrice() {
             this.$emit("confirmPrice");
         },
+        /**
+         * 退款
+         */
+        refund() {
+            this.$models.order
+                .refundOrder({
+                    request: {
+                        api: "order.refund." + this.order.listType,
+                        data: {
+                            id: this.order.id,
+                        },
+                    },
+                })
+                .then((response) => {
+                    this.$utils.toast(response.msg).then(() => {
+                        this.$emit("refresh");
+                    });
+                })
+                .catch((e) => {
+                    this.$utils.toast(e);
+                });
+        },
+        /**
+         * 申诉
+         */
+        appeal() {
+            this.$utils.toPage("/pages/order/appeal?list=" + this.order.listType + "&id=" + this.order.id);
+        },
     },
 };
 </script>

src/core/apis.js

@@ -144,8 +144,36 @@ const apis = {
             },
             t3: {
                 url: "",
+            }
+        },
+        refund: {
+            t1: {
+                url: "/user/workerorderb/agreerefund",
                 showLoading: true,
                 auth: true,
+            },
+            t2: {
+                url: "/user/workerorderc/agreerefund",
+                showLoading: true,
+                auth: true,
+            },
+            t3: {
+                url: "",
+            }
+        },
+        appeal: {
+            t1: {
+                url: "/user/workerorderb/disagreerefund",
+                showLoading: true,
+                auth: true,
+            },
+            t2: {
+                url: "/user/workerorderc/disagreerefund",
+                showLoading: true,
+                auth: true,
+            },
+            t3: {
+                url: "",
             }
         }
     },

src/core/models/order.js

@@ -20,7 +20,7 @@ export default {
                 case 4: return ['待支付尾款'];
                 case 5: return ['待客户确认'];
                 case 6: return ['订单已完成'];
-                case 7: return ['退款申请审核中'];
+                case 7: return ['退款中'];
                 case 8: return ['已退款'];
                 case 9: return ['退款未通过'];
             }
@@ -31,7 +31,7 @@ export default {
                 case 4: return ['待支付尾款'];
                 case 5: return ['服务已完成，待确认'];
                 case 6: return ['订单已完成'];
-                case 7: return ['退款申请审核中'];
+                case 7: return ['退款中'];
                 case 8: return ['已退款'];
                 case 9: return ['退款未通过'];
             }
@@ -158,5 +158,31 @@ export default {
                 return reject(response.msg);
             }).catch(e => { });
         });
+    },
+    /**
+     * 退款
+     */
+    refundOrder(options) {
+        return new Promise((resolve, reject) => {
+            prototype.$request(options.request).then(response => {
+                if (response.code == 1) {
+                    return resolve(response);
+                }
+                return reject(response.msg);
+            }).catch(e => { });
+        });
+    },
+    /**
+     * 退款
+     */
+    appealOrder(options) {
+        return new Promise((resolve, reject) => {
+            prototype.$request(options.request).then(response => {
+                if (response.code == 1) {
+                    return resolve(response);
+                }
+                return reject(response.msg);
+            }).catch(e => { });
+        });
     }
 }

src/pages.json

@@ -37,6 +37,12 @@
 				"navigationBarTitleText": "订单详情"
 			}
 		},
+		{
+			"path": "pages/order/appeal",
+			"style": {
+				"navigationBarTitleText": "退款申诉"
+			}
+		},
 		{
 			"path": "pages/message/message",
 			"style": {

src/pages/order/appeal.vue

@@ -0,0 +1,232 @@
+<template>
+    <app-layout title="退款申诉">
+        <view class="common-form-container explain">
+            <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>
+            <view class="upload-item">
+                <block v-for="(item, index) in images" :key="index">
+                    <view class="image-box" @click="removeImage(index)">
+                        <image class="image" :src="item" mode="aspectFill" />
+                    </view>
+                </block>
+                <view class="image-box upload" @click="chooseImage">
+                    <text class="iconfont icon-shangchuantupian"></text>
+                    <text class="text">上传图片</text>
+                </view>
+            </view>
+        </view>
+        <view class="common-save-form-btn">
+            <view class="btn" @click="submit">提交</view>
+        </view>
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+export default {
+    name: "order-appeal",
+    data() {
+        return {
+            listType: "",
+            maxlength: 300,
+            id: 0,
+            content: "",
+            images: [],
+        };
+    },
+    components: {
+        AppLayout,
+    },
+    onLoad(e) {
+        if (e.list && e.id && e.id > 0) {
+            this.id = e.id;
+            this.listType = e.list;
+        } else {
+            return this.$utils.toast("参数错误").then(() => {
+                this.$utils.toPage("", {}, "back");
+            });
+        }
+    },
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {
+        /**
+         * 删除图片
+         */
+        removeImage(index) {
+            this.images.splice(index, 1);
+        },
+        /**
+         * 上传图片
+         */
+        chooseImage() {
+            this.$utils.chooseImage(8).then((tempFiles) => {
+                tempFiles.forEach((item) => {
+                    this.$models.system.upload(item.path).then((response) => {
+                        this.images.push(response.img);
+                    });
+                });
+            });
+        },
+        /**
+         * 提交
+         */
+        submit() {
+            this.$models.order
+                .appealOrder({
+                    request: {
+                        api: "order.appeal." + this.listType,
+                        data: {
+                            id: this.id,
+                            title: this.content,
+                            img: this.images,
+                        },
+                    },
+                })
+                .then((response) => {
+                    this.$utils.toast(response.msg).then(() => {
+                        this.$utils.toPage("", {}, "back");
+                    });
+                })
+                .catch((e) => {
+                    this.$utils.toast(e);
+                });
+        },
+    },
+};
+</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;
+        }
+    }
+}
+.common-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 {
+            width: 100%;
+            padding: 20rpx 0;
+            font-style: 28rpx;
+        }
+    }
+    .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>

src/pages/order/detail.vue

@@ -107,11 +107,9 @@
                     </view>
                 </view>
             </block>
-            <block v-if="listType == 't1' || listType == 't3' || (listType == 't2' && order.orderType == 1)">
+            <view class="detail-section">
-                <view class="detail-section">
+                <text class="price-box">¥ {{ utils.formatNumber(order.price, 2) }}</text>
-                    <text class="price-box">¥ {{ utils.formatNumber(order.price, 2) }}</text>
+            </view>
-                </view>
-            </block>
         </view>
         <view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
             <view class="service" @click="utils.serviceActions()">
@@ -119,7 +117,7 @@
                 <text class="text">客服</text>
             </view>
             <view class="action">
-                <order-action :order="order" @confirmPrice="showPriceModal(order.id)" />
+                <order-action :order="order" @confirmPrice="showPriceModal(order.id)" @refresh="refresh" />
             </view>
         </view>
         <order-confirm-price v-show="showConfirmModal" @close="showConfirmModal = false" @confirm="finishOrder" />
@@ -164,9 +162,10 @@ export default {
             return;
         }
         this.listType = e.list;
+    },
+    onShow() {
         this.loadDetail();
     },
-    onShow() {},
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
@@ -235,6 +234,9 @@ export default {
                     this.order = order;
                 });
         },
+        refresh() {
+            this.loadDetail();
+        },
     },
 };
 </script>

src/pages/order/order.vue

@@ -39,7 +39,7 @@
                                 <order-item :order="v">
                                     <view class="order-action">
                                         <view class="price">¥ {{ v.price }}</view>
-                                        <order-action :order="v" @confirmPrice="showPriceModal(v.id)" />
+                                        <order-action :order="v" @confirmPrice="showPriceModal(v.id)" @refresh="refresh" />
                                     </view>
                                 </order-item>
                             </view>
@@ -200,6 +200,9 @@ export default {
             let currentTab = this.tabList[this.tabIndex];
             this.$utils.toPage("/pages/order/detail?list=" + currentTab.listType + "&id=" + id);
         },
+        refresh() {
+            this.switchTab(this.tabIndex);
+        },
     },
 };
 </script>