official_revision/src/modules/createAn4.vue

<template>
  <div class="createAn4-box">
    <div class="laber-box intro-x">
      <div
        class="laberItem-box"
        :class="{
          isLaberTrue: payment == index,
          available: index == 0 || index == 1,
        }"
        v-for="(item, index) in ceateData4"
        :key="index"
        @click="getPayment(index)"
      >
        <img class="itemLeftImg" :src="item.icon" alt="" />

        <div class="laberContent">
          <div class="item1">{{ item.title }}</div>
          <div class="item2">{{ item.content }}</div>
        </div>

        <div
          class="float-yuan"
          :class="{ 'el-icon-check': payment === index }"
          v-show="payment === index"
        ></div>
      </div>
    </div>

    <div class="table-box intro-x">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="账单明细" show-overflow-tooltip>
          <!-- eslint-disable-next-line -->
          <template slot-scope="scope">
            <div class="scopeTitle">{{ scope.row.content }}</div>
            <span class="scopeCotnent">{{
              scope.$index == 0
                ? "已选择功能模块"
                : scope.$index == 1
                ? "已选择插件"
                : "已选择终端"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="num"
          label="数量"
          width="103"
          show-overflow-tooltip
        >
          <!-- eslint-disable-next-line -->
          <template slot-scope="scope">
            <span>x{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          label="优惠"
          width="100"
          show-overflow-tooltip
        >
          <!-- eslint-disable-next-line -->
          <template slot-scope="scope">
            <span class="scopeDiscounts">{{ scope.row.discounts }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          prop="money"
          label="金额"
          width="80"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </div>

    <div class="promotionCode-box intro-x">
      <div class="promotionCode">
        <span>优惠码</span>
        <div class="el-Input">
          <el-input placeholder="输入优惠码可在当前价格上再打折扣"></el-input>
        </div>
      </div>
      <div class="promotionMoney" v-if="CodeMoney >= 1">
        - ¥ {{ CodeMoney }}
      </div>
    </div>

    <div class="totalMoney-box intro-x">
      <div class="totalMoney-right">
        <div class="div1">总计金额</div>
        <!-- 使用 Vue filters过滤器  -->
        <div class="div2">¥ {{ tatalMoneys | formatMoney }}</div> 
        <!-- <div class="div3">共省 ¥6234</div> -->
      </div>
    </div>
  </div>
</template>

<script>
// import { formatMoney } from "../utils/formatMoney";
export default {
  props: ["ceateData1", "ceateData2", "ceateData3"],
  filters: {
    formatMoney: function (
      number,
      decimals = 2,
      decPoint = ".",
      thousandsSep = ","
    ) {
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      let n = !isFinite(+number) ? 0 : +number;
      let prec = !isFinite(+decimals) ? 0 : Math.abs(decimals);
      let sep = typeof thousandsSep === "undefined" ? "," : thousandsSep;
      let dec = typeof decPoint === "undefined" ? "." : decPoint;
      let s = "";
      let toFixedFix = function (n, prec) {
        let k = Math.pow(10, prec);
        return "" + Math.ceil(n * k) / k;
      };
      s = (prec ? toFixedFix(n, prec) : "" + Math.round(n)).split(".");
      let re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
 
      return s.join(dec);
    },
  },
  computed: {
    tableData: function () {
      let arr = [];
      let obj = {
        content: [],
        discounts: "享受打包价",
        money: 0,
      };
 
      for (let i in this.ceateData1) {
        obj.content.push(this.ceateData1[i].title);
        obj.num = Number(i) + 1;
        obj.money = obj.money + this.ceateData1[i].money;
      }
      obj.content = obj.content.join("、");
      arr.push(obj);
      obj = {
        content: [],
        discounts: "享受打包价",
        money: 0,
      };
      for (let i in this.ceateData2) {
        obj.content.push(this.ceateData2[i].content);
        obj.num = Number(i) + 1;
        obj.money = obj.money + Number(this.ceateData2[i].preferential);
      }
      obj.content = obj.content.join("、");
      arr.push(obj);

      obj = {
        content: [],
        discounts: "享受打包价",
        money: 0,
      };

      for (let i in this.ceateData3) {
        obj.content.push(this.ceateData3[i].title);
        obj.num = Number(i) + 1;
        obj.money = obj.money + Number(this.ceateData3[i].preferential);
      }

      obj.content = obj.content.join("、");
      arr.push(obj);
      return arr;
    },
    tatalMoneys: function () {
      let money = 0;
      for (let i in this.tableData) {
        money = money + this.tableData[i].money;
      }
      return money;
    },
  },
  data() {
    return {
      payment: 2,
      CodeMoney: 0,
      ceateData4: [
        {
          icon: require("../assets/images/xinyong.png"),
          title: "授信模式",
          content:
            "每个认证账户可以免费获得一次授信开通机会，认证芝麻信用分可以享受先用后付的权利（每月将从盈利订单中扣除相应服务费，最多扣除14000元），可随时切换成付费模式。",
          laber: true,
        },
        {
          icon: require("../assets/images/zhifubao.png"),
          title: "支付宝支付",
          content:
            "一次付费即可享用相应购买版本的所有内容，购买满足条件可享受打包价格，完善认证信息可享500元优惠券，可用于购买服务抵扣费用。",
          laber: false,
        },
        {
          icon: require("../assets/images/qianbao.png"),
          title: "余额支付",
          content:
            "选择账号内所充值的金额来进行支付，支付前会检测当前账号余额是否充足。支付成功后会奖励500元优惠券，可以用购买服务抵扣费用。",
          laber: false,
        },
      ],
    };
  },
  methods: {
    getPayment: function (index) {
      if (index === 0 || index === 1) {
        this.$alert("授权模式暂未开放，请选择其他方式", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
        return;
      }
      this.payment = index;
    },
    created() {},
  },
};
</script>
<style lang="scss" scoped>
.createAn4-box {
  margin-top: 30px;
  padding: 0 116px;
  .laber-box {
    width: 100%;
    overflow: hidden;
    .laberItem-box {
      float: left;
      width: 32%;
      min-width: 355px;
      max-width: 430px;
      height: 132px;
      background: #fff;
      padding: 20px;
      box-sizing: border-box;
      overflow: hidden;
      border: 1px solid #eef2f7;
      cursor: pointer;
      border-radius: 22px;
      margin: 0 2% 2% 0;
    }
    .laberItem-box:last-child {
      margin: 0;
    }
  }
  .itemLeftImg {
    width: 48px;
    height: 48px;
    margin: 22px 20px 42px 0;
    float: left;
  }

  .laberContent {
    float: left;

    width: 76%;
    min-width: 250px;
    .item1 {
      color: #333333;
      font-size: 14px;
    }
    .item2 {
      font-size: 12px;
      color: #999999;
    }
  }
  .float-yuan {
    width: 20px;
    height: 20px;
    background: #1890ff;
    border-radius: 50%;
    float: right;
    margin-top: 38px;
    text-align: center;
    line-height: 20px;
    color: #ffffff;
    font-weight: bold;
    box-shadow: #e2e2e2 0px 0px 2px;
  }
  .isLaberTrue {
    border-color: #1890ff !important;
  }
}

.available {
  background: #f5f4f4 !important;
  cursor: not-allowed !important;
}

.scopeTitle {
  color: #333;
  font-size: 14px;
}

.scopeCotnent {
  color: #999999 !important;
  font-size: 12px !important;
}

.scopeDiscounts {
  color: #ff4242;
}
.promotionCode-box {
  overflow: hidden;
  margin-top: 13px;

  .promotionCode {
    float: left;
    span {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      margin-right: 10px;
      color: #333333;
      font-size: 14px;
    }
    .el-Input {
      display: inline-block;
      height: 40px;
      width: 465px;
    }
  }
  .promotionMoney {
    float: right;
    height: 40px;
    line-height: 40px;
    color: #ff4242;
    font-size: 14px;
  }
}

.totalMoney-box {
  overflow: hidden;
  .totalMoney-right {
    float: right;
    text-align: right;
    .div1 {
      font-size: 16px;
      color: #728196;
    }
    .div2 {
      color: #1890ff;
      font-weight: bold;
      font-size: 20px;
      margin: 4px 0;
    }
    .div3 {
      font-size: 14px;
      color: #394251;
    }
  }
}
</style>