miniapp-v2/src/components/CompoentsOrder/complete/index.jsx

import React, { useState, useEffect } from "react";
// import { AtSwipeAction } from "taro-ui";
import Taro, { useDidShow, AtSwipeAction } from "@tarojs/taro";
import { getOrderSub, deleteOrder } from "@/services/payOrder";
import formatTime from "@/utils/formatTime";
import food from "@/assets/icons/ProCard/food.png";
import ProCard_hot from "@/assets/icons/ProCard/ProCard_hot.png";
import refund from "@/assets/icons/GuideCheck/refund.png";
import NoData from '@/components/NoData'
import Evaluation from "@/assets/icons/UserCenter/Evaluation.png";
import Null from "@/assets/icons/UserCenter/null_logo.png";
import QRcode from "@/assets/icons/UserCenter/QRcode.png";
import Pay from "@/assets/icons/GuideCheck/Pay_logo.png";
import starOn from "@/assets/icons/GuideCheck/starOn.png";
import starOff from "@/assets/icons/GuideCheck/starOff.png";
import ico_delete from '../../../assets/icons/ProCard/ico_delete.png'
import AlreadyUsed from "../AlreadyUsed";
import TobeWritten from "../TobeWritten";
import "./style.less";

const scoreList = new Array(5).fill(0);
const score = "3.9";

