121

src/views/Workshop/customize.vue

@@ -1,6 +1,28 @@
 <script setup lang="ts">
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
+	import { ref } from 'vue'
+	const emit = defineEmits(['viewType'])
+
+	const inputText = ref('');
+	const isLoved = ref(false);
+
+	const onSend = () => {
+		if (inputText.value === '') return
+		const text = inputText.value
+		inputText.value = ''
+		console.log('发送消息:', text)
+	}
+	const onLove = () => {
+		console.log("love")
+		isLoved.value = !isLoved.value
+	}
+	const onReload = () => {
+		console.log("reload")
+	}
+	const onDownload = () => {
+		console.log("download")
+	}
 </script>
 
 <template>
@@ -10,8 +32,13 @@
 		<p class="tip">Refine your Look</p>
 		<div class="input-box">
 			<div class="help">?</div>
-			<input type="text" placeholder="Try: “Change background to Tokyo City”" />
-			<div class="send"><SvgIcon name="send" size="48" /></div>
+			<input
+				type="text"
+				v-model="inputText"
+				@keyup.enter="onSend"
+				placeholder="Try: “Change background to Tokyo City”"
+			/>
+			<div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div>
 		</div>
 		<div class="card">
 			<img src="@/assets/images/workshop/posture/posture_1.png" />
@@ -21,9 +48,9 @@
 				<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
 			</div>
 			<div class="icons">
-				<div><SvgIcon name="love_0" size="35" /></div>
-				<div><SvgIcon name="reload" size="35" /></div>
-				<div><SvgIcon name="download" size="35" /></div>
+				<div @click="onLove"><SvgIcon :name="`love_${isLoved ? 1 : 0}`" size="35" /></div>
+				<div @click="onReload"><SvgIcon name="reload" size="35" /></div>
+				<div @click="onDownload"><SvgIcon name="download" size="35" /></div>
 			</div>
 		</div>
 	</div>
@@ -31,7 +58,6 @@
 </template>
 
 <style scoped lang="less">
-	
 	.customize {
 		width: 100%;
 		position: relative;
@@ -95,7 +121,7 @@
 			height: 107.4rem;
 			border-radius: 2rem;
 			// box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
-			border: 0.2rem solid #D9D9D9;
+			border: 0.2rem solid #d9d9d9;
 			overflow: hidden;
 			> * {
 				position: absolute;