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

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <view class="index_header"> </view>
    <view class="contxt">
      <template>
        <view class="tit">{{ '待支付金额' }}</view>
        <view class="tit1">
          {{ paramsPost.orderAmount | numberToCurrency }}
        </view>
        <!-- <view class="tit2"
          >{{ '请在' }} <view class="tit3">{{ countDown }}</view
          >{{ '内完成支付，否则订单将会被自动取消' }}
        </view> -->
      </template>
      <!-- 暂时隐藏 -->
      <view class="kuang">
        <view>
          <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="#005BAC"
                size="18"
                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="#005BAC"
                size="18"
                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="#005BAC"
                size="18"
                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="#005BAC"
                size="18"
                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="#005BAC"
                size="18"
                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="#005BAC"
                    size="18"
                    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="#005BAC"
                size="18"
                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="#005BAC"
                    size="18"
                    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="#005BAC"
                size="18"
                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="#005BAC"
                    size="18"
                    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>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <view class="footer_f">
      <view class="footer">
        <view class="footer_r">
          <u-button
            type="success"
            class="uBtn"
            shape="circle"
            :loading="isLoading"
            loadingText="支付中"
            @tap="quickPay(isRecharge)"
            color="linear-gradient(to right, #005BAC, #005BAC )"
            >{{ '立即支付' }}
          </u-button>
        </view>
      </view>
    </view>
    <!-- 输入验证码，密码 -->
    <u-popup :show="isPw" mode="center" closeable @close="closePw">
      <view class="t_tit">{{ '支付验证' }}</view>
      <view class="box">
        <view class="c_tit">{{ '请输入短信验证码' }}</view>

        <u--input border="surround" 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>
    <!-- 成功 -->
    <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 { removeToken } from '@/config/auth.js'

