allLikeMall/yudao-admin-vue3/src/views/mall/promotion/configuration/index.vue

<template>
	<ContentWrap>
		 <span>客服配置</span>
		 <el-divider />
		 <div style="height:380px;width:650px;padding: 20px;">
			 <span>客服类型：</span>
			 <span>
			     <el-radio-group v-model="radios" @change="handleRadioChange">
			       <el-radio value="1" size="large">系统客服</el-radio>
			       <el-radio value="2" size="large">拨打电话</el-radio>
				   <el-radio value="3" size="large">跳转链接</el-radio>
			     </el-radio-group>
			 </span> 
			 <p style="margin-left: 80px;color:#bcbaba;font-size:13px">系统客服：点击联系客服使用系统的自带客服；拨打电话：点击联系客服拨打客服电话；跳转链接：跳转外部链接联系客服</p>
			 
			 <div v-show="radios == 1">
				 <span style="margin-top: 60px; vertical-align: middle;">客服反馈：</span>
			  <span style="vertical-align: middle;">
			      <el-input
			          v-model="formData.feedback"
					  placeholder="请输入客服反馈"
			          style="width:550px"
			          :rows="5"
			          type="textarea"
			         
			      />
			  </span>
			  <p style="margin-left: 80px;color:#bcbaba;font-size:13px">暂无客服在线是，联系客服跳转的客服反馈页面的显示文字</p>
			 </div>
			 
			 <div v-show="radios == 2">
			<span style="margin-top: 60px; vertical-align: middle;">客服电话：</span>
			  <span style="vertical-align: middle;">
			      <el-input
			          v-model="formData.phone"
					  placeholder="请输入客服电话"
			          style="width:550px"
			      />
			  </span>
			  <p style="margin-left: 80px;color:#bcbaba;font-size:13px">客服类型选择拨打电话时，用户点击联系客服的联系电话</p>
			 </div>
			 
			 <div v-show="radios == 3">
			 				 <span style="margin-top: 60px; vertical-align: middle;">客服链接：</span>
			  <span style="vertical-align: middle;">
			      <el-input
			          v-model="formData.link"
					  placeholder="请输入客服链接"
			          style="width:550px"
			      />
			  </span>
			  <p style="margin-left: 80px;color:#bcbaba;font-size:13px">客服类型选择跳转链接时，跳转的链接地址</p>
			  
			  <span style="margin-top: 60px; vertical-align: middle;">&nbsp;&nbsp;&nbsp;企业ID：</span>
			  <span style="vertical-align: middle;">
			      <el-input
			          v-model="formData.enterpriseID"
					  placeholder="请输入企业ID"
			          style="width:550px"
			      />
			  </span>
			  <p style="margin-left: 80px;color:#bcbaba;font-size:13px">如果客服链接填写企业微信客服，小程序需要跳转企业微信客服的话需要配置此项，并且在小程序客服中绑定企业ID</p>
			  
			 </div>
			 
			 <el-button style="margin-left: 80px;" type="primary" @click="submit">提交</el-button>
			  
		 </div>
  </ContentWrap>

  
 


</template>

<script setup lang="ts">

import { ConfigurationApi, ConfigurationVO } from '@/api/mall/promotion/configuration'


const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中

const radios = ref('1')

const formData = ref({
  id: undefined,
  type: undefined,
  feedback: undefined,
  phone: undefined,
  link: undefined,
  enterpriseID: undefined
})


/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
	
    formData.value =  await ConfigurationApi.getConfiguration(Number(radios.value))
	// radios.value = formData.value.id
	console.log('11111',radios.value)
    
  } finally {
    loading.value = false
  }
}


 const handleRadioChange = async (value) =>{
	formData.value =  await ConfigurationApi.getConfiguration(value)

	
      console.log("选中的值是: ", radios.value); // 输出选中的值
   
}


const submit = async () => {
	const data = formData.value as unknown as ConfigurationVO
  await ConfigurationApi.updateConfiguration(data)
  message.success('提交成功')
}



/** 初始化 **/
onMounted(() => {
  getList()
})
</script>