Skip to content

Commit 9637a9d

Browse files
wenlan-coderwenlan-coder
committed
cartshop
1 parent 9c880de commit 9637a9d

22 files changed

+830
-56
lines changed

‎babel.config.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
module.exports = {
22
presets: [
33
'@vue/cli-plugin-babel/preset'
4+
],
5+
plugins: [
6+
['import', {
7+
libraryName: 'vant',
8+
libraryDirectory: 'es',
9+
style: true
10+
}, 'vant']
411
]
5-
}
12+
}

‎package-lock.json

+52-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,18 @@
1212
"core-js": "^3.6.5",
1313
"element-ui": "^2.15.1",
1414
"swiper": "^5.4.5",
15+
"vant": "^2.12.19",
1516
"vue": "^2.6.11",
1617
"vue-awesome-swiper": "^4.1.1",
17-
"vue-router": "^3.2.0"
18+
"vue-router": "^3.2.0",
19+
"vuex": "^3.6.2"
1820
},
1921
"devDependencies": {
22+
"@vue/babel-plugin-transform-vue-jsx": "^1.2.1",
2023
"@vue/cli-plugin-babel": "~4.5.0",
2124
"@vue/cli-plugin-router": "~4.5.0",
2225
"@vue/cli-service": "~4.5.0",
26+
"babel-plugin-import": "^1.13.3",
2327
"vue-template-compiler": "^2.6.11"
2428
}
2529
}

‎src/common/mixin.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import BackTop from 'components/content/backTop/BackTop'
2+
export const itemMixin={
3+
4+
data(){
5+
return {
6+
itemImgLoad:null
7+
}
8+
},
9+
mounted(){
10+
console.log("混入");
11+
this.homeImgListener=()=>{
12+
console.log("进入到组件");
13+
this.$refs.scroll.refresh();
14+
}
15+
this.$bus.$on("ImgLoad",this.homeImgListener)
16+
17+
},
18+
}
19+
20+
//混入backtop组件
21+
export const backTopMixin={
22+
components:{
23+
BackTop,
24+
25+
},
26+
data(){
27+
return{
28+
isShowBackTop:false
29+
}
30+
},
31+
methods:{
32+
backtop(){
33+
this.$refs.scroll.scrollTo(0,0);
34+
},
35+
listenBackTopPoy(position){
36+
this.isShowBackTop = -(position.y)>1000
37+
}
38+
}
39+
}

‎src/common/utils.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export function debounce(fn,delay){
44
return function(...args){
55
if(timer) clearTimeout(timer)
66
timer=setTimeout(()=> {
7-
fn.apply(this,args)
7+
fn(...args)
88
},delay);
99
}
1010
}

‎src/components/common/scroll/Scroll.vue

