dy-admin-manager/src/views/teamBuild/components/teamBaseInfo.vue

<template>
  <div class='base-container'>
    <div class="banseLeft">
      <div class="head">乐团基本信息：</div>
      <!-- <div class="num">乐团编号：dywh01</div> -->
      <el-form :model="topFrom"
               :inline="true"
               ref='topinfo'
               style="margin-left:11px;">
        <el-form-item label="收费类型"
                      prop="type"
                      :rules="[{ required: true, message: '收费类型不能为空'}]">
          <el-select v-model="topFrom.type"
                     clearable>
            <el-option v-for="(item,index) in typeList"
                       :key='index'
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属分部"
                      prop="section"
                      :rules="[{ required: true, message: '所属分部不能为空'},]">
          <el-select v-model="topFrom.section"
                     clearable>
            <el-option v-for="(item,index) in sectionList"
                       :key='index'
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合作单位"
                      prop="school"
                      :rules="[{ required: true, message: '合作单位不能为空'},]">
          <el-select v-model="topFrom.school"
                     @change="chioseSchool"
                     clearable>
            <el-option v-for="(item,index) in cooperationList"
                       :key='index'
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教学地点"
                      prop="address"
                      :rules="[{ required: true, message: '教学地点不能为空'},]">
          <el-select v-model="topFrom.address">
            <el-option v-for="(item,index) in addList"
                       :key='index'
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="乐团名称"
                      prop='name'
                      :rules="[{ required: true, message: '乐团名称不能为空'},]">
          <el-input placeholder="请输入乐团名称"
                    v-model="topFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="运营主管"
                      prop='boss'
                      :rules="[{ required: true, message: '运营主管不能为空'},]">
          <el-select v-model="topFrom.boss"
                     filterable
                     clearable>
            <el-option v-for="(item,index) in orgianList"
                       :key='index'
                       :label="item.realName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教务老师"
                      prop='teacher'
                      :rules="[{ required: true, message: '教务老师不能为空'},]">
          <el-select v-model="topFrom.teacher"
                     filterable
                     clearable>
            <el-option v-for="(item,index) in orgianList"
                       :key='index'
                       :label="item.realName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报名截止时间"
                      prop='time'
                      :rules="[{ required: true, message: '请输入报名截止时间'},]">
          <el-date-picker v-model="topFrom.time"
                          style="width:100%!important"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预计开团时间"
                      prop='startTime'
                      :rules="[{ required: true, message: '请输入预计开团时间'},]">
          <el-date-picker v-model="topFrom.startTime"
                          style="width:100%!important"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="招生年级"
                      prop='startClass'
                      :rules="[{ required: true, message: '请选择招生年纪'},]">
          <el-select placeholder="起始年级"
                     clearable
                     multiple
                     collapse-tags
                     v-model="topFrom.startClass">
            <el-option value="1"
                       label="一年级"></el-option>
            <el-option value="2"
                       label="二年级"></el-option>
            <el-option value="3"
                       label="三年级"></el-option>
            <el-option value="4"
                       label="四年级"></el-option>
            <el-option value="5"
                       label="五年级"></el-option>
            <el-option value="6"
                       label="六年级"></el-option>
            <el-option value="7"
                       label="初一"></el-option>
            <el-option value="8"
                       label="初二"></el-option>
            <el-option value="9"
                       label="初三"></el-option>
            <el-option value="10"
                       label="高一"></el-option>
            <el-option value="11"
                       label="高二"></el-option>
            <el-option value="12"
                       label="高三"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="课酬结算标准"
                      :rules="[{ required: true, message: '请选择课酬结算标准'},]"
                      prop="salary">
          <el-select v-model="topFrom.salary">
            <el-option label="默认课酬"
                       value="TEACHER_DEFAULT"></el-option>
            <el-option label="3.0课酬"
                       value="GRADIENT_SALARY"></el-option>
            <!-- <el-option label="课堂课酬"
                       value="CLASSROOM_SALARY"></el-option> -->
          </el-select>
        </el-form-item>

        <el-form-item label="  乐队指导"
                      v-if="teamStatus=='resetTeam' || teamStatus=='teamList'"
                      prop='head'>
          <el-select v-model="topFrom.head"
                     filterable
                     clearable>
            <el-option v-for="(item,index) in orgianList"
                       :key='index'
                       :label="item.realName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=""
                      prop="isClass">
          <el-checkbox v-model="topFrom.isClass">课堂课乐团</el-checkbox>
        </el-form-item>
      </el-form>
      <div class="checkList">
        <div class="head noMargin">课程组成形态：</div>
        <div class="checkRow">
          <el-checkbox label="乐团声部训练"
                       v-model="checkList.soundInfo.ischeck"></el-checkbox>
          <div class="inputWrap">
            单价: <input type="text"
                   placeholder="请输入"
                   v-model="checkList.soundInfo.value">
          </div>
        </div>
        <div class="checkRow">
          <el-checkbox label="乐团合奏训练"
                       v-model="checkList.allInfo.ischeck"></el-checkbox>
          <div class="inputWrap">
            单价: <input type="text"
                   placeholder="请输入"
                   v-model="checkList.allInfo.value">
          </div>
        </div>
        <div class="checkRow">
          <el-checkbox label="基础技能训练"
                       v-model="checkList.baseInfo.ischeck"></el-checkbox>
          <div class="inputWrap">
            单价: <input type="number"
                   placeholder="请输入"
                   v-model="checkList.baseInfo.value">
          </div>
        </div>
        <div class="checkRow">
          <el-checkbox label="假期集中训练"
                       v-model="checkList.holidayInfo.ischeck"></el-checkbox>
          <div class="inputWrap">
            单价: <input type="number"
                   placeholder="请输入"
                   v-model="checkList.holidayInfo.value">
          </div>
        </div>
        <div class="checkRow">
          <el-checkbox label="课程提示"
                       class='classCheckBox'
                       v-model="checkList.submit.ischeck"></el-checkbox>
          <div class="textWrap"
               v-if="checkList.submit.ischeck">
            <el-input type='textarea'
                      :rows="1"
                      style="width:500px"
                      v-model="checkList.submit.value"></el-input>
          </div>
        </div>
        <div class="head noMargin">付费方式：</div>
        <div class="checkRow">
          <el-checkbox label="学校"
                       class='classCheckBox'
                       v-model="payList.school.ischeck"></el-checkbox>
          <div class="chioseList">
            <div class="chioseItem"
                 :class="payList.school.chiose == 'ONE_OFF'?'active':''"
                 @click="payList.school.chiose='ONE_OFF'">一次性</div>
            <div class="chioseItem"
                 :class="payList.school.chiose == 'MONTHLY'?'active':''"
                 @click="payList.school.chiose='MONTHLY'">一个月</div>
            <div class="chioseItem "
                 :class="payList.school.chiose == 'TERM'?'active':''"
                 @click="payList.school.chiose='TERM'">一学期</div>
            <div class="chioseItem"
                 :class="payList.school.chiose == 'YEAR'?'active':''"
                 @click="payList.school.chiose='YEAR'">一学年</div>
          </div>
          <div class="inputWrap">
            预计收费: <input type="textarea"
                   v-model="payList.school.price"
                   placeholder="请输入">
          </div>
          <div class="inputWrap">
            备注: <input type="textarea"
                   v-model="payList.school.value"
                   placeholder="请输入">
          </div>
        </div>
        <div class="checkRow">
          <el-checkbox label="公司"
                       class='classCheckBox'
                       v-model="payList.company.ischeck"></el-checkbox>
          <div class="chioseList">
            <div class="chioseItem"
                 :class="payList.company.chiose == 'ONE_OFF'?'active':''"
                 @click="payList.company.chiose='ONE_OFF'">一次性</div>
            <div class="chioseItem"
                 :class="payList.company.chiose == 'MONTHLY'?'active':''"
                 @click="payList.company.chiose='MONTHLY'">一个月</div>
            <div class="chioseItem "
                 :class="payList.company.chiose == 'TERM'?'active':''"
                 @click="payList.company.chiose='TERM'">一学期</div>
            <div class="chioseItem"
                 :class="payList.company.chiose == 'YEAR'?'active':''"
                 @click="payList.company.chiose='YEAR'">一学年</div>
          </div>
          <div class="inputWrap">
            预计收费: <input type="textarea"
                   placeholder="请输入"
                   v-model="payList.company.price">
          </div>
          <div class="inputWrap">
            备注: <input type="textarea"
                   placeholder="请输入"
                   v-model="payList.company.value">
          </div>
        </div>
        <div class="checkRow">
          <el-checkbox label="学员"
                       class='classCheckBox'
                       v-model="payList.student.ischeck"></el-checkbox>
          <div class="chioseList">
            <div class="chioseItem"
                 :class="payList.student.chiose == 'ONE_OFF'?'active':''"
                 @click="payList.student.chiose='ONE_OFF'">一次性</div>
            <div class="chioseItem"
                 :class="payList.student.chiose == 'loop'?'active':''"
                 @click="payList.student.chiose='loop'">周期循环</div>
          </div>
        </div>
        <p class="subTitle"
           v-if='payList.student.chiose == "loop"'>按月缴费时，将在所选月份的1号的前一周提醒用户缴费操作，单次的缴费金额为当前列表「预计收费」的设置金额</p>
        <div class="chioseWrap"
             v-if='payList.student.chiose == "loop"'>
          <p>请选择缴费月份:</p>
          <el-checkbox-group v-model="payList.chioseMonth"
                             fill="#14928A"
                             text-color='#474747'>

            <el-checkbox :label="1">一月</el-checkbox>
            <el-checkbox :label="2">二月</el-checkbox>
            <el-checkbox :label="3">三月</el-checkbox>
            <el-checkbox :label="4">四月</el-checkbox>
            <el-checkbox :label="5">五月</el-checkbox>
            <el-checkbox :label="6">六月</el-checkbox>
            <el-checkbox :label="7">七月</el-checkbox>
            <el-checkbox :label="8">八月</el-checkbox>
            <el-checkbox :label="9">九月</el-checkbox>
            <el-checkbox :label="10">十月</el-checkbox>
            <el-checkbox :label="11">十一月</el-checkbox>
            <el-checkbox :label="12">十二月</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="btnWrap">
      <div class="nextBtn"
           v-if="teamStatus=='resetTeam'"
           @click="resetSubmit">
        修改
      </div>
      <!-- 审批或者草稿的下一步 -->
      <div class="nextBtn"
           @click="gotoNext(1)"
           v-if="teamStatus=='newTeam' || teamStatus=='teamDraft'||teamStatus=='teamAudit' ">
        下一步
      </div>
      <!-- 跨团调整的下一步 -->
      <div class="nextBtn"
           v-if="teamStatus=='teamList'"
           @click="gotoNext(2)">
        下一步
      </div>
    </div>
    <!-- <div class="baseRight">
      <header>乐团注册</header>
      <div class="section">
        <h2 class="title line_bottom">课程</h2>
        <p class="indate line_bottom"
           key="indate-price">有效期至：2019年9月1号 <span>现价:￥580</span></p>

        <div class="options"
             key="class-list">
          <div class="option">
            <div class="0_hd"><i class="check_default check_active"></i></div>
            <div class="o_bd">乐团声部训练</div>
          </div>
          <div class="option">
            <div class="0_hd"><i class="check_default check_active"></i></div>
            <div class="o_bd">乐团合奏训练</div>
          </div>
          <div class="option">
            <div class="0_hd"><i class="check_default check_active"></i></div>
            <div class="o_bd">基础技能训练</div>
          </div>
          <div class="option">
            <div class="0_hd"><i class="check_default check_active"></i></div>
            <div class="o_bd">假期集中训练</div>
          </div>
        </div>
        <div class="coutInfo">
          <i class="trumpet_icon"></i>年度安排十个月训练，共计168课时，120元/课时，原价20160元，现仅支付560元/月（约合34.5元/课时）
        </div>
        <div class="buy">
          <div class="price">
            <p class="oldprice">
              <del class="text">原价</del>
              <del>{{ orderInfo.marketPrice }}￥</del>
            </p>
            <p class="now_price">
              <span class="text">仅需支付</span>
              <span>{{ orderInfo.referencePrice }}￥</span>
            </p>
          </div>
          <a>购买</a>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import { getSection, getType, getCooperation, getTeacher, getAddress, getPayMaster, getPayStatus, getTeamBaseInfo, resetTeamBaseInfo } from '@/api/buildTeam'
