yicangzongtai_app_240321/pages/order/pay.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666"></navbar>
    <view class="u-text-center u-plr30">
      <view class="mt82">
        <view class="u-ED3D07 u-font44 u-bold">
          ￥
          <text class="u-ml10">{{ total_amount }}</text>
        </view>
        <view class="u-999 u-font22">付款金额</view>
      </view>

      <view class="u-bg-fff pay-select">
        <radio-group>
          <label class="u-flex-center-sb" @click="payWay(0)">
            <view class="u-flex-center">
              <text class="iconfont3 pay">&#x100dc;</text>
              <!-- <image class="img60" :src="imgUrl + '/weChat2.png'"></image> -->
              <view class="u-ml20 u-font28 u-181818">
                余额支付<text class="u-font24 u-999">（可用余额 ¥ {{ balance || 0 }}）</text>
              </view>
            </view>
            <view>
              <radio value="0" checked />
            </view>
          </label>
          <label class="u-flex-center-sb u-mt30" @click="payWay(1)">
            <view class="u-flex-center">
              <image class="img60" :src="imgUrl + '/weChat2.png'"></image>
              <view class="u-ml20 u-font28 u-181818">微信支付</view>
            </view>
            <view>
              <radio value="1" />
            </view>
          </label>
          <label class="u-flex-center-sb u-mt30" @click="payWay(2)">
            <view class="u-flex-center">
              <image class="img60" :src="imgUrl+'/alipay.png'"></image>
              <view class="u-ml20 u-font28 u-181818">支付宝支付</view>
            </view>
            <view>
              <radio value="2" />
            </view>
          </label>
          <!-- <label class="u-flex-center-sb u-mt30" @click="payWay(10)">
            <view class="u-flex-center">
              <image class="img60" :src="imgUrl+'/alipay.png'"></image>
              <view class="u-ml20 u-font28 u-181818">支付宝（Adapay）</view>
            </view>
            <view>
              <radio value="2" />
            </view>
          </label> -->
          <!-- <label class="u-flex-center-sb u-mt30" @click="payWay(14)">
            <view class="u-flex-center">
              <view class="iconfont3 bank-icon">&#xe607;</view>
              <view class="u-ml20 u-font28 u-181818">银行卡支付</view>
            </view>
            <view>
              <radio value="14" />
            </view>
          </label>
          <label class="u-flex-center-sb u-mt30" @click="payWay(12)">
            <view class="u-flex-center">
              <image class="img60" :src="imgUrl+'/alipay.png'"></image>
              <view class="u-ml20 u-font28 u-181818">支付宝（慧收钱）</view>
            </view>
            <view>
              <radio value="12" />
            </view>
          </label> -->
          <!-- <label class="u-flex-center-sb u-mt30" @click="payWay(3)">
						<view class="u-flex-center">
							<image class="img60" :src="imgUrl + '/money.png'"></image>
							<view class="u-ml20 u-font28 u-181818">
								余额支付
								<text class="u-font24 u-999">（可用余额 ¥ {{ balance }}）</text>
							</view>
						</view>
						<view><radio value="3" /></view>
					</label> -->
          <template v-if="banksList.length && false">
            <label class="u-mt30 bank" @click="payBankWay(14, item.id)" v-for="(item, index) in banksList"
              :key="item.id">
              <view class="box">
                <view class="left">
                  <image :src="item.logo" mode="widthFix"></image>
                  <text class="bank_name">{{item.local_bank_name || item.bank_name}}</text>
                  <text>{{item.local_bank_card_type_name}}</text>
                </view>
                <view class="name">（{{$mUtil.bankAccount(item.card_id)}}）</view>
              </view>
              <view>
                <radio :value="String(item.id)" />
              </view>
            </label>
          </template>
        </radio-group>
        <!-- <label class="u-flex-center-sb u-mt50 banks" @click="banksHandler()">
          <view class="u-flex-center">
            <u-icon name="plus" color="#9A9A9A"></u-icon>管理银行卡
          </view>
        </label> -->
      </view>

      <view class="pay-btn">
        <button class=" u-flex-center u-btn-two" @click="$u.throttle(submitPay, 500)">
          <view class=" u-flex-center">
            <view>去付款</view>
            <uni-countdown :backgroundColor="'none'" :color="'#ffffff'" :splitorColor="'#ffffff'"
              :show-day="time1[0] > 0" :day="time1[0]" :hour="time1[1]" :minute="time1[2]" :second="time1[3]">
            </uni-countdown>
          </view>
        </button>
        <!-- <button class=" u-flex-center u-btn-two" v-if="payStatus == 14" @click="showBanksModel = true">
          <view class=" u-flex-center">
            <view>选择快捷银行卡支付</view>
            <uni-countdown :backgroundColor="'none'" :color="'#ffffff'" :splitorColor="'#ffffff'"
              :show-day="time1[0] > 0" :day="time1[0]" :hour="time1[1]" :minute="time1[2]" :second="time1[3]">
            </uni-countdown>
          </view>
        </button> -->
        <view class="u-flex-center u-mt20 u-999 u-font22">
          <view>
            请在
            <!-- </view> {{$mUtil.patTime(expired_pay_time)}}<view> -->
            <!-- </view> {{payMinutes}}<view> -->
          </view>
          {{ payMinutes }}
          <view>分钟内完成付款，否则订单失效。</view>
        </view>
      </view>
    </view>

    <!--页面加载动画-->
    <ldLoading isFullScreen :active="loading"></ldLoading>

    <!-- 银行卡弹窗 -->
    <u-popup v-model="showBanksModel" mode="bottom" height="65%" border-radius="20" closeable safe-area-inset-bottom
      :mask-close-able="false" z-index="500">
      <view class="banks-content">
        <view class="add" @click="banksHandler()">+ 管理银行卡</view>
        <view class="header">银行卡支付</view>
        <template>
          <view class="banks" v-if="banksList.length > 0">
            <scroll-view class="scroll-box" scroll-y="true">
              <radio-group>
                <label class="item" :class="{'gray': !item.valid}" v-for="(item, index) in banksList" :key="item.id"
                  @click="payBankWay(14, item.id)">
                  <view class="box">
                    <image :src="item.logo" mode="widthFix"></image>
                    <text class="bank_name">{{item.local_bank_name || item.bank_name}}</text>
                    <text>{{item.local_bank_card_type_name}}</text>
                  </view>
                  <view class="box">
                    <view class="name">（{{$mUtil.bankAccount(item.card_id)}}）</view>
                    <radio :value="String(item.id)" :checked="card_id == item.id" />
                  </view>
                </label>
              </radio-group>
            </scroll-view>
          </view>
          <noData v-if="banksList.length <= 0"></noData>
        </template>
        <view class="banks-pay" @click="$u.throttle(submitPay, 500)" v-if="banksList.length">
          <text class="txt">确认支付</text>
          <uni-countdown :backgroundColor="'none'" :color="'#ffffff'" :splitorColor="'#ffffff'" :show-day="time1[0] > 0"
            :day="time1[0]" :hour="time1[1]" :minute="time1[2]" :second="time1[3]">
          </uni-countdown>
        </view>
        <view class="banks-pay" @click="banksHandler()" v-else>
          <text class="txt">请先添加银行卡</text>
        </view>
      </view>
    </u-popup>

    <u-modal v-model="showPayModel" ref="payModel" title="确认支付" :show-cancel-button="true" @confirm="payConfirm"
      @cancel="payCancel" :async-close="true" z-index="900">
      <view class="slot-content">
        <view class="paybody">
          <view class="header-text">
            <text>请输入银行预留手机号发送的短信验证，切记他人索取拒绝提供。</text>
          </view>
          <view class="sms">
            <u-input v-model="sms_code" type="number" maxlength="6" :clearable="false" placeholder="请输入预留手机号验证码" />
            <view class="retry-gary" :class="{'retry': codeCount > 0}" @click="retrySms()"><text
                v-if="codeCount > 0">{{codeCount}}S后</text>重发</view>
          </view>
          <!-- <u-message-input mode="bottomLine" :maxlength="6"></u-message-input> -->
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
  let timer
  // let iPay = 0
  let payTimer
  import noData from "@/components/noData/nodata.vue"
  export default {
    components: {
      noData
    },
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '支付',
          color: '#1a1a1a',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, '#fff'],
          statusBarFontColor: '#FFFFFF'
        },
        total_amount: null,
        orderId: null,
        loading: false,
        expired_pay_time: null,
        payStatus: 0,
        balance: null,
        isGroup: false,
        isService: false,
        order_type: 1,
        time1: [0, 0, 0, 0],
        imgUrl: this.$mConfig.staticUrl,
        payMinutes: 0, // 支付剩余分钟数
        payOrder: {}, // 支付单详情
        banksList: [], // 有效银行卡
        card_id: '', // 银行卡id
        showPayModel: false, // 银行卡弹窗
        sms_code: '', // 银行卡支付短信验证码
        codeCount: 10, // 银行卡支付短信验证码重发倒计时
        payment_id: '', // 预支付id,
        showBanksModel: false,
        payS: 2000,
        iPay: 0
      };
    },
    onLoad(options) {
      if (options.id) {
        this.orderId = options.id;
      }
      if (options.total_amount) {
        this.total_amount = options.total_amount;
      }
      if (options.expired_pay_time) {
        this.expired_pay_time = options.expired_pay_time;
        this.time1 = this.$mUtil
          .countDown(this.expired_pay_time / 1000)
          .split(':')
          .map(val => Number(val));
        console.log('支付时间：' + options.expired_pay_time);
        let beginTime = new Date();
        let time = options.expired_pay_time - beginTime;
        let leave1 = time % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
        //计算相差分钟数
        let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
        let minutes = Math.ceil(leave2 / (60 * 1000));
        // this.payMinutes = minutes
        console.log('分钟值:' + minutes);
      }
      if (options.type && options.type == 'group') {
        this.isGroup = true;
      }
      if (options.type && options.type == 'service') {
        this.isService = true;
      }

      this.accountInfo();
      this.returnList();
      console.log('分钟' + this.time1[2]);
      if (this.time1[3] == '0') {
        this.payMinutes = this.time1[2];
      } else {
        this.payMinutes = this.time1[2] + 1;
      }
      console.log('秒值：' + this.time1[3]);
    },
    onShow() {
      this.getBanks()
    },
    onBackPress() {
      if (this.order_type == 1) {
        uni.redirectTo({
          url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
        });
      } else {
        uni.redirectTo({
          url: '/pages/orderList/serviceOrder'
        });
      }
      return true;
    },
    onUnload() {
      clearInterval(timer)
      clearInterval(payTimer)
    },
    methods: {
      returnList() {
        this.$http.get(`/pay/order/sale-detail/${this.orderId}`).then(res => {
          if (res && res.code == 200) {
            this.order_type = res.page.pay_order.order_type;
            this.payOrder = res.page.pay_order;
          }
        });
      },
      accountInfo() {
        this.$http.get('/account/getAccountInfo').then(res => {
          if (res && res.code == 200) {
            this.balance = res.data.balance;
          }
        });
      },
      payWay(e) {
        console.log(e, 111)
        this.payStatus = e;
      },
      payBankWay(e, id) {
        this.payStatus = e;
        this.card_id = id
      },
      submitPay() {
        //微信支付
        if (this.payStatus == 1 || this.payStatus == 2 || this.payStatus == 10 || this.payStatus == 12 || this
          .payStatus == 14) {
          let data = {
            pay_order_id: this.orderId * 1,
            pay_mode: this.payStatus //1微信 2支付宝 0 余额
          };
          // if (this.payStatus == 12) {
          //   let locationObj = uni.getStorageSync('locationObj')
          //   data.longitude = locationObj.longitude.toFixed(4)
          //   data.latitude = locationObj.latitude.toFixed(4)
          // }
          // if (this.payStatus == 14) {
          //   data.card_id = this.card_id
          //   if (!this.card_id) {
          //     if (this.banksList.length) {
          //       return this.$mUtil.toast('请先选择银行卡');
          //     }
          //     return this.$mUtil.toast('请先添加银行卡');
          //   }
          // }
          this.loading = true;
          this.$http.post('/pay/order/pay', data).then(res => {
            if (res && res.data.code == 200) {
              this.loading = false;
              let target = res.data.data;
              console.log('target==>>', target)
              if (this.payStatus == 1) {
                uni.requestPayment({
                  provider: 'wxpay',
                  orderInfo: {
                    appid: target.appid,
                    noncestr: target.noncestr,
                    package: target.package,
                    partnerid: target.partnerid,
                    prepayid: target.prepayid,
                    timestamp: target.timestamp,
                    sign: target.sign
                  },
                  success: res => {
                    this.$mUtil.toast('支付成功');
                    uni.removeStorageSync('orderreminder');
                    setTimeout(() => {
                      if (this.isGroup) {
                        uni.navigateTo({
                          url: '/pages/order/gbOrder/gbOrderList'
                        });
                      } else if (this.isService) {
                        uni.navigateTo({
                          url: '/pages/order/orderList/serviceOrder'
                        });
                      } else {
                        uni.navigateTo({
                          url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
                        });
                      }
                    }, 1000);
                  },
                  fail: function(err) {
                    this.loading = false;
                    console.log('fail:' + JSON.stringify(err));
                  }
                });
              } else if (this.payStatus == 2) {
                uni.requestPayment({
                  provider: 'alipay',
                  orderInfo: target.prePayOrderInfo,

                  success: res => {
                    this.$mUtil.toast('支付成功');
                    uni.removeStorageSync('orderreminder');
                    setTimeout(() => {
                      if (this.isGroup) {
                        uni.navigateTo({
                          url: '/pages/order/gbOrder/gbOrderList'
                        });
                      } else if (this.isService) {
                        uni.navigateTo({
                          url: '/pages/order/orderList/serviceOrder'
                        });
                      } else {
                        uni.navigateTo({
                          url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
                        });
                      }
                    }, 1000);
                  },
                  fail: function(err) {
                    this.loading = false;
                    console.log('fail:' + JSON.stringify(err));
                  }
                });
              }
              // else if (this.payStatus == 10) {
              //   // #ifdef APP-PLUS 
              //   setTimeout(() => {
              //     this.showTip()
              //   }, 3000)
              //   if (target.expend) {
              //     this.jumpPay(target.expend.pay_info)
              //   } else if (target.status == 'failed') {
              //     this.$mUtil.toast(target.error_msg);
              //   }
              //   // #endif
              // } else if (this.payStatus == 12) {
              //   // #ifdef APP-PLUS
              //   setTimeout(() => {
              //     this.showTip()
              //   }, 3000)
              //   if (target.qrCode) {
              //     this.jumpPay(target.qrCode)
              //   } else if (target.orderStatus == 'FAIL') {
              //     this.$mUtil.toast(target.respMsg);
              //   }
              //   // #endif
              // } else if (this.payStatus == 14) {
              //   this.showPayModel = true
              //   this.payment_id = target.id
              //   this.codeCount = 10
              //   this.sms_code = ''
              //   timer = setInterval(() => {
              //     this.codeCount--
              //     if (this.codeCount == 0) {
              //       clearInterval(timer)
              //     }
              //   }, 1000)
              //   // setTimeout(() => {
              //   //   // uni.navigateTo({
              //   //   //   url: `/pages/order/banks/mobileCode?type=pay&payment_id=${target.id}`
              //   //   // })
              //   // }, 300)
              // }
            } else {
              this.loading = false;
              this.$mUtil.toast('交易失败');
            }
          }).catch(err => {
            this.loading = false;
            // this.$mUtil.toast('交易失败');
          })
        } else if (this.payStatus == 0) {
          //余额支付
          this.loading = false;
          uni.showModal({
            title: '余额支付',
            content: '确定使用余额支付吗？',
            success: res => {
              if (res.confirm) {
                this.$http.post('/order/balance-pay/' + this.orderId).then(res => {
                  if (res && res.code == 200) {
                    uni.removeStorageSync('orderreminder');
                    this.$mUtil.toast('支付成功');
                    setTimeout(() => {
                      if (this.isGroup) {
                        uni.navigateTo({
                          url: '/pages/order/gbOrder/gbOrderList'
                        });
                      } else if (this.isService) {
                        uni.navigateTo({
                          url: '/pages/order/orderList/serviceOrder'
                        });
                      } else {
                        uni.navigateTo({
                          url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
                        });
                      }
                    }, 1000);
                  }
                });
              } else if (res.cancel) {}
            }
          });
        }
      },
      jumpPay(qrCode) {
        if (qrCode) {
          let url = `alipays://platformapi/startapp?saId=10000007&qrcode=${qrCode}`
          if (plus.os.name == 'iOS') {
            plus.runtime.launchApplication({
              pname: 'com.eg.android.AlipayGphone',
              action: url,
            }, err => {
              console.log("err:" + JSON.stringify(err))
              this.$mUtil.toast('支付跳转失败，请选择其它支付方式');
            });
          } else if (plus.os.name == 'Android') {
            plus.runtime.openURL(url, err => {
              console.log("err:" + JSON.stringify(err))
              this.$mUtil.toast(JSON.stringify(err));
              this.$mUtil.toast('支付跳转失败，请选择其它支付方式');
            }, 'com.eg.android.AlipayGphone');
          }
        }
      },
      showTip() {
        uni.showModal({
          title: '确认支付',
          content: '请确认当前订单是否支付',
          success: (success) => {
            if (success.confirm) {
              console.log('用户点击确定');
              this.$http.get(`/pay/order/sale-detail/${this.orderId}`).then(res => {
                if (res && res.code == 200) {
                  uni.removeStorageSync('orderreminder');
                  setTimeout(() => {
                    if (this.isGroup) {
                      uni.navigateTo({
                        url: '/pages/order/gbOrder/gbOrderList'
                      });
                    } else if (this.isService) {
                      uni.navigateTo({
                        url: '/pages/order/orderList/serviceOrder'
                      });
                    } else {
                      uni.navigateTo({
                        url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
                      });
                    }
                  }, 1000);
                }
              });
            } else if (success.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
      banksHandler() {
        uni.navigateTo({
          url: '/pages/order/banks/list'
        })
      },
      getBanks() {
        this.$http.get('/usercard/list?valid=1').then(res => {
          if (res.code == 200) {
            this.banksList = res.list
            this.banksList.map(item => {
              item.logo = this.$mConfig.bankLink + item.local_bank_mark
            })
          }
        })
      },
      retrySms() {
        if (this.codeCount > 0) return this.$mUtil.toast('请稍后重试');
        this.codeCount = 10
        uni.showLoading({
          title: '重发中...',
          mask: true
        })
        this.$http.post('/pay/order/kjRepeatSendSms', {
          payment_id: this.payment_id
        }).then(res => {
          uni.hideLoading()
          if (res.code == 200) {
            this.$mUtil.toast('短信验证码重发成功');
          } else {
            this.$mUtil.toast('服务异常! 请重试');
          }
        }).catch(err => {
          uni.hideLoading()
          // this.$mUtil.toast('服务异常！');
        })
      },
      payConfirm() {
        this.$refs.payModel.clearLoading()
        if (!this.sms_code) {
          return this.$mUtil.toast('短信验证码不能为空');
        }
        uni.showLoading({
          title: '支付中...',
          mask: true
        })
        // this.loading = true;
        this.$http.post('/pay/order/kjPayConfirm', {
          payment_id: this.payment_id,
          sms_code: this.sms_code
        }).then(res => {
          if (res.code == 200) {
            // uni.hideLoading()
            this.getPayStatus()
            // uni.hideLoading()
            // this.$mUtil.toast("支付成功")
            // setTimeout(() => {
            //   uni.redirectTo({
            //     url: '/pages/order/orderList/orderList?keys=-1'
            //   })
            // }, 5000)
          }
        }).catch(err => {
          uni.hideLoading()
          this.loading = false;
        })
      },
      payCancel() {
        this.$mUtil.toast('已取消支付');
        this.loading = false;
      },
      getPayStatus() {
        payTimer = setInterval(() => {
          this.iPay++
          this.lookPayStatus()
          if (this.iPay >= 3) {
            this.loading = false;
            this.showPayModel = false
            uni.hideLoading()
            clearInterval(payTimer)
            uni.redirectTo({
              url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
            })
          }
        }, this.payS)
      },
      lookPayStatus() {
        // this.loading = true;
        this.$http.get(`/pay/order/sale-detail-slim/${this.orderId}`).then(res => {
          if (res.code == 200) {
            if (res.data.payment_status == 5) {
              this.loading = false;
              uni.hideLoading()
              this.showPayModel = false
              this.$mUtil.toast("支付成功")
              clearInterval(payTimer)
              setTimeout(() => {
                uni.redirectTo({
                  url: `/pages/order/orderList/orderList?orderType=${this.payOrder.area_feature==3?3:0}`
                })
              }, 500)
            }
          }
        }).catch(err => {
          uni.hideLoading()
          this.loading = false;
        })
      }
    }
  };
</script>

<style lang="scss">
  page {
    background-color: #f5f5f5;
  }

  .mt82 {
    margin-top: 82rpx;
  }

  radio {
    transform: scale(0.7);
  }

  .pay-select {
    margin-top: 66rpx;
    border-radius: 18rpx;
    padding: 48rpx 38rpx;

    .pay {
      font-size: 60rpx;
      color: #ffa937;
    }

    .banks {
      justify-content: center;
    }

    .bank {
      display: flex;
      // flex-direction: column;
      justify-content: space-between;
      align-items: center;

      .box {
        // display: flex;
        // justify-content: space-between;
        // align-items: center;

        &:first-child {
          margin-bottom: 10rpx;
        }

        .left {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;
        }

        image {
          width: 80rpx;
          height: auto;
          margin-right: 10rpx;
        }

        .bank_name {
          font-size: 28rpx;
          margin-right: 20rpx;
          // font-weight: bold;
        }

        .name {
          text-align: left;
        }
      }
    }

    .bank-box {
      flex: 1;
      width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bank-icon {
      color: #2f77f1;
      font-size: 60rpx;
    }
  }

  .img60 {
    width: 50rpx;
    height: 50rpx;
  }

  .pay-btn {
    margin-top: 80rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;

    button {
      background-color: #FA6138;
      color: #ffffff;
      justify-content: center;
    }
  }

  .paybody {
    padding: 20rpx 30rpx;

    /deep/ .u-input {
      border-bottom: 2rpx solid #dcdfe6;
    }

    .header-text {
      margin-bottom: 20rpx;
    }

    .sms {
      display: flex;
      align-items: center;

      .retry-gary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180rpx;
        margin-left: 40rpx;
        padding: 20rpx 10rpx;
        background-color: #FA6138;
        border-radius: 10rpx;
        color: #fff;
      }

      .retry {
        background-color: gray;
      }
    }
  }

  .banks-content {
    height: 100%;
    padding: 80rpx 30rpx 0;

    .add {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #FA6138;
    }

    .header {
      position: absolute;
      top: 30rpx;
      left: 50%;
      font-size: 30rpx;
      font-weight: bold;
      transform: translateX(-50%);
    }

    .no-data-view {
      margin-top: 10vh !important;
    }

    .banks-pay {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80%;
      position: fixed;
      bottom: 20rpx;
      left: 50%;
      color: #fff;
      border-radius: 10rpx;
      padding: 20rpx 0;
      text-align: center;
      font-size: 30rpx;
      transform: translateX(-50%);
      background-color: #FA6138;

      .txt {
        margin-right: 10rpx;
      }
    }

    .banks {
      width: 100%;
      height: 80%;
      overflow: hidden;

      .scroll-box {
        width: 100%;
        height: 100%;
      }
    }

    .item {
      // height: 100rpx;
      // display: flex;
      // align-items: center;
      display: block;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #E6E5E5;

      .box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &:first-child {
          margin-bottom: 10rpx;
        }

        .bank_name {
          font-size: 30rpx;
          font-weight: bold;
        }
      }

      image {
        width: 200rpx;
        height: auto;
      }

      .bank-icon {
        margin-right: 10rpx;
        color: #2f77f1;
        font-size: 50rpx;
        flex-shrink: 0;
      }

      .name {
        margin-right: 20rpx;
        font-size: 26rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .unbind {
        margin-left: auto;
        color: red;
        flex-shrink: 0;
      }
    }

    .gray {
      color: gray;

      .bank-icon {
        color: gray;
      }
    }
  }

  .full-screen {
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.5);
  }
</style>