import successDialog from '@/components/successDialog.vue'
import * as act from '@/config/activity.js'
import {
  PAY_REDIRECT_URL,
  PAY_TYPE,
  PAY_CHANEL,
  PAY_AUTH,
} from '@/util/constant.js'
var payStatus
let getRegisterInfoTimeoutFlag = null
export default {
  components: {
    successDialog,
  },
  data() {
    return {
      PAY_TYPE,
      PAY_AUTH,
      payList: {},
      isLoading: false,
      clockTime: '',
      specialArea: '',
      orderCode: '',
      orderData: {
        orderAmount: '',
      },
      countDown: '',
      payDetail: {
        payAccount1: 1,
      },
      paramsPost: '',
      isShare: false, //分享用户第一次爆单
      userInfo: uni.getStorageSync('User'),
      activeNames: 1,
      whatPay: '',
      hfList: [],
      jdList: [],
      businessType: 1,
      isBank: '',
      isPw: false,
      codeValue: '',
      bindCode: '',
      showSucce: false, //
      sucPay: 0,
      content: '支付成功',
      wxPopup: false,
      isRecharge: false,
      tlList: [],
    }
  },
  onLoad(options) {
    this.paramsPost = JSON.parse(options.paramsPost)
    console.log(
      '%c [ this.paramsPost ]-170',
      'font-size:13px; background:#669153; color:#aad597;',
      this.paramsPost
    )

    this.pkCountry = uni.getStorageSync('pkCountry')

    this.orderCode = this.paramsPost.orderCode

    // 获取支付配置
    this.getPayConfig()
  },

  onShow() {
    // 获取银行卡
    // this.getBankList()
  },
  onUnload() {
    clearTimeout(getRegisterInfoTimeoutFlag)
    clearInterval(payStatus)
  },
  methods: {
    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
      clearInterval(payStatus)
    },
    successClose() {
      removeToken()
      uni.redirectTo({
        url: '/pages/login/index',
      })
    },
    fansOrder() {
      api.fansOrder(this.orderCode).then(res => {
        if (res.data) {
          this.isLoading = false
          this.isPw = false
          uni.hideLoading()
          removeToken()

          this.$refs.successDialog.showSuccess(res.data)
        } else {
          getRegisterInfoTimeoutFlag = setTimeout(() => {
            this.fansOrder()
          }, 3000)
        }
      })
    },
    payPw() {
      let url, obj
      // 银行卡
      if (this.isBank == 'hf') {
        url = api.payConfirmHf
      } else if (this.isBank == 'jd') {
        url = api.payConfirmJd
      } else if (this.isBank == 'tl') {
        url = api.payConfirmTl
      }
      obj = {
        orderCode: this.orderCode,
        bindCode: this.bindCode,
        specialArea: 7,
        smsCode: this.codeValue,
        pkSettleCountry: this.pkCountry,
      }
      this.isLoading = true
      url(obj).then(res => {
        if (res.code == 200) {
          // this.isPw = false
          //   this.$refs.successDialog.showSuccess(res.data)
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 1500,
          })
          //     uni.redirectTo({
          //       url: '/pages/login/login',
          //     })
          this.isLoading = false
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 1500,
          })
          this.isLoading = false
        }
      })
    },
    async quickPay() {
      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 ([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: this.businessType, //订单类型
          payChannel: PAY_CHANEL[payTypeEnum],
          payType: 3, //银行卡
          bindCode: bankListMap[payTypeEnum],
        }
        Object.assign(params, {
          businessCode: this.orderCode,
        })
        api.unifiedorder(params).then(response => {
          this.isBank = this.whatPay.slice(0, 2)
          this.isPw = true
          this.checkPayStatus(params)
        })
      }
    },
    // 宝付微信支付
    scanPayBfWxJump(val) {
      let params = {
        businessType: 1,
        businessCode: this.orderCode,
        payChannel: val,
        payType: 2,
        appletFlag: 0,
      }
      api.unifiedorder(params).then(res => {
        let url =
          'https://cloud1-8gp1n6uofa17e2e2-1315820965.tcloudbaseapp.com/jump_mp.html?sign=8587800b05c859700944247c03eeae1c&t=1698224973&state=' +
          res.data
        window.open(url)
      })
      this.checkPayStatus(params)
    },
    // 通联微信支付
    scanPayTlWxJump(val) {
      let params = {
        businessType: 1, //订单类型充值
        businessCode: this.orderCode,
        payChannel: val,
        payType: 2,
        appletFlag: 0,
      }
      api.unifiedorder(params).then(res => {
        let url =
          'https://cloud1-1gql8u3v1fe85a37-1322999719.tcloudbaseapp.com/jump_mp.html?sign=d77deffc9e8aecd2b721f8430c376370&t=1705374125&state=' +
          res.data
        window.open(url)
      })
      this.checkPayStatus(params)
    },
    redirectPay(payChannel) {
      this.getPayAuthToken(payChannel).then(url => {
        if (navigator.userAgent.includes('MicroMessenger')) {
          window.location.href = url
        } else {
          window.open(url)
        }
      })
    },
    getPayAuthToken(payChannel) {
      return new Promise((resolve, reject) => {
        const extParam = {
          isRecharge: false,
          orderCode: this.orderCode,
          specialArea: 1,
          isSharePay: true,
        }
        // 将extParam对象转换为JSON字符串，再转换为base64编码
        const extParamBase64 = btoa(JSON.stringify(extParam))
        const params = {
          payChannel: payChannel,
          payType: 2,
          appletFlag: 0,
          businessType: 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)
          }
        })
      })
    },
    scanPayBfWx(val) {
      let params = {
        businessType: 1,
        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

        this.$forceUpdate()
      })
    },
    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()
    },

    downTime() {
      let that = this
      this.clockTime = setInterval(() => {
        if (that.paramsPost.payTime && that.paramsPost.payTime > 0) {
          that.countDown = this.getTime(this.paramsPost.payTime--)
        } else {
          that.countDown = '00:00:00'
        }
      }, 1000)
    },
    getSpendInfo() {
      api
        .spendDetails({
          specialArea: this.specialArea,
          orderCode: this.orderCode,
          pkSettleCountry: this.pkCountry,
        })
        .then(res => {
          // this.payDetail = res.data
          this.$set(this, 'payDetail', res.data)
        })
    },
    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
          uni.showLoading({
            title: '正在获取注册信息，请不要关闭当前页面',
          })
          setTimeout(() => {
            this.fansOrder()
          }, 2000)
        } 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;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 18rpx 20rpx;
}

.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;
  }
}

.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>