saas_member/src/views/components/index/payContain.vue

<template>
  <container title="支付">
    <div class="pay-top">
      <p class="pay-title">已选商品</p>
      <div class="good-list scrollbar">
        <div class="good-item fl_c" v-for="(item, i) in list" :key="i">
          <img
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            alt=""
          />
          <div class="good-info">
            <div class="line1">
              {{ item.goodsName }}
            </div>
            <div>
              <span class="cb22">￥{{ item.specialPrice | formatPrice }}</span>
              <span class="text-21f"
                >+
                {{ item._integral }}
                积分</span
              >
              <span class="text-line c99"
                >￥{{ item.standPrice | formatPrice }}</span
              >
            </div>
          </div>
          <div class="good-btn fl_c" @click="del(i)">
            <i class="el-icon-delete"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="pay-bom">
      <p class="pay-title">商品价格</p>
      <div class="input-ward fl">
        ￥
        <input
          @focus="$emit('changeFocusType', 'allPrice')"
          placeholder="请输入金额"
          @input="$emit('checkValue', from.allPrice)"
          v-model="from.allPrice"
          v-int
        />
      </div>
      <div class="discount fl">
        <img src="../../../assets//images//Controls_sel.png" alt="" />
        <span class="discount-text">折扣商品</span>
        <span class="mr">该商品最多可抵扣</span>
        <input
          type="text"
          v-model="from.discount"
          v-int
          @input="$emit('checkValue', from.discount)"
          @focus="$emit('changeFocusType', 'discount')"
        />
        <span class="mr1">元</span>
        <span class="text-21f">（{{ morePointsValue }}积分）</span>
      </div>
      <div class="integral-box c48">
        <div>
          可用积分：
          {{ pointsValue }}积分 （{{
            (pointsValue / getRules) | formatPrice
          }}元）
        </div>
        <div>
          抵扣积分：{{ deductionIntegral }}积分（{{
            (deductionIntegral / getRules) | formatPrice
          }}元）
        </div>
        <div>
          积分补差：{{ paidPointsValue }}积分（{{
            (paidPointsValue / getRules) | formatPrice
          }}元）
        </div>
        <div class="line"></div>
        <div class="c48">
          优惠金额：<span class="discount-money"
            >￥{{ (deductionIntegral / getRules) | formatPrice }}</span
          >
        </div>
        <div class="c48">
          实付金额：<span class="money">￥{{ payPrice | formatPrice }}</span>
        </div>
        <div class="fl c48">
          支付方式：
          <div
            class="wechart fl_c"
            :class="{ actived1: active == item.value }"
            @click="active = item.value"
            v-for="item in payType"
            :key="item.value"
          >
            <img :src="item.src" alt="" />
            <span>{{ item.lebel }}</span>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button type="danger" @click="handelPay">立即收款</el-button>
      </div>
    </div>
    <Base-dialog
      title="请先扫码会员卡"
      :isShow.sync="isShow"
      @submit="submitForm"
      confirmName="确 认"
    >
      <el-form :model="this" :rules="rules" ref="ruleForm">
        <el-form-item label=" " prop="cardSn">
          <div class="input-box">
            <el-input
              placeholder="请扫描会员卡"
              v-model="cardSn"
              :max="8"
              v-int="{ set: 0 }"
            >
              <img
                class="dialog-icon"
                src="../../../assets/images/icon_scan.png"
                slot="suffix"
              />
            </el-input>
          </div>
        </el-form-item>
      </el-form>
    </Base-dialog>
    <Base-dialog
      title="请扫码支付"
      :isShow.sync="isShowCode"
      width="400px"
      :isShowFooter="false"
    >
      <div class="scan_pay_box">
        <div class="code_box">
          <div id="root" ref="qrCodeUrl"></div>
          <div class="code_box_tip fl_b">
            <img
              class="dialog-icon"
              src="../../../assets/images/icon_scan3.png"
              slot="suffix"
            />
            <p>打开手机的微信扫描二维码支付</p>
          </div>
        </div>
        <div class="c48">
          实付金额（元）:
          <span class="money">￥</span>
          <span class="money fs30">{{ 1511 | formatPrice }}</span>
        </div>
      </div>
    </Base-dialog>
  </container>
