pk-mall/src/view/goods/goodsList/index.vue

<template>
  <div class="login-wrapper">
    <div>
      <indexHeaders @eventIsNum="eventIsNum"/>
    </div>
    <div class="goods-content">
      <div class="goods-search">
        <div class="goods-search-text">搜商品</div>

        <div class="goods-search-input">
          <div class="inputs">
            <el-input placeholder="商品名称搜索" maxlength="20" v-model="goodsName"></el-input>
          </div>
          <div class="input-bg" @click="clickTap">
            <img src="http://screen.zhousi.hdlkeji.com/aksdbn/img/index/search-icon.png">
          </div>
        </div>
      </div>
      <div class="screen">
        <div class="screen-list" @click="screenTaps(index)" :class="screenIndex === index?'screenStyle':''" v-for="(item,index) in screenList" :key="index">
          {{item.name}}
        </div>
       <div style="cursor: pointer" @click="clickTaps">
         <div class="uptriangles" :class="sortDesc==0?'colorStyles':''"></div>
         <div class="uptriangle" :class="sortDesc==1?'colorStyle_s':''"></div>
       </div>
      </div>
      <div class="goods-contents">

        <div v-if="goodsList.arr!=''" class="flex-s">
         <div class="goods-lists"   @click="routeTap('/goodsDetail',item.id)"  v-for="(item,index) in goodsList.arr" :key="index">
           <div class="goods-img">
             <img :src="item.logo[0]">
           </div>
           <div class="goods-name overflow1" >{{item.name}}</div>
           <div class="price">
             热销价：<span >{{item.amount}}</span>
           </div>
           <div class="goods-rule overflow1">商品型号：{{item.describe}}</div>
           <div class="buttons">立即抢购</div>
         </div>

       </div>
        <div class="pages">
          <el-pagination
              v-if="totalNumber>10"
              background
              layout="prev, pager, next"
              :total="totalNumber"
              class="mt-4"
              :page-size="limit"
              @current-change="handleCurrentChange"
          />
        </div>


      </div>

    </div>
    <div>
      <RightSliderBar/>
    </div>
  </div>
  <Footer/>
</template>

<script setup>
import {onUpdated, provide, reactive, ref,onMounted} from 'vue'
import indexHeaders from '@/components/Index/indexHeaders.vue'

import LeftSliderBar from '@/components/Index/LeftSliderBar.vue'
import RightSliderBar from '@/components/Index/RightSliderBar.vue'
import CountDate from '@/components/Index/CountDate.vue'
import Footer from '@/components/Tool/Footer.vue'
import {goodsLists, user_lsp} from "@/api/menu1";
import {useRouter} from "vue-router";
import {getUrlParams2} from "@/utils";
const routeTap=(url,id)=>{
  $router.push({path:url,query:{id:id}})
}
const category_id=ref("")
//记录访问次数
if(localStorage.getItem('USER__INFO__')){
  user_lsp().then((res)=>{
  })
}
let page=ref(1)
let limit=ref(12)
let totalNumber=ref(null)
const clickTaps=()=>{
  if(sortDesc.value==0){
    sortDesc.value=1
  }else{
    sortDesc.value=0
  }
  goodsList_s();
}
const handleCurrentChange=(size)=>{
  page.value=size
  goodsList_s()
}