const dict = {
  0: { status: 0, isVerified: 0 },
  1: { status: 1, isVerified: 0 },
  2: { isVerified: 1 },
  3: { status: 9, isVerified: 0 },
};
export default (props) => {
  const { type } = props;
  const [list, setList] = useState([]);
  const [IsPull, setPull] = useState(false);
  const [pageNum, setNumber] = useState(1);
  const [HasNextPage, setHasNextPage] = useState(true);

  useDidShow(() => {
    setNumber(1)
  })

  useEffect(() => {
    if (pageNum) {
      getList();
    }

  }, [pageNum]);

  const pageRefresh = () => {
    // 页面下拉刷新回调
    setPull(true);
  };

  const getList = () => {
    setHasNextPage(false);
    getOrderSub({
      pageNum,
      pageSize: 10,
      isVerified: '',
      ...(type !== undefined ? dict[type] : null),
    }).then((res) => {
      setList(
        pageNum === 1 ? res.records || [] : list.concat(res.records || [])
      );
      setHasNextPage(res.current < res.pages);
      setPull(false);
    });
  };

  const pageLoadMore = () => {
    // 页面上拉加载更多
    if (HasNextPage) {
      setNumber(pageNum + 1);
    }
  };

  const [show, setShow] = useState(false)
  const [showCutover, setShowCutover] = useState(false)

  const onClose = () => {
    setShowCutover(false)
  }
  //评价
  const evaluation = () => {
    setShowCutover(true)

  }

  useEffect(() => {
    // 下拉刷新触发
    if (IsPull) {
      if (pageNum === 1) {
        getList();
      } else {
        setNumber(1);
      }
    }
  }, [IsPull]);

  //核销
  const onWriteOff = (item) => {
    // 本地测试用
    // Taro.navigateTo({
    //   url: `/pages/details/foodDetails/foodDetails?id=${item.shopId}&subOrderId=${item.subOrderId}`,
    // });
    Taro.scanCode({
      onlyFromCamera: true,
      success: (res) => {
        if (res.path) {
          Taro.navigateTo({
            url: `/${res.path}&subOrderId=${item.subOrderId}`,
          });
        } else {
          Taro.showToast({
            title: "非当前小程序生成二维码",
            icon: "none",
            duration: 2000,
          });
        }
      },
      fail: (err) => {
      },
    });
  };

  const slideButtonTap = (e) => {

    deleteOrder(e.orderId || '').then(() => {
      Taro.showToast({
        title: '删除订单成功',
        icon: 'none',
      })
      getList();

    })


  }




  const button = [{
    // type: 'warn',
    // text: '删除',
    extClass: 'test-button',
    src: ico_delete
  }]

  return (
    <scroll-view
      scrollY
      style='height: 90vh;'
      refresher-enabled
      refresher-triggered={IsPull}
      onrefresherrefresh={pageRefresh}
      refresher-background='#fff'
      onscrolltolower={pageLoadMore}
    >
      {
        list.length == 0 ?
          <NoData /> :
          <view className='complete-boxs'>
            <AlreadyUsed showCutover={showCutover} maskClosable={showCutover} onClose={onClose} list={list} />
            {list.map((item, index) => {
              /* 待支付 */
              if (item.status === 0) {
                return (
                  <mp-slideview buttons={button} onButtontap={() => slideButtonTap(item)} icon >

                    <view key={`${type}-${item.orderId}`}  >
                      <view className='OrderNumber'>订单编号：{item.orderId}</view>
                      {/* <TobePaid item={item} /> */}
                      <view class='wrapper'>
                        <view class='left-complete-one'>
                          <image className='left-image-1' src={ProCard_hot}></image>
                          <view className='left-viewText'>
                            返现￥{(item.cashback / 100).toFixed(2)}
                          </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'>
                              ￥{(item.unitPrice / 100).toFixed(2)}元
                            </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'
                            onClick={() => {
                              Taro.navigateTo({
                                url: `/pages/PayOrder/index?orderId=${item.orderId}`,
                              });
                            }}
                          >
                            <image className='right-image' src={Pay} />
                            <view className='right-title'>支付</view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </mp-slideview>



                );
              }
              /* 待核销 */
              if (item.status === 1 && item.isVerified == 0) {
                return (
                  <view key={`${type}-${item.orderId}`}>
                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
                    {/* <TobeWritten item={item} onWrite={onWriteOff} /> */}
                    <view class='wrapper'>
                      <view class='left-complete-one'>
                        <image className='left-image-1' src={ProCard_hot}></image>
                        <view className='left-viewText'>
                          返现￥{(item.cashback / 100).toFixed(2)}
                        </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'>
                            ￥{(item.unitPrice / 100).toFixed(2)}元
                          </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'
                          onClick={() => onWriteOff(item)}
                        >
                          <image className='right-image' src={QRcode} />
                          <view className='right-title'>扫码核销</view>
                        </view>
                      </view>
                    </view>
                  </view>
                );
              }
              /* 已退费 */
              if (item.status === 2 && item.isVerified == 0) {
                return (
                  <view key={`${type}-${item.orderId}`}>
                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
                    <view class='wrapper'>
                      <view class='left-complete-one'>
                        <image className='left-image-1' src={ProCard_hot}></image>
                        <view className='left-viewText'>
                          返现￥{(item.cashback / 100).toFixed(2)}
                        </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'>
                            ￥{(item.unitPrice / 100).toFixed(2)}元
                          </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'>
                          <image className='right-image-2' src={refund} />
                        </view>
                      </view>
                    </view>
                  </view>
                );
              }
              /* 已过期 */
              if (item.status === 9) {
                return (
                  <view key={`${type}-${item.orderId}`}>
                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
                    <view class='wrapper'>
                      <view class='left-complete-one'>
                        <image className='left-image-1' src={ProCard_hot}></image>
                        <view className='left-viewText'>
                          返现￥{(item.cashback / 100).toFixed(2)}
                        </view>
                        {/* 评分 */}
                        <view className='card-box-star'>
                          {scoreList.map((_, index) => {
                            const src = index + 1 <= item.score ? starOn : starOff;
                            return (
                              <image
                                className='card-star-image'
                                key={index}
                                src={src}
                              />
                            );
                          })}
                          <text className='card-star-text'>{item.score}</text>
                        </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'>
                            ￥{(item.unitPrice / 100).toFixed(2)}元
                          </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'>
                          <image className='right-image-2' src={Null} />
                        </view>
                      </view>
                    </view>
                  </view>
                );
              }
              /* 已使用 */
              if (item.isVerified == 1) {
                return (
                  <view key={`${type}-${item.orderId}`}>
                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
                    <view class='wrapper'>
                      <view class='left-complete-one'>
                        <image className='left-image-1' src={ProCard_hot}></image>
                        <view className='left-viewText'>
                          返现￥{(item.cashback / 100).toFixed(2)}
                        </view>
                        {/* 评分 */}
                        <view className='card-box-star'>
                          {scoreList.map((_, index) => {
                            const src = index + 1 <= item.score ? starOn : starOff;
                            return (
                              <image
                                className='card-star-image'
                                key={index}
                                src={src}
                              />
                            );
                          })}
                          <text className='card-star-text'>{item.score}</text>
                        </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'>
                            ￥{(item.unitPrice / 100).toFixed(2)}元
                          </text>
                          <view className='title-time'>
                            核销时间：{" "}
                            {formatTime(item.verifiedDate, "yyyy/MM/dd hh:mm")}
                          </view>
                        </view>
                      </view>
                      <view class='right-complete-two' onClick={() => evaluation()} >
                        <view className='right-content'>
                          <image className='right-image' src={Evaluation} />
                          <view className='right-title'>评价</view>
                        </view>
                      </view>
                    </view>
                  </view>
                );
              }
            })}

            <view className='foot'>这是我的底线</view>
          </view>
      }
    </scroll-view>
  );
};

//  {/* 待核销 */}

//  {/* 待支付 */}

//  {/* 已过期 */}