价格筛选、单页面拦截、升序降序和vuex的基本使用

价格筛选、单页面拦截、升序降序和vuex的基本使用

//登录页面
<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-input v-model="ruleForm.region"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      ruleForm: {
        name: "",
        region: "",
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        region: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
    };
  },
  mounted() {
    //this.axios.get('/').then((res) => {
    //this.result = res.result;
    //});
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.commit('add',this.ruleForm.name)
          this.$router.push('/gw-gwcshoye')
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped></style>

//首页页面
<template>
  <div>
    <p>
      <span> {{ $store.state.username }}</span>
      <span><button @click="app">退出</button></span>
      <span
        ><van-icon
          name="cart-o"
          size="20px"
          :badge="$store.state.ccc.length"
          @click="$router.push('/gw-gwcgwc')"
      /></span>
    </p>
    <button @click="sort">大小顺序</button>
    <div >
      <el-container >
        <el-col  :span='6'>
          <p @click="ling(0,30000)">全部</p>
          <p @click="ling(0,100)">0.00-100.00</p>
          <p @click="ling(100,500)">100.00-500.00</p>
          <p @click="ling(500,100)">500.00-1000.00</p>
          <p @click="ling(1000,2000)">1000.00-2000.00</p>
        </el-col>
        <el-container :span='18'>
          <el-main>
            <div class="abc">
                 <el-col  :sm="12" :md="8" :lg="5" class="aaa" v-for="(item, index) in result1" :key="index">
                    <img :src="item.pic" alt="" />
                <p class="bbb">{{ item.title }}</p>
                <p>￥{{ item.price }}</p>
                <p class="gwc"><button @click="add(item)">加入购物车</button></p>
                   </el-col>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
// 购物车标
import Vue from "vue";
import { Icon } from "vant";
Vue.use(Icon);

import { Toast } from "vant";
Vue.use(Toast);
export default {
  name: "",
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$store.state.username == "") {
        vm.$router.push("/gw-gwcdenglu");
      }
    });
  },
  data() {
    return {
      result: [],
      result1: [],
      sj:false,
    };
  },
  mounted() {
    this.$axios.get("/json/list.json").then((res) => {
      console.log(res);
      this.result = res.result;
      this.result1 = res.result;
    });
  },
  methods: {
    app() {
      this.$store.commit("shanchu");
      //   this.$router.push('/gw-gwcdenglu')
    },
    add(item) {
      Toast.success("添加成功");
      this.$store.commit("aaa", item);
    },
    ling(a,b) {
     var re= this.result.filter(function(item){
        return item.price>a&&item.price<=b
      })
       this.result1=re
    },
    sort(){
      this.sj=!this.sj;
      if(this.sj){
        this.result1.sort(function(a,b){
          return a.price-b.price
        })
      }else{
         this.result1.sort(function(a,b){
          return b.price-a.price
        })
      }
    }    
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.abc {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.aaa {
 
  border: 2px solid;
  margin: 1%;
}
.aaa:hover {
  padding-bottom: 10px;
  border: 2px solid blue;
}
img {
  width: 100%;
  height: 100px;
}
.bbb {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gwc {
  text-align: center;
}
</style>

//购物车页面
<template>
  <div>
      <p @click="$router.go(-1)">返回</p>
    <div v-for="(item, index) in $store.state.ccc" :key="index">
      <van-card
        num="1"
        :price="item.price"
        :desc="item.title"
        :thumb="item.pic"
      >
        <template #footer>
    <van-button @click="add(index)">删除</van-button>
  </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Card } from "vant";
Vue.use(Card);

import { Toast } from 'vant';
Vue.use(Toast);
export default {
  name: "",
  data() {
    return {};
  },
  mounted() {
    //this.axios.get('/').then((res) => {
    //this.result = res.result;
    //});
  },
  methods: {
      add(id){
        Toast.success('删除成功');
          this.$store.commit('shan',id)
      }
  },
  computed: {},
  watch: {},
};
</script>

<style scoped></style>

//筛选页面
<template>
  <div>
      <p @click="app">返回</p>
      {{$store.state.shx}}
      <div v-for="(item,index) in $store.state.shx" :key="index">
                <img :src="item[index].pic" alt="" />
                <p>{{ item[index].title }}</p>
                <p>￥{{ item[index].price }}</p>
      </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {};
  },
  mounted() { 
//this.axios.get('/').then((res) => {
//this.result = res.result;
//});
},
  methods: {
      app(){
          this.$store.commit('ss')
          this.$router.go(-1)
      }
  },
  computed: {},
  watch: {},
};
</script>

<style scoped>
</style>

效果图