800 lines
		
	
	
		
			19 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			800 lines
		
	
	
		
			19 KiB
		
	
	
	
		
			Vue
		
	
	
	
<!--
 | 
						||
 * @Descripttion:
 | 
						||
 * @version:
 | 
						||
 * @Author: kBank
 | 
						||
 * @Date: 2022-11-21 15:11:22
 | 
						||
-->
 | 
						||
<template>
 | 
						||
  <view class="content">
 | 
						||
    <view class="index_header"> </view>
 | 
						||
    <view class="contxt">
 | 
						||
      <view class="tit">{{ '待支付金额' }}</view>
 | 
						||
      <view class="tit1">
 | 
						||
        {{ userInfo.currencyIcon }}{{ objTree.amount | numberToCurrency }}
 | 
						||
      </view>
 | 
						||
      <view class="kuang">
 | 
						||
        <u-collapse
 | 
						||
          :value="activeNames"
 | 
						||
          ref="collapse"
 | 
						||
          @open="change"
 | 
						||
          @close="close"
 | 
						||
          accordion
 | 
						||
          :border="false"
 | 
						||
        >
 | 
						||
          <u-collapse-item name="1" v-if="userInfo.memberCode != 'BF66886688'">
 | 
						||
            <view slot="title" class="pf">
 | 
						||
              <img src="@/static/images/yhkzf.jpg" alt="" />
 | 
						||
              <view>{{ '钱包支付' }}</view>
 | 
						||
            </view>
 | 
						||
            <view
 | 
						||
              class="quan_i"
 | 
						||
              v-show="account.consumeBalance == 0 || account.consumeDeduct > 0"
 | 
						||
            >
 | 
						||
              <view class="tTit">{{ '消费账户' }}</view>
 | 
						||
              <view class="lan">
 | 
						||
                <view>
 | 
						||
                  {{ account.consumeBalance | numberToCurrency | isLocal }}
 | 
						||
                </view>
 | 
						||
                <view>
 | 
						||
                  -{{ account.consumeDeduct | numberToCurrency | isLocal }}
 | 
						||
                </view>
 | 
						||
              </view>
 | 
						||
            </view>
 | 
						||
            <view
 | 
						||
              class="quan_i"
 | 
						||
              v-show="account.bonusBalance == 0 || account.bonusDeduct > 0"
 | 
						||
            >
 | 
						||
              <view class="tTit">{{ '奖金账户' }}</view>
 | 
						||
              <view class="lan">
 | 
						||
                <view>
 | 
						||
                  {{ account.bonusBalance | numberToCurrency | isLocal }}
 | 
						||
                </view>
 | 
						||
                <view>
 | 
						||
                  -{{ account.bonusDeduct | 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="account.cashBalance == 0 || account.cashDeduct > 0"
 | 
						||
            >
 | 
						||
              <view class="tTit">{{ '现金账户' }}</view>
 | 
						||
              <view class="lan">
 | 
						||
                <view>
 | 
						||
                  {{ account.cashBalance | numberToCurrency | isLocal }}
 | 
						||
                </view>
 | 
						||
                <view>
 | 
						||
                  -{{ account.cashDeduct | 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>
 | 
						||
          </u-collapse-item>
 | 
						||
        </u-collapse>
 | 
						||
      </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="支付中"
 | 
						||
            @tap="quickPay(ifcz)"
 | 
						||
            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" class="qrcode"></div>
 | 
						||
      </view>
 | 
						||
    </u-popup>
 | 
						||
    <successDialog
 | 
						||
      @successClose="successClose"
 | 
						||
      ref="successDialog"
 | 
						||
    ></successDialog>
 | 
						||
  </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'
 | 
						||
var payStatus
 | 
						||
export default {
 | 
						||
  components: {
 | 
						||
    successDialog,
 | 
						||
  },
 | 
						||
  data() {
 | 
						||
    return {
 | 
						||
      payList: {},
 | 
						||
      isLoading: false,
 | 
						||
      clockTime: '',
 | 
						||
      specialArea: '',
 | 
						||
      orderCode: '',
 | 
						||
      orderData: {
 | 
						||
        orderAmount: '',
 | 
						||
      },
 | 
						||
      countDown: '',
 | 
						||
      payDetail: {
 | 
						||
        payAccount1: 1,
 | 
						||
      },
 | 
						||
      paramsPost: '',
 | 
						||
      isShare: false, //分享用户第一次爆单
 | 
						||
      userInfo: '',
 | 
						||
      activeNames: 1,
 | 
						||
      whatPay: '',
 | 
						||
      hfList: [],
 | 
						||
      jdList: [],
 | 
						||
      businessType: '',
 | 
						||
      isBank: '',
 | 
						||
      isPw: false,
 | 
						||
      codeValue: '',
 | 
						||
      bindCode: '',
 | 
						||
      showSucce: false, //
 | 
						||
      sucPay: 0,
 | 
						||
      content: '支付成功',
 | 
						||
      wxPopup: false,
 | 
						||
      luckydrawData: {},
 | 
						||
      ifcz: false,
 | 
						||
      czJe: '',
 | 
						||
      objTree: {},
 | 
						||
      account: {},
 | 
						||
    }
 | 
						||
  },
 | 
						||
  onLoad(options) {
 | 
						||
    uni.setNavigationBarTitle({
 | 
						||
      title: '订单支付',
 | 
						||
    })
 | 
						||
    // this.paramsPost = JSON.parse(options.paramsPost)
 | 
						||
    // if (this.paramsPost.ifcz) {
 | 
						||
    // 	this.ifcz = this.paramsPost.ifcz
 | 
						||
    // 	this.businessType = 3
 | 
						||
    // 	uni.setNavigationBarTitle({
 | 
						||
    // 		title: '充值'
 | 
						||
    // 	});
 | 
						||
    // 	// this.businessType =
 | 
						||
    // } else {
 | 
						||
    // 	uni.setNavigationBarTitle({
 | 
						||
    // 		title: '订单支付'
 | 
						||
    // 	});
 | 
						||
    // 	this.ifcz = 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.userInfo.registerShare == 0
 | 
						||
    // 		) {
 | 
						||
    // 			this.isShare = true
 | 
						||
    // 		}
 | 
						||
 | 
						||
    // 		this.specialArea =
 | 
						||
    // 			this.paramsPost.specialArea || this.paramsPost.orderType
 | 
						||
    // 		this.orderCode = this.paramsPost.orderCode
 | 
						||
    // 		this.businessType = options.businessType
 | 
						||
    // 		// this.getInfo()
 | 
						||
 | 
						||
    // 		// 获取订单信息
 | 
						||
    // 		this.getOrderInfo()
 | 
						||
    // 		if (!this.isShare) {
 | 
						||
    // 			// 获取消费信息
 | 
						||
    // 			this.getSpendInfo()
 | 
						||
    // 		}
 | 
						||
    // 	}
 | 
						||
    // }
 | 
						||
 | 
						||
    // // 获取支付配置
 | 
						||
    // this.getPayConfig()
 | 
						||
    // clearInterval(this.clockTime)
 | 
						||
    this.objTree = JSON.parse(options.treeObj)
 | 
						||
    this.getAccount()
 | 
						||
  },
 | 
						||
 | 
						||
  onShow() {
 | 
						||
    // 获取银行卡
 | 
						||
    // this.getBankList()
 | 
						||
  },
 | 
						||
  methods: {
 | 
						||
    getAccount() {
 | 
						||
      api
 | 
						||
        .deductionAccount({
 | 
						||
          pkBaseId: this.objTree.pkBaseId,
 | 
						||
          pkTreeRule: this.objTree.pkTreeRule,
 | 
						||
          shopQuantity: this.objTree.quantity,
 | 
						||
        })
 | 
						||
        .then(res => {
 | 
						||
          this.account = res.data
 | 
						||
          this.$nextTick(() => {
 | 
						||
            this.$refs.collapse.init()
 | 
						||
          })
 | 
						||
          this.$forceUpdate()
 | 
						||
        })
 | 
						||
    },
 | 
						||
    //查询充值抽奖次数
 | 
						||
    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.$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 obj = {
 | 
						||
        pkBaseId: this.objTree.pkBaseId,
 | 
						||
        pkTreeRule: this.objTree.pkTreeRule,
 | 
						||
        shopQuantity: this.objTree.quantity,
 | 
						||
        payPwd: this.codeValue,
 | 
						||
      }
 | 
						||
      api.shoppingTree(obj).then(res => {
 | 
						||
        if (res.code == 200) {
 | 
						||
          uni.showToast({
 | 
						||
            title: res.msg,
 | 
						||
            icon: 'none',
 | 
						||
            duration: 1500,
 | 
						||
          })
 | 
						||
          this.isPw = false
 | 
						||
          setTimeout(() => {
 | 
						||
            uni.switchTab({ url: '/pages/index/index' })
 | 
						||
          }, 1500)
 | 
						||
        } else {
 | 
						||
          uni.showToast({
 | 
						||
            title: res.msg,
 | 
						||
            icon: 'none',
 | 
						||
            duration: 1500,
 | 
						||
          })
 | 
						||
        }
 | 
						||
      })
 | 
						||
    },
 | 
						||
    quickPay(cz) {
 | 
						||
      this.isPw = true
 | 
						||
    },
 | 
						||
    scanPayBfWx(val) {
 | 
						||
      let params
 | 
						||
      if (this.ifcz) {
 | 
						||
        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
 | 
						||
        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
 | 
						||
          )
 | 
						||
        })
 | 
						||
      })
 | 
						||
      this.checkPayStatus(params)
 | 
						||
    },
 | 
						||
    change(e) {
 | 
						||
      this.activeNames = e
 | 
						||
    },
 | 
						||
    close(e) {
 | 
						||
      if (e == 1) {
 | 
						||
        this.activeNames = 2
 | 
						||
      } else {
 | 
						||
        this.activeNames = 1
 | 
						||
      }
 | 
						||
    },
 | 
						||
    getPayConfig() {
 | 
						||
      api.payConfig().then(res => {
 | 
						||
        this.payList = res.data
 | 
						||
      })
 | 
						||
    },
 | 
						||
    getBankList() {
 | 
						||
      api.jdBankList().then(res => {
 | 
						||
        this.jdList = res.data
 | 
						||
      })
 | 
						||
      // api.hfBankList().then((res) => {
 | 
						||
      //     this.hfList = 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)
 | 
						||
          this.wxPopup = 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);
 | 
						||
}
 | 
						||
 | 
						||
.index_header {
 | 
						||
  background: #f9f9f9;
 | 
						||
  height: 330rpx;
 | 
						||
}
 | 
						||
 | 
						||
.contxt {
 | 
						||
  margin-top: -220rpx;
 | 
						||
  padding: 0 26rpx;
 | 
						||
  padding-bottom: 300rpx;
 | 
						||
  height: 75vh;
 | 
						||
}
 | 
						||
 | 
						||
.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;
 | 
						||
}
 | 
						||
 | 
						||
.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: inline-block;
 | 
						||
  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;
 | 
						||
}
 | 
						||
</style>
 |