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

<template>
  <div>
    <el-col :span="24">
      <div class="head-account">
        <div class="balance">
          <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: {
    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>
.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 {
  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: 100%;
  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 17px;
    display: flex;
    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>