Vue, back edited,added

2026-03-20 02:44:42 +00:00 · 2022-06-01 23:32:07 +07:00
parent a7e10cc944
commit 460eb97564
5 changed files with 80 additions and 52 deletions
--- a/frontend/src/components/RatingStars.vue
+++ b/frontend/src/components/RatingStars.vue
@@ -1,19 +1,21 @@
 <template>
  <div class="user__stat">
-    <div class="stat"><h3>5</h3></div>
+    <div class="stat"><h3>{{ totalStars }}</h3></div>
    <div class="stars">
-      <img src="../assets/images/star.png" alt="">
-      <img src="../assets/images/star.png" alt="">
-      <img src="../assets/images/star.png" alt="">
-      <img src="../assets/images/star.png" alt="">
-      <img src="../assets/images/star.png" alt="">
+      <img src="../assets/images/star.png" alt="" v-for="(star, i) in totalStars" :key="i">
    </div>
  </div>
 </template>

 <script>
 export default {
-  name: "RatingStars"
+  name: "RatingStars",
+  props: {
+    totalStars: {
+      type: Number,
+      default: 5,
+    }
+  }
 }
 </script>

--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,9 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import MainView from '@/views/MainView.vue'
-import AuthView from '@/views/AuthView.vue'
-import CatalogView from "@/views/CatalogView.vue";
-import ProfileView from "@/views/ProfileView.vue";
-import OfferView from "@/views/OfferView.vue";

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
@@ -11,27 +6,27 @@ const router = createRouter({
    {
      path: '/',
      name: 'home',
-      component: MainView
+      component: () => import(/* webpackChunkName: "MainView" */ '@/views/MainView.vue')
    },
    {
      path: '/auth',
      name: 'auth',
-      component: AuthView
+      component: () => import(/* webpackChunkName: "AuthView" */ '@/views/AuthView.vue')
    },
    {
      path: '/catalog',
      name: 'catalog',
-      component: CatalogView
+      component: () => import(/* webpackChunkName: "CatalogView" */ '@/views/CatalogView.vue')
    },
    {
      path: '/profile',
      name: 'profile',
-      component: ProfileView
+      component: () => import(/* webpackChunkName: "ProfileView" */ '@/views/ProfileView.vue')
    },
    {
      path: '/catalog/:id',
      name: 'offer',
-      component: OfferView
+      component: () => import(/* webpackChunkName: "OfferView" */ '@/views/OfferView.vue')
    },
  ]
 })
--- a/frontend/src/services/offer.js
+++ b/frontend/src/services/offer.js
@@ -19,6 +19,13 @@ export const OfferService = {
        const resp = await api.get('/users/offers');
        return resp;
    },
