/home/henzagold/site/pages/shop/ Current File: //home/henzagold/site/pages/shop/index.vue
<template>
  <div>
    <SubHeader title="لیست محصولات"  :backgroundImage="header" />
    <div class="section">
      <div class="container-fluid" style="padding-right:10%;padding-left:10% ">
        <div class="row">
          <div class="col-lg-4">
            <div class="sidebar sidebar-left">
              <div class="sidebar-widget">
                <h5>جستجو</h5>
                <div class="search-wrapper">
                  <input type="text" name="search" class="form-control" placeholder="مثال : گوشواره" @keyup.enter="getProducts()" v-model="query.search_text" >
                  <button type="button" class="btn-custom" @click="query.page=1;getProducts()" >
                    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                      <path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
                    </svg>
                  </button>
                </div>
              </div>
              <div class="sidebar-widget">
                <select2 unique-id="select_limit" v-model="query.limit" title="تعداد نمایش محصول در صفحه" :options="limit" />
                <div class="acr-collapse-trigger acr-custom-chevron-wrapper">
                  <h5>فیلتر محصولات</h5>
                  <div class="acr-custom-chevron">
                    <span></span>
                    <span></span>
                  </div>
                </div>
                <div class="acr-collapsable">
                  <div class="acr-filter-form">
                    <div style="padding: 0 27px;margin-top:5%">
                      <span>قیمت</span>
                      <span v-if="$store.state.filters.price[0] === $store.state.filters.price[1]">فقط {{ Math.floor($store.state.filters.price[0]) | priceUnit }}</span>
                      <span v-else>از {{ 1000000 | priceUnit  }} تا {{ 10000000 | priceUnit  }} </span>
                      <RangeSlider v-model="query.price_range" style="margin-top:50px" unique-id="price_slider"  :min="$store.state.filters.price[0]"  :max="$store.state.filters.price[1]" :step="500000" :start="$store.state.filters.price[0]" :end="$store.state.filters.price[1]" label-type="price" />
                      <br>
                    </div>
                    <div style="padding: 0 27px;margin-top:5%">
                      <span>وزن</span>
                      <span v-if="$store.state.filters.weight[0] == $store.state.filters.weight[1]">  فقط {{  $store.state.filters.weight[0]   }} گرم
                        </span>
                      <span v-else>از {{$store.state.filters.weight[0]}} گرم تا {{ $store.state.filters.weight[1] }} گرم</span>
                      <RangeSlider v-model="query.weight" style="margin-top:50px" unique-id="weight_slider"  :min="$store.state.filters.weight[0]"  :max="$store.state.filters.weight[1]" :start="$store.state.filters.weight[0]" :end="$store.state.filters.weight[1]" :step="0.5" />
                      <br>
                    </div>
                    <select2 style="margin-top:10%" unique-id="select_category" v-model="query.cats" title="دسته بندی"  searchable :options="category" />
                    <select2 style="margin-top:10%" unique-id="select_color" v-model="query.colors" title="رنگ" searchable :options="colors" />
                    <button type="button" class="btn-block btn-custom" @click="query.page=1;getProducts()" > اعمال فیلتر</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-8">
            <spin-loading :spinning="spinning"  />
            <div class="acr-global-product-controls">
              <div class="acr-product-active-filters">
                <h6 class="end" style="margin: 0" v-if="count>0" id="productList"> {{ count }} محصول یافت شد </h6>
              </div>
              <div class="acr-toggle-views">
                <a :class=" query.order_field === 'count_fav'?  'active' : null " style="padding: 5px;width: unset" @click="order('count_fav')" >
                  محبوب ترین
                </a>
                <a :class=" query.order_field === 'count_order'?  'active' : null "  style="padding: 5px;width: unset" @click="order('count_order')" >
                  پر فروش ترین
                </a>
                <a :class=" query.order_field === 'count_view'?  'active' : null "  style="padding: 5px;width: unset" @click="order('count_view')" >
                  پر بازدید ترین
                </a>
                <a :class="(query.order_field === 'grams' && query.order_by === 'asc') ?  'active' : null "  style="padding: 5px;width: unset" @click="order('grams')" >
                  ارزان ترین
                </a>
                <a :class="(query.order_field === 'grams' && query.order_by === 'desc') ?  'active' : null "  style="padding: 5px;width: unset" @click="order('grams','desc')" >
                  گران ترین
                </a>
              </div>
              <div class="acr-toggle-views d-none d-sm-block">
                <a :class="showGrid ?  'active' : null " data-toggle="tooltip" title="نمایش به صورت شبکه ای" @click="showGrid=true" >
                  <i>
                    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                      <path fill="currentColor" d="M4,2H20A2,2 0 0,1 22,4V20A2,2 0 0,1 20,22H4C2.92,22 2,21.1 2,20V4A2,2 0 0,1 4,2M4,4V11H11V4H4M4,20H11V13H4V20M20,20V13H13V20H20M20,4H13V11H20V4Z" />
                    </svg>
                  </i>
                </a >
                <a :class=" !showGrid ?  'active' : null " data-toggle="tooltip" title="نمایش به صورت لیست" @click="showGrid=false" >
                  <i>
                    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                      <path fill="currentColor" d="M21,19V17H8V19H21M21,13V11H8V13H21M8,7H21V5H8V7M4,5V7H6V5H4M3,5A1,1 0 0,1 4,4H6A1,1 0 0,1 7,5V7A1,1 0 0,1 6,8H4A1,1 0 0,1 3,7V5M4,11V13H6V11H4M3,11A1,1 0 0,1 4,10H6A1,1 0 0,1 7,11V13A1,1 0 0,1 6,14H4A1,1 0 0,1 3,13V11M4,17V19H6V17H4M3,17A1,1 0 0,1 4,16H6A1,1 0 0,1 7,17V19A1,1 0 0,1 6,20H4A1,1 0 0,1 3,19V17Z" />
                    </svg>
                  </i>
                </a>
              </div>
            </div>
            <div class="row" style="position: relative">
              <div style="margin: 0 auto" v-if="list.length==0">
                <img src="/img/nofound.svg" alt="محصولی یافت نشد" width="450px" />
                <h4 style="text-align: center">محصولی یافت نشد</h4>
              </div>
              <div  :class="showGrid ? 'col-xl-4 col-lg-6 col-md-6 col-sm-6':'col-md-12'" v-for="(item,index) in list" :key="item" >
                <product v-model="model" :list="showGrid ? false:true" :product="item" :key="item.id" />
              </div>
            </div>
            <div>
              <pagination
                v-model="query.page"
                :total-pages="Math.ceil(count/query.limit)"
                @pagechanged="onPageChange" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <fModal v-model="model" :max-width="'500px'">
      <template v-slot:header>
        عدم دسترسی
      </template>
      <template v-slot:body>
        <p style="text-align: center;margin: 30px 0;">برای افزودن محصول به علاقمندی ها باید ابتدا به حساب کاربری خود وارد شوید</p>
        <div class="flex" style="justify-content: space-evenly;">
          <a class="btn-custom primary" style="z-index: 0;margin-left: 14px" :href="`/customer/login?outerRoute=${$route.path}`">ورود به حساب کاربری</a>
          <button class="btn-custom rejectBtn" style="z-index: 0" @click="model = false">انصراف</button>
        </div>
      </template>
    </fModal>
  </div>
