web-retail-h5/pages/pay/index.vue

<template>
  <view class="content">
    <view class="index_header"> </view>
    <view class="contxt">
      <!-- 充值 -->
      <template v-if="isRecharge">
        <div class="tit4">{{ '充值金额' }}</div>
        <u-input class="czinputbox" v-model="rechargeAmount"></u-input>
      </template>
      <template v-else>
        <view class="tit">{{ '待支付金额' }}</view>
        <view class="tit1">
          {{ userInfo.currencyIcon
          }}{{ orderData.orderAmount | numberToCurrency }}
        </view>
        <view class="tit2"
          >{{ '请在' }} <view class="tit3">{{ countDown }}</view
          >{{ '内完成支付，否则订单将会被自动取消' }}
        </view>
      </template>
      <view class="kuang">
        <u-collapse
          :value="activeNames"
          ref="collapse"
          @open="change"
          @close="close"
          accordion
          :border="false"
        >
          <u-collapse-item
            name="1"
            v-if="
              !isRecharge && !isShare && userInfo.memberCode != 'BF66886688'
            "
          >
            <view slot="title" class="pf">
              <img src="@/static/images/yhkzf.jpg" alt="" />
              <view>{{ '钱包支付' }}</view>
            </view>
            <view class="quan_i" v-if="payDetail.payAccount1 > 0">
              <view class="tTit">{{ '消费账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account1 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount1 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount2 > 0">
              <view class="tTit">{{ '现金账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account2 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount2 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount3 > 0">
              <view class="tTit">{{ '政策账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account3 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount3 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount4 > 0">
              <view class="tTit">{{ '奖金账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account4 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount4 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount5 > 0">
              <view class="tTit">{{ '重消账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account5 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount5 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount6 > 0">
              <view class="tTit">{{ '积分账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account6 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount6 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount7 > 0">
              <view class="tTit">{{ '鼓励账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account7 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount7 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount8 > 0">
              <view class="tTit">{{ '复购券账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account8 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount8 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount9 > 0">
              <view class="tTit">{{ '全球积分' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account9 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount9 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount10 > 0">
              <view class="tTit">{{ '车奖积分' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account10 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount10 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount12 > 0">
              <view class="tTit">{{ '法宝券' }}</view>
              <view class="lan">
                <view> </view>
                <view>
                  -{{ payDetail.payAccount12 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
            <view class="quan_i" v-show="payDetail.payAccount13 > 0">
              <view class="tTit">{{ '海豆账户' }}</view>
              <view class="lan">
                <view>
                  {{ payDetail.account13 | numberToCurrency | isLocal }}
                </view>
                <view>
                  -{{ payDetail.payAccount13 | numberToCurrency | isLocal }}
                </view>
              </view>
            </view>
          </u-collapse-item>
          <!-- 暂时隐藏在线支付 -->
          <u-collapse-item name="2" v-if="onlinePay">
            <view slot="title" class="pf">
              <img src="@/static/images/under_pay.png" alt="" />
              <view>{{ '在线支付' }}</view>
            </view>
            <view
              class="flex_ac"
              v-show="payList[PAY_AUTH[PAY_TYPE.BAO_FU_WECHAT]]"
            >
              <view class="flex_ac_i">
                <img src="@/static/images/pay_i2.png" alt="" />
                <view>{{ '宝付微信支付' }}</view>
              </view>
              <u-radio-group v-model="whatPay">
                <u-radio
                  activeColor="red"
                  size="14"
                  label=""
                  :name="PAY_TYPE.BAO_FU_WECHAT"
                >
                </u-radio>
              </u-radio-group>
            </view>
            <view
              class="flex_ac"
              v-show="payList[PAY_AUTH[PAY_TYPE.BAO_FU_WECHAT_SCAN]]"
            >
              <view class="flex_ac_i">
                <img src="@/static/images/pay_i2.png" alt="" />
                <view>{{ '宝付微信扫码' }}</view>
              </view>
              <u-radio-group v-model="whatPay">
                <u-radio
                  activeColor="red"
                  size="14"
                  label=""
                  :name="PAY_TYPE.BAO_FU_WECHAT_SCAN"
                >
                </u-radio>
              </u-radio-group>
            </view>
            <view
              class="flex_ac"
              v-show="payList[PAY_AUTH[PAY_TYPE.HUI_FU_WECHAT]]"
            >
              <view class="flex_ac_i">
                <img src="@/static/images/pay_i2.png" alt="" />
                <view>{{ '汇付微信支付' }}</view>
              </view>
              <u-radio-group v-model="whatPay">
                <u-radio
                  activeColor="red"
                  size="14"
                  label=""
                  :name="PAY_TYPE.HUI_FU_WECHAT"
                >
                </u-radio>
              </u-radio-group>
            </view>
            <!-- 微信支付 -->
            <view
              class="flex_ac"
              v-show="payList[PAY_AUTH[PAY_TYPE.WECHAT_PAY]]"
            >
              <view class="flex_ac_i">
                <img src="@/static/images/pay_i2.png" alt="" />
                <view>{{ '微信支付' }}</view>
              </view>
              <u-radio-group v-model="whatPay">
                <u-radio
                  activeColor="red"
                  size="14"
                  label=""
                  :name="PAY_TYPE.WECHAT_PAY"
                >
                </u-radio>
              </u-radio-group>
            </view>
            <!-- 支付宝支付 -->
            <view class="flex_ac" v-show="payList[PAY_AUTH[PAY_TYPE.ALI_PAY]]">
              <view class="flex_ac_i">
                <img src="@/static/images/pay_i3.png" alt="" />
                <view>{{ '支付宝支付' }}</view>
              </view>
              <u-radio-group v-model="whatPay">
                <u-radio
                  activeColor="red"
                  size="14"
                  label=""
                  :name="PAY_TYPE.ALI_PAY"
                >
                </u-radio>
              </u-radio-group>
            </view>
            <view
              class="flex_ac1"
              v-show="payList[PAY_AUTH[PAY_TYPE.HUI_FU_BANK_CARD]]"
            >
              <view class="flex_ac_i">
                <img src="@/static/images/jdBank.jpg" alt="" />
                <view>{{ '汇付银行卡' }} </view>
              </view>
              <view class="pad">
                <view
                  v-for="(item, index) in hfList"
                  :key="index"
                  class="pay_flax flex_bet"
                  @click.prevent="selPayRadio('hf' + index)"
                >
                  <view class="flax_i">
                    <view>{{ item.bankName }} ({{ item.bankNo }})</view>
                    <view class="fixBind" @click="fixBind(item)">解绑</view>
                  </view>

                  <u-radio-group v-model="whatPay">
                    <u-radio
                      activeColor="red"
                      size="14"
                      label=""
                      :name="PAY_TYPE.HUI_FU_BANK_CARD + index"
                    >
                    </u-radio>
                  </u-radio-group>
                </view>
                <view class="pay_flax flax_i" @click="bindBank('hf')">
                  <img class="img1" src="@/static/images/addto.png" alt="" />
                  <view>{{ '绑定银行卡' }}</view>
                </view>
              </view>
            </view>
            <view
              class="flex_ac"
              v-show="payList[PAY_AUTH[PAY_TYPE.TONG_LIAN_WECHAT]]"
            >
              <view class="flex_ac_i">
                <img src="@/static/images/pay_i2.png" alt="" />
                <view>通联微信支付</view>
              </view>
              <u-radio-group v-model="whatPay">
                <u-radio
                  activeColor="red"
                  size="14"
                  label=""
                  :name="PAY_TYPE.TONG_LIAN_WECHAT"
                >
                </u-radio>
              </u-radio-group>
            </view>
            <view
              class="flex_ac1"
              v-show="payList[PAY_AUTH[PAY_TYPE.JING_DONG_BANK_CARD]]"
            >
              <view class="flex_ac_i">
                <img src="@/static/images/jdBank.jpg" alt="" />
                <view>{{ '京东银行卡' }}</view>
              </view>
              <view class="pad">
                <view
                  v-for="(item, index) in jdList"
                  :key="index"
                  class="pay_flax flex_bet"
                  @click.prevent="selPayRadio('jd' + index)"
                >
                  <view class="flax_i">
                    {{ item.bankName }} ({{ item.bankNo }})
                  </view>
                  <u-radio-group v-model="whatPay">
                    <u-radio
                      activeColor="red"
                      size="14"
                      label=""
                      :name="PAY_TYPE.JING_DONG_BANK_CARD + index"
                    >
                    </u-radio>
                  </u-radio-group>
                </view>
                <view class="pay_flax flax_i" @click="bindBank('jd')">
                  <img class="img1" src="@/static/images/addto.png" alt="" />
                  <view>{{ '绑定银行卡' }}</view>
                </view>
              </view>
            </view>
            <view
              class="flex_ac"
              v-show="payList[PAY_AUTH[PAY_TYPE.JING_DONG_H5]]"
            >
              <view class="flex_ac_i">
                <img src="@/static/images/jdBank.jpg" alt="" />
                <view>京东收银台</view>
              </view>
              <u-radio-group v-model="whatPay">
                <u-radio
                  activeColor="red"
                  size="14"
                  label=""
                  :name="PAY_TYPE.JING_DONG_H5"
                >
                </u-radio>
              </u-radio-group>
            </view>
            <view
              class="flex_ac1"
              v-show="payList[PAY_AUTH[PAY_TYPE.TONG_LIAN_BANK_CARD]]"
            >
              <view class="flex_ac_i">
                <img src="@/static/images/jdBank.jpg" alt="" />
                <view>{{ '通联银行卡' }}</view>
              </view>
              <view class="pad">
                <view
                  v-for="(item, index) in tlList"
                  :key="index"
                  class="pay_flax flex_bet"
                  @click.prevent="selPayRadio('tl' + index)"
                >
                  <view class="flax_i">
                    {{ item.bankName }} ({{ item.bankNo }})
                  </view>
                  <u-radio-group v-model="whatPay">
                    <u-radio
                      activeColor="red"
                      size="14"
                      label=""
                      :name="PAY_TYPE.TONG_LIAN_BANK_CARD + index"
                    >
                    </u-radio>
                  </u-radio-group>
                </view>
                <view class="pay_flax flax_i" @click="bindBank('tl')">
                  <img class="img1" src="@/static/images/addto.png" alt="" />
                  <view>{{ '绑定银行卡' }}</view>
                </view>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
      </view>
      <view class="kuang" v-if="!isRecharge">
        <div v-show="specialArea == REGIEST_AREA.id">
          <div class="tit4">{{ '注册会员信息' }}</div>
          <div class="quan">
            <!-- <div class="kuang_i">
              <div>{{ '新会员编号' }}</div>
              <div>{{ orderData.memberCode }}</div>
            </div> -->
            <div class="kuang_i">
              <div>{{ '申请级别' }}</div>
              <div>{{ orderData.pkGradeVal }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '新会员姓名' }}</div>
              <div>{{ orderData.memberName }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '新联系方式' }}</div>
              <div>{{ orderData.phone }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '推荐编号' }}</div>
              <div>{{ orderData.parent }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '推荐姓名' }}</div>
              <div>{{ orderData.parentName }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '发货方式' }}</div>
              <div>{{ orderData.deliveryWayVal }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '运输方式' }}</div>
              <div>{{ orderData.transTypeVal }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '收货人' }}</div>
              <div>{{ orderData.recName }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '收货电话' }}</div>
              <div>{{ orderData.recPhone }}</div>
            </div>
            <div class="kuang_i">
              <div style="white-space: nowrap">{{ '收货地址' }}</div>
              <div>
                {{ orderData.recProvince }}{{ orderData.recCity
                }}{{ orderData.recCounty }}{{ orderData.recAddress }}
              </div>
            </div>
          </div>
        </div>
        <div v-show="specialArea == UPGRADE_AREA.id">
          <div class="tit4">{{ '升级会员信息' }}</div>
          <div class="quan">
            <div class="kuang_i">
              <div>{{ '升级编号' }}</div>
              <div>{{ orderData.memberCode }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '升级姓名' }}</div>
              <div>{{ orderData.memberName }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '升级级别' }}</div>
              <div>{{ orderData.pkGradeVal }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '发货方式' }}</div>
              <div>{{ orderData.deliveryWayVal }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '运输方式' }}</div>
              <div>{{ orderData.transTypeVal }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '收货人' }}</div>
              <div>{{ orderData.recName }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '收货电话' }}</div>
              <div>{{ orderData.recPhone }}</div>
            </div>
            <div class="kuang_i">
              <div style="white-space: nowrap">{{ '收货地址' }}</div>
              <div>
                {{ orderData.recProvince }}{{ orderData.recCity
                }}{{ orderData.recCounty }}{{ orderData.recAddress }}
              </div>
            </div>
          </div>
        </div>
        <div v-show="specialArea == REPURCHASE_AREA.id">
          <div class="tit4">{{ '复购会员信息' }}</div>
          <div class="quan">
            <div class="kuang_i">
              <div>{{ '复购编号' }}</div>
              <div>{{ orderData.memberCode }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '复购姓名' }}</div>
              <div>{{ orderData.memberName }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '发货方式' }}</div>
              <div>{{ orderData.deliveryWayVal }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '运输方式' }}</div>
              <div>{{ orderData.transTypeVal }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '收货人' }}</div>
              <div>{{ orderData.recName }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '收货电话' }}</div>
              <div>{{ orderData.recPhone }}</div>
            </div>
            <div class="kuang_i">
              <div style="white-space: nowrap">{{ '收货地址' }}</div>
              <div>
                {{ orderData.recProvince }}{{ orderData.recCity
                }}{{ orderData.recCounty }}{{ orderData.recAddress }}
              </div>
            </div>
          </div>
        </div>
        <div v-show="specialArea == REISSUE_AREA.id">
          <div class="tit4">{{ '重消会员信息' }}</div>
          <div class="quan">
            <div class="kuang_i">
              <div>{{ '会员编号' }}</div>
              <div>{{ orderData.memberCode }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '会员姓名' }}</div>
              <div>{{ orderData.memberName }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '发货方式' }}</div>
              <div>{{ orderData.deliveryWayVal }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '运输方式' }}</div>
              <div>{{ orderData.transTypeVal }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '收货人' }}</div>
              <div>{{ orderData.recName }}</div>
            </div>
            <div class="kuang_i">
              <div>{{ '收货电话' }}</div>
              <div>{{ orderData.recPhone }}</div>
            </div>
            <div class="kuang_i">
              <div style="white-space: nowrap">{{ '收货地址' }}</div>
              <div>
                {{ orderData.recProvince }}{{ orderData.recCity
                }}{{ orderData.recCounty }}{{ orderData.recAddress }}
              </div>
            </div>
          </div>
        </div>
      </view>
    </view>
    <!-- 输入验证码，密码 -->
    <u-popup :show="isPw" mode="center" closeable @close="closePw">
      <view class="t_tit">{{ '支付验证' }}</view>
      <view class="box">
        <view class="c_tit" v-if="isBank">{{ '请输入短信验证码' }}</view>
        <view class="c_tit" v-else>{{ '请输入密码' }}</view>
        <u--input
          v-if="isBank"
          border="surround"
          v-model="codeValue"
        ></u--input>
        <u--input
          v-else
          border="surround"
          type="password"
          v-model="codeValue"
        ></u--input>
        <u-button
          type="success"
          class="uBtn"
          shape="circle"
          :loading="isLoading"
          loadingText="支付中"
          @tap="payPw()"
          color="linear-gradient(to right, #005BAC, #005BAC )"
          >{{ '立即支付' }}
        </u-button>
      </view>
    </u-popup>
    <!-- 底部 -->
    <view class="footer_f">
      <view class="footer">
        <view class="footer_r">
          <u-button
            type="success"
            class="uBtn"
            shape="circle"
            :loading="isLoading"
            loadingText="支付中"
            :disabled="payBtnDisabled"
            @tap="quickPay(isRecharge)"
            color="linear-gradient(to right, #005BAC, #005BAC )"
          >
            {{ '立即支付' }}
          </u-button>
        </view>
      </view>
    </view>
    <!-- 成功 -->
    <u-modal
      :show="showSucce"
      showConfirmButton
      :content="content"
      confirmColor="#DE3932"
      @confirm="reset"
      ref="uModal"
      :asyncClose="true"
    ></u-modal>
    <!-- 二维码 -->
    <u-popup :show="wxPopup" mode="center" closeable @close="closewxPopup">
      <view class="t_tit">{{ '微信支付' }}</view>
      <view class="pay_code">
        <div ref="qrCodeUrlWx" id="qrCodeUrlWx" class="qrcode"></div>
        <div style="text-align: center">
          <img
            :src="qrcodeimg"
            alt=""
            width="280"
            height="280"
            v-show="qrcodeimg"
          />
        </div>
      </view>
    </u-popup>
    <!-- 支付宝二维码 -->
    <u-popup
      :show="aliQrCodeVisible"
      mode="center"
      closeable
      @close="closewxPopup"
    >
      <view class="t_tit">{{ '支付宝支付' }}</view>
      <view class="pay_code">
        <div ref="qrCodeUrlWx" id="qrCodeUrlWx" class="qrcode"></div>
        <div style="text-align: center">
          <img
            :src="qrcodeimg"
            alt=""
            width="280"
            height="280"
            v-show="qrcodeimg"
          />
        </div>
      </view>
    </u-popup>
    <successDialog @successClose="successClose" ref="successDialog" />
    <u-modal
      @confirm="toUnBind"
      @cancel="isNoBind = false"
      :show="isNoBind"
      title="提示"
      width="100%"
      :showCancelButton="true"
      content="是否确定解绑该银行卡"
    ></u-modal>
  </view>
