fix

src/pages/MineUserAll/RefundMoney/CheckRefund/index.jsx

@@ -2,9 +2,9 @@ import BlackSpot from "@/assets/icons/GuideCheck/BlackSpot.png";
 import Taro from "@tarojs/taro";
 import { Button, Icon, Text, Textarea } from "@tarojs/components";
 
-import { useState,useEffect } from "react";
+import { useState, useEffect } from "react";
 import withLayout from "@/layouts";
-import { getOrderSub } from "@/services/payOrder";
+import { getOrderSub, refund } from "@/services/payOrder";
 import image from "@/assets/icons/ProCard/8kb.jpg";
 import food from "@/assets/icons/ProCard/food.png";
 import ProCard_hot from "@/assets/icons/ProCard/ProCard_hot.png";
@@ -12,6 +12,32 @@ import CustomNav from "@/components/CustomNav";
 import "./style.less";
 import formatTime from "@/utils/formatTime";
 
+const options = [
+  {
+    title: "计划有变,没时间消费",
+    key: 1,
+  },
+  {
+    title: "误认为是外卖",
+    key: 2,
+  },
+  {
+    title: "没看清楚使用规则,要用时才发现限制很多",
+    key: 3,
+  },
+  {
+    title: "预约不上",
+    key: 4,
+  },
+  {
+    title: "店里更优惠",
+    key: 5,
+  },
+  {
+    title: "网友/朋友评价不好",
+    key: 6,
+  },
+];
 
 export default withLayout((props) => {
   const { router, person } = props;
@@ -22,10 +48,14 @@ export default withLayout((props) => {
   const [view4, setView4] = useState(false);
   const [view5, setView5] = useState(false);
   const [view6, setView6] = useState(false);
+  // 说明
+  const [explain, setExplain] = useState();
 
   const [list, setList] = useState([]);
-    // 总价 totalPrice
-    const [totalPrice, setTotalPrice] = useState({});
+  // 总价 totalPrice
+  const [totalPrice, setTotalPrice] = useState({});
+
+  const [checkeds, setCheckeds] = useState([1]);
 
   const getData = (orderId) => {
     Taro.showLoading();
@@ -43,27 +73,29 @@ export default withLayout((props) => {
     getData(id);
   }, []);
 
-  const viewOK = () => {
-    setView(!view);
-  };
-
-  const view2OK = () => {
-    setView2(!view2);
+  const viewOK = (e) => {
+    if (checkeds.indexOf(e.key) > -1) {
+      setCheckeds(checkeds.filter((x) => x != e.key));
+    } else {
+      let arr = checkeds;
+      arr.push(e.key);
+      setCheckeds([...arr]);
+    }
   };
 
-  const view3OK = () => {
-    setView3(!view3);
-  };
-
-  const view4OK = () => {
-    setView4(!view4);
-  };
-  const view5OK = () => {
-    setView5(!view5);
-  };
-
-  const view6OK = () => {
-    setView6(!view6);
+  const onRefund = () => {
+    // console.log(explain, checkeds, "----onRefund----");
+    refund(id, {
+      refundDecription: checkeds?.map(x=>options.filter(y=>y.key==x)[0]?.title).join(';'),
+      refundReason: explain,
+    }).then((res) => {
+      Taro.showToast({
+        title: "退款成功",
+        icon: "none",
+        duration: 2000,
+      });
+      Taro.navigateBack({delta: 1})
+    });
   };
 
   useEffect(() => {
@@ -73,7 +105,7 @@ export default withLayout((props) => {
       refundPrice: 0, //退款金额
     };
     list.map((x) => {
-      total.cashback += x.cashback ;
+      total.cashback += x.cashback;
       total.charges += x.charges;
       total.refundPrice += x.charges - x.cashback;
     });
@@ -100,7 +132,9 @@ export default withLayout((props) => {
             <view class="wrapper" key={item.orderId}>
               <view class="left-complete-one">
                 <image className="left-image-1" src={ProCard_hot}></image>
-                <view className="left-viewText">返现￥{item.cashback/100}</view>
+                <view className="left-viewText">
+                  返现￥{item.cashback / 100}
+                </view>
                 <view className="title-image">
                   <image
                     className="image-1"
@@ -113,15 +147,20 @@ export default withLayout((props) => {
                   <view className="Pro-title">
                     <view className="title-text">
                       {item.packageDescription}
-                      <text className="title-money-2">数量：{item.amount}张</text>
+                      <text className="title-money-2">
+                        数量：{item.amount}张
+                      </text>
                     </view>
                   </view>
                   <text className="title-money">
-                    ￥{item.unitPrice/100}元<text className="title-money-2">门市价{item.standardPrice/100}元</text>
+                    ￥{item.unitPrice / 100}元
+                    <text className="title-money-2">
+                      门市价{item.standardPrice / 100}元
+                    </text>
                   </text>
                   <view className="title-time">
                     有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
-                        {formatTime(item.endTime, "yyyy/MM/dd")}
+                    {formatTime(item.endTime, "yyyy/MM/dd")}
                   </view>
                 </view>
               </view>
@@ -146,53 +185,21 @@ export default withLayout((props) => {
         {/* 退款结束 */}
       </view>
       <view className="Refund-content">
-        <text
-          className={`Refund-star-view ${view ? "bg2" : "Refund-star-view"}`}
-          onClick={() => viewOK()}
-        >
-          计划有变,没时间消费
-        </text>
-        <text
-          className={`Refund-star-view2 ${view2 ? "bg2" : "Refund-star-view2"}`}
-          onClick={() => view2OK()}
-        >
-          误认为是外卖
-        </text>
-        <text
-          className={`Refund-star-view3 ${view3 ? "bg2" : "Refund-star-view3"}`}
-          onClick={() => view3OK()}
-        >
-          没看清楚使用规则,要用时才发现限制很多
-        </text>
-        <text
-          className={`Refund-star-view4 ${view4 ? "bg2" : "Refund-star-view4"}`}
-          onClick={() => view4OK()}
-        >
-          预约不上
-        </text>
-        <text
-          className={`Refund-star-view5 ${view5 ? "bg2" : "Refund-star-view5"}`}
-          onClick={() => view5OK()}
-        >
-          店里更优惠
-        </text>
-        <text
-          className={`Refund-star-view6 ${view6 ? "bg2" : "Refund-star-view6"}`}
-          onClick={() => view6OK()}
-        >
-          网友/朋友评价不好
-        </text>
-        {/* 
-        <view>
-          {
-            list.map(item => {
-              return <text onClick={() => view4OK()} key={item.value} className={item.className}>
-                {item.name}
-              </text>
-
-            })
-          }
-        </view> */}
+        {options.map((x) => {
+          return (
+            <text
+              className={`Refund-star-view${x.key} ${
+                checkeds.indexOf(x.key) > -1
+                  ? "bg2"
+                  : `Refund-star-view${x.key}`
+              }`}
+              key={x.key}
+              onClick={() => viewOK(x)}
+            >
+              {x.title}
+            </text>
+          );
+        })}
       </view>
 
       <view className="Refund-Content-box">
@@ -206,16 +213,23 @@ export default withLayout((props) => {
         </view>
       </view>
       <view class="section">
-        <Textarea placeholder="请补充退款说明（选填）!" confirm-type="done" />
+        <Textarea
+          placeholder="请补充退款说明（选填）!"
+          onInput={(e) => setExplain(e.detail.value)}
+          confirm-type="done"
+        />
       </view>
       <view className="money-title">
-        实付金额: <text className="money-name">{totalPrice.charges/100}元</text>
+        实付金额:{" "}
+        <text className="money-name">{totalPrice.charges / 100}元</text>
       </view>
       <view className="money-title">
-        已获返现: <text className="money-name">{totalPrice.cashback/100}元</text>
+        已获返现:{" "}
+        <text className="money-name">{totalPrice.cashback / 100}元</text>
       </view>
       <view className="money-title">
-        退款金额: <text className="money-name">{totalPrice.refundPrice/100}元</text>
+        退款金额:{" "}
+        <text className="money-name">{totalPrice.refundPrice / 100}元</text>
       </view>
       <view className="ul-li-text">
         <view className="ul-li-view"></view>
@@ -233,7 +247,9 @@ export default withLayout((props) => {
       </view>
 
       <view className="button-info">
-        <Button className="button-box">提交申请</Button>
+        <Button className="button-box" onClick={() => onRefund()}>
+          提交申请
+        </Button>
       </view>
     </view>
   );

src/pages/MineUserAll/RefundMoney/CheckRefund/style.less

@@ -247,7 +247,7 @@
   .Refund-content {
     width: 100%;
     margin-top: 45px;
-    .Refund-star-view {
+    .Refund-star-view1 {
       display: inline-block;
       width: 295px;
       height: 60px;

src/services/payOrder.js

@@ -24,6 +24,14 @@ export const getOrderSub = (data) => request('/orderSub', { data })
 */
 export const payOrder = (id) => request(`/order/${id}/pay`, { method: 'post' })
 
+
+/**
+* 订单项目发起退款
+* @param {*} id 
+* @returns 
+*/
+export const refund = (id,data) => request(`/order/${id}/refund`, { method: 'delete' ,data})
+
 /**
 * 获取子订单列表
 * @param {*} id