Skip to content

Commit fed2893

Browse files
gatchan0807gatchan0807
authored
Merge pull request #13 from ITCreate/feat/update-results-page
色々ひりついたPR
2 parents 34e93ac + bc186af commit fed2893

File tree

3 files changed

+115
-72
lines changed

3 files changed

+115
-72
lines changed

‎pages/index.vue‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@
77
src="~assets/images/main-logo-white.png"
88
/>
99
</div>
10-
<h1 class="hero-message">今日のあなたはどのお酒？</h1>
10+
<h1 class="hero-message">今日あなたが飲むのは<br>どのお酒？</h1>
1111
<ul class="alchole-items">
1212
<li
1313
class="alchole-item"
1414
v-for="alchole in alcoholicBeverages"
1515
:key="alchole.id"
1616
@click="redirectSwipe(alchole, $event.target)"
1717
>
18+
<span class="alchole-item-name" :src="alchole.name" />
1819
<img :src="alchole.image" />
1920
</li>
2021
</ul>
@@ -40,9 +41,12 @@ export default {
4041
target.parentNode.classList.toggle("action");
4142
setTimeout(() => {
4243
target.parentNode.classList.toggle("action");
43-
this.$router.push({name: "swipe", params: {
44-
"alcoholicBeverage": alcohol,
45-
}});
44+
this.$router.push({
45+
name: "swipe",
46+
params: {
47+
alcoholicBeverage: alcohol,
48+
},
49+
});
4650
}, 1000);
4751
},
4852
},
@@ -57,6 +61,10 @@ export default {
5761
background: linear-gradient(to bottom, #ffdce1, #ff7186 80%, #ff7a5c);
5862
}
5963
64+
.hero-image {
65+
@apply mx-auto;
66+
}
67+
6068
.hero-message {
6169
@apply my-6 text-center text-2xl font-bold;
6270
color: #575757;
@@ -69,8 +77,9 @@ export default {
6977
.alchole-item {
7078
flex-grow: 1;
7179
width: 25%;
80+
max-width: 100px;
7281
margin: 2% 2%;
73-
@apply shadow-lg rounded-lg overflow-hidden;
82+
@apply shadow-lg rounded-lg overflow-hidden relative;
7483
}
7584
7685
.alchole-item > img {
@@ -80,6 +89,14 @@ export default {
8089
@apply rounded-lg;
8190
}
8291
92+
.alchole-item-name {
93+
@apply block my-2 font-bold text-2xl text-white absolute;
94+
bottom: 1rem;
95+
left: 1rem;
96+
text-shadow: 1px 2px 3px #787878;
97+
z-index: 100;
98+
}
99+
83100
.alchole-item.action {
84101
transform: scale(1);
85102
cursor: default;

‎pages/results.vue‎

Lines changed: 67 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,23 @@
1111
</h1>
1212
<div class="fusion-champion">
1313
<div class="fusion-champion-item">
14-
<img :src="results.top_two[0].image">
15-
<span>{{results.top_two[0].name}}</span>
14+
<img
15+
v-if="results.match.oneNibble.image"
16+
:src="results.match.oneNibble.image"
17+
>
18+
<span v-if="results.match.oneNibble.name">{{results.match.oneNibble.name}}</span>
1619
</div>
1720
<img
1821
class="cross-mark"
1922
src="~/assets/images/cross-mark.png"
2023
alt="×"
2124
>
2225
<div class="fusion-champion-item">
23-
<img :src="results.top_two[1].image">
24-
<span>{{results.top_two[1].name}}</span>
26+
<img
27+
v-if="results.match.twoNibble.image"
28+
:src="results.match.twoNibble.image"
29+
>
30+
<span v-if="results.match.twoNibble.name">{{results.match.twoNibble.name}}</span>
2531
</div>
2632
</div>
2733
<div>
@@ -31,14 +37,16 @@
3137
alt="with"
3238
>
3339
<img
34-
class="fusion-champion-candidate"
35-
:src="results.candidates[2].image"
40+
class="fusion-champion-alcoholic-beverage"
41+
v-if="results.match.alcoholicBeverage.image"
42+
:src="results.match.alcoholicBeverage.image"
3643
>
44+
<span class="fusion-champion-alcoholic-beverage-name" v-if="results.match.alcoholicBeverage.name">{{results.match.alcoholicBeverage.name}}</span>
3745
</div>
38-
<button
46+
<!-- <button
3947
class="start-review-button"
4048
type="button"
41-
>レビューする</button>
49+
>レビューする</button> -->
4250
</div>
4351
<div class="result-others">
4452
<h2>その他のマッチする食事</h2>
@@ -60,61 +68,54 @@ export default {
6068
data: () => ({
6169
results: [],
6270
}),
71+
watch: {
72+
results(newValue) {
73+
console.log(newValue);
74+
this.results = this.fetchResults();
75+
},
76+
},
6377
created() {
6478
this.results = this.fetchResults();
6579
},
6680
methods: {
6781
fetchResults() {
82+
// console.log(this.$route.params.swipes);
83+
84+
const { alcoholicBeverage, selectNibbles } = this.$route.params.swipes;
85+
86+
const likedNibbles = selectNibbles
87+
.map((sn) => {
88+
if (sn.likeLevel !== 0) return sn;
89+
})
90+
.filter((v) => v);
91+
92+
const sortedLikedNibbles = likedNibbles.sort((ln1, ln2) => {
93+
return (ln1.likedLevel + Math.floor(Math.random() * 8) + 1) - (ln2.likedLebel + Math.floor(Math.random() * 6) + 1)
94+
});
95+
const [oneNibble, twoNibble, ...candicates] = sortedLikedNibbles;
96+
97+
// const d = await this.$axios.$post("/nibbles/results", requestPayload);
98+
// console.log(d);
6899
// 結果を取得するAPIを叩く
69100
// バックエンド対応待ち
70101
// とりあえずダミーデータ
102+
console.log({
103+
match: {
104+
id: 12, // レビューページ用組み合わせID
105+
alcoholicBeverage: alcoholicBeverage,
106+
oneNibble: oneNibble,
107+
twoNibble: twoNibble,
108+
},
109+
candidates: candicates,
110+
});
71111
return {
72-
top_two: [
73-
{
74-
id: 1,
75-
name: "餃子",
76-
image:
77-
"https://1.bp.blogspot.com/-JgCCcKaPehk/XuRAqUWJgLI/AAAAAAABZgQ/hY77s2QpJjQG1kk78jR91O4LRrinBRWaQCNcBGAsYHQ/s1600/food_jelly_fry.png",
78-
},
79-
{
80-
id: 2,
81-
name: "ごはん",
82-
image:
83-
"https://4.bp.blogspot.com/-S9iMvM5-DcI/VoX5L4XQDlI/AAAAAAAA2TA/JiN-OviBAcE/s800/food_mamegohan.png",
84-
},
85-
],
86-
candidates: [
87-
{
88-
id: 1,
89-
name: "パスタ",
90-
image: require("~/assets/images/red-wine.png"),
91-
},
92-
{
93-
id: 2,
94-
name: "パスタ",
95-
image: require("~/assets/images/red-wine.png"),
96-
},
97-
{
98-
id: 3,
99-
name: "パスタ",
100-
image: require("~/assets/images/red-wine.png"),
101-
},
102-
{
103-
id: 4,
104-
name: "パスタ",
105-
image: require("~/assets/images/red-wine.png"),
106-
},
107-
{
108-
id: 5,
109-
name: "パスタ",
110-
image: require("~/assets/images/red-wine.png"),
111-
},
112-
{
113-
id: 6,
114-
name: "パスタ",
115-
image: require("~/assets/images/red-wine.png"),
116-
},
117-
],
112+
match: {
113+
id: 12, // レビューページ用組み合わせID
114+
alcoholicBeverage: alcoholicBeverage,
115+
oneNibble: oneNibble,
116+
twoNibble: twoNibble,
117+
},
118+
candidates: candicates,
118119
};
119120
},
120121
},
@@ -173,7 +174,7 @@ export default {
173174
}
174175
175176
.fusion-champion-item > span {
176-
@apply my-2 font-bold;
177+
@apply block my-2 font-bold;
177178
}
178179
179180
.fusion-champion-item > img {
@@ -184,16 +185,21 @@ export default {
184185
}
185186
186187
.with-image {
187-
@apply mx-auto my-8 h-8;
188+
@apply mx-auto my-6 h-8;
188189
}
189190
190191
.start-review-button {
191192
@apply block mx-auto mt-8 px-8 py-2 w-1/2 rounded-full text-center border-2 border-white;
192193
background: linear-gradient(to bottom right, #ff7186, #ff7186 80%, #ff7a5c);
193194
}
194195
195-
.fusion-champion-candidate {
196+
.fusion-champion-alcoholic-beverage {
196197
@apply block mx-auto my-4 rounded-lg shadow-lg;
198+
max-height: 240px;
199+
}
200+
201+
.fusion-champion-alcoholic-beverage-name {
202+
@apply block my-2 font-bold text-center text-lg;
197203
}
198204
199205
.result-others {
@@ -210,10 +216,14 @@ export default {
210216
211217
.result-others-list > li {
212218
@apply w-2/5 mx-2 my-1 text-center font-bold relative;
219+
height: 120px;
213220
}
214221
215222
.result-others-list img {
216223
@apply rounded-lg;
224+
object-fit: cover;
225+
height: 100%;
226+
width: 100%;
217227
}
218228
219229
.result-others-list span {

‎pages/swipe.vue‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<div
1919
class="pic"
2020
:style="{'background-image': `url(${scope.data.image})`}"
21-
/>
21+
><span class="fusion-champion-alcoholic-name">{{scope.data.name}}</span></div>
2222
</template>
2323
<img
2424
class="like-pointer"
@@ -86,15 +86,17 @@ export default {
8686
methods: {
8787
// FIXME: asyncDataでとったほうが良さそう
8888
async fetchNibbles() {
89-
console.log(this.requestPayload)
90-
await this.$axios.get("/nibbles", {
91-
params: {
92-
alcoholicBeverage: this.requestPayload.alcoholicBeverage,
93-
}
94-
}).then((res) => {
95-
this.nibbles = res.data;
96-
this.mock();
97-
});
89+
console.log(this.requestPayload);
90+
await this.$axios
91+
.get("/nibbles", {
92+
params: {
93+
alcoholicBeverage: this.requestPayload.alcoholicBeverage,
94+
},
95+
})
96+
.then((res) => {
97+
this.nibbles = res.data;
98+
this.mock();
99+
});
98100
},
99101
mock() {
100102
const list = [];
@@ -144,19 +146,26 @@ export default {
144146
this.$refs.tinder.decide(choice);
145147
},
146148
saveSwipe(type, item) {
149+
console.log(item);
147150
if (type === "like") {
148151
this.requestPayload.selectNibbles.push({
149152
id: item.id,
153+
image: item.image,
154+
name: item.name,
150155
likeLevel: 1,
151156
});
152157
} else if (type === "super") {
153158
this.requestPayload.selectNibbles.push({
154159
id: item.id,
160+
image: item.image,
161+
name: item.name,
155162
likeLevel: 2,
156163
});
157164
} else {
158165
this.requestPayload.selectNibbles.push({
159166
id: item.id,
167+
image: item.image,
168+
name: item.name,
160169
likeLevel: 0,
161170
});
162171
}
@@ -278,4 +287,11 @@ export default {
278287
.swipe-buttons img:nth-last-child(1) {
279288
margin-right: 0;
280289
}
290+
291+
.fusion-champion-alcoholic-name {
292+
@apply block my-2 font-bold text-2xl text-white absolute;
293+
bottom: 1rem;
294+
left: 1rem;
295+
text-shadow: 1px 2px 3px #787878;
296+
}
281297
</style>

0 commit comments

Comments
 (0)