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

import BlackSpot from "@/assets/icons/GuideCheck/BlackSpot.png";
import Taro from "@tarojs/taro";
import { Button, Textarea, View } 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 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 = () => {
    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>
      <view className='index-navbar'>
        <CustomNav title='售后退款' />
      </view>
      <scroll-view scroll-y style='height: calc(100vh - 65px);' >
        <View className='index-container box-content'>
          <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='cpn-card-text'>
                          <View style={{ flex: '1' }}>{(item.packageDescription).toString().length > 25 ? (item.packageDescription).substring(0, 25) + '...' : (item.packageDescription)}</View>
                          <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>
                </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-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>
        </View>
      </scroll-view>
    </view >
  );
});