feat: 增加收银台代码

lucl

2026-04-02 240b4d5fb10bb71631d895fe499df9680b342de4

feat: 增加收银台代码

 config/dev.js

@@ -14,6 +14,7 @@
const DOMIAN_VALUE = '"DEV"';
const CAR_CONTROL_HOST = '"https://miniprogram.cs-pre.xiaopeng.com"';
const CAR_CONTROL_BIZ_HOST = '"https://apps-biz.deploy-test.xiaopeng.com"';
const PAY_HOST = '"https://pay.deploy-test.xiaopeng.com"';
const COMMON_OSS_HOST = '"https://spre.xiaopeng.com"'; // 官渠通用 oss 资源前缀
const ADMIN_OSS_HOST = '"https://pre-xps01.xiaopeng.com"'; // 运营后台上传的额文件的 oss 域名

@@ -69,6 +70,7 @@
    USER_HOST,
    MARKET_HOST,
    P_MARKET_HOST,
    PAY_HOST,
    MINI_HOST,
    INVITER_HOST,
    TASK_HOST,

 config/prod.js

@@ -13,6 +13,7 @@
const TASK_HOST = '"https://xper.xiaopeng.com"';
const CAR_CONTROL_HOST = '"https://ma.xiaopeng.com"';
const CAR_CONTROL_BIZ_HOST = '"https://apps-biz.xiaopeng.com"';
const PAY_HOST = '"https://pay.xiaopeng.com"';
const COMMON_OSS_HOST = '"https://s.xiaopeng.com"'; // 官渠通用 oss 资源前缀
const ADMIN_OSS_HOST = '"https://xps01.xiaopeng.com"'; // 运营后台上传的额文件的 oss 域名

@@ -62,6 +63,7 @@
    USER_HOST,
    MARKET_HOST,
    P_MARKET_HOST,
    PAY_HOST,
    MINI_HOST,
    INVITER_HOST,
    TASK_HOST,

 src/actions/cashier.ts

New file
@@ -0,0 +1,53 @@
import {
  API_GET_ORDER_INFO,
  API_PAY,
  API_GET_PAY_RESULT,
} from '../constants/api'
import { createAction } from '../utils/redux'
import { APPID } from '../constants/app'

const ENV = process.env.TARO_ENV;

// 获取小鹏用户信息
export const dispatchGetOrderInfo = (payload, autoLogin = true) => {
  payload.wxAppId = APPID;

  return createAction({
    url: API_GET_ORDER_INFO,
    type: '',
    method: 'POST',
    payload,
    autoLogin,
    showToast: true,
  }, true)
}

export const dispatchMakePay = (payload, autoLogin = true) => {
  if (ENV === 'alipay') {
    payload.appId = APPID;
  } else {
    payload.wxAppId = APPID;
  }

  return createAction({
    url: API_PAY,
    type: '',
    method: 'POST',
    payload,
    autoLogin,
    showToast: true,
  }, true)
}

export const dispatchGetResult = (payload, autoLogin = true) => {
  payload.wxAppId = APPID;

  return createAction({
    url: API_GET_PAY_RESULT,
    type: '',
    method: 'POST',
    payload,
    autoLogin,
    showToast: true,
  }, true)
}

 src/actions/im.ts

New file
@@ -0,0 +1,19 @@
import {
  API_SUBSCRIBECREATE_FREE,
} from '../constants/api';
import { createAction } from '../utils/redux';
import { APPID, AppidKeyNameMap } from '../constants/app';

const ENV = process.env.TARO_ENV;

// 订阅一次性消息 无需登录
export const dispatchSubscribeCreateFree = payload => {
  payload[AppidKeyNameMap[ENV]] = APPID;
  return createAction({
    url: API_SUBSCRIBECREATE_FREE,
    type: '',
    method: 'POST',
    payload,
    showToast: true,
  }, false);
}

 src/app.config.ts

