uni-halo/pagesA/setting/setting.vue

<template>
	<view class="app-page" :class="{ 'is-balck grey-darken-6': isBlackTheme }">
		<tm-form v-if="!loading" ref="formData">
			<!-- <tm-sheet :shadow="24" :padding="[12, 24]" :margin="[24, 24]">
					<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text">
						<text class="text-size-n text-weight-b ">标题</text>
						<text class="text-grey text-size-xs px-10">副标题/描述</text>
					</view>
					<view class="sheet-content">内容区域</view>
				</tm-sheet> -->
			<tm-sheet :shadow="6" :padding="[12, 24]" :margin="[24, 24]">
				<view class="py-12 px-24 mx-12 round-3  grey text">
					<text class="text-size-n text-weight-b text-grey-darken-3">布局</text>
					<text class="text-grey text-size-xs px-10 ml-12">应用以及文章列表布局设置</text>
				</view>
				<view class="sheet-content">
					<tm-pickers
						title="请选择首页布局"
						btn-color="light-blue"
						:default-value.sync="homeLayout.selectDefault"
						rang-key="name"
						:list="homeLayout.list"
						@confirm="fnOnHomeLayoutConfirm"
					>
						<tm-input
							name="status"
							required
							title="首页布局"
							placeholder="请选择首页布局"
							disabled
							:value="homeLayout.selectLabel"
							right-icon="icon-angle-right"
						></tm-input>
					</tm-pickers>
					<tm-pickers
						title="请选择文章卡片样式"
						btn-color="light-blue"
						:default-value.sync="articleCardStyle.selectDefault"
						rang-key="name"
						:list="articleCardStyle.list"
						@confirm="fnOnArticleCardStyleConfirm"
					>
						<tm-input
							name="status"
							required
							title="卡片样式"
							placeholder="请选择文章卡片样式"
							disabled
							:value="articleCardStyle.selectLabel"
							right-icon="icon-angle-right"
						></tm-input>
					</tm-pickers>
				</view>
			</tm-sheet>

			<tm-sheet v-if="false" :shadow="24" :padding="[12, 24]" :margin="[24, 24]">
				<view class="py-12 px-24 mx-12 round-3 grey text">
					<text class="text-size-n text-weight-b ">外观</text>
					<text class="text-grey text-size-xs px-10">设置应用主题色/暗黑模式等</text>
				</view>
				<view class="sheet-content">
					<!-- 内容区域 -->
					<text class="ma-24">todo</text>
				</view>
			</tm-sheet>

			<tm-sheet :shadow="6" :padding="[12, 24]" :margin="[24, 24]">
				<view class="py-12 px-24 mx-12 round-3 grey text">
					<text class="text-size-n text-weight-b text-grey-darken-3">功能</text>
					<text class="text-grey text-size-xs px-10  ml-12">一些常用的功能性设置</text>
				</view>
				<view class="sheet-content">
					<view class="mx-32 my-24 border-b-1  pb-24 flex-between">
						<text class="text-size-m ">图库瀑布流模式</text>
						<tm-switch v-model="appSettings.gallery.useWaterfull" color="light-blue" :text="['是', '否']"></tm-switch>
					</view>
					<view class="mx-32 my-24 border-b-1  pb-24 flex-between">
						<text class="text-size-m ">友链简洁模式</text>
						<tm-switch v-model="appSettings.links.useSimple" color="light-blue" :text="['是', '否']"></tm-switch>
					</view>
					<view class="mx-32 my-24 border-b-1  pb-24 flex-between">
						<text class="text-size-m">是否圆形头像</text>
						<tm-switch v-model="appSettings.isAvatarRadius" color="light-blue" :text="['是', '否']"></tm-switch>
					</view>
					<view class="mx-32 my-24 border-b-1  pb-24 flex-between">
						<text class="text-size-m ">轮播图指示器</text>
						<tm-switch v-model="appSettings.banner.useDot" color="light-blue" :text="['是', '否']"></tm-switch>
					</view>
					<view v-if="appSettings.banner.useDot" class="mx-32 my-24 border-b-1  pb-24 flex-between">
						<text class="text-size-m ">轮播图指示器位置</text>
						<tm-groupradio name="dotPosition" @change="fnOnBannerDotChange">
							<tm-radio
								:name="item.name"
								:size="28"
								color="light-blue"
								v-for="(item, index) in dotPositionList"
								:key="index"
								v-model="item.checked"
								:label="item.name"
							></tm-radio>
						</tm-groupradio>
					</view>

					<view class="mx-32 my-24 border-b-1  pb-24 flex-between">
						<text class="text-size-m">显示完整统计</text>
						<tm-switch v-model="appSettings.about.showAllCount" color="light-blue" :text="['是', '否']"></tm-switch>
					</view>
					<view class="mx-32 my-24 border-b-1  pb-24 flex-between">
						<text class="text-size-m ">链接直接打开</text>
						<tm-switch v-model="appSettings.contact.isLinkCopy" color="light-blue" :text="['是', '否']"></tm-switch>
					</view>
					<view class="mx-32 my-24 border-b-1  pb-24 flex-between">
						<text class="text-size-m ">显示后台入口</text>
						<tm-switch v-model="appSettings.about.showAdmin" color="light-blue" :text="['是', '否']"></tm-switch>
					</view>
				</view>
			</tm-sheet>
		</tm-form>

		<!-- 操作区域 -->
		<view v-if="!loading" class="btn-bar flex flex-center bg-white">
			<tm-button theme="light-blue" :shadow="0" block :height="70" @click="fnOnSave()">保存设置</tm-button>
			<tm-button theme="red" :shadow="0" block :height="70" @click="fnOnSaveDefault()">恢复默认设置</tm-button>
			<tm-button theme="blue-grey" :shadow="0" block :height="70" @click="fnOnBack()">返回</tm-button>
		</view>
	</view>