</template>

<script>
import * as api from '@/config/pay.js'
import QRCode from 'qrcodejs2'
import successDialog from '@/components/successDialog.vue'
import * as act from '@/config/activity.js'
import {
  PAY_TYPE,
  PAY_CHANEL,
  PAY_REDIRECT_URL,
  PAY_AUTH,
} from '@/util/constant'
import {
  REGIEST_AREA,
  UPGRADE_AREA,
  REPURCHASE_AREA,
  REISSUE_AREA,
} from '@/util/specialAreaMap'
var payStatus
export default {
  components: {
    successDialog,
  },
  data() {
    return {
      payList: {},
      isNoBind: false,
      isLoading: false,
      clockTime: '',
      specialArea: '',
      orderCode: '',
      orderData: {
        orderAmount: '',
      },
      countDown: '',
      payDetail: {
        payAccount1: 1,
      },
      paramsPost: '',
      isShare: false, //分享用户第一次爆单
      userInfo: '',
      activeNames: 1,
      whatPay: '',
      PAY_TYPE,
      PAY_CHANEL,
      PAY_REDIRECT_URL,
      PAY_AUTH,
      hfList: [],
      jdList: [],
      tlList: [],
      businessType: '',
      isBank: '',
      isPw: false,
      codeValue: '',
      bindCode: '',
      showSucce: false, //
      sucPay: 0,
      content: '支付成功',
      wxPopup: false,
      aliQrCodeVisible: false,
      luckydrawData: {},
      isRecharge: false,
      rechargeAmount: '',
      qrcodeimg: '',
      onlinePay: true,
      unBindCode: '',
      REGIEST_AREA,
      UPGRADE_AREA,
      REPURCHASE_AREA,
      REISSUE_AREA,
    }
  },
  computed: {
    payBtnDisabled() {
      if (this.isRecharge) {
        return !Object.values(this.payList).some(val => val)
      }
      return false
    },
  },
  async onLoad(options) {
    this.paramsPost = JSON.parse(options.paramsPost)
    // 获取支付配置
    await this.getPayConfig()
    clearInterval(this.clockTime)
    this.pkCountry = uni.getStorageSync('pkCountry')
    if (this.paramsPost.isRecharge) {
      this.activeNames = '2'
      const auth = Object.keys(this.payList).find(key => this.payList[key])
      this.whatPay = Object.keys(this.PAY_AUTH).find(
        key => this.PAY_AUTH[key] === auth
      )
      this.isRecharge = this.paramsPost.isRecharge
      this.businessType = 3
      uni.setNavigationBarTitle({
        title: '充值',
      })
    } else {
      uni.setNavigationBarTitle({
        title: '订单支付',
      })
      this.isRecharge = false
      if (JSON.parse(options.paramsPost).orderType == 4) {
        this.orderCode = this.paramsPost.orderCode
        this.luckydrawData = this.paramsPost.luckydrawData
        // 抽奖支付处理（查询订单支付信息以及显示等）
        this.businessType = 4 //抽奖
        this.specialArea = this.paramsPost.specialArea
        this.getLuckdrawDetail()
      } else {
        this.userInfo = uni.getStorageSync('User')
        if (this.userInfo.registerFans == 0) {
          this.isShare = true
        }

        this.specialArea =
          this.paramsPost.specialArea || this.paramsPost.orderType
        this.orderCode = this.paramsPost.orderCode
        this.businessType = options.businessType
        this.onlinePay = this.stringToBoolean(options.onlinePay || 'true')
        // this.getInfo()

        // 获取订单信息
        this.getOrderInfo()
        if (!this.isShare) {
          // 获取消费信息
          this.getSpendInfo()
        }
      }
    }
  },

  onShow() {
    // 获取银行卡
    // this.getBankList()
  },
  methods: {
    toUnBind() {
      api
        .unBind({
          bindCode: this.unBindCode,
        })
        .then(res => {
          if (res.code == 200) {
            uni.showToast({
              title: '解绑成功',
              icon: 'none',
            })
            this.whatPay = ''
          }

          this.getBankList()
        })
      this.isNoBind = false
    },
    fixBind(item) {
      this.unBindCode = item.bindCode
      this.isNoBind = true
    },
    stringToBoolean(str) {
      return str === 'true' ? true : false
    },
    //查询充值抽奖次数
    getLuckdrawDetail() {
      // 抽奖支付处理（查询订单支付信息以及显示等）
      act
        .getLuckdrawDetail({
          pkBaseId: this.luckydrawData.pkBaseId,
          payNum: this.luckydrawData.payNum,
        })
        .then(res => {
          if (res.code == 200) {
            this.orderData.orderAmount = res.data.toBePaidMoney
            this.payDetail = res.data
            // this.downTime()
          }
        })
    },
    closewxPopup() {
      this.wxPopup = false
      this.aliQrCodeVisible = false
      this.$refs.qrCodeUrlWx.innerHTML = ''
      clearInterval(payStatus)
    },
    // 绑定银行卡
    bindBank(val) {
      uni.navigateTo({
        url: '/pages/pay/bindBank?bank=' + val,
      })
    },

    selPayRadio(val, e) {
      if (e) {
        e.stopPropagation()
      }
      this.whatPay = val
    },
    closePw() {
      this.isPw = false
    },
    successClose() {
      uni.redirectTo({
        url: '/pages/mine/order/index',
      })
    },
    payPw() {
      let url, obj
      // 银行卡
      if (this.isBank) {
        if (this.isBank == PAY_TYPE.HUI_FU_BANK_CARD) {
          url = api.payConfirmHf
        } else if (this.isBank == PAY_TYPE.JING_DONG_BANK_CARD) {
          url = api.payConfirmJd
        } else if (this.isBank == PAY_TYPE.TONG_LIAN_BANK_CARD) {
          url = api.payConfirmTl
        }
        obj = {
          orderCode: this.orderCode,
          bindCode: this.bindCode,
          specialArea: this.specialArea,
          smsCode: this.codeValue,
          pkSettleCountry: this.pkCountry || 1,
          pkCountry: this.pkCountry || 1,
        }
      } else {
        // 钱包支付
        console.log(
          '%c [ this.specialArea ]-910',
          'font-size:13px; background:#777244; color:#bbb688;',
          this.specialArea
        )
        if (
          [REGIEST_AREA.id, UPGRADE_AREA.id].includes(Number(this.specialArea))
        ) {
          url =
            this.specialArea == REGIEST_AREA.id
              ? api.payRegOrder
              : api.upgradePay
        } else {
          url = api.payOthOrder
        }
        obj = {
          orderCode: this.orderCode,
          specialArea: this.specialArea,
          payPwd: this.codeValue,
          pkSettleCountry: this.pkCountry || 1,
          pkCountry: this.pkCountry || 1,
          makerSpaceMember: this.paramsPost?.makerSpaceMember || '',
        }
      }
      if (this.paramsPost?.orderType === 4) {
        //抽奖
        let obj = {
          payPwd: this.codeValue,
          payNum: this.luckydrawData.payNum,
          pkBaseId: this.luckydrawData.pkBaseId,
          pkSettleCountry: this.pkCountry || 1,
          pkCountry: this.pkCountry || 1,
        }
        api.payDrawGift(obj).then(res => {
          if (res.code == 200) {
            // this.$message({
            // 	message: res.msg,
            // 	type: 'success',
            // })
            uni.showToast({
              title: res.msg,
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
            // this.successClose()
          }
        })
      } else {
        url(obj).then(res => {
          if (res.code == 200) {
            this.isPw = false
            if ([REGIEST_AREA.id].includes(Number(this.specialArea))) {
              if (this.isBank) {
                this.isPw = false
              } else {
                this.$refs.successDialog.showSuccess(res.data || this.orderData)
              }
            } else {
              if (this.isRecharge) {
                uni.showToast({
                  title: '充值成功',
                  icon: 'none',
                  duration: 1500,
                })
                setTimeout(() => {
                  uni.navigateBack()
                }, 1500)
              } else {
                uni.showToast({
                  title: '支付成功',
                  icon: 'none',
                  duration: 1500,
                })
                uni.redirectTo({
                  url: '/pages/mine/order/index',
                })
              }
            }
          }
        })
      }
    },
    async quickPay(isRecharge) {
      if (isRecharge) {
        if (!this.rechargeAmount || this.rechargeAmount <= 0) {
          uni.showToast({
            icon: 'none',
            title: '请输入正确的充值金额',
          })
          return
        }
        if (!this.whatPay) {
          uni.showToast({
            icon: 'none',
            title: '请选择支付方式',
          })
          return
        }
      }
      if (this.activeNames == 2) {
        // 非银行卡
        if (
          ![
            PAY_TYPE.HUI_FU_BANK_CARD,
            PAY_TYPE.JING_DONG_BANK_CARD,
            PAY_TYPE.TONG_LIAN_BANK_CARD,
          ].includes(this.whatPay.slice(0, 2))
        ) {
          if (isRecharge) {
            //充值
            api
              .preCharge({
                rechargeAmount: this.rechargeAmount,
              })
              .then(res => {
                this.paramsPost = res.data
                this.orderCode = res.orderCode
                if (this.whatPay == PAY_TYPE.JING_DONG_H5) {
                  this.redirectPay(PAY_CHANEL[this.whatPay])
                } else if (
                  [PAY_TYPE.BAO_FU_WECHAT, PAY_TYPE.HUI_FU_WECHAT].includes(
                    this.whatPay
                  )
                ) {
                  this.scanPayBfWx(PAY_CHANEL[this.whatPay])
                } else if (this.whatPay == PAY_TYPE.TONG_LIAN_WECHAT) {
                  this.weChatPay(PAY_CHANEL[this.whatPay])
                }
              })
          } else {
            if ([PAY_TYPE.JING_DONG_H5].includes(this.whatPay)) {
              this.redirectPay(PAY_CHANEL[this.whatPay])
            } else if (
              [PAY_TYPE.BAO_FU_WECHAT_SCAN, PAY_TYPE.HUI_FU_WECHAT].includes(
                this.whatPay
              )
            ) {
              this.scanPayBfWx(PAY_CHANEL[this.whatPay])
            } else if (this.whatPay == PAY_TYPE.WECHAT_PAY) {
              this.scanPayWx(PAY_CHANEL[this.whatPay])
            } else if (this.whatPay == PAY_TYPE.ALI_PAY) {
              this.scanPayAl(PAY_CHANEL[this.whatPay])
            }
          }
        } else {
          const indexed = this.whatPay.slice(2, 4)
          const payTypeEnum = this.whatPay.slice(0, 2)
          const bankListMap = {
            [PAY_TYPE.HUI_FU_BANK_CARD]: this.hfList[indexed].bindCode,
            [PAY_TYPE.JING_DONG_BANK_CARD]: this.jdList[indexed].bindCode,
            [PAY_TYPE.TONG_LIAN_BANK_CARD]: this.tlList[indexed].bindCode,
          }
          this.bindCode = bankListMap[payTypeEnum]
          const params = {
            businessType: isRecharge ? 3 : this.businessType, //订单类型
            payChannel: PAY_CHANEL[payTypeEnum],
            payType: 3, //银行卡
            bindCode: bankListMap[payTypeEnum],
          }
          if (!isRecharge) {
            Object.assign(params, {
              businessCode: this.orderCode,
            })
          } else {
            try {
              const orderCode = await this.preCharge()
              Object.assign(params, {
                businessCode: orderCode,
              })
              this.orderCode = orderCode
            } catch (error) {
              uni.showToast({
                title: error,
                icon: 'none',
              })
              return
            }
          }
          api.unifiedorder(params).then(response => {
            this.isBank = this.whatPay.slice(0, 2)
            this.isPw = true
            this.checkPayStatus(params)
          })
        }
      } else {
        api.generate().then(res => {
          uni.setStorageSync('mToken', res.msg)
        })
        this.isBank = ''
        this.isPw = true
      }
    },
    scanPayBfWx(val) {
      let params
      if (this.isRecharge) {
        params = {
          businessType: 3, //订单类型充值
          businessCode: this.orderCode,
          payChannel: val,
          payType: 2,
        }
      } else {
        params = {
          businessType: this.businessType, //订单类型充值
          businessCode: this.orderCode,
          payChannel: val,
          payType: 2,
        }
      }
      api.unifiedorder(params).then(res => {
        this.wxPopup = true
        let that = this
        this.$nextTick(() => {
          new QRCode(
            this.$refs.qrCodeUrlWx,
            {
              width: 280,
              height: 280,
              text: res.data,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.Q,
              textAlign: 'center',
            },
            1000
          )
          setTimeout(() => {
            let qrcodeEle = document.getElementById('qrCodeUrlWx')
            let cvs = qrcodeEle.querySelector('canvas')
            that.qrcodeimg = cvs.toDataURL('image/png')
          }, 1000)
        })
      })
      this.checkPayStatus(params)
    },
    // 微信支付
    scanPayWx(val) {
      let params
      if (this.isRecharge) {
        params = {
          businessType: 3, //订单类型充值
          businessCode: this.orderCode,
          payChannel: val,
          payType: 2,
        }
      } else {
        params = {
          businessType: this.businessType, //订单类型充值
          businessCode: this.orderCode,
          payChannel: val,
          payType: 2,
        }
      }
      api.unifiedorder(params).then(res => {
        this.wxPopup = true
        let that = this
        this.$nextTick(() => {
          new QRCode(
            this.$refs.qrCodeUrlWx,
            {
              width: 280,
              height: 280,
              text: res.data,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.Q,
              textAlign: 'center',
            },
            1000
          )
          setTimeout(() => {
            let qrcodeEle = document.getElementById('qrCodeUrlWx')
            let cvs = qrcodeEle.querySelector('canvas')
            that.qrcodeimg = cvs.toDataURL('image/png')
          }, 1000)
        })
      })
      this.checkPayStatus(params)
    },
    getPayAuthToken(payChannel) {
      return new Promise((resolve, reject) => {
        const extParam = {
          isRecharge: !!this.isRecharge,
          orderCode: this.orderCode,
          specialArea: this.specialArea,
        }
        // 将extParam对象转换为JSON字符串，再转换为base64编码
        const extParamBase64 = btoa(JSON.stringify(extParam))
        const params = {
          payChannel: payChannel,
          payType: 2,
          appletFlag: 0,
          businessType: this.isRecharge ? 3 : this.businessType,
          businessCode: this.orderCode,
          extParam: extParamBase64,
        }
        api.unifiedorder(params).then(res => {
          if (res.code === 200) {
            resolve(res.data)
            this.checkPayStatus(params)
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
            reject(res.msg)
          }
        })
      })
    },
    redirectPay(payChannel) {
      this.getPayAuthToken(payChannel).then(url => {
        if (navigator.userAgent.includes('MicroMessenger')) {
          window.location.href = url
        } else {
          window.open(url)
        }
      })
    },
    weChatPay(payChannel) {
      this.getPayAuthToken(payChannel)
        .then(res => {
          const url = PAY_REDIRECT_URL + '&state=' + res + '&payment=0'
          window.open(url)
        })
        .catch(_ => {
          const url = PAY_REDIRECT_URL + '&state=' + 'eroor' + '&payment=0'
          // window.open(url)
          window.location.href = url
          uni.showToast({
            title: url,
            icon: 'none',
          })
        })
    },
    // 支付宝支付
    scanPayAl(val) {
      let params
      if (this.isRecharge) {
        params = {
          businessType: 3, //订单类型充值
          businessCode: this.orderCode,
          payChannel: val,
          payType: 1,
        }
      } else {
        params = {
          businessType: this.businessType, //订单类型充值
          businessCode: this.orderCode,
          payChannel: val,
          payType: 1,
        }
      }
      api.unifiedorder(params).then(res => {
        this.aliQrCodeVisible = true
        let that = this
        this.$nextTick(() => {
          new QRCode(
            this.$refs.qrCodeUrlWx,
            {
              width: 280,
              height: 280,
              text: res.data,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.Q,
              textAlign: 'center',
            },
            1000
          )
          setTimeout(() => {
            let qrcodeEle = document.getElementById('qrCodeUrlWx')
            let cvs = qrcodeEle.querySelector('canvas')
            that.qrcodeimg = cvs.toDataURL('image/png')
          }, 1000)
        })
      })
      this.checkPayStatus(params)
    },
    // 宝付微信支付
    scanPayBfWxJump(val) {
      let params
      if (this.isRecharge) {
        params = {
          businessType: 3, //订单类型充值
          businessCode: this.orderCode,
          payChannel: val,
          payType: 2,
          appletFlag: 0,
        }
      } else {
        params = {
          businessType: this.businessType, //订单类型充值
          businessCode: this.orderCode,
          payChannel: val,
          payType: 2,
          appletFlag: 0,
        }
      }
      api.unifiedorder(params).then(res => {
        let url =
          'https://clooud1-5g23d3je04dda65b-1326540601.tcloudbaseapp.com/jump_mp.html?sign=20f03b022bc39e837056bdbe475632c8&t=1715569339&state=' +
          res.data +
          '&payment=0'
        // https://clooud1-5g23d3je04dda65b-1326540601.tcloudbaseapp.com/jump_mp.html?sign=812bf9ab54292b1fb7161a3a6f7fa0f6&t=1715570889&state=' +
        // res.data + '&payment=0'
        window.open(url)
      })
      this.checkPayStatus(params)
    },
    // 通联微信支付
    scanPayTlWxJump(val) {
      let params
      if (this.isRecharge) {
        params = {
          businessType: 3, //订单类型充值
          businessCode: this.orderCode,
          payChannel: val,
          payType: 2,
          appletFlag: 0,
        }
      } else {
        params = {
          businessType: this.businessType, //订单类型充值
          businessCode: this.orderCode,
          payChannel: val,
          payType: 2,
          appletFlag: 0,
        }
      }
      api.unifiedorder(params).then(res => {
        let url =
          'https://clooud1-5g23d3je04dda65b-1326540601.tcloudbaseapp.com/jump_mp.html?sign=20f03b022bc39e837056bdbe475632c8&t=1715569339&state=' +
          res.data +
          '&payment=1'
        // https://clooud1-5g23d3je04dda65b-1326540601.tcloudbaseapp.com/jump_mp.html?sign=812bf9ab54292b1fb7161a3a6f7fa0f6&t=1715570889&state=' +
        // res.data + '&payment=1'
        window.open(url)
      })
      this.checkPayStatus(params)
    },
    change(e) {
      this.activeNames = e
    },
    close(e) {
      if (e == 1) {
        this.activeNames = 2
      } else {
        this.activeNames = 1
      }
    },
    getPayConfig() {
      return new Promise((resolve, reject) => {
        api.payConfig().then(res => {
          this.payList = res.data
          console.log(this.payList)
          resolve(res.data)
        })
      })
    },
    getBankList() {
      api.jdBankList().then(res => {
        this.jdList = res.data
      })
      // api.hfBankList().then((res) => {
      //   this.hfList = res.data
      // })
      // api.tlBankList().then((res) => {
      //   this.tlList = res.data
      // })
      this.$nextTick(() => {
        this.$refs.collapse.init()
      })
      this.$forceUpdate()
    },
    getOrderInfo() {
      api
        .orderInfo({
          specialArea: this.specialArea,
          orderCode: this.orderCode,
        })
        .then(res => {
          this.orderData = res.data
          this.downTime()
        })
    },
    downTime() {
      let that = this
      this.clockTime = setInterval(() => {
        if (that.orderData.payTime && that.orderData.payTime > 0) {
          that.countDown = this.getTime(this.orderData.payTime--)
        } else {
          that.countDown = '00:00:00'
        }
      }, 1000)
    },
    getSpendInfo() {
      api
        .spendDetails({
          specialArea: this.specialArea,
          orderCode: this.orderCode,
        })
        .then(res => {
          // this.payDetail = res.data
          this.$set(this, 'payDetail', res.data)
          this.$nextTick(() => {
            this.$refs.collapse.init()
          })
          this.$forceUpdate()
        })
    },
    reset() {
      this.$store.dispatch('GetInfo').then(res => {
        uni.reLaunch({
          url: '/pages/index/index',
        })
      })
    },
    // 查询订单状态
    checkPayStatus(data) {
      let that = this
      // 定时器
      payStatus = setInterval(() => {
        if (that.sucPay == 1) {
          // 清除定时器
          clearInterval(payStatus)
          if (
            [REGIEST_AREA.id, UPGRADE_AREA.id].includes(
              Number(this.specialArea)
            )
          ) {
            api.registerInfo(this.orderCode).then(res => {
              this.$refs.successDialog.showSuccess(res.data)
            })
          } else {
            this.wxPopup = false
            this.aliQrCodeVisible = false
            this.showSucce = true
          }
        } else {
          api.payStatus(data).then(res => {
            that.sucPay = res.data
          })
        }
      }, 2000)
    },
    getTime(time) {
      // 转换为式分秒
      let h = parseInt((time / 60 / 60) % 24)
      h = h < 10 ? '0' + h : h
      let m = parseInt((time / 60) % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(time % 60)
      s = s < 10 ? '0' + s : s
      // 作为返回值返回
      return h + ':' + m + ':' + s
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f9f9f9;
  // min-height: calc(100vh-44px);
  height: 100vh;
}

.index_header {
  background: #f9f9f9;
  height: 330rpx;
}

.contxt {
  margin-top: -220rpx;
  padding: 0 26rpx;
  padding-bottom: 300rpx;
}

.tit {
  font-size: 24px;
  font-family:
    PingFang SC-Semibold,
    PingFang SC;
  font-weight: 600;
  text-align: center;
  color: #333333;
  margin-bottom: 20rpx;
}

.tit1 {
  font-size: 24px;
  font-family:
    PingFang SC-Semibold,
    PingFang SC;
  font-weight: 600;
  color: #e02b26;
  text-align: center;
  margin-bottom: 20rpx;
}

.tit2 {
  font-size: 11px;
  font-family:
    PingFang SC-Regular,
    PingFang SC;
  font-weight: 400;
  color: #666666;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tit3 {
  font-size: 14px;
  font-weight: 400;
  color: #f33030;
  margin: 0 5px;
}

.kuang {
  margin-top: 20rpx;
  // padding: 20rpx;
  background: #fff;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
  border-radius: 10px 10px 10px 10px;
}

.pf {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-family:
    PingFang SC-Semibold,
    PingFang SC;
  font-weight: 600;
  color: #333333;

  img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
}

::v-deep .u-radio-group {
  flex: none;
}

.flex_ac {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 18rpx 0;
}

.flex_ac1 {
  display: flex;
  flex-direction: column;
  // align-items: center;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 18rpx 0;
}

.flex_ac_i {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-family:
    PingFang SC-Regular,
    PingFang SC;
  font-weight: 400;
  color: #333333;

  img {
    width: 16px;
    height: 16px;
    margin-right: 20rpx;
  }
}

::v-deep .u-collapse-item__content__text {
  padding: 0px 15px;
}

.pad {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pay_flax {
  display: flex;
  align-items: center;
  margin-top: 15px;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  cursor: pointer;
}

.flax_i {
  flex: 1;
  margin-left: 36rpx;
  display: flex;
}
.fixBind {
  margin-left: 20px;
  color: #d61820;
  font-size: 12px;
}
.flex_bet {
  justify-content: space-between;
}

.img1 {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.footer_f {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 0px -2px 20px 0px rgba(204, 204, 204, 0.5);
}

.footer {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 24rpx 40rpx 20rpx;
  background: #fff;

  .footer_l {
  }

  .footer_r {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 20rpx;
    font-weight: 500;
    color: #333333;
  }
}

::v-deep .u-popup__content {
  width: 80%;
}

.t_tit {
  text-align: center;
  margin-top: 20px;
}

.c_tit {
  margin-bottom: 20px;
}

.box {
  padding: 40px;
  text-align: center;
}

.uBtn {
  margin-top: 20px;
}

.pay_code {
  text-align: center;
  margin-top: 20px;
  padding: 20rpx;

  .qrcodeWx {
  }
}

.qrcode {
  display: none;

  img {
    width: 132px;
    height: 132px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
    box-sizing: border-box;
  }
}

.lan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #666;
  font-size: 12px;
  font-family:
    PingFang SC-Semibold,
    PingFang SC;
  font-weight: 600;
  color: #999;
}

.tTit {
  font-size: 12px;
  font-family:
    PingFang SC-Semibold,
    PingFang SC;
  font-weight: 600;
  color: #666;
}
.tit4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  // margin-top: 30px;
  padding: 20rpx 0 0 30rpx;
}

.quan {
  overflow: hidden;
  border-radius: 10px;
  // box-shadow: 0px 2px 20px 0px #efefef;
  padding: 15px 15px 0 15px;
  // margin-top: 20px;
}
.kuang_i {
  color: #666;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
}
</style>