mteacher/src/components/MRefund.vue

<template>
  <div class="mRefund">
    <m-header :backUrl="backUrlProtocol" name="退费规则" />
    <div class="importTip" v-if="idss.length > 0 && tenantId == 1">
      <h3 class="title">重要须知</h3>
      <p
        v-for="(id, index) in idss"
        :key="id"
        v-html="++index + '、' + importText[id]"
      ></p>
    </div>
    <div class="course">
      <h3 class="title">您本次购买的产品及服务信息如下：</h3>
      <div class="service">
        <van-row class="title">
          <van-col span="9" offset="1">名称</van-col>
          <van-col span="6" offset="1">类型</van-col>
          <van-col span="6" offset="1">价格</van-col>
        </van-row>
        <van-row class="value" v-for="(item, index) in buyList" :key="index">
          <van-col span="9" offset="1">{{ item.name }}</van-col>
          <van-col span="6" offset="1">{{ item.type }}</van-col>
          <van-col span="6" offset="1" style="color: #f85043"
            >￥{{ moneyFormat(item.price) }}</van-col
          >
        </van-row>
        <!-- <van-row class="title allMoney">
          <van-col span="9" offset="1">订单总金额</van-col>
          <van-col span="6" offset="1"></van-col>
          <van-col span="6" offset="1" style="color: #f85043"
            >￥{{ moneyFormat(allPrice) }}</van-col
          >
        </van-row> -->
      </div>
      <div class="money">
        <div class="service">
          <van-row class="allMoney value">
            <van-col span="9" offset="1">订单总金额</van-col>
            <van-col span="6" offset="1"></van-col>
            <van-col span="6" offset="1" style="color: #f85043"
              >￥{{ moneyFormat(allPrice) }}</van-col
            >
          </van-row>
          <van-row class="allMoney value" v-if="balancePrice > 0">
            <van-col span="9" offset="1">余额支付</van-col>
            <van-col span="6" offset="1"></van-col>
            <van-col span="6" offset="1" style="color: #f85043"
              >￥{{ -moneyFormat(balancePrice) }}</van-col
            >
          </van-row>
        </div>
      </div>
    </div>
    <Mcoupon
      class="Mcoupon"
      ref="Mcoupon"
      :showCoupon="true"
      :showBalance="balance > 0"
      :balance="balance"
      @onClickCheckbox="onClickCheckbox"
      :payType="payType"
      :buyList="buyList"
      @setCoupon="setCoupon"
    />
    <div class="buyWall"></div>
    <div class="buy">
      <div class="price">
        <!-- <p class="oldprice">
          <del class="text">原价</del>
          <del style="font-size: 0.14rem"
            >￥{{ marketPrice | moneyFormat }}</del
          >
        </p> -->
        <p class="now_price">
          <span class="text">仅需支付</span>
          <span style="font-weight: bold">￥{{ showPrice | moneyFormat }}</span>
        </p>
      </div>
      <a class="btn-submit" @click="onPopupSure" v-if="!btnName">{{
        orderNo ? "支付" : "购买"
      }}</a>
      <a v-else class="btn-submit" @click="onPopupSure">{{ btnName }}</a>
    </div>
    <!-- <div class="course" v-if="disCountList.length > 0">
      <h3 class="title">优惠信息</h3>
      <div class="service">
        <van-row class="title">
          <van-col span="9" offset="1">名称</van-col>
          <van-col span="6" offset="1">类型</van-col>
          <van-col span="6" offset="1">价格</van-col>
        </van-row>
        <div class="value" v-for="(item, index) in disCountList" :key="index">
          <van-row>
            <van-col span="9" offset="1" v-html="item.name"></van-col>
            <van-col span="6" offset="1">{{ item.type }}</van-col>
            <van-col span="6" offset="1" style="color: #f85043"
              >￥{{ moneyFormat(item.price) }}</van-col
            >
          </van-row>
          <van-row v-if="item.time">
            <van-col
              offset="1"
              style="padding-top: 0.05rem; font-size: 0.12rem; color: #808080"
            >
              {{ item.time }}
            </van-col>
          </van-row>
          <van-row v-if="item.childGoodsName">
            <van-col offset="1" style="padding-top: 0.05rem">
              <span
                v-for="(child, index) in item.childGoodsName"
                :key="child.id"
                style="font-size: 0.12rem; color: #808080"
                >{{ child }}
                {{ item.childGoodsName.length - 1 == index ? "" : "、" }}</span
              >
            </van-col>
          </van-row>
        </div>
        <van-row class="title allMoney">
          <van-col span="9" offset="1">优惠总金额</van-col>
          <van-col span="6" offset="1"></van-col>
          <van-col span="6" offset="1" style="color: #f85043"
            >￥{{ moneyFormat(disCountPrice) }}</van-col
          >
        </van-row>
      </div>
    </div> -->
    <!-- <div class="course" v-if="moneyList.length > 0">
      <h3 class="title">支付信息</h3>
      <div class="service">
        <van-row class="title">
          <van-col span="15" offset="1">支付方式</van-col>
          <van-col span="6" offset="1">价格</van-col>
        </van-row>
        <div class="value" v-for="(item, index) in moneyList" :key="index">
          <van-row>
            <van-col span="15" offset="1" v-html="item.name"></van-col>
            <van-col span="6" offset="1" style="color: #f85043"
              >￥{{ moneyFormat(item.price) }}</van-col
            >
          </van-row>
          <van-row v-if="item.time">
            <van-col
              offset="1"
              style="padding-top: 0.05rem; font-size: 0.12rem; color: #808080"
            >
              {{ item.time }}
            </van-col>
          </van-row>
          <van-row v-if="item.childGoodsName">
            <van-col offset="1" style="padding-top: 0.05rem">
              <span
                v-for="(child, index) in item.childGoodsName"
                :key="child.id"
                style="font-size: 0.12rem; color: #808080"
                >{{ child }}
                {{ item.childGoodsName.length - 1 == index ? "" : "、" }}</span
              >
            </van-col>
          </van-row>
        </div>
      </div>
    </div> -->

    <!-- <div style="padding: 0 0.15rem">
      <van-button class="protocol-btn" @click="onPopupSure" type="info"
        >确认</van-button
      >
    </div> -->
  </div>
