电商小程序

newsList.vue--------------------------------------------------------------------------------------------------------------

<template>
  <div class="newList">
    <div class="newListContent">
      <div class="listItem" v-for="item in list" :key="item.id" @click="goToNewsInfo(item.id)">
        <img class="img" :src="item.img_url" alt="" />
        <div class="content">
          <span class="content-desc">{{ item.title }}</span>
          <span class="content-bottom">
            <span>发表时间: {{ item.add_time | formatDate }}</span>
            <span>点击次数: {{ item.click }}</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.$root.n = false;
    this.getNewsList();
  },
  methods: {
    // 页面初始化   首屏渲染
    getNewsList() {
      this.$http
        .get("http://www.liulongbin.top:3005/api/getnewslist")
        .then((res) => {
        //   console.log("res:", res);
          if(res.data.status == 0) {
              this.list = res.data.message;
            //   console.log(this)
              this.$toast({
                  message: "拉取成功",
                  position: 'bottom'
              })
          }
        });
    },
    // 进入详情页面
    goToNewsInfo(id) {
        // console.log("id:", id);
        // this.$router.push({name: 'newsInfo', params: {id: id}})
        this.$router.push(`/newsInfo/${id}`)
    }
  },
};
</script>

newsListInfo.vue--------------------------------------------------------------------------------

<template>
  <div class="newsDetail">
    <div class="detailInfo">
      <div class="content">
        <span class="content-desc">{{ newsInfo.title }}</span>
        <span class="content-bottom">
          <span>发表时间: {{ newsInfo.add_time | formatDate }}</span>
          <span>点击次数: {{ newsInfo.click }}</span>
        </span>
      </div>
      <div v-html="newsInfo.content"></div>
      <!-- 发表评论 -->
      <comment :id="id"/>
    </div>
  </div>
</template>

<script>
import comment from '@/components/subComponents/comment.vue'
export default {
  data() {
    return {
      id: "",
      newsInfo: {},
    };
  },
  created() {
    // console.log("this.$route:", this.$route);
    // 隐藏底部菜单
    this.$root.n = false;
    this.id = this.$route.params.id;
    this.getNewsListInfo(this.id);
  },
  methods: {
    // 获取详情页数据
    getNewsListInfo(id) {
      this.$http
        .get("http://www.liulongbin.top:3005/api/getnew/" + id)
        .then((res) => {
          // console.log("res:", res);
          this.newsInfo = res.data.message[0];
        });
    },
  },
  components: {
    comment
  }
};
</script>

组件 comment.vue-----------------------------------------------------------------------------

<template>
    <div class="comment">
        <h1>发表评论</h1>
        <div class="text">
            <textarea class="textA" v-model="content" placeholder="听说你的爆料很有料..."></textarea>
        </div>
        <van-button color="#7232dd" plain size="large" @click="postComment">提交评论</van-button>
        <div class="comitem" v-for="(item, index) in comments" :key="index">
            <div class="comTitle">
                <span>第{{ index+1 }}楼 用户: {{ item.user_name }} 发表时间: {{ item.add_time | formatDate }}</span>
            </div>
            <div class="comContent">{{ item.content }}</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageindex: 1,
            comments: [],
            content: ''
        }
    },
    props: {
        id: {
            type: String,   // 当前id接收的是 string 类型 的值
            default: null
        }
    },
    created() {
        // console.log("id:", this.id);
        this.getComment(this.id);
    },
    methods: {
        // 获取当前详情页面的评论数据
        getComment(id) {
            this.$http.get(`http://www.liulongbin.top:3005/api/getcomments/${id}?pageindex=${this.pageindex}`)
            .then( res => {
                // console.log("res:", res);
                this.comments = res.data.message;
            })
        },
        // 提交评论
        postComment() {
            this.$http.post(`http://www.liulongbin.top:3005/api/postcomment/${this.id}`, {content: this.content})
            .then( res => {
                // console.log("res:", res);
                if(res.data.status == 0) {
                    this.getComment(this.id);
                }
                this.content = "";
            })  
        }
    }
}
</script>

购物车===================================================================

goodList.vue===============================================================

<template>
    <div class="goods">
        <div class="shop_goods">
            <div class="goods_item" v-for="item in goodsList" :key="item.id" @click="goToGoodsDetail(item.id)">
                <img class="img" v-lazy="item.img_url" />
                <div class="title">{{ item.title }}</div>
                <div class="info">
                    <p class="goods_price">
                        <span class="now_price">现价: {{ item.sell_price }}</span>
                        <span class="older_price">原价: {{ item.market_price }}</span>
                    </p>
                    <p class="goods_sell">
                        <span>热卖中</span>
                        <span>剩余{{ item.stock_quantity }}件</span>
                    </p>
                </div>
            </div>
        </div>
        <van-button type="info" block @click="moreGoods">加载更多</van-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageindex: 1,
            goodsList: [],
        }
    },
    created() {
        this.$root.n = false;
        this.getGoodsList();
    },
    methods: {
        // 获取商品列表数据
        getGoodsList() {
            this.$http.get(`http://www.liulongbin.top:3005/api/getgoods?pageindex=${this.pageindex}`)
            .then( res => {
                // console.log("res:", res);
                if(res.data.message.length == 0) {
                    this.$toast({
                        message: '已经是最后一页了'
                    })
                } else {
                    this.goodsList = this.goodsList.concat(res.data.message);
                }
            })
        },
        // 加载更多功能
        moreGoods() {
            // 更改页数
            this.pageindex++;
            this.getGoodsList();
        },
        // 跳转详情页
        goToGoodsDetail(id) {
            this.$router.push({name: 'goodsListInfo', query: {id: id}})
        }
    }
}
</script>

