File size: 2,653 Bytes
77b0e0f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import StreamerInfoComponent from '@/components/StreamerInfoComponent.vue'
import {
streamerDetailInfoRequest,
streamerEditDetailRequest,
type StreamerInfo
} from '@/api/streamerInfo'
import { AxiosError } from 'axios'
const dialogInfoVisible = ref(false)
const saveLoading = ref(false)
const steamerInfo = ref({} as StreamerInfo)
steamerInfo.value.streamer_id = 0
const showItemInfoDialog = async (streamerId: number) => {
console.log('streamerId = ', streamerId)
dialogInfoVisible.value = true
if (streamerId === 0) {
steamerInfo.value = {} as StreamerInfo
return
}
try {
// 请求接口获取主播数据
const { data } = await streamerDetailInfoRequest(streamerId)
if (data.code === 0) {
steamerInfo.value = data.data
} else {
ElMessage.error('获取主播数据失败: ' + data.message)
}
} catch (error: unknown) {
if (error instanceof AxiosError) {
ElMessage.error('获取主播数据失败: ' + error.message)
} else {
ElMessage.error('未知错误：' + error)
}
}
}
const handelSaveClick = async () => {
try {
saveLoading.value = true
const { data } = await streamerEditDetailRequest(steamerInfo.value)
if (data.code === 0) {
steamerInfo.value.streamer_id = data.data
ElMessage.success('保存成功')
saveLoading.value = false
} else {
saveLoading.value = false
ElMessage.error('保存失败: ' + data.message)
}
} catch (error: unknown) {
saveLoading.value = false
if (error instanceof AxiosError) {
ElMessage.error('保存失败: ' + error.message)
} else {
ElMessage.error('未知错误：' + error)
}
}
}
defineExpose({ showItemInfoDialog })
</script>
<template>
<div class="dialog-container">
<el-dialog v-model="dialogInfoVisible" title="主播详情" width="80%" destroy-on-close>
<StreamerInfoComponent v-model="steamerInfo" :disable-change="false" />
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handelSaveClick" :loading="saveLoading">
保存
</el-button>
<el-button @click="dialogInfoVisible = false" :disabled="saveLoading"> 关闭 </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" scoped>
// 使用 ::v-deep 选择器来覆盖 el-dialog 的默认样式。
::v-deep(.el-dialog) {
border-radius: 10px;
padding: 20px;
--el-dialog-bg-color: #f7f8fa;
--el-dialog-title-font-size: 24px;
}
</style>
|