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

<template>
	<view class="p-person-config g_w_all g_kuaishou">
		<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;" />
				</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 class="g_flex_row_between flex_center g_p_16">
				<view class="g_fs_16 g_c_0">开启演示模式</view>
				<u-switch v-model="formData.enabled" :activeColor="themeColor" inactiveColor="#e5e5e5" @change="handleSwitchChange"></u-switch>
			</view>
		</view>
		<view class="g_mt_40 g_ml_12 g_mr_12">
			<rh-button btnText="保存" @clickBtn="handleSubmit" type="primary" size="full" />
		</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: '#333' },
			{ value: '#FF0000' },
			{ value: '#FF5000' },
			{ value: '#0266D6' },
			{ value: '#2E7D32' },
			{ value: '#9859B6' }
		];
		let savedThemeColor = demoConfig.themeColor || defaultThemeColor;
		let selectedColorIndex = colorGroup.findIndex(c => c.value === savedThemeColor);
		if (selectedColorIndex === -1) selectedColorIndex = 0;
		return {
			themeColor: savedThemeColor,
			colorGroup,
			selectedColorIndex,
			formData: {
				appName: demoConfig.appName || "",
				logo: demoConfig.logo || "",
				enabled: demoConfig.enabled || false,
				themeColor: savedThemeColor,
			},
		};
	},
	methods: {
		selectColor(index) {
			this.selectedColorIndex = index;
			this.formData.themeColor = this.colorGroup[index].value;
			this.themeColor = this.colorGroup[index].value;
		},
		handleSwitchChange(e) {
			this.formData.enabled = e;
		},
		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.enabled && !that.formData.appName) {
				uni.showToast({
					title: "请输入小程序名称",
					icon: "none",
				});
				return;
			}
			if (that.formData.enabled && !that.formData.logo) {
				uni.showToast({
					title: "请上传小程序头像",
					icon: "none",
				});
				return;
			}
			uni.setStorageSync("DEMO_MODE_CONFIG", {
				appName: that.formData.appName,
				logo: that.formData.logo,
				enabled: that.formData.enabled,
				themeColor: that.formData.themeColor,
			});
			uni.setStorageSync("DEMO_MODE_ENABLED", that.formData.enabled);
			getApp().globalData.themeColor = that.formData.themeColor;
			uni.showToast({
				title: "保存成功",
				icon: "success",
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 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);
	}
}
</style>