</template>

<script>
import SubHeader from "@/components/SubHeader";
import Product from "@/components/Product";
import Pagination from "@/components/Pagination";
import select2 from "@/components/select2";
import RangeSlider from "@/components/RangeSlider";
import SpinLoading from "@/components/SpinLoading";
import FModal from "@/components/fModal";
import axios from "~/plugins/axios"

export default {
  async asyncData({store, params, error,route, }) {
    try {
      let searchText=null;
      if(route.query.search)
      {
        searchText=route.query.search.split('+').join(' ');
        searchText=searchText.split('%20').join(' ');
      }
      let query={
        weight:route.query.weight || [],
        price_range:route.query.price || [],
        limit:route.query.limit || 24,
        orderBy:'asc',
        brands:route.query.brand || null,
        colors:route.query.color || null,
        search_text:searchText,
        page:parseInt(route.query.page) || 1,
        cats:params.id || null,
        order_by: undefined,
        order_field: undefined,
      };
      if(route.query.ready){
        Object.assign(query,{ready:true})
      }
      if(route.query.offer_day){
        Object.assign(query,{offer_day:true})
      }
      let res = await axios.post('/products',query);
      const list = res['rows']
      return {list , count: res["count"], page: res['page'],query }
    } catch (e) {
      console.log(`%c ${e}`,'color:blue;border:1px solid dodgerblue')
      error({statusCode: 404, message: `Post not found: ${e}`});
    }
  },
  layout:'MasterPage',
  name: "ShopPage",
  components:{
    FModal ,
    RangeSlider,
    Pagination,
    SubHeader,
    Product,
    select2,
    SpinLoading
  },
  methods:{
    getHegz(str){
      let x = str.split('/')
      return {
        name: x[0][0] !== '#' ? x[0] : x[1],
        color: x[0][0] == '#' ? x[0] : x[1]
      }
    },
    async order(field, type = 'asc') {
      this.query.order_by = type
      this.query.orderBy = type
      this.query.order_field= field
      //console.log(this.query)
      await this.getData()
    },
    async getData(){
      try {
        this.spinning=true;
        this.query.price_range=this.query.price_range.map((item)=>{ return parseFloat(item) });
        let res = await axios.post('/products',this.query);
        this.list=res['rows'];
        this.query.page=res['page'];
        this.count=res["count"];
        this.spinning=false;
        let temp=Object.assign({},this.$route.query);
        this.$router.push({path:this.$route.path,query:Object.assign(temp,{page:this.query.page,limit:this.query.limit})});
      } catch (e) {
        console.log(e)
        error({statusCode: 404, message: `Post not found : ${e}`});
      }
    },
    async onPageChange(){
      await this.getData();
      document.body.scrollTop = $('#productList').offset().top - 150;
      document.documentElement.scrollTop = $('#productList').offset().top - 150;
    },
    async getProducts(){
      await this.getData();
    },
  },
  head() {
    return {
      title:'هنزا گلد' + '|' +`لیست جدیدترین محصولات`,
    }
  },
  data(){
    return{
      flag:false,
      model: false,
      showGrid:true,
      spinning:false,
      limit:[{value:9,title:'9'},{value:12,title:'12'},{value:24,title:'24'}],
    }
  },
  computed:{
    header(){
      return this.$store.state.header
    },
    brands(){
      let brands=this.$store.state.config.brands;
      let brands_map=brands.map((item)=>{
        return {value:item.id,title:item.val}
      });
      brands_map.unshift({value:null,title:'تمام برندها'});
      return  brands_map;
    },
    category(){
      let category=this.$store.state.config.category.filter(item=> ![7,19,24].includes(item.id));
      let category_map=category.map((item)=>{
        return {value:item.id,title:item.title}
      });
      category_map.unshift({value:null,title:'تمام دسته بندی ها'});
      return category_map;
    },
    colors(){
      let colors=this.$store.state.config.colors;
      let colors_map=colors.map((item)=>{
        return {value:item.id,title:this.getHegz(item.title).name}
      });
      colors_map.unshift({value:null,title:'تمام رنگ ها'});
      return colors_map;
    },
    filterGram(){
      return  this.$store.state.config.filterGram.map((item)=>{
        return parseFloat(item);
      });
    },
    filterPrice(){
      return this.$store.state.config.filterPrice;
    }
  },
  mounted() {
    //console.log(this.query);
    /*-------------------------------------------------------------------------------
    Tooltips
    -------------------------------------------------------------------------------*/
    $('[data-toggle="tooltip"]').tooltip();
    /*-------------------------------------------------------------------------------
      Sidebar filter collapse (Product grid and list)
    -------------------------------------------------------------------------------*/
    $(".acr-collapse-trigger").on('click', function() {
      $(this).next().slideToggle(200);
    });
  },
  created() {
    this.$store.dispatch('bread/set',['لیست محصولات']);
  }
}
</script>

<style>
html {
  scroll-behavior: smooth;
}

/*motion*/
.show-enter-active {
  animation: show 1s;
}
.show-leave-active {
  animation: show .7s reverse;
}
@keyframes show{
  0% {
    height: 0;
  }
  100% {
    height: unset;
  }
}
.fade-enter-active {
  animation: show .2s;
}
.fade-leave-active {
  animation: show .2s reverse;
}
@keyframes fade{
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>