</template>

<script>
import { _DefaultAppSettings } from '@/utils/app.js';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tmSwitch from '@/tm-vuetify/components/tm-switch/tm-switch.vue';
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
import tmGroupradio from '@/tm-vuetify/components/tm-groupradio/tm-groupradio.vue';
import tmRadio from '@/tm-vuetify/components/tm-radio/tm-radio.vue';

export default {
	components: {
		tmButton,
		tmForm,
		tmPickers,
		tmInput,
		tmSwitch,
		tmSheet,
		tmGroupradio,
		tmRadio
	},
	data() {
		return {
			isBlackTheme: false,
			loading: true,
			appSettings: {},
			isSaved: true,
			firstLoad: true,
			homeLayout: {
				list: [{ name: '一行一列', value: 'h_row_col1' }, { name: '一行两列', value: 'h_row_col2' }],
				selectDefault: ['一行一列'],
				selectLabel: '一行一列',
				selectValue: 'h_row_col1'
			},
			articleCardStyle: {
				list: [
					{ name: '左图右文', value: 'lr_image_text' },
					{ name: '左文右图', value: 'lr_text_image' },
					{ name: '上图下文', value: 'tb_image_text' },
					{ name: '上文下图', value: 'tb_text_image' },
					{ name: '只有文字', value: 'only_text' }
				],
				selectDefault: ['左图右文'],
				selectLabel: '左图右文',
				selectValue: 'lr_image_text'
			},
			dotPositionList: [{ name: '右边', value: 'right', checked: true }, { name: '下边', value: 'bottom', checked: false }]
		};
	},

	watch: {
		appSettings: {
			deep: true,
			handler() {
				if (this.firstLoad) {
					this.firstLoad = false;
				} else {
					this.isSaved = false;
				}
			}
		}
	},

	onLoad(e) {
		this.fnSetPageTitle('应用设置');
	},
	created() {
		this.appSettings = Object.assign({}, _DefaultAppSettings, uni.$tm.vx.getters().getSettings);
		this.fnHandleFormatSelect();
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		setTimeout(() => {
			this.loading = false;
			uni.hideLoading();
		}, 500);
	},

	methods: {
		// 统一处理选择框的内容
		fnHandleFormatSelect() {
			// 首页布局
			const _homeLayout = this.fnFindObjInList(this.homeLayout.list, 'value', this.appSettings.layout.home);
			this.homeLayout.selectDefault = [_homeLayout.name];
			this.homeLayout.selectLabel = _homeLayout.name;
			this.homeLayout.selectValue = _homeLayout.value;

			const _articleCardStyle = this.fnFindObjInList(this.articleCardStyle.list, 'value', this.appSettings.layout.cardType);
			this.articleCardStyle.selectDefault = [_articleCardStyle.name];
			this.articleCardStyle.selectLabel = _articleCardStyle.name;
			this.articleCardStyle.selectValue = _articleCardStyle.value;
		},
		// 在集合中找匹配的对象
		fnFindObjInList(list, key, value) {
			return list.find(x => x[key] == value);
		},
		fnOnBannerDotChange(e) {
			const _select = e[0];
			if (_select.index == 0 && _select.checked) {
				this.appSettings.banner.dotPosition = 'right';
			}
			if (_select.index == 1 && _select.checked) {
				this.appSettings.banner.dotPosition = 'bottom';
			}
		},
		// 首页布局
		fnOnHomeLayoutConfirm(e) {
			const _select = e[0].data;
			this.homeLayout.selectDefault = [_select.name];
			this.homeLayout.selectLabel = _select.name;
			this.homeLayout.selectValue = _select.value;
			this.appSettings.layout.home = _select.value;
		},
		// 文章卡片样式
		fnOnArticleCardStyleConfirm(e) {
			const _select = e[0].data;
			this.articleCardStyle.selectDefault = [_select.name];
			this.articleCardStyle.selectLabel = _select.name;
			this.articleCardStyle.selectValue = _select.value;
			this.appSettings.layout.cardType = _select.value;
		},
		// 保存
		fnOnSave() {
			this.isSaved = true;
			console.log('this.appSettings', this.appSettings);
			this.$tm.vx.commit('setting/setSettings', this.appSettings);
			uni.$tm.toast('保存成功，部分设置在重启后生效！');
		},
		// 使用默认配置
		fnOnSaveDefault() {
			uni.$eShowModal({
				title: '提示',
				content: '您确定要恢复为默认的设置吗？',
				showCancel: true,
				cancelText: '否',
				cancelColor: '#999999',
				confirmText: '是',
				confirmColor: '#03a9f4'
			})
				.then(res => {
					this.isSaved = true;
					uni.$tm.vx.actions('setting/updateDefaultAppSettings');
					uni.$tm.toast('系统设置已恢复为默认配置，部分设置在重启后生效！');
				})
				.catch(err => {});
		},
		fnOnBack() {
			if (this.isSaved) {
				uni.navigateBack();
				return;
			}
			uni.$eShowModal({
				title: '提示',
				content: '您当前可能有未保存的数据，确定返回吗？',
				showCancel: true,
				cancelText: '否',
				cancelColor: '#999999',
				confirmText: '是',
				confirmColor: '#03a9f4'
			})
				.then(res => {
					uni.navigateBack();
					this.isSaved = true;
				})
				.catch(err => {});
		}
	}
};
</script>

<style scoped lang="scss">
.app-page {
	box-sizing: border-box;
	padding-bottom: 120rpx;
	.btn-bar {
		width: 100vw;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 24rpx;
		gap: 0 24rpx;
		box-shadow: 0rpx -6rpx 24rpx rgba(0, 0, 0, 0.03);
	}
}
.required {
	position: relative;
	padding-left: 18rpx;
	&:before {
		content: '*';
		position: absolute;
		left: -4rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 34rpx;
		color: rgba(244, 67, 54, 1);
	}
}
</style>