dev/dcp-app-gate/pages/profile/profileSetUp/subscribe.vue

<template>
	<view style="background-color: #f3f4f5;">
		<u-navbar  :back-text="i18n('Back')" :back-text-style="backStyle"
			back-icon-color="#fff" title-color="#fff" 
			:title="i18n('MySubscription')" 
			:background="background">
		</u-navbar>
		<view class="" style="margin:0 30upx;">
			<view class="sub-item">
				{{i18n('Project')}}
			</view>
			<view>
				<text v-for="(item,index) in subscribeList[0]" :class="item.ifTrue?'sub-text-click':'sub-text'" @click="pushSubscribe(item,index)">
					{{item.label}}
				</text>
			</view>
			<view class="sub-item">
				{{i18n('Periodical')}}
			</view>
			<view>
				<text v-for="(item,index) in subscribeList[1]" :class="item.ifTrue?'sub-text-click':'sub-text'" @click="pushSubscribe(item,index)">
					{{item.label}}
				</text>
			</view>
			<view class="sub-item">
				{{i18n('Information')}}
			</view>
			<view>
				<text v-for="(item,index) in subscribeList[2]" :class="item.ifTrue?'sub-text-click':'sub-text'" @click="pushSubscribe(item,index)">
					{{item.label}}
				</text>
			</view>
			<view style="margin:35upx 0 35upx 0;">
				<text style="margin-right: 20upx;">{{i18n('SetFrequency')}}:</text>
				<u-radio-group v-model="current" >
					<u-radio 
						v-for="(item, index) in taberSendRate" :key="index" 
						:name="item.value"
					>
						{{$i18n.locale == 'zh'?item.label:item.labelEN}}
					</u-radio>
				</u-radio-group>
			</view>
			<view style="margin-bottom: 55upx;">
				{{i18n('SendWay')}}：{{i18n('emailInfo')}}
			</view>
			<view style="margin-bottom: 55upx;">
				<button type="primary" @click="sveSubscript">{{i18n('OK')}}</button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import listCell from '@/components/JumpBox';
	// import {
	// 	getDicts
	// } from '@/api/dict';
	export default {
		components: {
			listCell
		},
		data() {
			return {
				background:{
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle:{
					color:'#fff'
				},
				subscribeList: [],
				getTrueList: [],
				taberSendRate: [{
					label: "周",
					labelEN:'Weekly',
					value: '1'
				}, {
					label: "月",
					labelEN:'Monthly',
					value: '2'
				}],
				current: 1,
				checkList1:[],
				checkList2:[],
				checkList3:[],
			};
		},
		onShow() {
			this.getData() // 获取字典值
		},
		methods: {
			i18n (data) {
			    return this.$t('common.'+data);
			},
			async getData() {
				let type = this.$i18n.locale == 'en'?'TECHNICAL_SCOPE_DICT_EN,JOURNAL_DICT_EN,CMS_INFORMATION_TYPE_DICT_EN':'TECHNICAL_SCOPE_DICT,JOURNAL_DICT,CMS_INFORMATION_TYPE_DICT';
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: type
					}
				});
				if (res.data) {
					res.data.forEach((item, index) => {
						item.forEach((i, j) => {
							i.ifTrue = false;
						})
					});
				}
				this.subscribeList = res.data || [];
				this.getSubscriptionList();// 数据回显
			},
			async getSubscriptionList(){
				const result = await this.$myRequest({
					url: '/uc/sysSubscription/getSubscriptionData',
					data: {

					}
				});
				const that = this;
				if (result.data) {
					 for (var i=0;i<result.data.length;i++) {
						 var section =result.data[i].subscriptionSectionDict;
						 var type=result.data[i].subscriptionTypeDict;
						 if(section == 'project'){
							that.checkList1.push(type);
						 } else if(section == 'journal'){
							that.checkList2.push(type);
						 }else if(section == 'news'){
							that.checkList3.push(type);
						 }
						 that.current = result.data[i].subscriptionSendRateDict;
					 }
				}
				that.subscribeList[0].forEach(j=>{
					that.checkList1.forEach(i=>{
						if(j.value == i){
							j.ifTrue = true;
						}
					})
				})
				that.subscribeList[1].forEach(j=>{
					that.checkList2.forEach(i=>{
						if(j.value == i){
							j.ifTrue = true;
						}
					})
				})
				that.subscribeList[2].forEach(j=>{
					that.checkList3.forEach(i=>{
						if(j.value == i){
							j.ifTrue = true;
						}
					})
				})
			},
			// 保存
			async sveSubscript(){
					 let data ={},project={},journal={},information={},isProject =false,isJournal =false,isInformation =false;
					 let checkList1List = this.subscribeList[0].filter(item=>{
						return item.ifTrue ==true;
					 })
					 let checkList2List = this.subscribeList[1].filter(item=>{
					 	return item.ifTrue ==true;
					 })
					 let checkList3List = this.subscribeList[2].filter(item=>{
					 	return item.ifTrue ==true;
					 })
					 const that = this;
					 that.checkList1 = [];
					 that.checkList2 = [];
					 that.checkList3 = [];
					 if(checkList1List){
						 checkList1List.forEach(item=>{
						 	that.checkList1.push(item.value);
						 })
					 }
					 if(checkList2List){
						 checkList2List.forEach(item=>{
						 	that.checkList2.push(item.value);
						 })
					 }
					 if(checkList3List){
						 checkList3List.forEach(item=>{
						 	that.checkList3.push(item.value);
						 })
					 }
					 if(this.checkList1.length>0){
						 project.subscriptionTypeDict = this.checkList1.toString();
						 project.subscriptionSectionDict = 'project';
						 project.subscriptionSection = "项目";
						 project.subscriptionSendRateDict = this.current;
						 project.subscriptionSendRate = this.taberSendRate[this.current-1].label;
						 isProject = true;
					 }
					 if(this.checkList2.length>0){
						 journal.subscriptionTypeDict =  this.checkList2.toString();
						 journal.subscriptionSectionDict = 'journal';
						 journal.subscriptionSection = "期刊";
						 journal.subscriptionSendRateDict = this.current;
						 journal.subscriptionSendRate = this.taberSendRate[this.current-1].label;
						 isJournal = true;
					 }
					 if(this.checkList3.length>0){
						 information.subscriptionTypeDict =  this.checkList3.toString();
						 information.subscriptionSectionDict = 'news';
						 information.subscriptionSection = "资讯";
						 information.subscriptionSendRateDict = this.current;
						 information.subscriptionSendRate = this.taberSendRate[this.current-1].label;
						 isInformation = true;
					 }
					const res = await this.$myRequest({
						url: '/uc/sysSubscription/updataSubscript',
						data: {
							isProject,
							isJournal,
							isInformation,
							project:JSON.stringify(project),
							journal:JSON.stringify(journal),
							information:JSON.stringify(information)
						},
						method:'post'
					});
					if(res.status && res.data.length != 0){
						uni.showToast({
							title: this.$i18n.locale == 'zh'?'修改成功':'success',
							duration: 2000
						});
						setTimeout(()=>{
							uni.navigateBack({
								delta:1,
								success: function() {
									let page = getCurrentPages().pop(); //跳转页面成功之后
									if (!page) return;
									page.onLoad(); //如果页面存在，则重新刷新页面
								}
							});
						},2000)
						
					}else {
						this.$refs.uToast.show({
							title: this.$i18n.locale == 'zh'?'修改失败！':'Modification failed!',
							type: 'error' 
						});
					}
			},
			
			navTo(route) {
				this.$mRouter.push({
					route
				});
			},
			pushSubscribe(item, index) {
				item.ifTrue = !item.ifTrue;
				
				// if(index==0) return this.getCheckList1(item);
				// else if(index==1) return this.getCheckList2(item);
				// else if(index==1) return this.getCheckList3(item);
			},
			// getCheckList1(item){
			// 	if(item.ifTrue){
			// 		this.checkList1.push(item.value);
			// 	}else {
			// 		if (this.checkList1.indexOf(item.value) >= 0) {
			// 			this.checkList1.splice(this.checkList1.indexOf(item.value), 1);
			// 		}
			// 	}
			// },
			// getCheckList2(){
				
			// },
			// getCheckList3(){
				
			// },
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f5 !important;

		.sub-item {
			line-height: 80upx;
			margin-top: 15upx;
			color: #666;
			font-size: 32upx;
			margin-left: 0upx;
			font-weight: 700;
		}

		.sub-text {
			display: inline-block;
			padding: 20upx 30upx;
			margin-right: 40upx;
			margin-top: 20upx;
			background-color: #fff;
			color: #666;
		}

		.sub-text-click {
			display: inline-block;
			padding: 20upx 30upx;
			margin-right: 40upx;
			margin-top: 20upx;
			background-color: #1777FE;
			color: #fff;
		}
	}
</style>