@@ -15,6 +15,7 @@
    'pages/user/login',
    'pages/map/index',
    'pages/webpage/index',
    'pages/cashier/index',
  ];

  subPackages = [

 src/constants/api.ts

@@ -17,6 +17,8 @@
//@ts-ignore
export const _P_MARKET_HOST = P_MARKET_HOST
//@ts-ignore
export const _PAY_HOST = PAY_HOST
//@ts-ignore
export const _MINI_HOST = MINI_HOST
//@ts-ignore
export const _XP_SECRET = XP_SECRET
@@ -132,4 +134,12 @@
// 高德地图KEY
export const AMAP_KEY = '8157fdfa13878d3f7bf69c560c8a846a'

// cashier
export const API_PAY = `${_PAY_HOST}/api/v1/mini/pay`
export const API_GET_PAY_RESULT = `${_PAY_HOST}/api/v1/mini/query`
export const API_GET_ORDER_INFO = `${_PAY_HOST}/api/v1/mini/cashier`

// subscribe
export const API_SUBSCRIBECREATE_FREE = `${_MINI_HOST}/api/subscribeFree/create`



 src/pages/cashier/assets/ic_se_default.png

 src/pages/cashier/assets/ic_select.png

 src/pages/cashier/assets/ic_wx.png

 src/pages/cashier/assets/ic_zfb.png

 src/pages/cashier/assets/ic_zmf.png

 src/pages/cashier/components/cashier-modal/index.less

New file
@@ -0,0 +1,70 @@
.cashier-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(#0F1521, 0.8);
  }

  .modal-wrap {
    position: relative;
    z-index: 1;
    width: 630px;
    height: auto;
    background: #FFFFFF;
    border-radius: 16px;

    .modal-top {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 224px;
      padding: 0 48px;
      font-family: 'PingFang SC';
      font-weight: 500;
      font-size: 32px;
      line-height: 48px;
      text-align: center;
      color: rgba(0, 0, 0, 0.9);
      border-radius: 16px 16px 0 0;
    }

    .modal-btns {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid rgba(0, 0, 0, 0.1);

      .modal-btn {
        flex: 1;
        height: 96px;
        font-weight: 400;
        font-size: 30px;
        line-height: 96px;
        text-align: center;
        color: rgba(0, 0, 0, 0.9);
        background: transparent;
        border-right: 1px solid rgba(0, 0, 0, 0.1);

        &.single {
          color: #5A960A;
          border-right: none;
        }
      }
    }

  }
}

 src/pages/cashier/components/cashier-modal/index.tsx

New file
@@ -0,0 +1,71 @@
import { PureComponent } from 'react';
import { View, Button } from '@tarojs/components';
import { jumpToHome } from '../../../../utils/jump';

import './index.less';

type Props = {
  show?: boolean
};

type State = {
  isError: boolean
};

const ENV = process.env.TARO_ENV;

export default class CashierModal extends PureComponent<Props, State> {

  state = {
    isError: false,
  }

  onLaunchAppError = (e) => {
    this.setState({ isError: true });
  }

  render() {
    const { isError } = this.state;
    const { show } = this.props;

    if (!show) {
      return null;
    }

    if (ENV === 'weapp') {
      return (
        <View className='cashier-modal' catchMove>
          <View className='mask'></View>
          {isError ? (
            <View className='modal-wrap'>
              <View className='modal-top'>无法跳转小鹏汽车App，请手动打开App查看您的订单</View>
              <View className='modal-btns'>
                <View className='modal-btn single' onClick={() => jumpToHome()}>知道了</View>
              </View>
            </View>
          ) : (
            <View className='modal-wrap'>
              <View className='modal-top'>你已完成支付，可以返回App查看你的订单</View>
              <View className='modal-btns'>
                <View className='modal-btn' onClick={() => jumpToHome()}>继续逛逛</View>
                <Button className='modal-btn single' openType='launchApp' appParameter='wechat' onError={this.onLaunchAppError}>返回小鹏汽车App</Button>
              </View>
            </View>
          )}
        </View>
      );
    }

    return (
      <View className='cashier-modal' catchMove>
        <View className='mask'></View>
        <View className='modal-wrap'>
          <View className='modal-top'>你已完成支付，可以手动返回App查看你的订单</View>
          <View className='modal-btns'>
            <View className='modal-btn single' onClick={() => jumpToHome()}>知道了</View>
          </View>
        </View>
      </View>
    );
  }
}

 src/pages/cashier/index.config.ts

