zhiyu_duanju_distribution_manage_front/src/views/promotion/ranse/index.vue

<template>
	<div class="page">
		<div class="header">
			<el-text class="text-notice">注意事项</el-text>
			<el-text class="text-notice">1.充值用户 >=n 分钟连续未登录，如果点击新连接，会归属于新链接的优化师</el-text>
			<el-text class="text-notice">2.未充值用户 >=n 分钟连续未登录，如果点击新连接，会归属于新链接的优化师</el-text>
		</div>
		
		<div class="set-box" v-show="init_finish" >
			<view class="set-box-item">
				<el-text class="lab-txt"> <label style="color: red;margin-right: 10px;">*</label>非充值用户：</el-text>
				<el-input-number v-model="no_charge_user_duration" :min="0"  @change="handleUnChargeUserChange" />
				<el-text style="margin-left: 10px;color: 555;">分</el-text>
			</view>
			<view class="set-box-item">
				<el-text class="lab-txt"> <label style="color: red;margin-right: 10px;">*</label>充值用户：</el-text>
				<el-input-number v-model="charge_user_duration" :min="0"  @change="handleChargeUserChange" />
				<el-text style="margin-left: 10px;color: 555;">分</el-text>
			</view>
			<view class="set-box-item"  v-action="'tuiguang.RanseConfig.setRanseDuration'" >
				<el-button :disabled="permission" style="margin-left: 140px;margin-top: 30px;" type="primary" @click="saveSetting">确认</el-button>
			</view>
			
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {getRanseDuration,setRanseDuration} from "@/api/promotion/ranse";
	const rolesIdentify = inject('rolesIdentify');
	const setData = ref({charge_user_duration:0,no_charge_user_duration:0})
	const  charge_user_duration = ref(0);
	const  no_charge_user_duration = ref(0);
	const  init_finish = ref(0);
	const permission = ref(true);
	
	const handleUnChargeUserChange = (value: number) => {
		no_charge_user_duration.value = value;
	}
	const handleChargeUserChange = (value: number) => {
		charge_user_duration.value = value;
	}

	const saveSetting =  ()  => {
		if(charge_user_duration.value < 1){
			ElMessage.error( '请填写充值用户染色时间');
			return false;
		}
		if(no_charge_user_duration.value < 1){
			ElMessage.error( '请填写未充值用户染色时间');
			return false;
		}
			
		if(charge_user_duration.value <= no_charge_user_duration.value){
			ElMessage.error( '充值用户染色时间应大于非充值用户染色时间');
			return false;
		}
		if(setData.value.charge_user_duration == charge_user_duration.value && setData.value.no_charge_user_duration == no_charge_user_duration.value){
			ElMessage.success("操作成功")
			return true;
		}
		setRanseDuration({charge_user_duration:charge_user_duration.value,no_charge_user_duration:no_charge_user_duration.value}).then(res => {
			if(res.code ==10000){
				ElMessage.success(res.message);
				getSetData();
			}
		})
	}
	
	const getSetData = async () =>{
		if(rolesIdentify.value.includes('optimizer')){
			await getRanseDuration().then(res => {
				if(res.code ==10000){
					setData.value.charge_user_duration = res.data.charge_user_duration;
					setData.value.no_charge_user_duration = res.data.no_charge_user_duration;
					charge_user_duration.value = res.data.charge_user_duration;
					no_charge_user_duration.value = res.data.no_charge_user_duration;
					init_finish.value = 1;
				}
				permission.value = false;
			});
		}
		init_finish.value = 1;
		
		
	}
	onMounted(async () =>{
		await getSetData();
	});
</script>

<style lang="scss" scoped>
.lab-txt{
	display: inline-table;
	width: 120px;
	color: #555;
	text-align: right;
}
.page{
	background-color: #fff;
	padding:40px 60px;
}
.header{
	display: flex;
	flex-direction: column;
	background-color:#fcd3d3 ;
	padding: 20px 30px;
}
.text-notice{
	width: 100%;
	color:#f56c6c;
}
.set-box{
	margin-top: 20px;
	display: flex;
	flex-direction: column;
}
.set-box-item{
	width: 100%;
	margin-top: 20px;
}
</style>