</template>

<script>
import { mapGetters } from "vuex";
import QRCode from "qrcodejs2";
export default {
  name: "SaasMemberPayContain",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    from: {
      type: Object,
      default: () => {
        return {};
      },
    },
    type: {
      type: [Number, String],
    },
    memberInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    getUserDetail: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    var validateCardSn = (rule, value, callback) => {
      if (value.length !== 16) {
        return callback(new Error("会员卡号格式不正确"));
      }
      callback();
    };
    return {
      money: "",
      checked: true,
      payType: [
        {
          lebel: "微信支付",
          value: 1,
          src: require("../../../assets/images/icon_wechat.png"),
        },
        {
          lebel: "现金支付",
          value: 3,
          src: require("../../../assets/images/icon_cash.png"),
        },
      ],
      active: 1,
      isShow: false,
      cardSn: "1000146902628081",
      rules: {
        cardSn: [{ validator: validateCardSn, trigger: "blur" }],
      },
      qrcode: null,
      isShowCode: false,
    };
  },

  mounted() {
    // this.$nextTick(() => {
    //   this.creatQrCode();
    // });
  },

  methods: {
    handelPay() {
      if (this.list.length == 0) {
        this.$message({
          message: "请选择至少一个商品",
          type: "warning",
        });
        return;
      }
      if (!this.isHaveUser) {
        this.$nextTick(() => {
          this.$refs["ruleForm"] && this.$refs["ruleForm"].resetFields();
        });
        this.isShow = true;
        return;
      }
      this.from.userId = this.memberInfo.userId;
      if (this.active == 1) {
        this.from.orderStatus = 0;
        this.from.payStatus = 0;
      } else {
        this.from.orderStatus = 1;
        this.from.payStatus = 2;
      }
      this.from.payType = this.active;
      this.from.payPrice = this.payPrice;
      this.from.deductionIntegral = this.deductionIntegral;
      this.from.deductionMoney = (
        this.deductionIntegral / this.getRules
      ).toFixed(2);
      this.from.integralRule = this.getRules;
      this.from.goodsList = this.list.map((e) => {
        return {
          goodsId: e.goodsId,
          goodsPrice: e.standPrice,
          goodsReceived: e.specialPrice,
          specialPrice: e.specialPrice,
          payStatus: this.from.payStatus,
        };
      });
      this.$emit("pay");
    },
    del(index) {
      this.list.splice(index, 1);
    },
    focus(type) {
      this.$emit("update:type", type);
    },
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.getUserDetail(this.cardSn).then((res) => {
            this.isShow = false;
            this.handelPay();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    creatQrCode() {
      this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: "https://www.baidu.com/", // 需要转换为二维码的内容
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
  },
  computed: {
    ...mapGetters(["getRules"]),
    pointsValue() {
      if (!this.isHaveUser) {
        return 0;
      }
      return this.memberInfo.pointsValue;
    },
    payPrice() {
      return (
        this.from.allPrice -
        this.from.discount +
        this.paidPointsValue / this.getRules
      ).toFixed(2);
    },
    deductionIntegral() {
      if (!this.isHaveUser) {
        return 0;
      }
      return this.pointsValue > this.morePointsValue
        ? this.morePointsValue
        : this.pointsValue;
    },
    paidPointsValue() {
      if (!this.isHaveUser) {
        return 0;
      }
      return this.morePointsValue - this.deductionIntegral;
    },
    paidPrice() {
      return this.formatPrice(this.paidPointsValue / this.getRules);
    },
    morePointsValue() {
      return this.from.discount * this.getRules;
    },
    isHaveUser() {
      return !!this.memberInfo.userId;
    },
  },
  components: {
    QRCode,
  },
};
</script>

<style lang="scss" scoped>
.pay-title {
  font-size: 14px;
  color: #4a4a4b;
}
.pay-top {
  margin-bottom: 40px;
  .good-list {
    height: 260px;
    overflow-x: auto;
    .good-item {
      height: 60px;
      margin-bottom: 28px;
      &:nth-last-of-type(1) {
        margin-bottom: 0;
      }
      img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        margin-right: 10px;
      }
      .good-info {
        flex: 1;
        overflow: hidden;
        .line1 {
          color: #4a4a4b;
        }
        div:nth-of-type(2) {
          margin-top: 14px;
          span {
            font-size: 14px;
            margin-right: 4px;
            &:last-child {
              margin-left: 20px;
            }
          }
        }
      }
      .good-btn {
        width: 40px;
        height: 60px;
        background: #eb5757;
        border-radius: 8px;
        height: 100%;
        margin-left: 20px;
        i {
          color: #ffffff;
        }
      }
    }
  }
}
.pay-bom {
  height: 400px;
  .input-ward {
    width: 100%;
    height: 68px;
    background: #f6f7f9;
    border-radius: 12px;
    padding-left: 16px;
    font-weight: 800;
    color: #222222;
    font-size: 24px;
    margin-bottom: 28px;
    input {
      font-weight: 800;
      color: #222222;
      font-size: 24px;
      &::-webkit-input-placeholder {
        // 针对 谷歌 内核
        font-weight: 600;
        font-size: 20px;
        line-height: 40px;
      }
    }
  }
  .discount {
    width: 100%;
    font-size: 14px;
    margin-bottom: 18px;
    .mr {
      margin: 0 8px 0 12px;
      color: #666666;
    }
    .mr1 {
      margin-left: 8px;
      color: #666666;
    }
    .discount-text {
      color: #000;
      font-weight: bold;
      color: #4a4a4b;
      margin-left: 5px;
    }
    input {
      width: 114px;
      height: 36px;
      padding: 0 10px;
      border-radius: 6px;
    }
  }
  .integral-box {
    height: 100%;
    padding-bottom: 16px;
    div {
      margin-top: 16px;
    }
    .discount-money {
      color: #eb5757;
      font-size: 14px;
    }
    .money {
      font-weight: 800;
      color: #eb5757;
      font-size: 16px;
    }
    .fl {
      margin-top: 20px;
    }
    .wechart {
      margin-top: 0;
      margin-right: 20px;
      width: 160px;
      height: 55px;
      background: #f6f7f9;
      border-radius: 12px;
      color: #09bb07;
      font-size: 16px;
      cursor: pointer;
      img {
        margin-right: 6px;
        margin-top: 4px;
      }
    }
    .actived1 {
      border: 1px solid #fa821f;
      background: #fffaf7;
      color: #00908c;
    }
    .line {
      height: 2px;
      background: #f1f1f1;
      margin: 16px 0;
    }
  }
  .btn {
    width: 382px;
    height: 52px;
    margin: 36px auto 0;
    .el-button {
      width: 100%;
      height: 52px;
      background: #fa821f;
      border-radius: 8px;
    }
  }
  input {
    background: #f6f7f9;
    border: none;
    outline: none;
  }
}
.input-box {
  img {
    margin: 8px 8px 0 0;
  }
}
.scan_pay_box {
  width: 280px;
  margin: 0 auto;
  .code_box {
    height: 330px;
    padding: 30px 40px;
    border: 1px solid #cccccc;
    .code_box_tip {
      img {
        width: 44px;
        height: 44px;
      }
      p {
        width: 130px;
        color: #4a4a4b;
        font-size: 18px;
      }
    }
  }
  .c48 {
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    .fs30 {
      font-size: 26px;
    }
  }
}
.money {
  font-weight: 800;
  color: #eb5757;
  font-size: 16px;
}
</style>