import { queryEmployByOrganId } from '@/api/systemManage'
import { scrollTo } from '@/utils/scroll-to'
import axios from 'axios'
import store from '@/store'
import qs from 'qs'
export default {
  props: ['getTeamList'],
  data () {
    return {
      organId: store.getters.organ,
      topFrom: {
        type: '', // 收费类型
        section: '', //所属分部
        school: '', // 合作单位
        teacher: '', // 教务老师
        name: '', //乐团名称
        boss: '', // 运营主管
        time: '', // 报名截止时间
        startClass: [], // 招生年级起始
        address: '', // 教学地点
        salary: '', // 收费模式
        head: '',
        isClass: false, //是否为课堂课
        startTime: ''
      },
      checkList: {
        soundInfo: { // 声部
          ischeck: false,
          value: ''
        },
        allInfo: { // 合奏
          ischeck: false,
          value: ''
        },
        baseInfo: { // 基础
          ischeck: false,
          value: ''
        },
        holidayInfo: { // 假期
          ischeck: false,
          value: ''
        },
        submit: {
          ischeck: false,
          value: '年度安排个月共xxx课时,课时,原价xxx元,现价xxxx元/月(约 xxxx元/课时 )'
        }
      }, // 选中的集合

      baseInfo: {},
      money: 580,
      orderInfo: {
        marketPrice: 0, // 原价总金额
        referencePrice: 0, // 现价总金额
      }, // 金额列表，金额计算
      sectionList: [], // 分部列表
      typeList: [], // 收费类型列表
      cooperationList: [], // 教学点列表
      teacherList: [], // 获取老师列表
      addList: [], // 教学地点列表
      payList: {
        school: {
          ischeck: false,
          value: '',
          price: '',
          chiose: ''
        },
        company: {
          ischeck: false,
          value: '',
          price: '',
          chiose: ''
        },
        student: {
          ischeck: true,
          chiose: 'loop'
        },
        chioseMonth: [], // 选中的月份
      },
      activeTeam: [],
      teamid: '',
      teamStatus: '',
      orgianList: []
    }
  },
  created () {
    // 分为3种  this.teamStatus 
    //          1.resetTeam 乐团修改
    //          2. newTeam  新建乐团
    //          3.teamList 跨团修改
    //          4.teamDraft 乐团草稿
    let year = new Date().getFullYear();
    axios.post('/jiari/', qs.stringify({ d: year })).then(res => {
      // this.holidayList = Object.keys(res.data[year])
    })
    this.teamStatus = this.$route.query.type;
    // 传过来的乐团信息
    this.activeTeam = this.getTeamList;

    if (this.teamStatus == 'resetTeam' || this.teamStatus == 'teamDraft' || this.teamStatus == 'teamAudit') {
      // 单团修改
      this.teamid = this.$route.query.id;
      getTeamBaseInfo({ musicGroupId: this.teamid }).then(res => {
        if (res.code == 200) {
          // 头部
          this.topFrom.name = res.data.musicGroup.name;
          this.topFrom.time = res.data.musicGroup.applyExpireDate;
          this.topFrom.type = res.data.musicGroup.chargeTypeId;
          this.topFrom.startClass = res.data.musicGroup.enrollClasses.split(',');
          this.topFrom.section = res.data.musicGroup.organId;
          this.topFrom.school = res.data.musicGroup.cooperationOrganId;
          this.topFrom.teacher = res.data.musicGroup.educationalTeacherId;
          this.topFrom.boss = res.data.musicGroup.teamTeacherId;
          this.topFrom.address = res.data.musicGroup.schoolId;
          this.topFrom.salary = res.data.musicGroup.settlementType;
          this.topFrom.head = res.data.musicGroup.directorUserId;
          this.topFrom.isClass = res.data.musicGroup.isClassroomLessons
          this.topFrom.startTime = res.data.musicGroup.expectStartGroupDate;
          // 课程组成形式
          this.checkList = JSON.parse(res.data.musicGroup.courseForm);
          // 付费方式和周期
          for (let i in res.data.musicGroupPaymentEntities) {
            if (res.data.musicGroupPaymentEntities[i].name == '学校') {
              this.payList.school.ischeck = true;
              this.payList.school.value = res.data.musicGroupPaymentEntities[i].memo;
              this.payList.school.price = res.data.musicGroupPaymentEntities[i].amount;
              this.payList.school.chiose = res.data.musicGroupPaymentEntities[i].paymentMethod;
            }
            if (res.data.musicGroupPaymentEntities[i].name == '公司') {
              this.payList.company.ischeck = true;
              this.payList.company.value = res.data.musicGroupPaymentEntities[i].memo;
              this.payList.company.price = res.data.musicGroupPaymentEntities[i].amount;
              this.payList.company.chiose = res.data.musicGroupPaymentEntities[i].paymentMethod;
            }

            if (res.data.months.length > 0) {
              this.payList.student.ischeck = true;
              this.payList.student.chiose = 'loop'
              this.chioseMonth = res.data.months;
            } else {
              this.payList.student.ischeck = true;
              this.payList.student.chiose = 'ONE_OFF'
            }
          }
          // 循环缴费月
          this.payList.chioseMonth = res.data.months;
        }
      })
    }

  },
  mounted () {
    // 1.获取各个选项卡的数据内容
    getSection({ 'delFlag': 0, 'rows': 1000 }).then(res => {
      if (res.code == 200) {
        this.sectionList = res.data.rows;
      }

    }).catch()
    // 2.获取收费类型选项卡
    getType({ 'rows': 1000, organId: this.organId }).then(res => {
      if (res.code == 200) {
        this.typeList = res.data.rows;
      }
    })
    // 3.获取合作单位选项卡
    getCooperation({ 'rows': 1000, organId: this.organId }).then(res => {
      if (res.code == 200) {
        this.cooperationList = res.data.rows;
      }
    })
    // 4.获取老师选项卡
    // getTeacher({ 'rows': 1000, organId: this.organId }).then(res => {
    //   if (res.code == 200) {
    //     this.teacherList = res.data;
    //   }
    // })
    // 5.获取教学地点选项卡
    getAddress({ 'rows': 1000, }).then(res => {
      if (res.code == 200) {
        this.addList = res.data.rows;
      }
    })
    // 6.默认支付主体
    // getPayMaster({ 'rows': 1000 }).then(res => {
    //   console.log(res);
    //   if (res.code == 200) {
    //     this.payList = res.data.map(item => {
    //       let obj = {};
    //       obj.id = item.id;
    //       obj.ischios
    //     })
    //   }
    // })
    // 缓存设置时的状态
    sessionStorage.setItem('resetCode', '1')

    // 获取分部下的员工
    queryEmployByOrganId({ organId: this.$store.getters.organ, rows: 1000 }).then(res => {
      if (res.code == 200) {
        this.orgianList = res.data.rows;
      }
    })
  },
  methods: {
    chioseSchool (val) {


    },
    gotoNext (num) {
      // 1.效验数据    判断是否数据正常=> 正常放入store存储  
      //                       不正常=>  进行效验提示
      this.$refs['topinfo'].validate((valid, object) => {
        if (!valid) {
          this.$message.error('请填写建团必要参数')
        } else {
          // 验证通过
          if (this.teamStatus == 'teamDraft') {
            // 获取数据提交
            this.resetSubmit();
          } else {
            this.$store.dispatch('topinfo', this.topFrom);
            this.$store.dispatch('checkinfo', this.checkList);
            this.$store.dispatch('getpayInfo', this.payList);
            this.$emit('chiosetab', num);
          }

        }
      })
    },
    resetSubmit () {
      this.$refs['topinfo'].validate((valid, object) => {
        if (!valid) {
          this.$message.error('请填写必要参数')
        } else {
          let status = null;
          // 1.resetTeam 乐团修改
          //          2. newTeam  新建乐团
          //          3.teamList 跨团修改
          //          4.teamDraft 乐团草稿
          switch (this.teamStatus) {
            case 'resetTeam': {
              status = 'PROGRESS'
              break
            }
            case 'newTeam': {
              status = null
              break
            }
            case 'teamList': {
              status = null
              break
            }
            case 'teamDraft': {
              status = 'DRAFT'
              break
            }
          }
          let obj = {};

          this.payList.student.chiose == 'loop' ? obj.months = this.payList.chioseMonth : obj.months = [];
          obj.musicGroup = {
            settlementType: this.topFrom.salary,
            applyExpireDate: this.topFrom.time + ' 00:00:01',
            chargeTypeId: this.topFrom.type,
            cooperationOrganId: this.topFrom.school,
            teamTeacherId: this.topFrom.boss,
            educationalTeacherId: this.topFrom.teacher,
            enrollClasses: this.topFrom.startClass.join(','),
            name: this.topFrom.name,
            organId: this.topFrom.section,
            // paymentMonths:obj.months  有待确认
            schoolId: this.topFrom.address,
            courseForm: JSON.stringify(this.checkList),
            id: this.teamid,
            directorUserId: this.topFrom.head,
            isClassroomLessons: this.topFrom.isClass,
            status,
            expectStartGroupDate: this.topFrom.startTime
          }
          obj.musicGroupPaymentEntities = []
          // 添加学校主体付费方式
          // console.log(this.payfor.company.ischeck)
          if (this.payList.school.ischeck) {

            obj.musicGroupPaymentEntities.push({
              'amount': this.payList.school.price,
              'memo': this.payList.school.value,
              'paymentMethod': this.payList.school.chiose,
              'name': '学校'
            })
          }
          // 添加公司主体付费方式
          if (this.payList.company.ischeck) {
            obj.musicGroupPaymentEntities.push({
              'amount': this.payList.company.price,
              'memo': this.payList.company.value,
              'paymentMethod': this.payList.company.chiose,
              'name': '公司'
            })
          }
          if (this.payList.student.ischeck) {
            obj.musicGroupPaymentEntities.push({
              'paymentMethod': this.payList.student.chiose,
              'name': '学生'
            })
          }
          // 发请求
          resetTeamBaseInfo(obj).then(res => {
            if (res.code == 200) {
              if (this.teamStatus == 'teamDraft') {
                this.$message.success('保存成功')
                // 跳到第二页
                // 删掉结束
                this.$emit('chiosetab', 1);

              } else {
                this.$message.success('修改乐团成功')
                this.$router.push({ path: '/business/teamDetails', query: { id: this.teamid, name: this.topFrom.name } })
              }

            }
          })
        }
      })

    }
  },
  computed: {
  },
}
</script>
<style lang="scss">
.base-container {
  overflow: auto;
  // display: flex;
  // flex-direction: row;
  // justify-content: flex-start;
  // flex-wrap: nowrap;
  font-size: 14px;
  color: #444;
  // width: fill-available;
  .banseLeft {
    // width: 1050px;
    .head {
      height: 48px;
      line-height: 48px;
      background-color: #edeef0;
      font-size: 14px;
      font-weight: bold;
      color: #444;
      padding: 0 11px;
      margin-bottom: 20px;
    }
    .noMargin.head {
      margin-bottom: 0;
    }
    .num {
      padding: 15px 11px;
    }
    .checkRow {
      // width: 1050px;
      padding-left: 28px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow: auto;
      .el-checkbox {
        line-height: 72px;
      }
      .inputWrap {
        line-height: 72px;
        font-size: 14px;
        color: #777;
        margin-left: 65px;
        input {
          border: none;
          width: 80px;
          margin-right: 10px;
          outline: none;
        }
      }
      .inputWrap.rightFirst {
        margin-left: 245px;
      }
      .textWrap {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        font-size: 14px;
        color: #777;
        align-items: center;

        span {
          color: #f97215;
        }
      }
      .selectWrap {
        font-size: 14px;
        padding-top: 5px;
        margin-left: 100px;
        margin-right: 52px;
        .rowSelect {
          .el-input__inner {
            min-height: 69px;
          }
        }
      }

      .chioseList {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        color: #777;
        margin-left: 64px;
        .chioseItem {
          width: 80px;
          height: 30px;
          border-radius: 15px;
          border: 1px solid #979797;
          margin-right: 10px;
          line-height: 30px;
          text-align: center;
          cursor: pointer;
        }
        .chioseItem.active {
          background-color: #14928a;
          border: 1px solid #14928a;
          color: #fff;
        }
      }
      // &:nth-child(even) {
      //   background-color: #c6cbd4;
      //   input {
      //     background-color: #c6cbd4;
      //   }
      // }
    }
  }
  .btnWrap {
    margin-top: 30px;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #606266;
  }
  .subTitle {
    width: 1203px;
    height: 40px;
    line-height: 40px;
    background-color: #fefceb;
    padding: 0 25px;
    box-sizing: border-box;
    font-size: 16px;
    color: #474747;
    margin-bottom: 20px;
  }
  .chioseWrap {
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    padding: 0 25px;
    p {
      font-size: 14px;
      margin-right: 30px;
    }
  }
  // .baseRight {
  //   width: 375px;
  //   margin-left: 25px;
  //   header {
  //     width: 375px;
  //     height: 40px;
  //     line-height: 40px;
  //     color: #000;
  //     font-size: 14px;
  //     background: #fff;
  //     box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.07);
  //     text-align: center;
  //     margin-bottom: 6px;
  //   }
  //   .section {
  //     width: 375px;
  //     padding: 16px 22px 10px;
  //     background: #fff;
  //     margin-bottom: 10px;
  //     .line_bottom {
  //       border-bottom: 1px solid #ededed;
  //     }
  //     > .title {
  //       font-size: 20px;
  //       line-height: 28px;
  //       font-weight: bold;
  //     }
  //     .indate {
  //       font-size: 12px;
  //       padding: 5px 0;
  //       display: flex;
  //       justify-content: space-between;
  //       span {
  //         color: #fa101d;
  //       }
  //     }

  //     .coutInfo {
  //       font-size: 14px;
  //       color: #f85043;
  //       text-align: left;
  //       border-top: 1px solid #ededed;
  //       padding: 12px 0 0 25px;
  //       margin-top: 10px;
  //       position: relative;
  //       .trumpet_icon {
  //         width: 14px;
  //         height: 12px;
  //         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAyZJREFUSA21Vk1IVFEUPufOezNilJXQD2UQRERamWhBaUWOSS3U0SawdgZai2gR0aoQXPSDm3JRCbm0xZBjbkQZS0KDjKywDCIIkoKKEIkm35uZezr32X0jQ+bY2IU359xzzj3fPXe++4PwDy0W8JdKgjYCWOkzzWIM9X5NN42RbqCKoxOHl1nR2FVJ1MRgqGzxhCxg8VDp6TSRTpCKsQL+aitqjwPRKQ3mjCVygFPz2MGKQqvG/zxW56+c7ZsXkIJH1liB8hARdQPButmD59WR8mUCuqy6ynwd686OmpsN++XjLUiYrZ0g5E6SdJmAVri2FMWDnnIz3P8gxex07Rp/owS6jQij3h1lu7G5Oe5UOF1bcc5+MTRFlBiTEH/iflLe+htYKsh0oHwzBcpztd3bHWlHxPtEUMTFHFV2YdceOglStnLiZGV6xEIlwbBF+JQaqpa6Qw246OiUOKOkICnPus4MFYGik7m80Z6MXtCpfKHIGBN6kIm2x66tLBJM7q3amak0DbqEgD84eQNzwiUkE+Wmk1vGjwtmnydTID0eQ5EpLoDZTGvjr4b2absXzGdKlwC73FloZ6aSSTKocjC7kyu3Ku8D2xOAuOk/ANKEAwhivZKqYXt7jFdyAnl7LTrgDMTcv4sOyCddnlOVnKlU6dTYaPKS5hHg5IIO77nnnfTw0h1QPTTgjWv9MrGB97ki5zvh/JmuJzOFgv4cPm9rGO6TUVD6SGezhV2sdF7OEcEB49qRqbRi0MKVLEEBHXxu8i6YabzMpx1NGJ18OIjr2pG5pHqu7r13efY1ncsK+rfxvtzPW2LY29U3Krxd/Xe4c55PiKgO+meJsNeHVIIdPd/dHHFoUToitSnpsDQrHGn1FpbmoMcoEIJPA/0BNvFEJlVgOi0rPPAWwwPfdKy6nphE1c71tL3snrK796EOSpVUX7Xano628cBgqk/157oP1Y1PcTkChDEwzRJfqNfhyrz7EO/2fPaFI8dAiGqe3sc/gc5pI3wtPFCrwVTcvBXOTuY8on7GrqBMvms8wjhodvWl/YhaEKAG//1MvMHXUO5Cn4m/ACXBMJBwQaFpAAAAAElFTkSuQmCC)
  //           no-repeat center;
  //         background-size: contain;
  //         position: absolute;
  //         left: 0;
  //         top: 14px;
  //       }
  //     }
  //   }

  //   .options {
  //     padding-top: 8px;
  //     .oc {
  //       &:last-child {
  //         border-top: 1px solid #ededed;
  //         margin-top: 8px;
  //         padding-top: 9px;
  //       }
  //     }
  //     .protocol {
  //       padding-left: 20px;
  //       font-size: 10px;
  //       line-height: 14px;
  //     }
  //     .option {
  //       line-height: 26px;
  //       font-size: 15px;
  //       display: flex;
  //       align-items: center;
  //       position: relative;
  //       .o_bd {
  //         flex: 1;
  //         .c {
  //           font-size: 12px;
  //         }
  //       }
  //       .o_ft {
  //         font-size: 12px;
  //         color: #fa101d;
  //         del {
  //           color: #aaaaaa;
  //           font-size: 11px;
  //         }
  //       }
  //       .check_default {
  //         margin-right: 8px;
  //         display: block;
  //         width: 14px;
  //         height: 14px;
  //         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABK0lEQVQ4T6WSP0vDQBjGn3MIiYX+CbhYG7BR7CL5ANmS2SWQ7H4DZ3ed/QbuOcjinGz5ANGloqmQ2i5CmhZqQgZPLjRQFYS2N9297/t73+fuHoK15bruASHkijF2AeB0lXohhDwwxu4cx/moy0m9oZRaAO5VVW0qioJ2u12lsixDkiSI43gB4NK2bY/HK5BDoihSXdf3Wq0WZrMZPpfLCtxvNNDpdDCfzxGG4VdRFDaHyUreq2maTUmS8DYaoSzL9RtAEAQc9/vI8xy+7y8YYyeEUnqjquq1pml4Hg7/QHUHDp8NBoiiiMu+5RMfDcM45wXv4/GPSb8PR71eFQqC4ImDuWVZ4nQyQZqm/4KyLOOw24XnecVO4HZSd3kc7pbNv2NrA+xkuRrexOTfqpPUy7sW3D4AAAAASUVORK5CYII=)
  //           no-repeat center;
  //         background-size: contain;
  //         &.check_active {
  //           background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABaUlEQVQ4T2NkQAKHPD1F2TmYChgZGHwZGBlUwVL/GW7/Z2DY/PPHvwl227e/hilnhDFOBXoHMbKxzhd18eATtnNg4FJQBEt9e3Cf4e2hAwyv9+z49P/X70Sz9VvXgcTBGkGa2EREVqtU1jFxSUgy/F+1geHf6bNgjUymxgyMYQEM3148Z7jT3vTv15s3oSDNjCDncfKx39Fs7+Xj+vWX4U9YAgPDo8fIPmBgkJNlYFm1gOEbGzPD9criT98//VRhPB3o2yrq5V0lFx3H8MfCBVMTzAiQ5hN7GB4tXcTwctvmNsZTgd6XNDt6dbmOn2X4W1CBahMaj3lCB8M3S2OG6xXFlxlPBXl/N16+juNfURXD/6Wr8GpkjA5jYOprYzgbGfSDAo1wp55j+FtQTsCpnQzfLI0gTiU7cMiODuwJYD3Dv9PnoAnAiIExLBAzAVCU5GCawc7mYCn4z/APJZEzMjBt/v7jD0oiBwAFDdbhAm8qEQAAAABJRU5ErkJggg==)
  //             no-repeat center;
  //           background-size: contain;
  //         }
  //       }
  //     }
  //   }

  //   .configuration {
  //     padding-right: 5px;
  //     padding-bottom: 9px;
  //     .title {
  //       background: rgba(246, 246, 246, 1);
  //       height: 1px;
  //       position: relative;
  //       margin: 15px 0;
  //       span {
  //         position: absolute;
  //         left: 12px;
  //         top: -9px;
  //         display: inline-block;
  //         background-color: #fff;
  //         font-size: 10px;
  //         padding: 0 4px;
  //       }
  //     }

  //     .content {
  //       font-size: 12px;
  //       padding-left: 16px;
  //       line-height: 22px;
  //       color: #acacac;
  //     }

  //     .options {
  //       padding-top: 0;
  //       padding-left: 16px;
  //       .option {
  //         font-size: 14px;
  //         color: #6f6f6f;
  //       }
  //     }
  //   }

  //   .buy {
  //     margin-top: 200px;
  //     bottom: 0;
  //     left: 0;
  //     right: 0;
  //     height: 60px;
  //     display: flex;
  //     align-items: center;
  //     padding: 0 20px;
  //     border-top: 1px solid #ffe9e9e9;
  //     color: #000000;
  //     font-size: 12px;
  //     background: #fff;
  //     .price {
  //       flex: 1;
  //       font-size: 14px;
  //     }
  //     font-size: 14px;
  //     span {
  //       color: #fa101d;
  //     }
  //     .text {
  //       font-size: 12px;
  //       width: 60px;
  //       display: inline-block;
  //       color: #000;
  //     }
  //     del {
  //       color: #b5b5b5;
  //       &.text {
  //         color: #b5b5b5;
  //       }
  //     }

  //     a {
  //       display: inline-block;
  //       font-size: 18px;
  //       color: #fff;
  //       background: #f1111b;
  //       border-radius: 4px;
  //       box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
  //       padding: 8px 28px;
  //     }
  //   }
  // }
  .classCheckBox {
    margin-right: 10px;
  }
}
</style>