dandelionPlatformToB-uni-v3/root/person/config.vue

<template>
	<view class="p-person-config g_w_all g_kuaishou g_flex_column_between">
		<view class="g_flex_1" hover-class="none" hover-stop-propagation="false">
			<view class="g_h_10"></view>
			<view class="g_bg_f g_ml_12 g_mr_12 g_radius_8" style="overflow: hidden;">
				<view class="g_flex_row_between flex_center g_p_16" style="border-bottom: 0.5px solid #eee;">
					<view class="g_fs_16 g_c_0">小程序名称</view>
					<view class="g_flex_1 g_flex_row_end">
						<input class="g_fs_16 g_text_r" type="text" v-model="formData.appName" placeholder="请输入小程序名称" placeholder-class="g_c_9" style="width: 200px;" maxlength="8" />
					</view>
				</view>
				<view class="g_flex_row_between flex_center g_p_16" style="border-bottom: 0.5px solid #eee;" @click="chooseAvatar">
					<view class="g_fs_16 g_c_0">小程序头像</view>
					<view class="g_flex_row_end flex_center">
						<image v-if="formData.logo" :src="formData.logo" class="g_w_32 g_h_32 g_radius_50" mode="aspectFill"></image>
						<view v-else class="g_w_32 g_h_32 g_radius_50 g_bg_f_5 g_flex_c">
							<i class="iconfont icon-add g_c_9 g_fs_16"></i>
						</view>
						<i class="iconfont icon-gengduo11 g_ml_8 g_c_9 g_fs_14"></i>
					</view>
				</view>
				<view class="g_flex_row_between flex_center g_p_16" style="border-bottom: 0.5px solid #eee;">
					<view class="g_fs_16 g_c_0">自定义主题色</view>
					<view class="g_flex_row_between color-group-wrap">
						<view v-for="(item, index) in colorGroup" :key="index" class="g_w_48 g_h_48 g_radius_8 color-item" 
									:class="{ 'color-item-selected': selectedColorIndex === index }" 
									:style="{ backgroundColor: item.value }" style="margin-top: 10px;" @click="selectColor(index)"></view>
					</view>
				</view>
			</view>
			<view class="g_mt_40 g_ml_12 g_mr_12 vonfigbtn">
				<rh-button btnText="保存" @clickBtn="handleSubmit" type="primary" size="full" style="width: 250px;" />
			</view>
		</view>
		<view class="g_flex_row_center g_pb_42 g_flex_none" 
				  @click="handleRestore"
					style="text-align: center; font-size: 12px; color: #999; line-height: 32px; box-sizing: border-box">
			<view style="color: #576b95;">恢复默认主题</view>
		</view>
	</view>
</template>
 
<script>
import { get } from 'mobx';

export default {
	data() {
		let demoConfig = uni.getStorageSync("DEMO_MODE_CONFIG") || {};
		let defaultThemeColor = getApp().globalData.themeColor;
		let colorGroup = [
			{ value: '#FF0000' },
			{ value: '#FF5000' },
			{ value: '#fea702' },
			{ value: '#2FC67D' },
			{ value: '#1989fa' },
			{ value: '#9859B6' }
		];
		let demoEnabled = uni.getStorageSync("DEMO_MODE_ENABLED");
		let savedThemeColor = (demoEnabled && demoConfig.themeColor) ? demoConfig.themeColor : defaultThemeColor;
		let selectedColorIndex = colorGroup.findIndex(c => c.value === savedThemeColor);
		return {
			themeColor: savedThemeColor,
			colorGroup,
			selectedColorIndex,
			formData: {
				appName: demoConfig.appName || "",
				logo: demoConfig.logo || "",
				themeColor: savedThemeColor,
			},
		};
	},
	methods: {
		selectColor(index) {
			this.selectedColorIndex = index;
			this.formData.themeColor = this.colorGroup[index].value;
			this.themeColor = this.colorGroup[index].value;
		},
		chooseAvatar() {
			let that = this;
			uni.showActionSheet({
				itemList: ["从相册选择", "使用相机"],
				success: function (res) {
					if (res.tapIndex == 0) {
						that.setAvatar(["album"]);
					} else {
						that.setAvatar(["camera"]);
					}
				},
			});
		},
		setAvatar($type) {
			let that = this;
			that.G.uploadImgToOss(
				(res) => {
					that.formData.logo = res.image;
					uni.hideLoading();
				},
				"avatar",
				"default",
				1,
				$type
			);
		},
		handleSubmit() {
			let that = this;
			if (!that.formData.appName) {
				uni.showToast({
					title: "请输入小程序名称",
					icon: "none",
				});
				return;
			}
			if (!that.formData.logo) {
				uni.showToast({
					title: "请上传小程序头像",
					icon: "none",
				});
				return;
			}
			if (!uni.getStorageSync("ORIGINAL_THEME_COLOR")) {
				uni.setStorageSync("ORIGINAL_THEME_COLOR", getApp().globalData.themeColor);
			}
			uni.setStorageSync("DEMO_MODE_CONFIG", {
				appName: that.formData.appName,
				logo: that.formData.logo,
				enabled: true,
				themeColor: that.formData.themeColor,
			});
			uni.setStorageSync("DEMO_MODE_ENABLED", true);
			getApp().globalData.themeColor = that.formData.themeColor;
			uni.showToast({
				title: "保存成功",
				icon: "success",
			});
			setTimeout(() => {
				uni.switchTab({
					url: "/pages/home/index",
				});
			}, 1500);
		},
		handleRestore() {
			let originalThemeColor = uni.getStorageSync("ORIGINAL_THEME_COLOR") || getApp().globalData.themeColor;
			uni.setStorageSync("DEMO_MODE_ENABLED", false);
			let demoConfig = uni.getStorageSync("DEMO_MODE_CONFIG") || {};
			demoConfig.enabled = false;
			uni.setStorageSync("DEMO_MODE_CONFIG", demoConfig);
			getApp().globalData.themeColor = originalThemeColor;
			this.selectedColorIndex = -1;
			this.themeColor = originalThemeColor;
			this.formData.themeColor = originalThemeColor;
			uni.showToast({
				title: "已恢复",
				icon: "success",
			});
			setTimeout(() => {
				uni.switchTab({
					url: "/pages/home/index",
				});
			}, 1500);
		},
	},
};
</script>

<style lang="scss">
.p-person-config{
	min-height: 100vh;
	background-color: #ededed;
	.color-group-wrap {
		display: flex;
		justify-content: space-between;
		width: 100%;
		flex-wrap: wrap;
		view {
			width: calc(100% / 6 - 8px);
			height: 48px;
			border-radius: 8px;
		}
	}
	.color-item {
		position: relative;
		transition: all 0.2s ease;
		&::after {
			content: '';
			position: absolute;
			top: -4px;
			left: -4px;
			right: -4px;
			bottom: -4px;
			border-radius: 12px;
			border: 2px solid transparent;
			transition: all 0.2s ease;
		}
	}
	.color-item-selected {
		transform: scale(1.1);
		&::after {
			border-color: #999;
		}
		animation: selectedPulse 0.3s ease;
	}
}
@keyframes selectedPulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.15);
	}
	100% {
		transform: scale(1.1);
	}
}

.vonfigbtn{
	.bocai_btn_mode_circle{
		width: 250px !important;
	}
}
</style>