</template>

<script>
import Mcoupon from "@/components/Mcoupon.vue";
import MHeader from "@/components/header";
import { browser } from "@/common/util";
import numeral from "numeral";
export default {
  name: "mRefund",
  components: { MHeader, Mcoupon },
  props: {
    ids: {
      type: Array,
      default() {
        return [1, 2, 3, 4, 5, 6];
      },
    },
    buyList: {
      type: Array,
    },
    disCountList: {
      type: Array,
    },
    moneyList: {
      type: Array,
      default() {
        return [];
      },
    },
    orderNo: {
      type: Number || String,
      default() {
        return 0;
      },
    },
    balance: [Number, String],
    btnName: {
      type: Boolean || String,
      default() {
        return false;
      },
    },
  },
  data() {
    let that = this;
    return {
      headerStatus: false,
      importText: {
        1: "乐器、教辅、配件等，未经签收，自购买缴款之日起15日内可申请退款，超过上述期限则不予受理退费申请；非因商品本身存在质量问题，一经签收，无论使用与否，均不予退费；",
        2: "乐保服务，在维修老师下校检查前可申请退款，下校检查日过后则不予退费；",
        3: "AMR器乐练习系统服务，自购买缴款之日起15日内可申请退款，超过上述期限或实际已提供相应服务则一律不予受理退费；",
        4: "正价购买的个别课程，包括但不限于VIP课程项下一对一、网管课等，课程有效期内可申请退费，可退款金额为：购买金额-课时原价*已消耗课时数量；",
        5: "活动期间以优惠价格购买的个别课程，自购买缴款之日起15日内可申请退款，超过上述期限或实际已发生课时消耗的则一律不予受理退费；",
        6: "所有退款均按照退款金额的千分之五收取手续费；",
      },
      // protocolHTML: null,
      backUrlProtocol: {
        callBack() {
          that.callBack();
        },
      },
      payType: false,
      payCountMoney: 0,
      valuePirce: 0,
      couponIdList: [],
      tenantId: null,
    };
  },
  mounted() {
    if (!browser().android && !browser().iPhone) {
      this.headerStatus = true;
    }
    if (this.ids.indexOf(6) == -1) {
      this.ids.push(6);
    }
    this.tenantId = sessionStorage.getItem("tenantId");
  },
  methods: {
    onPopupSure() {
      // 协议确定
      let obj = {
        pageShowPrice: this.pageShowPrice,
        amount: this.needPrice,
        payType: this.payType,
        couponIdList: this.couponIdList,
      };
      this.$emit("onPopupSure", obj);
    },
    callBack() {
      this.$emit("onClose");
    },
    moneyFormat(value) {
      return numeral(value).format("0.00");
    },
    setCoupon(obj) {
      this.$emit("setCoupon", obj);
      // console.log(obj, "setCoupon");
      this.valuePirce = obj.valuePirce;
      this.couponIdList = obj.couponList;
    },
    onClickCheckbox() {
      this.payType = !this.payType;
    },
  },
  computed: {
    allPrice() {
      let allMoney = 0;
      this.buyList.forEach((item) => {
        allMoney += Number(item.price);
      });
      return allMoney;
    },
    disCountPrice() {
      let disCountMoney = 0;
      this.disCountList.forEach((item) => {
        disCountMoney += Number(item.price);
      });
      return disCountMoney;
    },
    idss() {
      if (this.ids.indexOf(6) == -1) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.ids.push(6);
      }
      return this.ids;
    },
    needPrice() {
      // allPrice - 余额 -优惠券
      // let amount = 0;
      // if (this.payType) {
      //   if (this.allPrice - this.valuePirce >= this.balance) {
      //     amount = Number(
      //       (this.allPrice  - this.valuePirce).toFixed(2)
      //     );
      //   } else {
      //     amount = 0;
      //   }
      //   // 使用余额
      // } else {
      //   // 不使用余额
      //   amount = this.allPrice - this.valuePirce;
      // }
      return Number((this.allPrice - this.valuePirce).toFixed(2));
    },
    balancePrice() {
      let balance = 0;
      if (this.payType) {
        if (this.allPrice - this.valuePirce >= this.balance) {
          balance = this.balance;
        } else {
          balance = Number(this.allPrice - this.valuePirce);
        }
      }
      return Number(balance);
    },
    pageShowPrice() {
      // allPrice - 余额 -优惠券
      let amount = 0;
      if (this.payType) {
        if (this.allPrice - this.valuePirce >= this.balance) {
          amount = Number(
            (this.allPrice - this.valuePirce - this.balance).toFixed(2)
          );
        } else {
          amount = 0;
        }
        // 使用余额
      } else {
        // 不使用余额
        amount = this.allPrice - this.valuePirce;
      }
      return Number(amount);
    },
    showPrice() {
      // allPrice - 余额 -优惠券
      let amount = 0;
      if (this.payType) {
        if (this.allPrice - this.valuePirce >= this.balance) {
          amount = Number(
            (this.allPrice - this.valuePirce - this.balance).toFixed(2)
          );
        } else {
          amount = 0;
        }
        // 使用余额
      } else {
        // 不使用余额
        amount = this.allPrice - this.valuePirce;
      }
      return Number(amount).toFixed(2);
    },
  },
};
</script>

