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

import BlackSpot from "@/assets/icons/GuideCheck/BlackSpot.png";
import Taro from "@tarojs/taro";
import { Button, Icon, Text, Textarea } from "@tarojs/components";
import formatPrice from "@/utils/formatPrice";
import formatTime from "@/utils/formatTime";
import { useState, useEffect } from "react";
import withLayout from "@/layouts";
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";
import CustomNav from "@/components/CustomNav";
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 = () => {
    refund(id, {
      refundDecription: checkeds?.map(x => options.filter(y => y.key == x)[0]?.title).join(';'),
      refundReason: explain,
    }).then((res) => {
      Taro.navigateBack({ delta: 1 })
      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='box-content'>
      <CustomNav title='售后退款' />
      <scroll-view scroll-y style='height: calc(100vh - 176rpx);' >

        <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 (
              <view class='wrapper' key={item.orderId}>
                <view class='left-complete-one'>
                  <image className='left-image-1' src={ProCard_hot}></image>
                  <view className='left-viewText'>
                    返现￥{formatPrice(item.cashback)}
                  </view>
                  <view className='title-image'>
                    <image
                      className='image-1'
                      mode='scaleToFill'
                      src={item.poster}
                    ></image>
                    <image className='image-2' src={food}></image>
                  </view>
                  <view className='title-content'>
                    <view className='Pro-title'>
                      <view className='title-text'>
                        {item.packageDescription}
                        <text className='title-money-2'>
                          数量：{item.amount}张
                        </text>
                      </view>
                    </view>
                    <text className='title-money'>
                      ￥{formatPrice(item.unitPrice)}元
                      <text className='title-money-2'>
                        门市价{formatPrice(item.standardPrice)}元
                      </text>
                    </text>
                    <view className='title-time'>
                      有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
                      {formatTime(item.endTime, "yyyy/MM/dd")}
                    </view>
                  </view>
                </view>
                <view class='right-complete-two'>
                  <view className='right-content'></view>
                </view>
              </view>
            );
          })}
        </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-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'>
          <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 >
  );
});