dingxin_toolbox_vue/src/components/ec_api/EcardLevel.vue

<script setup>
import {ref, reactive, computed, watch, onMounted, onBeforeMount} from 'vue'
import {ec_api_set_user_data, ec_api_clear_user_data} from '@/apis/ec_api.js'
import {ElMessage} from "element-plus";

// 接收TabArea组件传递的参数
const props = defineProps(['level', 'data'])

// 定义用户选择的场次变量
const selectLevel = ref('')
const levelList = reactive([])

// 处理用户选择的数据
async function handle_set_user_data() {
  let selectLevelData = {}
  props.level.forEach((item) => {
    if (item['ecardLevelNo'] === selectLevel.value) {
      selectLevelData = item
    }
  })
  const req_data = {
    api: props.data.path,
    member_type: props.data.type,
    format: props.data.format,
    user_data: JSON.stringify(selectLevelData)
  }
  console.log('handle_set_user_data', req_data)
  await ec_api_set_user_data(req_data).then(
      (req) => {
        if (req['result'] === 'success') {
          ElMessage({message: '选择的联名卡级别已做为后续测试数据！', type: 'success'})
        } else {
          ElMessage({message: '设置用户选择联名卡级别数据失败！', type: 'error'})
        }
      }
  ).catch(
      (err) => {
        console.log(err)
        ElMessage({message: '设置用户选择联名卡级别数据失败！', type: 'error'})
      }
  )
}

async function handle_clear_user_data() {
  const req_data = {
    api: props.data.path,
    member_type: props.data.type,
  }
  console.log('handle_clear_user_data', req_data)
  await ec_api_clear_user_data(req_data).then(
      (req) => {
        if (req['result'] === 'success') {
          ElMessage({message: '选择的联名卡级别已清除，推荐参数将使用随机值！', type: 'success'})
        } else {
          ElMessage({message: '清除用户选择联名卡级别数据失败！', type: 'error'})
        }
      }
  ).catch(
      (err) => {
        console.log(err)
        ElMessage({message: '清除用户选择联名卡级别数据失败！', type: 'error'})
      }
  )
}

onBeforeMount(() => {
  console.log('EcardLevel onBeforeMount')
  // 挂载时生成用于展示的数据源
  props.level.forEach((item) => {
    levelList.push({
      key: item['ecardLevelNo'],
      name: item['ecardLevelName'],
      fee: item['registerFee'],
      available: item['status'] === '1' ? '有效' : '无效',
      renew: item['allowRenew'] === '2' ? '不可续费' : `可续费    续费${item['renewFee']}元`,
      data: item
    })
  })
})


watch(() => selectLevel.value, () => {
  console.log('selectLevel.value', selectLevel.value)
  handle_set_user_data()
})

</script>

<template>
  <hr id="break_line"/>
  <div style="font-size: 16px; font-weight: bold; color: #909399; text-align: left; margin-bottom: 10px">选择场次：
    <el-tooltip
        class="box-item"
        effect="dark"
        content="点击清除选择后会将后台服务器中记录的选择内容清空，其他接口将通过随机获取的方式从此接口返回的数据中模拟参数"
        placement="right"
    >
      <el-button size="small" style="font-weight: bold;color: #909399" @click="handle_clear_user_data">清除选择
      </el-button>
    </el-tooltip>
  </div>
  <el-form style="max-width: 600px; margin-left: 20px">
    <el-form-item>
      <el-radio-group v-model="selectLevel">
        <el-radio-button v-for="s in levelList" :label="s.key" :value="s.key" :key="s.key" :disabled="s.available === '无效'">
          <div style="text-align: left">
            <div style="margin-top: 5px"><span>{{ s.key }}</span> -- <span style="font-weight: bold">{{ s.name }}</span> -- <span>{{s.available}}</span>
            </div>
            <div style="margin-top: 5px"><span>开卡费 {{ s.fee }} </span><span>&nbsp&nbsp&nbsp&nbsp{{s.renew}}</span></div>
          </div>
        </el-radio-button>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<style scoped>
#break_line {
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: rgba(144, 147, 153, 0.5);
  height: 1px;
  border: none
}

:deep(.el-radio-button) {
  margin-bottom: 10px;
  margin-right: 15px;

}

:deep(.el-radio-button__inner) {
  width: 400px;
  height: 60px;
  background: #ebebeb;
  color: #333;
  border: 0 !important;
  border-radius: 10px !important;
}

</style>