allLikeMall/yudao-admin-vue3/src/views/mall/promotion/diy/template/ThemeStyle.vue

<template>
	<div class="main">
		<div class="mainTop">
			<div>主题风格</div>
			<div class="right">
				<div class="save" @click="save">保存</div>
				<!-- <div class="cz" @click="cz">重置</div> -->
			</div>
		</div>

		<div class="ztfg">
			<div class='top'>
				<div class="item"  :class="currItem== '' ? 'on': ''" @click="clickItem('')">
					<div class="le" style="background: rgb(233, 52, 34);"></div>
					<div class="ri">红色</div>
				</div>
				<div class="item"  :class="currItem== 'blue' ? 'on': ''" @click="clickItem('blue')">
					<div class="le"></div>
					<div class="ri">天空蓝</div>
				</div>
				<div class="item" :class="currItem== 'lv' ? 'on': ''" @click="clickItem('lv')">
					<div class="le" style="background:rgb(66, 202, 77);"></div>
					<div class="ri">生鲜绿</div>
				</div>
				<div class="item" :class="currItem== 'pink' ? 'on': ''" @click="clickItem('pink')">
					<div class="le" style="background:#ff448f;"></div>
					<div class="ri">魅力粉</div>
				</div>
				<div class="item" :class="currItem== 'orange' ? 'on': ''" @click="clickItem('orange')">
					<div class="le" style="background:#fe5c2d;"></div>
					<div class="ri">活力橙</div>
				</div>
			</div>
			<div class="mainBottom">
				<div class='item' v-show="currItem== ''">
					<img class="img"
						src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/f973a0a4648d476a25b14a29250356d065507a1b9134b6303d7acd0b2d2d9cc7.jpg"/>
				</div>

				<div class='item' v-show="currItem== 'blue'">
					<img class="img"
						src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/f2c0e04f8491b618d691eb95c3df2f89ba565134cacc9b4e39ff96caa4d1cec0.jpg" />
				</div>
				<div class='item' v-show="currItem== 'lv'">
					<img class="img"
						src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/1ba06619f3f87677b51dd735b03e0378da352abbe47b188dd43c58262ed47cca.jpg" />
				</div>
				<div class='item' v-show="currItem== 'pink'">
					<img class="img"
						src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/13fd006f8883b492db10df8f1d03347b88c8836e68a603db874fd68bc01c7a71.jpg" />
				</div>
				<div class='item' v-show="currItem== 'orange'">
					<img class="img"
						src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/da61c583680494e23a31f39acbb0246cf1d439080ceb53d85dc564da2c1ecfe9.jpg" />
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
	import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
	import * as DiyPageApi from '@/api/mall/promotion/diy/page'
	import { useTagsdivStore } from '@/store/modules/tagsdiv'
	import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
	import { toNumber } from 'lodash-es'
	const message = useMessage() // 消息弹窗
	const currItem = ref('blue');

	function clickItem(val) {
		currItem.value = val;
	}

	function cz(val) {
		currItem.value = 'blue';
	}

	function save() {
		const val = '';
		// currItem.value = val;
		if(currItem.value == 'lv'){
			setZtClass('lv')
		}else if(currItem.value == 'blue'){
			setZtClass('blue')
		}else if(currItem.value == 'pink'){
			setZtClass('pink')
		}else if(currItem.value == 'orange'){
			setZtClass('orange')
		}else{
			setZtClass('')
		}
		// console.log("请求接口还没有写啊！！！！快让后端提供啊")
	}

	// 设置主题风格
	const setZtClass = async (id) => {
		const res = await DiyTemplateApi.setDiyZtClass(id);
		console.log(res, "sssss");
		if(res || res == ''){
			message.success('保存成功')
		}
	}

	// 获取商品分类
	const getZtClass = async () => {
		const res = await DiyTemplateApi.getDiyZtClass();
		currItem.value = res
	}
	getZtClass()
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-wrap: wrap;

		.mainTop {
			width: 100%;
			margin: 10px 10px;
			background: white;
			padding: 10px 20px;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.right {
				display: flex;

				div {
					padding: 5px 15px;
					font-weight: 400;
					font-size: 14px;
				}

				.save {
					background: #0256FF;
					margin-right: 10px;
					color: white;
					cursor: pointer;
				}

				.cz {
					border: 1px solid #cccccc;
					cursor: pointer;
				}
			}
		}

		.ztfg {
			width: 100%;
			margin: 10px 10px;
			background: white;
			padding: 30px 30px;
			.top{
				display: flex;
				margin-bottom: 10px;
				.item{
					padding:10px 15px;
					border:1px solid #cccccc;
					border-radius:6px;
					margin-right:10px;
					display:flex;
					align-items:center;
					cursor: pointer;
					&.on{
						border:1px solid #0256ff;
					}
					.le{
						margin-right:10px;
						border-radius:6px;
						width:25px;
						height:25px;
						background:rgb(28, 165, 233);
					}
					.ti{

					}
				}
			}
			.mainBottom {

				display: flex;

				.item {
					margin-right: 20px;
					text-align: center;
					border-radius: 12px;

					// &.on {
					// 	.text {
					// 		color: #0256ff;
					// 	}

					// 	.img {
					// 		border: 2px solid #0256ff;
					// 	}
					// }

					.img {
						width: 800px;
						border-radius: 12px;
						border: 2px solid white;
					}

					.text {
						margin-top: 10px;
					}
				}
			}

		}

	}
</style>