-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,6 @@ export default {
8080
//代理scrollto方法
8181
scrollTo(x,y,time=500){
8282
this.scroll&&this.scroll.scrollTo(x,y,time)
83-
8483
},
8584
//代理refresh方法
8685
refresh(){

‎src/components/content/goods/GoodsListItem.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default {
3030
},
3131
methods:{
3232
imgLoad(){
33-
console.log("goodslist组件里面的图片监听");
33+
3434
// if(this.$route.path.indexOf('/home')){
3535
// this.$bus.$emit('homeImgLoad')}
3636
// else if(this.$route.path.indexOf('/detail')){

‎src/components/content/tabBarMain/TabBarMain.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<img src="~assets/img/tabbar/shopcart_active.svg" alt="" slot="item-icon-active">
1818
<div slot="item-text">购物车</div>
1919
</tab-bar-item>
20+
2021
<tab-bar-item path='/profile'>
2122
<img src="~assets/img/tabbar/profile.svg" alt="" slot="item-icon">
2223
<img src="~assets/img/tabbar/profile_active.svg" alt="" slot="item-icon-active">
@@ -29,11 +30,12 @@
2930
<script>
3031
import TabBar from '../../common/tabbar/TabBar'
3132
import TabBarItem from '../../common/tabbar/TabBarItem'
32-
33+
import { Badge } from 'vant';
3334
export default {
3435
components:{
3536
TabBar,
3637
TabBarItem,
38+
[Badge.name]:Badge,
3739
}
3840
3941

‎src/main.js

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import router from './router'
44
import elementUi from 'element-ui'
55
import 'element-ui/lib/theme-chalk/index.css' //Element UI样式
66
import VueAwesomeSwiper from 'vue-awesome-swiper'
7+
import store from './store/index'
78
import 'swiper/css/swiper.css'
89
Vue.prototype.$bus = new Vue() //事件总线bus，进行简单同组件传值
910
Vue.use(elementUi) //使用element-ui组件
@@ -23,5 +24,6 @@ Vue.filter('dateFormat', function(originVal) {
2324

2425
new Vue({
2526
router,
27+
store,
2628
render: h => h(App)
2729
}).$mount('#app')

‎src/store/actions.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import {ADD_CART,ADD_COUNT} from './mutation-types'
2+
export default {
3+
addCart(context,payload){
4+
//1 some方法
5+
// var flag = false;
6+
// // 默认第一次,进来就遍历一遍,当遍历到相同的就count相加
7+
8+
// state.cardList.some(item => {
9+
// if (item.iid === payload.iid) {
10+
// item.count+=1;
11+
// flag = true;
12+
// return true;
13+
// }
14+
// })
15+
16+
// if (!flag) { //如果取非为真,则flase的值是假(判断flag值为假)
17+
// // payload.count=1;
18+
// // state.cardList.push(payload);
19+
// state.cardList.push({...payload,count:1})
20+
// }
21+
22+
// 2 for循环payload添加新商品方法
23+
// var flag=false;
24+
// for(let item of state.cardList){
25+
// //判断cardlist是否有新增一样的
26+
// if(item.iid===payload.iid){
27+
// item.count+=1;
28+
// flag=true;
29+
30+
// }
31+
// }
32+
// //没有找到
33+
// if(!flag){
34+
// payload.count=1;
35+
// state.cardList.push(payload)
36+
// }
37+
38+
39+
/// 3 indexof方法
40+
// let index = state.cardList.indexOf(payload);
41+
// if(index===-1){
42+
// let oldProduct =state.cardList[index];
43+
// oldProduct.count+=1;
44+
// }
45+
// else{
46+
// payload.count=1;
47+
// state.cardList.push(payload)
48+
// }
49+
50+
//4 es6新增find方法
51+
let oldProduct = context.state.cardList.find(item=>item.iid===payload.iid)
52+
if(oldProduct){
53+
context.commit(ADD_COUNT,oldProduct);
54+
}
55+
else{
56+
payload.count=1;
57+
context.commit(ADD_CART,payload)
58+
}
59+
//当然还有findindex等等方法
60+
}
61+
}

‎src/store/getters.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default {
2+
//obtain cardList array length
3+
getLength(state){
4+
return state.cardList.length;
5+
},
6+
//obtain cardList array
7+
getCardList:state=>state.cardList
8+
}

‎src/store/index.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Vue from 'vue'
2+
import Vuex from 'vuex'
3+
//安装插件
4+
Vue.use(Vuex)
5+
//创建store对象
6+
//导入
7+
import mutations from './mutations'
8+
import actions from './actions'
9+
import getters from './getters'
10+
const state = {
11+
cardList:[],
12+
}
13+
const store =new Vuex.Store({
14+
module:{
15+
},
16+
getters,
17+
state,
18+
//mutations里面不改写逻辑代码，异步代码，只写简单逻辑赋值代码
19+
//唯一目的就是修改state里面状态，每个方法完成事件金可能单一
20+
mutations,
21+
//业务逻辑代码，异步代码都在actions
22+
actions,
23+
24+
})
25+
//挂在到vue实例上
26+
export default store

‎src/store/mutation-types.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const ADD_COUNT ='addCount'
2+
export const ADD_CART ='addCart'

‎src/store/mutations.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import {ADD_CART,ADD_COUNT} from './mutation-types'
2+
//mutations里面不改写逻辑代码，异步代码，只写简单逻辑赋值代码
3+
//唯一目的就是修改state里面状态，每个方法完成事件金可能单一
4+
export default {
5+
//增加数量
6+
[ADD_COUNT](state,payload){
7+
payload.count+=1;
8+
},
9+
//添加到购物车
10+
[ADD_CART](state,payload){
11+
state.cardList.push(payload)
12+
},
13+
//delete shop
14+
del(state,index){
15+
state.cardList.splice(index,1);
16+
},
17+
//改变商品数量
18+
changeCount(state,index) {
19+
console.log(index);
20+
let ind =state.cardList.findIndex((item)=>{
21+
return item.iid===index.iid});
22+
console.log(ind);
23+
// console.log(state.cardList);
24+
// state.cartList[ind].count=index.count;
25+
// console.log(state.cardList[ind].count);
26+
// console.log(index.count);
27+
},
28+
}

0 commit comments

Comments
 (0)