classroom-app/src/views/student-register/order-detail.tsx

import OHeader from '@/components/m-header';
import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './order-detail.module.less';
import Addres from './component/addres';
import OSticky from '@/components/m-sticky';
import { Button, Cell, CellGroup, Image, Popup, showToast, Tag } from 'vant';
import Payment from '@/views/adapay/payment';
import { useRoute, useRouter } from 'vue-router';
import request from '@/helpers/request';
import { state as baseState } from '@/state';
import { browser, moneyFormat } from '@/helpers/utils';
import OProtocol from '@/components/m-protocol';
import OPopup from '@/components/m-popup';
import UserAuth from './component/user-auth';
import qs from 'query-string';
import ODialog from '@/components/m-dialog';
import { orderStatus } from '@/helpers/constant';
import QrcodePayment from './qrcode-payment';
import { beforeSubmit } from './order-state';

/**
 * 接入jsdk
 * 乐团报名-原生js支付
 * 会员购买-汇付
 */

export default defineComponent({
  name: 'order-detail',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      paymentType: 'adapay' as 'wxpay' | 'adapay', // 支付方式
      orderTimer: null as any,
      paymentStatus: false,
      showQrcode: false,
      qrCodeUrl: '',
      pay_channel: '',
      orderNo: route.query.orderNo,
      orderInfo: {} as any, // 订单信息
      goodsInfos: [] as any, // 订单信息列表
      config: route.query.config ? JSON.parse(route.query.config as any) : {},
      hasFreight: route.query.hf ? false : true, // 是否显示
      freight: '', // 运费
      agreeStatus: true, //是否勾选协议
      showHeader: false,
      authShow: false, // 是否进行实名认证
      selectGoodsId: null as any,
      currentPrice: 0,
      hasInstrument: false, // 是否有乐器
      dialogStatus: false,
      dialogMessage: '',
      submitStatus: false
    });

    const orderType = computed(() => {
      return state.orderInfo.orderType;
    });

    const addressDetails = ref<any>({});

    const getOrderDetails = async () => {
      try {
        const { data } = await request.get(
          '/edu-app/userPaymentOrder/detail/' + state.orderNo
        );
        const goodsInfos = data.goodsInfos || [];
        state.orderInfo = data;
        let hasInstrument = false; // 是否有乐器
        goodsInfos.forEach((item: any) => {
          const img = item.goodsUrl ? item.goodsUrl.split(',')[0] : '';
          item.goodsUrl = img;

          if (item.goodsType === 'INSTRUMENTS') {
            hasInstrument = true;
          }
        });
        state.goodsInfos = goodsInfos;

        if (!addressDetails.value.id) {
          addressDetails.value = data.addresses || {};
        }

        // 判断运费状态
        // 如果没有购买商品，有购买教材则『到付』 其它则免运费
        state.hasInstrument = hasInstrument;
        if (hasInstrument) {
          state.freight = '到付';
        } else {
          state.freight = '免运费';
        }

        // 判断订单状态，如果不是待支付则返回
        // WAIT_PAY: '待支付',
        // PAYING: '支付中',
        // PAID: '已付款',
        // TIMEOUT: '订单超时',
        // FAIL: '支付失败',
        // CLOSED: '订单关闭',
        // REFUNDING: '退款中',
        // REFUNDED: '已退款'
        if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
          // status
          state.dialogStatus = true;
          state.dialogMessage = '订单' + orderStatus[data.status];
        }
      } catch {
        //
      }
    };

    const onConfirm = (val: any) => {
      const config: any = state.config;
      state.pay_channel = val.pay_channel;

      const params = qs.stringify({
        pay_channel: val.pay_channel,
        wxAppId: config.wxAppId,
        alipayAppId: config.alipayAppId,
        paymentType: state.paymentType,
        body: config.body,
        price: config.price,
        orderNo: config.merOrderNo,
        userId: config.userId
      });
      if (val.payCode === 'payResult') {
        window.location.href =
          window.location.origin + '/classroom-app/#/payResult?' + params;
      } else {
        state.qrCodeUrl =
          window.location.origin + '/classroom-app/#/payDefine?' + params;
        state.showQrcode = true;
        state.paymentStatus = false;

        setTimeout(() => {
          getPaymentOrderStatus();
        }, 300);
      }
    };

    // 轮询查询订单状态
    const getPaymentOrderStatus = async () => {
      // 循环查询订单
      // const orderNo = state.orderNo
      const orderTimer = setInterval(async () => {
        // 判断是否在当前路由，如果不是则清除定时器
        if (route.name != 'order-detail') {
          clearInterval(orderTimer);
          return;
        }
        state.orderTimer = orderTimer;
        try {
          const { data } = await request.post(
            '/edu-app/open/userOrder/paymentStatus/' + state.orderNo,
            {
              hideLoading: true
            }
          );

          if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
            // 默认关闭支付二维码弹窗
            state.showQrcode = false;
            clearInterval(state.orderTimer);
            setTimeout(() => {
              checkOrderTypeJump();
            }, 100);
          }
        } catch {
          //
          clearInterval(state.orderTimer);
        }
      }, 5000);
    };

    // 确定支付
    const onSubmit = async () => {
      clearInterval(state.orderTimer);
      if (orderType.value === 'VIP') {
        buyVip(onCallback);
      } else {
        buyOrchestra(onCallback);
      }
    };

    /**
     * @description 回调，判断是否有支付渠道，如果有则直接去支付
     * @returns void
     */
    const onCallback = () => {
      const pt = state.pay_channel;
      // 判断是否有支付方式
      if (pt) {
        const payCode: string = beforeSubmit(state.pay_channel);
        onConfirm({
          payCode,
          pay_channel: pt
        });
      } else {
        if (orderType.value === 'VIP') {
          state.paymentStatus = true;
        } else {
          // 直接去拉取微信支付
          onConfirm({
            payCode: 'payResult',
            pay_channel: 'wx_pub'
          });
        }
      }
    };

    /**
     * @description 会员购买
     * @param callback 回调方式
     */
    const buyVip = async (callback?: any) => {
      try {
        if (!state.agreeStatus) {
          showToast('请先阅读并同意《音乐数字课堂服务协议》');
          return;
        }
        const users = baseState.user.data;
        // 判断是否需要实名认证, 姓名，卡号
        if (!users?.account.realName || !users?.account.idCardNo) {
          state.authShow = true;
          return;
        }
        state.submitStatus = true;
        // const { data } = await request.get(
        //   '/edu-app/userPaymentOrder/detail/' + state.orderNo,
        //   {
        //     hideLoading: false
        //   }
        // );
        const { data } = await request.post(
          '/edu-app/userPaymentOrder/updateReceiveAddress',
          {
            hideLoading: false,
            data: {
              orderNo: state.orderNo,
              orderType: 'VIP'
            }
          }
        );
        state.pay_channel = data.paymentChannel;
        if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
          router.replace({
            path: '/payment-result',
            query: {
              orderNo: state.orderNo
            }
          });
        } else {
          callback && callback();
          state.submitStatus = false;
        }
      } catch {
        //
        state.submitStatus = false;
      }
    };

    /**
     * @description 学生登记 - 汇付
     * @param callback 回调方式
     */
    const buyOrchestra = async (callback: any) => {
      // 请选择收货地址
      if (!addressDetails.value.id && state.hasInstrument) {
        showToast('请选择收货地址');
        return;
      }

      if (!state.agreeStatus) {
        showToast('请先阅读并同意《音乐数字课堂服务协议》');
        return;
      }
      const users = baseState.user.data;
      // 判断是否需要实名认证, 姓名，卡号
      if (!users?.account.realName || !users?.account.idCardNo) {
        state.authShow = true;
        return;
      }

      state.submitStatus = true;
      try {
        const { data } = await request.post(
          '/edu-app/userPaymentOrder/updateReceiveAddress',
          {
            hideLoading: false,
            data: {
              orderNo: state.orderNo,
              orderType: 'SCHOOL_REGISTER',
              receiveAddress: addressDetails.value.id || ''
            }
          }
        );
        state.pay_channel = data.paymentChannel;
        if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
          checkOrderTypeJump();
        } else {
          callback && callback();
          state.submitStatus = false;
        }
      } catch {
        //
        state.submitStatus = false;
      }
    };

    // 有支付结果后回调
    const checkOrderTypeJump = () => {
      // 判断是否是乐团报名
      // if (orderType.value === 'SCHOOL_REGISTER') {
      //   window.location.replace(
      //     'https://mp.weixin.qq.com/s?__biz=MzkxMDMwOTI5Nw==&mid=2247485362&idx=3&sn=9b265d36b5dabe7f9393fc679c367540&chksm=c12c256cf65bac7ae2a865435b950f6e1285afd226356db0ffde815b1ee345f29cfcdb798cc9#rd'
      //   );
      // } else {
      router.replace({
        path: '/payment-result',
        query: {
          orderNo: state.orderNo
        }
      });
      // }
    };

    // 放弃支付时，则取消订单
    const onBackOut = async () => {
      try {
        await request.post(
          '/edu-app/userPaymentOrder/cancelPayment/' + state.orderNo
        );
        router.back();
      } catch {
        //
      }
    };

    // 实名认证成功
    const onAuthSuccess = () => {
      //
      state.authShow = false;
      onSubmit(); // 实名成功后自动支付
    };

    onMounted(() => {
      if (browser().isApp) {
        state.showHeader = true;
      } else {
        state.showHeader = false;
      }

      // 获取收货地址
      let details = sessionStorage.getItem('addressDetails');
      details = details ? JSON.parse(details) : {};
      addressDetails.value = details;
      sessionStorage.removeItem('addressDetails');

      getOrderDetails();
    });
    return () => (
      <>
        {browser().isApp && <OHeader border={false} />}
        <div class={styles.cartConfirm}>
          {/* 只有乐团购买的时候显示收货地址 */}
          {/* {orderType.value === 'SCHOOL_REGISTER' && } */}
          {state.hasInstrument && (
            <div class={styles.cartConfirmBox}>
              <Addres item={addressDetails.value} />
            </div>
          )}

          <CellGroup style={{ margin: 0 }}>
            {state.goodsInfos &&
              state.goodsInfos.map((goods: any) => (
                <Cell class={styles.cellItem}>
                  {{
                    icon: () => (
                      <Image class={styles.img} src={goods.goodsUrl} />
                    ),
                    title: () => (
                      <div class={styles.goodsContent}>
                        <h2>
                          <span>{goods.goodsName}</span>
                          <span class={styles.goodsNum}>
                            x {goods.goodsNum}
                          </span>
                        </h2>
                        <div class={styles.goodsPrice}>
                          <Tag class={styles.brandName}>
                            {goods.goodsType === 'VIP'
                              ? '12个月'
                              : goods.brandName}
                          </Tag>
                          <span
                            class={[
                              styles.goodsNums,
                              goods.paymentCashAmount > 0
                                ? styles.numFont
                                : styles.free
                            ]}>
                            {goods.paymentCashAmount > 0 ? (
                              <>
                                <span class={styles.numPrefix}>¥ </span>
                                {moneyFormat(goods.paymentCashAmount)}
                              </>
                            ) : (
                              '免费'
                            )}
                          </span>
                        </div>
                        <p class={styles.model}>{goods.description}</p>
                      </div>
                    )
                  }}
                </Cell>
              ))}
          </CellGroup>

          {orderType.value === 'SCHOOL_REGISTER' && (
            <Cell
              class={styles.freight}
              title="运费"
              value={state.freight}></Cell>
          )}
        </div>

        <OSticky position="bottom">
          {/* <div class={styles.protocol}>
            <OProtocol
              v-model:modelValue={state.agreeStatus}
              showHeader={state.showHeader}
              style={{ paddingTop: 0, paddingBottom: 0 }}
            />
          </div> */}
          <div class={styles.paymentContainer}>
            <div class={styles.payemntPrice}>
              <p class={styles.needPrice}>
                支付金额：
                <span>
                  <i>¥</i>
                  {moneyFormat(state.orderInfo.currentPrice)}
                </span>
              </p>
            </div>
            <div class={styles.paymentBtn}>
              <Button
                round
                class={[
                  styles.submitBtn
                  // orderType.value === 'VIP' ? styles.vipBtn : '',
                  // orderType.value === 'SCHOOL_REGISTER' ? styles.otherBtn : ''
                ]}
                onClick={onSubmit}
                loading={state.submitStatus}
                disabled={state.submitStatus}>
                提交
              </Button>
            </div>
          </div>
        </OSticky>

        <Popup
          show={state.paymentStatus}
          closeOnClickOverlay={false}
          position="bottom"
          round
          closeOnPopstate
          safeAreaInsetBottom
          style={{ minHeight: '30%' }}>
          <Payment
            paymentConfig={state.orderInfo}
            onClose={() => (state.paymentStatus = false)}
            onBackOut={onBackOut}
            onConfirm={(val: any) => onConfirm(val)}
          />
        </Popup>

        <Popup
          v-model:show={state.showQrcode}
          round
          onClose={() => {
            // 二维码关闭时清除定时器
            clearInterval(state.orderTimer);
          }}>
          <QrcodePayment
            url={state.qrCodeUrl}
            pay_channel={state.pay_channel}
            orderType={orderType.value}
          />
        </Popup>

        <OPopup v-model:modelValue={state.authShow}>
          <UserAuth onSuccess={onAuthSuccess} hideHeader={!browser().isApp} />
        </OPopup>

        <ODialog
          title="提示"
          v-model:show={state.dialogStatus}
          message={state.dialogMessage}
          confirmButtonText="确定"
          onConfirm={() => {
            checkOrderTypeJump();
          }}
        />
      </>
    );
  }
});