segment.vue 4.34 KB
<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      v-model="dialogVisible"
      title="查看详情"
      width="1100px"
      :before-close="handleClose"
      @close="close"
    >

      <!--      <div>-->
      <!--        <h3>会员费</h3>-->
      <!--        <el-row>-->
      <!--          <el-col :span="11">-->
      <!--            <div class="flex-son">-->
      <!--              <div class="name">会员费</div>-->
      <!--              <div class="price">-->
      <!--                <el-input-->
      <!--                  v-model="formInfo.personFee" style="width: 150px; border: 0;" size="small"-->
      <!--                  type="number"-->
      <!--                  @change="changMember(formInfo)"-->
      <!--                />-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </el-col>-->
      <!--        </el-row>-->

      <!--      </div>-->
      <el-row>
        <el-col :span="11">
          <h3>级位证书费用</h3>
          <div class="">
            <div v-for="item in formInfo.jiPrice" :key="item" class="flex-son">
              <div v-if="item.name==0" class="name">全部</div>
              <div v-if="item.name==1" class="name">一级</div>
              <div v-if="item.name==2" class="name">二级</div>
              <div v-if="item.name==3" class="name">三级</div>
              <div v-if="item.name==4" class="name">四级</div>
              <div v-if="item.name==5" class="name">五级</div>
              <div v-if="item.name==6" class="name">六级</div>
              <div v-if="item.name==7" class="name">七级</div>
              <div v-if="item.name==8" class="name">八级</div>
              <div v-if="item.name==9" class="name">九级</div>
              <div v-if="item.name==10" class="name">十级</div>
              <div class="price"> <el-input
                v-model="item.value" style="width: 150px; border: 0;" size="small" type="number"
                @change="inputChange(formInfo)"
              /> 人/元</div>
            </div>
          </div>    
        </el-col>
        <el-col :span="2" />
        <el-col :span="11">
          <h3>段位证书费用</h3>
          <div class="">
            <div v-for="item in formInfo.duanPrice" :key="item" class="flex-son">
              <div v-if="item.name==0" class="name">全部</div>
              <div v-if="item.name==1" class="name">一段</div>
              <div v-if="item.name==2" class="name">二段</div>
              <div v-if="item.name==3" class="name">三段</div>
              <div v-if="item.name==4" class="name">四段</div>
              <div v-if="item.name==5" class="name">五段</div>
              <div v-if="item.name==6" class="name">六段</div>
              <div v-if="item.name==7" class="name">七段</div>
              <div v-if="item.name==8" class="name">八段</div>
              <div v-if="item.name==9" class="name">九段</div>
              <div v-if="item.name==10" class="name">十段</div>
              <div class="price">
                <el-input
                  v-model="item.value" style="width: 150px; border: 0;" size="small" type="number"
                  @change="inputChange(formInfo)"
                /> 
                人/元</div>
            </div>
          </div>   
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup >
import { ref, getCurrentInstance } from 'vue'
import { editJiDuanFee, editMemberShip } from '@/api/groupMember/index'
const formInfo = ref()
const dialogVisible = ref(false)
const emit = defineEmits(['close'])
const { proxy } = getCurrentInstance()
function open(row) {
  dialogVisible.value = true
  formInfo.value = row 	
}

async function inputChange(row) {
  const res = await editJiDuanFee(row)
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功!')
  }
}


async function changMember(row) {
  const res = await editMemberShip({ memId: row.memId, personFee: row.personFee })
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功!')
  }
}


function close() {
  formInfo.value = {}
  emit('close')
}

defineExpose({
  open
})
</script>

<style scope lang="scss">
.flex-son{
  display:flex;
  div{
    padding: 5px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #ebeef5;
    width: 300px;
    text-align: center;
  }
}
.name{
background-color: #f5f7f9;
}

</style>