ylrz_his_scrm_companyUI/src/views/company/companyVoicePackageOrder/buy.vue

<template>
  <div class="app-container">
    <div class="counts">
      <div class="title">通话统计</div>
      <div class="items">
          <div class="item">
            <div class="name">
              公司余额
            </div>
            <div class="count green">
              <span  >{{company.money}}</span>元
            </div>
          </div>
          <div class="item">
            <div class="name">
              坐席数量
            </div>
            <div class="count green">
              <span  >{{company.voiceCallerNumber}}</span>个
            </div>
          </div>
          <div class="item">
            <div class="name">
              剩余通话分钟数
            </div>
            <div class="count red">
              <span  >{{voice.times}}</span>分
            </div>
          </div>
          <div class="item">
            <div class="name">
              累计通话分钟数
            </div>
            <div class="count green">
              <span  >{{voice.totalTimes}}</span>分
            </div>
          </div>
      </div>
    </div>
     <el-tabs v-model="activeName"  >
      <el-tab-pane label="套餐购买" name="first">
           <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="套餐" prop="packageId" >
                <div class="package">
                    <div  @click="selectItem(item)"  v-for="(item,index) in packages">
                        <el-card shadow="hover" :class="form.packageId==item.packageId?'item active':'item'"  >
                          {{item.packageName}}
                        </el-card>
                    </div>
                </div>
              </el-form-item>
              <div class="footer-btn">
              <el-button type="primary" @click="submitForm">立即购买</el-button>
            </div>
            </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getVoicePackagelist, buy} from "@/api/company/companyVoicePackageOrder";
import { getCompanyInfo,getCompanyVoice } from "@/api/company/company";

export default {
  name: "CompanyRecharge",
  data() {
    return {
      company:null,
      activeName:"first",
      voice:null,
      packages:[],
      package:{},
      orderNo:"",
      money:0,
      // 表单参数
      form: {
        packageId:null,
      },
      // 表单校验
      rules: {

         packageId: [
          { required: true, message: "套餐不能为空", trigger: "blur" },
        ],
      }
    };
  },
  created() {
    this.getCompanyInfo();
    this.getCompanyVoice();
    this.getVoicePackagelist();
  },

  methods: {
    selectItem(item){
      this.form.packageId=item.packageId;
      console.log(this.form.packageId)
    },
    getCompanyVoice(){
      getCompanyVoice().then(response => {
        this.voice = response.data;
      });
    },
    getCompanyInfo(){
      getCompanyInfo().then(response => {
        this.company = response.data;
      });
    },
    getVoicePackagelist() {
      getVoicePackagelist().then(response => {
        this.packages = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      var that=this;
      this.$refs["form"].validate(valid => {
        if (valid) {
            buy(this.form).then(response => {
              if (response.code === 200) {
                  this.msgSuccess("充值成功");
                  this.getCompanyInfo();
                  this.getCompanyVoice();
              }
            });
        }
      });
    },
  }
};
</script>
<style  lang="scss" scoped>
.package{
  display: flex;
  .item{
    width:200px;
    margin: 0px 10px;
    cursor: pointer;

  }
  .active{
    border: 1px solid #13c2c2;;
  }


}
.el-radio{
  margin-right: 0px;
}
.radio{
  display: flex;
  align-items: center;


}
.radio-item{
  padding-right:15px;
  .radio-img{
    margin-right: 10px;
  }
  .el-radio{
    display: flex;
    align-items: center;
    .el-radio__label{
      display: flex;
      align-items: center;
    }
  }
}
.footer-btn{
  padding-top: 30px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}
.pay-dialog-cont{
    padding: 5px 0 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .price{
      display: flex;
      align-items: flex-end;
      .label{
        font-size: 14px;
        color: #666666;
        margin-right: 10px;
        line-height: 20px;
      }
      .unit{
        font-size: 16px;
        font-weight: bold;
        color: #FF6633;
        margin-right: 5px;
        line-height: 20px;
      }
      .num{
        font-size: 24px;
        font-weight: bold;
        color: #FF6633;
      }
    }
    .order-sn{
      font-size: 14px;
      color: #666666;
      line-height: 1;
      margin-top: 20px;
    }
    .code-box{
      width: 200px;
      height: 200px;
      margin-top: 40px;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .tip-box{
      margin-top: 30px;
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 14px;
      color: #333333;
      line-height: 22px;
      .orange{
        color: #FF6633;
      }
    }
  }
.counts{
  padding: 15px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  .title{
    margin-left: 30px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
  }
  .items{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    .item{
      padding: 0px 30px;
      border-right: 1px solid #eee;
      &:last-child{
        border-right: none;
      }
      .name{
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 5px;
      }
      .count{
        font-size: 14px;
        font-weight: normal;
      }
      .red{
        color: red;
      }
      .green{
        color: #13c2c2;
      }
    }
  }
}
</style>