miniapp-v2/src/pages/MineUserAll/RefundMoney/CheckRefund/index.jsx

import Taro from "@tarojs/taro";
import { Button, Textarea, View } from "@tarojs/components";
import formatPrice from "@/utils/formatPrice";
import { useState, useEffect } from "react";
import OrderCard from '@/components/CompoentsOrder/OrderCard'
import withLayout from "@/layouts";
import { getOrderSub, refund } from "@/services/payOrder";
import CustomNav from "@/components/CustomNav";
import BlackSpot from "@/assets/icons/GuideCheck/BlackSpot.png";
import "./style.less";

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;
  const { id } = props.router.params;

  // 说明
  const [explain, setExplain] = useState();

  const [list, setList] = useState([]);
  // 总价 totalPrice
  const [totalPrice, setTotalPrice] = useState({});

  const [checkeds, setCheckeds] = useState([1]);

  const getData = (orderId) => {
    Taro.showLoading();
    getOrderSub({
      pageNum: 1,
      pageSize: 50,
      orderId: orderId,
    }).then((res) => {
      setList(res.records);
      Taro.hideLoading();
    });
  };

  useEffect(() => {
    getData(id);
  }, []);

  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 onRefund = () => {
    Taro.showLoading({
      title: '退款中',
    })
    refund(id, {
      refundDecription: checkeds?.map(x => options.filter(y => y.key == x)[0]?.title).join(';'),
      refundReason: explain,
    }).then((res) => {
      Taro.hideLoading();
      Taro.navigateTo({ url: '/pages/MineUserAll/AllOrder/index?tabJump=0' })
      Taro.showToast({
        title: "退款成功",
        icon: "none",
        duration: 3000,
      });
    });
  };
  useEffect(() => {
    let total = {
      cashback: 0, //已获返现
      charges: 0, //实付金额
      refundPrice: 0, //退款金额
    };
    list.map((x) => {
      total.cashback += x.cashback;
      total.charges += x.charges;
      total.refundPrice += x.charges - x.cashback;
    });
    setTotalPrice(total);
  }, [list]);

  return (
    <view className='page-index'>
      <view className='index-navbar'>
        <CustomNav title='售后退款' />
      </view>
      <View className='index-container'>
        <View className='box-content'>
          <scroll-view scroll-y style='height: 100%;' >
            <view className='Refund-Content-box'>
              <view className='title-image'>
                <image
                  mode='scaleToFill'
                  className='title-image-cup'
                  src={BlackSpot}
                />
                <text className='title-title-boss'>商品信息</text>
              </view>
            </view>
            {/* 商品信息结束 */}
            <view>
              {(list || []).map((item) => {
                return (
                  <OrderCard item={item} key={item.orderId} kkp='1' />
                );
              })}
            </view>
            {/* 卡片结束 */}
            <view className='Refund-Content-box'>
              <view className='title-image'>
                <image
                  mode='scaleToFill'
                  className='title-image-cup'
                  src={BlackSpot}
                />
                <text className='title-title-boss'>退款原因</text>
              </view>
              {/* 退款结束 */}
            </view>
            <view className='Refund-content'>
              {options.map((x) => {
                return (
                  <text
                    className={`Refund-star-view1 ${checkeds.indexOf(x.key) > -1
                      ? "bg2"
                      : `Refund-star-view2`
                      }`}
                    key={x.key}
                    onClick={() => viewOK(x)}
                  >
                    {x.title}
                  </text>
                );
              })}
            </view>
            <view className='Refund-Content-box'>
              <view className='title-image'>
                <image
                  mode='scaleToFill'
                  className='title-image-cup'
                  src={BlackSpot}
                />
                <text className='title-title-boss'>退款说明</text>
              </view>
            </view>
            <view class='section'>
              <Textarea
                placeholder='请补充退款说明（选填）!'
                onInput={(e) => setExplain(e.detail.value)}
                confirm-type='done'
              />
            </view>
            <view className='money-title'>
              实付金额:{" "}
              <text className='money-name'>{formatPrice(totalPrice.charges)}元</text>
            </view>
            <view className='money-title'>
              已获返现:{" "}
              <text className='money-name'>{formatPrice(totalPrice.cashback)}元</text>
            </view>
            <view className='money-title'>
              退款金额:{" "}
              <text className='money-name'>{formatPrice(totalPrice.refundPrice)}元</text>
            </view>
            <view className='ul-li-text'>
              <view className='ul-li-view'></view>
              <text className='ul-li-textname'>退款金额不可修改</text>
            </view>
            <view className='ul-li-text'>
              <view className='ul-li-view'></view>
              <text className='ul-li-textname'>
                下单获得返现金额，会在退款时被扣除；
              </text>
            </view>
            <view className='ul-li-text'>
              <view className='ul-li-view'></view>
              <text className='ul-li-textname'>退款将在七个工作日内原路退还。</text>
            </view>
            <view className='button-info' >
              <Button className='button-box' onClick={() => onRefund()}>
                提交申请
              </Button>
            </view>
          </scroll-view>
        </View>
      </View>

    </view >
  );
});