const goodsName = ref('')
const screenIndex = ref(0)
const goodsList =reactive({
  arr: []
})
let sorts={
  "0":"recommend",
  "1":"amount",
  "2":"sell"
}
let sortDesc=ref(0)
const screenList =[
  { id: '1', name: '推荐' },
  { id: '2', name: '价格' },
  { id: '3', name: '销量' }
]
const screenTaps = (index) =>{
  screenIndex.value=index;
  goodsList_s()
}
const urls = getUrlParams2(window.location.href);
onMounted(()=>{
  if(urls.userName){
    goodsList_s(urls.userName)
  }
  if(urls.sortId){
    category_id.value=urls.sortId
    setTimeout(()=>{
      goodsList_s()

    },50)
  }
})
onUpdated(()=>{

})
const eventIsNum=(value)=>{
  goodsName.value=value
  goodsList_s();
}
const goodsList_s=(value)=>{
  if(urls.userName){
    goodsName.value=value
  }
  const datas={
    page:page.value,
    limit:limit.value,
    name:value,
    sort_dir:sortDesc.value==0?'desc':'asc',
    sort:sorts[screenIndex.value],
    category_id:category_id.value
  }
  goodsLists(datas).then((res)=>{
    if(res.data){
      goodsList.arr=res.data.data
      totalNumber.value=res.data.total
    }
  })
}
const total=ref(1)
const currentPage3 = ref(1)
const pageSize3 = ref(10)
const disabled = ref(false)
const $router=useRouter()
const clickTap=(index)=>{
  urls.userName=goodsName.value
  goodsList_s(goodsName.value);
}
</script>

<style lang="less" scoped >
.colorStyles{
  border-top: 5px solid red!important;
}
.colorStyle_s{
  border-bottom: 5px solid red!important;

}
.uptriangles {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #999;
  position: absolute;
  right: 37%;
  bottom: 20px;
  transform: rotate(180deg);
  left: 300px;
}
.uptriangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #999;
  position: absolute;
  right: 37%;
  bottom:12px;
  transform: rotate(180deg);
  left: 300px;
}
.flex-s{
  display: flex;
  flex-wrap: wrap;
}
  /deep/ .el-input .el-input__inner{
    height: 38px;
    line-height: 38px;
    border: none;
  }
  .login-wrapper{
    background-color: #F7F8FA;
    .goods-content{
      padding: 30px 260px;
      .pagination{
        text-align: center;
      }
      .goods-contents{
        margin-left: -15px;
        .goods-lists{
          cursor: pointer;
          width: 210px;
          //height: 314px;
          background: #FFFFFF;
          border-radius: 2px;
          padding: 10px;
          margin: 0 0 10px 0;
          .buttons{
            cursor: pointer;
            height: 40px;
            background-color: #4171B3;
            color: #fff;
            border-radius: 2px;
            font-size: 16px;
            text-align: center;
            line-height: 40px;
            margin: 10px 0;
          }
          .goods-name{
            color: #333;
            font-size: 16px;
            margin-top: 10px;
            font-weight: 500;
          }
          .goods-rule{
            color: #999;
            font-size: 12px;
          }
          .price{
            color: #333;
            font-size: 14px;
            margin: 10px 0 15px 0;
            span{
              color: #EA2813;
            }
          }
          .goods-img{
            text-align: center;
            img{
              width: 220px;
              height: 220px;
            }
          }
        }
      }
      .screen{
        position: relative;
        height: 40px;
        background: #FFFFFF;
        border-radius: 2px;
        border: 1px solid #D7DBE0;
        margin-top: 22px;
        display: flex;
        margin-bottom: 15px;

        .screenStyle{
          color: #fff;
          background-color: #4171B3;
        }
        .screen-list{
          width: 96px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          font-size: 16px;
          cursor: pointer;
        }
      }
      .goods-search{
        display: flex;
        .goods-search-text{
          color: #333;
          font-size: 18px;
          margin: 10px 30px 0 0;
        }
        .goods-search-input{
          width: 302px;
          height: 40px;
          background: #FFFFFF;
          border-radius: 2px;
          border: 1px solid #CECECE;
          display: flex;
          box-sizing: border-box;
          justify-content: space-between;
          .input-bg{
            cursor: pointer;
            width: 50px;
            background: #4171B3;
            border-radius: 2px;
            img{
              width: 20px;
              height: 20px;
              margin: 10px 15px;
            }

          }
        }
      }
    }

  }
</style>