xw_admin/src/views/userCenter/user/pushSettings.vue

<template>
	<el-card shadow="never" header="">
		<template #header>
			<div class="card-header-box">
				<div class="card-header">
					<span>事务待办通知设置</span>
				</div>
				<div class="card-btn">
					<el-button size="small" type="primary" @click="save">保存</el-button>
				</div>
			</div>
		</template>
		<div class="pushSetting" v-loading="loading" element-loading-text="努力加载中...">
			<div class="headerNav">
				<div class="item">通知事项</div>
				<div class="item center" v-for="(item,index) in subscription_items" :key="index">
					{{item.label}}
					<template v-if="item.value==1">
						<el-tooltip
							class="box-item"
							effect="dark"
							content=""
							placement="top-start"
						>
							<template #content>
								<div>一、第一步账户安全里绑定微信号</div>
								<div>二、第二步勾选想要接收的通知</div>
							</template>
							<span> <i class="sc-icon"><el-icon-QuestionFilled /></i></span>
						</el-tooltip>
					</template>
					<template v-else-if="item.value==3">
						<el-tooltip
							class="box-item"
							effect="dark"
							content=""
							placement="top-start"
						>
							<template #content>
								<div>一、账号信息里绑定手机号</div>
								<div>二、第二步勾选想要接收的通知</div>
							</template>
							<span><i class="sc-icon"><el-icon-QuestionFilled /></i></span>
						</el-tooltip>
					</template>
				</div>
			</div>
			<div class="middleView">
				<el-scrollbar height="100%">
					<div class="listView" v-for="(item,index) in check_msg_temp" :key="index">
						<div class="item">{{item.value}}</div>
						<div class="item center" v-for="(em,ind) in item.subscription_items" :key="ind">
							<el-checkbox :value="em.value" v-model="em.subscribed"></el-checkbox>
						</div>
					</div>
				</el-scrollbar>
			</div>
		</div>
	</el-card>
</template>

<script>
export default {
	data() {
		return {
			subscription_items:[],
			check_msg_temp:[],
			loading:false,
		};
	},
	mounted() {
		// this.getList(true);
	},
	beforeUnmount() {

	},
	methods: {
		async getList(isShow) {
			if(isShow){
				this.loading = true;
			}
			const res = await this.$API.user.subscribe.list.post();
			if(res.code == 200){
				this.subscription_items = res.data.subscription_items;
				this.check_msg_temp = res.data.check_msg_temp;

				this.loading = false;
			}
		},
		async save() {
			let params = {
				temps:this.setList()
			};

			const res = await this.$API.user.subscribe.set.post(params);
			if (res.code == 200) {
				this.$message.success('保存成功');
				await this.getList();
			}
		},
		setList(){
			let list = JSON.parse(JSON.stringify(this.check_msg_temp));
			let temps = [];
			if(list.length>0){
				list.forEach(item=>{
					let obj = {
						notice_item:item.notice_item,
						value:item.value,
						subscription_items:[]
					}
					if(item.subscription_items.length>0){
						item.subscription_items.forEach(em=>{
							if(em.subscribed){
								obj.subscription_items.push(em.value);
							}
						})
					}
					if(obj.subscription_items.length>0){
						temps.push(obj)
					}
				})
			}
			return temps
		}
	}
};
</script>

<style scoped lang="scss">
.card-header-box{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pushSetting{
	padding: 0 0 15px 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	.headerNav{
		padding: 10px 10px;
		display: flex;
		background: #F5F7FA;
		.item{
			flex: 1;
		}
		.center{
			display: flex;
			justify-content: center;
			cursor: pointer;
			.el-tooltip__trigger{
				display: flex;
				align-items: center;
			}
		}
		.sc-icon{
			display: inline-block;
			width: 16px;
			height: 16px;
			margin-left: 6px;
			color: var(--el-color-warning);
		}
	}
	.middleView{
		display: flex;
		flex-direction: column;
		padding: 10px 10px;
		flex: 1;
		overflow: hidden;
		.listView{
			display: flex;
		}
		.item{
			flex: 1;
			padding: 0 0;
			display: flex;
			align-items: center;
		}
		.center{
			display: flex;
			justify-content: center;
		}
	}
}

.dark{
	.pushSetting .headerNav{
		background: #313131;
	}
}
</style>