+    async filter(filters) {
+        const queryParamsObj = filters.reduce((obj, item) => (obj[item.name] = item.value, obj) ,{});
+        const resp = await api.get('/offers', {
+            params: queryParamsObj,
+        });
+        return resp;
+    },
    async getById(id) {
        const resp = await api.get(`/offers/${id}`);
        return resp;
--- a/frontend/src/views/CatalogView.vue
+++ b/frontend/src/views/CatalogView.vue
@@ -1,6 +1,5 @@
 <template>
  <the-header></the-header>
-
  <section class="suggestions">
    <div class="suggestions__title">
      <h3 class="newhome">Найти недвижимость</h3>
@@ -98,18 +97,21 @@ export default {
    isSelected(name, value) {
      return this.sortParams.some((e) => e.name === name && e.value === value) ? 'parametrs__block__selected' : '';
    },
-    addSortParam(name, value, isRange = false) {
+     async addSortParam(name, value) {
      const element = this.sortParams.findIndex((e) => e.name === name && e.value === value);

-      if (~element && !isRange) {
+      if (~element) {
        this.sortParams.splice(element, 1);
+        await this.reloadOffers();
        return;
      }

      this.sortParams = this.sortParams.filter((e) => e.name !== name);
      this.sortParams.push({ name, value });
+
+      await this.reloadOffers();
    },
-    addRangeSortParam(range, paramName) {
+    async addRangeSortParam(range, paramName) {
      const min = this[range].min;
      const max = this[range].max;

--- a/frontend/src/views/OfferView.vue
+++ b/frontend/src/views/OfferView.vue
@@ -19,13 +19,15 @@
            </div>
          </div>
          <div class="adv__main__images">
-            <div class="main__image">
-              <a href="#"><img src="../assets/images/offer1.png" alt=""></a>
-            </div>
+            <Transition>
+              <div class="main__image" v-if="offer.images" :style="{ 'background-image': imagePreview }">
+<!--                <a href="#"><img v-if="offer.images" :src="imagePreview" alt=""></a>-->
+              </div>
+            </Transition>
            <div class="other__images">
-              <a href="#"><img src="../assets/images/offer3.png" alt=""></a>
-              <a href="#"><img src="../assets/images/offer2.png" alt=""></a>
-              <a href="#"><img src="../assets/images/offer4.png" alt=""></a>
+              <a href="#" v-for="(image, i) in offer.images" :key="i" @click.prevent @mouseover="imagePreviewId = i">
+                <img :src="url(image.file)" alt="">
+              </a>
            </div>
          </div>
        </div>
@@ -33,18 +35,18 @@
        <div class="adv__host">
          <div class="adv__host__about__user">
            <div class="username">
-              <h2>Виктория</h2>
+              <h2>{{ ownerName }}</h2>
            </div>
            <rating-stars></rating-stars>
-            <div class="number">
+            <div class="number" @click.prevent="showPhone">
              <a href="#" class="favoritextinf"><h5>Показать номер</h5></a>
            </div>
 <!--            <div class="message">-->
 <!--              <a href="#" class="favoritextinf"><h5>Написать владельцу</h5></a>-->
 <!--            </div>-->
          </div>
-          <div class="userlogo">
-            <img src="@/assets/images/userlogosmall.png" alt="">
+          <div class="userlogo" :style="{'background-image': ownerPhoto}">
+<!--            <img :src="ownerPhoto" alt="">-->
          </div>
        </div>
      </div>
@@ -72,32 +74,14 @@
          <h2>Отзывы</h2>
        </div>
        <div class="reviews__blocks">
-          <div class="review">
+          <div v-if="offer?.user?.feedback" class="review" v-for="(review, i) in offer.user.feedback" :key="i">
            <div class="review__avatar">
              <img src="@/assets/images/forcomment.png" alt="">
            </div>
            <div class="rewiew__comment">
-              <h5>Очень приятный владелец, все чисто и опрятно</h5>
+              <h5>{{ review.comment }}</h5>
            </div>
-            <rating-stars></rating-stars>
-          </div>
-          <div class="review">
-            <div class="review__avatar">
-              <img src="@/assets/images/forcomment.png" alt="">
-            </div>
-            <div class="rewiew__comment">
-              <h5>Очень приятный владелец, все чисто и опрятно</h5>
-            </div>
-            <rating-stars></rating-stars>
-          </div>
-          <div class="review">
-            <div class="review__avatar">
-              <img src="@/assets/images/forcomment.png" alt="">
-            </div>
-            <div class="rewiew__comment">
-              <h5>Очень приятный владелец, все чисто и опрятно</h5>
-            </div>
-            <rating-stars></rating-stars>
+            <rating-stars :totalStars="review.rating"></rating-stars>
          </div>
        </div>
      </div>
@@ -111,12 +95,14 @@ import RatingStars from "@/components/RatingStars.vue";
 import TheHeader from "@/components/TheHeader.vue";
 import TheFooter from "@/components/TheFooter.vue";
 import offerService from "@/services/offer";
+import { getURL } from "@/services/images";

 export default {
  name: "OfferView",
  components: {TheFooter, TheHeader, RatingStars},
  data() {
    return {
+      imagePreviewId: 0,
      offer: {}
    };
  },
@@ -135,6 +121,32 @@ export default {
        'Room2': '2 комнаты',
        'Room3More': '3 комнаты и больше',
      }[this.offer.rooms]
+    },
+    imagePreview() {
+      return this.offer.images.length !== 0
+          ? `url(${getURL(this.offer.images[this.imagePreviewId].file)})`
+          : 'url(@/assets/images/offer1.png)';
+    },
+    ownerName() {
+      if (!this.offer.user) return;
+
+      const user = this.offer.user;
+      return user.first_name ?? `Пользователь #${user.id}`;
+    },
+    ownerPhoto() {
+      if (!this.offer.user) return;
+
+      const user = this.offer.user;
+      return user.photo ? `url(${getURL(user.photo)})` : 'url(/src/assets/images/user_standart.png)';
+    },
+  },
+  methods: {
+    url(path) {
+      return getURL(path);
+    },
+    showPhone() {
+      const phone = this.offer.user.phone ?? 'отсутствует';
+      alert(`Номер пользователя: ${phone}`);
    }
  },
  async mounted() {
@@ -151,4 +163,14 @@ export default {

 <style scoped>
  @import url("@/assets/css/offer.css");
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
 </style>