first

pagesCreateOrder/confirm-order/components/remark.vue

@@ -0,0 +1,170 @@
+<template>
+	<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
+		<template #desc>
+			<view class="u-text-left u-p-l-30 u-p-r-30 u-p-t-30 ">
+				<view class="u-m-t-32 u-flex ">
+					<uni-easyinput type="textarea" v-model="form.remark" placeholder="自定义内容"></uni-easyinput>
+				</view>
+				<view class="u-flex u-m-t-24">
+					<view class="u-flex u-flex-wrap u-m-r-20 u-m-b-20 lh34" v-for="(item,index) in causes" :key="index">
+						<button @tap="changeCauses(item)" class="tag ">{{item.name}}</button>
+					</view>
+				</view>
+				
+
+			</view>
+		</template>
+		<template #btn>
+			<view class="u-p-l-30 u-p-r-30 u-m-t-28 u-p-b-30">
+				<view class="">
+					<my-button @tap="confirm" shape="circle" fontWeight="700">确认</my-button>
+					<view class="u-m-t-10">
+						<my-button type="cancel" bgColor="#fff" @tap="confirm">取消</my-button>
+					</view>
+				</view>
+			</view>
+		</template>
+	</my-model>
+</template>
+
+<script setup>
+	import {
+		reactive,
+		nextTick,
+		ref
+	} from 'vue';
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		data: {
+			type: Array,
+			default: []
+		}
+	})
+	
+	
+	function changeCauses(item) {
+		let prve=form.remark?',':''
+		form.remark +=prve+item.name
+		console.log(form.remark);
+	}
+
+	const causes = reactive([{
+			name: '免葱',
+			checked: false
+		},
+		{
+			name: '免香菜',
+			checked: false
+		},
+		{
+			name: '不要辣',
+			checked: false
+		}
+	])
+
+
+	function setForm(key, val) {
+		form[key] = val
+	}
+
+
+
+
+	const $form = {
+		remark:''
+	}
+	const form = reactive({
+		...$form
+	})
+
+	function resetForm() {
+		Object.assign(form, {
+			...$form
+		})
+	}
+
+	const model = ref(null)
+
+	function open(data) {
+		Object.assign(form,data)
+		model.value.open()
+	}
+
+	function close() {
+		model.value.close()
+	}
+	const emits = defineEmits(['confirm'])
+
+	function confirm() {
+		const {remark
+		} = form
+		emits('confirm', {
+			remark
+		})
+		console.log(remark);
+		close()
+		
+	}
+	defineExpose({
+		open,
+		close
+	})
+</script>
+
+<style lang="scss">
+	.lh34{
+		line-height: 34rpx;
+	}
+	.tag {
+		background-color: #fff;
+		border: 1px solid #E5E5E5;
+		line-height: inherit;
+		font-size: 24rpx;
+		color: #666666;
+		padding: 6rpx 20rpx;
+		border-radius: 8rpx;
+
+		&.active {
+			border-color: #E6F0FF;
+			color: $my-main-color;
+		}
+	}
+
+	.hover-class {
+		background-color: #E5E5E5;
+	}
+
+	.discount {
+		.u-absolute {
+			top: 0;
+			bottom: 0;
+			right: 0;
+		}
+	}
+
+	.bg1 {
+		background: #F7F7FA;
+	}
+
+	.tab {
+		padding: 0 80rpx;
+	}
+
+	.border {
+		border: 1px solid #E5E5E5;
+		border-radius: 4rpx;
+	}
+
+	.input-box {
+		padding: 22rpx 32rpx;
+		font-size: 28rpx;
+		color: #666;
+	}
+
+	.placeholder-class {
+		font-size: 28rpx;
+	}
+</style>