web-base-pc/src/components/czPay.vue

<template>
  <div class="contain">
    <el-dialog
      title="充值"
      :visible.sync="toShow"
      width="30%"
      center
      :before-close="handleClose"
    >
      <div class="diaBox">
        <div class="tit4">{{ '充值金额' }}</div>
        <el-input class="czinputbox" v-model="zcJe"></el-input>
        <div class="tit4">选择充值方式</div>
        <div class="quan" @click.prevent="selPayRadio(1)">
          <div class="pf">
            <div class="pf_l">
              <img src="@/assets/images/pay_i2.png" alt="" />
              <div>微信支付</div>
            </div>
          </div>
        </div>
        <div class="quan" @click.prevent="selPayRadio(2)">
          <div class="pf">
            <div class="pf_l">
              <img src="@/assets/images/pay_i3.png" alt="" />
              <div>微信支付</div>
            </div>
          </div>
        </div>
        <div class="banktitle">
          <img src="@/assets/images/pay_i2.png" alt="" />
          <div class="title2">银行卡支付</div>
        </div>
        <!-- 京东银行卡 -->
        <div
          class="quan"
          @click.prevent="selPayRadio('jd' + index)"
          v-for="(item, index) in bankList"
          :key="index"
        >
          <div class="pf">
            <div class="pf_l">
              <img src="@/assets/images/pay_i3.png" alt="" />
              <div>工商银行储蓄卡</div>
            </div>
          </div>
        </div>
        <div class="btn" @click="quickPay">{{ '立即支付' }}</div>
      </div>
    </el-dialog>
    <PayAassword
      :isPw="isPw"
      :pwData="pwData"
      @closePwPay="closePwPay"
    ></PayAassword>
  </div>
</template>
  
  <script>
import { mapGetters } from "vuex";
import * as api from "@/api/pay.js";
import { generate } from "@/api/register.js";
import PayAassword from "@/components/PayAassword.vue";
import { setTokenMi } from "@/util/auth";
export default {
  components: {
    PayAassword,
  },
  data() {
    return {
      // 支付弹框
      toShow: this.isPay,
      // 支付密码弹框
      isPw: false,
      zcJe: "",
      // 钱包支付数据传递
      pwData: "",
    };
  },
  props: {
    isPay: {
      type: Boolean,
      default: false,
    },
    paramsPost: "",
    ifbaodan: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  watch: {
    isPay(val) {
      this.toShow = val;
    },
  },
  mounted() {
    // 获取银行卡
    this.getBankList();
  },
  methods: {
    getBankList() {},
    quickPay() {
      // 幂等性
      generate().then((res) => {
        setTokenMi(res.msg);
      });
      this.isPw = true;
    },
    handleClose() {
      this.$emit("closePay", 0);
    },
    closePwPay() {
      this.isPw = false;
      this.$emit("closePay", 1);
    },
    selPayRadio(){
      
    }
  },
};
</script>
  
  <style lang="scss" scoped>
.contain {
  ::v-deep .el-collapse-item__header {
    border: 0;
  }
  ::v-deep .el-collapse {
    border: 0;
  }
  ::v-deep .el-collapse-item__wrap {
    border: 0;
  }
}
::v-deep .czinputbox .el-input__inner {
  height: 65px !important;
  margin-top: 10px;
  font-size: 18px;
}
.banktitle {
  display: flex;
  align-items: center;
  margin-top: 35px;
  img {
    width: 28px;
    height: 28px;
    margin-right: 10px;
  }
}
.diaBox {
  padding: 0 50px;
  // height: 70vh;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
}
.tit1 {
  font-size: 24px;
  font-weight: 600;
  color: #e02b26;
  text-align: center;
  margin-bottom: 20px;
}
.tit2 {
  font-size: 14px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #666666;
}
.tit3 {
  font-size: 14px;
  font-weight: 400;
  color: #e02b26;
  margin: 0 5px;
}
.tit4 {
  font-size: 18px;
  margin-top: 30px;
  font-weight: 600;
  color: #333333;
}
.quan {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0px 2px 20px 0px #efefef;
  padding: 0 15px;
  margin-top: 20px;
  background: rgba(204, 204, 204, 0.5);
}
.pf {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  .pf_l {
    display: flex;
    align-items: center;
    height: 65px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
  img {
    width: 28px;
    height: 28px;
    margin-right: 10px;
  }
}
.quan_i {
  padding: 0 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.quan_r {
  padding: 0 5px;
}
.kuang_i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
}
.lan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  font-size: 18px;
  color: #666;
}
.tTit {
  font-size: 18px;
  color: #333;
}
.btn {
  position: sticky;
  bottom: 0px;
  width: 209px;
  height: 48px;
  line-height: 48px;
  background: var(--primary-color);
  border-radius: 40px 40px 40px 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  margin: 25px auto;
  cursor: pointer;
}
.flex_ac {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 15px 0;
  .flex_ac_i {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    font-weight: 400;
    img {
      width: 16px;
      height: 16px;
      margin-right: 20px;
    }
  }
}
.flex_bc {
  flex-direction: column;
  align-items: flex-start;
}
.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: 36px;
}
.flex_bet {
  justify-content: space-between;
}
.img1 {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}
</style>