New file
@@ -0,0 +1,3 @@
export default {
  navigationBarTitleText: '收银台',
};

 src/pages/cashier/index.less

New file
@@ -0,0 +1,132 @@

.cashier-page {
  height: 100vh;
  padding: 0 48px;
  color: #000;
  background: #fff;
  box-sizing: border-box;

  .order-info {
    padding: 88px 0 58px;
    border-bottom: 1px solid rgba(#000000, 0.15);
    .amount-name {
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 24px;
      line-height: 36px;
      color: #000000;
      text-align: center;
    }
    .amount-value {
      margin: 20px 0 90px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 500;
      font-size: 40px;
      line-height: 40px;
      text-align: center;
      color: #000000;
      .count {
        font-size: 80px;
        line-height: 80px;
      }
    }

    .option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 28px;
      color: rgba(0, 0, 0, 0.6);
      .option-name {
        text-align: left;
      }
      .option-value {
        text-align: right;
        width: 450px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  .list-title {
    margin-top: 60px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    color: #000000;
  }

  .pay-list {
    margin-top: 24px;
    .pay-item {
      display: flex;
      align-items: center;
      height: 128px;
      padding: 0 32px;
      margin-bottom: 20px;
      background: rgba(0, 0, 0, 0.03);
      border-radius: 4px;
      .icon {
        width: 64px;
        height: 64px;
        margin-right: 24px;
      }
      .name {
        flex: 1;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 28px;
        color: #000000;
        .logo {
          width: 150px;
          height: 30px;
        }
        .text {
          display: block;
          margin-top: 4px;
          font-size: 22px;
          color: rgba(#000000, 0.5);
        }
      }
      .ic-right {
        width: 32px;
        height: 32px;
      }
    }
  }

  .btn-wrap {
    position: absolute;
    left: 0;
    bottom: 112px;
    width: 100%;
    .btn-pay {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 550px;
      height: 96px;
      margin: 0 auto;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 600;
      font-size: 28px;
      color: #FFFFFF;
      background: #1A1A1A;
      border-radius: 4px;
      &.disabled {
        background: #B3B3B3;
      }
    }
  }
}

 src/pages/cashier/index.tsx

New file
@@ -0,0 +1,465 @@
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { Component } from 'react';
import { connect } from 'react-redux';
import { View, Text, Image, Button } from '@tarojs/components';
import { dispatchGetOrderInfo, dispatchMakePay, dispatchGetResult } from '../../actions/cashier';
import { getStorage } from '../../utils/tools';
import { jumpTo } from '../../utils/jump';
import { dispatchSubscribeCreateFree } from '../../actions/im';
import { _UID, _CASHIER_SEARCH_TIME } from '../../constants/api';
import CashierModal from './components/cashier-modal';

import './index.less';

type Props = {
  cashier: any
  dispatchGetOrderInfo: any
  dispatchMakePay: any
  dispatchGetResult: any
  dispatchSubscribeCreateFree: any
}

type State = {
  orderData: any
  payType: number | string
  showModal: boolean
}

const ENV = process.env.TARO_ENV;

// @ts-ignore
@connect(() => ({}), { dispatchGetOrderInfo, dispatchMakePay, dispatchGetResult, dispatchSubscribeCreateFree })
/**
 * 收银台页面
 *
 * 页面路径: /pages/cashier/index
 *
 * 页面参数 (router params):
 * @param {string} token   - 必填，支付中心预下单接口返回的支付凭证，用于查询订单信息和发起支付
 * @param {string} from    - 选填，调用来源标识，决定支付成功后的行为：
 *                           - 'miniapp': 触发 cashier:paySuccess 事件通知并返回上一页，适用于小程序内页面调起收银台的场景
 *                           - 'app':     展示支付成功弹窗（CashierModal），适用于 App 端 webview 调起的场景
 *                           - 其他/不传:  跳转到 returnUrl 对应的 webview 页面（默认行为）
 * @param {string} carType - 选填，车型标识。传入后在微信端支付前会触发订阅消息授权弹窗
 *
 * 跳转示例:
 *   jumpTo({ url: `/pages/cashier/index?token=${token}&from=miniapp`, type: 'nav' })
 */
export default class Cashier extends Component<Props, State> {
  /** 支付凭证，来源于支付中心预下单接口 */
  token: string;
  /** 支付结果轮询定时器 */
  timer: any;
  /** 剩余轮询次数 */
  checkTimes: number;
  openId: string;
  /** 支付接口返回的数据，包含 businessId、businessOrderId、returnUrl 等 */
  payData: any = {};
  loading = false;
  $instance: any = getCurrentInstance();
  $app: any = Taro.getApp().$app;
  /** 车型标识，传入后微信端会触发订阅消息授权 */
  carType: any;
  /** 调用来源：'miniapp' | 'app' | '' */
  from: string;
  /** onAppShow 监听句柄，用于银联支付回调检测 */
  appShowListener: any;

  constructor(props) {
    super(props);
    this.state = {
      orderData: {},
      payType: '',
      showModal: false,
    };

    // 解析页面参数
    this.token = this.$instance.router.params.token || '';
    this.carType = this.$instance.router.params.carType || '';
    this.from = this.$instance.router.params.from || '';
    this.timer = null;
    this.checkTimes = 5;
    this.appShowListener = null;
  }

  componentDidMount() {
  }

  componentWillUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.appShowListener) {
      Taro.offAppShow(this.appShowListener);
    }
  }

  componentDidShow() {
    this.$app.xpReportShow();
    this.$app.xpReportSend({ pageId: 'P10036', buttonId: 'B002' });
    this.getOrderInfo();
  }

  componentDidHide() {
    this.$app.xpReportHide();
  }

  // 查询订单信息
  getOrderInfo = () => {
    Taro.showLoading({ title: '正在加载...' });
    getStorage(_UID)
      .then(res => {
        return this.props.dispatchGetOrderInfo({
          token: this.token,
          payScene: ENV === 'alipay' ? 9 : 6,
          preUid: res,
        })
      })
      .then(orderRes => {
        let payType = this.state.payType;
        const _payTypeList = orderRes && orderRes.payTypeList || [];
        const payTypeList = _payTypeList.sort(a => a.payType === 10 ? -1 : 1) || [];
        payTypeList.forEach(item => {
          if (payType) {
            return;
          }
          if (ENV === 'weapp') {
            if (item.payType === 1 || item.payType === 11 || item.payType === 17 || item.payType === 19) {
              payType = item.payType;
            }
          } else if (ENV === 'alipay') {
            if (item.payType === 2 || item.payType === 10 || item.payType === 18 || item.payType === 11) {
              payType = item.payType;
            }
          }
        });

        this.setState({
          payType,
          orderData: {
            ...orderRes,
            payTypeList,
          },
        })
      })
      .catch(console.error)
      .finally(() => Taro.hideLoading());

  }

  // 支付按钮触发
  handlePayment = async () => {
    if (this.loading) {
      return;
    }
    this.loading = true;

    if (ENV === 'weapp' && this.carType) {
      await this.requestSubscribeMessage();
    }

    const { payType } = this.state;
    const { openId } = await this.$app.getIdData() || {};
    getStorage(_UID)
      .then(res => {
        return this.props.dispatchMakePay({
          token: this.token,
          payScene: ENV === 'alipay' ? 9 : 6,
          payType,
          preUid: res,
          wxOpenId: openId,
        });
      })
      .then(payRes => {
        if (payRes) {
          this.payData = payRes;
          if (payType === 19) {
            // 银联云闪付支付
            this.unionPay(payRes.actionData);
          } else if (ENV === 'alipay') {
            this.aliPay(payRes.actionData && payRes.actionData.aliOrderInfo, payType);
          } else {
            this.wxPay(payRes.actionData);
          }
        }
      })
      .catch(err => {
        console.log(err)
      })
      .then(() => this.loading = false);
  }

  // 银联云闪付支付
  unionPay = (data) => {
    // 根据后端返回的 actionData 结构调用银联支付
    // 具体参数需要根据银联 SDK 文档确定
    if (!data || !data.appId || !data.path) {
      this.payFail(data)
      return
    }
    Taro.navigateToMiniProgram({
      appId: data.appId,
      path: data.path.indexOf('tn') > 0 ? data.path : `${data.path}?tn=${data.tn}`,
      // extraData: {
      //   foo: 'bar'
      // },
      // envVersion: 'trial',
      success: () => {
        const handleAppShow = (res) => {
          if (res && res.scene === 1038) {
            Taro.offAppShow(this.appShowListener);
            this.paySuccess({})
          }
        }
        this.appShowListener = handleAppShow
        Taro.onAppShow(handleAppShow)
      },
      fail: this.payFail
    })
  }

  // 微信支付
  wxPay = (data) => {
    Taro.requestPayment({
      timeStamp: data.timeStamp,
      nonceStr: data.nonceStr,
      package: data.package,
      signType: data.signType,
      paySign: data.sign,
      success: this.paySuccess,
      fail: this.payFail,
    })
  }

  // 支付宝支付
  aliPay = (tradeNO, payType) => {
    const data = payType === 10 ? { orderStr: tradeNO } : { tradeNO };
    // @ts-ignore
    // eslint-disable-next-line no-undef
    my.tradePay({
      ...data,
      success: this.paySuccess,
      fail: this.payFail,
    })
  }

  // 支付成功回调
  paySuccess = (data) => {
    console.log('paySuccess:');
    console.log(data);

    clearInterval(this.timer);
    this.checkTimes = _CASHIER_SEARCH_TIME;

    if (data) {
      this.timer = setInterval(() => {
        const { checkTimes } = this;
        if (checkTimes > 0) {
          this.props.dispatchGetResult({
            businessId: this.payData.businessId,
            businessOrderId: this.payData.businessOrderId,
            token: this.token,
          })
            .then(checkRes => {
              if (checkRes.payStatus === 1 || checkRes.payStatus === 5) { // 1支付成功，5芝麻分授权成功
                // 检查订单支付成功
                clearInterval(this.timer);

                if (this.from === 'app') {
                  this.setState({ showModal: true });
                  return;
                }

                if (this.from === 'miniapp') {
                  Taro.eventCenter.trigger('cashier:paySuccess', {
                    businessId: this.payData.businessId,
                    businessOrderId: this.payData.businessOrderId,
                    payStatus: checkRes.payStatus,
                  });
                  jumpTo({ type: 'back' });
                  return;
                }

                jumpTo({
                  url: `/pages/webpage/index?pageUrl=${encodeURIComponent(this.payData.returnUrl)}`,
                  type: 'red'
                })
              } else {
                // 未成功，继续轮询
                this.checkTimes--;
              }
            })
            .catch(err => {
              console.log(err);
              this.checkTimes--;
            });
        } else if (this.timer) {
          clearInterval(this.timer);
          Taro.showToast({
            title: '状态异常，稍候查询',
            icon: 'none',
          });
        }
      }, 1000);
    }
  }

  // 支付失败回调
  payFail = data => {
    Taro.showToast({
      title: '支付失败',
      icon: 'none',
    });
    console.error(data);
  }

  selectPayType = _payType => {
    const { payType } = this.state;
    this.setState({ payType: _payType === payType ? '' : _payType });
  }

  requestSubscribeMessage = () => {
    return new Promise((resolve) => {
      let tmplIds = [ 'bXVVcmoaI6uZ4aq6M38wRAMfM2tUVLV07WC9fEuyi3k', '0kLTB3EVD-Y9f2gqNhsMf3lDfoek2YdO-UiFsYyJE7o', 't8bRrfiTheK_n-XbPm5XfQ-XKhpOF1ZFD0g0Rk-4jis' ];
      Taro.requestSubscribeMessage({
        tmplIds,
        success: async res => {
          const acceptId: any = [];
          tmplIds.forEach(item => {
            if (res[item] === 'accept') {
              acceptId.push(item);
            }
          });
          if (acceptId.length) {
            const { openId } = await this.$app.getIdData() || {};
            this.props.dispatchSubscribeCreateFree({
              scene: 'NOT_G6_PREORDER_PAYMENT',
              openId: openId,
              templateIds: acceptId
            })
              .then(codeRes => {
                console.log(codeRes);
              })
              .catch(console.error);
          }
        },
        complete: () => {
          resolve({});
        }
      });
    });
  }

  render() {
    const { orderData, payType, showModal } = this.state;
    const payTypeList = orderData && orderData.payTypeList || [];

    return (
      <View className='cashier-page'>

        <View className='order-info'>
          <View className='amount-name'>待支付金额</View>
          <View className='amount-value'>
            <Text>¥ </Text>
            <Text className='count'>{orderData.amount ? (orderData.amount / 100).toFixed(2) : ''}</Text>
          </View>

          <View className='option'>
            <Text className='option-name'>订单号</Text>
            <Text className='option-value'>{orderData.bizOrderId}</Text>
          </View>
          <View className='option'>
            <Text className='option-name'>订单标题</Text>
            <Text className='option-value'>{orderData.title}</Text>
          </View>
        </View>

        {this.from !== 'app' && (
          <View className='list-title'>支付方式</View>
        )}

        {ENV === 'alipay' && this.from !== 'app' && (
          <View className='pay-list'>
            {payTypeList.map(item => {
               //普通支付宝：2， 芝麻分：10， 建行在支付宝：18, 银联：11
              if (item.payType === 2 || item.payType === 18 || item.payType === 11) {
                return (
                  <View key={item.payType} className='pay-item' onClick={() => this.selectPayType(item.payType)}>
                    <Image className='icon' src={require('./assets/ic_zfb.png')}></Image>
                    <View className='name'>支付宝</View>
                    {payType === item.payType ? (
                      <Image className='ic-right' src={require('./assets/ic_select.png')}></Image>
                    ) : (
                      <Image className='ic-right' src={require('./assets/ic_se_default.png')}></Image>
                    )}
                  </View>
                );
              }
              if (item.payType === 10) {
                return (
                  <View key={item.payType} className='pay-item' onClick={() => this.selectPayType(item.payType)}>
                    <View className='name'>
                      <Image className='logo' src={require('./assets/ic_zmf.png')}></Image>
                      <Text className='text'>芝麻分≥600有机会免意向金</Text>
                    </View>
                    {payType === item.payType ? (
                      <Image className='ic-right' src={require('./assets/ic_select.png')}></Image>
                    ) : (
                      <Image className='ic-right' src={require('./assets/ic_se_default.png')}></Image>
                    )}
                  </View>
                );
              }
            })}
          </View>
        )}

        {ENV === 'weapp' && this.from !== 'app' && (
          <View className='pay-list'>
            {payTypeList.map(item => {
              //普通微信：1, 建行在微信：17
              if (item.payType === 1 || item.payType === 11 || item.payType === 17) {
                return (
                  <View key={item.payType} className='pay-item' onClick={() => this.selectPayType(item.payType)}>
                    <Image className='icon' src={require('./assets/ic_wx.png')}></Image>
                    <View className='name'>微信支付</View>
                    {payType === item.payType ? (
                      <Image className='ic-right' src={require('./assets/ic_select.png')}></Image>
                    ) : (
                      <Image className='ic-right' src={require('./assets/ic_se_default.png')}></Image>
                    )}
                  </View>
                );
              }
              if (item.payType === 19) {
                return (
                  <View key={item.payType} className='pay-item' onClick={() => this.selectPayType(item.payType)}>
                    <Image className='icon' src={item.icon}></Image>
                    <View className='name'>{item.description}</View>
                    {payType === item.payType ? (
                      <Image className='ic-right' src={require('./assets/ic_select.png')}></Image>
                    ) : (
                      <Image className='ic-right' src={require('./assets/ic_se_default.png')}></Image>
                    )}
                  </View>
                );
              }
            })}
          </View>
        )}

        <View className='btn-wrap'>
          {payType ? (
            <Button key={payType} className='btn-pay' onClick={this.handlePayment}>确认支付</Button>
          ) : (
            <Button key='disabled' className='btn-pay disabled'>请选择支付方式</Button>
          )}
        </View>

        {/* app来源时出现弹窗 */}
        <CashierModal show={showModal} />

      </View>
    )
  }
}