goodsListInfo.vue=======================================================

<template>
  <div class="goodsInfo">
    <div class="goodsInfo_swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in goodsBannerList" :key="index">
          <img class="img" :src="item.src" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="info">
      <div>商品名称123123123</div>
      <div class="">
        <p>
          <span>市场价: {{ goodsInfo.market_price }}</span>
          <span>销售价: {{ goodsInfo.sell_price }}</span>
        </p>
        <p>
          <van-field name="stepper" label="购买数量">
            <template #input>
              <van-stepper v-model="stepper" />
            </template>
          </van-field>
        </p>
        <p>
            <van-button color="#dd524d" plain @click="goToCar">立即购买</van-button>
            <van-button color="#8a6de9" plain @click="addCar" >加入购物车</van-button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      goodsBannerList: [],
      stepper: 0,
      goodsInfo: {}
    };
  },
  created() {
    // console.log("this.$route:", this.$route);
    this.id = this.$route.query.id;
    this.getGoodsBanner(this.id);
    this.getGoodsInfo(this.id)
  },
  methods: {
    // 获取当前商品详情的  轮播图
    getGoodsBanner(id) {
      this.$http
        .get(`http://www.liulongbin.top:3005/api/getthumimages/${id}`)
        .then((res) => {
        //   console.log("res:", res);
          this.goodsBannerList = res.data.message;
        });
    },
    // 获取商品详情数据
    getGoodsInfo(id) {
        this.$http.get(`http://www.liulongbin.top:3005/api/goods/getinfo/${id}`)
        .then( res => {
            // console.log("res:", res);
            this.goodsInfo = res.data.message[0]
        })
    },
    // 立即购买 跳转到  购物车
    goToCar() {
        this.$router.push('/shopCar');
        this.$root.n = true;
    },
    // 加入购物车
    addCar() {
        // 要将数据放置在购物车页面
       vuex
       let goods = {
           id: this.id,
           title: this.goodsInfo.title,
           price: this.goodsInfo.sell_price,
           count: this.stepper,
           selected: true
       }
    //    console.log("goods:", goods);
        // 通过commit 触发 addtocar 这个事件类型  来提交 加入购物车的数据
        this.$store.commit('addtocar', goods);
    }
  },
};
</script>

vuex==============================================================

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 初始化状态
  state: {
    // 默认声明一个数组  来 保存 购物车的数据
    shopcar: JSON.parse(localStorage.getItem('shopcar')) || [],
  },
  // getters  派生新的状态
  getters: {
    shopcar_goods(state) {
      return state.shopcar;
    },
    // 总价 = 每条数据的单价 * 数量 的 累计和   // 受控于  选中状态
    goods_total(state) {
      let sumPrice = 0;   // 默认总价为 0
      state.shopcar.forEach( item => {
        if(item.selected) {   // 判断是否选中
          sumPrice += item.price * item.count
        }
      });
      // console.log("sumPrice:", sumPrice);
      return sumPrice * 100;
    }
  },
  // 同步更改state数据
  mutations: {
    // 加入购物车
    addtocar(state, payload) {
      // console.log("state:", state, "payload:", payload);
      // state.shopcar.push(payload);
      let flag = false;
      state.shopcar.some(item => {
        // console.log("item:", item);
        if(item.id == payload.id) {
          // id相同  意味着 之前已经加入到了购物车  只需要改变数据的数量即可
          item.count += Number(payload.count);
          // 跳出当前循环
          flag = true;
        }
      })
      // 在购物车中没有加入该数据是  直接添加到购物车即可
      if(!flag) {
        state.shopcar.unshift(payload);
      }
      this.commit("localStorageGoods", state);
    },
    // 数量加减   修改state数据  
    updateCount(state, payload) {
      // console.log("payload:", payload);
      // console.log("state:", state);
      state.shopcar.forEach( item => {
        // 判断传入的id 与 数据中的某条数据的id  相同
        if(item.id == payload.id) {
          // 进行对应修改count变化
          item.count = payload.count;
        }
      })
      this.commit("localStorageGoods", state);
    },
    // 修改选中状态
    updateSelect(state, payload) {
      // console.log("payload:", payload);
      state.shopcar.forEach( item => {
        // 判断传入的id 与 数据中的某条数据的id  相同
        if(item.id == payload.id) {
          // 进行对应修改selected变化
          item.selected = payload.selected;
        }
      })
      this.commit("localStorageGoods", state);
    },
    // 删除功能
    deleteGoods(state, payload) {
      state.shopcar = state.shopcar.filter( item => {
        return item.id !== payload.id
      });
      // console.log("arr:", arr);
      this.commit("localStorageGoods", state);
    },
    // 本地存储
    localStorageGoods(state) {
      localStorage.setItem("shopcar", JSON.stringify(state.shopcar));
    }
  },
  // 异步提交mutations 来 修改state数据
  actions: {
  }
})