DealDetails.vue
2.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<script setup lang="ts">
import type { DealDetails } from './types'
const props = defineProps<{
formData: DealDetails
}>()
const emit = defineEmits<{
(e: 'update:formData', value: DealDetails): void
}>()
const formData = ref<DealDetails>(props.formData)
const offeredItems = [
'iPhone 12 Pro Max',
'iPhone 12 Pro',
'iPhone 11 Pro Max',
'iPhone 11',
'iPhone 12 Mini',
'OnePlus Nord CE',
'iPhone 12 Pro Max',
'iPhone 12 Pro',
'iPhone 11 Pro Max',
'iPhone 11',
'iPhone 12 Mini',
'OnePlus Nord CE',
]
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VForm>
<VRow>
<VCol
cols="12"
sm="6"
>
<VTextField
v-model="formData.title"
label="Deal Title"
placeholder="Black Friday Sale, 50% off on all products"
/>
</VCol>
<VCol
cols="12"
sm
>
<VTextField
v-model="formData.code"
label="Deal Code"
placeholder="BLACKFRIDAY50"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
v-model="formData.description"
label="Deal Description"
placeholder="Write something about this deal"
auto-grow
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VRow>
<VCol cols="12">
<VSelect
v-model="formData.offeredUItems"
multiple
chips
label="Offered Items"
placeholder="Select Offered Items"
:items="offeredItems"
/>
</VCol>
<VCol cols="12">
<VSelect
v-model="formData.cartCondition"
label="Cart Condition"
placeholder="Select Cart Condition"
:items="['Cart must contain all selected Downloads', 'Cart needs one or more of the selected Downloads']"
/>
</VCol>
</VRow>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppDateTimePicker
v-model="formData.dealDuration"
label="Deal Duration"
placeholder="Select Date"
:config="{ mode: 'range' }"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<h6 class="text-sm font-weight-medium">
Notify Users
</h6>
<div class="d-flex align-center flex-wrap gap-x-3">
<VCheckbox
v-model="formData.notification.email"
label="Email"
value="email"
/>
<VCheckbox
v-model="formData.notification.sms"
label="SMS"
value="sms"
/>
<VCheckbox
v-model="formData.notification.pushNotification"
label="Push Notification"
value="push-notification"
/>
</div>
</VCol>
</VRow>
</VForm>
</template>