<style lang="less" scoped>
.mRefund {
  background-color: #f3f4f8;
  min-height: 100vh;
  overflow: hidden;
}

.refund-btn {
  margin: 0.15rem 0 0.35rem;
  background: #01c1b5;
  color: #fff;
  font-size: 0.18rem;
  text-align: center;
  width: 100%;
}

.importTip,
.course {
  background: #ffffff;
  border-radius: 0.08rem;
  margin: 0.15rem;
  padding: 0.15rem;
  overflow: hidden;

  h3 {
    font-size: 0.14rem;
    font-weight: 400;
    padding-bottom: 0.05rem;

    &.title {
      font-size: 0.16rem;
      line-height: 0.28rem;
      font-weight: bold;
      padding-bottom: 0.05rem;

      &::before {
        content: " ";
        width: 0.04rem;
        height: 0.15rem;
        background: #01c1b5;
        display: inline-block;
        margin-right: 0.07rem;
        border-radius: 8px;
        position: relative;
        top: 0.01rem;
      }
    }
  }

  p {
    font-size: 0.13rem;
    line-height: 1.8;
    color: #808080;
  }
}

.service {
  font-size: 0.13rem;

  .title {
    padding: 0.05rem 0;
    background: #f1f1f1;
    color: #959595;
  }

  .value {
    padding: 0.1rem 0;
    border-bottom: 1px solid #f1f1f1;
  }
}
.allMoney.title {
  // margin-top: .1rem;
  font-weight: bold;
  color: #000;
}
.buyWall {
  height: 0.55rem;
}
.buy {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.55rem;
  display: flex;
  align-items: center;
  padding: 0 0.2rem;
  border-top: 1px solid #f0f0f0;
  color: #000000;
  font-size: 0.12rem;
  background: #fff;

  .price {
    flex: 1;
    font-size: 0.16rem;
  }

  font-size: 0.16rem;

  span {
    color: #f5222d;
  }

  .text {
    font-size: 0.14rem;
    width: 0.6rem;
    display: inline-block;
    color: #000;
  }

  del {
    color: #b5b5b5;

    &.text {
      color: #b5b5b5;
    }
  }

  .btn-submit {
    display: inline-block;
    font-size: 0.18rem;
    color: #fff;
    background: #01c1b5;
    border-radius: 1rem;
    // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
    padding: 0.08rem 0.36rem;
  }
}

.pay-section {
  margin: 0 0.15rem 0.1rem;
}
/deep/.pay-name {
  padding-left: 0.1rem;
  width: 70% !important;
  font-weight: bold;
  font-size: 0.14rem !important;
}
</style>