liebao-web/src/components/accountCompoents/wallet.vue

<template>
  <div class="wallet">
    <el-col :span="24">
      <div class="head-account">
        <div class="balance" @click="goDetail">
          <div class="balance_name">账户余额（元）</div>
          <div class="balance_price">{{amount}}</div>
          <div class="balance_sign"><img src="../../../static/image/1.png" alt="" srcset=""> 为了您能高效发单，请保持账户资金充足</div>
        </div>
        <div class="balance coupon" @click="goCoupon">
          <div class="balance_name">优惠券（张）</div>
          <div class="balance_price">{{$store.state.userInfo.couponNum}}</div>
          <div class="balance_sign">可用优惠券</div>
        </div>
      </div>
    </el-col>
    <el-col class="wallet-content" :span="20" v-if="memberType !==3">
      <div class="recharge_title">充值金额</div>
      <div class="recharge_list recharge_list_m">
        <div @click="chooseMoney(v,i)" :class="curIdx === i ? 'item item_ac' : 'item'" v-for="(v,i) in moneyList" :key="i"><span v-if="v.couponList || v.giveValue" class="item_tips">充值有礼</span>{{v.value}}元</div>
        <el-input type='num' @focus="open" v-model="value" clearable :class="curIdx === -1 ? 'item item_ac' : 'item'" placeholder="其他金额" />
      </div>
      <div class="recharge_coupon" v-if="couponList.length || giveValue">
        <div class="recharge_coupon_top">
          <img src="../../../static/image/recharge_coupon.png" alt="" srcset="">
          <div class="recharge_coupon_top_left">充{{moneyList[curIdx].value}}元，
            赠送<span v-if="giveValue">{{giveValue}}元</span><span v-if="moneyList[curIdx].giveCouponAmount">{{giveValue&&moneyList[curIdx].giveCouponAmount ? '和' : ''}}{{moneyList[curIdx].giveCouponAmount}}元优惠券</span>
          </div>
          <div class="recharge_coupon_top_right ">
            <div v-for="(v,i) in couponList" :key="i">{{`${v.couponName} x${v.memberReciveNum}张  `}}</div>
          </div>
        </div>
        <div class="recharge_coupon_bottom">
          <div class="recharge_coupon_bottom_item" v-for="(item,index) in couponList" :key="index">
            <div class="recharge_coupon_bottom_left">
              <div class="recharge_coupon_bottom_left_num">
                <span v-if="item.couponType == 1 || item.couponType == 3">¥</span>
                <span class="num" v-if="item.couponType == 1 || item.couponType == 3">{{item.money}}</span>
                <span class="num" v-if="item.couponType == 2">{{item.discount}}</span>
                <span v-if="item.couponType == 2">折</span>
              </div>
              <div class="recharge_coupon_bottom_sub">
                <span v-if="item.couponType == 2">最高减{{ item.maxDiscount }}元</span>
                <span v-if="item.couponType == 1">满{{ item.limitFee }}元可用</span>
              </div>
            </div>
            <div class="recharge_coupon_bottom_middle">
              <div></div>
            </div>
            <div class="recharge_coupon_bottom_right">
              <div class="recharge_coupon_bottom_date">
                <div>{{item.couponName}}</div>
                <div>有效期：{{item.days}}天(自领取后生效)</div>
              </div>
              <div class="recharge_coupon_bottom_number">
                <span>x{{item.memberReciveNum}}张</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="recharge_title">支付方式</div>
      <div class="recharge_list">
        <div @click="paymentType = 1" :class="paymentType === 1 ? 'item item_ac' : 'item'"><img class="img" src="../../../static/image/alipay.png" alt="" srcset=""> 支付宝支付<img class="choose" v-if="paymentType === 1" src="../../../static/image/icon_choose.png" alt=""></div>
        <div @click="paymentType = 2" :class="paymentType === 2 ? 'item item_ac' : 'item'"><img class="img" src="../../../static/image/we-chat.png" alt="" srcset="">微信支付<img class="choose" v-if="paymentType === 2" src="../../../static/image/icon_choose.png" alt=""></div>
      </div>
      <div>
        <el-checkbox v-model="checked">充值即同意 <span @click="getExplain" class="agreement">《充值协议》</span> </el-checkbox>
      </div>
      <el-button @click="recharge" class="recharge_color">去充值</el-button>
    </el-col>
    <!-- 支付二维码 -->
    <qr-code v-if="showCode" @paySuccess="paySuccess" @refreshCode="recharge" @closeCode="showCode = false" ref="code" :payAmount="payAmount" :link="link" :paymentType="paymentType" :orderSn="orderSn"></qr-code>
    <!-- 充值协议 -->
    <el-dialog :visible.sync="centerDialogVisible" width="800px" center>
      <div v-html="text"></div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getWallet,
  getRechargeList,
  recharge,
  getExplain,
} from "../../api/amount.js";
import qrCode from "../../common/qrCode.vue";
export default {
  name: "wallet",
  props: {
    products: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      amount: 0,
      moneyList: [],
      curIdx: 0,
      paymentType: 1,
      money: 0,
      id: "",
      link: "",
      timer: null,
      orderSn: "",
      showCode: false,
      payAmount: 0,
      centerDialogVisible: false,
      text: "",
      value: "",
      checked: false,
      memberType: this.$store.state.userInfo.memberType,
      couponList: [],
      giveValue: 0,
    };
  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.memberType = newVal.memberType;
      },
      deep: true,
    },
  },
  components: {
    qrCode,
  },
  created() {
    this.getWallet();
    this.getRechargeList();
  },
  methods: {
    goDetail() {
      this.$router.push({ name: "walletDetail" });
    },
    goCoupon() {
      this.$router.push({ name: "coupon" });
    },
    paySuccess() {
      this.showCode = false;
      this.$store.dispatch("getUserInfo");
      this.getWallet();
    },
    getExplain() {
      getExplain({ type: 6 }).then((res) => {
        console.log("object", res);
        if (res.code === 200) {
          this.text = res.data;
          this.centerDialogVisible = true;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    getRechargeList() {
      getRechargeList().then((res) => {
        if (res.code === 200) {
          this.moneyList = res.data;
          this.couponList = this.moneyList[this.curIdx].couponList || [];
          this.giveValue = this.moneyList[this.curIdx].giveValue;
          this.money = this.moneyList[this.curIdx].value;
          this.id = this.moneyList[this.curIdx].id;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    getWallet() {
      getWallet().then((res) => {
        if (res.code === 200) {
          this.amount = res.data.amount;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    chooseMoney(v, i) {
      this.value = "";
      this.curIdx = i;
      this.money = v.value;
      this.id = v.id;
      this.couponList = this.moneyList[i].couponList || [];
      this.giveValue = this.moneyList[i].giveValue ?? 0;
    },
    open() {
      this.curIdx = -1;
      this.money = "";
      this.id = "";
      this.couponList = [];
    },
    recharge() {
      let params = {
        money: this.value ? this.value : this.money,
        paymentType: this.paymentType,
        createType: 1,
        id: this.id,
      };
      if (!this.paymentType) {
        return this.$message({
          type: "info",
          message: "请先选择支付方式再充值！",
        });
      }
      let reg = new RegExp(/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/);
      if (!reg.test(Number(params.money))) {
        return this.$message({
          type: "info",
          message: "请先输入正确充值金额再充值(最多2位小数)！",
        });
      }
      if (!this.checked) {
        return this.$message({
          type: "info",
          message: "请先勾选同意后再充值！",
        });
      }

      recharge(params).then((res) => {
        if (res.code === 200) {
          this.link = res.data.data;
          this.orderSn = res.data.orderSn;
          this.payAmount = res.data.amount;
          this.showCode = true;
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wallet {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .head-account {
    display: flex;
    .balance {
      border-radius: 5px;
      background-image: url(../../../static/image/wallet1.png);
      background-size: 100% 100%;
      width: 618px;
      height: 168px;
      padding-left: 25px;
      box-sizing: border-box;
      margin-bottom: 42px;
      cursor: pointer;
      .balance_name {
        font-size: 14px;
        line-height: 22px;
        font-weight: 400;
        color: #ffffff;
        padding-top: 24px;
      }
      .balance_price {
        font-size: 42px;
        line-height: 59px;
        font-weight: bold;
        color: #ffffff;
        margin: 8px 0;
      }
      .balance_sign {
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        opacity: 0.8;
        line-height: 17px;
        display: flex;
        align-items: center;
        img {
          width: 12px;
          height: 12px;
          margin-right: 4px;
        }
      }
    }
    .coupon {
      width: 298px;
      height: 168px;
      background-image: url(../../../static/image/wallet2.png);
    }
  }
  .wallet-content {
    padding-left: 15px;
  }
  .recharge_title {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
  }
  .recharge_color {
    width: 160px;
    background: #fc7200;
    color: #fff;
  }
  .agreement {
    font-size: 12px;
    font-weight: 400;
    color: #fc7200;
    margin-top: 10px;
    span {
      color: #3662a1;
      cursor: pointer;
    }
  }
  .recharge_list /deep/ .el-input__inner {
    padding: 0 15px;
    height: 36px;
    border: none !important;
    text-align: center;
  }
  .recharge_list /deep/ input::placeholder {
    font-size: 14px !important;
  }
  .recharge_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px;
    margin-bottom: 10px;

    .item {
      position: relative;
      width: 200px;
      height: 40px;
      border: 1px solid #e6e6e6;
      color: #333333;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      margin: 0 15px 15px 0;
      cursor: pointer;
      .img {
        width: 24px;
        height: 24px;
        margin-right: 6px;
      }
      .choose {
        position: absolute;
        top: 0;
        right: 0;
        width: 16px;
        height: 16px;
      }
    }
    .item_ac {
      border-color: #fc7200;
      color: #fc7200;
    }
  }
  .recharge_list_m {
    .item {
      width: 90px;
      height: 36px;
      margin: 0 24px 15px 0;
      position: relative;
      .item_tips {
        height: 19px;
        position: absolute;
        right: -22px;
        top: -28px;
        padding: 5px;
        background-image: url("../../../static/image/recharge.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        font-size: 12px;
        font-weight: 100;
        color: #ffffff;
      }
    }
  }
  .recharge_coupon {
    width: 880px;
    background: #fef2e9;
    border-radius: 8px;
    padding: 3px 10px;
    margin-bottom: 42px;
    .recharge_coupon_top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      img {
        width: 28px;
        height: 30px;
      }
      .recharge_coupon_top_left {
        padding: 0 10px 0 8px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #fc7200;
      }
      .recharge_coupon_top_right {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        font-size: 12px;
        font-weight: 400;
        color: #fc7200;
        padding-top: 2px;
        div {
          margin-right: 10px;
        }
      }
    }
    .recharge_coupon_bottom {
      margin: 15px 10px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .recharge_coupon_bottom_item {
        width: 410px;
        height: 72px;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
        // margin-right: 24px;
        .recharge_coupon_bottom_left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 110px;
          margin-top: 10px auto;
          text-align: center;
          border-radius: 8px;
          background-color: #fff;
          padding: 10px 0;
          .recharge_coupon_bottom_left_num {
            span {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 400;
              line-height: 20px;
              margin-left: 2px;
              color: #ec1414;
            }
            .num {
              font-size: 26px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #ec1414;
            }
          }

          .recharge_coupon_bottom_sub {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 20px;
            color: #666666;
          }
        }
        .recharge_coupon_bottom_middle {
          display: flex;
          align-items: center;
          div {
            height: 100%;
            padding: 10px 0;
            height: 55px;
            border-right: 1px dashed #ec1414;
            box-sizing: border-box;
          }
        }
        .recharge_coupon_bottom_right {
          border-radius: 8px;
          background-color: #fff;
          flex: 1;
          position: relative;
          padding: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .recharge_coupon_bottom_date {
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: bold;
            line-height: 25px;
            color: #333333;
            div:last-child {
              height: 20px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 400;
              line-height: 20px;
              color: #999999;
            }
          }
          .recharge_coupon_bottom_number {
            display: flex;
            align-items: center;
            span {
              width: 63px;
              height: 22px;
              line-height: 22px;
              border: 1px solid #ec1414;
              border-radius: 18px;
              text-align: center;
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ec1414;
              cursor: pointer;
              &:hover {
                background-color: #ec1414;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>